noimage

웹 표준으로 메일링 작업하기

회사에서 새로운 칼럼 메일 서비스가 생겨서 디자인과 코딩을 했다.

http://kukie.net/resources/design/mail_service/default.html
http://kukie.net/resources/design/mail_service/default_noDTD.html

로컬 파일 일때는 몰랐는데 테스트 메일 발송을 하고 나서 보니 두가지 문제점을 발견할 수 있었다.

문제1)
DTD가 맞지 않는다.
문제2)
CSS가 불러와지지 않는다.

그냥 DTD를 뺐다

코딩 자체는 모두 표준에 맞게 했고, validator도 완벽하게 통과했지만, 웹메일 서비스를 하는 많은 웹사이트들이 DTD를 선언하지 않고 있기 때문에, 메일 자체에는 아무리 DTD를 넣어봤자 적용되지 않았다.
우리나라 메일만 그런가 싶어서, gmailyahoo.com의 메일서비스를 살펴봤는데, 마찬가지로 메일을 표출하는 곳에서는 DTD를 선언하지 않고 있었다.
대부분의 사이트가 이렇게 하는 걸로 봐서는 뭔가 이유가 있는 것 같다. (개발이나 정책과 연관되는 이유라면 나는 잘 모르겠다.)
아무튼, 이유는 모른채로 일단 DTD를 빼주고, DTD가 빠짐으로서 발생하는 margin과 padding등의 문제를 조금씩 수정해줬다.

CSS를 import로 처리 했던 것을 Link 형식으로 바꿨다

CSS는 여태 쓰던대로 @import를 사용해서 불러들였는데, 다른 곳의 경우 별다른 문제가 발생하지 않았고, 유독 Korea.com에서 문제가 발생했다.
@를 인식하지 못하는 것 같아서
<link rel="stylesheet" href="file.css" type="text/css" />로 바꿔주자 잘 적용이 되었다.

최종 파일 보기

DTD가 포함된 파일 (최초 작성)
DTD가 없는 파일 (추후 수정)
(칼럼 내용은 임의로 수정하였음)

안타까운 점

칼럼의 기사입력기를 통해 텍스트가 입력되고, 실제 기사를 표출해 주는 문서에는 p(paragraph)가 쓰이는 대신 두번의 br이 사용된다.
그리고, 표출된 기사에 걸리는 링크에 오류가 많다.(&같은 것이라든지..)

꼬릿말

