Building an Embeddable Family Tree Viewer in TypeScript
아일랜드 족보 플랫폼 개발자가 기존 라이브러리 부재 시 GEDCOM 파서, 그래프 레이아웃 엔진, WikiTree API 통합을 자체 구축하여 의존성 제로 35KB 번들 생성
AI 요약
Context
기존 오픈소스 family tree 라이브러리들(d3.js 데모, Treant.js, FamilyChart)은 GEDCOM의 FAM 레코드 모델(부부와 자녀를 first-class 객체로 취급하는 그래프 구조)을 제대로 처리하지 못했고, 재혼·이복형제·근친혼 등 복잡한 가족 관계에서 잘못된 레이아웃을 생성했다. WikiTree 공개 API를 지원하는 라이브러리도 없었다.
Technical Solution
- GEDCOM 파서: 2-pass 토크나이저 + 레벨 스택 기반 노드 트리 빌드로 구현, BOM/CRLF/CR 정규화, CONC/CONT 연속 라인 처리, ANSEL 인코딩 경고 처리
- 데이터 모델: Individual(givenName, surname, sex, events, familyAsChild, familiesAsSpouse, notes) + Family(husbandId, wifeId, childIds) 인터페이스로 GEDCOM 스키마 직접 반영
- 레이아웃 엔진: 2-phase BFS + 부부 정렬 알고리즘으로 다중 결혼과 이복형제 관계 처리
- WikiTree API 통합: 동적 임포트(dynamic import)로 핵심 번들 크기 유지, 필요 시에만 로더 페칭
- 빌드 시스템: Vite library mode로 ESM + UMD 포맷 동시 생성, 순수
<script>태그와 번들러 모두 지원 - 제로 의존성 구조: 날짜 파싱, SVG 경로 헬퍼, 테스트 유틸까지 자체 작성으로 번들 최소화
Impact
ESM 빌드 크기 35KB, Vitest 61개 테스트 케이스로 파서·시리얼라이저·레이아웃·편집 기능 커버
Key Takeaway
GEDCOM처럼 도메인 고유 데이터 모델이 있는 경우, 기존 범용 라이브러리를 강제로 적합(fit)시키려는 것보다 핵심 기능을 정확하게 구현한 특화 도구를 만드는 것이 임베드 가능성, 번들 크기, 공급망 보안 측면에서 더 나은 선택이 될 수 있다. 특히 의존성 제로 구조는 CMS 임베딩 같은 제약 환경에서 실질적 이점을 제공한다.
실천 포인트
족보 또는 네트워크 그래프를 시각화해야 하는 웹 애플리케이션에서는 계층적 트리가 아닌 그래프 모델(부부-자녀 관계)로 데이터를 설계한 뒤, 2-phase BFS + 정점 정렬 레이아웃 알고리즘을 적용하면 재혼·복잡한 혼인 관계를 올바르게 렌더링할 수 있다. 또한 핵심 번들을 의존성 제로로 유지하고 WikiTree 같은 선택적 기능은 동적 임포트로 분리하면, 임베드 환경에서의 통합 복잡도를 크게 줄일 수 있다.