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

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

명시한 브라우저 대상을 기준으로 CSS 접두사를 추가하고, 유효한 CSS를 SCSS 형식으로 정리하며, 최신 JavaScript 구문을 변환하고, 검토 가능한 HTML을 JSX, Markdown, Pug로 바꿉니다. 모든 모드는 바이트와 구조 한도를 적용하고 호환성 또는 콘텐츠 손실 경계를 알립니다.

다음에 할 작업

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

작업 가이드

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

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

열기 관련 도구

Base64 인코더와 디코더 | UTF-8·Base64URL·Data URI

UTF-8을 엄격하게 인코딩하고 Base64·Base64URL·Data URI·바이너리 바이트를 로컬에서 디코딩합니다.

열기 관련 도구

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

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

열기 관련 도구

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

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

열기

이 도구 사용 방법

먼저 목적 구문을 선택하고 검토되지 않은 저장소 전체 대신 작은 대표 원본을 불러오세요.

해당 모드에서 제공하는 브라우저 프로필, 들여쓰기 또는 모듈 처리 방식을 명시적으로 설정하세요.

변환은 로컬에서 실행되지만 화면이나 다운로드 결과를 공유하기 전에는 비밀, 개인정보, 비공개 URL과 독점 코드를 제거하세요.

변환을 실행한 뒤 결과를 사용하기 전에 모든 검토 메모, 바이트 지표, HTML 노드와 깊이 지표를 읽으세요.

평가된 결과를 복사하거나 다운로드하세요. 원본이나 옵션이 바뀌면 이전 결과를 지워 오래된 코드를 현재 결과로 오해하지 않게 합니다.

브라우저, 컴파일러, linter, 테스트, 렌더링 스냅샷, 접근성 검사, 보안 정책이 있는 실제 환경에서 결과를 검증하세요.

이 도구를 써야 할 때

문서화된 지원 범위에 맞는 스타일시트 만들기

화면에 보이는 Browserslist 프로필로 벤더 접두사를 만들고 diff를 확인한 뒤, 추측한 접두사에 의존하지 말고 실제 빌드와 지원 브라우저 테스트를 실행합니다.

Sass 도입을 위한 정직한 시작 파일 만들기

기존 CSS를 검증해 SCSS 호환 형식으로 정리한 다음 변수, 모듈, 중첩 규칙, 믹스인, 팀 규칙은 별도 리팩터링에서 도입합니다.

레거시 구문 대상에서 Babel 변경점 검사

집중된 JavaScript 예제를 변환하고 모듈 보존과 CommonJS를 비교해 별도 polyfill 전략이 필요한 런타임 API를 찾습니다.

서버 렌더링 fragment를 React로 이동

HTML 속성과 스타일을 JSX로 바꾼 뒤 컴포넌트 경계, 이벤트, 상태, key, 정화, 접근 가능한 상호작용을 수동으로 설계합니다.

작성 콘텐츠 또는 템플릿 마이그레이션

편집 콘텐츠에는 HTML→Markdown을, 템플릿에는 HTML→Pug를 사용하면서 손실, 활성 콘텐츠, 공백, 렌더러별 동작을 계속 확인합니다.

흔한 실수

Autoprefixer를 브라우저 호환성 테스트로 간주

접두사 생성은 지원 데이터와 선택한 질의만 반영합니다. 전체 애플리케이션의 레이아웃, JavaScript, 접근성, 성능 또는 실제 브라우저 렌더링은 테스트하지 않습니다.

CSS→SCSS가 Sass 구조까지 설계한다고 기대

CSS는 이미 SCSS로 파싱됩니다. 안전한 자동 정리만으로 의미 있는 변수, 믹스인, partial 경계, 모듈명 또는 추상화해야 할 반복 선언을 알 수 없습니다.

구문 변환 결과에 빠진 웹 API도 들어 있다고 가정

Babel은 화살표 함수, class, optional chaining 같은 구문을 바꿀 수 있지만 Promise, fetch, URL, Map, 최신 Array 메서드와 DOM 동작은 별도 런타임 지원이 필요합니다.

보안 검토 없이 변환된 HTML을 렌더링

JSX 또는 Pug 구문 변환으로 script, 인라인 핸들러, 원시 HTML 속성, 내장 템플릿, 활성 URL이 신뢰 가능해지지 않습니다. 신뢰할 수 없는 원본은 결과도 신뢰하지 마세요.

목적 환경 테스트 없이 원본 파일 교체

Markdown 렌더러, JSX 빌드 설정, Pug 공백, CSS 대상 범위, 모듈 런타임은 서로 다릅니다. 원본을 삭제하기 전에 실제 애플리케이션에서 동작을 비교하세요.

예시

레거시 user-select 접두사 추가

프로필과 정확한 Browserslist 질의를 표시하므로 프로젝트 빌드에서 결과를 재현할 수 있습니다.

