스튜디오 개요

스튜디오는 MailInApp의 비주얼 이메일 빌더입니다. 대시보드의 모든 프로젝트는 스튜디오에서 열립니다.

목적으로 시작하기

새 프로젝트는 프로젝트를 만들 때 선택하는 목적(설문조사, 프로모션, 뉴스레터, 이벤트, 트랜잭션, 대시보드, 클래스룸, 스포츠팀 중 하나)에서 시작할 수 있습니다. 하나를 선택하면 해당 주제의 실제 스타터 템플릿 캐러셀이 열리며, 각 항목은 목업이 아니라 실제로 렌더링된 큰 미리보기입니다. 하나씩 살펴보고 선택하면 일반 블록으로 구성된 스타터 레이아웃이 캔버스에 채워집니다(설문조사용 평점 블록, 프로모션용 히어로와 쿠폰 등). 이후로는 특별할 것이 없습니다. 다른 블록과 마찬가지로 편집하거나 삭제하거나 추가할 수 있습니다. 빈 프로젝트로 시작은 이 과정을 건너뛰고 기본 빈 캔버스를 엽니다.

선택 화면에 대해서는 퀵스타트를, 목적이 응답 대시보드에 어떤 영향을 주는지에 대해서는 응답 및 웹훅을, 자신의 템플릿을 비공개로 저장하거나 커뮤니티 갤러리에 게시하는 방법에 대해서는 스타터 템플릿 및 나만의 라이브러리를 참고하세요.

워크스페이스

캔버스 — 화면 중앙에 위치하며 이메일을 실시간으로 렌더링해 보여줍니다. 요소를 클릭하면 선택되고, 브레드크럼 바에는 이메일 본문에서 해당 요소까지의 경로가 표시되며, 상위 요소는 모두 클릭할 수 있습니다.
좌측 패널 — 아이콘을 클릭해 한 번에 하나씩 여는 네 개의 패널입니다. 삽입(블록 라이브러리 — 섹션, 텍스트, 이미지, 버튼, 구분선, 스페이서 같은 레이아웃 블록과 캐러셀, 투표, 폼, 카운트다운, 퀴즈 같은 인터랙티브 블록을 캔버스로 드래그합니다. 검색창으로 이름별 필터링도 가능합니다), 트리(이메일 전체 구조 — 블록 순서 변경, 캐러셀의 개별 슬라이드 같은 중첩 요소 선택, 컨테이너 접기, 눈 모양 토글로 삭제하지 않고 블록을 출력에서 숨기기, 더블클릭으로 이름을 바꿔 자신을 위한 메모 남기기가 가능합니다. 모든 컨테이너에는 해당 컨테이너가 허용하는 자식 타입만 검색할 수 있는 선택기를 여는 **+**가 있습니다 — 폼의 경우 삽입 패널의 입력 섹션과 동일한 입력 변형으로 확장됩니다 — 드래그 없이 추가할 수 있으며, 빈 컨테이너의 캔버스 상 "여기에 놓기" 플레이스홀더 자리에도 동일한 선택기가 표시됩니다), 데이터(데이터 소스 및 병합 태그 — 소스를 연결하고, 오디언스를 선택하고, 필드를 탐색합니다), 테마(아래 테마 설정 참고)입니다.
인스펙터 — 선택한 항목을 위한 오른쪽 패널로, 네 개의 탭으로 나뉩니다. 콘텐츠(텍스트, 링크, 투표의 선택지 같은 블록별 필드), 스타일(색상, 여백, 테두리, 커스텀 CSS), 로직(반복 연동, 표시 조건), 액션(이동, 복제, 삭제, ⧉ 감싸기… — 트리 패널의 **+**의 반대 동작으로, 현재 선택 항목을 그 자리에서 새 섹션, 컬럼, 반복 또는 그것을 담을 수 있는 HTML 요소 안으로 넣습니다. 예를 들어 버튼 하나에 자체 배경을 지정하거나, 블록 하나를 2단 레이아웃으로 바꿀 수 있습니다 — 그리고 컴포넌트로 저장, 재사용 가능한 컴포넌트 참고)입니다. 탭 위의 검색창으로 네 개 탭의 필드를 한 번에 필터링할 수 있습니다.

미리보기 모드

