콘텐츠를 편집하는 에디터는 위지윅(WYSIWYG: What You See Is What You Get) 방식으로 동작하기 때문에, 편집과 동시에 결과물을 바로 확인할 수 있습니다.

콘텐츠 편집 화면은, 왼쪽의 편집 및 미리보기 영역, 오른쪽의 상자 목록 및 배경, 상자 속성 패널로 구성됩니다.

상자 추가하기

오른쪽의 상자 목록에서 필요한 상자를 끌어다 놓으면, 원하는 위치에 상자를 추가할 수 있습니다.

상자 이동하기

추가한 상자 위에 마우스 커서를 올리면 상자 왼쪽에 상자 이동 버튼이 나타납니다.

화살표 버튼을 클릭하여 상자를 위, 아래로 이동시킬 수 있습니다.

상자 이동 버튼을 클릭하여 상자를 직접 끌어서 원하는 위치로 이동시킬 수 있습니다.

화살표 버튼은 위, 아래로 한 칸씩 이동하기 때문에, 한 번에 여러 칸을 이동하는 경우, 상자 이동 버튼으로 이동하는 것이 더 편리합니다.

상자 복사, 삭제하기

추가한 상자 위에 마우스 커서를 올리면 상자 오른쪽에 복사 버튼과 삭제 버튼이 나타납니다. 복사 버튼을 클릭하면 동일한 상자가 바로 아래에 복사됩니다.

삭제 버튼을 클릭하면 내용이 사라집니다. 정말 삭제하시겠습니까?라는 안내 메시지가 나타나고, 를 클릭하면 콘텐츠가 삭제됩니다.

스탠다드 요금제에서 제공되는 과거 기록 보기 기능을 사용하면 삭제한 콘텐츠를 복원할 수 있습니다. 과거 기록 보기 기능에 대한 도움말은 여기[링크]를 참고해주세요.

기본 상자 목록

텍스트, 이미지, 버튼 상자

스티비의 기본 상자는 텍스트, 이미지, 버튼 3가지 요소로 구성되어 있습니다. 각 요소는 필요에 따라 자유롭게 추가하고 위치를 이동할 수 있고 1단, 2단 레이아웃도 변경할 수 있습니다.

상자를 새롭게 추가하지 않아도 레이아웃과 구성 요소를 변경하며 편집할 수 있습니다. 다만 텍스트, 이미지, 버튼 각 구성 요소는 최소 1개 이상은 반드시 체크가 되어 있어야 합니다.

상자 목록 화면에서는 텍스트, 이미지, 버튼을 구성 요소가 아니라 각 상자 별로 선택해서 삽입할 수도 있습니다. 이 상자들은 각 구성요소들을 단독으로 사용하는 경우 빠르게 넣어서 사용할 수 있도록 제공하는 상자입니다. 사용 방법과 기능은 모두 동일합니다.

각 구성 요소별 자세한 사용 방법은 다음과 같습니다.

텍스트 상자

텍스트 상자를 본문에 끌어다 놓거나 구성 요소 중 "텍스트"을 선택해서 추가할 수 있습니다. 텍스트 상자를 사용해 텍스트를 입력하고 편집할 수 있습니다. 텍스트는 고딕체와 16 폰트 사이즈가 기본값으로 적용됩니다.

텍스트를 드래그하여 영역을 지정하면, 폰트, 크기, 볼드, 이탤릭, 밑줄, 색상 등 텍스트 스타일을 변경하거나 링크를 삽입할 수 있습니다.

같은 방식으로 텍스트 정렬 값을 변경하거나 목록 스타일을 적용할 수 있습니다.

이미지 상자

이미지 상자를 본문에 끌어다 놓거나 구성 요소 중 "이미지"을 선택해서 추가할 수 있습니다. 이미지 상자를 추가한 뒤 상자를 클릭하면, 이미지를 업로드할 수 있는 탐색창이 나타납니다. 원하는 이미지를 선택하거나 이미지 파일을 직접 끌어다 놓는 방식으로 추가할 수 있습니다.

이미지가 삽입된 상태에서 상자를 클릭하면, 정렬 값 변경, 링크 삽입, 대체 텍스트 지정을 할 수 있습니다.

이미지 편집 버튼을 클릭하면 자르기, 회전, 반전 등 간단한 이미지 편집을 할 수 있습니다.

