JSON Crack 사용법: 복잡한 JSON 구조를 그래프로 확인하는 방법

JSON Crack으로 복잡한 JSON 구조를 노드 그래프로 확인하는 방법을 정리했습니다. 브라우저에서 직접 입력·변환해 본 결과, 무료 편집기에서 가능한 작업과 이미지 내보내기, 개인정보 처리, 로그인·유료 기능을 확인할 때 주의할 제한을 직접 확인한 화면을 바탕으로 함께 설명합니다.

JSON Crack은 중첩된 JSON을 노드와 연결선으로 바꿔 구조를 훑기 편하게 해 주는 웹 편집기다. JSON 문법이 맞는지 먼저 확인하는 도구와는 역할이 다르며, 객체·배열 관계를 빠르게 보고 싶을 때 유용하다. 다만 실제 업무 데이터라도 브라우저에 붙여 넣기 전에는 서비스의 데이터 처리 고지와 조직의 보안 규칙을 함께 확인해야 한다.

  • 공식 URL: https://jsoncrack.com/
  • 직접 확인 환경: 비로그인 데스크톱 브라우저, 2026-10-21 KST
  • 가입·설치: 이 글에서 확인한 기본 편집기·변환 흐름은 가입이나 설치 없이 열렸다.
  • 요금: 홈에는 Upgrade 메뉴가 보였지만, 이 환경에서는 Pro 가격 페이지가 DNS 오류로 열리지 않았다. 유료 금액이나 기능 범위는 적지 않는다.
  • 한국어: 편집기 UI는 확인 당시 영어였다. JSON 키와 값에 한글을 넣을 수 있는지까지는 이번 글에서 별도로 검증하지 않았다.

텍스트만 봐도 되는 JSON과 그래프가 더 빠른 JSON

짧고 평평한 JSON은 텍스트 정렬이나 JSONLint로 문법 오류를 확인하는 방법만으로도 충분한 경우가 많다. 반면 배열 안에 객체가 반복되고, 그 안에 또 객체가 들어가면 어떤 값이 어느 항목에 속하는지 눈으로 따라가기가 어렵다.

JSON Crack은 이때 구조 탐색용으로 쓸 수 있다. 값 자체를 고치거나 API 응답의 문법 오류를 찾는 작업보다 배열 → 항목 → 하위 객체 → 값의 관계를 한 화면에서 훑는 데 맞는다.

JSON Crack 홈에서 JSON 시각화와 Editor 진입 버튼을 안내하는 화면
JSON Crack 홈은 JSON을 대화형 그래프로 시각화하고 Editor에서 직접 입력할 수 있다고 안내한다.

편집기에 JSON을 넣고 그래프로 바꾸는 순서

  1. JSON Crack 홈에서 Editor 또는 Go to Editor를 연다.
  2. 왼쪽 편집기에 JSON을 붙여 넣거나 파일·URL·직접 입력 방식을 선택한다. 서비스 홈은 이 세 가지 입력 방식을 안내한다.
  3. 상단의 Valid 표시로 현재 입력이 유효한 JSON인지 확인한다. 빨간 오류가 나면 먼저 쉼표·따옴표·괄호를 정리한다.
  4. Live Transform을 켠 뒤 Click to Transform을 실행한다.
  5. 오른쪽 그래프에서 배열과 객체 노드를 펼쳐 관계를 본다. 그래프가 넓어지면 하단의 맞춤 보기 도구를 사용한다.

붙여 넣은 데이터는 결과 그래프 안에서 사람이 읽기 쉬운 노드로 분리된다. 예를 들어 fruits 배열에 Apple·Banana·Orange 객체가 있으면 각 객체의 details, nutrients가 별도 노드로 이어져 보인다.

직접 변환해 보니 중첩 객체가 이렇게 보였다

기본 예시의 과일 배열을 변환해 보았다. 왼쪽에는 원본 JSON이 있고, 오른쪽에는 fruits 배열 3개 항목이 갈라진다. 각 항목에서 이름·색상·세부 정보·영양 정보가 다시 연결된다.

특히 details와 nutrients처럼 같은 키가 여러 항목에 반복될 때, 어느 과일의 값인지 연결선으로 확인할 수 있었다. 아래 화면은 변환 후 Fit to center로 그래프를 화면 안에 맞춘 상태다.

JSON Crack Editor에서 fruits 배열과 details 및 nutrients 객체를 노드 그래프로 변환한 화면
기본 예시의 fruits 배열을 변환한 뒤 Fit to center로 노드 그래프를 편집기 화면에 맞췄다.

