UI/UX

[튜토리얼] 모바일 우선 응답형 이메일 템플릿 코딩법

완전반응형 이메일 템플릿 코딩 간단 노하우

2020년 8월 6일

본 내용은 완전반응형의 유연한 이메일 템플릿을 코딩하는 것이 얼마나 간단하고 쉬운지 보여주는 데 있다. 결코 어렵거나 복잡하지 않다. 필요한 것이 있다면 서로 다른 중단점에 대한 설계와 작업하는 데 있어 견고한 순서를 이해해야 한다는 점이다. 자신의 모바일 우선 이메일 코딩법에 대해 알아보기로 하자.

디자인
먼저 다음 스크린샷을 보자. 오늘 코딩할 디자인이다. 이 이메일의 디자인은 초보자가 따라하기에 완벽한 템플릿이다.

설정
무엇이든 시작하기 전에 기본 HTML 설정을 준비해야 한다. 다음 HTML에서는 제목과 반응형 기능을 위한 메타 태그, CSS 섹션 및 본문의 샘플 컨테이너 dvi와 같은 기본사항을 추가했다.

이메일을 개발하기 위해 CSS를 별도의 파일에 보관하고 링크할 수 있다. 여기서는 간단하고 사용하기 쉽도록 HTML 문서에 보관하도록 한다.

HTML 섹션 만들기
지금 단계에서는 이메일 콘텐츠 자체를 중심으로 구조를 만드는 것이 좋다. 브라우저에서 이메일을 열면 당장은 모두 하나의 열에 위치하고 있도록 해야 한다. 먼저 이메일 로고와 본문 내용 및 바닥글 등 세 섹션으로 나눴다. 로고 부분에서는 로고 이미지만 추가하고 링크를 생성했다. 이 링크는 당신의 회사 홈페이지 주소를 넣는다.

다음 섹션인 본문 내용은 앞서 제시했던 스크린샷의 레드문 이미지를 포함해 디자인 전체의 파란색 섹션이다. 전각의 달 이미지를 포함해 두 가지 방법을 사용할 수 있다. 현재는 이미지 태그를 통해 배치했다. 두 번째 옵션은 다시 설명하도록 하겠다.

마지막으로 바닥글을 배치할 단계다. 이 전체 이메일 작업 중 가장 중요한 섹션이다. 우선 이것을 네 개의 섹션으로 나눠보자. 헤더에 자체 섹션을 제공하면 나중에 디자인 코딩을 쉽게 변경할 수 있다.

웹 브라우저에서 이메일을 ‘미리보기’하면 아래의 이미지와 비슷한 내용이 된다.

모바일 디자인 스타일링
이 단계는 모바일 우선 접근 방식이므로 CSS를 이용해 이메일의 기본 스타일을 지정, 모바일 디자인과 일치시킨다. 전반적인 모바일 모양과 디자인을 먼저 다루고 세부사항을 살펴보자.

전반적인 디자인 설정
이메일 본문에 배경색(회백색 노란색)을 추가했으며, 문서 전체에 글꼴 스타일도 더했다. 로컬 글꼴을 사용했다. 사용자 정의 글꼴을 사용하려면 위치를 템플릿에 추가해야 한다. 구글 글꼴에는 알맞은 무료 글꼴이 있으며 이를 사용하기에 앞서 명확한 지침을 확인하는 것이 좋다.

컨테이너 섹션도 정의했다. 모바일 버전이며, 이는 나중에 다른 너비와 패딩에 중요하다.

이제 세부 정보를 확인할 수 있다.

로고 섹션
로고는 두 디자인의 중심이라고 할 수 있다. 로고 div가 여백을 통해 중앙으로 배치하려면 컨테이너 너비를 설정해야 한다. 디자인의 로고 크기이기 때문에 40px로 설정했다. 모바일과 데스크톱 디자인의 로고 크기가 다를 수 있다. 여기서는 단순히 같은 너비를 유지하기로 한다.

주요내용 영역
콘텐츠 본문 패딩의 경우 두 가지 중 하나를 사용할 수 있다. 먼저 텍스트 요소나 컨테이너 본문 자체에 패딩을 설정하는 것이다. 어느 것이든 장치에 따라 변경한다. 대신 컨테이너 패딩으로 설정하기로 한다. 이런 식으로 장치의 크기에 관계없이 100% 너비로 설정하면 텍스트 너비를 유동적으로 적용할 수 있다.

텍스트 스타일 적용은 간단하다. 헤더도 로컬 글꼴을 사용하고 있다. 여기에서는 연결된 글꼴 서체도 참조한다.

타이포그래피 스타일링
아래 스니펫에는 많은 절차가 있다. 먼저 h1의 모든 속성을 정의했다. 디자인에서 본문과 다른 글꼴을 사용하길 원하므로 여기에서는 새로운 글꼴 모음으로 설정했다. 이어 단락 사이에 정의한 간격을 추가했다.

