HTML 웹 에디터 V3

브라우저에서 HTML을 작성하고 실시간 미리보기, 브라우저 저장, 버전 관리, 120개 HTML 템플릿, 미리보기 직접 문구 편집, HTML 품질 검사, 파일/데이터 가져오기·내보내기까지 처리할 수 있는 GitHub Pages용 Local-first 웹서비스입니다.

별도 서버나 DB 서버 없이 동작합니다. 사용자가 작성한 HTML 원문은 기본적으로 현재 브라우저의 IndexedDB에 저장되며, 설정값은 LocalStorage에 저장됩니다.

V3 신규 기능 — 120개 템플릿 + 미리보기 직접 편집

V3에서는 템플릿 기능을 단순 예제 5개 수준에서 12개 카테고리 × 10개 = 총 120개의 실제 양식 라이브러리로 확장했습니다.

템플릿 창에는 카테고리 필터, 템플릿 검색, 결과 개수 표시가 포함되어 있습니다. 보고서, 안전, 여행, 견적, 블로그 같은 단어로 바로 찾을 수 있습니다.

미리보기 직접 편집

템플릿을 불러오면 ✎ 직접편집 모드가 자동으로 켜집니다.

템플릿 선택
   ↓
오른쪽 미리보기에서 점선 문구 클릭
   ↓
문구를 바로 타이핑해 수정
   ↓
왼쪽 HTML Source에 자동 동기화
   ↓
IndexedDB 자동 저장

템플릿 내부의 수정 가능한 문구에는 data-editable="true"가 들어 있습니다. 직접편집 모드에서는 이 요소를 우선 contenteditable로 활성화하므로, 레이아웃이나 CSS를 실수로 망가뜨릴 가능성을 줄였습니다. 일반 HTML에서도 직접편집을 켜면 제목·문단·목록·표 셀 등 텍스트 중심 요소를 자동 감지해 편집할 수 있으며, 에디터용 임시 속성은 HTML 원문에 남기지 않습니다.

직접편집으로 바꾼 내용은 실제 HTML 원문에 반영되므로 HTML 다운로드, JSON 백업, 버전 저장에도 그대로 포함됩니다.

V2에서 개선된 핵심 사항

긴 HTML 붙여넣기 후 화면이 아래로 내려가는 문제 개선

긴 HTML 전체를 Ctrl+A → 붙여넣기 하거나 빈 편집기에 대량 HTML을 붙여넣으면 textarea의 커서가 문서 끝으로 이동하면서 화면도 아래쪽으로 내려가는 브라우저 기본 동작이 발생할 수 있습니다.

V2에서는 기본적으로 다음 순서로 처리합니다.

긴 전체 HTML 붙여넣기
        ↓
HTML 데이터 반영
        ↓
편집기 첫 줄로 이동
        ↓
라인 번호 첫 줄로 이동
        ↓
미리보기 새로 생성
        ↓
미리보기 맨 위로 이동

설정의 큰 HTML 붙여넣기 후 맨 위로 옵션으로 이 동작을 켜거나 끌 수 있습니다.

또한 편집기 하단의 ↑ 처음 / ↓ 끝, 미리보기 상단의 ↑ 처음 버튼으로 긴 문서의 위치를 즉시 이동할 수 있습니다.

Features

HTML 편집

HTML Source Editor
줄 번호
글자 수 / 줄 수 / 커서 위치 / 실제 UTF-8 데이터 크기
Word Wrap
글자 크기 변경
Undo / Redo
Find / Replace / Replace All
HTML 기본 들여쓰기 정리
긴 전체 HTML 붙여넣기 감지 및 첫 줄 자동 복귀
편집기 처음 / 끝 빠른 이동

서식 / 삽입

Bold / Italic / Underline / Strike
H1 / H2 / H3
UL / OL
Left / Center / Right Align
Link
Image
Table
Code
Quote
Details
Checklist
HR
추가 HTML Snippet
- Button
- Card
- Flex 2열
- Responsive Grid
- Details
- Responsive Video

실시간 미리보기

✎ 직접편집: 템플릿뿐 아니라 일반 HTML의 텍스트도 미리보기에서 클릭 수정 → HTML Source 자동 동기화
좌측 Editor + 우측 Live Preview
Resizable Split Pane
Sandboxed iframe
JavaScript 기본 실행 차단
일반 편집 시 Preview Scroll 위치 유지 옵션
문서 열기 / 파일 가져오기 / 전체 붙여넣기 시 Preview Top Reset
Desktop / Tablet / Mobile Width Preview
요소 경계 강조
새 창 Preview
Fullscreen Preview
Preview 맨 위로

