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

여러 기기에서 Xmind를 사용해 보셨다면, 플랫폼을 바꿀 때 약간의 마찰을 느껴본 적이 있을 것입니다. 버튼 모양이 조금 다르게 보이고, 어떤 상호작용은 예상한 대로 동작하지 않습니다. 문제가 있는 것은 아니지만, 어딘가 이곳을 위해 완전히 만들어진 것은 아닌 듯한 느낌이 듭니다.

저희도 같은 느낌을 받았습니다. 그리고 이를 제대로 해결하기 위해 오랜 시간을 들였습니다.

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

일반적인 접근 방식은 이렇습니다: 하나의 UI를 만들고 모든 곳에 배포하는 것입니다. 더 저렴하고, 더 빠르며, 일관성을 유지할 수 있습니다. 대부분의 앱이 이렇게 하고, 솔직히 대부분의 사용자는 그냥 받아들입니다.

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

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

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

• 아무도 대놓고 불평하지 않지만, 그 마찰은 조용히 쌓여 갑니다.

대안인—각 플랫폼에 맞춰 별도로 설계하는 방식—은 옳아 보이지만 거의 실현되지 않습니다. 비용이 너무 많이 들고, 시간이 너무 오래 걸리며, 네 가지 서로 다른 디자인을 유지하는 팀은 결국 지쳐서 다시 하나로 수렴하게 됩니다.

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

같은 앱, 다른 옷차림

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

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

변하는 것: 표면

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

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

유지되는 것: 구조

도구가 어디에 있는지, 기능이 어떻게 구성되어 있는지, 맵 사이를 어떻게 이동하는지—이런 부분은 어디서나 완전히 같습니다.

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

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

절대 바뀌지 않는 것: 핵심

모든 것의 아래에는, 플랫폼이나 Apple 또는 Google이 다음에 어떤 새로운 디자인 언어를 만들든 상관없이 고정되어 있는 몇 가지가 있습니다:

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

• 복잡한 기능은 필요할 때 사용할 수 있고, 필요하지 않을 때는 방해가 되지 않습니다.

• 실행 취소는 무제한입니다—창의적인 작업에는 망가뜨릴 걱정 없이 시도해 볼 자유가 필요합니다.

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

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

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

여기까지 읽고 나면 자연스러운 질문이 떠오릅니다. 네 개의 플랫폼, 네 개의 시각 언어, 곳곳마다 다른 관례—전체가 무너지지 않게 하면서 이런 차이를 어떻게 실제로 관리할 수 있을까요?

2년 전, 당시에는 급하지 않아 보였던 결정을 내렸습니다. Xmind를 위한 제대로 된 디자인 시스템을 구축하기로 한 것입니다.

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

그 기반이 없다면, 지금까지 설명한 어느 것도 지속 가능하지 않습니다. 업데이트마다 이번 스프린트에서 어떤 플랫폼에 수정 사항을 적용할지 협상해야 합니다. 새 기능 하나마다 서로 조금씩 다른 네 가지 버전이 생기고, 그것들은 점점 더 같은 제품처럼 느껴지지 않게 됩니다. 결국 모두가 조용히 따라가기에는 비용이 너무 많이 든다는 데 동의하게 되고—전체는 다시 하나의 UI를 모든 곳에 배포하는 방식으로 되돌아갑니다.

디자인 시스템이 있어야 올바른 일을 하는 것이 가능할 뿐 아니라 반복 가능해집니다.

여러분은 이를 직접 알아차리지 못할 것입니다. 바로 그것이 핵심입니다.

결론

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

더 보기 좋아졌습니다. 하지만 더 솔직하게 말하면, 이는 겉에서 항상 분명하게 보이지는 않았던 2년간의 작업의 결과입니다—각 플랫폼을 제대로 이해하고, 이를 유지할 기반을 만들고, 여러 기기를 사용한다는 이유만으로 타협할 필요는 없다는 생각을 끝까지 지켜온 노력의 산물입니다.

저희는 여러 기기에서 매일 Xmind를 사용합니다. 저희는 그저 "무난하게 버티는" 경험을 견딜 수 없습니다. 그래서 여러분도 그렇게 받아들이지 않길 바랍니다.