PASS 머니적립 디자인 시스템,

PASS 머니적립은 출시 뒤에도 자주 개편되는 제품이었어요. 그래서 화면 하나하나를 잘 그리는 것만큼, 매번 같은 품질과 톤으로 빠르게 그릴 수 있는 기반이 중요했어요.

목표는 둘이었어요. 서비스 전반의 일관성을 지키는 것, 그리고 컴포넌트를 재활용해 반복 작업을 줄이는 것. 둘 다 화면이 아니라 시스템의 문제였죠.

화면을 그리는 일이 아니라, 화면이 굴러갈 판을 까는 일이었어요.

기준이 없으면 같은 머니적립인데도 화면마다 여백과 컴포넌트가 미묘하게 달라져요. 개편이 한 번 돌 때마다 사실상 처음부터 다시 그리는 셈이었고요.

개발과의 핸드오프도 비용이었어요. 같은 요소를 부르는 이름이 사람마다 달라, 무엇을 어디에 쓰는지부터 매번 맞춰야 했어요.

일관성은 의지로 지키는 게 아니라, 시스템으로 지켜야 했어요.

가장 아래층부터 세웠어요. 텍스트 스타일과 컬러를 토큰으로 정리하고, 버튼·아이콘 같은 UI 아톰을 정의했어요.

이 Foundation이 단단해야 그 위의 컴포넌트가 흔들리지 않으니까요. 색 하나, 간격 하나를 정하는 게 곧 이후 모든 화면의 기본값을 정하는 일이었어요.

Figma의 Property를 활용해 컴포넌트를 상태·변형별로 구조화했어요. 하나의 컴포넌트로 여러 상황을 커버해, 재활용이 실제로 되도록 만든 거예요.

컴포넌트마다 이름을 명확히 붙였어요. 이름이 곧 개발과 공유하는 언어라, 네이밍을 정리한 것만으로 핸드오프 커뮤니케이션 비용이 줄었어요.

컴포넌트 이름이 곧 개발과 나누는 공용어였어요.

여백과 컴포넌트 구성의 일관성이 생각보다 훨씬 중요하다는 걸 체감했어요. 작은 간격 규칙 하나가 전체 화면의 완성도를 좌우하더라고요.

그리고 디자인 시스템엔 ‘완성’이 없어요. 제품이 자라는 만큼 같이 발전시켜야 하는 유동적인 프로젝트라는 걸 배웠어요.

디자인 시스템엔 완성이 없어요. 제품과 함께 계속 자라요.