HTML Editor는 무료인가요?

네, 완전 무료입니다. 설치 없이 브라우저에서 바로 사용할 수 있습니다.

어떤 브라우저에서 사용할 수 있나요?

Chrome, Safari, Firefox, Edge 등 최신 브라우저를 모두 지원합니다.

편집한 내용을 어떻게 저장하나요?

툴바의 저장 버튼을 클릭하면 편집된 HTML 파일로 다운로드됩니다. 서버에 업로드되지 않으며 모든 작업이 브라우저에서 처리됩니다.

이미지 파일을 어떻게 추가하나요?

이미지 파일을 페이지 위로 드래그앤드롭하거나, 툴바의 이미지 버튼(단축키 i)을 눌러 추가할 수 있습니다. 클립보드에서 Cmd+V로 붙여넣기도 가능합니다.

사용 가이드

HTML Editor의 모든 기능을 안내합니다.

편집 모드 켜기

HTML Editor는 편집 모드를 켜야 요소를 수정할 수 있습니다.

화면 좌상단 툴바에서 연필 아이콘 버튼을 클릭하거나, 키보드 단축키 Cmd+E를 누르세요.

컨테이너 선택 및 고정

편집 모드가 켜지면 먼저 편집할 영역(컨테이너)을 선택해야 합니다.

마우스를 올리면 컨테이너 후보가 하이라이트됩니다
클릭하면 해당 컨테이너가 고정되고, 바깥 영역이 어둡게 표시됩니다
컨테이너를 고정하면 이미지·텍스트·도형 추가 버튼이 활성화되고, 붙여넣기(Cmd+V)가 해당 컨테이너에 삽입됩니다
이미 있는 요소를 클릭하면 컨테이너 고정 없이 바로 편집할 수도 있습니다

상단 잠금 뱃지의 해제 버튼을 누르면 다른 컨테이너로 전환할 수 있습니다.

편집 모드 끄기

같은 버튼을 다시 누르거나 Cmd+E를 누르면 편집 모드가 꺼집니다.

편집 모드를 끄면 모든 선택과 컨테이너 고정이 해제되고, 내용이 비어있는 텍스트박스는 자동으로 제거됩니다.

저장하기

편집이 끝나면 툴바의 저장 아이콘 버튼을 클릭하세요.

OS 네이티브 저장 위치 선택 창이 열립니다. 파일명과 저장 경로를 지정해서 HTML 파일로 저장할 수 있습니다.

브라우저가 File System Access API를 지원하지 않는 경우 자동으로 파일이 다운로드됩니다.

전체 단축키는 [키보드 단축키](./keyboard-shortcuts.md)를 참고하세요.

이미지 추가하기

방법 1 — 드래그앤드롭

이미지 파일을 페이지 위로 드래그해서 놓으면 자동으로 삽입됩니다.

방법 2 — 툴바 버튼

1. 컨테이너를 고정합니다 (편집 모드 → 컨테이너 클릭)

2. 툴바에서 이미지 추가 아이콘 버튼을 클릭하거나 i 키를 누릅니다

3. 파일 선택 창이 열립니다. 이미지를 선택합니다

4. 고정된 컨테이너 안에서 드래그하여 크기를 지정합니다 (클릭만 하면 기본 크기)

컨테이너가 고정되지 않으면 추가 버튼이 비활성 상태입니다.

방법 3 — 클립보드 붙여넣기

컨테이너 고정 상태에서 이미지 URL 또는 이미지 파일을 복사한 뒤 Cmd+V를 누르면 삽입됩니다.

방법 4 — 에셋 보관함

1. 툴바에서 폴더 아이콘(l 키)을 클릭하면 상단에 에셋 보관함이 열립니다

2. + 업로드 버튼으로 이미지 파일을 추가하거나, 보관함 영역에 파일을 드래그하여 등록합니다

3. 보관함이 열린 상태에서 Cmd+V를 누르면 클립보드의 이미지/이미지 URL이 보관함에 추가됩니다

