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