Banksalad Product Language는 어떻게 디자인되었나요?

Context

뱅크샐러드 2.0 서비스 개편 시작 당시 디자이너 3명이 최소한의 약속(폰트, 컬러, 간격)만 가지고 각자 작업하면서 일관성 있는 컴포넌트 관리 체계가 부재했다. 급격한 조직 확장(디자이너 3명→18명)으로 인해 수백 개의 컴포넌트를 체계적으로 관리하고 모든 직군이 공통으로 사용할 수 있는 언어 필요성이 대두되었다.

Technical Solution

• Figma로 디자인 도구 통일: Sketch에서 Figma로 전환하여 실시간 협업 기능으로 수백 개 컴포넌트 신속 제작 및 Zeplin 중간 단계 제거로 디자이너-개발자 의사소통 비용 감소
• Container 기반 컴포넌트 계층화: Non Component, Element(icon, button, divider), Child(특정 Container 내에서만 swap 가능)로 3단계 분류하여 의도하지 않은 결과물 방지
• 체계적 Naming Rules 수립: 고유번호_Category/(Type)/Name 형식으로 모든 직군이 공통 이해 가능하도록 표준화(예: 실험군은 _ExpA, _ExpB 표시)
• 두 단계 가이드 문서화: 개발 가이드(맞춤법, Figma 상 기술 명시) + 사용자 가이드(문법, 모든 직군 대상)
• 버전 관리 자동화: Component List Generator 오픈소스 플러그인 자체 개발으로 버전별 수정 내역 자동 기록 및 플랫폼별 개발 현황 추적
• BPL Template 구축: 자주 사용되는 화면을 라이브러리화하여 drag & drop으로 쉽게 화면 구성 가능하게 설계

Impact

• 신규 컴포넌트 제작률 감소: 7월 136개→10월 13개(88% 감소)
• 기존 컴포넌트 재사용률 증가: 7월 43%→10월 85%
• 월별 작업시간 절감: 디자이너 인당 월 38.5시간 절약(8시간 근무 기준 약 5일)
• 실험 활용: 11월까지 81개의 신규 실험에서 BPL 사용
• 컴포넌트 규모: 상반기 대비 하반기에 206개(+47%) 증가하여 642개 도달

Key Takeaway

Design System을 단순 디자인 자산 모음에서 벗어나 명확한 계층 구조(Container-Element-Child), 체계적인 Naming Rules, 이중 가이드 문서화(개발/사용)를 통해 모든 직군이 사용 가능한 Product Language로 전환하면, 컴포넌트 재사용률 대폭 상승과 함께 개발 일관성을 확보할 수 있다.