사용 가이드

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

시작하기

화면 좌상단 툴바의 연필 아이콘을 클릭하거나 Cmd+E를 누르면 편집 모드가 켜집니다.

편집 모드에서는 요소 주변에 파란 점선이 표시되고, 클릭하면 선택 및 우측 속성 패널이 열립니다.

저장은 툴바의 저장 아이콘을 클릭하면 편집 결과가 HTML 파일로 다운로드됩니다.

이미지 편집

이미지 추가

• 이미지 파일을 페이지 위로 드래그앤드롭
• 툴바 이미지 추가 버튼 또는 i 키 → 삽입할 영역 클릭 → 파일 선택
• 이미지 URL 또는 파일을 복사 후 Cmd+V

핸들 조작

핸들 위치	동작
우측 하단 (흰 사각형)	크기 조절 — Shift 누르면 자유 비율
상단 중앙 (원형)	회전 — Shift 누르면 5° 스냅
좌측 상단 (보라색 원)	모서리 둥글기
우측 세로 슬라이더	투명도
우측 상단 빨간 X	삭제

속성 패널

섹션	내용
레이어	앞/뒤 순서 (z-index)
색상 조정	밝기 / 대비 / 채도 (0–200%)
테두리	두께, 스타일(실선/파선/점선), 색상
이미지 맞춤	꽉 채움 / 전체 보기 / 늘리기 / 원본 크기
크롭	드래그로 위치, 슬라이더로 확대 (최대 4배)
변형	회전 슬라이더, 90° 회전, 좌우/상하 반전
필터	없음 / 흑백 / 세피아 / 빈티지 / 쿨 / 웜
그림자	X/Y 오프셋, 블러, 불투명도, 색상
이미지 교체	현재 위치·크기 유지한 채 이미지 파일만 교체
정렬	컨테이너 내 수평/수직 정렬
링크	URL 입력 또는 Cmd+V

텍스트박스

페이지 위에 새로운 텍스트 블록을 자유롭게 배치합니다.

• 툴바 T 버튼 또는 t 키 → 영역 클릭 → 텍스트 입력
• 클릭하면 커서 활성화, 바깥 클릭 시 편집 종료

속성 패널

섹션	내용
레이어	앞/뒤 순서 (z-index)
색상	텍스트 색상 + 페이지 색상 스와치
배경색	텍스트박스 배경 색상 + 투명 옵션
테두리	두께, 스타일(실선/파선/점선), 색상
타이포그래피	두께(100–900), 크기(8–96px), 줄높이, 자간
정렬	왼쪽 / 가운데 / 오른쪽 / 양쪽 + 컨테이너 정렬
스타일	이탤릭 / 밑줄 / 취소선
폰트	페이지 사용 폰트 자동 추출, 클릭으로 적용
태그	h1–h6, p, div, span, li 등으로 변경
링크	URL 입력 시 자동 밑줄, 비편집 모드에서 클릭 가능

도형

사각형, 원, 선을 자유롭게 그려 배치합니다.

• 툴바 도형 버튼에서 모양 선택 → 영역을 드래그해 그리기
• Shift + 드래그 — 정사각형 / 정원 고정

속성 패널

섹션	내용
레이어	앞/뒤 순서 (z-index)
채우기 색상	도형 내부 색상 + 투명 옵션
테두리	두께, 스타일(실선/파선/점선), 색상
모서리 둥글기	사각형 전용
화살표	선 전용 — 시작/끝 화살표 토글
변형	회전 슬라이더
정렬	컨테이너 내 수평/수직 정렬

다중 선택

여러 요소를 동시에 선택해 이동하거나 정렬할 수 있습니다.

• Shift + 클릭 — 요소 추가/제거 선택
• 빈 공간에서 드래그 — 범위 선택 (rubber-band)
• 빈 공간 클릭 — 다중 선택 해제

다중 선택 패널

기능	내용
정렬	왼쪽 / 가운데 / 오른쪽 / 위 / 중간 / 아래 정렬
간격 균등	수평 / 수직 간격 균등 분배 (3개 이상 필요)
그룹화	Cmd+G 또는 버튼으로 그룹 생성
삭제	선택된 모든 요소 일괄 삭제

그룹

여러 요소를 하나로 묶어 함께 이동하고 크기를 조절합니다.

• 다중 선택 후 Cmd+G — 그룹 생성
• Cmd+Shift+G — 그룹 해제
• 더블클릭 — 그룹 진입, 내부 요소 개별 선택
• 그룹 크기 조절 시 내부 요소 위치·크기·폰트 비례 조정

기존 텍스트 편집

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

• 한 번 클릭 — 선택 (패널 열림, 스타일 변경 가능)
• 더블 클릭 — 편집 모드 (커서 활성화, 내용 수정 가능)
• Escape 또는 바깥 클릭 — 편집 종료 (선택 상태 유지)

링크 설정

이미지, 텍스트박스, 도형, 기존 텍스트에 링크를 설정할 수 있습니다. 편집 모드가 꺼진 상태에서 클릭하면 새 탭에서 링크가 열립니다.

• 속성 패널 링크 섹션에 URL 직접 입력
• URL을 복사한 뒤 요소 선택 후 Cmd+V (가장 빠른 방법)

링크 설정 시 텍스트 계열 요소에는 자동으로 밑줄이 적용되고, 왼쪽에 파란 링크 배지가 표시됩니다.

복사 / 붙여넣기

단축키	동작
Cmd+C	선택 요소 복사 (스타일, 크기, 효과 포함)
Cmd+X	선택 요소 잘라내기
Cmd+V (선택 없음)	클립보드 내용 붙여넣기
Cmd+V (요소 선택됨)	URL이면 해당 요소에 링크 설정

외부에서 붙여넣기

클립보드 내용	결과
이미지 파일	이미지로 삽입
이미지 URL (.jpg, .png 등)	이미지로 삽입
일반 텍스트	텍스트박스로 삽입

키보드 단축키

단축키	동작
Cmd+E	편집 모드 켜기 / 끄기
Cmd+Z	실행 취소 (최대 50단계)
Cmd+Shift+Z / Cmd+Y	다시 실행
Cmd+C	선택 요소 복사
Cmd+X	선택 요소 잘라내기
Cmd+V	붙여넣기 / 링크 설정
Cmd+G	선택 요소 그룹화
Cmd+Shift+G	그룹 해제
i	이미지 추가 모드 토글
t	텍스트 추가 모드 토글
Delete / Backspace	선택 요소 삭제
Escape	선택 해제 / 편집 모드 종료
Shift + 회전 드래그	5° 단위 스냅 회전
Shift + 크기 조절	비율 무시 자유 리사이즈

주의사항