JSON을 HTML로 변환

관련 추천

JSON을 HTML로 및 HTML 테이블 소개

사용 사례

• 프론트엔드 개발: API에서 반환된 JSON 데이터를 HTML 테이블로 빠르게 렌더링하여 관리 대시보드나 문서 페이지에 삽입
• Tailwind / Bootstrap 프로젝트: "table class 명" 입력에 Tailwind 또는 Bootstrap 클래스명을 직접 입력하여 기존 스타일 시스템과 매끄럽게 통합
• 반응형 웹페이지: 기본 가로 스크롤 래퍼로 모바일 테이블이 페이지 레이아웃을 깨지 않음
• 데이터 시각화 표시: HTML 삽입을 지원하는 블로그 / 문서 / Confluence / Notion 등에 스타일이 적용된 테이블을 붙여넣기
• 보고서 생성: 백엔드에서 내보낸 JSON 데이터를 HTML 이메일 보고서로 빠르게 변환하여 업무 담당자에게 전송
• 프론트엔드 프로토타이핑: 디자인 단계에서 실제 데이터로 테이블 스타일을 미리보기하여 인도 전에 제품 / 디자인과 정렬
• CMS 시스템: WordPress / Drupal 등 CMS를 위한 정적 HTML 테이블 스니펫을 작성하여 템플릿 엔진의 복잡성 회피
• 테스트 및 디버깅: 브라우저 콘솔의 JSON.stringify 출력을 붙여넣어 복잡한 중첩 데이터의 2차원 구조를 빠르게 미리보기
• 이메일 템플릿: 테이블 HTML을 HTML 이메일에 인라인(Outlook 호환성 테스트 필요)
• API 문서 작성: Markdown / Swagger / Redoc에 HTML 테이블을 삽입하여 기본 JSON 예제 대체
• 교육 시나리오: 데이터 구조 수업에서 학생이 제출한 중첩 JSON 과제를 테이블로 변환하여 일괄 채점 표시
• 데이터 정제 보고서: 데이터베이스에서 내보낸 중첩 JSON을 평탄화 모드로 테이블로 변환하여 필드 비교 용이

이용 방법

1. 왼쪽 편집기에 JSON 배열(권장) 또는 단일 객체를 붙여넣거나 "Sample"을 클릭하여 3개의 상품 예제를 로드, "Upload"를 클릭하여 .json / .txt 파일을 로드
2. 툴바에서 중첩 처리 모드 선택(권장: "평탄화"). 중첩 객체는 `user.name` 등의 점으로 구분된 키로 자동 전개
3. "Convert" 버튼 클릭(또는 Enter 키 누름)으로 변환 실행. 입력 시 500ms 디바운스 보호 작동
4. 오른쪽 Code 탭에서 구문 강조가 적용된 HTML 테이블 코드 확인, Preview 탭에서 iframe 실시간 렌더링 확인
5. 툴바에서 스타일 옵션(얼룩무늬 줄무늬 / 테두리 / 호버 / 컴팩트 / 반응형)을 체크하고 커스텀 table class 입력, null 자리표시자 설정. 실시간 미리보기가 자동 업데이트
6. 만족스러우면 "Copy"를 클릭하여 HTML 코드 복사 또는 "Download"를 클릭하여 table.html로 다운로드. 재설정이 필요하면 Reset 클릭

주요 기능

