메일리 에디터는 노션처럼 '블록'을 쌓아 뉴스레터를 만드는 방식입니다. 이 글은 각 블록이 정확히 무엇을 할 수 있고, 무엇은 할 수 없는지를 블록별로 자세히 정리했습니다.

먼저 직접 써보고 싶다면? 로그인 없이 에디터를 체험할 수 있는 데모 페이지가 있습니다. https://maily.so/app/notes/demo 에 접속하면 아래에서 설명하는 블록들을 실제로 추가·편집해 볼 수 있으니, 이 가이드를 보면서 데모에서 하나씩 따라 해보는 것을 추천합니다. (데모에서 작성한 내용은 저장되거나 발송되지 않습니다.)

블록을 추가하는 방법

빈 줄에서 / 를 입력하면 블록 선택 메뉴가 나타납니다. 또는 줄 왼쪽의 + 버튼을 눌러 블록을 추가할 수 있고, 각 블록에 지정된 단축키로 바로 삽입할 수도 있습니다. 블록 왼쪽의 점 6개 핸들을 잡고 드래그하면 블록 순서를 바꿀 수 있습니다.

블록 설정 바꾸기 (테두리·크기 등)

블록마다 바꿀 수 있는 설정이 다릅니다. 블록 위에 마우스를 올리면 블록 왼쪽에 floating 메뉴가 뜨는데, 그중 오른쪽 설정 버튼을 누르면 그 블록에서만 쓸 수 있는 설정이 나타납니다. 예를 들어 이미지 블록은 '테두리 추가·크기 조절·상하 여백 제거', 칼럼·글박스는 배경색·테두리를 여기서 조절합니다. 블록 복제·삭제·위아래 이동도 이 메뉴에서 할 수 있습니다.

▲ 블록 왼쪽 설정 버튼을 누르면 그 블록 전용 설정(예: 이미지의 테두리·크기)이 나타납니다

글 작성 블록

텍스트(단락)

가장 기본이 되는 본문 텍스트 블록입니다. 텍스트를 선택하면 인라인 툴바가 떠서 굵게, 기울임, 링크, 색상 등 서식을 적용할 수 있습니다. 줄바꿈은 Shift+Enter, 새 블록은 Enter로 만듭니다.

제목(헤더)

소제목을 만드는 블록입니다. 단축키는 Cmd+Shift+H 이며, 줄 맨 앞에 #(제목2), ##(제목3), ###(제목4) 를 입력하고 스페이스를 누르면 자동으로 제목으로 바뀝니다. 제목 블록은 글의 목차(내비게이션) 기준이 되므로, 긴 글에서 섹션 제목을 제목 블록으로 만들어 두면 독자가 구조를 파악하기 쉬워집니다.

▲ 발행글 상세의 목차(내비게이션) — 하위 항목은 접혔다 펼쳐지며, 클릭하면 본문의 해당 섹션으로 스크롤됩니다

▲ 제목(헤더) 블록

목록

순서 없는 목록(글머리표)과 순서 있는 목록(번호)을 만들 수 있습니다. 단축키는 Cmd+Shift+L 이며, 줄 맨 앞에 - + 스페이스를 누르면 글머리표 목록, 1. + 스페이스를 누르면 번호 목록으로 자동 변환됩니다. 목록 안에서 Tab을 누르면 하위 항목으로 들어가는 중첩 목록을 만들 수 있습니다.

▲ 목록 블록 — Tab으로 중첩(들여쓰기)도 가능합니다

인용구

인용문을 강조해서 보여주는 블록입니다. 단축키는 Cmd+Shift+O 이며, 줄 맨 앞에 | + 스페이스로도 만들 수 있습니다. 인용 내용 아래에 출처(캡션)를 함께 적을 수 있습니다.

▲ 인용구 블록

구분선

콘텐츠를 시각적으로 나누는 가로줄입니다. 단축키는 Cmd+Shift+D 이며, 빈 줄에 --- 를 입력해도 구분선으로 바뀝니다.

표(테이블)

행과 열로 이루어진 표를 삽입합니다. 단축키는 Cmd+Shift+E 입니다. 셀에 마우스를 올리면 나타나는 메뉴로 행·열을 추가하거나 삭제할 수 있고, 첫 행을 머리글로 지정할 수 있습니다.

▲ 표 블록 — 셀 메뉴로 행/열을 추가·삭제합니다

미디어 · 링크 블록

이미지

사진을 업로드하거나 이미지 URL로 삽입하는 블록입니다. 단축키는 Cmd+Shift+I 입니다. 이미지를 넣으면 아래에 캡션 입력란과 함께 '링크 입력..' 칸이 나타납니다.

▲ 이미지 블록의 테두리·크기는 블록 왼쪽 설정 버튼에서 바꿉니다

▲ 에디터의 이미지 블록 — 캡션과 '링크 입력..' 칸으로 클릭 링크를 연결합니다

버튼(CTA)

