{ freetool24 }
Developer Tools

JSON & 데이터 도구: 코드 없이 JSON 포맷, 유효성 검사, 변환, 쿼리하기

브라우저 기반 JSON 도구 완벽 가이드 — JSON 포맷 및 유효성 검사, TypeScript 인터페이스 생성, CSV 또는 SQL 변환, Zod 스키마 구축, JSON diff 비교, JSONPath 쿼리 실행까지.

7분 읽기

JSON 데이터 구조를 보여주는 코드 에디터

JSON은 API, 설정 파일, 데이터베이스, 데이터 교환의 공통 언어입니다. 개발자들은 JSON을 항상 다루면서 포맷을 정리하고, 유효성을 검사하고, 변환하거나, 정보를 추출해야 하는 상황에 끊임없이 직면합니다. 다음은 모든 일반적인 JSON 작업을 처리하는 도구들을 정리한 완벽 가이드입니다. 모두 브라우저에서 직접 실행됩니다.

1. JSON Formatter & Validator

가장 흔한 JSON 작업: 압축되거나 가공되지 않은 API 응답을 붙여넣고 읽기 쉽게 만드는 것입니다.

JSON Formatter는 세 가지 기능을 제공합니다:

보기 좋게 출력: {"name":"Alice","age":30,"scores":[98,87,91]}를 다음과 같이 정리합니다:

{
  "name": "Alice",
  "age": 30,
  "scores": [98, 87, 91]
}

유효성 검사: 정확한 줄과 위치와 함께 문법 오류를 즉시 표시합니다. 감지하는 일반적인 오류:

  • 후행 쉼표 (JS 객체에서는 허용되지만 JSON에서는 유효하지 않음)
  • 큰따옴표 대신 작은따옴표 사용
  • 따옴표 없는 키
  • 필드 사이의 쉼표 누락
  • 괄호 불일치

압축: 포맷된 JSON을 API 요청이나 저장을 위해 한 줄로 압축합니다.

2. JSON to TypeScript: 인터페이스 자동 생성

대용량 API 응답에서 TypeScript 인터페이스를 손으로 작성하는 것은 번거롭고 오류가 발생하기 쉽습니다. JSON to TypeScript 변환기는 이를 자동으로 생성합니다.

입력:

{
  "user": {
    "id": 1,
    "name": "Alice",
    "email": "alice@example.com",
    "roles": ["admin", "editor"],
    "metadata": {
      "createdAt": "2024-01-15T10:00:00Z",
      "active": true
    }
  }
}

출력:

interface Metadata {
  createdAt: string;
  active: boolean;
}

interface User {
  id: number;
  name: string;
  email: string;
  roles: string[];
  metadata: Metadata;
}

interface Root {
  user: User;
}

변환기는 중첩 객체, 배열, 선택적 필드(입력에서 일부 키가 누락된 경우), 유니온 타입을 처리합니다. 실제 API 응답을 붙여넣으면 몇 초 만에 프로덕션에 바로 사용할 수 있는 TypeScript를 얻을 수 있습니다.

3. JSON to Zod Schema: 런타임 유효성 검사

TypeScript 인터페이스는 컴파일 타임에만 작동합니다. 런타임에서 API 응답, 폼 데이터, 설정 파일을 검증하려면 Zod가 필요합니다. JSON to Zod 변환기는 어떤 JSON에서든 완전한 Zod 스키마를 생성합니다.

위와 동일한 입력에서:

import { z } from "zod";

const MetadataSchema = z.object({
  createdAt: z.string().datetime(),
  active: z.boolean(),
});

const UserSchema = z.object({
  id: z.number(),
  name: z.string(),
  email: z.string().email(),
  roles: z.array(z.string()),
  metadata: MetadataSchema,
});

const RootSchema = z.object({
  user: UserSchema,
});

스마트 타입 추론에 주목하세요 — createdAt은 ISO datetime 문자열로 인식되고, email은 이메일 주소로 감지됩니다. 단순히 z.string()이 아니라 형식이 검증된 타입입니다.

4. JSON Schema Validator: 스키마에 대한 데이터 유효성 검사

JSON Schema(Draft 4, 6, 7, 또는 2019-09)가 있고 데이터를 검증해야 한다면, JSON Schema Validator가 ajv 라이브러리를 사용하여 브라우저에서 유효성 검사를 실행합니다.

활용 사례:

  • 개발 중 API 요청/응답 페이로드 유효성 검사
  • 생성된 데이터가 스키마와 일치하는지 테스트
  • 배포 전 스키마 유효성 검사 오류 디버깅
  • 설정 파일이 스펙을 준수하는지 확인

유효성 검사기는 상세한 오류 경로를 보여줍니다 — 단순히 "유효성 검사 실패"가 아니라 어떤 필드가 왜 실패했는지 정확히 알려줍니다:

/user/email: must match format "email"
/user/age: must be >= 0
/user/roles/2: must be string

5. JSON Diff Viewer: 변경된 내용 정확히 파악

API 변경 사항을 디버깅하거나 두 데이터 스냅샷을 비교할 때, JSON Diff Viewer는 추가, 제거, 수정된 내용을 정확히 보여줍니다.