이미지 크기 조절 버튼을 클릭하면 이미지 크기를 픽셀(px) 단위로 조절할 수 있습니다.

버튼 상자

버튼 상자를 본문에 끌어다 놓거나 구성 요소 중 "버튼"을 선택해서 추가할 수 있습니다. 클릭을 유도하는 CTA 버튼을 추가할 수 있습니다.. 버튼 안에 텍스트를 입력하고 편집할 수 있습니다.

툴바의 링크(🔗) 버튼을 클릭해서 버튼에 링크를 추가할 수 있습니다.

텍스트 크기를 바꾸면, 버튼의 크기 역시 텍스트 크기에 맞춰 변경됩니다. 버튼의 모양과 색상, 테두리 모양과 색상, 텍스트 색상을 변경할 수 있으며 정렬 값을 변경하여 버튼의 위치도 바꿀 수 있습니다.

1단 가로 상자

이미지와 텍스트/버튼을 가로로 배열한 상자입니다. 1단 가로 상자에서 "이미지" 요소는 기본 설정 값으로 텍스트, 버튼 요소의 추가 삭제 여부만 선택할 수 있습니다. 좌우 변경 버튼을 클릭해 이미지와 텍스트/버튼의 위치를 변경할 수 있습니다. 1단 가로 상자에서 레이아웃 변경은 불가능합니다.

2단 상자

2단 상자를 선택하면 빠르게 2단 레이아웃 상자를 추가할 수 있습니다. 텍스트, 이미지, 버튼 상자에서도 2단 선택이 가능합니다.

이외에도 구분선, 동영상 미리보기, SNS 공유하기 상자 등 다양한 특수 상자를 제공하고 있습니다.

푸터 상자

푸터 상자를 추가하면, 광고성 이메일에 필요한 푸터 정보를 간편하게 추가할 수 있습니다. 푸터 상자에는 회사/단체 정보, 수신거부 링크가 포함됩니다.

푸터는 주소록을 생성할 때 입력한 정보를 가지고 오기 때문에, 푸터 상자를 추가하려면 주소록 단계에서 주소록을 선택해야 합니다. 주소록을 선택하는 방법은 이메일 만들기2. 주소록 선택하기를 참고하세요.

공백 상자

공백 상자를 추가하면 이메일 작성 시 여백을 넣을 수 있습니다. 공백 상자는 픽셀(px) 단위로 조절이 가능하며, 최소 10px ~ 최대 100px까지 공백 추가가 가능합니다.

상자 속성 변경하기

이미지, 텍스트, 버튼 등 추가한 구성요소의 속성 뿐만 아니라 상자 자체의 속성도 변경할 수 있습니다.

상자를 클릭하면 오른쪽의 상자 패널 하단에 상자 속성을 설정할 수 있는 메뉴가 표시됩니다. 상자의 배경 색상, 테두리 색상, 테두리 두께, 내부, 좌우 여백 등을 설정할 수 있습니다.

초기 상태로 돌아가려면, 색상 값을 삭제하고 테두리 두께를 없음으로 선택하고 내부 상, 하 여백은 보통, 좌우 여백은 보통으로 선택하세요.

배경 속성 변경하기

이메일 콘텐츠 전체 배경의 속성도 변경할 수 있습니다. 오른쪽의 패널에서 스타일을 클릭하면 배경 속성을 설정할 수 있는 메뉴가 표시됩니다.

배경 색상과 이메일 본문 및 테두리 색상을 지정할 수 있습니다. 초기 상태로 돌아가려면, 색상 값을 삭제하고 이메일 본문 배경 색상은 흰색(#ffffff), 테두리 두께를 없음, 본문 테두리 색상 없음으로 선택하세요.

데스크톱 뷰, 모바일 뷰 전환하기

편집 중인 이메일 콘텐츠를 데스크톱과 모바일 뷰로 확인할 수 있습니다. 콘텐츠 편집 화면은 데스크톱 뷰가 기본으로 설정되어 있습니다.

모바일 뷰로 전환하려면 데스크톱 아이콘 오른쪽에 있는 모바일 아이콘을 클릭하세요.

모바일에서 이메일을 확인하는 비율이 점차 증가하고 있기 때문에 모바일 뷰로 전환하여 모바일 최적화가 잘 되어있는지 확인하는 것이 중요합니다.

👈 이전 단계: 이메일 만들기
👉 다음 단계: 이메일 발송하기

답변을 찾으셨나요?