이메일 템플릿을 보낼때 생긴 문제점들

티스토리 뷰

Front-End/CSS

이메일 템플릿을 보낼때 생긴 문제점들

제이나린 2022. 11. 26. 11:00

728x90

회사에서 처음 배정받은 이메일 템플릿 제작을 진행한 적이 있었다.

근데 생각보다 간단하지만 수정사항이 많았었다.

찾아보아도 이 내용에 대한 정리가 별로 많지 않아 아쉬워 글을 쓰게 되었다.

언제까지나 이 이야기는 필자가 직접 겪은 과정을 회고하듯이 작성한 글임을 밝힌다.

1. body

일반적으로 퍼블리셔/프런트 분들이라면 body에서도 기본적인 스타일 값을 준다. 그래서 나도 평소처럼 body태그 안에 style값을 주려 아래와 같이 작성을 해보았었다.

<!-- index.html -->
<html>
  <body style="border: 1px solid red; margin: 0 auto; width: 500px">
    hello
  </body>
</html>

물론 웹상에서는 아무런 문제 없이 잘 보였다. 하지만 진짜 문제는 이메일로 보냈을 때 생겼다.

구글은 body 태그 안의 style값이 잘 들어왔다. 하지만 문제는 네이버였다.

네이버는 body 태그 안의 모든 스타일값을 무시하여 돌아왔다.

이렇게 body 태그 안의 스타일을 무시하게 되어 전체적으로 통일성을 위해서는 body태그 스타일보다는 div로 전체적으로 감싼 후 스타일을 적용해주는 게 가장 무난하다.

2. SVG

일반적으로 이미지의 경우, svg라면 직접 코드를 넣거나 클라우드에 저장하여 링크로 불러오는 등 두가지 방법이 있다.

먼저 필자는 svg를 코드를 직접 넣어야 한다는 미션을 받았는데 여러개를 넣을 경우 다음과 같은 에러가 발생하였다.

<div style="border: 1px solid red; margin: 0 auto; width: 900px">
    <svg>...</svg>
    <svg>...</svg>
    <svg>...</svg>
</div>

위 이미지 처럼 분명 다른 svg를 넣었음 애도 불구하고, 같은 SVG로 통일이 되어 보이는 현상이 발생하였다.

이 원인은 아래 코드를 간략하게 정리한 것을 보고 설명을 하려 한다.

<div style="border: 1px solid red; margin: 0 auto; width: 900px">
    <svg>
    	<rect width="257.48" height="300" fill="url(#pattern0)" />
        <defs>
        	<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
            	...
            </pattern>
            ...
        </defs>
    </svg>
    <svg>
    	<rect width="257.48" height="300" fill="url(#pattern0)" />
        <defs>
        	<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
            	...
            </pattern>
            ...
        </defs>
    </svg>
    <svg>
    	<rect width="257.48" height="300" fill="url(#pattern0)" />
        <defs>
        	<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
            	...
            </pattern>
            ...
        </defs>
    </svg>
</div>

rect 태그의 fill 속성값과 pattern 태그의 id값에 주목을 해야 한다. 여러 SVG를 넣게 되면 이 값이 모두 통일되는 것을 확인이 가능한데, 해당 코드는 유일해야 하는 값이기에 이 부분을 수정해주어야 한다.

이전까지는 svg를 따로 저장하여 이러한 문제가 있는지도 모르고 지나서 이번에 처음 알게 되었다.

그래서 SVG안의 fill과 id는 동일하되, 각각의 SVG는 값이 고유해야 하여 다르게 설정하게 되면 아래 코드처럼 된다. 해당 값은 자유롭게 수정이 가능하지만, fill과 id는 반드시 같아야 한다.

<svg>
	<!-- 중략 -->
    <rect fill="url(#pattern0)" />
    <pattern id="pattern0"></pattern>
</svg>
<svg>
	<!-- 중략 -->
    <rect fill="url(#pattern1)" />
    <pattern id="pattern1"></pattern>
</svg>
<svg>
	<!-- 중략 -->
    <rect fill="url(#pattern2)" />
    <pattern id="pattern2"></pattern>
