붙여 넣기 전에 눈으로 확인하는 Pug HTML 변환
Pug(구 Jade)는 HTML의 괄호를 줄이고 들여쓰기 중심으로 작성할 수 있어 템플릿 작업이 빠릅니다. 다만 중첩이 깊어지면 닫힘 구조를 머리로 추적하기 어려워집니다. 보통은 Node 환경에서 `pug` CLI를 실행하지만, 이 페이지에서는 같은 컴파일 단계를 브라우저 안에서 바로 처리합니다. `.pug` 또는 `.jade`를 붙여 넣거나 업로드하면 오른쪽 HTML이 즉시 갱신됩니다. 변환은 페이지 로드 후 로컬에서 실행되므로 서버로 템플릿을 올릴 필요가 없습니다. 단순 일회성 변환기와 달리 렌더 미리보기까지 함께 제공되어 CMS, 메일 도구, 팀 리포지토리에 넘기기 전에 레이아웃 문제를 먼저 잡을 수 있습니다.
들여쓰기를 머리로 읽기보다 시각 확인이 더 빠릅니다
대부분의 Pug HTML 도구는 입력창과 다운로드 버튼만 제공합니다. 5줄짜리 조각에는 충분하지만, 내비게이션 마크업·카드 그리드·복합 푸터를 검증할 때는 한계가 뚜렷합니다. 이 페이지는 소스와 결과를 항상 나란히 보여줍니다. 들여쓰기를 고치면 HTML 패널이 즉시 반영되고, 간격과 계층을 확인할 때는 미리보기 탭으로 바로 전환하면 됩니다. 입력창 아래 상태 영역에서 파싱 성공/실패를 즉시 확인할 수 있습니다. 실패 시에는 빈 패널 대신 오류 위치 메시지가 표시되어 수정 지점을 빠르게 찾을 수 있습니다. 라이브 HTML + 샌드박스 렌더 조합이 실제 작업 시간을 줄여줍니다.
먼저 제한 사항을 명확히 합니다. 이 도구는 브라우저에서 입력된 Pug 문자열을 컴파일하므로 프로젝트 폴더를 읽지 않습니다. 따라서 `include`, `extends`, 외부 partial은 지원하지 않습니다. 반면 동일 입력 내 mixin, 조건문, 반복문, `style.` / `script.` 블록은 일반 로컬 컴파일과 유사하게 동작합니다. 템플릿 상단에서 여러 줄 JavaScript(예: 메뉴 배열)를 작성할 때는 단독 `-` 줄을 두고, 그 아래에 JS 블록 전체를 들여쓰기해 작성해야 합니다. Pug는 `-` 다음 첫 줄만 코드로 취급하므로 이 패턴을 지키지 않으면 이해하기 어려운 파싱 오류가 발생할 수 있습니다.
변환기로 돌아가기소스만이 아닌 렌더 결과 확인
미리보기 탭에서 컴파일된 HTML을 샌드박스 iframe으로 렌더링해 실제 표시 결과를 바로 확인할 수 있습니다.
문법 수정 중에도 좌우 대조 유지
왼쪽 Pug, 오른쪽 HTML 구성으로 속성명/클래스 점검을 즉시 반영해 구조 확인이 빠릅니다.
급한 전달 작업에도 설치 불필요
티켓 대응이나 일회성 랜딩 블록처럼 빠른 전달이 필요할 때 `npm install pug` 없이 바로 처리 가능합니다.
Pug HTML 변환은 태그 변환을 넘어 화면 검증까지
좌우 시각 편집, 컴파일 결과 렌더 미리보기, 복사용 원본 HTML, 내보내기 액션을 소스 업로드 없이 한 화면에서 제공합니다.
붙여 넣기 전에 신뢰할 수 있는 시각 변환
레이아웃은 의도적으로 단순합니다. 왼쪽 입력, 오른쪽 출력. 입력할 때마다 HTML이 갱신되고, 필요하면 미리보기에서 페이지 형태를 직접 확인할 수 있습니다. 내비게이션·카드·푸터처럼 계층이 복잡한 구간은 코드만 볼 때보다 시각 확인에서 오류를 더 빨리 찾습니다. 원본 HTML은 항상 한 번의 클릭으로 열 수 있어 속성 점검, CMS 조각 복사, 기존 파일과의 비교까지 자연스럽게 이어집니다.
이 페이지에서 Pug를 HTML로 변환하는 방법
Pug 소스 입력
왼쪽 패널에 붙여 넣거나 `.pug` / `.jade` 파일을 업로드합니다. 들여쓰기가 중첩 구조를 결정하므로 한 파일 안에서 탭과 공백을 섞지 마세요. `-`로 변수/배열을 선언할 때 여러 줄 코드는 단독 `-` 줄 아래 블록으로 작성합니다.
HTML과 미리보기 확인
오른쪽 패널은 기본적으로 렌더 미리보기를 표시합니다. 태그 문자열 확인이 필요하면 HTML 탭으로 전환하세요. 입력 오류가 있으면 먼저 수정해야 미리보기/내보내기가 정상 반영됩니다.
복사, 다운로드 또는 Playground 연계
다른 도구로 넘길 때는 복사, 파일 전달은 `.html` 다운로드를 사용합니다. 추가 시각 편집이 필요하면 “미리보기 / HTML 시각 편집”으로 홈 Playground에 결과를 전달하세요.
Pug HTML 변환에서 자주 나오는 질문
화면을 확인한 뒤 Pug를 HTML로 변환해 보세요
좌우 편집, 렌더 미리보기, 복사·다운로드를 무료로 제공합니다. 회원가입은 필요 없습니다.
Pug HTML 변환
- Pug와 HTML을 좌우로 나란히 시각 확인
- 내보내기 전에 컴파일 결과를 렌더 미리보기
- 복사, 다운로드, Playground 열기 지원
- 페이지 로드 후 브라우저 로컬에서 실행
self-contained 템플릿만 지원하며 디스크 기반 `include`/`extends`는 지원하지 않습니다.