HTML 데이터 저장

현재 문서의 HTML 원문은 IndexedDB에 저장됩니다.

상단 저장 버튼 또는:

Ctrl / Cmd + S

로 즉시 저장할 수 있습니다.

자동 저장을 켜면 입력 후 약간의 지연 뒤 HTML 원문을 자동 저장합니다.

문서 Schema 예:

{
  "id": "document-id",
  "title": "문서 제목",
  "content": "<!doctype html>...",
  "byteSize": 12345,
  "favorite": false,
  "createdAt": "...",
  "updatedAt": "...",
  "schemaVersion": 2
}

HTML 데이터 저장소

여러 HTML 문서 저장
제목 검색
HTML 본문 검색
최근 수정일
글자 수
즐겨찾기
복제
삭제
저장소 사용량 표시

버전 기록

현재 상태를 별도 Snapshot으로 저장할 수 있습니다.

버전＋
현재 문서 버전 목록
버전 HTML 다운로드
이전 버전 복원
버전 삭제
문서당 최대 30개 유지

버전을 복원하기 전 현재 상태도 자동으로 Snapshot으로 남기도록 구성했습니다.

HTML 템플릿

총 120개 템플릿을 12개 카테고리로 제공합니다.

업무·보고서 10개
공지·안내 10개
계획·일정 10개
교육·학습 10개
안전·점검 10개
견적·제안 10개
블로그·콘텐츠 10개
행사·초대 10개
상품·서비스 10개
개인·생활 10개
데이터·현황판 10개
랜딩·포트폴리오 10개

템플릿 선택 창에서 카테고리를 클릭하거나 검색어로 필터링할 수 있습니다. 템플릿 적용 시 기존 문서를 덮어쓰지 않고 새 HTML 문서로 생성하며, 바로 ✎ 직접편집 모드가 켜집니다.

HTML 품질 검사

HTML 원문을 변경하지 않고 다음 항목을 검사합니다.

HTML5 DOCTYPE
<html lang>
<title>
viewport meta
H1 구조
이미지 alt
중복 id
빈 링크
script 포함 여부
DOM 요소 수

검사 결과는 참고용이며 HTML을 임의로 자동 수정하지 않습니다.

Import

지원:

.html
.htm
.txt
.json

JSON은 다음 두 형식을 인식합니다.

html-web-editor-document
html-web-editor-backup

Drag & Drop Import도 지원합니다.

Export

HTML 파일 다운로드
현재 HTML 데이터 JSON
전체 저장소 Backup JSON
Preview PNG
Print / PDF
HTML Source Copy
Rendered Text Copy

전체 Backup V2에는:

Documents
Snapshots
Preferences

가 포함됩니다.

설정

큰 HTML 붙여넣기 후 맨 위로
자동 저장
실시간 미리보기
Preview Scroll 위치 유지
Light / Dark / System Theme
Word Wrap
Editor Font Size

모바일

편집 / 미리보기 / 분할 모드
화면 전체를 100dvh 기반으로 관리
Header / Toolbar가 긴 HTML 때문에 화면 밖으로 밀려나지 않도록 Workspace 높이를 고정
각 Pane 내부에서 독립 스크롤
Toolbar horizontal overflow 대응

보안 구조

사용자 HTML은 서비스 본체 DOM에 직접 삽입하지 않고 별도 iframe에 렌더링합니다.

Application UI
     │
     ├─ IndexedDB / Settings
     │
     └─ iframe sandbox="allow-same-origin"
             └─ User HTML

allow-same-origin은 Preview Scroll 위치를 안정적으로 제어하기 위해 사용합니다. allow-scripts는 부여하지 않으므로 사용자 HTML 안의 JavaScript는 기본 미리보기에서 실행되지 않습니다.

allow-scripts와 allow-same-origin을 동시에 추가하지 않는 것을 기본 원칙으로 합니다.

Tech Stack

HTML5
CSS3
Vanilla JavaScript ES6+
IndexedDB V2
LocalStorage
iframe srcdoc
Service Worker
Web App Manifest
GitHub Pages
GitHub Actions

외부 런타임 Dependency가 없기 때문에 npm install이나 Build 과정 없이 정적 파일 그대로 배포할 수 있습니다.

Project Structure

