JSON 포맷터

JSON 텍스트를 포맷하고 구조를 확인하며 압축할 수 있습니다.

도구 열기 도구 목록으로
// about

도구 소개

JSON 텍스트는 긴 한 줄로 엉켜 있으면 읽기 어렵습니다. 이 도구는 줄 바꿈과 들여쓰기를 자동으로 정리해 누구나 쉽게 확인하고 수정할 수 있게 도와줍니다.

사용 방법

  1. 정리하고 싶은 JSON 텍스트를 상단 상자에 붙여넣으세요.
  2. 실행 버튼을 누르거나, 한 줄로 줄이고 싶다면 압축 옵션을 선택하세요.
  3. 깔끔하게 바뀐 결과를 복사해서 바로 사용하세요.

이 도구를 찾는 이유

  • 클릭 한 번으로 빽빽한 JSON을 읽기 쉽게 들여쓰기 해줍니다.
  • 빠진 따옴표나 쉼표 같은 오타를 즉시 찾아냅니다.
  • 데이터 크기를 최소화하는 압축(Minify) 기능도 제공합니다.

자주 묻는 질문 (FAQ)

JSON이 무엇인가요?

JSON은 컴퓨터끼리 정보를 주고받을 때 중괄호와 따옴표를 이용해 목록을 깔끔하게 정리하는 약속입니다.

내 입력 데이터가 서버에 저장되나요?

아니요! 모든 작업은 사용자의 브라우저 안에서만 처리되므로 개인정보가 안전하게 보호됩니다.

오류 메시지가 뜨면 어떻게 하나요?

입력한 글자 중에 따옴표가 안 닫혔거나 쉼표가 누락되었는지 확인해보세요!

가이드 · 데이터 · 5분 읽기

JSON 문법 오류 해결 가이드: 가장 흔한 실수 7가지와 정리하는 법

API 응답, 설정 파일, 로그까지 JSON은 개발자가 가장 많이 읽는 데이터 형식입니다. 그런데 쉼표 하나, 따옴표 하나 때문에 'Unexpected token' 오류가 나곤 합니다. 원인을 빠르게 찾는 법을 정리했습니다.

JSON(JavaScript Object Notation)은 RFC 8259와 ECMA-404로 표준화된 텍스트 데이터 형식입니다. 자바스크립트에서 왔지만 이제는 거의 모든 언어가 지원합니다. 값의 종류는 문자열, 숫자, 불리언(true/false), null, 배열, 객체 여섯 가지뿐입니다.

{
  "id": 1024,
  "name": "AIBIZAP",
  "active": true,
  "tags": ["tools", "guides"],
  "owner": null
}
JSON의 기본 문법, 파싱 오류를 일으키는 흔한 실수 7가지, 큰 숫자와 날짜를 다룰 때 주의할 점, JSON을 클래스나 테이블로 바꾸는 방법을 설명합니다.
가이드 읽기 →

관련 가이드

데이터 4분 읽기

CSV와 JSON 비교: 언제 무엇을 쓰고, 변환할 때 무엇을 조심할까

CSV와 JSON의 구조적 차이, 엑셀에서 CSV 한글이 깨지는 이유, 쉼표와 따옴표 처리 규칙, 중첩 데이터를 변환할 때의 주의점을 정리합니다.

가이드 읽기
AI로 직접 만들기

이 도구를 AI로 직접 만들어 보세요

나만의 버전이 필요하다면 아래 작업지시 프롬프트를 AI 채팅에 붙여 넣거나, 스킬 파일을 AI 코딩 에이전트에 저장하세요. 저희가 이 도구를 만들 때 정리한 기능, 예외 상황, 테스트 케이스가 그대로 담겨 있습니다.

AI 작업지시 프롬프트

Claude, ChatGPT, Gemini 같은 AI 채팅에 그대로 붙여 넣으세요.

당신은 숙련된 풀스택 웹 개발자입니다. 아래 요구사항에 맞춰 "JSON 포맷터" 웹 도구를 만들어 주세요.

## 목표

JSON을 검증하고 보기 좋게 정리(Pretty print)하거나 압축(Minify)하는 도구를 만든다.

## 핵심 기능

- 문법 검증과 오류 위치(줄·열) 표시
- 들여쓰기 2칸/4칸/탭 선택
- 압축 모드
- 키 이름 알파벳 정렬 옵션
- 결과 복사 및 .json 다운로드

## 입력

