블록 종류와 고르는 법

블록은 아래 도구 막대에서 꺼냅니다. 버튼 하나가 묶음 하나이고, 눌러 보면 그 안에 실제 종류가 펼쳐집니다. 여기서는 「어떤 상황에 무엇을 고르나」를 기준으로 정리합니다.

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

도구 막대는 여섯 묶음

글: 다섯 개면 대부분 끝납니다

텍스트 묶음에는 아홉 가지가 있지만 실제로 손이 가는 건 몇 개뿐입니다.

• Heading — 섹션의 제목. 넣은 뒤 1 2 3 으로 H1 · H2 · H3 를 오갑니다.
• Body — 설명 문단. T 한 번이면 바로 붙습니다.
• Caption — 이미지 아래 작은 설명, 주석, 단위 표기.
• Bullet — 점 목록. 항목을 나열할 때.
• Label / Tags — 배경이 깔린 작은 딱지. Label 은 한 개, Tags 는 여러 개를 한 줄에 늘어놓습니다.

나머지 셋은 쓰임이 좁습니다. Icon Text 는 아이콘과 한 줄 문구를 붙여 놓을 때, Bubble 은 말풍선 모양이 필요할 때, Liner 는 문구 위에 곡선 강조를 얹을 때입니다.

이미지: 모양을 먼저 고르고 채웁니다

이미지 블록은 먼저 비율을 고르고 나중에 그림을 넣는 순서입니다. Standard(가로형) · Square(정사각) · Tall(세로형) · Wide(와이드) · Object · Logo 중 하나를 넣은 다음, 그 빈 블록을 더블클릭해 파일을 고릅니다.

순서를 거꾸로 갈 수도 있습니다. 파일을 캔버스에 끌어다 놓거나 ⌘V 로 붙여넣으면 이미지 블록이 그림과 함께 만들어집니다. 비율은 넣은 뒤에 바꾸면 됩니다. 어느 쪽이 편한지는 그림을 먼저 정했는지에 달렸습니다.

같은 묶음 안의 Circle 은 원형 아이콘 자리이고, Icon 은 아이콘 라이브러리에서 골라 넣는 벡터 아이콘입니다. 사진이 아니라 기호가 필요할 때 이 둘을 씁니다.

표와 그래프

숫자를 나란히 놓고 비교시켜야 하면 Table, 크기 차이를 눈으로 보여 줘야 하면 Graph 입니다. 둘 다 오른쪽 속성 패널에서 내용을 채웁니다. 자세한 조작은 표와 그래프에 따로 적었습니다.

카드 계열이 세 개인 이유

구성 요소 묶음에 Card · Info Card · Inner Card 가 나란히 있습니다. 헷갈리기 쉬운데 성격이 다릅니다.

• Card — 안에 다른 블록을 자유롭게 배치하는 빈 판. 짜여진 틀 없이 직접 구성할 때.
• Info Card — 제목과 설명이 미리 짜인 정보 카드.
• Inner Card — 다른 블록 안쪽에 한 겹 더 넣는 작은 카드.

구분선과 여백은 다릅니다

Divider 는 눈에 보이는 선을 긋습니다. 여백(갭) 블록은 아무것도 그리지 않고 높이만 차지합니다. 「여기서 화제가 바뀐다」를 보여 주고 싶으면 Divider, 그냥 숨 쉴 자리가 필요하면 갭입니다. 갭은 G 로 넣습니다.

스티커는 흐름을 타지 않습니다

지금까지의 블록은 위에서 아래로 순서대로 쌓입니다. 반면 스티커 묶음의 항목들(Sticker · Text Sticker · Icon Sticker · Highlight)은 캔버스 위에 얹혀서 자유롭게 움직입니다. 이미지 위에 「NEW」를 붙이거나 문장 일부에 형광펜을 긋는 용도입니다.

고민될 때의 기준

1. 순서대로 읽히면 좋겠다 → 텍스트 · 이미지 · 표 · 그래프 (위아래로 쌓이는 블록)
2. 다른 것 위에 얹혀야 한다 → 스티커 · 형광펜 · 도형
3. 여러 블록을 한 덩어리로 묶어 옮기고 싶다 → Frame 또는 Card. Frame 을 먼저 클릭해 고른 뒤 도구 막대에서 블록을 추가하면 그 안으로 들어갑니다
4. 모양이 이미 정해져 있으면 좋겠다 → Step · Chat · Banner · Comparison 같은 완성형 구성 요소