/
├─ index.html
├─ styles.css
├─ app.js
├─ config.js
├─ templates.js          # 12개 카테고리 · 120개 템플릿 데이터/생성기
├─ manifest.webmanifest
├─ sw.js
├─ 404.html
├─ robots.txt
├─ .nojekyll
├─ LICENSE
├─ README.md
├─ TEMPLATE-CATALOG.md   # 120개 템플릿 전체 목록
├─ CHANGELOG.md
├─ assets/
│  ├─ favicon.svg
│  ├─ favicon-16.png
│  ├─ favicon-32.png
│  ├─ apple-touch-icon.png
│  ├─ icon-192.png
│  ├─ icon-512.png
│  ├─ og-image.png
│  ├─ preview.png
│  └─ preview-mobile.png
└─ .github/
   └─ workflows/
      └─ deploy.yml

Local Development

정적 서버로 실행하세요.

python -m http.server 8080

브라우저:

http://localhost:8080/

file:// 직접 실행보다 HTTP 환경을 권장합니다. Service Worker와 일부 Storage API가 브라우저 정책에 따라 제한될 수 있기 때문입니다.

GitHub Pages 배포

1. Repository 생성

예:

html-web-editor

2. ZIP을 풀고 프로젝트 파일 전체 업로드

Repository 최상위에 다음이 있어야 합니다.

index.html
app.js
styles.css

3. Pages 설정

Repository
→ Settings
→ Pages
→ Build and deployment
→ Source
→ GitHub Actions

4. main Branch Push

포함된 Workflow가 자동으로 GitHub Pages에 배포합니다.

git push
      ↓
GitHub Actions
      ↓
GitHub Pages

접속 주소 예:

https://USERNAME.github.io/REPOSITORY/

프로젝트는 상대 경로를 사용하므로 Repository 하위 경로에서도 정적 Asset을 읽을 수 있도록 구성했습니다.

Configuration

config.js:

window.HTML_EDITOR_CONFIG = {
  storage: {
    dbName: 'html-web-editor-db',
    dbVersion: 2,
    storeName: 'documents',
    snapshotStoreName: 'snapshots'
  },
  features: {
    ads: false,
    analytics: false,
    pwa: true,
    pngExport: true,
    backup: true,
    documentManager: true,
    templates: true,
    versionHistory: true,
    htmlQualityCheck: true
  }
};

기존 V1 사용자 데이터

IndexedDB DB 이름과 documents Store를 유지하고 DB Version만 2로 올렸습니다.

따라서 V1 문서가 있는 브라우저에서는 DB Upgrade 시:

기존 documents 유지
+
새 snapshots Store 생성

방식으로 동작하도록 설계했습니다.

PWA Cache

Service Worker Cache 이름을 V2로 변경했습니다.

html-web-editor-v2

GitHub Pages에서 새 버전을 배포했는데 예전 화면이 잠시 보이는 문제를 줄이기 위한 변경입니다.

광고 확장

현재 광고는 비활성화되어 있습니다.

features: {
  ads: false
},
monetization: {
  enabled: false,
  provider: null
}

향후 권장 구조:

Editor / Preview
      │
      └─ 독립

AdSlot
  ↓
Ad Provider Adapter
  ↓
AdSense / Other Provider

광고가 HTML Export, PNG, PDF, Print 결과에 들어가지 않도록 사용자 콘텐츠 영역과 광고 영역을 분리합니다.

향후 확장 순서

현재
GitHub Pages + IndexedDB
        ↓
광고 / Analytics
        ↓
회원 로그인
        ↓
Cloud Sync
        ↓
문서 공유
        ↓
Premium / Admin

현재 Local-first 구조는 유지하면서 Storage Adapter만 Cloud API 쪽으로 확장하는 방식이 적합합니다.

Known limitations

브라우저 Local Data는 브라우저/프로필별 데이터입니다.
브라우저 데이터를 삭제하면 IndexedDB 문서도 삭제될 수 있으므로 중요한 자료는 HTML 또는 Backup JSON을 별도로 저장하세요.
Preview에서는 JavaScript가 기본적으로 실행되지 않습니다.
PNG Export는 외부 Image/CSS/WebFont의 CORS 정책에 영향을 받을 수 있습니다. 문제가 있는 경우 Print → PDF를 사용하세요.
HTML 품질 검사는 정적 점검 도구이며 W3C Validator 전체 기능을 대체하지 않습니다.

License

MIT License

Name		Name	Last commit message	Last commit date
assets		assets
404.html		404.html
CHANGELOG.md		CHANGELOG.md
LICENSE		LICENSE
README.md		README.md
TEMPLATE-CATALOG.md		TEMPLATE-CATALOG.md
app.js		app.js
config.js		config.js
index.html		index.html
manifest.webmanifest		manifest.webmanifest
robots.txt		robots.txt
styles.css		styles.css
sw.js		sw.js
templates.js		templates.js

Latest commit

History

Folders and files

Repository files navigation