Banksalad Product Language를 소개합니다

Context

디자이너, iOS 개발자, Android 개발자가 UI 컴포넌트를 다르게 추상화하면서 같은 심볼 수정이 플랫폼별로 다른 영향 범위를 초래했다. 각 직군이 비슷한 대상을 다른 이름으로 부르고 다른 대상을 같은 이름으로 불러 회의 초반 30분이 용어 정리에 소비되었다.

Technical Solution

• Container와 Child 개념 표준화: 세 플랫폼이 동시에 뱅크샐러드 첫 화면을 각자의 생각으로 구현한 후 코드를 비교하여 Container의 메소드와 속성 규격 합의
• IntegralExample 앱 개발: BPL 컴포넌트의 동작을 검증하는 별도의 작은 프로젝트로, 뱅크샐러드 앱(180초 빌드)과 달리 수 초 내에 빌드 가능
• 선언형 UI 구조 도입: SwiftUI의 선언적 특성을 활용한 iOS BPL_iOS 구현으로 컴포넌트 구성을 디자인 시안과 일치
• 코드 공유 체계 확립: IntegralExample에서 작성·테스트된 UI 코드를 뱅크샐러드 앱에 거의 그대로 복사 가능하도록 설계
• 접근성 통합: BPL 컴포넌트 단계에서 접근성 지원을 기본 탑재

Impact

뱅크샐러드 앱의 UI 확인 시간이 10배 이상 단축되었다. 기존 방식으로는 불가능한 규모의 UI 개편(거의 대부분의 주요 화면 변경)을 예정 기간 내에 완료했다. UI 관련 버그의 대부분을 IntegralExample에서 즉시 재현 가능해졌다.

Key Takeaway

제품 팀 전체가 같은 UI 추상화 규칙을 공유하지 못하면 직군·플랫폼별로 구현 범위가 불일치할 수 있으므로, 사전에 완벽한 기획서를 작성하려 하지 말고 각 팀이 현재 이해도를 바탕으로 프로토타입 코드를 먼저 만든 후 비교하면서 규격을 수렴하는 방식이 의사소통 비용을 가장 빠르게 줄인다.