카카오스타일, SDUI 하드코딩 문제 해결하는 'UX Builder' 공개

카카오스타일 지그재그 팀은 SDUI(Server-Driven UI) 도입 후 발생한 '서버 측 하드코딩' 문제를 해결하기 위해 UX Builder를 개발했다. 기존 SDUI는 앱 배포 없이 화면을 변경할 수 있다는 장점이 있었으나, 색상, 문구, 노출 조건 등 화면 구성 로직이 서버 코드에 하드코딩되면서 개발자가 모든 변경 사항을 처리해야 하는 병목 현상이 발생했다.

SDUI의 한계와 하드코딩 문제

기존 방식에서는 색상 상수(#F06ADF 등)와 HTML 태그 조립, 이벤트 분기 처리(if문) 등이 서버 코드에 직접 포함되었다. 이로 인해 문구 수정이나 색상 변경에도 PR 작성, 리뷰, 배포 과정이 필요했으며, A/B 테스트나 타게팅 로직 역시 코드 분기로 관리되어 유지보수가 어려웠다. 특히 디자인 시스템의 컬러값 변경 시 서버 코드도 함께 수정해야 하는 구조적 취약점이 존재했다.

데이터 기반 화면 구성 시스템 'UX Builder'

카카오스타일은 화면 구성 결정을 코드에서 분리하여 데이터로 관리하는 방식으로 전환했다. UX Builder는 운영자가 화면 버전을 생성하고, 슬롯에 모듈을 배치하며, 각 모듈의 내용과 노출 조건(타게팅, 스케줄링 등)을 설정할 수 있는 시스템이다.

• 계층 구조: Page(앱 화면) -> PageRevision(버전 관리) -> Layout(배치) 순으로 구성된다.
• 운영자 권한: 개발자는 '상품 카드 캐로셀' 같은 모듈 도구를 제공하며, 운영자는 이를 조합해 화면을 구성한다.
• 배포 최소화: 화면 구성 변경이 코드 배포 없이 데이터 업데이트로 이루어져, 개발자 개입 없이도 유연한 대응이 가능해졌다.