[UX/UI]아티클스터디(토스 디자이너가 제품에만 집중할 수 있는 방법)

🔗 출처

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

✅ 요약

• 새 컴포넌트가 대응할 수 없는 케이스 발견(다양한 맥락에 적용되며 문제 발생) → 디자이너들이 직접 없는 옵션들을 새로 추가하고 그림 → 디자이너가 다크모드, 텍스트가 길어질 때의 정책, 접근성 및 voice over 대응 등을 직접 결정

1. 다양한 케이스 패턴화

• • 반복해서 사용되는 체크형 아이콘 → 왼쪽에 위치
  • 5자 이상의 긴 단어를 사용할 때 → 텍스트 크기를 변경하고, 화면 크기별 퍼센트 기준으로 최소/최대 너비를 지정
  • 메뉴 길이가 제한될 때 → 메뉴가 길어질 때 특히 시니어 유저들은 큰 텍스트로 설정하게되면 스크롤이 필요해지기 때문에 인지할 수 있는 흐림 효과를 추가

2. 심미적 경험 설계

• • 팝업 요소의 무거움 없애기 → 바텀 시트보다 가볍게 띄울 수 있는 메뉴 자체의 장점을 살릴필요 → 블러 효과를 내 투명한 분위기를 살림
  • 인터랙션의 정성적인 느낌 추가 → 적절한 등장과 퇴장, 각 아이템의 터치 상호작용 등도 섬세하게 조절

3. 모든 유저의 사용성 지킴

• • 텍스트를 키우거나 해상도를 변경한 환경 → 텍스트가 커지면서 차지하는 영역을 줄일 수 있도록 글자 단위로 개행, 아이콘의 크기도 같이 커지도록 조정
  • 화면 읽기 기능 대응 → 시각장애인의 화면 읽기 기능 탑재(보이스오버, 톡백) → 다양한 접근성 UX 가이드라인을 찾아보며 맞게 개발

💬 코멘트

세심한 부분까지도 고려해서 규칙으로 만들고 실제 사용자테스트를 거치면서 디자인시스템, 가이드라인을 정리하는 부분에 성취감이 클 것 같다. 기본 문서를 다지고 그 문서를 바탕으로 생산한다면 많은 사람들이 작업하는데 시간을 쏟지 않을 수 있고 대신 속도나 효율성이 훨씬 높아지기 때문에 꼭 필요한 작업이라고 생각한다. 이런 작업이 필요하기 위해서는 넓은 시각과 추진력이 바탕이 되어야하는 것 같다. 이 글을 읽고 금융관련은 전혀 관심이 없었는데 토스에서 일하는 과정들을 보고 토스에서 일해보고 싶은 욕망이 생겼다.