삼성화재 컨시어지에서는 Figma의 디자인 언어를 웹과 React Native 코드의 계약으로 옮겼습니다. 같은 의미 토큰과 공개 variant를 쓰되, DOM과 네이티브 뷰의 차이를 감추려고 한 renderer에 억지로 묶지는 않았습니다.
동시에 서로 다른 사용자군을 위한 App A와 App B의 iOS·Android 프로젝트를 분리했습니다. 공통 런타임, API, 디자인시스템과 실제로 함께 쓰는 기능만 package로 올리고, 각 앱의 설정과 출시 주기는 독립적으로 유지했습니다.
Figma를 코드 계약으로 옮기기
Figma semantic token을 웹의 Tailwind CSS와 모바일의 NativeWind에 각각 대응시켰습니다. token 이름과 component variant는 맞췄지만, 웹과 모바일 renderer는 따로 구현해 플랫폼별 접근성과 상호작용을 그대로 살렸습니다.
컴포넌트 상태는 웹 Storybook과 앱 안의 갤러리에서 확인했습니다. overlay는 controlled contract로 다루고, 웹에서는 keyboard·focus·prefers-reduced-motion을 함께 점검했습니다. 사례 화면에는 임직원 앱의 주문 흐름과 배달원 앱의 업무 목록을 담았습니다.
두 앱의 실패 범위 나누기
App A와 App B는 각각 네이티브 프로젝트와 출시 경로를 갖습니다. 공통 package의 변경이 두 앱에 미치는 범위를 먼저 확인하고, 앱별 설정이 섞이지 않도록 한 곳의 manifest를 Gradle·Xcode·runtime 설정의 기준으로 사용했습니다.
변경에 맞는 전달 경로
웹 번들은 S3·CloudFront 기반 OTA 경로로, 네이티브 변경은 iOS·Android 내부 스토어 경로로 전달하도록 구현했습니다. OTA는 변경할 수 없는 번들을 기준으로 release·disable·rollback 흐름을 두었고, 스토어 전달 전에는 빌드 결과와 signing 상태를 확인했습니다.