클릭을 유도하는 CTA 버튼 블록입니다. 단축키는 Cmd+Shift+A 입니다. 버튼 문구, 연결할 링크, 정렬(좌/중앙/우), 글자색·배경색을 설정할 수 있으며 뉴스레터 대표 색상이 기본으로 적용됩니다. 버튼 링크도 이미지와 마찬가지로 웹 주소(http/https)만 동작하며 mailto 이메일 링크는 지원하지 않습니다.

▲ 에디터의 버튼(CTA) 블록

OG 링크(링크 미리보기 카드)

URL을 입력하면 해당 페이지의 제목·설명·썸네일을 가져와 미리보기 카드를 자동으로 만들어 줍니다. 단축키는 Cmd+L 입니다. 단순 텍스트 링크가 아니라 눈에 띄는 카드 형태로 링크를 소개하고 싶을 때 사용합니다.

▲ OG 링크 카드 — URL을 넣으면 미리보기 카드가 자동 생성됩니다

임베드(YouTube)

YouTube 영상 URL을 붙여넣으면 영상이 본문에 삽입됩니다. (지원: YouTube, Telegram)

▲ 유튜브 주소를 붙여넣으면 '어떻게 삽입할지' 선택하는 메뉴가 뜹니다 — '임베드로 표시'를 고르면 영상이 삽입됩니다

레이아웃 · 스타일 블록

칼럼(다단 레이아웃)

한 줄을 여러 단으로 나누어 좌우로 콘텐츠를 배치하는 블록입니다. 단축키는 Cmd+Shift+C 입니다. 칼럼 수, 칼럼 간 간격, 칼럼 너비 비율을 조절할 수 있고, 각 칸 안에 텍스트·이미지 등 다른 블록을 넣을 수 있습니다.

▲ 칼럼(다단) 블록 — 좌우 2단 배치 예시

▲ 칼럼 설정 — 열 개수·간격·비율과 배경색·테두리·패딩 등 블록 스타일을 조절합니다

글박스

배경색이 들어간 텍스트 박스입니다. 단축키는 Cmd+Shift+B 입니다. 안내 문구나 강조하고 싶은 내용을 담을 때 유용합니다. 글박스는 사실상 1칸짜리 칼럼에 배경 스타일이 기본으로 적용된 형태입니다.

▲ 에디터의 글박스 블록 — 상단 '배경색' 버튼으로 배경을 바꿉니다

▲ 글박스는 칼럼 블록이라, 블록 설정에서 배경색·테두리·패딩은 물론 열 개수까지 조절할 수 있습니다

배경색·테두리 등 '블록 스타일' 메뉴는 칼럼 블록과 글박스 블록에서만 제공됩니다. 일반 텍스트(단락)나 제목 블록에는 배경색을 직접 입힐 수 없습니다. 특정 문단에 배경색을 넣고 싶다면 글박스(Cmd+Shift+B)나 칼럼(Cmd+Shift+C)을 만들고 그 안에 텍스트를 작성한 뒤, 블록 설정 메뉴(Cmd+/)의 '블록 스타일'에서 배경색·패딩·테두리·모서리 둥글기 등을 조절하면 됩니다.

고급 블록

코드 블록

프로그래밍 코드를 구문 강조(syntax highlighting)와 함께 보여주는 블록입니다. 50여 개 언어와 여러 색상 테마를 지원합니다.

▲ 코드 블록 — 언어·테마 선택과 구문 강조를 지원합니다

마크다운 블록

마크다운 문법으로 직접 작성하고 실시간 미리보기를 확인할 수 있는 블록입니다. 단축키는 Cmd+Shift+M 입니다. 참고로 외부에서 복사한 마크다운 텍스트를 일반 본문에 붙여넣으면, 제목·목록·표·코드 등이 자동으로 각 블록으로 변환됩니다.

▲ 마크다운 블록 — 작성 후 '블록으로 변환' 또는 '미리보기'

Raw HTML

이메일에서 동작하는 HTML 코드를 직접 삽입하는 블록입니다. 보안을 위해 script가 포함된 코드는 이메일 발송 시 제외되며, 그런 콘텐츠는 웹에서만 볼 수 있는 링크로 대체됩니다.

▲ Raw HTML(HTML 삽입) 블록

투표

뉴스레터 안에서 독자 투표를 받을 수 있는 블록입니다. 선택지는 최소 2개에서 최대 10개까지 설정할 수 있으며, 브랜딩 플랜 이상에서 사용할 수 있습니다.

▲ 에디터에서 만든 투표 블록 (발행하면 아래처럼 결과가 표시됩니다)

▲ 발행된 글에서 보이는 투표 결과 — 항목별 득표율과 총 참여자 수가 표시됩니다

위젯 (구독 폼·유료 구독 안내 등)

위젯은 뉴스레터에 상호작용 요소를 넣는 특수 블록입니다. 슬래시 메뉴에서 '위젯'을 선택하면 아래 목록에서 삽입할 위젯을 고를 수 있습니다.

▲ 위젯 선택 화면 — 삽입할 위젯을 고릅니다

▲ 구독 폼 위젯 (인라인 형태) — 위젯 설정에서 레이아웃·구독 방식·버튼 색상을 바꿀 수 있습니다

