Atomic 방식이란 ‘red-600’, ‘gray-100’처럼 컬러의 hue와 shade, 즉 컬러 그 자체를 이름에 표기하는 것이고, Semantic 방식이란 ‘bg-danger’, ‘text-brand’처럼 그 컬러가 사용되는 상황을 이름에 표기하는 방식이다.
2022년 피그마의 콘퍼런스인 'config'에서 소개된 피그마 팀의 다크모드 제작기를 요약한 글입니다. 다크모드를 만들기 위해 컬러 시스템을 재설계하고 적용하는 과정을 소개합니다. 컬러 네이밍은 아토믹 방식이 익숙한데, 다크모드뿐만 아니라 활용도 높은 디자인 시스템을 구축하려면 시멘틱 방식이 효과적인 것 같네요.
게시글에서 보이는 UI의 차이를 주어 구체적인 위치를 이야기하는 케이스가 많은 국내는 Pin 형식으로, 단독주택이 많고 주소를 사용해서 대략적인 위치로 표현해야 하는 북미는 둥근 Boundary 형식의 지도 썸네일을 제공하기로 했어요.
당근마켓이 북미와 한국, 일본에서 운영 중이다 보니 하나의 기능도 국가마다 사용하는 패턴이 다른가 봅니다. 북미와 한국에서 거래 희망 장소를 선택하는 UI 차이를 두어 개선한 경험을 소개합니다. 동일한 UI를 사용하면 만드는 관점에서는 편하겠지만, 전혀 다른 맥락을 가진 사용자에게는 불편할 수 있겠죠. 세심하게 고민하고 개선한 점이 인상적이네요.