입력

.field { user-select: none; appearance: none; } 및 Legacy / IE 11 선택

출력

명시한 레거시 질의에 필요한 접두사와 표준 선언을 함께 포함한 스타일시트

Sass 추상화를 만들지 않고 CSS 정리

사용자 정의 속성은 그대로 유지되고 결과는 형식 정리일 뿐이라고 명시됩니다.

입력

:root{--space:8px}.card{padding:var(--space)}

출력

:root {
  --space: 8px;
}
.card {
  padding: var(--space);
}

구문과 런타임의 경계 노출

구문만 변환된 코드를 완성된 IE 11 번들로 오해하지 않게 합니다.

입력

const load = async () => fetch('/api/items');

출력

생성 helper가 포함된 ES5 대상 구문과 fetch 및 Promise가 polyfill되지 않았다는 경고

HTML 속성을 JSX로 매핑

React 속성 표기는 바뀌지만 주변 컴포넌트 동작은 수동으로 설계해야 합니다.

입력

<label for="email" class="field">Email</label>

출력

<label htmlFor="email" className="field">Email</label>

편집 콘텐츠 계층을 Markdown에 유지

제목과 목록은 깨끗하게 옮기고 지원하지 않는 상호작용 구조는 경고합니다.

입력

<h2>Release</h2><ul><li>Tested</li><li>Documented</li></ul>

출력

## Release

- Tested
- Documented

중첩 HTML을 Pug 들여쓰기로 변환

트리를 들여쓰기로 표현한 뒤 다시 파싱해 유효한 Pug 구문인지 확인합니다.

입력

<main class="shell"><h1>Release</h1><p>Ready.</p></main>

출력

main.shell
  h1 Release
  p Ready.

파서별 변환, 제한된 자원, 검토 가능한 진단

Autoprefixer는 세 가지 명시적 Browserslist 프로필 중 하나를 사용해 PostCSS 플러그인으로 실행됩니다. 패키지에 포함된 호환성 데이터를 사용하며 CSS는 로컬에서 생성됩니다. 스타일시트, 브라우저 요청, 원격 호환성 조회 또는 프로젝트 설정을 업로드하지 않습니다.

CSS→SCSS는 먼저 PostCSS로 원본을 CSS로 파싱한 뒤 SCSS 파서로 형식을 정리합니다. 유효한 CSS가 유효한 SCSS이므로 selector 범위, cascade 순서, 사용자 정의 속성 또는 실행 동작을 몰래 바꿀 수 있는 추측 없이 안정적인 시작 파일을 만듭니다.

ES6→ES5는 IE 11 구문 대상과 내장 polyfill 주입이 없는 Babel preset-env를 사용합니다. ES 모듈을 보존하면 import/export가 남고 CommonJS 변환은 require와 exports 환경을 가정합니다. 어떤 옵션도 번들러, 의존성 그래프, 전역 객체 또는 런타임 API를 제공하지 않습니다.

HTML→JSX, HTML→Markdown, HTML→Pug는 원본을 한도가 있는 트리로 파싱합니다. 전용 엔진이 노드와 깊이를 세고 UTF-8 입출력을 제한하며 가능한 경우 생성 구문을 검증하고 활성 콘텐츠, 위험 URL, 정규화, 원시 HTML 또는 손실 구조를 알립니다.

여섯 모드는 수동 실행 뒤 동작하며 필요한 무거운 파서만 그때 불러옵니다. 분석 데이터에는 선택 모드, 안전한 옵션명, 바이트 수, 처리 시간, 진단 합계만 들어가며 원본 코드, 생성 결과, selector, URL, 텍스트 내용 또는 템플릿 값은 포함하지 않습니다.

자주 묻는 질문

어떤 Autoprefixer 브라우저 프로필을 선택해야 하나요?

문서화된 제품 지원 정책에 맞는 프로필을 사용하고 표시된 질의를 프로젝트 Browserslist 설정과 비교하세요. Modern은 IE를 제외하고, Broad는 유지보수 중인 브라우저를 더 넓게 대상으로 하며, Legacy는 IE 11을 명시적으로 포함합니다. 실제 지원 브라우저 테스트가 최종 동작 여부를 결정합니다.

CSS→SCSS가 변수나 중첩 selector를 만들지 않는 이유는 무엇인가요?

그 선택에는 제품과 코드베이스 맥락이 필요합니다. 반복 값이 언제나 유용한 디자인 토큰은 아니며 자동 중첩은 specificity를 높이거나 selector 의미를 바꿀 수 있습니다. 안전한 작업은 검증과 형식 정리이며 구조 설계는 검토가 필요한 리팩터링입니다.

ES6→ES5 결과가 IE 11에서 바로 실행되나요?

