DFS 알고리즘과 재귀적 콘텐츠 파서
코딩테스트에서만 쓰인다고 여겨지기 쉬운 알고리즘은 실무에서도 '문제를 정확히 파악하고 요구사항에 맞게 구현하는 능력'으로 이어진다. 실제 사례로, 약관처럼 조항이 자주 갱신되는 콘텐츠를 다루던 프로젝트에서 버전별 분기 처리(`version !== '2020-10-20' && ...`)를 계속 추가하다 코드가 읽기 힘든 기술 부채로 쌓인 문제가 있었다. 처음엔 작은 불편함이었지만 요청이 반복될수록 분기가 누적되며 유지보수가 어려워졌고, 사이트 리뉴얼을 계기로 근본적인 해결을 시도하게 됐다.
해결 방향은 '마크업·렌더링 코드는 건드리지 않고, 약관 내용(JSON)만 바꾸면 자동으로 렌더링되는 시스템'을 만드는 것이었다. 이를 위해 약관의 국문/영문 JSON에서 숫자 리스트·문자 리스트 항목의 key를 depth와 무관하게 `numList`/`charList`로 통일하고, 트리 구조로 중첩된 JSON을 깊이 우선 탐색(DFS) 알고리즘으로 순회하는 재귀 함수를 작성했다. 함수가 재귀 호출로 한 단계씩 더 들어갈 때마다 depth 값을 1씩 늘려 들여쓰기 수준을 결정하고, 현재까지의 key 경로를 문자열로 이어붙여 각 노드를 식별했다. 순회 중 만난 값이 객체면 계속 하위로 내려가고, 객체가 아니면(리프 노드) 그 자리에서 HTML로 렌더링하는 방식이다.
이 접근은 콘텐츠의 구조가 바뀌거나 깊어져도 파서 코드를 수정할 필요 없이 JSON 데이터만 갱신하면 되도록 만들어, 조항 추가·삭제마다 조건 분기를 늘려야 했던 기존 방식의 기술 부채를 근본적으로 해소했다. 다만 이 사례는 DFS 자체가 가장 효율적인 알고리즘이라기보다, 문제 인식 능력(사소한 불편을 방치하지 않고 문제로 인지하는 태도)과 문제 해결 능력(적합한 자료구조·알고리즘을 실무 문제에 매핑하는 능력)이 결합된 예시로 소개됐다.
핵심 내용
- 조건 분기(`version !== ...`)가 반복 누적되는 것은 콘텐츠 갱신형 화면에서 흔한 기술 부채 패턴
- 해결 원칙: 마크업·렌더링 로직은 고정하고, 콘텐츠(JSON)만 교체하면 렌더링이 자동으로 반영되게 설계
- JSON key를 depth와 무관하게 `numList`/`charList`로 통일해 파서 분기를 단순화
- 깊이 우선 탐색(DFS) 재귀 함수로 중첩 JSON을 순회하며 depth를 인자로 넘겨 들여쓰기 수준 결정
- 값이 객체면 재귀 진입(하위 depth로), 객체가 아니면 리프 노드로 간주해 즉시 렌더링
- 알고리즘 실무 활용의 핵심은 효율성보다 문제 인식 능력과 문제 해결 능력의 결합
관련 개념
- UX 엔지니어 직무와 XE 그룹 — 이 글도 pxd XE그룹의 기술 블로그 공유 문화에서 나온 사례
- 약관 동의 UI — 약관 화면의 UX 설계 관점, 이 글은 같은 소재를 구현·아키텍처 관점에서 다룸
출처
- 약관을 자동으로 만들어보자! — 2023-06-30, 알 수 없는 사용자