네이티브하면서도 통합된: Xmind가 크로스 플랫폼 디자인을 바라보는 방식

여러 기기에서 Xmind를 사용해 보셨다면, 플랫폼을 전환할 때 약간의 매끄럽지 못한 느낌을 한 번쯤 경험해 보셨을 것입니다. 버튼 모양이 미세하게 다르고, 상호작용이 예상과 다르게 작동할 때가 있습니다. 기능이 망가진 것은 아니지만, 왠지 해당 플랫폼을 위해 세심히 만들어지지 않은 듯한 기분이 듭니다.

저희 역시 같은 아쉬움을 느꼈습니다. 그래서 한 가지 결정을 내렸습니다. Xmind는 단순히 작동하는 것에 그치지 않고, macOS, Windows, iOS, Android 각각의 플랫폼에서 진정한 ‘네이티브’ 앱처럼 느껴져야 한다는 것입니다. 핵심 구조와 논리, 익숙한 제품의 사용감은 그대로 유지하되, 각 플랫폼에 가장 잘 어울리는 옷을 입히기로 했습니다.

저희가 이 작업을 어떻게 진행했는지 소개해 드립니다.

대부분의 크로스 플랫폼 앱들이 마주하는 문제

가장 전형적인 접근 방식은 하나의 UI를 만들어 모든 플랫폼에 그대로 배포하는 것입니다. 이 방식은 비용이 적게 들고 속도가 빠르며 일관성을 유지하기 쉽습니다. 실제로 대부분의 앱이 이 방식을 따르고 있으며, 솔직히 많은 사용자들도 이를 감수하며 사용합니다.

하지만 그 결과는 모든 플랫폼에서 작동은 하지만, 그 어떤 플랫폼에도 완전히 어울리지 않는 앱이 되고 맙니다.

• Mac 사용자들은 다른 Mac 앱들과 생김새가 다르다는 것을 알아챕니다.

• Android 사용자들은 iOS 앱을 그대로 이식해 온 듯한 느낌을 받습니다.

• 대놓고 불만을 제기하는 사람은 없지만, 이 미세한 이질감은 점차 쌓여갑니다.

그 대안으로 각 플랫폼에 맞춰 개별적으로 디자인하는 것은 이상적이지만 현실적으로 실행하기 매우 어렵습니다. 비용과 시간이 너무 많이 소요되며, 네 가지 서로 다른 디자인을 유지 관리하다 보면 팀은 결국 지쳐서 다시 하나로 타협하게 됩니다.

저희는 두 가지 방식 모두 만족스럽지 않았습니다. 그래서 완전히 새로운 접근 방식을 고민하기 시작했습니다.

같은 앱, 다른 옷

사람이 옷을 입는 방식을 생각해 보세요. 공식 미팅에서는 정장을, 주말에는 캐주얼을, 토요일 아침 운동할 때는 운동복을 입습니다. 세 가지 모습은 모두 다르지만, 우리는 그가 누구인지 한눈에 알아봅니다. 그 사람의 정체성은 옷이 아니라 행동 방식, 말투, 사람을 대하는 태도에 있기 때문입니다.

Xmind도 마찬가지입니다. 모든 플랫폼에서 모든 요소가 완벽히 같을 필요는 없습니다. 가장 핵심적인 부분의 일관성만 유지되면 됩니다.

변하는 것: 외관 (The Surface)

버튼의 형태, 사용된 질감, 애니메이션, 심지어 텍스트 문구의 톤앤매너까지 각 플랫폼 고유의 규칙을 철저히 따릅니다.

이 방식은 분명 더 많은 노력이 필요합니다. 하지만 Xmind가 단순히 각 플랫폼에서 '실행만 되는 것'을 넘어, 마치 처음부터 그 자리에 어울리는 앱처럼 느껴지게 만드는 유일한 방법입니다.

유지되는 것: 구조 (The Structure)

도구가 위치하는 곳, 기능이 조직된 방식, 여러 맵 사이를 탐색하는 방법 등은 모든 플랫폼에서 완전히 동일하게 유지됩니다.

상단의 탐색 영역, 중앙의 캔버스, 데스크톱에서는 측면에 위치하고 모바일에서는 하단에서 위로 슥 올라오는 속성 패널, 그리고 하단의 맵 탭 구조 등이 이에 해당합니다.