인라인 서식 (텍스트를 선택하면 나오는 도구)

블록을 새로 만드는 대신, 본문 안에서 텍스트 일부를 드래그해 선택하면 인라인 툴바가 떠서 아래 서식을 적용할 수 있습니다.

▲ 텍스트를 선택하면 나타나는 인라인 툴바 — 굵게·기울임·형광펜·인라인 코드(</>)·AI 다듬기(✦) 등

굵게 (Bold)

가장 중요한 부분을 굵게 강조합니다. 단축키는 Cmd+B 입니다.

▲ 굵게 적용 예시

기울임 (Italic)

문장의 뉘앙스나 인용을 Cmd+I 로 표현합니다.

▲ 기울임 적용 예시

밑줄 (Underline)

밑줄로 강조합니다. 단축키는 Cmd+U 입니다.

▲ 밑줄 적용 예시

취소선 (Strikethrough)

지워진 표현이나 정정 내용을 나타낼 때 사용합니다. 단축키는 Cmd+Shift+X 입니다.

▲ 취소선 적용 예시

형광펜 (Marker)

형광펜으로 텍스트를 눈에 띄게 강조합니다. 단축키는 Cmd+M 이며, 인라인 툴바에서 색상을 고를 수 있습니다.

▲ 형광펜 적용 예시

텍스트 색상

글자 색을 바꿔 강조합니다. 텍스트를 선택한 뒤 인라인 툴바의 색상 버튼에서 원하는 색을 고르면 됩니다.

▲ 텍스트 색상 적용 예시

인라인 링크

선택한 글자에 링크를 겁니다. 단축키는 Cmd+K 이며, 웹 주소뿐 아니라 mailto:주소 형식으로 이메일 보내기 링크도 걸 수 있습니다.

▲ 인라인 링크 적용 예시

인라인 코드

단축키·코드·파일명처럼 코드성 텍스트를 코드 서식으로 감쌉니다. 인라인 툴바의 </> 버튼을 누르면 적용되며, 발송 이메일에서도 웹과 동일하게 보입니다.

▲ 인라인 코드 적용 예시

각주 (Footnote)

본문에 각주 번호를 넣고, 발행 시 뉴스레터 하단에 각주 섹션이 자동으로 만들어집니다. 단축키는 Cmd+Shift+F 이며, [^1] 형태로 직접 입력해도 각주로 변환됩니다.

▲ 각주를 달면 본문에 번호가 붙고, 하단 패널에서 각주 내용을 편집합니다

▲ 발행된 글 하단에 각주 섹션이 자동으로 만들어집니다

▲ 웹에서는 각주 번호에 마우스를 올리면 내용이 미리보기로 뜹니다

AI 문장 다듬기

선택한 문장을 더 자연스럽게 다듬어 줍니다. 마케팅 플랜에서 사용할 수 있습니다.

▲ 인라인 툴바의 ✦ 버튼이 'AI 문장 다듬기'입니다

블록 관련 자주 묻는 질문

이미지를 클릭하면 다른 페이지로 이동하게 할 수 있나요?

네, 됩니다. 이미지 블록 아래의 '링크 입력..' 칸에 웹 주소(http/https)를 넣으면 독자가 이미지를 클릭했을 때 그 주소로 이동합니다. 다만 이미지 링크는 웹 주소만 지원하므로, 클릭 시 이메일을 보내게 하는 mailto 링크는 이미지에는 걸 수 없습니다. 이메일 보내기 링크가 필요하면 본문 텍스트에 인라인 링크(Cmd+K)로 'mailto:주소'를 연결하세요.

특정 문단(텍스트)에 배경색을 넣고 싶어요.

일반 단락·제목 블록에는 배경색을 직접 넣을 수 없습니다. 글박스(Cmd+Shift+B) 또는 칼럼(Cmd+Shift+C) 블록을 만들고 그 안에 텍스트를 작성한 뒤, 블록 설정의 '블록 스타일'에서 배경색을 지정하세요.

넣은 사진을 삭제하려면 어떻게 하나요?

이미지 블록을 선택한 뒤 해당 블록을 삭제하면 됩니다. 블록 설정 메뉴(블록 왼쪽 핸들 클릭)에서 삭제하거나, 이미지를 지운 빈 블록에서 Backspace로 블록을 제거할 수 있습니다.

글에 목차를 만들고 싶어요.

목차는 제목(헤더) 블록을 기준으로 구성됩니다. 섹션 제목들을 제목 블록(Cmd+Shift+H, 또는 #/##/### + 스페이스)으로 만들어 두면 글의 구조가 제목 단위로 잡힙니다. 작성 화면에서는 제목 블록을 기반으로 한 내비게이션이 표시되어 긴 글에서 위치를 쉽게 파악할 수 있습니다.

단축키 모음

에디터 사용을 더욱 빠르게 할 수 있도록 단축키를 지원합니다.

윈도우: ⌘ → ctrl

기본

블록 삽입

텍스트 스타일

자동 변환

이모지