기술적인 부분에 대해선 잘 알지 못하기 때문에 그냥 넘겨버린 것들이 있어서 아쉽고…
이메일에서의 코드는 단독 문서임에도 불구하고, 현재의 메일 시스템에서는 단독 파일의 HTML처럼 생각하면 안되는구나..!

  • 웹표준을 지키고자 하는 사람들 사이에서도 위지윅과 더불어 고민거리로 남는 것 중 하나가 바로 웹메일 문제입니다.

    일단 다른 서비스에서 표시되기 때문에 DTD 적용이 불가능하고, 그나마 iframe 형태로 보여주는 곳이라면 괜찮지만 그렇지 않고 내용을 바로 보여주는 경우는 html, head 태그 등도 쓸 수 없겠지요.

    웹메일로 보내지는 것에는 모든 스타일을 inline으로 처리한다든가 하는 방법도 있겠지만 바람직한 건 아니겠죠.

    그리고, 기사 에디터 같은 곳에서 br로 입력되는 문제는 현재 태터툴즈 1.0 개발팀에서도 겪는 문제라고 합니다. 웹브라우저에서 실행되는 위지윅 에디터가 실은 iframe의 design mode 속성을 이용해서 browser-depedent하게 구현되는 것인데, 이때 불여우나 IE 모두 엔터를 치면 br로 생성해준다고 하네요.

  • 한개의 메일은 완전히 독자적인 페이지 입니다. 이것을 제대로 인식 못하고 그냥 td안에 끼워 넣는 식으로 처리하는 웹메일들이 잘못처리하는 거라고 생각합니다. 문서의 head등이 완전 무시 되지요. 이럴때가 바로 iframe을 쓰기에 딱인데 다른데는 iframe열심히 쓰면서 이런데는 또 안쓰죠. 메일을 웹페이지 안에서 보여줄때에는, 메일은 독자적인 외부 문서 이기 때문에 iframe이나 object를 사용해서 보여줘야 한다고 생각합니다.

    ps.
    주소는 address 태그로… 🙂

  • 신현석: 그런데 iframe을 사용하는 건 알겠는데요, object를 사용하는 건 어떻게 하는 건가요? 그리고 iframe이 XHTML 1.0 Strict에서는 사용되지 않는데, 그런 경우는 또 어떻게 처리하는지 알고 싶습니다.

  • kirrie

    그런데 html을 지원하지 못하는 이메일 클라이언트들 (ex 리눅스 콘솔에서의 이메일 읽기나, pda에서 이메일 읽기) 에서 받는 웹메일, 즉 html코드들이 잔뜩 들어있는 것들은 정말 괴롭습니다. 가급적이면 html 버젼과 text버젼 두가지를 선택적으로 발송해주었으면 좋겠는게 심정이지만… (그렇다고 제가 그런 환경이라는건 아닙니다.)

  • daybreaker:
    텍스트 패턴을 써보니 엔터값이 두번 입력되면 p로 감싸주던데(위지윅 에디터는 아니지만 ^^; ), 일반적인 위지윅에디터는 그런것을 적용하는 것이 힘든가봐요? 기술적인 문제라 뭐라 할말이 없어요..T_T

    현석:
    전 독자적인 페이지라고 생각하고 작업했었어요. 메일로 발송할거면서 미리 메일 환경에 대해 체크하지 못 한 오류도 있었지만..
    (address는 깜박..T_T;)

    kirrie:
    그런 환경에서는 HTML코드가 들어있으면, HTML코드 자체를 보여주나요? 전 사실 이미지는 한 개정도(로고가 들어가는 영역 등) 들어가고 나머지는 링크를 포함한 텍스트로 되어있는게 읽기 편해서 좋아요.

  • kukie:textarea로 들어온 값을 체크해서 p를 넣어주는 것 같아요. 저도 WP에서 엔터 두번을 p로 바꿔주는 것을 보고 신기해 했었어요. 기술적으로 어려운 것은 아닌 듯.
    daybreaker:
    <object data="myMail.html" type="text/html"></object> 와 같이 하면 mime-type을 정해서 문서를 embed 할 수 있습니다. 이미지를 넣을 때에는 <object data="logo.png" type="image/png"></object>와 같이 하면 되고요.
    테스트는 안해봤습니다. -o-;
    kirrie:썬더버드에서는 메일에 HTML을 사용할 때에 상대방의 클라이언트가 뭔지 모를 경우, HTML과 TEXT두가지로 모두 보내는 것을 선택 할 수 있게 하더군요. 아쉽게도 대부분의 사이트들은 HTML만 보내지만요. HTML로 메일을 보낼때에도 text/plain으로 뽑아서 두개를 같이 보내주면 식으로 하면 좋을 것 같군요.

  • 그러고보니 전 textpattern만 보고 정작 쓰고 있는 wp에선 보지도 않았었네요 🙁
    WP도 p.. 정말로 기술적으로 어려운 것은 아닌가봐요..
    그냥 br로 처리하는게 조금 더 쉽기 때문에 br로만 하는 것일까…

    (임의로 코멘트를 수정하였습니다.)

  • she

    autoP태그 넣는 방법은 여기에 가면 있더군요.

  • 개발자 입장에서… br만 해주는 건 그게 관습적으로 했기에 그렇습니다. 함수 하나면 그냥 끝이거든요. 두 칸을 p로 처리해주는 건 정말 간단합니다. 하지 않는 이유는 단순히.. 여태까지 전자의 방식으로 해왔기 때문입니다.

    저도 워프가 두칸 엔터를 p로 해주는 건 she님의 블로그에서 처음 알았는데.. 괜찮은 방식 같습니다. 단지 br보다는 넣어줘야할 코드가 조오금 더 들어갈 듯 하고.. 혹시 있을지 모를 오동작 같은 걸 고려할 필요가 약간 있을지도. 구현 자체는 매우 쉽습니다.