편집 모드 켜기

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

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

컨테이너 선택 및 고정

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

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

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

편집 모드 끄기

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

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

저장하기

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

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

자동 저장

편집 내용은 자동으로 브라우저에 저장됩니다. 다음에 런처를 열면 "내 프로젝트"에서 이어서 작업할 수 있습니다.

• 설정: 툴바의 ⚙️ 버튼 → "자동 저장" 토글
• 프로젝트 이름: 설정 패널에서 변경 가능 (기본값: 업로드한 파일명)
• 삭제: 런처의 프로젝트 목록에서 삭제 가능

HTML 텍스트 붙여넣기

파일 없이 HTML 코드를 직접 붙여넣을 수도 있습니다.

• 런처에서 텍스트 추가 버튼을 클릭하면 입력 영역이 나타납니다
• HTML 코드를 붙여넣으면 자동으로 스테이징됩니다
• HTML 문법 검사와 이미지 참조 검사가 자동으로 수행됩니다
• 참조하는 이미지가 있다면 파일 추가로 이미지를 추가할 수 있습니다
• <div>...</div> 같은 HTML 조각도 자동으로 완전한 문서로 변환됩니다

전체 단축키는 [키보드 단축키](./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 힌트 참고)

이동하기

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

핸들 조작

이미지 삭제하기

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

속성 패널 기능

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

레이어 / 정렬

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

이미지 맞춤 / 크롭

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

색상 / 필터

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

스타일

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

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

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

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

텍스트박스 추가하기

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

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

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

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

텍스트 입력하기

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

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

이동 / 크기 조절 / 회전

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

텍스트박스 삭제하기

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

속성 패널 기능

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

태그

텍스트의 HTML 태그를 변경합니다. 태그에 따라 기본 크기와 두께가 자동 적용됩니다.

레이어

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

정렬

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

폰트

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

타이포그래피

색상

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

텍스트 정렬

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

스타일

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

링크

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

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

초기화 / 삭제

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

도형 추가하기

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

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

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

이동 / 크기 조절 / 회전

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

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

속성 패널

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

채우기

• 색상 선택 및 불투명도 조절

전체 불투명도

• 도형 전체의 불투명도를 0~100%로 조절 (선/화살표 제외)

모서리 둥글기 (사각형만)

• 좌측 상단 핸들 드래그 또는 패널에서 값 입력

테두리 (선 스타일)

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

선 / 화살표 방향

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

그림자

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

레이어

• 앞으로 / 뒤로 순서 변경

정렬

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

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

텍스트 선택하기

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

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

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

텍스트 내용 수정하기

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

편집 완료:

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

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

다중 선택

방법 1 — Shift + 클릭

요소를 하나 선택한 상태에서 Shift를 누르고 다른 요소를 클릭하면 다중 선택됩니다. 선택된 요소는 파란 outline으로 표시됩니다.

방법 2 — 드래그 셀렉트

빈 영역에서 마우스를 드래그하면 사각형 선택 영역이 표시됩니다. 영역에 걸치는 모든 요소가 선택됩니다.

방법 3 — 전체 선택

Cmd+A를 누르면 고정된 컨테이너 내 모든 요소가 선택됩니다.

정렬 · 분배

다중 선택하면 우측 패널에 정렬 버튼이 표시됩니다.

정렬

분배

그룹화

그룹 만들기

1. 요소 2개 이상을 다중 선택합니다

2. Cmd+G를 누릅니다

3. 선택된 요소들이 하나의 그룹으로 묶입니다

그룹 편집

• 그룹을 클릭하면 그룹 전체가 선택되어 이동/리사이즈 가능합니다
• 그룹을 더블클릭하면 내부 개별 요소를 편집할 수 있습니다

그룹 해제

그룹을 선택한 상태에서 Cmd+Shift+G를 누르면 해제됩니다.

보관함 열기

툴바에서 폴더 아이콘을 클릭하거나 l 키를 누르면 상단에 에셋 보관함이 열립니다. 다시 누르면 닫힙니다.

이미지 추가하기

파일 업로드

+ 업로드 버튼을 클릭하여 이미지 파일을 선택합니다. 여러 파일을 한 번에 선택할 수 있습니다.

드래그 앤 드롭

이미지 파일을 보관함 영역 위로 드래그하여 놓으면 등록됩니다.

클립보드 붙여넣기

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

자동 수집

페이지에 이미 있는 이미지는 편집기 시작 시 자동으로 보관함에 수집됩니다.

이미지 삽입하기

클릭 삽입

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

드래그 삽입

썸네일을 드래그하면 고스트가 커서를 따라갑니다. 컨테이너 위에서 놓으면 해당 위치에 삽입됩니다.

이미지 제거

각 썸네일에 마우스를 올리면 우측 상단에 × 버튼이 표시됩니다. 클릭하면 보관함에서 제거됩니다.

스크롤

보관함이 가로로 넘칠 때 마우스 휠로 가로 스크롤할 수 있습니다 (Shift 불필요).

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

링크 설정 방법

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

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

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

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

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

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

링크 설정 시 자동 동작

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

레이어(Z-index)와 링크

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

링크 제거

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

링크 클릭 동작

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

요소 복사하기

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

요소 잘라내기

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

요소 붙여넣기

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

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

외부에서 붙여넣기

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

이미지 파일 드래그앤드롭

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

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

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

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

전역

선택

핸들 조작 중