JSON 배열을 HTML 또는 Markdown 표로 변환하는 방법

JSON 배열을 표로 정리할 때 먼저 확인할 점

JSON 데이터를 사람이 읽기 쉬운 표로 정리해야 한다면 최상위 값이 배열인 입력을 준비해 보세요. 이 도구는 비어 있지 않은 JSON 배열을 받아 HTML 표, Markdown 표 또는 두 형식의 결과로 바꿉니다. 배열 안에 문자열이나 숫자만 있으면 값이 한 열에 차례로 놓이고, 객체가 들어 있으면 객체에서 발견되는 키가 열이 됩니다.

입력의 바깥 구조가 중요합니다. { "name": "민수" }처럼 객체 하나만 있는 JSON은 대상 형식이 아니며, 객체를 배열의 항목으로 포함해야 합니다. 여러 객체를 담은 배열에서는 키가 나타나는 순서가 열 순서에 반영되고, 특정 객체에 없는 키의 자리는 빈 셀로 남습니다. 따라서 원본을 표로 옮길 때 어떤 항목 유형이 배열에 들어 있는지 먼저 살펴보면 결과를 예상하기 쉽습니다.

이 작업은 데이터를 표 형태로 확인하거나, 선택한 표 표현을 다른 문서에 옮길 때 유용합니다. 다만 결과의 열 배치와 빈 셀은 입력 배열의 구조를 그대로 바탕으로 정해지므로, 변환 전에 키 이름과 항목 구성을 정리하는 편이 좋습니다.

입력 형식과 출력 선택 순서

표로 바꿀 원본을 준비합니다. JSON 문법에 맞는 텍스트인지 확인하고, 가장 바깥쪽 값이 대괄호로 감싼 배열인지 살펴봅니다. 배열 안에는 문자열, 숫자, 객체 등을 넣을 수 있지만, 항목 유형이 섞이면 행의 모양이 달라질 수 있습니다.
입력 영역에 배열 전체를 붙여 넣습니다. 앞부분이나 뒷부분을 잘라 내지 말고 여는 대괄호와 닫는 대괄호를 함께 포함합니다. 공백만 있는 입력, JSON 문법이 잘못된 텍스트, 배열이 아닌 JSON 값은 표 결과로 이어지지 않습니다.
출력 형식을 정합니다. HTML이 필요하면 HTML을 선택하고, 문서나 메모에 표 문법으로 옮기려면 Markdown을 선택합니다. 두 표현을 모두 확인하려면 결합 형식을 선택할 수 있습니다. 형식을 따로 지정하지 않은 경우에는 HTML이 기본 형식으로 사용됩니다.
변환을 실행합니다. 입력이 비어 있지 않은 배열이면 선택한 형식에 맞는 표 표현이 생성됩니다. 숫자나 문자열처럼 객체가 아닌 값만 있는 배열은 하나의 열을 가진 표로 나타나므로, 값의 순서를 행별로 확인합니다.
객체 배열의 열을 점검합니다. 열은 배열을 읽는 동안 처음 발견되는 객체 키의 순서로 수집됩니다. 뒤에 나오는 객체에서 새로운 키가 발견되면 수집된 열에 추가될 수 있으며, 특정 객체가 어떤 키를 갖지 않으면 그 객체의 해당 칸은 비워집니다.
HTML 결과를 사용할 때는 셀 안의 특수 문자를 확인합니다. HTML에서 특별한 의미를 갖는 문자는 표의 내용으로 해석되지 않도록 처리되므로, 원문과 표시 결과가 달라 보이는 부분이 있는지 살펴봅니다.
Markdown 결과를 사용할 때는 열 이름과 구분 행을 확인합니다. 비어 있지 않고 수집된 열 이름이 하나 이상 있는 배열이라면 헤더 행과 구분 행이 함께 생성됩니다. 셀 값에 세로줄 문자가 포함된 경우에는 Markdown 표의 구분 기호로 오인되지 않도록 이스케이프된 형태를 확인합니다.
결과를 목적에 맞게 복사합니다. HTML을 지원하는 문서에는 HTML 표현을 사용하고, Markdown을 해석하는 편집기에는 Markdown 표현을 사용합니다. 두 형식을 선택했다면 각각의 결과를 따로 비교한 뒤 필요한 쪽을 선택합니다.

