프론트엔드
Banksalad Product Language를 소개합니다
두줄요약
BPL로 디자인과 코드의 UI 추상화 단위를 맞추는 방식을 소개했습니다. Figma, RxSwift, 스냅샷 테스트로 선언적 iOS UI 개발과 검증을 지원했습니다.
문제 상황
- 디자이너·iOS·Android·Web 간 UI 추상화 단위와 컴포넌트 명칭 차이
- 디자인 수정 범위 해석 불일치와 용어 정리에 소모되는 의사소통 비용
구조와 흐름
- Figma 컴포넌트 구조와 1대 1로 대응하는 BPL 클래스 설계
- 레이아웃 책임의 Container와 콘텐츠 표현 책임의 Child 컴포넌트 분리
- SwiftUI 문법을 참고한 선언적 계층 표현과 RxSwift 기반 ViewModel 바인딩
선택 이유
- 성급한 공통 추상화 대신 Figma상 독립 컴포넌트의 코드 의존성 분리
- 플랫폼별 PoC 코드 비교를 통한 Container 속성·메서드 합의
- Figma Editor 사용으로 디자인 제작 방식과 의도 직접 확인
성능/운영 포인트
- 컴포넌트 샘플 앱과 통합 시나리오 앱으로 단위·조합 UI 검증
- FBSnapshotTestCase와 CI 기반 픽셀 단위 UI 변경 감지
- 본 앱 대비 수 초 내 빌드 가능한 BPL 프레임워크로 수정·확인 주기 단축
