UX

서론

이용약관에 동의하고 싶어는 일본에서 개발된 인디 게임으로, 2025년 12월 스팀에 출시되어 국내외 스트리머들 사이에서 폭발적인 인기를 얻었다. 이 게임은 겉보기엔 단순하다. 사용자는 단지 12개 조항의 이용약관에 ‘동의함’ 버튼을 누르기만 하면 된다. 하지만 그 과정은 결코 단순하지 않다. 100가지 이상의 미니게임이 무작위로 등장하며, 각 게임은 사용자를 온갖 방법으로 방해한다. 버튼은 클릭 직전 위치를 바꾸고, 가짜 팝업이 화면을 가득 채우며, ‘동의안함’을 한 번이라도 누르면 모든 것이 초기화된다.

이 게임이 특별한 이유는 Windows XP의 루나 테마 UI를 완벽하게 재현하면서, 우리가 일상에서 마주하는 다크 패턴들을 극단적으로 풍자한다는 점이다. 실제 서비스에서 기업들은 이용자가 약관을 빨리 넘어가길 바라며 정보 구조를 설계한다. 이 게임은 그 반대 상황을 만들어, UX가 얼마나 ‘디자인된 행동’을 유도할 수 있는지를 역설적으로 드러낸다. 사용자 경험 디자인의 교과서라 불리는 존 야블론스키의 ‘UX/UI의 10가지 심리학 법칙’을 실제로 하나하나 짚어보기는 어렵다. 하지만 이 게임처럼 극단화된 사례를 통해 살펴보면, 각 법칙이 어떻게 작동하는지, 그리고 어떻게 악용될 수 있는지 살필 수 있다.

과정

이 글에서는 디자인 시스템의 구성 요소를 실제로 분석하면서 의사 결정 과정에 중점을 둔다. 포트폴리오에 포함할 코드 스니펫 역시 구현 결과물보다는 “왜 이렇게 구현했는가” 하는 결정 이유를 드러내는 범위로 제한하였다. 예를 들어, 특정 스타일 차이를 별도 컴포넌트가 아니라 prop으로 분리한 이유, 여러 스타일 변형을 variant로 설계한 이유, 혹은 디자인 토큰을 직접 참조하지 않고 간접적으로 사용하도록 한 배경 등을 중점적으로 해설한다. 이를 위해 Apple Human Interface Guidelines(HIG), Material-UI(MUI), Coinbase Design System(CDS) 세 가지 디자인 시스템을 Button, Text Input, Modal의 공통 컴포넌트와 CDS에만 있는 AreaChart 컴포넌트를 중심으로 비교하였다. 각 컴포넌트를 디자인 관점과 코드 구현 관점에서 분석하면서, 디자인 토큰 활용, variant 구조, 상태(State) 구성, 접근성 처리 방식 등의 구체 요소를 상세히 정리한다. 분석 방식은 논문 “모바일 운영체제별 GUI 컴포넌트의 사용성 비교 분석을 위한 프레임워크"에서 제안된 분류처럼, 공통 구조, 명칭상의 차이, 기능상의 차이 관점으로 내용을 분류하여 서술한다. 마지막으로 이러한 비교 분석 과정을 통해 얻은 교훈과 학습 효과를 정리하고, 디자인-개발 협업에 주는 시사점을 실용적인 결론으로 제시한다.

목차

1. 서론: 왜 디자인 시스템 먼저 분석하는가? 왜 Coinbase Design System을 먼저 선택했는가?
2. 본문: 정체성과 대상 사용자
   • 시스템의 공식 미션 / 슬로건
   • CDS, MUI, HIG 비교 분석
3. 시스템 아키텍처
   • Get Started에서 주목할 부분: Theming
   • Components
   • Hooks
4. 디자인 토큰 구조
   • Primitive token과 Semantic token의 결합
   • 컬러 외 영역에서의 토큰 적용
   • Shadow 구조
5. 결론

서론: 왜 디자인 시스템 먼저 분석하는가? 왜 Coinbase Design System을 먼저 선택했는가?

크립토 생태계에서 개발자가 아닌 디자이너로서 어떤 방식으로 기여할 수 있을지에 대해 오랫동안 고민해 왔다. 화면을 설계하는 역할에 머무르기보다는, 제품이 만들어지고 확장되는 과정 전반에서 어떤 지점에 개입할 수 있는지가 더 중요한 질문이 되었다. 그 과정에서 토큰 단위부터 컴포넌트까지 이어지는 디자인 시스템 구축 방식에 자연스럽게 관심이 옮겨갔다.