백엔드
오늘의집 Serving Platform을 통해 비효율성 해소하기 #2. 로직의 시각화
두줄요약
복잡한 SuperRoot와 PageFilter의 디버깅 흐름을 웹 UI로 시각화했습니다. HTMX와 Kotlin HTML DSL로 서버 주도 부분 갱신을 구현했습니다.
문제 상황
- SuperRoot의 MSA 모듈 통합과 복잡해진 PageFilter로 인한 버그 원인 추적 난이도 증가
- API 직접 호출·로그 추가·브레이크포인트 중심 디버깅의 반복 부담
해결 방법
- 요청 설정, 모듈 요청·응답, PageFilter 적용 순서와 전후 결과를 보여주는 웹 UI 구축
- HTMX의 부분 갱신으로 대용량 요청·응답 및 비교 영역의 선택적 로딩
- Kotlin의 kotlinx.html DSL로 서버 렌더링 HTML 조각 제공
선택 이유
- npm·webpack 없이 스크립트 포함만으로 사용하는 경량 HTMX
- 복잡한 클라이언트 상태·인증 로직 없이 서버 계산 결과를 표시하는 요구사항
- WebJars 기반 HTMX 버전 고정과 빌드 아티팩트 포함
성능/운영 포인트
- pico.css, jsondiffpatch 추가로 스타일링과 PageFilter JSON 변경 비교 지원
- 모듈별 응답 상태·소요 시간 및 핵심 비즈니스 로직 전후 변화의 가시화
- SuperRoot 개발 과정의 기본 도구로 활용하며 디버깅 시간 감소
