실험하려다 파편화 부채를 청산했어요.

Context

상담신청, 예약, 결제 기능이 MVP 형태로 각각 다른 디자이너에 의해 빠르게 개발되면서 완료 화면의 상태 문구(명사형/동사형 혼재), 정보 구성, CTA 버튼 연결 화면이 모두 상이해졌다. 이로 인해 고객은 매번 다른 UI 패턴을 학습해야 했고, A/B 테스트 확장 시 유지보수 복잡도가 급증할 위험이 있었다.

Technical Solution

• 상담/예약/결제 완료 화면의 정보 강조 포인트를 분기별로 그룹핑해 일관성 있는 정보 구조 설계
• 상태 표현을 명사형으로 통일하고 디스크립션을 '완료 후 고객의 다음 액션'에 맞춰 재작성
• 카드 컴포넌트를 기본 단위로 하는 완료 화면 템플릿 구축으로 필요한 정보만 추가/제거 가능하도록 모듈화
• 개발 코드에서 비즈니스 로직으로 가공된 데이터를 사전 작성된 컴포넌트에 집어넣는 방식으로 표준화
• 완료 화면이 표시되는 경험부터 내부 컴포넌트 설계까지 UI와 개발 컴포넌트 통합

Impact

• 웹 개발자의 n번 작업량이 1~1.5배 미만으로 감소
• 개발 코드 구현을 한 벌로 통일하면서 개발 시간 단축

Key Takeaway

다중 분기를 빠르게 출시하는 환경에서는 일관된 정보 구조와 모듈화된 컴포넌트 템플릿을 조기에 수립하는 것이 향후 유지보수와 기능 확장의 복잡도를 선제적으로 제어할 수 있다.