버튼 스타일링
버튼을 자동으로 가운데로 배치하려면 먼저 너비를 설정해야 한다. 해당 너비는 링크 텍스트의 너비로 결정된다. 작은 너비를 10px로 설정하고, 모두 같은 줄에 맞을 때까지 10씩 설정한다.

마지막으로 버튼 링크 자체의 스타일을 지정했다. 호버 상태를 추가하는 것을 잊지 말아야 한다. 이 디자인의 경우 색 반전이 완벽하게 작동한다.

이미지
나는 앞서 바디에 붉은 달 이미지를 포함하기 위한 옵션이 필요하다고 언급했다. 현재는 HTML 내용에 img 태그를 추가했다. CSS를 사용해 크기를 조정할 수 있다. 그러나 이를 변경하는 대신 메일 이미지 배경으로 설정했다. 이것은 이미지에 대한 두 번째 처리 옵션이다. 우선 content-body-image div를 content-body를 외부로 옮긴다. 콘텐츠 본문에 오른쪽과 왼쪽으로 패딩이 있기 때문에 전체 너비 이미지를 가질 수 없기 때문이다.

다음으로 콘텐츠 이미지에 배경 이미지를 추가하고 다음과 같이 디자인에 맞게 스타일을 지정한다.

이제 content-body 클래스의 CSS로 돌아가서 모든 모서리의 경계 반경을 5px에서 맨 위의 5px로 변경하는 일만 남았다.

아래 이미지를 보면 이것이 이제 전체 이메일 최종 배경이 됐다.

바닥 글
마지막으로 바닥글이라는 부분이 재미있다. 이 전체 디자인 중 가장 복잡한 부분이기도 하다. 스타일링하는 동안 모바일과 데스크탑 모두 적용될 수 있도록 디자인해야 한다. 바닥 글의 상단과 하단에 40px의 여백을 추가해 공간을 확보했다.

그런 다음 H1에서 스타일을 복사하고 글꼴 크기와 여백과 같은 H2 디자인과 일치하도록 일부 변수를 변경했다.

주소의 각 줄을 자체 p 태그로 만들었으므로 디자인에서 지시하는 간격을 입력 후 제거해야 한다. CSS를 사용해 HTML을 변경하거나 줄바꿈을 추가할 수 있고, 단락 주위의 여백을 제거할 수 있다. CSS로 들어가 텍스트를 가운데 정렬하기 때문에 여백을 제거하기로 했다.

그 다음 아이콘을 가운데 정렬했다. 바닥 글 클래스 안에 바닥글의 모든 항목을 가운데 정렬할 수 있다. 그러나 모바일 버전은 개별 텍스트가 다르게 정렬되므로 모바일 쿼리를 추가할 때 여기서 개별적으로 수행하는 것이 좋다.

그리고 최종적으로 링크를 가운데에 배치했다. 이들이 개별 라인에 있는지 확인하기 위해 display : block;를 삽입하고, 마찬가지로 동일한 효과를 위해 HTML 주위에 ap 태그를 추가하거나 HTML 사이에 줄바꿈도 할 수 있다.

데스크탑 버전 사용자 정의
현재는 이 튜토리얼은 모바일에 최적화됐다. 사용하는 장치에 관계없이 모바일 버전이 기본값이기 때문이다. 이는 점진적으로 향상시켜야 할 개발 프로세스의 한 부분이며, 모바일 우선 디자인의 전제이기도 하다. 그래서 더 큰 화면을 위해 반응형 이메일로 전환해기로 하자. 데스크탑 디자인을 다시 살펴보며, 미디어 쿼리로 이를 전환하는 방법을 시도해보자.

기본 검색어 추가
우선 기본 쿼리를 선택한다. 480px는 전화와 태블릿과 같은 더 큰 장치 간의 훌륭한 표준이다. 작업하려는 디자인에 따라 쿼리를 사용해 세부정보를 얻을 수 있다. 그러나 여기서는 두 가지 디자인으로 작업한다. 이 튜토리얼에서는 480px을 사용하고 이보다 큰 화면 디자인도 유동적인 레이아웃을 갖도록 한다.

CSS 맨 아래에 위 쿼리를 추가하자. CSS는 CSS 스타일 시트이기 때문에 기본값이 이 쿼리보다 우선하기 때문에 작동하지 않는다. 업데이트하는 각 클래스 아래, 쿼리를 추가할 수 있지만 더 간단히 사용하기 위해서는 CSS 맨 아래에 단일 쿼리로 유지한다.

유체 용기 너비
아래 코드를 보자. 단순히 480px보다 큰 모든 화면이 경우 .container 클래스의 최대값은 600px이다. 브라우저 크기를 조정해 테스트하자.

최대 너비를 추가하고 content-body-text 클래스의 여백으로 div를 가운데 맞춘다. 마지막으로 시각적인 이유로 본문에 20px 왼쪽 및 오른쪽 여백을 추가했다. HTML 콘텐츠 주위에 다른 컨테이너 div를 만들 수도 있다. 이 여백은 파란색 컨테이너가 창 크기 600픽셀에서 480픽셀 사이일 때 창의 가장자리로 완전히 자리하지 않도록 한다.