마크다운 HTML JSON 테이블 상호 변환 공식과 데이터 매핑 가이드

직접 해보기 →

웹 프론트엔드 개발 시 백엔드 API로부터 전달받은 객체 배열 형태의 JSON 데이터를 화면에 표 형식으로 렌더링해야 하거나, 역으로 위키백과/블로그에 포스팅할 마크다운 표(Table) 코드를 HTML 테이블 태그로 가공해야 할 때 테이블 데이터의 구조 변환(Data Mapping)이 잦은 병목을 일으킵니다.

각 포맷은 데이터를 구조화하여 나열하는 고유의 문법 체계를 갖추고 있기 때문에, 이를 파싱해 데이터 모델로 뽑아낸 후 교차 치환하는 공식을 확립해 두면 변환 오류를 사전에 완전히 방지할 수 있습니다. 본 글에서는 테이블 데이터의 교차 매핑 공식과 구현 원리를 해설합니다.

---

1. 테이블 데이터 구조의 통합 추상화 공식

상이한 세 포맷(Markdown, HTML, JSON) 간의 유연한 양방향 변환을 실현하기 위해서는 각 포맷을 파싱하여 중간 공통 데이터 모델인 **'이차원 배열 구조(Grid 데이터)'**로 추상화해야 합니다:

[ \text{Grid} = \left{ H_{\text{headers}}, R_{\text{rows}} \right} ] [ H_{\text{headers}} = [h_1, h_2, \dots, h_m], \quad R_{\text{rows}} = [r_1, r_2, \dots, r_n] \quad (\text{단, } r_i = [v_1, v_2, \dots, v_m]) ]

① JSON $\rightarrow$ Grid 공식:

객체 배열 [ { "name": "A", "age": 20 }, ... ] 형태가 인입되면:

• 헤더 배열($H$)은 객체들의 공통 Key 키값 목록 ["name", "age"]으로 수집합니다.
• 행 배열($R$)은 각 객체에서 헤더 키 순서대로 추출한 Value 데이터 목록 [["A", 20]]으로 빌드합니다.

② Grid $\rightarrow$ Markdown 테이블 렌더링 공식:

| name | age |  <- 헤더 영역
| --- | --- |   <- 구분선(Align) 영역
| A | 20 |      <- 행 내용 영역

③ Grid $\rightarrow$ HTML 렌더링 공식:

최상위 <table> 노드 아래 헤더는 <thead>와 <th> 태그로, 본문 행들은 <tbody>, <tr>, <td> 태그를 조합하여 동적으로 반복 배치해 마크업 문자열을 조합합니다.

---

2. 정규식을 통한 마크다운 표 문자열 파싱 기전

텍스트 기반 마크다운 표 코드를 Grid 모델로 안전하게 파싱하기 위한 핵심 정규식 구조는 다음과 같습니다:

1. 줄 단위 분할: 개행 문자로 나눈 후, | 기호로 시작하는 유효한 테이블 행 패턴을 필터링합니다.
2. 셀 값 추출 및 정제: 각 줄에서 파이프 문자(|) 기준으로 분할한 뒤 앞뒤 공백을 확실히 제거합니다: [ V_{\text{cells}} = \text{line.split}('|').\text{map}(\text{x} \rightarrow \text{x.trim}()).\text{filter}(\text{x} \rightarrow \text{x} \neq \text{" "}) ]
3. 구분선(Divider) 스킵: 둘째 줄에 오는 구분선 행(|---|:---:|)은 순수 데이터 정보가 아니므로 파싱 검사 시 조건문으로 스킵합니다.

[!NOTE] 수작업으로 HTML 테이블 태그를 마크다운 파이프 기호 문법으로 변경하거나, JSON 데이터를 표로 그리기 위해 수십 줄의 JS 렌더링 템플릿 코드를 짤 필요 없이, 테이블 교차 변환기를 사용하면 붙여넣는 즉시 세 포맷 간의 완벽한 상호 교차 결과 코드를 1초 만에 획득할 수 있습니다.

Markdown ↔ HTML ↔ JSON 테이블 양방향 변환기→

변환하고자 하는 마크다운 표 소스나 HTML 태그 또는 JSON 데이터를 입력창에 넣어 다른 포맷의 완벽한 테이블 데이터로 즉시 교차 획득해 보세요.

---

3. 테이블 구조 설계 시 준수해야 할 유의점

1. 불규칙한 셀 수 예외 처리: 어떤 행에는 열(Column) 개수가 4개인데 다른 행에는 3개만 있는 등의 셀 불일치 예외가 발생하면 테이블 렌더링 시 레이아웃이 완전히 뒤틀립니다. 빈 셀이 있더라도 플레이스홀더("" 등)나 빈 칸을 채워 컬럼 총합을 맞춰 주어야 브라우저 렌더링이 깨지지 않습니다.
2. 행 개수가 비대할 때의 성능 보정: 수천 행에 달하는 JSON 데이터를 변환할 때는 동기식 정규식 조작 시 화면이 잠시 버벅거릴 수 있으므로 웹 워커(Web Worker)나 청크 단위 배치 분할 렌더링을 적용하는 편이 성능 확보에 압도적으로 유리합니다.

가격 보기카톡 무료 상담