코드 포맷 워크벤치 | CSS, HTML, JavaScript 외

포맷팅브라우저에서 실행(업로드 없음)

CSS, HTML, JavaScript, JSON, GraphQL, YAML, XML, Go 소스를 하나의 로컬 작업 공간에서 포맷하거나 압축하고 구문을 검사합니다. 형식별 파서가 잘못된 구조 입력을 거부하고, 보수적인 압축기가 민감한 콘텐츠 경계를 보존하며, 모든 작업에 명시적인 문자·바이트·출력 제한을 적용합니다.

다음에 할 작업

관련 작업 흐름을 이어가거나 이 작업 다음에 자주 사용하는 도구를 열어보세요.

작업 가이드

배포 전에 코드를 안전하게 포맷하고 압축하는 방법

포맷과 압축은 구문 오류를 숨기거나 데이터 토큰을 바꾸는 작업이 아니라 검토 가능하고 재현 가능한 자산을 만드는 작업이어야 합니다. 이 절차는 먼저 소스와 대상을 분류하고, 비밀을 제거하고, 언어별 파서를 실행하고, 정확한 설정과 바이트 변화를 기록하고, 의미 경계를 비교한 뒤 원본을 교체하기 전에 실제 브라우저·컴파일러·로더·스키마·테스트에서 후보를 검증합니다.

열기 관련 도구

텍스트·코드·Unified Patch Diff 비교기

정확한 줄 hunk, 코드 포인트 강조, unified patch로 제한된 텍스트를 로컬 비교합니다.

열기 관련 도구

JSON 포매터 | 원문을 보존해 보기 좋게 정리·압축

중복 키와 숫자 원문을 보존하며 엄격한 JSON을 로컬에서 정리하거나 압축합니다.

열기 관련 도구

JSON 검증기 | 엄격한 구문 오류 위치 찾기

엄격한 JSON 구문을 로컬에서 검사하고 정확한 오류 위치와 중복 키 경고를 표시합니다.

열기

이 도구 사용 방법

소스 언어를 고른 뒤 그 언어에 실제로 제공되는 작업만 선택하세요. CSS 구조 확인은 구문 검사, 읽기 쉬운 검토는 포맷, 후보 빌드 자산은 압축을 사용합니다.

자격 증명, 개인정보, 비공개 URL, 스크린샷·클립보드 기록·다운로드에 남으면 안 되는 독점 내용을 제거한 뒤 작은 파일이나 조각을 붙여넣으세요.

포맷 작업에서는 들여쓰기와 출력 폭을 설정합니다. JavaScript는 대상에 맞게 일반 스크립트 또는 ES 모듈을 선택하고 실행 전에 세미콜론과 따옴표 선호를 정하세요.

작업을 실행하고 파서 오류, 바이트 지표, 변경 여부, CSS 구조 개수, 모든 엔진 알림을 읽으세요. 파싱 성공은 런타임·렌더링·스키마·업무 정확성의 증명이 아닙니다.

화면에 표시된 결과를 그대로 복사하거나 다운로드하세요. 소스, 작업, 옵션이 바뀌면 이전 결과를 지워 오래된 출력이 현재 증거처럼 보이지 않게 합니다.

운영 파일을 교체하기 전에 원본과 비교하고 실제 컴파일러, 브라우저, 템플릿 엔진, API, 설정 로더, 린터, 테스트, 시각 스냅샷, 접근성 절차에서 검증하세요.

이 도구를 써야 할 때

읽기 쉬운 검토 diff 준비

코드 검토 전에 CSS, HTML, JavaScript, GraphQL, YAML, XML, Go 변경 일부를 정규화하고 프로젝트 포맷터와 테스트에서 의미 차이를 비교합니다.

운영 자산 감소량 예측

원본을 유지한 채 CSS, HTML, JavaScript, JSON의 보수적 압축 결과로 크기를 측정하고 실제 빌드, 소스 맵, 라이선스, 렌더링, 동작을 검사합니다.

커밋 전 파서 수준 오류 발견

닫히지 않은 CSS 블록, 잘못된 GraphQL, 중복 YAML 키, 짝이 맞지 않는 XML, 잘못된 JSON 토큰, Go 구문 오류를 배포 파이프라인 전에 거부합니다.

테스트 데이터의 정확한 JSON 토큰 보존

큰 식별자를 반올림하거나 중복 JSON 키를 조용히 해석하지 않고 API fixture를 압축한 뒤 대상 파서가 소비하는 정확한 바이트를 검증합니다.

포맷터 불일치 재현

브라우저 결과를 CI의 Prettier, Terser, CSSO, HTML 빌드, XML 검증, gofmt와 비교해 버전과 설정 차이를 분리합니다.

흔한 실수

정리된 출력을 테스트 완료로 간주하기