- JSON 텍스트
- 들여쓰기, 정렬, 모드 옵션

## 출력

- 정리 또는 압축된 JSON
- 오류 메시지(위치 포함)

## 예외 상황과 처리 규칙

- 끝 쉼표·작은따옴표·주석 등 흔한 오류는 원인을 쉬운 말로 설명
- 2^53보다 큰 정수가 바뀌지 않도록 원문 숫자 보존
- 파일 앞의 BOM 제거
- 수 MB 입력에서도 멈추지 않게 처리

## 구현 조건

- 서버 없이 브라우저에서 동작하는 단일 페이지(HTML, CSS, JavaScript)로 만들고, 입력 데이터를 외부로 전송하지 마세요.
- 모바일에서도 쓰기 편한 반응형 UI로 만들고, 입력 요소에는 레이블을 달아 키보드로도 조작할 수 있게 해 주세요.
- 결과에는 '복사' 버튼을 달고, 잘못된 입력에는 이해하기 쉬운 한국어 오류 메시지를 보여 주세요.
- 핵심 로직은 UI와 분리된 함수로 작성해 단위 테스트를 할 수 있게 해 주세요.

## 완료 기준 (테스트 케이스)

- '{"a":1,}'은 끝 쉼표 오류로 표시
- 정리 후 다시 압축하면 원래 의미가 같음
- 12345678901234567890이 그대로 유지

먼저 구현 계획을 5줄 이내로 설명한 다음 전체 코드를 작성하고, 마지막에 위 테스트 케이스를 확인하는 방법을 알려 주세요.

스킬 (SKILL.md)

Claude Code 같은 AI 코딩 에이전트에서 .claude/skills/build-json-formatter/SKILL.md 경로로 저장하면, 이 도구를 만들거나 고칠 때마다 다시 쓸 수 있습니다.

---
name: build-json-formatter
description: JSON 포맷터 도구를 새로 만들거나 수정할 때 사용합니다. JSON을 검증하고 보기 좋게 정리(Pretty print)하거나 압축(Minify)하는 도구를 만든다.
---

# JSON 포맷터 만들기

## 목표

JSON을 검증하고 보기 좋게 정리(Pretty print)하거나 압축(Minify)하는 도구를 만든다.

## 작업 순서

1. 아래 필수 기능, 입력, 출력을 확인하고 빠진 정보가 있으면 먼저 질문합니다.
2. 핵심 로직을 UI와 분리된 순수 함수로 구현합니다.
3. 검증 목록의 테스트 케이스로 로직을 확인합니다.
4. 입력 폼, 결과 영역, 복사 버튼을 갖춘 반응형 UI를 만듭니다.
5. 규칙에 적힌 예외 상황을 하나씩 재현해 보고 오류 메시지를 다듬습니다.

## 핵심 기능

- 문법 검증과 오류 위치(줄·열) 표시
- 들여쓰기 2칸/4칸/탭 선택
- 압축 모드
- 키 이름 알파벳 정렬 옵션
- 결과 복사 및 .json 다운로드

## 입력

- JSON 텍스트
- 들여쓰기, 정렬, 모드 옵션

## 출력

- 정리 또는 압축된 JSON
- 오류 메시지(위치 포함)

## 규칙

- 끝 쉼표·작은따옴표·주석 등 흔한 오류는 원인을 쉬운 말로 설명
- 2^53보다 큰 정수가 바뀌지 않도록 원문 숫자 보존
- 파일 앞의 BOM 제거
- 수 MB 입력에서도 멈추지 않게 처리
- 서버 없이 브라우저에서 동작하는 단일 페이지(HTML, CSS, JavaScript)로 만들고, 입력 데이터를 외부로 전송하지 마세요.

## 검증

- [ ] '{"a":1,}'은 끝 쉼표 오류로 표시
- [ ] 정리 후 다시 압축하면 원래 의미가 같음
- [ ] 12345678901234567890이 그대로 유지

AI에게 맡길 때 팁

  • 첫 줄에 사용 중인 기술(예: React, Vue, 순수 HTML)을 적으면 프로젝트에 맞는 코드를 받을 수 있습니다.
  • 코드를 받기 전에 목록의 테스트 케이스를 실제로 실행하고 결과를 보여 달라고 요청하세요.
  • 실제 비밀번호, 고객 데이터, API 키는 프롬프트에 넣지 말고 예시 값으로 바꿔 쓰세요.