예외처리 데모 사이트
PM이 예외 처리 UX를 케이스별로 즉시 검증할 수 있는 PM 협업 도구. ssuport-apply의 30개 이상 예외 케이스를 버튼 한 번으로 재현하는 별도 Vite 프로젝트.
주요 기여
데이터 기반 설계로 새 케이스 추가 시 페이지 코드 수정 없이 배열 항목 추가만으로 완결. 소스 파일 경로 표시로 PM·팀원 온보딩 비용 절감.
PM이 예외 처리 UX를 케이스별로 검토해야 했으나, 실제 앱에서 각 케이스를 트리거하려면 특정 조건을 만들어야 해 확인 비용이 컸습니다. ssuport-apply 코드베이스에 흩어진 30개 이상의 예외 케이스(alert, modal, loading, fallback 4종)를 한눈에 파악할 방법이 없는 상태였습니다.
PM이 코드 없이 모든 예외 UX를 즉시 확인할 수 있는 데모 페이지를 만들고, 새 케이스 추가 비용을 0에 가깝게 낮추는 것.
별도 Vite 프로젝트로 제작. 프로덕션 컴포넌트(Modal, Loading, ErrorLayout)를 그대로 재사용해 실제 서비스와 완전히 동일한 UI를 재현. errorDemoCases.ts 단일 파일에 모든 케이스를 배열로 정의하는 데이터 기반 설계를 채택하고, triggerType 필드(alert/modal/loading/fallback)로 렌더 방식을 추상화해 케이스 데이터는 WHAT만 알면 되도록 설계. 각 카드에 소스 파일 경로와 라인 번호를 표시해 코드 위치 추적을 지원했습니다.
케이스가 계속 추가될 것이 명확한 상황에서, 케이스 추가마다 페이지 컴포넌트를 수정하면 유지보수 비용이 선형으로 늘어나는 구조를 어떻게 해결하느냐가 핵심 과제였습니다.
데이터 기반 UI 자동 생성 구조를 채택해 페이지 코드와 케이스 데이터를 완전히 분리. triggerType 추상화로 '케이스가 무엇을 보여주는가'와 '어떻게 보여주는가'를 분리해 케이스 추가자가 UX 구현 방식을 몰라도 되는 구조를 만들었습니다.
'이 작업이 반복될 것인가'를 먼저 생각하면 설계가 달라진다는 걸 체감했습니다. PM이 코드 없이 UX를 검증할 수 있는 도구를 만드는 것이 '내가 더 빠르게 개발하는 것'보다 팀 전체의 검증 루프를 짧게 만드는 실질적인 생산성 향상이었습니다.