파서는 구문을 확인하고 포맷터는 일관된 배치를 만들 수 있지만, 선택자·마크업·코드 경로·스키마·쿼리·설정이 대상 시스템에서 올바르게 동작하는지 증명하지는 않습니다.

회귀 테스트 없이 압축 결과 배포하기

압축은 자동 세미콜론 삽입, HTML 공백, CSS 캐스케이드 순서, 소스 맵, 빌드 지시문, 라이선스 또는 후속 도구가 읽는 주석에 대한 숨은 가정을 드러낼 수 있습니다. 운영 자산을 교체하기 전에 동작을 비교하세요.

HTML 복구와 공백 변화가 보이지 않는다고 가정하기

HTML 파싱은 의도적으로 오류를 복구하며 인라인 요소 사이 공백은 화면에 보일 수 있습니다. HTML 모드는 보수적인 설정을 쓰지만 실제 템플릿 엔진과 렌더링 페이지에서 시각·접근성 검사가 필요합니다.

ES 모듈을 일반 스크립트로 압축하기

일반 스크립트와 ES 모듈은 파싱, strict mode, import/export, 최상위 동작이 다릅니다. JavaScript를 압축하기 전에 대상과 같은 소스 유형을 선택하세요.

공백만 바꾼다며 데이터 형식 의미를 무시하기

중복 JSON 키는 모호하고, YAML 주석과 별칭은 검토 맥락을 담으며, XML은 올바른 형식이어야 합니다. 큰 JSON 정수는 JavaScript 숫자로 변환하면 반올림될 수 있으므로 형식별 진단을 확인해야 합니다.

로컬 도구라는 이유로 비밀 값 붙여넣기

로컬 처리는 이 애플리케이션으로 소스를 전송하지 않지만 복사 결과, 스크린샷, 브라우저 확장, 오류 보고서, 다운로드 파일은 비밀을 노출할 수 있습니다. 승인된 환경 밖에서 다루기 전에 자격 증명과 개인정보를 제거하세요.

예시

하나의 스타일시트를 세 가지 CSS 작업으로 검토

PostCSS가 닫히지 않은 블록을 거부하고 css-tree가 구문 검사 구조를 집계합니다. Prettier는 유효한 소스를 정리하고 CSSO는 정규식 자리표시자 없이 구조적으로 압축합니다.

입력