4. 썸네일을 클릭하면 고정된 컨테이너에 이미지가 삽입됩니다

5. 썸네일을 드래그하면 고스트가 표시되며, 컨테이너 위에서 놓으면 해당 위치에 삽입됩니다

페이지에 이미 있는 이미지는 편집기 시작 시 자동으로 보관함에 수집됩니다. 에셋은 현재 세션에서만 유지됩니다. 삽입되는 이미지는 컨테이너 크기에 맞게 자동 축소됩니다.

이미지 선택하기

편집 모드에서 이미지를 한 번 클릭하면 선택됩니다. 선택된 이미지는 파란 테두리로 표시되고, 우측에 속성 패널이 열립니다.

선택 해제: Escape (오버레이 하단의 ESC 힌트 참고)

이동하기

선택된 이미지를 드래그하면 이동합니다. 다른 요소나 컨테이너 경계에 가까워지면 자동으로 스냅(정렬 가이드)이 표시됩니다.

핸들 조작

핸들 위치	동작
우측 하단 흰 사각형	크기 조절 (`Shift` 드래그: 비율 고정)
상단 중앙 원형	회전 (`Shift` 드래그: 5° 스냅)
좌측 상단 보라색 원형	모서리 둥글게
우측 세로 슬라이더	투명도 조절

크기 조절 핸들은 이미지 모서리에 절반 걸쳐 있어, 이미지가 화면 끝에 붙어 있어도 조작할 수 있습니다.

이미지 삭제하기

이미지 우측 상단의 빨간 X 버튼 클릭
또는 이미지 선택 후 Delete / Backspace 키

속성 패널 기능

이미지를 선택하면 우측 패널에 다양한 옵션이 표시됩니다.

레이어 / 정렬

레이어로 요소 앞뒤 순서를 조절하고, 정렬로 컨테이너 안에서 수평·수직 위치를 맞춥니다.

이미지 맞춤 / 크롭

꽉 채움·전체 보기·늘리기·원본 크기 중 표시 방식을 선택합니다. 크롭 버튼을 누르면 크롭 모드가 활성화되어 보이는 영역과 확대 비율을 조정할 수 있습니다.

색상 / 필터

밝기·대비·채도를 슬라이더로 조정합니다. 필터(흑백·세피아·빈티지·쿨·웜)를 클릭 한 번으로 적용할 수 있습니다.

스타일

그림자(X/Y 오프셋, 블러, 불투명도, 색상)와 테두리(두께·스타일·색상)를 설정합니다.

변형 / 크기 / 링크 / 초기화

회전 슬라이더와 빠른 회전(90°), 반전(좌우·상하), 가로·세로 크기를 조정합니다. 링크 URL을 설정하면 편집 모드 꺼진 상태에서 이미지 클릭 시 해당 링크로 이동합니다. 초기화는 색상 조정·필터·그림자·테두리·회전을 기본값으로 되돌립니다 (위치·크기 유지).

텍스트박스는 페이지 위에 새로운 텍스트를 자유롭게 배치할 수 있는 블록입니다.

텍스트박스 추가하기

1. 컨테이너를 고정합니다 (편집 모드 → 컨테이너 클릭)

2. 툴바에서 T 아이콘 버튼을 클릭하거나 t 키를 누릅니다

3. 커서가 십자(+)로 바뀝니다. 텍스트를 넣을 위치를 클릭합니다

4. 텍스트박스가 생성되고 바로 입력할 수 있습니다

컨테이너가 고정되지 않으면 텍스트 추가 버튼이 비활성 상태입니다.

텍스트 입력하기

텍스트박스를 클릭하면 커서가 활성화되어 바로 입력할 수 있습니다.

편집 완료 후 텍스트박스 바깥을 클릭하면 편집이 종료됩니다.

내용을 입력하지 않고 편집 모드를 끄면 빈 텍스트박스는 자동으로 삭제됩니다.

이동 / 크기 조절 / 회전

이미지와 동일하게 드래그로 이동, 하단 핸들로 세로 크기 조절, 상단 핸들로 회전할 수 있습니다.

