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

여러 기기에서 Xmind를 사용해 보셨다면, 플랫폼을 전환할 때 느껴지는 작은 마찰을 아마 경험해 보셨을 겁니다. 버튼 모양이 조금 다르고, 어떤 인터랙션은 예상과 다르게 동작합니다. 고장 난 것은 없지만, 어딘가 이곳을 위해 완전히 만들어진 것은 아닌 듯한 느낌이 듭니다.

우리도 그 느낌을 알고 있었습니다. 그래서 결정을 내렸습니다: Xmind는 모든 플랫폼에서 네이티브하게 느껴져야 한다—단순히 기능적인 수준이 아니라, macOS, Windows, iOS, Android에서도 진정으로 제자리에 있는 듯해야 한다. 익숙한 Xmind의 동일한 핵심 구조, 동일한 로직, 동일한 느낌을 유지하되—실행되는 곳에 맞는 옷을 입은 모습이어야 합니다.

우리가 이를 구현한 방식은 다음과 같습니다.

대부분의 크로스플랫폼 앱이 가진 문제

일반적인 접근 방식은 이렇습니다. 하나의 UI를 만들어 모든 곳에 배포하는 것. 더 저렴하고, 더 빠르며, 일관성도 유지됩니다. 대부분의 앱이 이렇게 하고—솔직히 대부분의 사용자는 이를 감수합니다.

그 결과, 모든 플랫폼에서 작동하지만 어느 곳에서도 네이티브하게 느껴지지 않는 앱이 됩니다:

• Mac 사용자는 이것이 다른 Mac 앱처럼 보이지 않는다는 점을 알아차립니다.

• Android 사용자는 이것이 분명히 iOS에서 이식된 것임을 알아차립니다.

• 큰소리로 불만을 제기하는 사람은 없지만, 그 마찰은 조용히 쌓여 갑니다.

대안인 각 플랫폼마다 따로 디자인하는 방식은 그럴듯해 보이지만 거의 일어나지 않습니다. 비용이 너무 많이 들고, 시간이 너무 오래 걸리며, 서로 다른 네 가지 디자인을 유지하는 팀은 결국 지치게 되고, 어차피 하나로 수렴하게 됩니다.

우리는 어느 쪽도 만족스럽지 않았습니다. 그래서 이 문제를 바라보는 다른 방식을 찾았습니다.

같은 앱, 다른 옷차림

사람의 옷차림을 떠올려 보세요. 격식 있는 회의에서는 정장, 주말에는 캐주얼, 토요일 아침에는 운동복. 서로 다른 세 가지 모습이지만, 우리는 매번 즉시 그 사람을 알아봅니다. 정체성은 옷에 있는 것이 아니라, 몸가짐과 말투, 그리고 사람을 대하는 방식에 있기 때문입니다.

Xmind도 같은 방식으로 작동합니다. 모든 것이 플랫폼 간에 동일해야 하는 것은 아니지만, 정말 중요한 것들은 언제나 일관되어야 합니다.

바뀌는 것: 표면

버튼의 형태, 재질감, 애니메이션, 심지어 카피의 어조까지도—이러한 요소들은 각 플랫폼의 고유한 관례를 완전히 따릅니다.

실제로 더 많은 작업이 필요하기 때문에 그렇게 들립니다. 하지만 이것이야말로 Xmind가 단순히 각 플랫폼에서 실행되는 것이 아니라, 그곳에 속해 있는 것처럼 느껴지게 하는 유일한 방법입니다.

유지되는 것: 구조

도구가 어디에 있는지, 기능이 어떻게 구성되는지, 맵 사이를 어떻게 이동하는지—이 모든 것은 어디서나 완전히 동일하게 유지됩니다.

상단에는 내비게이션. 중앙에는 캔버스. 데스크톱에서는 측면에 속성 패널, 모바일에서는 아래에서 위로 올라오는 패널. 하단에는 맵 탭.

