권장 브라우저 안내

이 웹사이트는 Internet Explorer 9 버전 이상에서만 이용 가능합니다.
편리한 사이트 이용을 위하여 최신 브라우저로 업그레이드해주시기 바랍니다.

다크 모드로 보기 라이트 모드로 보기

저희와 함께 하시겠습니까?

프로젝트 의뢰는 아래로 문의 주시기 바랍니다.
websre@naver.com
Tel: 1800-9356

본문 바로가기

News

웹스리퍼블릭의 공지사항을 확인하세요.

Our News. Get the latest news from Websrepublic right now Our News. Get the latest news from Websrepublic right now Our News. Get the latest news from Websrepublic right now
News
March 16, 2018
Article

이메일도 반응형 디자인이 가능할까요?

본문

1*OQMFmTc5ItKLvP_wqSGKbA.png

 

이메일 뉴스레터를 제작하던 중 HTML 코드를 마주하게 된 경험이 있으신가요? 웹 기술과 HTML 코드에 익숙한 사람에게 조차도, 이메일의 HTML 코딩은 골치 아픈 주제입니다.

웹 표준이 자리잡기 시작하면서 웹에서의 HTML 코딩은 많은 발전이 있었고, 효율적인 코딩과 다양한 기술 구현이 가능해졌습니다.

하지만 이메일에서의 HTML 코딩은 상황이 많이 다릅니다.

웹 표준이 지켜지기 전의 뒤죽박죽이던 HTML 코딩의 세계, 그게 바로 지금의 HTML 이메일입니다.

 

HTML 이메일, 왜 필요할까요?

 

텍스트로만 구성된 이메일(Plain-text Email)로도 충분히 메시지를 전달할 수 있습니다. 그럼에도 이메일 마케팅을 할 때 HTML 이메일을 사용해야 하는 이유가 몇 가지 있습니다.

 

하이퍼링크. 다양한 요소에 하이퍼링크를 추가할 수 있습니다. 이미지나 버튼에 하이퍼링크를 추가하면 더 많은 사람을 랜딩페이지로 유도할 수 있습니다.

디자인. HTML 잘 디자인된 HTML 이메일은 당신의 브랜드를 더 잘 표현합니다.

위계. HTML 이메일에서는 콘텐츠의 위계를 만들 수 있습니다. 단락을 구분하거나 정렬을 다르게 하여 핵심적인 문구나 하이퍼링크를 쉽게 강조할 수 있습니다.

추적. HTML 이메일은 오픈과 클릭을 추적할 수 있습니다. 오픈과 클릭은 마케팅 성과를 측정하고 전략을 개선하는데 참고할 수 있는 중요한 데이터입니다.


이메일 코딩, 왜 다른가요?

 

웹 디자이너와 퍼블리셔에게 이메일 코딩은 골치 아픈 작업입니다. 테이블 기반의 레이아웃 디자인, 인라인 스타일, 논리적이지 않은 구조의 마크업, 각종 꼼수로 대표되는 90년대로 돌아가는 것과도 같죠. 이유가 좀 많습니다.


표준. 이메일에서 사용하는 HTML과 CSS는 웹 표준과는 거리가 멉니다. 이메일 클라이언트들 간에 표준도 없습니다.


이메일 클라이언트들. 아웃룩, Gmail 같은 이메일 클라이언트들은 모두 HTML과 CSS를 다른 방식으로 해석하고 표시합니다. 가끔은 정말 그 정도가 심해서 어떤 클라이언트에서는 문제 없이 표시되는 이메일이 다른 클라이언트에서는 제대로 표시되지 않기도 합니다.


꼼수. 정말 잘 디자인된 이메일들도 다양한 이메일 클라이언트에 대응하기 위해 각종 꼼수에 의존할 수 밖에 없습니다.


자바스크립트. 자바스크립트는 웹에서 사용되는 가장 인기있는 언어 중 하나입니다. 하지만 이메일 코딩의 세계에 자바스크립트의 자리는 없습니다. 보안 문제로 이메일 클라이언트들이 자바스크립트를 차단하기 때문이죠. 당연한 처사입니다. 하지만 이 때문에 이메일에서 인터랙션은 포기해야 합니다.


인라인 스타일(Inline styles). 웹에서는 본문의 구조(structure)를 정의하는 것과 스타일을 정의하는 것을 분리하여 더 쉽게 스타일을 관리할 수 있습니다. 하지만 대부분의 이메일 클라이언트들은 인라인 스타일(HTML 태그에 직접 스타일을 정의하는 방식)만 지원하기 때문에, 이메일에서는 어쩔 수 없이 인라인 스타일을 사용해야 합니다.

다행히 많은 사람들이 시대에 뒤떨어진 이메일 코딩 환경에서 나름의 해법을 찾기 위해 노력하고 있습니다. 앞서 경험한 사람들이 그 결과물을 더 많은 사람들과 나누기 위해 공개하기도 합니다.

 

Responsive Email Templates: 반응형으로 만든 다양한 유형의 이메일 템플릿을 무료로 다운로드 할 수 있습니다.

The Ultimate Guide to CSS: 이메일 클라이언트별로 지원하거나 지원하지 않는 태그들이 일목요연하게 정리되어 있습니다.

참고: Can Email Be Responsive?

 

출처 : 스티비 블로그(https://blog.stibee.com/이메일도-반응형-디자인이-가능할까요-73e16065582e)

Contact us

궁금하신 사항을 남겨주세요!
확인 후 빠른 답변 드리겠습니다.
  • T. websre@naver.com
  • M. 1800-9356
  • 예산을 선택해 주세요.
    • 100만원 이하
    • 300만원 이하
    • 500만원 이하
    • 700만원 이하
    • 1000만원 이하
    • 1000만원 ~ 2000만원
    • 2000만원 이상


디자인 샘플보기

상담톡
궁금한게 있으신가요? 무엇이든 물어보세요.