텍스트박스 삭제하기

속성 패널 하단의 삭제 버튼 클릭
또는 텍스트박스 선택 후 Delete / Backspace 키

속성 패널 기능

텍스트박스를 선택하면 우측 패널에서 다양한 스타일을 설정할 수 있습니다.

태그	용도
`h1` – `h6`	제목 (숫자가 작을수록 크게)
`p`	본문 단락
`div`, `span`	일반 텍스트
`li`	목록 항목
`blockquote`	인용문
`pre`	코드/고정폭 텍스트

레이어

여러 요소가 겹쳐있을 때 앞뒤 순서를 조절합니다.

정렬

컨테이너 내 수평/수직 위치를 버튼으로 맞춥니다.

폰트

페이지에서 사용 중인 폰트 목록이 자동으로 표시됩니다. 클릭하면 적용, 다시 클릭하면 해제됩니다.

타이포그래피

설정	범위
폰트 두께	Thin(100) – Black(900)
폰트 크기	8px – 96px
줄 높이	0.5 – 3.0

색상

텍스트 색상을 컬러 피커로 선택하거나, 페이지에서 사용 중인 색상 스와치를 클릭해서 바로 적용할 수 있습니다.

텍스트 정렬

왼쪽 / 가운데 / 오른쪽 / 양쪽

스타일

*기울임* (이탤릭)
<u>밑줄</u>
~~취소선~~

링크

URL을 입력하거나 Cmd+V로 붙여넣으면 링크가 설정됩니다.

링크 설정 시 자동으로 밑줄이 적용됩니다
편집 모드가 꺼진 상태에서 클릭하면 해당 URL로 이동합니다

초기화 / 삭제

초기화: 모든 스타일을 기본값으로 되돌립니다
삭제: 텍스트박스를 페이지에서 제거합니다

도형 추가하기

1. 컨테이너를 고정합니다 (편집 모드 → 컨테이너 클릭)

2. 툴바에서 도형 버튼을 클릭하거나 단축키를 누릅니다

3. 고정된 컨테이너 안에서 드래그하여 크기를 지정합니다 (클릭만 하면 기본 크기)

컨테이너가 고정되지 않으면 도형 추가 버튼이 비활성 상태입니다.

도형	툴바 버튼	단축키
사각형	사각형 아이콘	`r`
원	원 아이콘	`o`
선 / 화살표	선 아이콘	`a`

이동 / 크기 조절 / 회전

이미지와 동일하게 동작합니다.

이동: 드래그
크기 조절: 우측 하단 핸들 드래그
회전: 상단 중앙 핸들 드래그 (Shift: 5° 스냅)

속성 패널

도형을 선택하면 우측 패널에서 스타일을 변경할 수 있습니다.

채우기

색상 선택 및 불투명도 조절

테두리 (선 스타일)

두께, 스타일(실선/파선/점선/없음), 색상 설정

선 / 화살표 방향

화살표 없음 / 끝에만 / 양쪽 / 시작에만

그림자

X/Y 오프셋, 블러, 불투명도, 색상 조정

레이어

앞으로 / 뒤로 순서 변경

정렬

컨테이너 기준 수평·수직 정렬

페이지에 이미 있는 텍스트(제목, 본문, 목록 등)를 직접 수정할 수 있습니다.

텍스트 선택하기

편집 모드에서 페이지의 텍스트를 한 번 클릭하면 선택됩니다.

파란 테두리가 표시되고 우측에 속성 패널이 열립니다
이 상태에서 스타일을 변경하거나 링크를 설정할 수 있습니다

속성 패널 상단에는 해당 텍스트 요소의 HTML 태그 이름(예: h1, p, li)이 표시됩니다.

텍스트 내용 수정하기

선택된 텍스트를 더블 클릭하면 커서가 활성화되어 직접 내용을 수정할 수 있습니다.

편집 완료:

텍스트 바깥을 클릭하거나
Escape 키를 누르면 됩니다

편집이 끝나도 선택 상태는 유지되어 패널에서 스타일 변경을 이어서 할 수 있습니다.