Mac에서 iPad로 전환해도 새로 배울 것은 없습니다. 앱의 모습은 다르지만, 이미 알고 있는 Xmind처럼 작동합니다. 제대로 작동할 때는 보이지 않는 이 일관성이 있어야만, 사용자가 길을 잃는 느낌 없이 표면은 자유롭게 바뀔 수 있습니다.

절대 바뀌지 않는 것: 핵심

모든 것의 아래에는, 플랫폼이 무엇이든, 혹은 Apple이나 Google이 다음에 어떤 새로운 디자인 언어를 만들든 상관없이 변하지 않는 몇 가지가 있습니다:

• 캔버스는 언제나 주인공입니다. UI는 한발 물러납니다.

• 복잡한 기능은 필요할 때는 제자리에 있고, 필요하지 않을 때는 방해되지 않습니다.

• 실행 취소는 무제한입니다—창작 작업에는 무언가를 망가뜨릴 걱정 없이 시도할 수 있는 자유가 필요합니다.

• 언제나 빠름이 아름다움보다 우선합니다. 어떤 애니메이션이나 시각적 디테일도 앱을 느리게 느껴지게 할 만큼의 가치는 없습니다.

이것들은 단순한 디자인 결정이 아닙니다. 오히려 약속에 가깝습니다.

이 모든 것을 유지할 수 있는 이유

이 모든 내용을 읽고 나면 자연스러운 의문이 듭니다. 네 개의 플랫폼, 네 개의 시각 언어, 곳곳마다 다른 관례—전체가 무너지지 않도록 어떻게 실제로 이를 관리할 수 있을까요?

2년 전, 당시에는 급하지 않다고 느껴졌지만 중요한 결정을 내렸습니다. Xmind를 위한 제대로 된 디자인 시스템을 구축하기로 한 것입니다.

이 시스템이 해결하는 핵심 문제는 설명하기는 쉽지만 실제로는 놀라울 만큼 어렵습니다. 모든 플랫폼 차이를 한곳에서 흡수해, 나머지 제품은 그것을 신경 쓰지 않아도 되게 만드는 것입니다. 같은 버튼은 시스템 안에서 한 번만 존재합니다. macOS에서는 알약 모양이 되고, Windows에서는 둥근 사각형이 됩니다. 한 번 바꾸면 모든 곳에 반영됩니다—파일을 뒤질 필요도 없고, 같은 것을 네 번 고칠 필요도 없으며, 서서히 어긋나기 시작할 일도 없습니다.

그 기반이 없다면, 지금까지 설명한 어떤 것도 지속 가능하지 않습니다. 모든 업데이트는 이번 스프린트에 어떤 플랫폼이 수정 대상이 될지에 대한 협상이 됩니다. 새 기능 하나가 나오면 조금씩 다른 네 가지 버전이 생겨나고, 그것들은 점점 더 같은 제품처럼 느껴지지 않게 됩니다. 결국 모두가 조용히, 이를 따라가는 데 드는 비용이 너무 크다고 인정하게 되고—전체는 다시 모든 곳에 배포되는 하나의 UI로 수렴합니다.

디자인 시스템은 올바른 일을 하는 것을 단지 가능하게 만드는 데 그치지 않고, 반복 가능하게 만듭니다.

직접 눈에 띄지는 않을 것입니다. 바로 그 점이 핵심입니다.

결론

새로운 Xmind가 곧 찾아옵니다.

더 좋아 보입니다. 하지만 더 솔직하게 말하면, 이는 겉으로 항상 드러나지는 않았던 2년간의 작업의 결과입니다—각 플랫폼을 제대로 익히고, 이를 유지할 기반을 마련하고, 여러 기기를 사용한다는 이유만으로 타협할 필요는 없다는 생각을 끝까지 지켜온 결과입니다.

우리는 Xmind를 매일 다양한 기기에서 사용합니다. 우리는 그저 "겨우 돌아가는" 경험을 참을 수 없습니다. 그래서 여러분도 그런 경험을 감수하지 않으셨으면 합니다.