토스 디자이너가 제품에만 집중할 수 있는 방법
박수현 토스 · 토스 기술 블로그
AI 핵심 요약
메뉴 컴포넌트가 다양한 제품 맥락에 쓰이면서 디자이너가 다크모드, 긴 텍스트, 접근성 등을 매번 따로 처리하고 사용자 경험도 달라지는 문제가 생겼습니다. 토스 디자인 플랫폼 팀은 실제 사용 사례를 분석해 체크형 메뉴, 텍스트 너비 기준, 긴 메뉴의 스크롤 안내를 추가하고, 블러와 섬세한 인터랙션으로 시각적 완성도를 높였습니다. 큰 텍스트와 VoiceOver·TalkBack 동작도 컴포넌트 자체에 반영해 제품 팀이 반복적인 세부 결정을 하지 않도록 했습니다. 그 결과 제작 속도가 약 3~5배 빨라졌으며, 디자인 시스템은 재사용 가능한 UI를 넘어 생산성과 일관성, 접근성을 함께 책임질 수 있다는 점을 확인했습니다.
- 컴포넌트 사용 사례와 제보를 모아 반복되는 패턴을 찾고, 실제 사용 빈도에 맞춰 옵션을 설계하세요.
- 긴 텍스트와 많은 항목을 고려해 최소·최대 너비, 스크롤 가능 여부 같은 동작 기준을 컴포넌트에 포함하세요.
- 블러, 외곽선, 투명도와 움직임을 세밀하게 조정하면 기능뿐 아니라 시각적 완성도도 높일 수 있습니다.
- 큰 텍스트와 VoiceOver·TalkBack 대응을 컴포넌트 단계에서 구현하면 제품 팀의 접근성 부담을 줄일 수 있습니다.
소개
디자인 시스템은 제품의 어느 단계까지 기여할 수 있을까요? 더 이상 다른 것에는 신경쓰지 않아도 되는 Menu 컴포넌트를 만들었던 3가지 방법을 소개할게요.
비슷한 학습 자료
문서 정세희
문제의 근원을 해결 하기 위한 다양한 시도
문서 오천석
모티베이션을 디자인하기
문서 이정현
이런 것도 컴포넌트로 만들어도 될까?
문서 이지윤
크고 복잡한 제품, 과감하게 갈아엎기
문서 이영진