스타일 변경은 텍스트박스와 동일합니다. [텍스트박스 속성 패널](./textbox.md#속성-패널) 참고.

이미지, 텍스트박스, 기존 텍스트에 링크를 달 수 있습니다. 링크가 설정된 요소는 편집 모드가 꺼진 상태에서 클릭하면 해당 URL로 이동합니다.

링크 설정 방법

방법 1 — 패널에서 직접 입력

요소를 선택하면 우측 패널 하단에 링크 섹션이 있습니다. URL을 직접 입력하세요.

방법 2 — Cmd+V 붙여넣기 (가장 빠른 방법)

1. 링크 URL을 클립보드에 복사합니다

2. 편집 모드에서 링크를 달 요소를 클릭해서 선택합니다

3. Cmd+V를 누르면 자동으로 링크가 설정됩니다

링크 설정 시 자동 동작

요소	자동 적용
이미지	링크 배지(파란 아이콘) 표시
텍스트박스	밑줄 + 링크 배지 표시
기존 텍스트	밑줄 + 포인터 커서 표시

링크가 있는 요소는 왼쪽에 파란 원형 아이콘(🔗)이 표시됩니다.

레이어(Z-index)와 링크

링크가 설정된 요소가 클릭되려면 레이어 순서가 1 이상이어야 합니다. 링크를 설정하면 레이어가 자동으로 1로 조정됩니다.

링크 제거

패널 링크 섹션의 입력 필드를 비우면 링크가 제거됩니다.

링크 클릭 동작

편집 모드 켜짐: 클릭해도 링크로 이동하지 않습니다 (편집 우선)
편집 모드 꺼짐: 클릭 시 새 탭에서 링크가 열립니다

요소 복사하기

편집 모드에서 요소를 선택한 뒤 Cmd+C를 누르면 복사됩니다.

요소 잘라내기

Cmd+X를 누르면 복사 후 원본이 삭제됩니다.

요소 붙여넣기

컨테이너 고정 상태에서 Cmd+V를 누르면 고정된 컨테이너의 마우스 커서 위치에 붙여넣어집니다.

이미지를 복사했다면 이미지가, 텍스트박스를 복사했다면 텍스트박스가 그대로 붙여넣어집니다
스타일, 크기, 효과 등 모든 설정이 그대로 복제됩니다

컨테이너가 고정되지 않은 상태에서 붙여넣기하면 안내 토스트가 표시됩니다.

외부에서 붙여넣기

이미지나 텍스트를 다른 곳에서 복사해서 Cmd+V로 붙여넣을 수도 있습니다.

클립보드 내용	결과
이미지 파일	이미지로 삽입
이미지 URL (`.jpg`, `.png` 등)	이미지로 삽입
일반 텍스트	텍스트박스로 삽입
웹페이지에서 복사한 이미지	이미지로 삽입

이미지 파일 드래그앤드롭

클립보드 없이 이미지 파일을 직접 페이지 위로 드래그해서 놓아도 삽입됩니다.

여러 파일을 한 번에 드래그하면 20px 간격으로 나란히 삽입됩니다
편집 모드가 꺼져 있어도 드롭하면 자동으로 편집 모드가 켜집니다

링크 붙여넣기 (선택된 요소에)

요소가 선택된 상태에서 URL을 클립보드에 복사하고 Cmd+V를 누르면 링크가 설정됩니다. 자세한 내용은 [링크 설정 가이드](./links.md)를 참고하세요.

전역

단축키	동작
`Cmd+E`	편집 모드 켜기 / 끄기
`Cmd+Z`	실행 취소
`Cmd+Shift+Z`	다시 실행
`Escape`	선택 해제 / 추가 모드 취소
`i`	이미지 추가
`t`	텍스트박스 추가
`r`	사각형 도형 추가
`o`	원 도형 추가
`a`	선/화살표 추가
`l`	에셋 보관함 열기/닫기

요소 추가 단축키는 컨테이너가 고정된 상태에서만 동작합니다. 입력 필드에 포커스가 있을 때도 동작하지 않습니다.

선택

단축키	동작
`Cmd+A`	컨테이너 내 모든 요소 선택
`Cmd+C`	선택 요소 복사
`Cmd+X`	선택 요소 잘라내기
`Cmd+V` (URL 복사 후)	선택 요소에 링크 설정
`Cmd+V` (보관함 열림)	클립보드 이미지를 보관함에 추가
`Delete` / `Backspace`	선택 요소 삭제
`Cmd+G`	다중 선택 요소 그룹화
`Cmd+Shift+G`	그룹 해제
`Cmd+V` (선택 없을 때)	클립보드 내용 붙여넣기 (이미지 또는 텍스트박스로)

붙여넣기(Cmd+V)는 컨테이너가 고정된 상태에서만 동작합니다.

핸들 조작 중

단축키	동작
`Shift` + 회전 드래그	5° 단위 스냅
`Shift` + 크기 조절 드래그	비율 고정 리사이즈
`Shift` + 도형 드래그	정사각형/정원/45° 스냅

변경 이력

버전별 버그 수정 및 기능 변경 내역입니다.

v0.8.0 (2026-04-05)

통합 핸들 오버레이

핸들 UI 컨테이너 독립: 리사이즈/회전/삭제/반경/불투명도 핸들이 fixed 오버레이에서 렌더링되어 컨테이너 overflow에 잘리지 않음
회전 매칭: 오버레이가 요소의 rotation + transform-origin을 정확히 복제
플러그인별 핸들 구성: getHandleConfig() 인터페이스로 이미지/도형/텍스트박스/그룹 각각 필요한 핸들만 표시
다중 선택 시각화: 다중 선택 시 각 요소에 파란 outline 표시
저장 요소 호환: 재수화 전 요소도 data-hedit-state에서 상태 복원하여 핸들 표시

기타 개선

텍스트 추가 좌표 보정: viewportToContainer 적용 (CSS scale 보정)
툴바 버튼 재배치: 이미지 추가 버튼을 보관함 버튼 왼쪽으로 이동

v0.7.0 (2026-04-05)

에셋 보관함

에셋 보관함 패널: 툴바 폴더 아이콘(l 키)으로 상단 슬라이드 패널 열기/닫기
이미지 자동 수집: 페이지 내 기존 이미지를 편집기 시작 시 보관함에 자동 등록
파일 업로드: + 업로드 버튼 또는 보관함에 파일 드래그앤드롭
클립보드 붙여넣기: 보관함 열린 상태에서 Cmd+V → 이미지/이미지 URL 보관함에 추가
클릭 삽입: 썸네일 클릭 → 고정된 컨테이너에 이미지 삽입
드래그 삽입: 썸네일 드래그 → 고스트 따라가며 컨테이너 위에서 놓으면 해당 위치에 삽입
이미지 크기 자동 조정: 원본이 컨테이너보다 크면 비율 유지하며 80%로 축소
세션 전용 저장: 메모리 기반 (localStorage 사용 안 함)
가로 스크롤: 일반 스크롤 휠로 보관함 썸네일 가로 스크롤

편집 모드 개선

Cmd+A 전체 선택: 컨테이너 고정 상태에서 내부 모든 요소 다중 선택
컨테이너 스크롤 고정: 컨테이너 고정 시 뷰포트 밖으로 스크롤되면 자동 복귀

버그 수정

ImagePlugin 보관함 간섭 방지: 보관함 썸네일 <img>를 플러그인이 감싸지 않도록 제외
보관함 이벤트 격리: 패널 내부 이벤트가 edit-highlight/selection 시스템에 전파되지 않도록 차단
드래그 안정성: capture phase 리스너로 mouseup 누락 방지, threshold 8px로 미세 떨림 방지

v0.6.0 (2026-04-05)

컨테이너 스코프 편집 모드

편집 모드 2단계 전환: Cmd+E → container-select → 클릭으로 container-locked 고정
컨테이너 고정 시각화: 바깥 영역 dim overlay + 잠금 뱃지 (🔒 + 해제 버튼)
편집 범위 제한: hover/선택/드래그 셀렉트 모두 고정 컨테이너 내부로 필터링
추가 버튼 컨테이너 고정 필요: 이미지/텍스트/도형 버튼은 컨테이너 고정 후 활성화, 미고정 시 비활성(opacity 0.3)
붙여넣기 가드: 컨테이너 미고정 시 안내 토스트 표시
하단 토스트 안내 시스템: 각 모드 진입 시 안내 메시지 (밝은 테마 pill 디자인)
드로우 모드 UI 정리: 컨테이너 고정 시 indicator 생략 (dim overlay가 이미 영역 표시)

버그 수정

이미지 드로우 CSS scale 보정 누락: viewportToContainer 유틸로 통합
다중 선택(드래그 셀렉트): _initDragSelect에 containerLock 전달 누락 수정
정렬/간격 조절 후 그룹 박스 미갱신: refitGroup 호출 추가

유틸리티 추가

viewportToContainer(): 뷰포트→컨테이너 좌표 변환 (CSS scale 보정 포함)
getScaleCompensation(): CSS transform scale 보정 계수

v0.5.1 (2026-04-05)

UX 개선

ESC 선택 해제 힌트: 개체 선택 시 오버레이 하단에 ESC 선택 해제 뱃지 표시

v0.5.0 (2026-04-05)

아키텍처 리팩토링 — shared layer 도입

src/shared/ 공유 레이어 신설: 플러그인 간 중복 코드를 drag, resizer, handles, pointer-utils로 통합
src/ui/panel-builders.ts 패널 위젯 빌더 통합: 4개 패널에서 복붙되던 section/slider/layer/align/border/shadow/link 빌더를 공용 모듈로 추출
src/core/dom-utils.ts 유틸리티 통합: hexToRgba, isEditorUI, ensureSiblingsAbove, getContainerSel 등 12곳+ 산재되던 유틸을 단일 소스로 통합
cross-plugin 의존성 해소: shape/textbox/group → image 플러그인 의존 제거, image ↔ group 순환 참조 제거
highlight 유틸 통합: edit-highlight/element-highlight의 중복 _getLabel/_isExcluded 제거

버그 수정

textbox rotate/resize, group resize에 acquireOp 추가: 터치 디바이스에서 동시 인터랙션 충돌 방지
리사이저 CSS transform scale 보정: 컨테이너에 CSS scale이 적용된 경우 리사이즈 클램프가 실제 영역보다 작게 계산되던 문제 수정
그룹 리사이저에 컨테이너 클램프 추가: 그룹 요소가 컨테이너 밖으로 확대되는 문제 방지

코드 품질

매직넘버 9000 → EDIT_MODE_Z_OFFSET 상수화
_hexToRgba 중복 2곳 제거
textbox/panel.ts dead code ~250줄 삭제
테스트 86개 (신규 40+개 추가)

v0.4.1 (2026-04-05)

런처 리디자인

스테이징 UI: 파일을 목록에 모아놓고 확인 후 "에디터 열기"로 실행 (즉시 실행 제거)
폴더 업로드: 폴더째 드래그/선택 → HTML + 이미지 자동 수집
이미지 상대경로 자동 해석: 업로드된 이미지와 HTML 내 상대경로 매칭 → data URL 치환
HTML 다중 스테이징: HTML 여러 개 표시, 1개만 남기면 열기 활성화 + 경고 안내
누락 이미지 검사: HTML 내 참조 이미지 중 미업로드 파일 경고 표시
디자인 개편: Pretendard 폰트, 인디고 액센트, Lucide SVG 아이콘, fade-up 진입 모션

이미지 저장 개선

미편집 기존 이미지 원본 보존: wrapper 없이 원본 <img> 태그 유지, 압축 안 함
상대경로 복원: data-hedit-orig-src로 원본 경로 보존 → 저장 시 복원 (data URL 변환 방지)
원본 경로 이미지 압축 제외: 파일 참조 이미지는 압축 대상에서 제외

v0.4.0 (2026-04-04)

셀렉션 UX 통합

edit-highlight 오버레이: 편집 모드에서 hover 시 파란 오버레이 + 태그 라벨 표시 (CSS outline 대체)
선택 오버레이: 클릭 선택 시 오버레이 기반 시각 피드백 + 드래그 중 위치 추종
DOM 피커 흡수: 별도 모드 제거 — hover/선택이 편집 모드의 기본 동작으로 통합
삭제 칩 통일: non-wrapper 요소(텍스트, 장식 등) 선택 시 핸들 삭제 버튼과 동일한 X 아이콘 칩 표시
generic DOM 요소 지원: wrapper/텍스트 외 일반 DOM 요소도 hover 하이라이트 + 클릭 선택 + 삭제 가능

키보드 개선

호스트 페이지 키 이벤트 차단: 편집 모드 시 capture phase에서 stopPropagation — 호스트 단축키 충돌 방지
ESC 동작 변경: ESC는 선택 해제만, 편집 모드 종료는 Cmd+E로만 가능

이미지 개선

저장 시 자동 압축: data URL 이미지를 webp(quality 0.85)로 변환, 최대 1920px 리사이즈 (90%+ 크기 감소)
크기 조절 패널: 가로/세로/비율유지 슬라이더 추가 (크롭 아래, 변형 위)
기존 이미지 레이아웃 보존: 페이지 내 이미지 래핑 시 CSS position/inset/flex 속성 상속 (이미지 사라짐 버그 수정)
이미지 로드 대기: 미로드 이미지는 onload 후 래핑 (0×0 wrapper 방지)
저장된 이미지 핸들 표시: rehydrate 시 인라인 overflow:hidden 제거
더블클릭 이미지 교체 제거: 패널 버튼으로만 교체 가능 (오조작 방지)

기타

z-index 조정: 오버레이(99990~99992)를 패널/툴바(100000) 아래 배치
합성 클릭(btn.click()) 무시로 단축키 충돌 방지
IC_SCAN 아이콘, dom-picker.ts 삭제

v0.3.0 (2026-04-04)

FSM 3계층 아키텍처

Mode + Op + AddMode 3계층 FSM: pointer-state.ts에서 모든 상태를 통합 관리
Mode: reader | editing — 편집 모드 토글 (기존 edit-mode.ts 흡수, 파일 삭제)
Op: idle | resizing | dragging | ... — 마우스 인터랙션 락
AddMode: null | image | textbox | shape-* — 요소 추가 플로우 상호 배타성 보장
toolbar boolean 파편화 해소: addActive/textActive/shapeActive 3개 독립 변수 → FSM AddMode 단일 상태로 통합

DOM 피커 UX 개선

클릭 즉시 편집 진입: wrapper 클릭 → 편집 패널 + 리사이즈 핸들 즉시 표시 (기존 3단계 → 2단계)
인라인 텍스트 패널 표시: DOM 피커에서 텍스트 요소 선택 시 편집 패널 정상 표시
삭제 칩 유지: 모든 요소 타입에서 빨간 셀렉션 + 삭제 칩 표시
더블클릭 인라인 편집: 텍스트 요소 더블클릭 → 인라인 텍스트 편집 진입

element-highlight 재사용 유틸

element-highlight.ts 신규: 오버레이(파란 hover/빨간 lock) + 태그 라벨 + 칩 UI를 재사용 가능한 유틸로 추출
dom-picker 리팩터: 254줄 → 85줄 (element-highlight 기반)
container-selector 리팩터: element-highlight 기반으로 전환, hover 시 태그 라벨 표시

도형 삽입 UX 개선

컨테이너 선택 추가: 도형 버튼 → element-highlight로 컨테이너 선택 → 드래그로 도형 그리기
컨테이너 시각화: 드로잉 중 컨테이너 경계 인디고 보더 + 안내 라벨 표시
클릭 기본 도형: 드래그 없이 클릭 시 기본 크기 도형 생성 (사각형 100×100, 원 100×100, 화살표 150px)
좌표 클램프: 컨테이너 바운더리 밖으로 도형 생성 방지

이미지 삽입 UX 개선

컨테이너 선택 추가: 파일 선택 → element-highlight 컨테이너 선택 → 드래그(또는 클릭)으로 배치
클릭 기본 크기: 긴 변 300px, 원본 비율 유지
컨테이너 시각화 + 좌표 클램프: 도형과 동일하게 적용

빌드 + UI

CHANGELOG 자동 주입: docs/CHANGELOG.md 수정 시 빌드에서 런처 변경 이력 탭에 자동 반영
런처 UI 2배 확대: 네비바, 드롭존, 가이드, 변경 이력 전체 사이즈 업

기타

이미지/텍스트/도형 추가 버튼 클릭 시 편집 모드 자동 활성화
element-highlight 합성 클릭 이벤트(keyboard shortcut) 버그 수정

v0.2.6 (2026-04-04)

버그 수정

인라인 텍스트 편집 내용 저장 미반영: span을 클릭해 편집한 경우 저장 시 변경사항이 반영되지 않던 문제 수정
data-hedit-inline-id가 span에 있고 data-hedit-eid가 부모 블록(h1, p 등)에만 있는 경우, .closest('[data-hedit-eid]')로 블록을 찾아 innerHTML 동기화
같은 블록 내 여러 span이 클릭된 경우 중복 동기화 방지 (_syncedEids Set)
스팬 레벨 동기화를 textContent → innerHTML로 변경해 <br> 등 HTML 태그 보존

v0.2.5 (2026-04-04)

버그 수정

이미지 드래그 불가 (배포 환경): 브라우저 네이티브 이미지 드래그가 mousemove 이벤트를 가로채는 문제 수정
img.draggable = false + CSS -webkit-user-drag: none 적용
신규 이미지(attachEditor)와 저장된 이미지 재로드(rehydrateWrapper) 경로 모두 적용

v0.2.4 (2026-04-04)

버그 수정

이미지 드래그 부분 수정 (미완): attachEditor 경로에만 draggable=false 적용 — v0.2.5에서 완전 수정

v0.2.3 (2026-04-04)

변경

이미지 크롭 진입 방법 변경: 길게 누르기(long press)로 크롭 모드 진입하던 기능 제거
웹 배포 환경에서 드래그 중 의도치 않게 크롭 모드가 활성화되는 문제 해소
이제 속성 패널의 크롭 버튼으로만 접근 가능

v0.2.2 (2026-04-04)

버그 수정

슬라이드 높이 축소 (594px → 384px): position: absolute; inset: 0 컨테이너에 inline position: relative를 덮어쓰던 문제 수정
exporter의 _ensureContainerPositioned에서 CSS computed style 기반으로 판단하도록 변경
텍스트박스 저장 후 위치 이탈: flex/grid 컨테이너 안에서 containing block이 바뀌던 문제 수정
ensureSiblingsAbove에서 flex/grid 컨테이너 감지 후 position: relative 추가 생략
z-index만으로 스태킹 제어 (CSS Flex/Grid 스펙 활용)
인라인 텍스트 편집 내용 저장 미반영: block 요소에 data-hedit-eid 부여, 요소 단위 innerHTML 동기화

기능 추가

저장 위치 지정: 툴바 저장 버튼 클릭 시 OS 네이티브 Save As 다이얼로그 표시 (File System Access API)

문서

docs/stacking-context-strategy.md: CSS 스태킹 컨텍스트 컨테이너 타입별 대응 전략 문서 추가
docs/blog-stacking-context.md: 기술 블로그 초안 추가

v0.2.1 이전

이미지 편집 (크롭, 필터, 그림자, 테두리, 회전, 반전)
텍스트박스 추가 및 편집
도형 추가 (사각형, 원, 선/화살표)
기존 텍스트 인라인 편집
다중 선택 및 정렬
그룹핑
실행 취소 / 다시 실행 (50단계)
복사 / 붙여넣기
키보드 단축키