프론트엔드
Banksalad Product Language는 어떻게 디자인되었나요?
두줄요약
BPL을 전 구성원이 사용하는 제품 언어로 정의하고 컴포넌트 규칙과 협업 방식을 설계했습니다. Figma 통합과 재사용 체계로 실험 속도와 디자인 일관성을 높였습니다.
구조와 흐름
- 디자인 시스템을 넘어 전 구성원이 제품을 기획·디자인·개발하는 공통 언어로 정의한 BPL
- Component를 단어, Scene을 문장, 개발 가이드와 사용자 가이드를 맞춤법·문법에 대응한 구조
- Container·Child·Element 분류와 네이밍 규칙으로 컴포넌트 사용 범위와 관리 기준 정립
해결 방법
- Sketch·Zeplin 중심 작업을 Figma로 통합해 실시간 협업과 레이어 구조 기반 개발 소통 강화
- Figma 플러그인 Component List Generator로 버전별 컴포넌트 변경 내역과 개발 현황 관리
- 플랫폼별 고정 버전, 샘플 앱, 개발 가이드와 사용자 가이드로 디자인·개발·검수 과정 지원
성능/운영 포인트
- 하반기 컴포넌트 642개, 기존 컴포넌트 재사용률 85%까지 증가
- 81개 신규 실험에서 BPL 활용, 빠른 실험 착수와 디자인 일관성 향상
- 사용자 설문 기준 인당 월 약 38.5시간 작업 시간 절감
적용해볼 점
- 비디자이너도 화면을 구성할 수 있는 drag&drop 기반 BPL Template과 온보딩 계획
- 신규 컴포넌트 실험과 데이터 기반 대체를 통한 라이브러리 지속 개선
