JSON 편집기

1. Json에서 원하는 데이터만 뽑아내고 싶어요

SaaS 프로덕트가 쏟아지는 요즘, 서비스마다 API가 내려주는 JSON 필드 구조는 제각각입니다. 외부 서비스를 내 프로젝트에 연동할 때마다 응답 스키마를 분석하고, 필요한 필드만 골라내는 파서를 일일이 작성해야 했습니다. 중첩된 객체 안에 또 배열이 들어 있고, 그 안에 다시 객체가 있는 구조라면 눈으로 훑는 것만으로도 상당한 시간이 소요됩니다.

그때마다 했던 작업이 반복이었습니다. API 응답을 콘솔에 찍고, 필요한 키를 일일이 눈으로 골라내고, 목(mock) 데이터용 JSON을 손으로 다시 짜는 것. "열 필요 없는 키를 버튼 하나로 지우고 바로 YAML이나 CSV로 바꿀 수 있으면 얼마나 좋을까" — 그 불편함에서 이 도구가 시작되었습니다. JSON 파일의 모든 필드를 한눈에 펼쳐보고, 중첩 구조까지 포함해 원하는 키만 선택·제거할 수 있는 편집기를 직접 만들었습니다.

 

1. 도구 사용법 및 가이드

직관적인 인터페이스를 통해 복잡한 구문을 파싱하고 빠르게 속성을 정리합니다.

a. 코드 입력 및 구조 파싱

• 문법에 맞게 작성된 객체 배열 형식의 소스 코드를 좌측 편집 영역에 붙여넣습니다. 실시간으로 구문 분석(파싱)이 진행되며, 코드 내부에 존재하는 모든 고유 키값들이 중앙 패널에 리스트 형태로 추출됩니다.
   

b. 불필요한 속성 제외하기

• 추출된 키 목록을 살펴보며 결과물에 포함하지 않을 항목 옆의 제거 버튼을 클릭합니다. 선택된 키와 해당 속성에 매핑된 모든 값이 결과 데이터에서 즉시 제외되며, 취소선이 생겨 제외 상태임을 시각적으로 확인할 수 있습니다.
   

c. 최종 데이터 추출 및 저장

• 필터링이 완료되면 우측 화면에서 YAML, CSV 등의 원하는 형식을 클릭하여 실시간 변환 결과를 확인합니다. 복사 버튼을 눌러 소스 코드에 바로 적용하거나, 엑셀 형태의 XLSX 다운로드를 눌러 로컬 문서로 저장합니다.
   

 

2. JSON 데이터 처리 방법

JSON 데이터를 실무에서 가공하려면 먼저 문자열을 구조화된 객체로 파싱하고, 이중·삼중으로 중첩된 객체와 배열을 재귀적으로 탐색해야 합니다. 특히 배열 안에 객체가, 그 객체 안에 또 배열이 들어 있는 구조라면 단순 반복문만으로는 모든 키를 추출하기 어렵습니다. 이 도구는 입력된 JSON을 실시간으로 파싱한 뒤, 최상위 키를 자동으로 추출하고 선택적으로 제거할 수 있게 합니다. 아래에서 JSON의 기본 타입부터 이 도구가 최적화된 데이터 구조까지 순서대로 살펴봅니다.

a. JSON의 여섯 가지 데이터 타입

JSON은 단 여섯 가지 타입만 지원합니다. 이 단순함이 범용성의 비결입니다.

타입	설명	예시
string	큰따옴표로 감싼 문자열	"김개발"
number	정수 또는 부동소수점 (진수 표기 없음)	42, 3.14, -7
boolean	참 또는 거짓	true, false
null	값 없음을 명시	null
object	키-값 쌍의 집합, 중괄호로 감쌈	{"name": "김개발"}
array	순서 있는 값의 목록, 대괄호로 감쌈	[1, "둘", true]

b. JSON vs 다른 데이터 포맷

