문서
이런 것도 컴포넌트로 만들어도 될까?
이정현 · 토스 · 토스 기술 블로그
소개
플랫폼 디자이너가 디자인 시스템에 새로운 컴포넌트를 만들 때 생기는 의심을 확신으로 만든 과정을 들려드릴게요.
AI 핵심 요약
토스에서는 화면 위 버튼을 누른 뒤 아래쪽 바텀시트에서 옵션을 고르는 방식이 시선 이동과 인지 부담을 키우는 문제를 발견해, 누른 자리에서 펼쳐지는 ‘메뉴’ 컴포넌트 도입을 검토했다. 실제 서비스 화면에서 OS 기본 메뉴를 활용해 열흘간 A/B 테스트한 결과 전체 지표는 큰 변화가 없었고 Android의 아이템 클릭률은 바텀시트보다 높아 시스템화하기로 결정했다. 구현 속도를 우선해 iOS와 Android는 OS 컴포넌트를 쓰고, Web은 Android 디자인을 따랐다. 새 컴포넌트는 A/B 테스트나 UT로 필요성을 검증하고, 처음부터 완성도를 높이기보다 기본 컴포넌트로 빠르게 시작해 이후 개선할 수 있다는 점을 배웠다.
- 새 컴포넌트의 필요성은 기존 UI의 사용성 문제를 구체적으로 정의하는 데서 출발한다.
- A/B 테스트나 사용자 테스트(UT)로 직감을 검증하면 컴포넌트 도입의 근거를 마련할 수 있다.
- 실험 결과가 플랫폼별로 다를 수 있으므로 전체 지표와 OS별 지표를 함께 살펴본다.
- 초기 구현에서는 OS 기본 컴포넌트를 활용하고, 사용이 확대된 뒤 디자인 일관성을 다듬을 수 있다.
