서명을 만들자.

새로운 임무

새로 Google Workspace를 세팅하고, 구성원들의 메일을 생성해 전달해 준 뒤 한동안 관련된 일이 없다가 오늘 새로운 민원이 접수되었다.

바로 메일의 서명을 HTML로 만들고 싶다는 것! 살면서 메일에 들어있는 서명을 한 번도 눈여겨본 적 없었기에 어떻게 만들어지는 건지 궁금해한 적도 없었는데, 막상 만들려니 제대로 고역이었다.

위대한 여정의 시작

GMAIL의 서명을 HTML로 만드는 것은 생각보다 많은 제약이 있다. 비교적 최근에 사용되기 시작한 HTML 태그들은 사용하기 힘들고, 파일의 크기가 크면 곤란하고, SVG도 사용할 수 없다. 게다가 HTML 코드를 그대로 사용할 수도 없고, 작성한 HTML 페이지를 로컬 환경에서 실행시켜 전체 선택 후 복사, 그리고 서명란에 직접 붙여넣기 해야 한다.

그리고 처음에 전달받은 HTML 서명란에 집어넣었을 때 서명이 너무 길다는 이유로 등록이 되지 않았다.

헤딩하기

  • 서명이 너무 길다는 것은 아주 모호한 오류이다. 그리고 서명을 입력하는 텍스트 에어리어가 너무 작고 사이즈 조절도 안되는 극악한 환경이기 때문에 뭐가 얼마나 긴건지 확인할 수도 없었다.
  • 첫 번째 HTML이 들어가지 않는 이유는 짐작컨대 iframe 엘리먼트가 들어가있기 때문이었을 것 같다. 아마 처음 서명을 만든 3rd party 서비스에서 만든 서명을 그렇게 전달받았으리라.
  • 몇 번의 검색 끝에, 서명을 가장 단순한 구조로 만들어야 한다는 것을 알게되었다. table 태그를 사용해 만들고, 스타일은 인라인으로 필요한 것만!
  • 로컬에 에디터를 켜고 <html>.. <body>.. <table>… 순서대로 써 나가기 시작했다.

다행히 직접 작성한 Vanilla HTML 코드는 잘 적용이 되었다!

2차 시기

서명에는 필연적으로 이미지가 들어가기 마련인데, 이미지는 반드시 외부 어딘가에 올라와있어야 했다. 나는 S3에 업로드 해두었고, 처음에는 잘 반영되는 것처럼 보였다. (SVG를 PNG로 변환한 것은 사소한 일이다.)

그런데 로고의 배경을 투명하게 해두었음에도 불구하고 서명에는 적용되지 않는 이슈가 있었다. 알고보니 배경이 있는 이미지에서 배경이 없는 이미지로 바꾸면서 S3에 동일한 오브젝트명으로 업로드해두었고, 이를 캐싱하고있던 서명란에서는 바뀐 것을 눈치채지 못했던 것이다. 다행히 새로운 이미지 이름을 변경하고 다시 HTML을 복붙하니 잘 동작했다.

마치며

GMAIL 서명, 한 번 해보니 어떻게 해야하는지 좀 알긴 하겠다만 HTML, CSS 지식 부족으로 맨땅에 헤딩을 좀 오래 했던 것 같다. 기회가 된다고 해도 다시 세팅하고 싶지는 않다..