탬플릿 없이 이메일 커스텀하기 - html 인코딩 방법

 

 

 

탬플릿 도구나 이메일 관리 서비스 없이 이메일 커스텀하기

*아래 내용은 일반 이메일 폼에 그대로 입력했을 시 적용되지 않습니다.

 

 

• 1. 이메일 꾸미기

기본 이메일에서 제공하는 기능은 한계가 있기 때문에 HTML&CSS 태그를 사용해봤습니다.

 

디자인을 위해 사용한 HTML 태그

<div>태그 또는 <table>태그

: 홈페이지 화면을 디자인할 때와 같이 내용 단위로 묶어 관리합니다.

각자의 신념(?)에 맞게 표(table)태그나 div태그를 활용하면 되는데, 저는 몇 개의 이메일 폼을 열어본 결과 표 태그로 내용을 채우고 있는 것을 확인하고 구성을 표 단위로 만들었습니다.

 

링크 <a>태그를 활용하기

: 사용중인 드라이브나 서버가 있다면 다운받을 주소로 입력하고 버튼을 만들 수 있습니다. 서버에 올린 주소를 연결하면 클릭하는 순간 다운로드가 됩니다.

 

이미지<img> 태그

: 이미지 한 장으로 서비스 아이덴티티를 높여 줄 수 있습니다. 이미지를 삽입해 신뢰도있는 디자인을 합니다.

*링크를 서버에 올린 것

*만듦새를 위해 리소스를 조정해서 사용한 점/표라운드 값없이 리소스 이용

 

커스텀을 적용한 이메일 화면

 

 

 

• 2-1. 개발환경 상의 이유로 HTML 태그를 그대로 사용할 수 없다면?
  
  : 결론은 html을 인코딩해야한다.
  html을 작성 시에 “이 문서를 UTF-8로 인코딩합니다”라고 태그를 달아주는데 이 작업을 미리 해서 전달해 준 것입니다.
  
  

html 작성시 인코딩 방식을 지정해준다. 화면 중앙에 <meta charset="utf-8">를 보세요!

 

인코딩을 거치면 이런 형식으로 바뀝니다.

 

 

(참고)
인코딩(encoding)이란?
: 파일에 저장된 정보의 형태를 다른 것으로 변경하는 것을 말한다. 부호화(符號化)라고도 한다. 사람이 인지할 수 있는 형태의 데이터를 약속된 규칙에 의하여 컴퓨터가 사용하는 0과 1로 변환하는 과정을 통틀어 말하며 파일 압축이나 암호화 등의 목적으로 인코딩을 한다.

 

 

 

 

• 2-2.  한글을 유니코드로 변환하자

HTML 태그를 인코딩했지만 아직 한글만 변환되지 않은 경우가 있었습니다.

문자를 인코딩 해주는 방식인 유니코드로 한 번 더 변환해 주었습니다. 이 부분은 아래 블로그에서 해결했습니다.

 

바꾸고 싶은 언어를 넣어주세요. 출처:https://raisonde.tistory.com/

 

• 마지막, 완성된 문서를 개발자에게 전송합니다.
  - html 문서
  - 코드를 바로 가져다 쓸 수 있게 인코딩한 문서
  를 골라서 쓸 수 있게 전달했습니다.

 

 

(참고)

html태그 사용법

https://www.w3schools.com/tags/tag_img.asp
CSS로 폰트 디자인하기
https://www.w3schools.com/css/css_text.asp

CSS로 배경 색 넣기

https://www.w3schools.com/css/css_boxmodel.asp
a태그로 다운로드 링크 만들기

https://www.w3schools.com/html/html_links.asp

인코딩에 대해서 공부중인 어느 분의 글(정리해준 분 감사합니다)
https://freestrokes.tistory.com/25

한글 ↔ 유니코드 간편 변환기(만들어준 분 감사합니다)

https://raisonde.tistory.com/entry/%ED%95%9C%EA%B8%80-%E2%86%94-%EC%9C%A0%EB%8B%88%EC%BD%94%EB%93%9C-%EA%B0%84%ED%8E%B8-%EB%B3%80%ED%99%98%EA%B8%B0