생성된 표의 구조를 해석하는 기준

결과를 읽을 때는 먼저 배열의 항목 유형을 기준으로 보세요. 문자열이나 숫자만 있는 배열은 한 열 구조가 정상이며, 각 항목이 별도의 행에 대응합니다. 객체 배열은 수집된 키가 열 이름이 되고, 키가 빠진 객체에는 해당 위치가 빈 셀로 남습니다. 이 빈칸은 변환 실패를 뜻하지 않고 입력 객체에 그 키가 없다는 구조를 나타냅니다.

Markdown 표는 열 이름을 수집할 수 있는지에 따라 모양이 달라집니다. 하나 이상의 열 이름이 있는 비어 있지 않은 배열에서는 헤더와 구분 행을 기대할 수 있지만, [{}]처럼 객체 키가 하나도 모이지 않는 배열은 헤더와 구분 행 없이 데이터 행만 만들 수 있습니다. 그러므로 행만 보이는 경우에는 입력 객체에 실제 키가 있었는지 확인하세요.

값과 객체가 함께 있는 혼합 배열은 해석에 특히 주의해야 합니다. 객체가 아닌 값은 첫 번째 열에만 값이 들어간 행으로 유지되고, 객체는 수집된 객체 키 열을 사용합니다. 그 결과 모든 행이 같은 칸 수를 갖는 직사각형 표가 되지 않을 수 있습니다. 후속 분석이나 정렬에 사용할 데이터라면 혼합 항목을 같은 구조의 객체로 먼저 정리하는 방법을 고려하세요.

HTML에서는 특수한 의미가 있는 문자가 이스케이프되어 셀 내용에 반영됩니다. Markdown에서도 세로줄 문자가 표의 구분 기호로 처리되지 않도록 바뀔 수 있습니다. 따라서 결과를 원본 텍스트와 비교할 때는 표시 형식에 필요한 이스케이프를 원문 변경으로 오해하지 않는 것이 좋습니다.

사용 예시

연락처 JSON 배열에서 이름과 나이 열의 배치를 확인하려고 객체 배열을 Markdown 표로 변환합니다.

[{"name":"민수","age":20},{"name":"지수"}]를 입력하고 Markdown 출력을 선택합니다.

Markdown 결과에는 name과 age 열이 생기고, 두 번째 객체에는 age 키가 없으므로 해당 셀이 비어 있는 표 구조가 됩니다.

제한 사항

빈 배열은 표를 만들지 않으며, 혼합 배열은 모든 행이 같은 열 구조로 정렬되지 않을 수 있습니다. 수집된 키가 없는 배열은 Markdown 헤더와 구분 행 없이 표시될 수 있습니다.

자주 발생하는 오류

객체 하나를 배열 바깥에 그대로 붙여 넣으면 최상위 값이 배열이 아니어서 표가 생성되지 않습니다. 객체를 대괄호 안의 항목으로 감싸고 JSON 문법을 다시 확인한 뒤 제출하세요.

자주 묻는 질문

빈 JSON 배열도 표로 변환되나요?

빈 배열은 표를 생성하지 않습니다. 변환할 행이 있도록 하나 이상의 항목을 포함한 배열을 입력해야 합니다.

문자열과 객체가 섞인 배열도 변환할 수 있나요?

변환은 가능하지만 결과를 직사각형 표로 보기는 어렵습니다. 객체가 아닌 값은 첫 번째 열에만 놓이고, 객체는 수집된 객체 키 열을 사용하므로 행의 구조가 서로 달라질 수 있습니다.

Markdown 결과에는 헤더가 항상 표시되나요?

열 이름이 하나 이상 수집된 비어 있지 않은 배열에서는 헤더 행과 구분 행이 나옵니다. 객체 키가 전혀 없는 [{}] 같은 배열은 헤더와 구분 행 없이 행만 만들 수 있습니다.