오늘 회사에서 오전부터 디자이너와 마케터가 계속 자리를 오가며 뭔가를 열심히 수정하고 있었다.

마케터가 바로 나의 건너편 자리인 관계로 가끔식 들려오는 얘기를 들을 수 있었다.

별로 귀담아 듣지 않았었는데, 퇴근 시간이 가까워질때까지 문제가 해결되지 않자 디자이너가 나에게 와서 문의를 했다.

문제인즉슨, html형식으로 보내는 마케팅 메일의 디자인이 이번에 개편이 되어서 테스트를 하고 있는데, 다른 웹메일등에서는 잘 보여지는데, 유독 Outlook에서는 메일 하단에 하얀 가로줄이 생긴다는 것이었다.

디자이너는 이 문제가 메일 내용의 길이를 줄이면 가로줄이 안생기는 것으로 보아,  길이가 길어서 그런것 같다고 하였다.

좀 납득이 되지 않았지만, 현상을 보니 정말이었다.

그래서 Outlook의 html 렌더링 엔진에 대해서 찾아보기 시작하였다.

결국 알아낸 결론은,


1. Outlook 2007 이상은 MS-Word의 엔진을 사용하고 Outlook 2003은 IE의 엔진을 사용한다.

2. Outlook 에서의 html 렌더링은 상당히 많은 제약이 따른다.
    (MSDN에서 자세히 설명해 준다 http://goo.gl/4L6c, http://goo.gl/BF9sS)
 

3. 그리고... html 메일에서 레이아웃을 잡기 위해 필수로 사용하게 되는 Table 의 길이가 23.7inch (약 1,790pixel)보다 크면 자동으로 구분줄을 삽입한다!! (이것이 바로 예의 하얀 가로줄이다)


하얀 가로줄이 생기는 것에 대한 해결책은 몇가지가 있는것 같은데, 가장 확실한 것은 가로줄이 생길만큼의 긴 Table을 만들지 않는 것이다.

다행히도 디자이너가 코딩한 결과물은 하나의 큰 테이블이 컨텐츠를 담은 여러개의 테이블을 감싸고 있는 형태였다.

그래서 바깥쪽의 긴 테이블을 빼고 컨텐츠 테이블만으로 구성을 하자 Outlook에서의 하얀 가로줄이 나오는 현상이 사라졌다.



 
블로그 이미지

설기아빠

,