AI가 만든 HTML, 코드 없이 수정한다 — HTML DOM Editor 개발기

비전공자의 바이브 코딩 · 웹 툴 개발

HTML DOM Editor
— 생성형 AI가 만든 HTML, 이제 직접 수정하자

2026.06  ·  Next.js · html2canvas · Vercel

회사에서 팀장·본부장 등 상사분들이 생성형 AI로 HTML 문서를 작성하기 시작하면서, 간간이 그 HTML 수정을 맡게 됐다. 매번 AI와 대화하며 수정 요청을 주고받는 게 번거로웠고, 마침 네이버 카페에서도 "AI가 만든 HTML을 수정하고 싶은데 방법을 모르겠다"는 글을 봤다. 그 순간 결심했다. 직접 만들면 된다.

아래에 기획 배경, 핵심 기능 구현 방식, 그리고 Vercel 배포까지의 과정을 정리했다.

01 왜 만들었나

생성형 AI가 HTML을 잘 만드는 건 맞다. 그런데 완성된 HTML을 조금만 수정하려고 해도 다시 AI와 대화를 시작해야 한다. 글씨 색상 하나, 제목 문구 하나를 바꾸는데 프롬프트 두세 번이 필요하다. 특히 비개발자 입장에서는 HTML 코드를 직접 건드리는 것 자체가 부담이다.

핵심 — HTML 파일을 업로드하면 브라우저에서 렌더링하고, 클릭·드래그로 요소를 수정한 뒤 PNG 또는 수정된 HTML로 저장할 수 있는 웹 에디터가 필요했다.

오브젝트를 새로 생성하거나 기존 요소를 복사하는 기능도 고려했다. 하지만 그런 경우는 차라리 AI에게 처음부터 다시 만들게 하는 편이 빠르다는 판단 하에 구현하지 않았다. 이 툴의 목적은 기존 HTML의 미세 수정이다.

02 업로드 화면 — 슬라이드 크기 먼저 선택

HTML 파일을 드래그앤드롭하기 전에 먼저 슬라이드 크기를 고른다. PPT와 동일한 프리셋을 제공해서 저장 이미지를 바로 발표 자료에 활용할 수 있다.

▲ 업로드 화면 — 슬라이드 크기 프리셋 선택 후 HTML 드래그앤드롭

프리셋	캔버스 크기	PNG 저장 해상도	용도
자유형 (기본)	HTML 콘텐츠 크기 자동 감지	2× 스케일	범용
A4 세로	794 × 1123 px	2480 × 3508 px (300dpi)	인쇄·문서
와이드스크린 (16:9)	1280 × 720 px	1920 × 1080 px	화면 발표
화면 슬라이드쇼 (4:3)	960 × 720 px	1440 × 1080 px	프로젝터

자유형 선택 시 iframe 로드 후 scrollWidth / scrollHeight를 자동 감지해 캔버스 크기를 잡는다. 상단 바에서 직접 수치를 입력하는 것도 가능하다.

03 핵심 개념 — iframe · DOM · 오버레이

로직을 이해하려면 세 가지 개념만 알면 된다.

• iframe — 창 안의 창 브라우저 안에 독립된 또 다른 브라우저 창을 끼워넣는 것. 업로드한 HTML을 iframe 안에 그대로 띄워 원본 디자인을 보존한 채로 보여준다.
• DOM — 브라우저가 HTML을 조립해놓은 결과물 브라우저는 HTML 텍스트를 읽으면 각 태그를 객체로 변환해 메모리에 올린다. 그게 DOM이다. JS로 element.style.color = "red" 한 줄이면 화면이 바뀌는 이유가 이것이다. HTML 파일을 수정하는 게 아니라 메모리 안 객체를 직접 건드리는 것.
• 오버레이 — iframe 위에 올린 투명 유리판 iframe을 직접 클릭하면 원래 HTML의 링크·버튼 동작이 실행된다. 이를 막고 클릭 좌표만 가로채기 위해 투명한 레이어를 위에 씌워놓는다. 클릭 좌표를 받아 elementFromPoint()로 아래 DOM 요소를 찾아내는 방식이다.

iframe 렌더링

→

DOM 생성

→

오버레이 클릭

→

DOM 요소 탐색

→

style 직접 수정

04 핵심 편집 기능

에디터 화면의 핵심은 투명 오버레이다. iframe 위에 투명한 레이어를 얹고, 클릭 시 elementFromPoint로 실제 DOM 요소를 찾아 선택 상태로 만든다. 선택된 요소에는 파란 테두리와 8방향 리사이즈 핸들이 표시된다.

HTML 업로드

→

iframe 렌더링

→

오버레이 클릭

→

DOM 요소 선택

→

속성 패널 편집

▲ 오브젝트 선택 — 클릭 한 번으로 요소 선택, 8방향 핸들로 크기 조정, 드래그로 위치 이동

• 요소 선택 및 이동 투명 오버레이 클릭 → elementFromPoint로 DOM 요소 탐색. 드래그로 위치 이동 시 transform: translate() 방식을 사용해 position 속성에 무관하게 동작.
• 크기 조정 8방향 핸들 드래그로 width / height 직접 조정. 선택된 요소의 실시간 크기가 우측 속성 패널에 반영된다.
• 텍스트 더블클릭 편집 요소를 더블클릭하면 contenteditable로 전환, 텍스트를 직접 입력한다. 편집 중에는 오버레이가 비활성화되어 커서가 정상 동작한다.