Mac을 쓰다가 iPad로 기기를 전환해도 새로 익혀야 할 것은 전혀 없습니다. 디자인은 다르게 보일지라도, 이미 익숙한 Xmind 방식 그대로 작동하기 때문입니다. 보이지 않게 작동하는 이러한 구조적 일관성 덕분에, 사용자는 길을 잃지 않으면서도 각 플랫폼에 최적화된 화면을 자유롭게 경험할 수 있습니다.

절대로 변하지 않는 것: 핵심 가치 (The Core)

모든 디자인의 기저에는 애플이나 구글이 향후 새로운 디자인 언어를 도입하더라도 흔들리지 않고 유지될 몇 가지 원칙이 있습니다.

• 캔버스는 언제나 가장 중요한 주인공입니다. UI는 뒤로 한 걸음 물러나 조력자 역할을 합니다.

• 복잡한 기능들은 필요할 때만 나타나고, 사용하지 않을 때는 화면을 가리지 않습니다.

• 실행 취소(Undo)는 무제한입니다. 창의적인 작업에는 결과물 손상에 대한 걱정 없이 마음껏 실험해 볼 수 있는 자유가 필요합니다.

• 빠른 성능은 언제나 화려한 겉모습보다 중요합니다. 앱의 구동 속도를 늦추면서까지 넣어야 할 가치가 있는 애니메이션이나 시각적 효과는 없습니다.

이는 단순한 디자인 결정을 넘어, 저희가 드리는 약속에 가깝습니다.

이 모든 것을 지속하는 비결

이 이야기를 모두 듣고 나면 당연히 이런 의문이 들 것입니다. ‘네 개의 플랫폼, 네 개의 시각 언어, 서로 다른 규칙을 일일이 맞추면서 어떻게 앱을 정상적으로 유지 관리한다는 말인가?’

저희는 2년 전, 당시에는 크게 시급해 보이지 않던 한 가지 중요한 결정을 내렸습니다. 바로 Xmind만을 위한 제대로 된 디자인 시스템을 구축하는 것이었습니다.

이 시스템이 해결하는 핵심 문제는 설명하긴 쉽지만 구현하긴 놀라울 정도로 어렵습니다. 바로 모든 플랫폼의 차이점을 디자인 시스템 한 곳에서 일괄 흡수하여, 제품의 나머지 부분들이 신경 쓰지 않게 만드는 것입니다. 예를 들어, 시스템 내에 버튼은 단 하나만 존재합니다. 이 버튼이 macOS에서는 자동으로 알약 모양이 되고, Windows에서는 둥근 사각형이 됩니다. 파일마다 쫓아다니며 수정하거나 네 번씩 반복 수정할 필요가 없고, 플랫폼 간에 서로 미세하게 어긋나는 현상도 방지하여 단 한 번의 변경만으로 모든 곳에 일괄 적용됩니다.

이러한 든든한 기반이 없었다면 우리가 앞서 제시한 방향성은 결코 지속될 수 없었을 것입니다. 매번 업데이트할 때마다 이번 스프린트에서는 어떤 플랫폼의 수정을 우선시해야 할지 타협해야 했을 것이며, 새로운 기능이 도입될 때마다 네 가지의 서로 다른 기형적 버전이 생겨나 점차 같은 제품이라고 느낄 수 없게 되었을 것입니다. 결국에는 비용 부담을 이기지 못하고 다시 하나의 평범한 통합 UI로 회귀하게 되었을 것입니다.

우리가 디자인 시스템을 공들여 만든 이유는, 올바른 방향을 추진하는 것을 넘어 이를 지속 가능하게 반복하기 위함이었습니다.

여러분은 이 시스템의 존재를 직접 눈치채지 못할 수도 있습니다. 하지만 그것이 바로 이 시스템이 완벽하게 작동하고 있다는 증거입니다.

결론

새로운 Xmind가 곧 여러분을 찾아옵니다.

더 아름다운 모습으로 업그레이드되었습니다. 하지만 더 솔직하게 표현하자면, 이는 겉으로는 잘러 드러나지 않던 지난 2년간의 노력의 결실입니다. 각 플랫폼의 특징을 깊이 연구하고, 이를 지속적으로 유지할 수 있는 기반을 다졌으며, 단지 여러 기기를 사용한다는 이유만으로 사용자가 경험을 타협하게 만들지 않겠다는 약속을 실천해 낸 결과물입니다.

저희 역시 매일 다양한 기기에서 Xmind를 사용하고 있습니다. 기능만 대충 돌아가는 아쉬운 사용 경험을 저희도 용납할 수 없기에, 여러분에게도 결코 그런 타협된 경험을 드리고 싶지 않습니다.