# 이메일 발송용 HTML Table 코딩 Rules > Gmail, Naver Mail, Outlook 등 주요 이메일 클라이언트 호환 기준 > 최종 업데이트: 2026-04-07 --- ## 왜 이메일 HTML은 특별한가? 이메일 클라이언트는 웹 브라우저와 다르게 동작한다. | 클라이언트 | 렌더링 엔진 | 주요 제한 | |-----------|------------|---------| | Gmail (웹) | WebKit 기반 | `` 스타일 일부 제거, `

``` #### DON'T: 불완전한 골격 ```html

내용

``` --- ### Rule 2: 레이아웃 - Table 구조 필수 이메일에서는 **모든 레이아웃을 ``로 구성**한다. `div`, Flexbox, CSS Grid는 Outlook에서 동작하지 않는다. #### 열 분할 패턴 ##### DO: 2열 레이아웃 (테이블 중첩) ```html

왼쪽 콘텐츠

오른쪽 콘텐츠

``` ##### DO: 헤더 / 본문 / 푸터 섹션 구조 ```html

``` ##### DON'T: div 또는 Flexbox 사용 ```html

왼쪽

오른쪽

왼쪽

오른쪽

``` --- ### Rule 3: 인라인 스타일 필수 (CSS 클래스 금지) Gmail 앱과 일부 이메일 클라이언트는 ``의 `

왼쪽 콘텐츠

오른쪽 콘텐츠

``` #### 모바일/데스크탑 전용 콘텐츠 ```html 데스크탑 전용 콘텐츠 모바일 전용 콘텐츠 ``` --- ### Rule 10: 구분선 및 장식 요소 CSS `border`나 `

`은 이메일 클라이언트마다 다르게 렌더링된다. 테이블 셀로 구분선을 만든다. #### DO: 테이블 기반 구분선 ```html

``` #### DON'T: hr 태그 또는 border 속성으로 구분선 ```html

내용 ``` --- ### Rule 11: 텍스트 이메일 대비 (접근성) HTML 이메일은 반드시 텍스트 버전과 함께 발송한다(멀티파트 MIME). 이미지 차단 시에도 내용 전달이 가능해야 한다. - 모든 이미지에 의미 있는 `alt` 텍스트 작성 - 버튼/CTA는 텍스트 링크 형태로도 제공 - 중요 정보를 이미지에만 담지 않는다 (이미지 차단 시 소실) --- ### Rule 12: Outlook 전용 조건부 주석 패턴 ```html

``` --- ## 금지사항 요약 (Anti-patterns) | 금지 항목 | 대안 | |----------|------| | `display: flex` / `display: grid` | `` 레이아웃 | | `position: absolute/fixed` | 테이블 레이아웃으로 배치 | | `background-image` (배경) | `bgcolor` + `background-color` | | `border-radius` (Outlook) | VML `` | | 3자리 HEX (`#fff`) | 6자리 HEX (`#ffffff`) | | `rgb()` / `rgba()` / `hsl()` | 6자리 HEX | | 웹 폰트 (`@font-face`, Google Fonts) | 시스템 폰트 스택 | | `em` / `rem` 단위 | `px` 단위 | | `margin` (table/td) | `padding` + spacer td/tr | | `

` 구분선 | bgcolor td (height: 1px) | | 이미지 상대 경로 | 절대 경로 (https://) | | `` display 미설정 | `style="display: block;"` | | CSS 클래스만으로 스타일 | 인라인 스타일 + 클래스 병행 | | `!important` 남용 | 클라이언트별 조건부 주석 활용 | --- ## 자주 하는 실수 TOP 5 ### 1. Outlook에서 버튼이 사각형으로 표시됨 `border-radius`는 Outlook Word 렌더러에서 무시된다. VML 조건부 주석으로 반드시 대응한다. (Rule 7 참조) ### 2. 이미지가 차단되었을 때 레이아웃 붕괴 이미지에 `width`, `height`, `display: block`을 모두 설정하지 않으면, 이미지 차단 시 레이아웃이 무너진다. ```html

``` ### 3. Outlook에서 줄 간격이 너무 좁거나 넓음 Outlook은 `line-height` 기본값이 다르다. 모든 ` ``` ### 4. Gmail 앱에서 스타일이 전혀 적용되지 않음 Gmail 앱은 `` `

` 에 `line-height`를 명시하고 `mso-line-height-rule: exactly`를 추가한다. ```html

텍스트 내용