UltKit

HTML JSON 변환

저장한 웹 페이지에서 표를 꺼내 코드에서 바로 반복 처리할 수 있는 JSON으로 받으십시오. 머리글 셀이 키 이름이 되고, 표의 각 행은 배열 안의 객체 하나가 됩니다.

데이터 변환

또는 CSV, TSV, TXT … 파일을 여기에 끌어다 놓으세요 ·

파일당 최대 95 MB· 최대 20개 파일· 30분 뒤 삭제

출력

파일은 UltKit 서버에서 처리되며 30분 뒤 삭제됩니다.

사용 방법

  1. 1

    페이지나 표 저장하기

    브라우저에서 Ctrl+S(Mac은 Cmd+S)를 눌러 HTML 파일을 저장하거나, 개발자 도구에서 표의 마크업을 복사해 .html 파일로 만드십시오. 한 번에 최대 20개, 파일당 95 MB까지 업로드할 수 있습니다.

  2. 2

    JSON 구조 선택하기

    기본값은 객체 배열입니다. 더 작은 파일이 필요하면 고급 설정에서 JSON 구조를 배열의 배열로 바꾸고, 한 줄짜리 출력이 필요하면 보기 좋게 정렬을 끄십시오.

  3. 3

    변환 후 데이터 사용하기

    JSON으로 변환을 누르고 파일을 다운로드한 뒤 JavaScript의 JSON.parse, Python의 json.load 또는 API 클라이언트로 불러오십시오.

페이지를 저장하고 .html 파일을 업로드하면 표의 각 행이 머리글 셀을 키로 한 JSON 객체로 돌아옵니다.

웹 표를 JSON으로 변환해야 할 때

쓸모 있는 데이터 중 상당수는 HTML 표로만 존재합니다. 환율 페이지, 스포츠 리그 순위표, 인트라넷이 화면에는 보여 주지만 다운로드는 허용하지 않는 보고서, 모든 서버를 나열한 상태 페이지가 그렇습니다. 브라우저에서는 보기 좋게 표시되지만, 차트를 만드는 프런트엔드 개발자나 테스트 데이터가 필요한 테스터에게는 객체 배열이 필요합니다.

흔한 해결책은 스크래퍼입니다. 페이지를 가져와 Beautiful Soup이나 Cheerio로 파싱하고, 행을 순회하며 셀을 매핑합니다. 페이지가 매일 바뀐다면 작성할 가치가 있습니다. 하지만 한 번만 필요한 표라면 저장한 페이지를 업로드하는 편이 빠르고, 유지 관리할 코드도 남지 않습니다.

HTML 표 JSON 변환 예시

th 머리글 도시와 설립 연도가 있는 입력 표와 객체 배열 출력
<table>
  <tr><th>도시</th><th>설립 연도</th></tr>
  <tr><td>포르투</td><td>1123</td></tr>
  <tr><td>그라츠</td><td>1128</td></tr>
</table>

[
  { "도시": "포르투", "설립 연도": 1123 },
  { "도시": "그라츠", "설립 연도": 1128 }
]

변환 시 유지되는 것과 버려지는 것

  • 유지: 셀 텍스트, 키로 쓰이는 머리글 행, 행 순서
  • 제거: CSS, 인라인 스타일, 클래스, 표를 둘러싼 페이지
  • 제거: 셀 안의 이미지와 아이콘(텍스트 값이 없음)
  • 링크 셀은 뒤에 있는 URL이 아니라 화면에 보이는 텍스트를 유지합니다
  • 셀 앞뒤의 공백은 공백 제거로 잘라 냅니다
  • 출력은 UTF-8이며, RFC 8259는 시스템 간에 주고받는 JSON에 이 인코딩을 요구합니다

HTML JSON 변환기 제한

저장한 페이지 지원
.html .htm
한 번에 처리할 페이지 수
20
업로드 파일당
95 MB
후 파일 삭제
30분

HTML과 JSON 비교

HTML

하이퍼텍스트 마크업 언어(HTML)

HTML은 웹의 마크업 언어로, 1990년대 초 Tim Berners-Lee가 처음 기술했고 현재는 WHATWG가 리빙 스탠더드로 관리합니다. HTML 파일은 제목, 문단, 링크, 표, 이미지, 양식을 기술하며 스타일은 보통 CSS가 담당합니다. 모든 브라우저가 렌더링하며 이메일 템플릿과 저장된 웹 페이지에도 쓰입니다. HTML 파일 하나는 외부 이미지와 스타일시트에 의존하는 경우가 많아, 파일만 따로 옮기면 깨져 보일 수 있습니다.