보장할 수 없습니다. 구문 대상은 IE 11이지만 최신 런타임 API, 의존성, DOM 기능, CSS, 모듈 로딩, 전역 객체와 애플리케이션 가정은 이 변환기의 범위 밖입니다. 명시적 polyfill 전략으로 실제 번들을 만들고 필요한 환경에서 테스트하세요.

HTML→JSX가 신뢰할 수 없는 HTML을 정화하나요?

아닙니다. 몇 가지 활성 콘텐츠와 위험 URL 패턴을 알리지만 구문 변환은 sanitizer나 보안 경계가 아닙니다. 신뢰할 수 없는 콘텐츠를 렌더링하기 전에 적절한 allowlist sanitizer와 애플리케이션 보안 검토를 적용하세요.

HTML→Markdown 또는 HTML→Pug에서 공백이나 구조가 달라지는 이유는 무엇인가요?

HTML 파싱은 암시되거나 잘못된 구조를 정규화하고, Markdown은 모든 상호작용 요소를 표현하지 못하며, Pug는 들여쓰기와 텍스트 경계를 구문으로 사용합니다. 바이트 단위 동일성을 기대하지 말고 진단과 목적 렌더러를 검토하세요.

붙여 넣은 원본 코드가 서버로 전송되나요?

아닙니다. 변환은 현재 브라우저에서 실행됩니다. 운영 분석은 선택 모드, 민감하지 않은 옵션명, 처리 시간, 바이트 수, 진단 합계로 제한되며 원본과 생성 텍스트는 포함하지 않습니다.

이 도구를 검증한 방법

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

검증 방법: 마크업 변환 워크벤치에서 다음 가이드 픽스처로 검증을 시작했습니다: “전역 클릭 핸들러를 남기지 않고 프로필 이름 필드 이관”. “하나의 일관된 조각과 의존성 분리”부터 “실행 코드를 보존하는 데서 멈추지 말고 재설계”까지 실행해 생성 결과를 기대값과 대조했습니다. 별도 한계 검토에는 “내보낸 전체 페이지를 한 번에 이관하기”, “Babel에서 유효한 표현식을 작동하는 컴포넌트로 오해하기” 항목을 사용했습니다.

기대 결과: JSX는 className과 htmlFor를 사용하고 label-input 관계를 유지했으며, 전역 onclick 핸들러는 컴포넌트 소유 callback으로 바꿔야 할 항목으로 드러냈습니다.

공식 출처와 표준

HTML Living StandardWHATWG

검증한 작업 가이드 열기

다음에 할 작업

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

Base64 인코더와 디코더 | UTF-8·Base64URL·Data URI

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

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

이 도구 사용 방법

이 도구를 써야 할 때

문서화된 지원 범위에 맞는 스타일시트 만들기

Sass 도입을 위한 정직한 시작 파일 만들기

레거시 구문 대상에서 Babel 변경점 검사

서버 렌더링 fragment를 React로 이동

작성 콘텐츠 또는 템플릿 마이그레이션

흔한 실수

Autoprefixer를 브라우저 호환성 테스트로 간주

CSS→SCSS가 Sass 구조까지 설계한다고 기대

구문 변환 결과에 빠진 웹 API도 들어 있다고 가정

보안 검토 없이 변환된 HTML을 렌더링

목적 환경 테스트 없이 원본 파일 교체

예시

레거시 user-select 접두사 추가

Sass 추상화를 만들지 않고 CSS 정리

구문과 런타임의 경계 노출

HTML 속성을 JSX로 매핑

편집 콘텐츠 계층을 Markdown에 유지

중첩 HTML을 Pug 들여쓰기로 변환

파서별 변환, 제한된 자원, 검토 가능한 진단

자주 묻는 질문

어떤 Autoprefixer 브라우저 프로필을 선택해야 하나요?

CSS→SCSS가 변수나 중첩 selector를 만들지 않는 이유는 무엇인가요?

ES6→ES5 결과가 IE 11에서 바로 실행되나요?

HTML→JSX가 신뢰할 수 없는 HTML을 정화하나요?

HTML→Markdown 또는 HTML→Pug에서 공백이나 구조가 달라지는 이유는 무엇인가요?

붙여 넣은 원본 코드가 서버로 전송되나요?

이 도구를 검증한 방법

관련 작업 가이드

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

레거시 오류를 옮기지 않고 HTML 조각을 React JSX로 변환하기

HTML 본문을 GFM Markdown으로 옮기고 게시 전에 검증하는 방법

위험한 동작을 답습하지 않고 정적 HTML 뷰를 Pug로 옮기는 방법

관련 도구

Base64 인코더와 디코더 | UTF-8·Base64URL·Data URI

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

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

Markdown 미리보기 | 정제 HTML 변환기

Worker Timeout과 캡처 범위를 제공하는 JavaScript 정규식 테스터