테이블에 가장 잘 맞는 JSON 형태는?

이상적으론 같은 키를 가진 객체 배열——각 키가 열. 단일 객체는 두 열 속성 표. 깊게 중첩된 파일은 트리·정의 목록. 그 형태가 필요하면 플랫 와이드가 점 경로를 한 줄 넓은 표로 만듭니다.

못생긴 표 하나만 내는 변환기와 뭐가 다른가요?

많은 도구는 기본 테두리만 있는 HTML 표나 스프레드시트 한 줄에서 멈춥니다. 여기서는 레이아웃 선택, 전체 보내기 테마 프리뷰, 편집 가능한 정제 마크업——짧은 변환이 아니라 읽기 쉬운 결과가 목표입니다.

출력 패널 내장과 인라인은 왜 필요한가요?

내장은 CSS를 ` `에 둡니다——브라우저·많은 CMS용. 인라인은 ` `을 무시하는 메일 클라이언트용으로 `style` 속성에 씁니다. 내장으로 설계하고 ESP에 붙이기 전 인라인. 건너뛴 항목은 「안내」——CSS Inliner와 동일.

조각 보내기와 전체 문서 차이는?

조각은 구조만——사이트가 자체 CSS를 쓸 때. 전체 문서는 ` `, head, 테마 CSS——로컬에서 스타일 적용해 열림. 메일은 보통 전체 문서→인라인→복사 순.

JSON이 서버에 업로드되나요?

아니요. 파싱·렌더·인라인은 페이지 로드 후 브라우저에서 실행됩니다.

도구 안에서 잘못된 JSON을 고칠 수 있나요?

파싱 오류는 편집기 아래에 표시됩니다. 문법 수정 후 JSON 포맷을 쓰세요. 파서는 후행 쉼표 등 비 JSON 리터럴을 받지 않습니다.

가이드

레이아웃 때문에 사과하지 않아도 되는 JSON HTML 변환

설정 파일, Webhook 페이로드, 분석보내기는 대개 JSON으로 옵니다. 개발자는 중첩 객체를 읽지만 이해관계자는 못 읽는 경우가 많습니다. 이 페이지는 그 데이터를 브라우저, 위키, CMS 코드 블록에서 열 수 있는 HTML 테이블이나 목록으로 바꿉니다. JSON을 붙이거나 불러오고 레이아웃을 고르면 디버그 덤프가 아닌 의도된 마크업을 얻습니다. 많은 변환기는 좁은 의미의 JSON HTML 변환에 그칩니다. 점 경로 헤더 한 줄, 기본 테두리, 진짜 타이포그래피 없음. 기술적으로는 맞지만 공유하기 어렵습니다. 「이건 클라이언트에게 못 보내겠다」고 생각해 본 적이 있다면 간극을 아실 겁니다. 여기서는 구조와 표현이 함께 갑니다. 객체 배열은 테이블, 중첩은 트리·정의 목록, 레거시 한 줄 레이아웃은 플랫 와이드 테이블. 전체 문서 보내기에는 Clean, Minimal, Compact 같은 가벼운 테마를 더해 복사 전 프리뷰에서 여백과 글꼴을 확인할 수 있습니다. 변환은 브라우저에서 로컬로 실행되며 JSON은 업로드되지 않습니다. 원시 HTML로 태그를 보고, HTML 프리뷰로 홈 playground를 열고, JSON 포맷으로 한 줄 로그를 정리할 수 있습니다.

스타일 테이블 프리뷰와 레이아웃 조작이 있는 JSON HTML 변환 도구

읽기 쉬운 테이블로 JSON을 HTML로——셀 벽이 아니라

「JSON HTML 변환 테이블」 검색은 대개 「배열을 표로 보여 달라」는 뜻입니다. 테이블 모드가 그렇게 합니다. 공통 키가 열, 각 항목이 행, `<thead>`와 읽기 쉬운 셀. 단일 객체는 두 열 속성 표, 중첩 값은 필요 시 하위 테이블. 예전 한 줄 형태가 필요하면 플랫 와이드 테이블이 `items.0.name` 같은 점 경로 키를 한 줄 헤더에 둡니다——상위 변환기에서 흔한 형태로, 예쁘지는 않지만 하류 도구에는 예측 가능합니다. 트리 모드는 중첩 객체·배열을 목록으로 매핑해 디버깅에 맞습니다. 정의 목록은 용어집형 문서에 맞습니다. `<tr>`을 손으로 쓰거나 템플릿을 고칠 필요가 없습니다.

메일은 내장 스타일과 인라인 스타일이 갈라지는 곳이며 많은 사람이 막힙니다. 다듬은 전체 보내기는 타이포와 테이블 규칙을 head의 `<style>`에 둡니다. Gmail, Outlook, 대부분 ESP는 그 블록을 제거해 보내기는 되지만 여백이 사라집니다. 출력 패널에서 「내장」으로 설계하고 뉴스레터·트랜잭션 메일에 붙이기 전 「인라인」으로 바꾸세요. CSS Inliner 페이지와 같은 엔진이 맞는 규칙을 `style` 속성으로 옮기고 불필요한 `<style>`을 제거합니다. Keyframes, `:hover`, 일부 가상 요소는 인라인 불가——받은편지함에 남지 않는 항목은 「안내」에 나열됩니다.

변환기 열기

🌱