왼쪽 (변경 전):             오른쪽 (변경 후):
{                           {
  "status": "active",         "status": "inactive",   ← 변경됨
  "count": 42,                "count": 42,
  "tags": ["a", "b"],         "tags": ["a", "b", "c"] ← "c" 추가됨
  "deprecated": true        
}                           }                         ← "deprecated" 제거됨

diff는 색상 코딩과 함께 트리 뷰로 표시됩니다:

  • 🟢 초록: 추가됨
  • 🔴 빨강: 제거됨
  • 🟡 노랑: 수정됨
  • ⬜ 회색: 변경 없음

일반적인 활용 사례:

  • 코드 변경 전후의 두 API 응답 비교
  • 대용량 설정 파일에서 변경된 내용 확인
  • 캐시된 응답이 새로운 응답과 다른 이유 디버깅
  • 데이터 마이그레이션이 예상한 결과를 생성했는지 확인

6. JSONPath Finder: 클릭으로 경로 가져오기

JSONPath는 JSON의 쿼리 언어로, XML의 XPath에 해당합니다. 특정 중첩된 값의 JSONPath가 필요할 때, JSON Path Finder를 사용하면 트리에서 아무 값이나 클릭해 경로를 즉시 확인할 수 있습니다.

{
  "store": {
    "books": [
      { "title": "Clean Code", "price": 29.99 },
      { "title": "The Pragmatic Programmer", "price": 39.99 }
    ]
  }
}

29.99 클릭 → 경로: $.store.books[0].price "The Pragmatic Programmer" 클릭 → 경로: $.store.books[1].title

경로는 점 표기법($.store.books[0].price)과 괄호 표기법($['store']['books'][0]['price']) 모두로 표시되어 JavaScript, Python, 또는 어떤 JSONPath 라이브러리에서도 쉽게 사용할 수 있습니다.

7. JSON to CSV / CSV to JSON: 형식 간 변환

API는 JSON을 반환하고, 스프레드시트는 CSV를 요구합니다. CSV ↔ JSON Converter는 양방향 변환을 처리합니다.

JSON 배열 → CSV:

[
  { "name": "Alice", "age": 30, "city": "NYC" },
  { "name": "Bob", "age": 25, "city": "LA" }
]

결과:

name,age,city
Alice,30,NYC
Bob,25,LA

CSV → JSON: 반대 방향 — 헤더가 있는 CSV를 가져와 객체 배열을 생성합니다. 따옴표로 묶인 필드, 값 안의 쉼표, 다양한 줄 끝 문자를 처리합니다.

CSV 데이터를 더 강력하게 다루려면, SQL on CSV 도구를 사용해 업로드된 CSV 파일에서 직접 SELECT 쿼리를 실행하세요 — Python 한 줄 없이 필터링, 정렬, 조인이 가능합니다.

8. JSON to SQL: INSERT 구문 생성

JSON 데이터로 데이터베이스를 채울 때, JSON to SQL Converter는 어떤 SQL 방언에도 맞는 INSERT 구문을 생성합니다.

입력:

[
  { "id": 1, "name": "Alice", "email": "alice@example.com" },
  { "id": 2, "name": "Bob", "email": "bob@example.com" }
]

출력 (PostgreSQL):

INSERT INTO users (id, name, email) VALUES
(1, 'Alice', 'alice@example.com'),
(2, 'Bob', 'bob@example.com');

MySQL, PostgreSQL, SQLite, SQL Server 방언을 지원하며 각 방언에 맞게 따옴표 스타일, NULL 값, 불리언 표현을 올바르게 처리합니다.

9. JSON Table Viewer: JSON 배열을 스프레드시트로 보기

때로는 쿼리를 작성할 필요 없이 JSON 배열을 테이블로 보기만 하면 됩니다. JSON Table Viewer는 객체의 JSON 배열을 정렬 및 검색 가능한 테이블로 렌더링합니다.

열 헤더를 클릭해 정렬하세요. 검색창에 입력해 행을 필터링하세요. 어떤 크기의 배열도 작동하며, 중첩된 객체를 평탄화하고 검색된 용어를 강조 표시합니다.

빠른 참조

작업 도구
JSON 포맷/유효성 검사 JSON Formatter
TypeScript 인터페이스 생성 JSON to TypeScript
Zod 유효성 검사 스키마 생성 JSON to Zod
JSON Schema에 대한 유효성 검사 JSON Schema Validator
두 JSON 객체 비교 JSON Diff Viewer
값의 JSONPath 찾기 JSON Path Finder
JSON ↔ CSV 변환 CSV ↔ JSON Converter
SQL INSERT 구문 생성 JSON to SQL
JSON을 테이블로 보기 JSON Table Viewer

공통점: 이 모든 도구는 브라우저에서 완전히 실행됩니다. 대용량 JSON 페이로드는 절대 사용자의 기기를 벗어나지 않으므로, 프로덕션 데이터, 응답에 포함된 API 키, 서드파티 서버에서 처리하고 싶지 않은 민감한 페이로드에도 안전하게 사용할 수 있습니다.

모든 아티클로 돌아가기도구 둘러보기