Outlook HTML 폰트 적용
Outlook 2013 이메일 HTML 폰트 적용 완벽 가이드
서론
Outlook 2013은 HTML 이메일 렌더링에서 가장 까다로운 클라이언트 중 하나입니다. Word 렌더링 엔진을 사용하기 때문에 웹 브라우저와는 다른 방식으로 HTML과 CSS를 처리합니다. 특히 폰트 적용에 있어서는 특별한 주의가 필요합니다. 이 글에서는 Outlook 2013에서 폰트를 안정적으로 적용하는 방법을 다루겠습니다.
1. Outlook 2013의 폰트 렌더링 특성
1.1 Word 렌더링 엔진의 제약사항
Outlook 2013은 Microsoft Word의 렌더링 엔진을 사용하므로 다음과 같은 제약이 있습니다:
- 웹 폰트 미지원: Google Fonts, 웹 폰트 등이 작동하지 않음
- CSS 제한: 많은 CSS 속성이 무시됨
- 인라인 스타일 필수:
<style>태그보다 인라인 스타일이 더 안정적 - 시스템 폰트만 지원: Windows에 설치된 폰트만 사용 가능
1.2 지원되는 폰트
Outlook 2013에서 안정적으로 작동하는 폰트:
- Arial
- Calibri
- Cambria
- Comic Sans MS
- Courier New
- Georgia
- Impact
- Tahoma
- Times New Roman
- Trebuchet MS
- Verdana
- 한글: 맑은 고딕, 돋움, 굴림, 바탕
2. 기본 폰트 적용 방법
2.1 인라인 스타일 사용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<!-- 인라인 스타일로 폰트 지정 -->
<p style="font-family: Arial, sans-serif; font-size: 14px; color: #333333;">
안녕하세요. 이메일 내용입니다.
</p>
</body>
</html>
2.2 테이블 기반 레이아웃
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<table width="600" cellpadding="0" cellspacing="0" border="0" style="font-family: Arial, sans-serif;">
<tr>
<td style="font-size: 16px; color: #000000; padding: 20px;">
이메일 내용
</td>
</tr>
</table>
</body>
</html>
3. 폰트 패밀리 지정 방법
3.1 폰트 스택 (Font Stack)
<!-- 영문 폰트 -->
<p style="font-family: Arial, Helvetica, sans-serif;">
Arial 폰트로 표시됩니다.
</p>
<!-- 한글 폰트 -->
<p style="font-family: '맑은 고딕', 'Malgun Gothic', Arial, sans-serif;">
맑은 고딕 폰트로 표시됩니다.
</p>
<!-- 한영 혼용 -->
<p style="font-family: '맑은 고딕', 'Malgun Gothic', Arial, sans-serif;">
한글은 맑은 고딕, 영문은 Arial로 표시됩니다.
</p>
3.2 VML을 활용한 폰트 적용
<!-- Outlook 전용 VML 스타일 -->
<!--[if mso]>
<style type="text/css">
body, table, td {
font-family: Arial, sans-serif !important;
}
</style>
<![endif]-->
4. 폰트 크기 지정
4.1 픽셀 단위 사용
<!-- 픽셀 단위가 가장 안정적 -->
<p style="font-size: 14px;">
14픽셀 크기의 텍스트
</p>
<h1 style="font-size: 24px; font-family: Arial, sans-serif;">
제목 텍스트
</h1>
4.2 포인트 단위 사용
<!-- 포인트 단위도 지원 -->
<p style="font-size: 12pt;">
12포인트 크기의 텍스트
</p>
4.3 폰트 크기 예시
<table width="600" cellpadding="0" cellspacing="0" border="0" style="font-family: Arial, sans-serif;">
<tr>
<td style="font-size: 24px; font-weight: bold; padding: 10px;">
제목 (24px)
</td>
</tr>
<tr>
<td style="font-size: 16px; padding: 10px;">
부제목 (16px)
</td>
</tr>
<tr>
<td style="font-size: 14px; padding: 10px;">
본문 (14px)
</td>
</tr>
<tr>
<td style="font-size: 12px; padding: 10px;">
작은 텍스트 (12px)
</td>
</tr>
</table>
5. 폰트 스타일 적용
5.1 굵게 (Bold)
<!-- 방법 1: font-weight 사용 -->
<p style="font-family: Arial, sans-serif; font-weight: bold;">
굵은 텍스트
</p>
<!-- 방법 2: <strong> 태그 사용 -->
<strong style="font-family: Arial, sans-serif;">
굵은 텍스트
</strong>
<!-- 방법 3: <b> 태그 사용 -->
<b style="font-family: Arial, sans-serif;">
굵은 텍스트
</b>
5.2 기울임 (Italic)
<!-- 방법 1: font-style 사용 -->
<p style="font-family: Arial, sans-serif; font-style: italic;">
기울임 텍스트
</p>
<!-- 방법 2: <em> 태그 사용 -->
<em style="font-family: Arial, sans-serif;">
기울임 텍스트
</em>
<!-- 방법 3: <i> 태그 사용 -->
<i style="font-family: Arial, sans-serif;">
기울임 텍스트
</i>
5.3 밑줄 (Underline)
<p style="font-family: Arial, sans-serif; text-decoration: underline;">
밑줄 텍스트
</p>
<!-- 또는 <u> 태그 -->
<u style="font-family: Arial, sans-serif;">
밑줄 텍스트
</u>
6. 한글 폰트 적용
6.1 맑은 고딕 적용
<table width="600" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="font-family: '맑은 고딕', 'Malgun Gothic', Arial, sans-serif; font-size: 14px;">
맑은 고딕 폰트로 표시되는 한글 텍스트입니다.
</td>
</tr>
</table>
6.2 돋움 폰트 적용
<p style="font-family: '돋움', Dotum, Arial, sans-serif; font-size: 14px;">
돋움 폰트로 표시되는 텍스트입니다.
</p>
6.3 한영 혼용 폰트 스택
<!-- 한글은 맑은 고딕, 영문은 Arial -->
<p style="font-family: '맑은 고딕', 'Malgun Gothic', Arial, Helvetica, sans-serif; font-size: 14px;">
한글 텍스트와 English text가 함께 표시됩니다.
</p>
7. 완전한 이메일 템플릿 예제
7.1 기본 템플릿
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if mso]>
<style type="text/css">
body, table, td {
font-family: Arial, sans-serif !important;
}
</style>
<![endif]-->
</head>
<body style="margin: 0; padding: 0; font-family: Arial, sans-serif;">
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color: #f4f4f4;">
<tr>
<td align="center" style="padding: 20px 0;">
<table width="600" cellpadding="0" cellspacing="0" border="0" style="background-color: #ffffff;">
<!-- 헤더 -->
<tr>
<td style="padding: 30px 20px; background-color: #333333;">
<h1 style="margin: 0; font-family: Arial, sans-serif; font-size: 24px; color: #ffffff; font-weight: bold;">
이메일 제목
</h1>
</td>
</tr>
<!-- 본문 -->
<tr>
<td style="padding: 30px 20px;">
<p style="margin: 0 0 15px 0; font-family: Arial, sans-serif; font-size: 14px; color: #333333; line-height: 1.6;">
안녕하세요. 이메일 본문 내용입니다.
</p>
<p style="margin: 0; font-family: Arial, sans-serif; font-size: 14px; color: #333333; line-height: 1.6;">
추가 내용을 여기에 작성합니다.
</p>
</td>
</tr>
<!-- 푸터 -->
<tr>
<td style="padding: 20px; background-color: #f4f4f4; text-align: center;">
<p style="margin: 0; font-family: Arial, sans-serif; font-size: 12px; color: #666666;">
© 2025 회사명. All rights reserved.
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
7.2 한글 폰트 템플릿
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<!--[if mso]>
<style type="text/css">
body, table, td {
font-family: '맑은 고딕', 'Malgun Gothic', Arial, sans-serif !important;
}
</style>
<![endif]-->
</head>
<body style="margin: 0; padding: 0; font-family: '맑은 고딕', 'Malgun Gothic', Arial, sans-serif;">
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color: #f4f4f4;">
<tr>
<td align="center" style="padding: 20px 0;">
<table width="600" cellpadding="0" cellspacing="0" border="0" style="background-color: #ffffff;">
<tr>
<td style="padding: 30px 20px;">
<h1 style="margin: 0 0 20px 0; font-family: '맑은 고딕', 'Malgun Gothic', Arial, sans-serif; font-size: 24px; color: #000000; font-weight: bold;">
한글 제목
</h1>
<p style="margin: 0 0 15px 0; font-family: '맑은 고딕', 'Malgun Gothic', Arial, sans-serif; font-size: 14px; color: #333333; line-height: 1.8;">
한글 본문 내용입니다. 맑은 고딕 폰트가 적용됩니다.
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
8. 주의사항과 모범 사례
8.1 피해야 할 것들
<!-- ❌ 웹 폰트 사용 (작동하지 않음) -->
<link href="https://fonts.googleapis.com/css2?family=Roboto" rel="stylesheet">
<p style="font-family: 'Roboto', sans-serif;">텍스트</p>
<!-- ❌ @font-face 사용 (작동하지 않음) -->
<style>
@font-face {
font-family: 'CustomFont';
src: url('font.woff2');
}
</style>
<!-- ❌ CSS 변수 사용 (작동하지 않음) -->
<p style="font-family: var(--font-family);">텍스트</p>
8.2 권장 사항
<!-- ✅ 시스템 폰트 사용 -->
<p style="font-family: Arial, sans-serif;">텍스트</p>
<!-- ✅ 인라인 스타일 사용 -->
<p style="font-family: Arial, sans-serif; font-size: 14px; color: #333333;">
텍스트
</p>
<!-- ✅ 테이블 기반 레이아웃 -->
<table style="font-family: Arial, sans-serif;">
<tr>
<td>내용</td>
</tr>
</table>
<!-- ✅ MSO 조건부 주석 사용 -->
<!--[if mso]>
<style>
body { font-family: Arial, sans-serif !important; }
</style>
<![endif]-->
9. 폰트 색상과 함께 사용
9.1 폰트와 색상 조합
<table width="600" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="font-family: Arial, sans-serif; font-size: 16px; color: #333333; padding: 10px;">
기본 텍스트 (#333333)
</td>
</tr>
<tr>
<td style="font-family: Arial, sans-serif; font-size: 16px; color: #0066cc; padding: 10px;">
링크 색상 (#0066cc)
</td>
</tr>
<tr>
<td style="font-family: Arial, sans-serif; font-size: 16px; color: #ff0000; padding: 10px;">
강조 색상 (#ff0000)
</td>
</tr>
</table>
10. 반응형 폰트 크기
10.1 미디어 쿼리 (다른 클라이언트용)
<head>
<style type="text/css">
/* 다른 이메일 클라이언트용 */
@media only screen and (max-width: 600px) {
.mobile-font {
font-size: 16px !important;
}
}
</style>
<!--[if mso]>
<style type="text/css">
/* Outlook 전용 */
.mobile-font {
font-size: 14px !important;
}
</style>
<![endif]-->
</head>
<body>
<p class="mobile-font" style="font-family: Arial, sans-serif; font-size: 14px;">
반응형 폰트 크기
</p>
</body>
11. 결론
Outlook 2013에서 폰트를 적용할 때는 웹 표준과는 다른 접근이 필요합니다. 시스템 폰트를 사용하고, 인라인 스타일을 활용하며, 테이블 기반 레이아웃을 사용하는 것이 가장 안정적입니다.
주요 포인트:
- 시스템 폰트 사용: 웹 폰트는 작동하지 않음
- 인라인 스타일:
<style>태그보다 인라인 스타일이 더 안정적 - 테이블 레이아웃:
<div>보다<table>이 더 안정적 - MSO 조건부 주석: Outlook 전용 스타일 적용
- 폰트 스택: 폴백 폰트를 포함한 폰트 목록 사용
Outlook 2013의 제약사항을 이해하고 올바른 방법을 사용하면, 모든 이메일 클라이언트에서 일관된 폰트 표시를 보장할 수 있습니다.