압축 방식
–
투명도
–
애니메이션
–
도입 연도
1993 · Tim Berners-Lee; maintained by WHATWG
HTML 변환

JSON

JavaScript 객체 표기법(JSON)

JSON은 구조화된 데이터를 위한 가벼운 텍스트 형식으로, 2000년대 초 Douglas Crockford가 널리 알렸고 RFC 8259와 ECMA-404로 표준화되었습니다. 객체, 배열, 문자열, 숫자, 불리언, null을 간단하고 읽기 쉬운 문법으로 표현합니다. 거의 모든 프로그래밍 언어에서 웹 API, 설정 파일, 앱 간 데이터 교환의 기본 형식으로 쓰입니다. 주석, 날짜, 스키마가 기본으로 들어 있지 않고, 깊게 중첩된 큰 파일은 뷰어 없이 읽기 어렵습니다.

압축 방식
–
투명도
–
애니메이션
–
도입 연도
2001 · Douglas Crockford
JSON 변환

보고서 페이지, 사내 인트라넷, 공개 통계 사이트처럼 사람이 읽도록 게시된 표를 스크립트, 차트 라이브러리, API 테스트에 넣어야 할 때 HTML을 JSON으로 변환합니다.

두 형식은 출발점이 다릅니다. HTML은 1991년 Tim Berners-Lee가 처음 기술했고 지금은 WHATWG가 리빙 스탠더드로 관리하며, 문서를 화면에 표시하기 위한 마크업입니다. JSON은 Douglas Crockford가 정의하고 RFC 8259와 ECMA-404로 표준화되었으며, 데이터만 담습니다. 앞의 것에서 뒤의 것으로 옮기는 일은 대부분 표현 요소를 버리는 작업이므로, 결과물은 보통 저장한 페이지보다 훨씬 작습니다. 웹 페이지가 아니라 XML 피드로 받은 표라면 XML JSON 변환이 같은 일을 합니다.

HTML JSON 변환 자주 묻는 질문

웹 페이지 전체를 읽나요, 표만 읽나요?

표 마크업만 읽습니다. 즉 table, tr, th, td 요소 안의 행과 셀입니다. 내비게이션 메뉴, 문단, div 요소로 만든 카드 레이아웃은 표 형식 데이터가 아니므로 JSON으로 바뀌지 않습니다.

JSON 키는 어느 행에서 가져오나요?

머리글 행, 보통 표 맨 위의 th 셀입니다. 첫 행을 머리글로 사용을 켜면 그 텍스트가 아래 각 값의 키가 되므로, Population이라는 열은 모든 객체에서 "Population": "…"이 됩니다.

colspan과 rowspan으로 병합된 셀은 어떻게 처리되나요?

병합된 셀은 여러 칸을 차지하지만 값은 하나뿐입니다. 그 값은 첫 번째 칸에만 들어간다고 보고, 변환 후 병합된 열을 확인하십시오. 표가 병합된 머리글에 의존한다면 빈칸은 코드에서 채워야 합니다.

JSON의 숫자에 쉼표나 각주 기호가 붙어 있는 이유는 무엇인가요?

웹 표는 사람이 읽도록 작성되므로 셀에 1,204,000이나 8.3[2]처럼 적혀 있을 수 있습니다. 1123 같은 순수한 숫자는 JSON 숫자가 되지만, 그런 셀은 올바른 숫자가 아니어서 문자열로 남습니다. 계산하기 전에 코드에서 구분 기호와 각주 기호를 제거하십시오.

웹사이트의 표를 가져와도 되나요?

파일 형식이 아니라 해당 사이트의 이용 약관과 데이터에 따라 달라집니다. 공개 통계나 직접 내보낸 보고서가 일반적인 경우이며, 다른 사람의 콘텐츠를 다시 쓰기 전에는 약관을 확인하십시오.

JSON 대신 스프레드시트로 받을 수 있나요?

네. HTML CSV 변환은 같은 표를 Excel, Google Sheets, Numbers에서 열리는 쉼표 구분 행으로 저장합니다.