오픈 소스 트랜잭션 이메일 템플릿
게시 됨: 2017-11-29새 SendGrid 계정을 설정할 때 계정에 대한 이메일 템플릿 집합을 만드는 것은 완료해야 하는 가장 중요한 작업 중 하나입니다. 앱 또는 서비스에 대해 API를 통해 이메일을 보낼 계획이라면 여러 유형의 이메일 템플릿이 필요할 가능성이 큽니다. 가장 일반적인 것은 비밀번호 재설정, 이메일 확인 및 영수증입니다.
웹에는 다양한 사전 제작 이메일 템플릿이 있지만 브랜드에 맞게 쉽게 사용자 정의할 수 있는 세트를 찾는 것이 항상 쉬운 것은 아닙니다.
일반 이메일 클라이언트에서 템플릿을 철저히 테스트하는 것도 중요합니다. 이 프로세스는 시간이 많이 걸리고 SendGrid 계정을 설정하고 이메일 보내기를 시작하는 프로세스를 느리게 할 수 있습니다.
저는 SendGrid 팀이 사용자가 이러한 일반적인 사용 사례를 다루기 위해 활용할 수 있는 오픈 소스 이메일 템플릿 세트를 만들어 고객에게 가치를 제공할 수 있다는 것을 깨달았습니다. 템플릿을 쉽게 사용자 지정할 수 있을 뿐만 아니라 빠르게 준비하고 보낼 수 있습니다!
"붙여넣기"라고 하는 템플릿 세트는 5가지 사용 사례를 다룹니다.
- 비밀번호 재설정
- 이메일 확인
- 환영 편지
- 영수증
- 다이제스트(매일, 매주 또는 매월)
GitHub에서 템플릿 다운로드
붙여넣기 템플릿을 시작하려면 GitHub로 이동하여 리포지토리를 복제하거나 템플릿 붙여넣기 폴더를 다운로드하세요. 이러한 템플릿은 다른 SendGrid 사용자가 최신 Hacktoberfest 동안 기여한 이메일 템플릿의 오픈 소스 저장소에 있다는 점도 언급할 가치가 있습니다.
붙여넣기 템플릿 사용자 지정
Paste 템플릿의 로컬 복사본이 있으면 선호하는 코드 편집기에서 엽니다(VSCode 또는 Atom을 권장합니다. 둘 다 무료입니다).
base.html에는 다른 많은 템플릿에서 볼 수 있는 대부분의 재사용 가능한 구성 요소가 포함되어 있으므로 시작하는 것이 좋습니다. 이러한 템플릿은 모두 HTML에 대한 공통 구조를 공유하며 문서에 몇 가지 기본 스타일이 있지만 대부분의 스타일은 인라인에서 찾을 수 있습니다.
HTML을 훑어보면 블록이 시작하고 끝나는 위치를 나타내는 많은 HTML 주석을 볼 수 있습니다. 템플릿을 스캔하고 수정을 시작할 때 도움이 되는 중요한 참고 사항입니다.
배경색, 타이포그래피, 간격 등에 대한 HTML 요소의 스타일도 확인할 수 있습니다. 이러한 템플릿의 모양과 느낌을 변경하는 방법을 이해하기 위해 이러한 스타일을 실험해 보시기 바랍니다.
템플릿에 로고 추가
가장 먼저 할 일 중 하나는 템플릿 붙여넣기 로고를 자신의 로고로 바꾸는 것입니다. 시작 위치를 나타내는 HTML 주석을 검색하여 로고 블록을 빠르게 찾을 수 있습니다.
이 블록 내에서 앵커 태그(<a> )를 찾고 HREF를 URL로 변경해야 합니다. 템플릿은 기본적으로 SendGrid의 홈페이지에 연결되어야 합니다.
URL을 조정한 후 붙여넣기 로고를 자신의 로고로 교체해 보겠습니다. 웹 서버나 CDN과 같이 쉽게 연결할 수 있는 위치에 로고를 저장하는 것이 좋습니다. 로고 src를 교체한 후에는 너비/높이가 정확하도록 인라인 스타일을 조정하십시오. 이는 로고의 종횡비에 따라 달라집니다. 기본적으로 붙여넣기 로고는 48px 정사각형이므로 너비 스타일을 48px로 설정했습니다.
예시:
이 예에서 붙여넣기 로고 URL은 일부 너비 스타일과 함께 참조되어 원하는 크기인 48px로 설정합니다. 로고가 선명하게 보이도록 이 값을 조정하십시오.
배경색 사용자 정의
위에서 언급했듯이 배경색은 다양한 블록에 설정되어 붙여넣기 템플릿(회색 및 흰색)의 기본 스타일을 설정합니다. 브랜드 색상과 일치하도록 쉽게 변경할 수 있습니다.
이러한 스타일 사이를 이동하는 가장 쉬운 방법은 편집기를 사용하여 인라인 스타일, bgcolor 및 배경색을 검색하는 것입니다. 이러한 속성의 값은 16진수 값(예: #000000) 또는 색상 이름(예: 검정색)으로 대체될 수 있습니다. 이러한 변경 사항을 처리하는 동안 기본 브라우저에서 템플릿 중 하나를 열고 변경 사항을 적용할 때 새로 고침하면 쉽게 탭을 유지할 수 있습니다.
예시:
이 예에서 body 태그는 밝은 회색 배경색으로 스타일이 지정됩니다. 이 색상 값과 템플릿 내의 다른 값은 브랜드와 일치하도록 사용자 정의해야 합니다.
버튼 사용자 정의
버튼은 이메일 템플릿에서 가장 일반적인 인터페이스 구성 요소 중 하나입니다. 이메일 주소 확인과 같이 사용자가 수행하기를 원하는 가장 중요한 작업을 강조 표시하는 클릭 유도문안으로 사용합니다.
기본적으로 Paste의 버튼은 모서리를 둥글게 하기 위해 미묘한 경계 반경이 있는 파란색 블록으로 스타일이 지정됩니다. 브랜드에 맞게 이 버튼을 사용자 정의하는 것은 템플릿의 배경색에 대해 이미 수정한 것과 유사합니다. 추가한 HTML 주석을 사용하여 블록을 검색합니다.
버튼 주위에 블록을 만들기 위해 흰색 배경이 적용된(#ffffff) 여러 테이블 셀이 있지만 아래에서 다음과 같은 스타일을 가진 테이블 셀을 찾고 싶을 것입니다.
예시:
이 예에서 <td>에는 버튼의 색상을 설정하는 데 사용되는 bgcolor가 있고 모서리를 미묘하게 둥글게 하기 위한 border-radius가 있습니다. 브랜드와 일치하는 버튼의 독특한 모양을 얻으려면 이러한 스타일을 실험해 보십시오.
버튼의 두 번째 부분은 위에 표시된 테이블 셀 내의 앵커(<a>)입니다.
이 앵커는 버튼을 클릭할 때 이동하는 URL과 레이블의 텍스트 스타일을 제어합니다. 스타일을 조정하여 선호도와 브랜드와 일치하는 항목에 따라 레이블을 조정할 수 있습니다.
타이포그래피 커스터마이징
기본적으로 붙여넣기 템플릿은 Google 글꼴을 통해 웹 글꼴인 Source Sans Pro에 로드됩니다. Google 컬렉션의 다른 웹 글꼴을 사용하거나 요즘 대부분의 컴퓨터(Arial, Georgia, Times 등)에서 볼 수 있는 표준 글꼴 집합을 사용할 수 있습니다.
다른 웹 글꼴을 사용할 계획이라면 내 이메일 개발 팁 및 유용한 정보 게시물을 확인하세요. 글꼴군을 참조하고 기본 설정에 따라 조정하는 모든 인라인 스타일에 대해 HTML을 살펴보아야 합니다.
예시:
이 예에서 <td>에는 Source Sans Pro를 사용하도록 설정된 글꼴 모음 스타일이 있으며 웹 글꼴이 로드되지 않는 경우 더 많은 표준 글꼴로 대체됩니다.
마무리 생각
이 포인터가 브랜드에 맞게 템플릿을 사용자 정의하고 SendGrid 플랫폼에서 실행하는 데 도움이 되기를 바랍니다. 앞으로 더 많은 템플릿과 함께 사용자 정의 프로세스를 훨씬 빠르게 만드는 빌드 도구로 이메일 템플릿 리포지토리를 확장할 수 있기를 바랍니다.
도중에 문제가 발생하면 GitHub 리포지토리에 문제를 제출하고 기여하고 싶다면 풀 리퀘스트를 제출하세요. 실험할 더 많은 템플릿을 찾고 계십니까? SendGrid의 무료 반응형 HTML 이메일 템플릿을 사용해 보십시오.