.card{width:calc(100% - 2rem);color:#ff0000}

출력

포맷된 CSS, 압축 CSS 또는 규칙과 선언 개수가 포함된 구문 전용 보고서

HTML 조각 포맷 또는 압축

Prettier가 HTML 복구 파서로 조각을 정리합니다. 보수적 압축은 일반 주석을 제거하면서 pre 텍스트와 내장 script/style 내용을 그대로 둡니다.

입력

<main><!-- note --><p>Hello <strong>team</strong></p><pre>keep  space</pre></main>

출력

읽기 쉬운 HTML 또는 pre 콘텐츠가 보존된 보수적 압축 HTML

정규식 압축기가 깨뜨리는 JavaScript 토큰 보호

Prettier가 명시한 세미콜론·따옴표 설정을 적용합니다. Terser는 스크립트 또는 모듈을 파싱해 안전한 기본 압축을 수행하고 이름을 난독화하지 않으며 /*! 주석을 보존합니다.

입력

/*! license */ const endpoint = 'https://example.com/a//b';

출력

URL과 라이선스 주석이 유지된 포맷 또는 파서 기반 압축 JavaScript

큰 정수 토큰을 바꾸지 않고 JSON 압축

엄격한 JSON 검증 뒤 문자열 밖의 공백만 제거하므로 Number.MAX_SAFE_INTEGER보다 큰 정수를 JSON.parse와 JSON.stringify로 반올림하지 않습니다.

입력

{ "requestId": 900719925474099312345, "ok": true }

출력

{"requestId":900719925474099312345,"ok":true}

검토용 GraphQL 쿼리 준비

GraphQL 공식 파서가 잘못된 문서를 먼저 거부한 뒤 Prettier가 변수, 필드, 중첩 선택을 배치합니다.

입력

query User($id:ID!){user(id:$id){id name}}

출력

검증되고 일관되게 들여쓴 GraphQL 작업

검토 메모를 지우지 않고 설정 포맷

YAML 파서가 중복 매핑 키를 거부하고 Prettier가 주석과 flow 스타일 선택을 보존하면서 공백과 들여쓰기를 정규화합니다.

입력

# deployment target
service: api
ports: [80,443]

출력

주석을 보존하고 공백을 정규화한 YAML

포맷 전 잘못된 XML 거부

Fast XML Parser가 요소 짝과 올바른 형식을 먼저 요구합니다. XML Formatter는 빠진 닫는 태그를 조용히 만들지 않고 선택한 들여쓰기를 적용합니다.

입력

<?xml version="1.0"?><root><item id="1">A</item></root>

출력

선언, 루트 요소, 두 칸 들여쓰기를 갖춘 검증 XML

브라우저에서 실제 gofmt 적용

Go 모드는 요청할 때만 정식 gofmt의 브라우저용 WebAssembly 빌드를 불러옵니다. import, 빈 줄, 탭, 토큰 공백을 중괄호 개수 추측이 아닌 Go 도구 규칙으로 맞춥니다.

입력

package main
import "fmt"
func main(){fmt.Println("hello")}

출력

분리된 import 블록과 정규화된 함수 본문을 가진 정식 gofmt 출력

형식별 파서, 보수적 압축, 제한된 로컬 실행

포맷은 CSS, HTML, JavaScript, GraphQL, YAML에 Prettier 언어 플러그인을 사용합니다. CSS는 PostCSS 구조 파싱과 css-tree 오류 검사를 먼저 통과해야 하고 GraphQL은 공식 파서, YAML은 파서 오류와 중복 키 검사를 거칩니다. XML은 올바른 형식을 검증한 뒤 포맷하며 Go는 지연 로드한 gofmt WebAssembly를 사용합니다.

CSS 압축은 엄격한 파싱 후 CSSO 구조 최적화를 적용합니다. HTML Minifier는 공백을 보수적으로 줄이고 선택적 태그와 속성 따옴표를 유지하며 내장 JavaScript와 CSS를 건드리지 않습니다. JavaScript는 식별자 난독화를 끄고 /*! 라이선스 주석을 보존한 Terser 기본 압축 한 번을 사용합니다.

JSON 압축은 jsonc-parser로 엄격한 JSON을 검증하고 문자열 밖의 공백, 탭, CR, LF만 제거합니다. 값을 JavaScript 숫자로 만들지 않으므로 큰 정수와 지수 표기가 정확히 유지됩니다. 중복 객체 키는 보존하고 검토 경고로 개수를 표시합니다.

HTML은 명세상 오류 복구가 가능한 형식이므로 XML처럼 올바른 형식이라고 주장하지 않고 복구 파서 사용을 명시합니다. CSS 검사 역시 구문 전용으로 표시하며 브라우저 지원, 린트 규칙, 렌더링, 캐스케이드, 스키마, 런타임 동작은 실제 대상 도구에서 확인해야 합니다.

각 언어 패널은 마운트된 동안 자체 입력과 옵션을 유지하고 소스나 설정이 바뀌면 이전 출력을 무효화합니다. 비동기 실행에는 세대 토큰을 사용해 느린 파서 결과가 더 최신 편집을 덮지 못하게 하며 복사와 다운로드는 화면의 정확한 UTF-8 출력을 사용합니다.

입력은 유니코드 코드포인트 262,144개와 UTF-8 524,288바이트, 출력은 1,048,576바이트로 제한하고 NUL 문자를 거부합니다. 무거운 엔진은 필요할 때만 로드합니다. 분석은 동의 후 고정 작업명, 안전한 옵션, 바이트·진단 집계, 고정 오류 코드만 기록하며 소스와 결과는 제외합니다.

자주 묻는 질문

언어별로 어떤 작업을 사용할 수 있나요?

CSS는 포맷, 압축, 구문 검사를 지원합니다. HTML과 JavaScript는 포맷과 압축, JSON은 정확한 토큰 보존 압축, GraphQL·YAML·XML·Go는 포맷을 지원합니다. 모든 언어에 같은 검증이나 압축 의미가 있다고 가장하지 않습니다.

CSS 구문 검사가 브라우저 호환성 검증인가요?

아닙니다. CSS 보고서는 파싱 가능한 구조를 확인하고 규칙, at-rule, 선언, 사용자 정의 속성을 셉니다. 브라우저 지원, 알 수 없는 속성, 선택자 의도, 캐스케이드, 렌더링, 접근성, 프로젝트 린트 정책은 검증하지 않습니다.

압축기는 얼마나 공격적으로 동작하나요?

Terser는 안전한 기본 압축을 한 번 수행하고 식별자 이름을 난독화하지 않습니다. HTML Minifier는 보수적으로 공백을 처리하며 내장 JavaScript와 CSS를 압축하지 않습니다. CSSO는 의미가 같다고 판단한 CSS를 재구성할 수 있으므로 대상 빌드와 회귀 테스트가 필요합니다.

JSON 압축에서 JSON.parse와 JSON.stringify를 쓰지 않는 이유는 무엇인가요?

jsonc-parser로 JSON 구문을 검증한 뒤 문자열 밖의 JSON 공백만 제거합니다. 큰 정수, 소수, 지수, 이스케이프 문자열의 표기를 그대로 보존합니다. 중복 키는 남겨 두고 소비자마다 해석이 다를 수 있어 경고합니다.

Go 모드가 정말 gofmt를 사용하나요?

Go 모드는 Go 정식 포맷터의 WebAssembly 빌드인 @wasm-fmt/gofmt를 사용하며 실행할 때만 불러옵니다. 구문 오류는 거부하지만 패키지 컴파일, 디스크 import, 타입 검사, 테스트, 모듈 해석은 브라우저 포맷터 범위 밖입니다.

개인정보 보호와 처리 제한은 어떻게 되나요?

입력은 유니코드 코드포인트 262,144개와 UTF-8 524,288바이트, 출력은 1,048,576바이트로 제한됩니다. 일반 처리는 브라우저 안에서 이루어집니다. 동의 후 분석에는 부모 도구, 언어, 작업, 안전한 설정명, 시간, 바이트 수, 변경 여부, 진단 개수만 포함될 수 있고 소스와 결과 텍스트는 포함되지 않습니다.

이 도구를 검증한 방법

관리 및 검수 SimpleWebUtils검토일 2026년 7월 18일

검증 방법: 검토에서는 수정하지 않은 “URL과 정규식 토큰을 깨뜨리지 않고 JavaScript 릴리스 파일 압축” 샘플을 코드 포맷 워크벤치에 불러왔습니다. “소스 문법과 실제 소비 대상을 확인합니다”에서 “정확한 출력, 크기, 실행 동작을 비교합니다”까지의 흐름을 실행해 화면 또는 다운로드 결과를 예시와 비교했습니다. 별도 조사 항목은 “작은 파일을 얻자마자 원본 삭제”, “HTML 복구를 XML 검증으로 간주”였습니다.

기대 결과: Terser 처리는 식별자 난독화를 끈 채 측정 바이트를 줄였고, 라이선스 주석·URL·escape 정규식·template literal·export 동작을 보존했습니다.

검증한 작업 가이드 열기

다음에 할 작업

배포 전에 코드를 안전하게 포맷하고 압축하는 방법

텍스트·코드·Unified Patch Diff 비교기

JSON 포매터 | 원문을 보존해 보기 좋게 정리·압축

JSON 검증기 | 엄격한 구문 오류 위치 찾기

이 도구 사용 방법

이 도구를 써야 할 때

읽기 쉬운 검토 diff 준비

운영 자산 감소량 예측

커밋 전 파서 수준 오류 발견

테스트 데이터의 정확한 JSON 토큰 보존

포맷터 불일치 재현

흔한 실수

정리된 출력을 테스트 완료로 간주하기

회귀 테스트 없이 압축 결과 배포하기

HTML 복구와 공백 변화가 보이지 않는다고 가정하기

ES 모듈을 일반 스크립트로 압축하기

공백만 바꾼다며 데이터 형식 의미를 무시하기

로컬 도구라는 이유로 비밀 값 붙여넣기

예시

하나의 스타일시트를 세 가지 CSS 작업으로 검토

HTML 조각 포맷 또는 압축

정규식 압축기가 깨뜨리는 JavaScript 토큰 보호

큰 정수 토큰을 바꾸지 않고 JSON 압축

검토용 GraphQL 쿼리 준비

검토 메모를 지우지 않고 설정 포맷

포맷 전 잘못된 XML 거부

브라우저에서 실제 gofmt 적용

형식별 파서, 보수적 압축, 제한된 로컬 실행

자주 묻는 질문

언어별로 어떤 작업을 사용할 수 있나요?

CSS 구문 검사가 브라우저 호환성 검증인가요?

압축기는 얼마나 공격적으로 동작하나요?

JSON 압축에서 JSON.parse와 JSON.stringify를 쓰지 않는 이유는 무엇인가요?

Go 모드가 정말 gofmt를 사용하나요?

개인정보 보호와 처리 제한은 어떻게 되나요?

이 도구를 검증한 방법

관련 작업 가이드

배포 전에 코드를 안전하게 포맷하고 압축하는 방법

CSS 색상을 변환하고 글자 대비 검증하기

텍스트 개정본을 비교하고 Unified Diff 검증하기

JSON과 YAML 설정 파일을 안전하게 변환하기

코드 리뷰용 SQL을 포맷하고 쿼리 동작을 검증하는 방법

관련 도구

텍스트·코드·Unified Patch Diff 비교기

JSON 포매터 | 원문을 보존해 보기 좋게 정리·압축

JSON 검증기 | 엄격한 구문 오류 위치 찾기

마크업 변환 워크벤치 | CSS, JavaScript, JSX, Markdown, Pug

SQL 포매터 | DB 방언별 쿼리 정리