캔버스 위의 편집 / 미리보기 전환 스위치로 화면에 표시되는 내용을 제어합니다.

편집 — 선택하고 편집할 수 있는 블록 구조입니다.
미리보기는 선택한 수신자 행을 기준으로 병합 태그, 표시 조건, 반복을 해석하며, 아래에 티어 선택기가 있습니다. 라이브 뷰(수신자가 실제로 도착하는 것과 동일한 React 페이지), 발송본 — 일반과 발송본 — Outlook은 수신자의 받은편지함이 실제로 받게 될 컴파일된 실제 HTML을 렌더링합니다 — Outlook 티어는 실제 Outlook 클라이언트가 타는 것과 동일한 조건부 주석 분기를 강제로 적용하므로, Outlook을 직접 소유하지 않아도 폴백을 확인할 수 있습니다. 다크 모드 토글은 이메일 클라이언트의 다크 모드가 렌더링하는 방식대로 라이브 뷰 티어를 시뮬레이션합니다.

확대/축소 컨트롤(50~150% 또는 너비에 맞춤)은 실제 디자인을 변경하지 않고 캔버스를 확대·축소합니다.

실행 취소, 다시 실행 및 자동 저장

블록 드래그, 필드 입력, 색상 변경 등 디자인에 대한 모든 편집은 Ctrl/Cmd+Z로 실행 취소할 수 있으며(다시 실행: Shift+Ctrl/Cmd+Z 또는 Ctrl/Cmd+Y), 텍스트 필드 안에서도 동작합니다. 빠르게 이어지는 편집(문장 입력, 슬라이더 드래그 등)은 키 입력마다 하나씩이 아니라 하나의 실행 취소 단계로 합쳐집니다.

스튜디오는 지속적으로 자동 저장됩니다 — 저장 버튼이 따로 없으며, 탭을 닫아도 아무것도 사라지지 않습니다. 프로젝트는 마지막으로 작업하던 상태 그대로 다시 열립니다. 팀원과 같은 프로젝트를 동시에 열어둔 경우, 두 번째 저장에서는 첫 번째 저장을 조용히 덮어쓰는 대신 "다른 곳에서 변경됨" 배너가 표시됩니다. 새로고침하면 최신 버전을 가져오거나, 사본으로 저장을 선택해 변경 사항을 새 프로젝트로 보관할 수 있습니다.

테마 설정

테마 패널은 프로젝트 전체에 적용되는 몇 가지 토큰(브랜드, 강조, 텍스트, 보조, 배경 색상, 글꼴 스택, 버튼의 기본 모서리 반경)을 설정하므로, 모든 블록의 색상 필드를 일일이 찾아다니는 대신 한 번의 수정으로 리브랜딩할 수 있습니다. 색상 필드에는 토큰 참조를 지정할 수 있으며, 이는 일반 색상 입력창 옆의 스와치 선택기로 표시되거나, 자체 고정 색상 값을 가질 수도 있습니다. 토큰 참조가 기본 설정된 블록 — 버튼, 소셜 아이콘, 폼/퀴즈 제출 버튼 — 은 토큰을 변경하면 자동으로 스타일이 바뀌고, 고정 색상을 지정한 블록은 그대로 유지됩니다. 테마를 적용하지 않은 프로젝트는 이전과 동일하게 렌더링됩니다. 이 패널은 그저 복사·붙여넣기한 헥스 코드 대신 브랜드 색상을 명시적으로 드러낼 뿐입니다.

미디어 라이브러리

일부 필드는 이미지를 담기 위한 용도로만 존재합니다: 이미지 블록, 비디오/오디오 블록의 포스터/커버 이미지, 캐러셀 슬라이드의 이미지, 플래시카드의 앞면/뒷면 이미지, 상품 블록의 사진 등입니다. 이런 필드는 인스펙터에서 URL 입력창 대신 썸네일과 이미지 선택… 버튼을 표시합니다. 클릭하면 (해당 프로젝트뿐 아니라) 계정에 이미 업로드한 모든 항목이 격자로 표시되며, 그 자리에 최대 5MB 크기의 PNG, JPEG, WebP 또는 GIF를 위한 새로 업로드 버튼도 함께 있습니다. 하나를 선택하면 URL을 직접 입력한 것과 동일하게 즉시 필드에 반영됩니다. 이 선택기는 순전히 제작 편의를 위한 것이므로, 블록이 메일, 라이브 뷰, 캔버스에서 렌더링되는 방식에는 아무런 영향이 없습니다.

