레이아웃 때문에 사과하지 않아도 되는 JSON HTML 변환
설정 파일, Webhook 페이로드, 분석보내기는 대개 JSON으로 옵니다. 개발자는 중첩 객체를 읽지만 이해관계자는 못 읽는 경우가 많습니다. 이 페이지는 그 데이터를 브라우저, 위키, CMS 코드 블록에서 열 수 있는 HTML 테이블이나 목록으로 바꿉니다. JSON을 붙이거나 불러오고 레이아웃을 고르면 디버그 덤프가 아닌 의도된 마크업을 얻습니다. 많은 변환기는 좁은 의미의 JSON HTML 변환에 그칩니다. 점 경로 헤더 한 줄, 기본 테두리, 진짜 타이포그래피 없음. 기술적으로는 맞지만 공유하기 어렵습니다. 「이건 클라이언트에게 못 보내겠다」고 생각해 본 적이 있다면 간극을 아실 겁니다. 여기서는 구조와 표현이 함께 갑니다. 객체 배열은 테이블, 중첩은 트리·정의 목록, 레거시 한 줄 레이아웃은 플랫 와이드 테이블. 전체 문서 보내기에는 Clean, Minimal, Compact 같은 가벼운 테마를 더해 복사 전 프리뷰에서 여백과 글꼴을 확인할 수 있습니다. 변환은 브라우저에서 로컬로 실행되며 JSON은 업로드되지 않습니다. 원시 HTML로 태그를 보고, HTML 프리뷰로 홈 playground를 열고, JSON 포맷으로 한 줄 로그를 정리할 수 있습니다.
읽기 쉬운 테이블로 JSON을 HTML로——셀 벽이 아니라
「JSON HTML 변환 테이블」 검색은 대개 「배열을 표로 보여 달라」는 뜻입니다. 테이블 모드가 그렇게 합니다. 공통 키가 열, 각 항목이 행, `<thead>`와 읽기 쉬운 셀. 단일 객체는 두 열 속성 표, 중첩 값은 필요 시 하위 테이블. 예전 한 줄 형태가 필요하면 플랫 와이드 테이블이 `items.0.name` 같은 점 경로 키를 한 줄 헤더에 둡니다——상위 변환기에서 흔한 형태로, 예쁘지는 않지만 하류 도구에는 예측 가능합니다. 트리 모드는 중첩 객체·배열을 목록으로 매핑해 디버깅에 맞습니다. 정의 목록은 용어집형 문서에 맞습니다. `<tr>`을 손으로 쓰거나 템플릿을 고칠 필요가 없습니다.
메일은 내장 스타일과 인라인 스타일이 갈라지는 곳이며 많은 사람이 막힙니다. 다듬은 전체 보내기는 타이포와 테이블 규칙을 head의 `<style>`에 둡니다. Gmail, Outlook, 대부분 ESP는 그 블록을 제거해 보내기는 되지만 여백이 사라집니다. 출력 패널에서 「내장」으로 설계하고 뉴스레터·트랜잭션 메일에 붙이기 전 「인라인」으로 바꾸세요. CSS Inliner 페이지와 같은 엔진이 맞는 규칙을 `style` 속성으로 옮기고 불필요한 `<style>`을 제거합니다. Keyframes, `:hover`, 일부 가상 요소는 인라인 불가——받은편지함에 남지 않는 항목은 「안내」에 나열됩니다.
변환기 열기처음부터 스타일 있는 테이블
전체 문서 보내기에 테마와 여백——최소 변환기의 border="1"만 있는 출력과 다릅니다.
내장→인라인 원클릭
`<style>`로 설계한 뒤 출력 토글로 메일용 `style` 속성.
네 가지 레이아웃
테이블, 플랫 와이드, 트리, 정의 목록——JSON 형태에 맞게 선택.
JSON HTML 변환 테이블 옵션과 보내기 경로
API 배열에서 붙여 넣기 가능한 마크업까지——프리뷰, 테마, 선택적 메일 인라인 CSS.
디버그 격자가 아닌 보고서 같은 표
객체 배열에 열 머리글과 행 구분. 전체 보내기에서 테마가 읽기 쉬운 글꼴·테두리를 더합니다. 복사 전 프리뷰에서 결과 확인——붙인 뒤에야 못생긴 마크업을 발견할 필요가 없습니다.
- 읽기 쉬운 테이블과 테마——못생긴 한 줄 덤프 아님
- 출력 패널 내장→인라인, 메일 대응
- 테이블, 플랫, 트리, 정의 목록
- 브라우저에서 로컬 실행
실무에서 JSON을 HTML로 변환하는 방법
JSON 붙이기 또는 불러오기
왼쪽 패널에 minify된 API 출력을 넣거나 `.json`을 불러옵니다. 로그가 한 줄이면 JSON 포맷으로 들여쓰기를 고칩니다. 레이아웃 선택 전 파싱 오류를 수정하세요.
레이아웃과 프리뷰 테마 선택
객체 배열은 테이블. 중첩 문서는 트리 또는 정의 목록. 점 경로 열이 필요할 때만 플랫 와이드. 다운로드 시 조각 vs 전체 문서와 테마——프리뷰와 저장 파일이 같게.
프리뷰 확인 후 원시 HTML
프리뷰는 렌더 결과, 원시 HTML은 복사할 정확한 태그. 대상이 브라우저·CMS면 전체 문서 내장 CSS로 충분한 경우가 많습니다. 받은편지함이면 다음 단계.
메일이면 인라인으로 바꾼 뒤 보내기
출력 헤더에서 인라인을 켜 `<style>` 규칙을 요소로 옮깁니다. 건너뛴 선택자는 「안내」를 읽으세요. HTML 복사, `.html` 다운로드, 홈 playground HTML 프리뷰——다른 도구와 같습니다.
JSON HTML 변환 FAQ
지금 JSON HTML 변환
읽기 쉬운 테이블, 테마 프리뷰, 받은편지함이 목적이면 인라인 CSS.
JSON HTML 변환
- 스타일 테이블——테두리만 있는 덤프가 아님
- 출력 패널에서 내장 또는 인라인 CSS
- 로컬 변환, 복사, 다운로드
- No signup; use the tool in the browser
메일은 인라인 후 프리뷰하고 테스트 발송——클라이언트 차이는 여전히 있습니다.
정말 보낼 수 있는 JSON에서 HTML로
제대로 된 타이포의 테이블——수신자가 메일이면 인라인 스타일도 원클릭.