</svg>

그럼 아래처럼 잘 보이는 것을 확인할 수 있다.

사실 이렇게 하면 문제 없이 잘 되지만, 결국은 클라우드에 svg를 저장하여 올려서 사용했다. 하지만 그 과정에서도 svg는 일부 거부를 당하여 png 파일로 넣어 사용했다.

3. Flex

플랙스는 정렬을 위해 자주 쓰이는 style이라 아무 생각 없이 코드를 작성하였지만, 메일로 보냈을 때에는 다르게 보인 몇 가지가 있었다.

네이버는 display: flex외 모든 코드가 아무 문제없었다.

문제는 지메일에 있었다.

display: flex까지는 적용이 되지만, 그 외에 justify-content, align-items 등 이런 부가적인 스타일은 전혀 적용이 되지 않았다.

4. position

영수증을 이메일로 보내야 하는데 flex는 되지 않았다. 그럼 position은 되지 않을까? 해서 아래 코드처럼 작성하였다.

<html>
  <body>
      <h1>position</h1>
      <div style="position: relative">
        <div style="background-color: red; width: 200px; height: 200px"></div>
        <div
          style="
            background-color: purple;
            width: 200px;
            height: 200px;
            position: absolute;
            right: 0;
            top: 0;
          "
        ></div>
      </div>
    </div>
  </body>
</html>

크롬 웹상에서는 아무런 문제가 없었고, 네이버 메일의 경우 완전히 빈 값으로 처리가 되었다.

위의 코드처럼 원래대로라면 우측 끝에 보라색 상자가 나와야 하지만, 메일로 오면 빈 값으로 처리가 되었다. 결국은 position은 잘 되지 않는다는 의미이다.

지메일의 경우 position, right, top값이 완전히 사라진 상태로 나왔다. 결론은 양쪽 다 position이 적용이 되지 않지만, 이 부분은 확인하면서 몇 가지 테스트를 해봐야 할 것이다.

그래서 사용한 것은 table을 쓰게 되었다. 영수증의 경우 우측 정렬을 하고 싶은 경우에는 flex와 position이 아닌 table로 text-align값을 활용해야 한다.

그 외 간단한 문제점들은 아래와 같다.

width

구글에서는 max-width값이 적용이 되고 네이버에서는 width값이 적용이 된다.

a 태그 target 속성

이메일 안에서는 a태그의 target설정에 큰 의미가 없다. 기본적으로 메일에서 새창으로 여는 구조로 되어있다.

위 내용을 총 정리하면 아래와 같다.

	네이버	구글
다른점	- body태그 안에 style 적용이 안됨 - flex에 관련된 스타일은 모두 적용 - max-width는 적용되나, width는 미적용	- body 태그 style은 문제없이 적용됨 - display: flex적용은 되나 그 외 스타일 미적용 - width값은 적용되나, max-width값은 미적용
동일한점	- 연속적인 SVG값은 같은 SVG로 연출됨 - position이 적용 안됨(일부 표현되는 것이 달라 직접 테스트를 해야함) - a 태그에 target 속성은 별 의미 없이 새창으로 열기로 됨

이렇게 오늘은 이메일 템플릿을 보내면서 생긴 문제점들을 정리하게 되었다.

이후에 메일 탬플릿을 보낼 일이 과연 있을지는 모르겠지만

이후에도 메일 템플릿 제작이 생긴다면 이 글이 도움이 되기를 바라면서...

오늘도 이 글을 마친다.

첫 업데이트 : 22. 11. 26

728x90

'Front-End > CSS' 카테고리의 다른 글

Error: Node Sass version 6.0.0 is incompatible with ^4.0.0. (0)	2022.03.19
word-break: 줄바꿈 관련 CSS (0)	2021.12.25
폰트 그라데이션을 CSS로 적용하는 방법 (0)	2021.12.18
내용이 많을 때 생략하는 CSS (0)	2021.12.04
CSS Coding Convention에 대한 정리 (0)	2021.11.13

250x250

공지사항

Who are you?

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2024/05 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

글 보관함

JNarin Development Story

티스토리 뷰