업로드한 파일은 계정의 모든 프로젝트에서 공유됩니다. 로고나 상품 사진을 한 번만 업로드하면 선택기가 나타나는 어디서든 재사용할 수 있습니다. 전체 라이브러리는 대시보드 내비게이션의 미디어에서도 탐색할 수 있으며, 여기서는 특정 프로젝트와 무관하게 자산을 업로드, 조회, 삭제할 수 있습니다. 자산을 삭제해도 라이브러리에서만 제거될 뿐 — 이미 해당 URL을 갖고 있던 블록은 직접 다른 것으로 바꾸기 전까지 계속 그 이미지를 렌더링합니다.

저장 용량은 플랜의 할당량에 포함되며(요금제 참고), 설정에서 다른 사용량과 함께 미터로 표시됩니다. 일부 필드는 이미지 대신 링크를 받습니다 — 슬라이드의 선택적 탭스루 링크, 비디오/오디오 블록 자체의 파일 src, 미팅 링크의 참가 URL 등입니다. 이런 필드는 일반 URL 입력창으로 남아 있습니다. MailInApp은 이미지만 저장하며, 비디오/오디오 파일이나 임의의 페이지는 저장하지 않습니다.

재사용 가능한 컴포넌트

다시 쓸 만한 것을 만들었나요 — 스타일이 적용된 헤더, 쿠폰 섹션, 상품 행 등? 해당 요소를 선택하고 인스펙터의 액션 탭을 연 뒤 컴포넌트로 저장을 클릭하세요. 이는 (해당 프로젝트뿐 아니라) 계정에 저장되며, 이후 모든 프로젝트의 삽입 패널 상단 내 컴포넌트에 표시됩니다. 드래그하거나 클릭하면 완전히 독립된 새 사본이 삽입되며, 같은 목록에서 저장된 컴포넌트의 이름을 바꾸거나 삭제할 수 있습니다. 이는 프리빌트 섹션의 내장 구성(인터랙티브 블록 참고)과는 다릅니다. 프리빌트는 모든 사용자를 위해 MailInApp이 기본 제공하지만, 저장된 컴포넌트는 여러분 자신의 디자인으로 만든 여러분만의 것입니다.

라이브 뷰

툴바의 라이브 뷰 ↗ 버튼을 클릭하면 이메일의 호스팅된 웹 버전 — 현재 디자인을 기반으로 렌더링된 완전한 인터랙티브 페이지 — 이 열립니다. 이는 여러분을 위한 미리보기 도구인 동시에, 수신자의 이메일 클라이언트가 인터랙티브 기능을 렌더링하지 못할 때 제공되는 범용 폴백이기도 합니다. 링크는 서명되어 있으며 30일 동안 유효합니다. 라이브 뷰 링크를 참고하세요.

AI 문구 지원

제목이 잘 떠오르지 않나요? 발송 페이지의 제목 필드 옆에 있는 ✨ 제안 버튼을 클릭하세요. MailInApp이 프로젝트 이름, 목적, 이메일에 이미 있는 문구의 짧은 발췌를 바탕으로 몇 가지 옵션을 작성해 줍니다.

제안은 클릭해서 채워 넣는 방식일 뿐 — 프로젝트에 자동으로 반영되는 내용은 전혀 없습니다. 제안 요청은 계정의 월간 한도에 포함되며(요금제 참고), 이는 모든 프로젝트와 이를 편집하는 모든 사람이 공유합니다. 필드 하나가 아니라 이메일 자체를 만들거나 편집하려면 AI 코파일럿을 참고하세요.

용량 제한

Gmail은 약 102KB보다 큰 메시지를 잘라냅니다 — 잘린 이메일은 <style> 블록을 잃게 되어 모든 CSS 인터랙티브 기능이 조용히 비활성화됩니다. 스튜디오는 제작하는 동안 이메일의 컴파일된 크기를 이 한도와 비교해 추적하며, 문제가 되기 전에 미리 경고합니다. 자세한 내용은 내보내기 및 발송을 참고하세요.