05 속성 패널 — 글씨와 도형 스타일 변경

우측 속성 패널에서 선택된 요소의 스타일을 실시간으로 수정한다. 변경 사항은 iframe 내부 DOM의 inline style에 직접 반영되어 outerHTML 직렬화 시 자동으로 포함된다.

▲ 글씨 색상·크기·내용 변경 — 색상 피커, 폰트 크기, 텍스트 직접 수정까지 속성 패널에서 처리

▲ 도형 크기·색상 변경 — 배경색 피커, 불투명도 슬라이더, 너비·높이·모서리 둥글기 수치 입력

• 텍스트 속성 색상 피커 + HEX 직접 입력, 폰트 크기(px), 굵기 6단계(Light~Black), 폰트 패밀리, 행간(line-height)
• 배경 및 박스 배경색 피커, 불투명도 슬라이더(0~100%), 너비·높이(px), 내부 여백(padding), 모서리 둥글기(border-radius)
• 텍스트 내용 수정 자식 요소가 없는 텍스트 노드는 속성 패널 하단 textarea에서 직접 수정 가능.

06 실행 취소 / 줌 — 편집 편의성

실행 취소(Ctrl+Z)와 다시 실행(Ctrl+Shift+Z)을 지원한다. 스냅샷은 실제 변경 시점에만 저장되어 단순 클릭으로는 히스토리가 오염되지 않는다. 이동·크기조정·스타일 변경·텍스트 편집 모두 실행 취소 대상이다.

줌은 우하단 +/− 버튼 또는 Ctrl+휠로 조작하며, 마우스 커서 위치를 기준으로 확대·축소된다. 뷰포트 자동 맞춤(fitScale)도 지원해 처음 열 때 화면에 딱 맞게 표시된다.

07 저장 방식 — PNG와 HTML 둘 다

저장 방식은 두 가지다. PNG 저장은 html2canvas로 iframe DOM을 고해상도 캡처해 다운로드한다. HTML 저장은 수정된 DOM의 outerHTML을 그대로 .html 파일로 내보낸다.

핵심 — inline style로 변경된 모든 스타일은 outerHTML에 자동 반영되므로, HTML 저장 시 별도 직렬화 작업이 필요 없다.

08 기술 스택 — 전부 무료

역할	패키지	비고
프레임워크	Next.js 16 (App Router + Turbopack)	--turbo 플래그
HTML→PNG	html2canvas 1.4.1	iframe DOM 캡처
스타일링	Tailwind CSS 4
상태관리	Zustand 5	htmlString, 프리셋, 캔버스 크기
파일저장	file-saver 2	PNG / HTML 다운로드
배포	Vercel 무료 플랜	요금 0원

모든 연산은 사용자 브라우저에서 처리된다. html2canvas 변환도, 파일 저장도 전부 클라이언트 사이드다. Vercel 서버는 정적 파일만 제공하므로 아무리 많이 접속해도 요금이 발생하지 않는다.

09 Vercel 배포 — 회사에서 쓰려고

Vercel에 올려서 누구든 접속할 수 있게 했다… 는 사실 반은 맞고 반은 틀리다. 진짜 이유는 내가 회사에서 편하게 쓰기 위해서다. 물론 URL을 알면 누구든 접속 가능하다.

GitHub에 코드를 올리고 Vercel과 연동하면 끝이다. 이후 git push만 하면 자동으로 재배포된다.

배포 URL — https://html-editor-pied.vercel.app/  — 브라우저에서 바로 사용 가능, 설치 불필요.

1. 01GitHub 저장소 생성 — 코드 푸시
2. 02vercel.com 접속 → GitHub 로그인 → 저장소 선택
3. 03Framework: Next.js 자동 감지 → Deploy 클릭
4. 042~3분 후 배포 URL 생성 완료. 이후 push 시 자동 재배포.

10 미구현 기능 — 추후 과제

아래 기능들은 이번 버전에서 구현하지 않았다. 필요성을 느끼면 추가할 예정이다.

• 요소 추가 / 삭제 텍스트 박스, 이미지, 도형 삽입 및 선택 후 Delete 키로 삭제. 단, 없는 요소는 AI에게 다시 만들게 하는 편이 빠르다고 판단해 제외.
• 다중 선택 및 그룹 이동 Shift+클릭으로 복수 요소 선택 후 한 번에 이동하는 기능.
• 격자(Grid) / 가이드라인 요소 정렬을 돕는 보조선. 정밀 배치가 필요한 경우 유용하다.
• 레이어 순서 변경 z-index 조정으로 요소 앞뒤 순서를 바꾸는 기능.

Summary

생성형 AI가 만든 HTML 문서를 수정해야 하는 상황은 앞으로 더 많아질 것이다. HTML DOM Editor는 그 불편함을 해결하기 위해 만든 툴이다. 클릭·드래그로 요소를 선택하고, 속성 패널에서 색상·크기·텍스트를 바꾸고, PNG나 HTML로 저장하면 끝이다. 코드를 몰라도 된다. Claude Code로 만들었고, Vercel로 배포했고, 비용은 0원이다.