Stripo 이메일 편집기 모양 설정

게시일: 2024년 10월 22일 · 최종 업데이트: 2026년 9월 12일 · 작성자 Marcus Biel

Appearance(모양) 탭에서는 글꼴, 배경색, 버튼 스타일, 모바일 전용 서식 등 이메일 전체에 적용할 스타일을 설정할 수 있습니다. 이를 통해 다양한 기기와 이메일 클라이언트에서도 일관된 디자인을 유지하고 화면 환경에 맞게 표시할 수 있습니다.

아래에서 Appearance 탭의 각 섹션을 자세히 살펴보겠습니다.

---

1. General Settings(일반 설정)

이메일의 전체적인 모양과 정렬 방식을 설정합니다. 이 설정은 모든 섹션에 공통으로 적용됩니다.

• Message Alignment(메시지 정렬): 이메일 콘텐츠를 Left(왼쪽), Center(가운데) 또는 **Right(오른쪽)**로 정렬합니다.
• Default Padding(기본 패딩): 새로 추가하는 구조의 여백을 사방에 동일하게 설정하거나 위쪽, 오른쪽, 아래쪽, 왼쪽의 패딩을 각각 조정합니다.
• General Background Color(전체 배경색): 16진수 색상 코드나 색상 선택기로 이메일의 배경색을 설정합니다.
• Font(글꼴): Arial, Helvetica 같은 기본 글꼴이나 Roboto, Lato 같은 장식용 글꼴을 선택합니다.
• Line Spacing(줄 간격): 미리 설정된 네 가지 옵션으로 줄 사이의 간격을 조정합니다.
• Paragraph Bottom Space(단락 아래 여백): 단락 사이에 여백을 둘지 설정합니다.
• Underline Links(링크 밑줄): 이메일의 모든 링크에 자동으로 밑줄을 표시할지 설정합니다.
• Responsive Design(반응형 디자인): 이 옵션을 켜면 이메일이 모바일 기기를 비롯한 다양한 화면 크기에 맞게 조정됩니다.
• RTL Text Direction(오른쪽에서 왼쪽으로 쓰기): 아랍어나 히브리어처럼 오른쪽에서 왼쪽으로 쓰는 언어에 사용합니다.
• Background Image(배경 이미지): 배경 이미지를 추가하고 필요에 따라 링크를 연결합니다. 이미지를 끌어다 놓으면 업로드할 수 있습니다.

---

2. Stripes(스트라이프)

스트라이프는 이메일을 구성하는 큰 영역으로, 헤더, 콘텐츠, 푸터, 정보 영역 등이 여기에 해당합니다. 각 스트라이프의 스타일은 개별적으로 설정할 수 있습니다.

Header(헤더) 스트라이프

• Text Size(텍스트 크기): 헤더의 텍스트 크기를 조정합니다(8~72).
• Background Color(배경색): 배경을 단색으로 설정하거나 투명하게 둡니다.
• Content Background Color(콘텐츠 배경색): 헤더 내부 콘텐츠 영역의 배경색을 조정합니다.
• Font Color(글꼴 색상): 텍스트 색상을 설정합니다.
• Link Color(링크 색상): 탐색 링크를 비롯한 헤더 내 링크의 색상을 설정합니다.
• Background Image(배경 이미지): 필요에 따라 배경 이미지를 추가합니다.

Content(콘텐츠) 스트라이프

텍스트, 이미지, 상호작용 요소를 배치하는 이메일의 본문 영역입니다.

• Text Size(텍스트 크기): 콘텐츠의 텍스트 크기를 조정합니다(8~72).
• Content Background Color(콘텐츠 배경색): 본문 콘텐츠 영역의 배경색을 설정합니다.
• Font Color(글꼴 색상): 텍스트의 기본 색상을 설정합니다.
• Link Color(링크 색상): 링크 색상을 조정합니다.

Footer(푸터) 스트라이프

주로 연락처, 법적 정보, 소셜 미디어 링크를 배치하는 영역입니다.

• Text Size(텍스트 크기): 텍스트 크기를 설정합니다(8~72).
• Background Color(배경색): 배경을 단색으로 설정하거나 투명하게 둡니다.
• Content Background Color(콘텐츠 배경색): 푸터 내부 콘텐츠 영역의 배경색을 설정합니다.
• Font Color(글꼴 색상): 텍스트 색상을 설정합니다.
• Link Color(링크 색상): 푸터 내 링크의 색상을 조정합니다.
• Background Image(배경 이미지): 필요에 따라 클릭 가능한 링크가 연결된 이미지를 추가합니다.

