처음 만들어보기

섹션 하나를 만들고, 글과 이미지를 얹고, 파일로 내려받기까지 한 바퀴입니다. 순서대로 따라 하면 몇 분 걸리지 않습니다.

이 문서가 다루는 도구는 블록 에디터 입니다 — 제목·이미지·표·그래프를 세로로 쌓아 상세페이지를 만들고 PNG 나 HTML 파일로 내려받습니다. 옆에 열어 두고 따라 하시면 빠릅니다. 다른 도구는 도구 목록에 있습니다.

0. 캔버스 열기

에디터 열기를 누르면 회색 배경의 빈 캔버스가 나옵니다. 가입이나 로그인 단계는 없습니다. 화면은 크게 넷으로 나뉩니다.

• 왼쪽 사이드바 — 이 사이트의 도구와 문서 목록입니다. 블록 에디터·색상 대비 검사기·사용 가이드·소개로 오갑니다. 편집 도구가 아닙니다
• 가운데 — 캔버스. 실제로 쌓는 곳
• 오른쪽 패널 — 지금 고른 것의 속성. 아무것도 안 골랐으면 페이지 속성이 뜹니다
• 아래 도구 막대 — 블록을 꺼내는 곳

단축키 — 세 개만 외우면 됩니다

섹션 추가는 S, 본문 텍스트는 T, 여백은 G 입니다. 이미지는 파일을 캔버스에 끌어다 놓으면 바로 들어갑니다(블록을 넣은 뒤 더블클릭해 고르는 길도 그대로 있습니다). 다 만들면 오른쪽 Export 에서 섹션별 PNG 또는 단일 HTML 파일로 내려받습니다.

(이 안내는 예전에 편집기 화면 아래에 붙어 있던 것입니다. 편집기에서는 걷어내고 여기로 옮겼습니다 — 작업 화면에는 「만들 것」만 두는 편이 낫다고 봤습니다.)

1. 섹션을 하나 만든다

아래 도구 막대 맨 왼쪽의 + 버튼을 누르거나, 캔버스를 한 번 클릭한 뒤 S 를 누릅니다. 「SECTION 01」이라고 적힌 칸이 하나 생깁니다.

섹션은 이 편집기의 기본 단위입니다. 블록은 반드시 섹션 안에 들어가고, 이미지로 내보낼 때도 섹션 하나가 파일 하나가 됩니다. 그래서 「여기서 화면이 한 번 끊긴다」 싶은 자리마다 섹션을 나누는 편이 나중에 편합니다.

2. 글을 얹는다

도구 막대의 T 모양 버튼을 누르면 Heading · Body · Caption · Bullet · Label 같은 목록이 열립니다. 본문 한 줄이면 그냥 T 를 눌러도 됩니다 — Body 블록이 바로 붙습니다.

글자를 고치려면 그 블록을 클릭해 고른 뒤 Enter 를 누릅니다. 커서가 들어오면 그대로 타이핑하고, 다 쓰면 Esc 로 빠져나옵니다. 블록을 더블클릭해도 편집이 시작됩니다.

크기를 바꾸고 싶으면 편집을 끝낸 상태에서 1 2 3 4 를 누릅니다. 차례대로 H1 · H2 · H3 · 본문입니다. 글꼴·굵기·자간·색은 오른쪽 속성 패널에서 바꿉니다.

3. 이미지를 넣는다

도구 막대의 이미지 버튼을 눌러 모양을 고릅니다 — Standard(가로형) · Square(정사각) · Tall(세로형) · Wide(와이드) · Object · Logo. 고르면 빈 이미지 블록이 자리를 잡습니다.

그 빈 블록을 더블클릭하면 파일 선택 창이 열립니다. 파일을 고르면 이미지가 블록에 들어갑니다.

더 빠른 길이 둘 더 있습니다. 블록을 미리 만들지 않아도 됩니다.

• 끌어다 놓기 — 사진 파일을 캔버스 위로 끌어다 놓으면 그 자리에 이미지 블록이 바로 생깁니다. 여러 장을 한 번에 놓아도 됩니다.
• 붙여넣기 — 복사해 둔 이미지가 있으면 캔버스에서 ⌘V 를 누릅니다. 화면 캡처를 그대로 붙여 넣을 때 편합니다.

둘 다 넣은 자리에 들어갑니다. 섹션 위에 놓으면 그 섹션에, 아무 데도 안 골라 둔 상태라면 마지막 섹션에 붙습니다. 섹션이 하나도 없으면 하나 만들어 넣습니다.

4. 간격을 잡는다

블록 사이가 답답하면 G 를 눌러 여백(갭) 블록을 넣습니다. 기본 높이는 100px 입니다. 높이를 바꾸려면 그 갭 블록을 먼저 클릭해서 고른 다음 1~8 을 누릅니다(20 · 40 · 80 · 120 · 160 · 200 · 240 · 280px).

좌우 정렬은 블록을 고른 상태에서 ⌥A(왼쪽) · ⌥S(가운데) · ⌥D(오른쪽) 입니다. 더 자세한 건 간격과 정렬에 있습니다.

5. 파일로 내보낸다

오른쪽 위 Export 버튼을 누르면 두 가지가 나옵니다.

• 이미지로 내보내기 (PNG) — 확인 창이 한 번 뜨고, 승낙하면 섹션마다 PNG 파일이 하나씩 저장됩니다(Section-01.png, Section-02.png …). 기본 가로폭은 860px 입니다.
• HTML로 내보내기 — 캔버스 전체가 export.html 파일 하나로 떨어집니다. 스타일과 이미지가 파일 안에 들어 있어서 그 파일만 열어도 그대로 보입니다.

섹션 하나만, 또는 JPG 로, 또는 780px 폭으로 뽑고 싶다면 캔버스에서 그 섹션을 고른 뒤 오른쪽 속성 패널의 Export 항목을 씁니다.

6. 저장은 알아서 됩니다

따로 저장 버튼을 누를 필요는 없습니다. 무언가를 바꾸면 잠시 뒤 상단에 「저장됨」이 떴다가 사라집니다. 다만 저장되는 곳이 지금 쓰는 브라우저 안이라 조건이 붙습니다 — 저장은 어디에 되나를 꼭 한 번 읽어 두세요.