Banksalad Product Language를 소개합니다

뱅크샐러드 iOS 개발자 류성두는 제품 구성원 모두가 공유하고 사용하는 언어인 **Banksalad Product Language(BPL)**를 소개했다. 기존 디자인 시스템이 디자인 영역에 한정된 반면, BPL은 기획부터 개발까지 제품 제작 전 과정의 언어를 포괄한다.

소통 비용 절감과 추상화 단위 통일

기획자, 디자이너, 개발자 간에는 '다이얼로그 vs 팝업' 같은 용어 불일치와 UI 추상화 단위의 차이로 인해 회의 시간의 상당 부분이 소모되었다. 예를 들어 디자이너는 특정 심볼 수정으로 인식하지만, iOS는 네비게이션 플로우 전체, Android는 앱 전체에 영향을 미치는 수정으로 인식하는 경향이 있었다. 이를 해결하기 위해 BPL 팀은 명확한 기획서보다 코드로 구현된 제품을 먼저 만들어 검증하는 'Code and Show' 문화를 채택했다.

플랫폼 간 코드 비교와 개념 정립

BPL 팀은 PageExample 화면을 각 플랫폼(Web, Android, iOS)의 코드로 구현하여 비교 분석했다. 이를 통해 'Container'와 'Child' 등 공유된 개념과 실제 구현 간의 차이를 명확히 파악하고 용어를 확정했다. 특히 Web의 AssetSection, Android의 ListItemContainer 등 각 플랫폼의 구조를 대조하며 추상화 규칙을 통일했다.

Figma와 SwiftUI의 유사성 활용

디자이너와 개발자의 소통 속도를 높이기 위해 Figma와 SwiftUI의 구조적 유사성을 활용했다. Figma의 Autolayout은 SwiftUI의 레이아웃 시스템과, Components는 SwiftUI의 뷰 구조와 유사하다. 개발자는 디자이너가 Figma에서 컴포넌트를 제작한 방식을 모방하여 독립적인 클래스로 구현하되, 과도한 추상화를 지양하고 1:1 대응을 유지했다.

레거시 환경에서의 레이아웃 구현

뱅크샐러드는 iOS 11까지 지원해야 하므로 SwiftUI의 @State나 Combine을 직접 사용할 수 없었다. 대신 LayoutDriven 패턴을 적용하여, 데이터 변경 시 최신화된 상태를 UI 요소에 반영하는 방식으로 레이아웃을 갱신했다. 이는 SwiftUI의 선언적 UI 패러다임의 장점을 레거시 UIKit 환경에서도 적용할 수 있도록 한 것이다.