Info Area(정보 영역) 스트라이프

면책 조항, 법적 고지, 추가 정보를 배치하는 영역입니다.

• Text Size(텍스트 크기): 글꼴 크기를 설정합니다(8~72).
• Font Color(글꼴 색상): 텍스트 색상을 설정합니다.
• Link Color(링크 색상): 이 스트라이프에 있는 링크의 색상을 조정합니다.

---

3. Headings(제목)

제목(H1, H2, H3)의 스타일을 설정해 이메일의 내용 구조와 제목 간 위계를 명확하게 표현합니다.

• Font(글꼴): 제목에 사용할 글꼴을 선택합니다.
• Line Spacing(줄 간격): 읽기 편하도록 줄 사이의 간격을 조정합니다.
• Heading Size(제목 크기): H1, H2, H3 제목의 크기를 조정합니다(8~72).
• Text Styling(텍스트 스타일): Bold(굵게) 또는 Italic(기울임꼴) 스타일을 적용합니다.
• Font Color(글꼴 색상): 제목 유형별로 서로 다른 색상을 설정합니다.

---

4. Button(버튼)

구독자의 참여를 유도할 수 있도록 이메일의 버튼을 디자인합니다.

• Support for Outlook(Outlook 지원): 이 옵션을 켜면 VML 코드를 사용해 Microsoft Outlook에서 버튼이 올바르게 표시되도록 합니다. 이메일 용량이 커질 수 있습니다.
• Button Color(버튼 색상): 버튼의 기본 색상을 설정합니다.
• Highlight Hovered Buttons(마우스를 올린 버튼 강조): 마우스 포인터를 올렸을 때 버튼 색상이 바뀌는 효과를 켭니다.
  • Hover Color(마우스를 올렸을 때의 색상): 마우스 포인터를 올렸을 때 표시할 색상을 선택합니다.
• Font Color(글꼴 색상): 버튼 텍스트의 색상을 설정합니다.
• Text Style(텍스트 스타일):
  • Font(글꼴): 버튼 텍스트에 사용할 글꼴을 선택합니다.
  • Font Size(글꼴 크기): 텍스트 크기를 조정합니다(8~72).
  • Styling(스타일): Bold(굵게) 또는 Italic(기울임꼴) 스타일을 적용합니다.
• Border Radius(모서리 반경): 버튼 모서리의 둥근 정도를 설정합니다(0~100).
• Borders(테두리):
  • Type(유형): solid(실선), dashed(파선) 또는 dotted(점선) 테두리를 선택합니다.
  • Color(색상): 테두리 색상을 설정합니다.
• Padding(패딩): 버튼 내부의 위쪽, 오른쪽, 아래쪽, 왼쪽 여백을 조정합니다.

---

5. Mobile Formatting(모바일 서식)

모바일 전용 설정으로 모바일 기기에서도 이메일이 보기 좋게 표시되도록 합니다.

• 헤더, 콘텐츠, 푸터, 정보 영역의 텍스트 크기: 모바일에서 표시할 각 섹션의 텍스트 크기를 조정합니다.
• Menu Items Font Size(메뉴 항목 글꼴 크기): 탐색 메뉴 항목의 글꼴 크기를 조정합니다.
• 제목 크기: 모바일에서 표시할 H1, H2, H3의 크기를 설정합니다.
• 제목 정렬: 제목을 왼쪽, 가운데 또는 오른쪽으로 정렬합니다.
• Button Text Size(버튼 텍스트 크기): 모바일에서 표시할 버튼 텍스트의 크기를 조정합니다.
• Full-width Buttons(전체 너비 버튼): 버튼이 화면의 전체 너비를 채우도록 설정합니다.
• 위쪽 및 아래쪽 패딩: 모바일에서 보기 좋도록 위아래 여백을 조정합니다.
• Content Margin(콘텐츠 바깥 여백): 모바일에서 콘텐츠 주변에 표시할 여백을 조정합니다(0~100).

---

마무리 확인 사항

• 테스트: 다양한 기기와 이메일 클라이언트에서 이메일을 테스트해 디자인이 일관되게 표시되는지 항상 확인하세요.
• 접근성: 누구나 내용을 이용할 수 있도록 읽기 쉬운 글꼴과 올바른 제목 구조를 사용하고 이미지에 대체 텍스트를 제공하세요.
• 최적화: 파일 용량을 최소화해 로딩 속도와 성능을 개선하세요. 특히 모바일 사용자에게 중요합니다.