• 중첩 객체 자동 평탄화: `{user:{name,age}}`를 `user.name`, `user.age` 등의 점 표기 키로 재귀 전개 (구분자 설정 가능), 수동 평탄화 스크립트 불필요
• 3가지 중첩 처리 모드: 평탄화(권장, 6단계까지 자동 전개) / 최상위 키(중첩 객체를 단일 열로) / 문자열(중첩 객체를 JSON 문자열로 미리보기)
• 커스텀 CSS class 훅: `<table>`과 선택적 외곽 `<div>`에 임의의 class 문자열을 주입하여 Tailwind / Bootstrap / Bulma 등 스타일 시스템과 매끄럽게 통합
• 반응형 가로 스크롤: 기본적으로 외곽을 `overflow-x:auto` 컨테이너로 래핑하여 좁은 화면에서 자동으로 가로 스크롤바가 나타나 페이지 레이아웃이 깨지지 않음
• 6가지 비주얼 스타일 토글: 얼룩무늬 줄무늬, 테두리, 행 호버, 컴팩트 모드, 첫 번째 인덱스 열(#), 테이블 캡션 — 툴바 체크박스로 즉시 적용
• Code + iframe 미리보기 이중 탭: Code 탭은 구문 강조 HTML 소스 표시, Preview 탭은 샌드박스 iframe에서 실제 테이블을 실시간 렌더링
• 타입 인식 강조: null은 회색 이탤릭(자리표시자 텍스트 사용자 지정 가능), 부울은 초록/빨강, 숫자는 파랑, 중첩 객체는 호버로 전체 JSON 확인
• 행 수 제한 보호: 기본 1000행 상한(1-10000 조정 가능), 초과 시 자동 절단 및 "절단됨" 알림으로 거대한 DOM 렌더링의 브라우저 부하 방지
• 생성 통계 피드백: 오른쪽 패널에 "X행 × Y열 생성됨" + 절단 배지를 실시간 표시, 긴 JSON 디버깅 시 데이터 규모를 한눈에 파악
• 한 번 클릭 복사 / 다운로드: Code 모드에서 HTML 소스를 클립보드에 복사하거나 table.html 파일로 다운로드하여 임의의 웹사이트에서 그대로 사용
• 샘플 데이터 + 파일 업로드: 3개의 상품 샘플(Laptop / Mouse / Desk Chair)을 한 번 클릭으로 로드, .json / .txt 파일의 드래그 앤 드롭 또는 클릭 업로드 지원
• 한 번 클릭 재설정: 툴바 오른쪽의 Reset 버튼으로 14개 설정을 한꺼번에 기본값으로 되돌려 빠른 시행착오에 최적
• 로컬 기록: localStorage 기반으로 최근 200개 입력을 영구 저장, 새로 고침이나 실수로 탭을 닫아도 복원 가능
• 완전 브라우저 로컬 처리: 모든 JSON 파싱, HTML 생성, 복사, 다운로드는 브라우저 내에서 이루어지며 데이터는 어떠한 서버에도 전송되지 않음

코드 예제

// 1) GitHub API를 호출하여 사용자 목록 가져오기
async function fetchUsers() {
  const res = await fetch('https://api.github.com/users?per_page=10');
  return await res.json();
}

// 2) 중첩 평탄화 함수(본 도구의 평탄화 로직과 등가)
function flattenObject(obj, prefix = '', sep = '.', result = {}) {
  for (const [k, v] of Object.entries(obj || {})) {
    const key = prefix ? `${prefix}${sep}${k}` : k;
    if (v && typeof v === 'object' && !Array.isArray(v)) {
      flattenObject(v, key, sep, result);
    } else {
      result[key] = v;
    }
  }
  return result;
}

// 3) 평탄화된 데이터를 HTML 테이블로 변환, Tailwind class 주입
function generateHtmlTable(rows) {
  const flat = rows.map(r => flattenObject(r));
  const cols = [...new Set(flat.flatMap(r => Object.keys(r)))];
  const thead = cols.map(c => `<th class="px-4 py-2 text-left">${c}</th>`).join('');
  const tbody = flat.map(r =>
    `<tr class="border-b hover:bg-gray-50">${cols.map(c => `<td class="px-4 py-2">${r[c] ?? 'N/A'}</td>`).join('')}</tr>`
  ).join('');
  return `<table class="min-w-full text-sm">
  <thead class="bg-gray-100"><tr>${thead}</tr></thead>
  <tbody>${tbody}</tbody>
</table>`;
}

// 4) 페이지에 주입
const users = await fetchUsers();
const html = generateHtmlTable(users);
document.getElementById('table-container').innerHTML = html;
console.log(users.length + '행, ' + (Object.keys(flattenObject(users[0])).length) + '열 생성됨');

from flask import Flask, jsonify, render_template_string
import json

app = Flask(__name__)

TEMPLATE = """
<!doctype html><html><body>
<div class="overflow-x-auto">{{ table_html | safe }}</div>
</body></html>
"""

def flatten(obj, prefix='', sep='.', result=None):
    """중첩 객체를 재귀적으로 평탄화"""
    if result is None:
        result = {}
    for k, v in (obj or {}).items():
        key = f"{prefix}{sep}{k}" if prefix else k
        if isinstance(v, dict):
            flatten(v, key, sep, result)
        else:
            result[key] = v
    return result

def json_to_html_table(data, table_class='min-w-full border-collapse',
                        max_rows=1000, responsive=True):
    if isinstance(data, dict):
        data = [data]
    if not data:
        return "<p>데이터 없음</p>"

    # 행 절단
    truncated = False
    if len(data) > max_rows:
        data = data[:max_rows]
        truncated = True

    # 각 행 평탄화
    flat_rows = [flatten(row) for row in data]

    # 모든 열명 수집(set으로 중복 제거, 삽입 순서 유지)
    columns = []
    for row in flat_rows:
        for k in row.keys():
            if k not in columns:
                columns.append(k)

    # thead 생성
    thead = "".join(f'<th class="px-4 py-2 text-left bg-gray-100">{c}</th>' for c in columns)

    # 테이블 행 생성
    rows = []
    for i, row in enumerate(flat_rows):
        bg = "bg-gray-50" if i % 2 == 1 else ""
        tds = "".join(
            f'<td class="px-4 py-2 {bg}">{("N/A" if row.get(c) is None else row.get(c, ""))}</td>'
            for c in columns
        )
        rows.append(f'<tr class="hover:bg-blue-50">{tds}</tr>')

    html = f'<table class="{table_class}"><thead><tr>{thead}</tr></thead><tbody>{"".join(rows)}</tbody></table>'
    if responsive:
        html = f'<div class="overflow-x-auto">{html}</div>'

    if truncated:
        html = f'<p class="text-amber-600 text-sm">데이터를 처음 {max_rows}행으로 절단했습니다</p>{html}'

    return html


@app.route('/api/users')
def users():
    data = json.load(open('users.json'))
    return jsonify(data)

@app.route('/users.html')
def users_html():
    import requests
    data = requests.get('http://localhost:5000/api/users').json()
    return render_template_string(TEMPLATE, table_html=json_to_html_table(data))


if __name__ == '__main__':
    app.run(debug=True)

# 1) jq를 사용하여 중첩 로그를 집계하고 점으로 구분된 키로 평탄화
cat app.log | jq -s '
  group_by(.response.status_code) |
  map({
    status: .[0].response.status_code,
    count: length,
    "first_request.method": .[0].request.method,
    "last_request.url": .[-1].request.url,
    "first_seen": min_by(.timestamp).timestamp,
    "last_seen": max_by(.timestamp).timestamp
  })
' > stats.json

# 2) stats.json을 본 도구에 붙여넣기
#    툴바에서 "평탄화(권장)" 모드 선택
#    "얼룩무늬 줄무늬 + 반응형 래퍼 + 테두리" 체크
#    table class 명에 min-w-full text-sm border-collapse 입력
#    null 자리표시자를 -로 설정(누락 필드는 -로 표시)
#    Caption을 2026-07 운영 오류 로그 통계로 설정
#    Convert를 클릭하여 table.html 다운로드

# 3) S3 / OSS 정적 사이트에 업로드
aws s3 cp table.html s3://my-bucket/reports/2026-07.html --acl public-read

# 또는 Confluence / Notion / VuePress 문서에 삽입
sed -i '' 's/min-w-full/min-w-full shadow-md/g' table.html

# 또는 HTML 이메일로 전송
mutt -e "set content_type=text/html" -s "2026-07 오류 로그" your@email.com < table.html

자주 묻는 질문

문제 해결

용어집

HTML 테이블 (HTML Table)

W3C 표준의 구조화된 데이터 표시 요소. table / thead / tbody / tr / th / td / caption 등의 시맨틱 태그로 구성됩니다. 본 도구가 생성하는 코드는 이 구조를 엄격히 따릅니다.

JSON 배열

대괄호 [...]로 묶인 객체의 집합. 본 도구는 배열의 각 객체를 테이블의 한 행으로 사용합니다. 빈 배열인 경우 테이블을 생성하지 않습니다(알림 표시).

JSON 객체

중괄호 {}로 묶인 키-값 쌍의 집합. 본 도구는 객체의 각 키를 테이블 헤더로, 값을 셀로 사용합니다. 단일 객체는 자동으로 한 행 테이블로 래핑됩니다.

중첩 평탄화 (Flatten)

중첩된 객체를 점으로 구분된 플랫 키로 재귀적으로 전개. 예: {user:{name:'A'}} → 'user.name'. 본 도구는 6단계까지 자동 평탄화를 지원하며 구분자는 사용자 지정 가능합니다.

thead / tbody

HTML 테이블의 두 시맨틱 구분: thead는 헤더 행(th)을 래핑하고 tbody는 데이터 행(td)을 래핑합니다. 본 도구가 생성하는 코드는 이 두 부분을 엄격히 구분합니다.

Caption

테이블 제목 태그로, 테이블 내부 첫 번째 행에 위치합니다. 본 도구는 커스텀 캡션 텍스트를 지원하며 활성화되면 지정된 제목이 테이블 상단에 표시되어 SEO와 접근성에 모두 도움이 됩니다.

얼룩무늬 줄무늬 (Zebra Striping)

홀수 행과 짝수 행이 다른 배경색을 교대로 사용하는 시각적 패턴. 일반적으로 #fff / #f9fafb 조합이 사용됩니다. 본 도구에서는 "얼룩무늬 줄무늬" 체크박스로 활성화하며 긴 테이블의 가독성을 크게 향상시킵니다.

인라인 스타일 (Inline Style)

외부 스타일시트를 참조하지 않고 HTML 태그의 style 속성으로 직접 CSS를 작성하는 것. 본 도구는 기본적으로 모든 스타일을 인라인 style로 출력하여 추가 CSS 파일 없이 코드를 그대로 사용할 수 있습니다.

CSS class 훅

본 도구의 차별화 기능: `<table>` 태그에 임의의 class 문자열(Tailwind 클래스 등)을 주입하여 기존 CSS 프레임워크와 매끄럽게 통합. 이는 경쟁 제품에 대한 핵심 업그레이드입니다.

iframe sandbox

HTML 태그 iframe의 보안 샌드박스 모드로, 스크립트 실행과 양식 제출을 제한할 수 있습니다. 본 도구는 sandbox="allow-same-origin"의 iframe을 사용하여 생성된 HTML을 미리보기하며 우발적인 스크립트 실행을 방지합니다.

타입 인식 강조

본 도구의 차별화 기능: 셀 값의 JS 타입(null / boolean / number / object / string)에 따라 다른 색상을 적용하여 API 데이터 디버깅을 더 직관적으로 만듭니다.

localStorage 기록

브라우저가 제공하는 로컬 키-값 저장소(용량 약 5-10MB). 본 도구는 localStorage를 사용하여 최근 200개 입력을 영구 저장하며 새로 고침이나 실수로 탭을 닫은 후 빠르게 복원할 수 있습니다.

반응형 래퍼 (Responsive Wrapper)

테이블 외곽을 `<div style="overflow-x:auto;max-width:100%;">`로 래핑하여 좁은 화면에서 자동으로 가로 스크롤바가 나타나도록 합니다. 본 도구는 기본적으로 활성화되어 있으며 툴바에서 끌 수 있습니다.

디바운스 (Debounce)

프론트엔드 성능 최적화 기법: 고빈도 이벤트(예: 입력)의 콜백을 마지막 트리거 후 한 번 실행되도록 병합. 본 도구는 500ms 디바운스를 설정하여 대용량 파일 파싱의 끊김을 방지합니다.

W3C HTML5

World Wide Web Consortium(W3C)이 제정한 HTML 표준 사양. 본 도구가 생성하는 코드는 HTML5 사양을 준수하며 모든 모던 브라우저에서 올바르게 렌더링됩니다.

3가지 중첩 처리 모드 비교표

툴바는 서로 다른 중첩 시나리오에 대응하는 3가지 모드를 제공합니다. JSON 구조의 복잡도에 따라 선택하세요:

툴바 14개 설정 옵션 요약표

툴바의 14개 설정 옵션과 그 시각적 차이를 일람화하여 빠른 조합 선택을 가능하게 합니다:

셀 타입 인식 강조 규칙 요약표

본 도구는 JSON 값의 JavaScript 타입에 따라 다른 색상을 자동 적용하여 데이터 타입을 빠르게 식별할 수 있도록 합니다:

Privacy & Security

본 JSON을 HTML로 도구는 모든 JSON 파싱, 중첩 평탄화, HTML 생성, 복사, 다운로드 작업을 JavaScript에 의해 브라우저 내에서만 실행합니다. 입력된 JSON 데이터와 생성된 HTML 코드는 서버에 업로드되지 않으며 로그 기록, 캐시, 클라우드 저장도 일체 이루어지지 않습니다. 미공개 API 응답과 내부 비즈니스 필드가 포함된 민감한 JSON도 안심하고 사용할 수 있으며 페이지를 닫으면 모든 데이터가 삭제됩니다.

Authoritative References

• MDNMDN - HTML <table> 요소
• MDNMDN - HTML 테이블 기초
• W3CW3C HTML5 명세 - table 요소
• MDNMDN - iframe sandbox 속성
• MDNMDN - JSON.parse / JSON.stringify
• TailwindTailwind CSS - 테이블 스타일
• BootstrapBootstrap - 테이블