포스텔러 · 운세 서비스 · 웹앱
영문 포스텔러 디자인시스템
영문 포스텔러 리뉴얼 이후, 효율적인 개발과 디자인 변경 과정에서 생기는 커뮤니케이션의 비효율을 줄이기 위해 디자인 시스템 프로젝트를 진행했습니다.
역할 및 작업기간
2021.10 ~ 2022.03
디자인 시스템 (50%)
디자인 컴포넌트(100%)
2023.12
컴포넌트 개선 및 개발 협업 프로세스 정리 (100%)
목표
디자인 토큰 네이밍 체계화
개발 코드와 일치되는 베리언트 설계
디자인 시스템의 코드 반영 자동화 구조 설계
배경
영문 포스텔러 앱 리뉴얼 이후, 디자인과 개발 간의 반복적인 커뮤니케이션과 컴포넌트 관리의 비효율성이 드러났습니다. 개발자들은 피그마와 실제 코드의 네이밍 불일치로 혼란을 겪고 있었고, 디자인 변경 시 전달과 확인 요청으로 공수가 소요되는 상황이었습니다. 디자이너들 또한, 컴포넌트 옵션이 많아 사용성이 떨어지고, 변경 사항 전달 과정에서 발생하는 의사소통에 불편함을 느끼고 있었습니다.
이러한 팀 내 피드백을 바탕으로, 디자인과 개발의 언어를 연결하고 협업 효율을 높일 수 있는 디자인 시스템 구축 프로젝트를 기획하게 되었습니다.
디자인·개발 간의 일관된 언어 체계를 만들기 위해, 색상·타이포·간격 등 디자인 토큰에 대한 네이밍 규칙을 새롭게 정의하고, 정의된 값에 이해할 수 있도록 문서화를 진행했고, 정의된 디자인 토큰을 Figma 플러그인 ‘Token Studio’를 활용해 개발 환경으로 자동 전달하는 구조를 설계하도록 진행했습니다.
제작
토큰 네이밍
포스텔러는 한국 포스텔러, 만세력, AI, 일본 포스텔러, 영문 포스텔러 등 다양한 브랜드 라인을 보유하고 있으며, 각 서비스마다 고유의 컬러와 타이포그래피를 사용하고 있습니다. 이에 따라 영문 포스텔러는 별도의 디자인 시스템이 필요했고, 독립적인 명명 체계를 구축하게 되었습니다.
디자인 시스템에서 널리 사용되는 구조를 참고하여, [type]-[role]-[category]-[value]
순서로 네이밍 규칙을 정립했습니다.
예: color-background-gray-100
이를 통해 구성 요소 간의 일관성과 확장성을 성립하였습니다.
디자인 토큰을 보다 효율적으로 관리하고, 개발과 원활하게 연동하기 위해 Figma 플러그인 'Token Studio'를 도입했습니다.
Token Studio에 설정된 디자인 값을 GitHub 저장소에 송출되도록 구성하였으며, style-dictionary를 통해 영문 플랫폼에 맞는 개발 언어 구조[리엑트]로 변환되도록 자동화 시스템을 구축했습니다.
위 이미지와 같이 코드가 토큰 네이밍에 맞춰 송출되어 개발에 자동적으로 반영되게 진행했습니다. 마지막으로 스토리북이나 깃허브를 통해 변환된 값을 체크하여 최종적으로 값을 반영 및 변환되었습니다.
[해당 과정을 브런치 글로 작성했습니다.]
컴포넌트 베리언트 값 간소화
컴포넌트 구조 설계 시, 변동되지 않는 속성들은 고정된 베리언트 값으로 지정하여 개발 측에서 해당 값이 props
로 명확히 고정되도록 설계했습니다.
반면, 아이콘과 같은 유동적인 속성은 Figma의 [Nested Instances] 기능을 활용해 옵션 선택 방식으로 구성하였고, 개발 측에서는 React.Children
을 통해 유연하게 대응할 수 있도록 구현 방식을 제안했습니다.
이러한 구조를 통해 디자이너와 개발자 모두에게 정리된 컴포넌트 옵션과 작업 자유도를 확보하면서도, 일관된 컴포넌트 구조를 유지할 수 있었습니다.
결과
이번 디자인 시스템 프로젝트는 단순한 컴포넌트 정리에 그치지 않고, 토큰 네이밍부터 코드 자동화, 컴포넌트 구조 설계까지 전체적인 기준을 체계화한 경험이었습니다. 디자이너와 개발자가 각자의 니즈를 가지고 있었던 만큼, 중간에서 조율하고 실질적인 효율 개선과 커뮤니케이션 비용 절감이라는 결과로 이어졌다는 점에서 의미가 깊었습니다.
특히, Figma 기반으로 설계된 디자인 토큰이 실제 코드로 변환되어 실무에 적용되는 과정을 직접 기획하고 주도하면서, 협업의 폭을 확장할 수 있었고 디자이너로서의 역량을 한 단계 성장시킬 수 있었습니다.
이 경험은 앞으로도 다양한 팀과 서비스 환경에서 더 정교한 디자인 시스템을 구축하고, 유연한 협업 구조를 설계하는 데에 중요한 자산이 될 것으로 생각합니다.