토스 디자이너가 제품에만 집중할 수 있는 방법

메뉴 컴포넌트가 다양한 제품 맥락에 쓰이면서 디자이너가 다크모드, 긴 텍스트, 접근성 등을 매번 따로 처리하고 사용자 경험도 달라지는 문제가 생겼습니다. 토스 디자인 플랫폼 팀은 실제 사용 사례를 분석해 체크형 메뉴, 텍스트 너비 기준, 긴 메뉴의 스크롤 안내를 추가하고, 블러와 섬세한 인터랙션으로 시각적 완성도를 높였습니다. 큰 텍스트와 VoiceOver·TalkBack 동작도 컴포넌트 자체에 반영해 제품 팀이 반복적인 세부 결정을 하지 않도록 했습니다. 그 결과 제작 속도가 약 3~5배 빨라졌으며, 디자인 시스템은 재사용 가능한 UI를 넘어 생산성과 일관성, 접근성을 함께 책임질 수 있다는 점을 확인했습니다.

• 컴포넌트 사용 사례와 제보를 모아 반복되는 패턴을 찾고, 실제 사용 빈도에 맞춰 옵션을 설계하세요.
• 긴 텍스트와 많은 항목을 고려해 최소·최대 너비, 스크롤 가능 여부 같은 동작 기준을 컴포넌트에 포함하세요.
• 블러, 외곽선, 투명도와 움직임을 세밀하게 조정하면 기능뿐 아니라 시각적 완성도도 높일 수 있습니다.
• 큰 텍스트와 VoiceOver·TalkBack 대응을 컴포넌트 단계에서 구현하면 제품 팀의 접근성 부담을 줄일 수 있습니다.