문법 검사와 구조 탐색을 나눠 쓰면 좋은 경우

JSON Crack의 화면에는 유효성 상태가 보이지만, 이 글에서 직접 확인한 핵심은 구조를 그래프로 보는 흐름이다. API 응답이 파싱되지 않거나 몇 번째 줄이 틀렸는지 좁혀야 할 때는 JSONLint 사용법처럼 오류 위치 중심의 도구를 먼저 쓰는 편이 빠를 수 있다.

반대로 문법이 맞는 큰 JSON에서 특정 필드가 어디에 중첩됐는지 파악해야 하면 JSON Crack이 잘 맞는다. 값에서 원하는 문자열만 걸러야 할 때는 Regex101 정규식 테스트 가이드처럼 별도의 문자열 조건 도구가 더 직접적이다.

무료 사용과 내보내기 전에 확인할 범위

공식 홈은 JSON 외에 YAML, CSV, XML을 지원한다고 안내하고, 그래프를 PNG·JPEG·SVG로 내보낼 수 있다고 소개한다. 이 글에서는 JSON 기본 편집기에서 예시 데이터를 변환하고 그래프를 맞춰 보는 데까지 확인했다.

홈에는 Upgrade 메뉴가 있어 유료 옵션이 있는 것으로 보인다. 그러나 2026-10-21 기준 이 환경에서 Pro 가격 주소는 열리지 않아 요금, 광고 제거 여부, 클라우드 저장 같은 유료 범위는 직접 확인하지 못했다. 결제 전에는 로그인 후 현재 가격 화면과 약관을 다시 확인하는 편이 안전하다.

데이터는 서버 저장과 방문 정보 처리를 구분해서 보기

개인정보처리방침은 편집기에 붙여 넣어 시각화하는 데이터는 서버에 저장하거나 처리하지 않는다고 고지한다. 동시에 방문 과정에서 사용 데이터와 쿠키를 수집할 수 있으며 Google Analytics를 사용할 수 있다고 설명한다.

따라서 “붙여 넣은 JSON이 서버에 저장되지 않는다”는 고지만으로 어떤 데이터든 넣어도 된다고 볼 수는 없다. 고객 정보, 접근 토큰, 비밀번호, API 키, 내부 URL, 계약 정보는 제거하거나 가짜 값으로 바꾼 뒤 테스트하는 것이 좋다. 회사나 고객사의 보안 정책이 있다면 그 규칙을 우선해야 한다.

이런 때 JSON Crack이 맞고, 아닐 수도 있다

추천하는 경우

  • 중첩 배열·객체가 많은 API 응답의 구조를 빠르게 설명해야 할 때
  • JSON을 처음 받았고 어떤 키가 어느 객체 아래에 있는지 훑어야 할 때
  • 구조를 그림으로 공유하거나 이미지로 내보낼 필요가 있을 때

다른 도구가 나은 경우

  • 문법 오류의 줄·열을 빠르게 찾아야 할 때
  • 민감값을 제거할 수 없고 조직 정책상 외부 웹 도구 사용이 금지된 경우
  • 그래프보다 코드 편집기에서 검색·변경·버전 관리가 중요한 경우

JSON Crack을 쓰기 전에 많이 묻는 것

가입하지 않고 사용할 수 있나?

이번에 확인한 JSON 편집기와 기본 예시 변환은 비로그인 상태에서 열렸다. 다만 계정 기능·유료 기능의 범위는 가격 페이지를 확인하지 못했으므로 별도 확인이 필요하다.

JSON 문법이 틀려도 그래프로 볼 수 있나?

편집기에는 Valid 상태가 표시된다. 변환 전에 유효한 JSON인지 먼저 확인하는 흐름이 안전하다. 오류 위치를 상세히 다뤄야 하면 JSON 문법 검증 도구를 함께 사용한다.

업무 JSON을 그대로 붙여 넣어도 되나?

공식 개인정보처리방침은 편집기 데이터가 서버에 저장·처리되지 않는다고 고지한다. 그래도 토큰·개인정보·내부 식별자 같은 민감값은 제거하고, 조직 보안 정책을 우선하는 편이 좋다.

확인한 공식 자료

복잡한 JSON이 눈에 잘 들어오지 않을 때는 먼저 문법을 확인한 뒤, 샘플이나 민감값을 뺀 데이터로 구조를 그래프화해 보자. 노드로 한 번 펼쳐 보면 다음에 어떤 필드를 찾아야 할지 빨리 정리할 수 있다.