뉴스레터 기본과 HTML로 뉴스레터를 만드는 방식에 이어 이미지매핑 방식으로 뉴스레터를 만드는 방법을 소개하면 다음과 같다. 이미지의 좌표인 이미지 맵을 활용하여 url을 연결하는 게 핵심이다.
Contents
뉴스레터를 담는 이미지를 하나로 만들어라.
포토샵, 일러스트, 인디자인 등 어떤 디자인 프로그램이든 상관없다. 한 번 만든 이미지 템플릿은 계속해서 사용이 가능하므로, 처음에 이미지 템플릿을 만들 때 구조를 잘 설계해야 한다. 이후에는 이미지 템플릿에서 텍스트와 사진만 교체해서 활용할 수 있으므로, 이미지 템플릿만 제대로 구축해놓으면 뉴스레터 제작이 쉬어진다.
뉴스레터 HTML 기본 양식에 이미지 추가하기
뉴스레터를 담은 이미지를 완성했으면 이메일 뉴스레터의 기본 HTML 양식에 이미지를 추가해야 한다. Html 코딩을 활용해서 이메일 뉴스레터를 만드는 방식에서 사용한 기본 양식을 그대로 사용하면 된다. 하단의 링크로 연결된 html 뉴스레터에는 기본 양식 및 html 코딩을 통해 이메일 뉴스레터를 만드는 방법이 담겨 있다.
기본 양식인 table 구조에서 <img src="이미지주소(링크)" 부분을 찾아 이미지 주소를 넣어주면 된다. 단, 이미지는 서버에 올려져 있어야 하고 https을 지원해야 한다. 이 부분은 이메일 뉴스레터 기본에서 언급한 바 있다.
태그가 지닌 속성들을 제외하고 구조를 최대한 간단히 표현하면 아래와 같다. img 태그 부분에 서버에 저장한 이미지의 url를 넣어주면 된다.
<table>
<tr> <td>
<table>
<tr> <td>
<img src = "https://res.cloudinary.com/decqqm3ba/image/upload/v1656113975/sphinx/newletterinnerCover_dzcjro.png" />
</td></tr>
</table>
</td></tr>
</table>
이미지의 특정 구역에 사이트 링크 추가하기
HTML 이메일의 이미지의 특정 구역에 링크를 추가하는 방법은 이미지맵 태그를 추가하면 되는데, 이 작업을 하려면 위에서처럼 html 이메일에 이미지의 url를 넣어야 한다. 이미지를 넣은 <img src="이미지주소(링크)" 그 뒤에 이미지의 특정 좌표를 연결하는 이미지 맵 코드를 추가한다.
※ 코드 설명
<img src="이미지주소" usemap="#맵이름">
<map name="맵이름" id="맵이름">
<area shape="영역모양" coords="좌표" href="이동할 사이트 주소">
※ 코드 예시
<img src="https://res.cloudinary.com/decqqm3ba/image/upload/v1656113975/sphinx/newletterinnerCover_dzcjro.png" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="46,519,278,632" href="http://blog.naver.com/keit_newtech" />
</map>
이미지 매핑을 위한 좌표 찾기
위의 코드 설명 및 코드 예시에서 이미지주소와 맵이름, 영역모양, 좌표, 이동할 사이트 주소 등에 해당되는 정보를 넣어줘야 한다.
맵이름
우선 맵이름은 이미지맵이 여러 개가 있을 경우, 각각의 이미지맵 코드를 구분하기 위해 필요한것이므로 map, map1, map2 등으로 원하는 맵이름을 넣어준다.
코드 설명에서 맵이름이 들어가는 usemap="#맵이름">
<map name="맵이름" id="맵이름"> 에는 모두 똑같은 맵이름을 넣어준다.
<img src="https://서버 주소/이미지.jpg" usemap="#map1">
<map name="map1" id="map1">
영역 모양
영역모양은 이미지 안에서 클릭 시 링크로 연결되는 특정 구역의 모양을 물어보는 것인데 크게 rect(직사각형), circle(원), poly(다각형: 직사격형이나 원이 아닌 삼각형, 오각형 등)이 있다. 일반적으로 이메일뉴스레터에서는 영역모양 자리에 주로 직사각형 모양인 “rect”이 사용된다.
<area shape="rect" coords="좌표" href="이동할 사이트 주소1">
좌표
이미지 안에서 특정 구역의 좌표는 그림판이나 포토샵 등에서 확인한다. 위에서 직사각형 모양인 “rect”으로 영역모양 자리를 설정했으므로, 링크를 연결할 부분의 좌상 좌표와 우하 좌표만을 확인하면 된다.
그림판이나 포토샵에서 원하는 위치로 마우스를 가져가면 그곳의 좌표가 나온다. 이렇게 찾은 좌표를 coords="좌표”의 “좌표” 자리에 연속으로 써주면 된다. 즉, 링트를 추가할 네모 구역의 좌표는 좌상 좌표, 우하 좌표가 된다.
<area shape="rect" coords="72,300,430,300" href="이동할 사이트 주소">
뉴스레터 이미지에서 링크를 연결할 곳을 직사각형 형태로 선택한다.
이후 사각형의 좌측 위로 마우스를 가져가면 나오는 좌표, 즉 좌상 좌표이다. 예시 46, 519
같은 방식으로 우측 아래로 마우스를 가져가면 나오는 좌표, 즉 우하 좌표이다. 예시 278, 632
이렇게 나온 좌표를 순서대로 써 주면 된다. coords="46,519,278,632"
뉴스레터에 대해 더 알아볼 내용