항목	JSON	YAML	XML	CSV
가독성	보통 (중첩 시 복잡)	높음	낮음	높음 (표 한정)
중첩 구조	가능	가능	가능	불가
주석 지원	없음	있음 (#)	있음	없음
파일 크기	중간	중간	가장 큼	가장 작음
파싱 난이도	쉬움	보통	복잡	쉬움
주 용도	API 통신, 설정 파일, 데이터 교환	IaC, 설정 파일	레거시 시스템, SOAP	표 형태 데이터 교환

c. 객체 배열(Array of Objects) 구조

이 도구가 최적화된 구조는 배열 최상위 형태입니다. 각 객체가 하나의 행(Row)에 대응하는 구조이기 때문에, CSV나 XLSX로의 변환이 자연스럽게 이루어집니다.

[
  { "id": 1, "name": "김개발", "email": "kim@dev.com", "role": "admin" },
  { "id": 2, "name": "이디자인", "email": "lee@design.kr", "role": "user" },
  { "id": 3, "name": "박마케팅", "email": "park@mkt.io", "role": "user" }
]

 

3. 실무에서 JSON 편집기를 만나는 순간들

a. 외부 API 응답 데이터 최적화

카카오, 네이버, GitHub 같은 소셜 로그인 API의 응답에는 클라이언트에서 필요하지 않은 수십 개의 메타데이터 필드가 포함됩니다. 응답 JSON을 도구에 붙여넣고 필요한 키만 남기면, 깔끔한 목(mock) 데이터나 타입 인터페이스 초안을 즉시 얻을 수 있습니다.

b. 비개발자 팀원과의 데이터 공유

DB에서 뽑은 사용자 정보 JSON을 기획자나 마케터에게 공유해야 할 때, 내부 시스템 키(_id, __v, updatedAt 등)를 제거하고 XLSX로 변환하여 전달하면 비개발자도 즉시 내용을 파악할 수 있는 문서가 됩니다.

c. i18n 번역 파일 정리

ko.json, en.json 같은 다국어 파일이 오랜 시간 쌓이면 더 이상 화면에 없는 레거시 키가 방치되는 경우가 많습니다. 최신 화면에서 사용되는 키만 남기고 나머지를 제거하여 가볍고 정돈된 번역 파일을 유지하는 데 활용됩니다.

d. API 설계 및 문서화 보조

백엔드가 내려주는 응답 스키마를 확인하거나, 프론트엔드 요청 바디 예시를 만들 때 — 실제 응답 JSON에서 필요한 필드만 추려내어 API 명세 초안으로 활용할 수 있습니다.

e. 테스트 픽스처 데이터 생성

실제 운영 데이터 JSON에서 개인정보(이메일, 전화번호 등)에 해당하는 키를 제거하고, 안전하게 정제된 데이터를 테스트 픽스처로 활용할 수 있습니다. 스크립트 작성 없이 클릭 몇 번으로 민감 필드를 제거하는 것이 핵심입니다.

 

4. JSON 직렬화와 역직렬화 — 실무에서 꼭 알아야 할 것들

a. JSON.stringify와 JSON.parse의 함정

JavaScript에서 JSON을 다룰 때 가장 흔하게 실수하는 부분입니다.

상황	JSON.stringify 결과	주의사항
undefined 값	키 자체가 사라짐	{a: undefined} → {}
Date 객체	ISO 8601 문자열로 변환	역직렬화 시 다시 new Date() 필요
NaN, Infinity	null로 변환	숫자 연산 결과 검증 필요
순환 참조	TypeError 발생	직렬화 전 순환 구조 제거 필요
BigInt	TypeError 발생	문자열로 변환 후 직렬화

// ❌ undefined 값이 포함된 객체를 그대로 직렬화
const user = { id: 1, name: "김개발", phone: undefined };
JSON.stringify(user);
// → '{"id":1,"name":"김개발"}'  // phone 키가 사라짐

// ✅ undefined 값을 null로 명시적 처리
const user = { id: 1, name: "김개발", phone: null };
JSON.stringify(user);
// → '{"id":1,"name":"김개발","phone":null}'

b. 깊은 복사(Deep Copy)에서의 함정

// ❌ JSON 직렬화를 이용한 깊은 복사 — Date, 함수, undefined 손실
const original = { date: new Date(), fn: () => {} };
const copy = JSON.parse(JSON.stringify(original));
// → copy.date는 string, copy.fn은 사라짐

// ✅ 모던 브라우저의 structuredClone 사용
const copy = structuredClone(original);
// → Date, RegExp 등 특수 타입도 올바르게 복사됨

 

5. 여러가지 오류들 모음

JSON으로 데이터를 다루다 보면 예상치 못한 파싱 실패나 변환 오류를 자주 마주하게 됩니다. 대부분은 JSON 표준과 JavaScript 객체 리터럴 사이의 미묘한 문법 차이에서 비롯되며, 원인을 알면 빠르게 해결할 수 있습니다. 아래에 실무에서 반복적으로 발생하는 오류 패턴과 해결 방법을 정리했습니다.

a. JSON 파싱 오류가 나는데 어디가 문제인지 모를 때

원인: 쉼표 누락, 따옴표 불일치, 후행 쉼표(Trailing Comma) 등 눈에 잘 안 띄는 문법 오류가 원인인 경우가 대부분입니다.

// ❌ 흔한 JSON 문법 오류들
{
  "name": "김개발",     // 마지막 키에 쉼표 — JSON은 허용 안 함
  "role": 'admin',      // 작은따옴표 사용 — JSON은 큰따옴표만 허용
  "active": True        // 대문자 True — JSON은 소문자 true만 허용
}

// ✅ 올바른 JSON
{
  "name": "김개발",
  "role": "admin",
  "active": true
}

b. 배열이 아닌 단일 객체를 넣었더니 열이 제대로 안 나올 때

원인: 이 도구는 객체 배열(Array of Objects) 구조를 기준으로 키를 추출합니다. 단일 객체를 넣으면 각 키가 "행"이 아닌 최상위 필드로 인식됩니다.

// ❌ 단일 객체 — 표 형태 변환 시 구조가 의도대로 안 나올 수 있음
{
  "id": 1,
  "name": "김개발",
  "email": "kim@dev.com"
}

// ✅ 객체 배열 — 각 객체가 하나의 행으로 올바르게 인식됨
[
  { "id": 1, "name": "김개발", "email": "kim@dev.com" },
  { "id": 2, "name": "이디자인", "email": "lee@design.kr" }
]

c. 키 이름에 특수 문자나 공백이 있을 때

원인: Content-Type이나 my field처럼 하이픈이나 공백이 포함된 키는 JSON 문법상 유효하지만, YAML 변환이나 코드에서 도트 표기법으로 접근할 때 문제가 됩니다.

// ❌ 특수 문자가 포함된 키 — 일부 환경에서 접근 시 오류
{ "Content-Type": "application/json", "my field": "value" }

// ✅ JavaScript 코드에서 접근할 때는 대괄호 표기법 사용
const type = obj["Content-Type"];  // 가능
const type = obj.Content-Type;     // SyntaxError

d. 중첩 객체 안의 키가 추출 목록에 안 보일 때

원인: 도구는 배열 내 각 객체의 **최상위 키(Top-level keys)**를 기준으로 필드 목록을 추출합니다. 중첩된 객체 안의 키는 별도로 표시되지 않으며, 해당 최상위 키를 제거하면 중첩 내용 전체가 함께 제거됩니다.

// 아래 구조에서 추출되는 키: id, profile (중첩된 name, age는 별도 표시 안 됨)
[
  {
    "id": 1,
    "profile": {        // ← 이 키를 제거하면 name, age도 함께 사라짐
      "name": "김개발",
      "age": 28
    }
  }
]

e. 공통 패턴: JSON 오류는 대부분 "문법 규칙 위반"

JSON 파싱 오류의 대부분은 작은따옴표, 후행 쉼표, 주석, 대문자 True/False/Null — JavaScript 객체 리터럴 문법과 JSON 표준 사이의 미묘한 차이에서 비롯됩니다. 브라우저 콘솔에서 복사한 코드나 코드 에디터의 자동완성을 믿지 말고, 붙여넣기 전에 jsonlint.com 같은 검증 도구로 한 번 점검하는 습관이 디버깅 시간을 크게 줄여줍니다.

 

6. 생각해볼 거리

JSON에 주석을 넣고 싶다면 어떻게 해야 할까요?

JSON 표준은 주석을 허용하지 않습니다. 하지만 설정 파일처럼 사람이 읽고 편집해야 하는 상황에서는 주석이 매우 유용합니다. 이를 위해 JSONC(JSON with Comments)나 JSON5 같은 확장 포맷이 존재하며, VS Code의 settings.json이나 tsconfig.json이 JSONC를 사용하는 대표적인 예입니다. 애플리케이션 설정 파일이라면 YAML이 주석을 지원하면서도 JSON보다 가독성이 높아 더 적합한 선택일 수 있습니다.

API 응답에서 불필요한 키를 서버 단에서 제거해야 할까요, 클라이언트에서 해야 할까요?

원칙적으로는 서버에서 필요한 데이터만 내려보내는 것이 올바른 설계입니다. 불필요한 데이터를 네트워크로 전송하면 페이로드가 커지고, 클라이언트에 내부 구조가 노출되는 보안 문제도 생깁니다. 하지만 외부 API를 사용하거나 레거시 백엔드를 바로 수정할 수 없는 상황에서는 클라이언트 또는 BFF(Backend For Frontend) 레이어에서 응답을 정제하는 방식이 현실적인 차선책이 됩니다. 이 도구는 바로 그 "빠른 정제" 과정을 돕습니다.

JSON Schema로 데이터 유효성을 검증하는 게 실무에서 필요할까요?

JSON Schema는 JSON 데이터의 구조, 타입, 필수 키를 정의하는 표준입니다. 작은 프로젝트에서는 과할 수 있지만, 외부 파트너와 API를 연동하거나 다수의 팀이 같은 데이터 구조를 공유하는 환경이라면 매우 강력한 안전망이 됩니다. TypeScript를 사용하는 프로젝트라면 Zod나 Valibot 같은 런타임 스키마 검증 라이브러리가 유사한 역할을 하면서도 타입 추론까지 지원해, 실무 적용이 더 간편합니다.

 

브라우저 탭 하나로 복잡하게 중첩된 JSON을 클릭 몇 번으로 정제하고 원하는 포맷으로 즉시 변환할 수 있습니다 — API 응답을 눈으로 파싱하고 손으로 가공하는 마찰이 사라집니다. 그것만으로도 이 도구의 역할은 충분하다고 생각합니다.