아키텍처
deFign : 네이버 페이의 디자인 시스템을 정의하다
두줄요약
네이버페이는 공통 UI와 디자인 토큰을 기반으로 디자인 시스템 deFign을 구축했습니다.\n컴포넌트 표준화와 스토리북, 인터페이스 조율로 일관성과 개발 효율을 높였습니다.
문제 상황
- 서비스별로 동일한 UI가 조금씩 다른 동작과 코드로 분기되며 유지보수 복잡도 증가
- 네이버파이낸셜 여러 서비스에서 공통 UI와 사용성을 일관되게 맞출 기준 부재
구조와 흐름
- Figma에서 컴포넌트 단위로 디자인 설계 후 디자인 토큰을 추출해 전 서비스에 공통 적용
- 디자인, 마크업, FE가 함께 컴포넌트와 variant를 검토하며 사용성 조정
- 스토리북과 상세 Docs로 컴포넌트 형상, 버전별 사용법, 인터랙션을 공유
선택 이유
- 일관성, 효율성, 커뮤니케이션 기준, 공통 UI 라이브러리, 유연성과 확장성 확보
- 디자인 변경 파편화 통제와 빠른 적용을 위한 구조 설계
- 각자의 생각을 하나의 언어로 정리해 동일한 이해도 형성
적용해볼 점
- 공통 컴포넌트는 타입 기반 인터페이스와 필요한 부분만 덮어쓰는 구조로 설계
- 예상치 못한 예외 케이스를 위해 기본 요소를 export해 재사용성 확보
- 사용처 개발자와의 지속적인 대화로 적당히 열리고 닫힌 인터페이스 조율