플러스프로젝트 배경
1. 문제점 - 홍보 메일을 발송할 때마다 외부에 제작을 의뢰하면 비용과 시간 부담이 반복됩니다. - 일반 웹 HTML은 이메일 클라이언트(특히 아웃룩)에서 레이아웃이 깨지는 경우가 많습니다. - 비개발자는 HTML을 직접 수정하기 어려워 한 번 만든 템플릿을 재사용하기 힘듭니다. 2. 프로젝트 목표 - 한 번 만들어 두면 반복해서 재사용할 수 있는 뼈대 HTML 이메일 템플릿 제작 - 주요 메
프로젝트 성과
주요 메일 클라이언트 호환성 확보
Gmail·네이버·다음·Apple Mail·아웃룩 등 렌더링 방식이 제각각인 주요 메일 클라이언트에서 레이아웃이 깨지지 않고 동일하게 표시되도록 구현하여, 발송 환경과 무관하게 일관된 화면을 제공합니다.
PC·모바일 반응형 대응 완료
하나의 HTML로 데스크톱에서는 좌우 2단, 모바일에서는 세로 1단으로 자동 전환되도록 구현하여, 수신자가 어떤 기기로 열어도 가독성 높은 레이아웃으로 메일을 확인할 수 있습니다.
비개발자 재사용 환경 구축
교체가 필요한 이미지·문구·링크 영역을 한글 주석으로 표시하고 교체 가이드를 함께 제공하여, 개발 지식이 없는 담당자도 코드 수정 없이 내용만 바꿔 반복 발송할 수 있도록 했습니다.
아웃룩 깨짐 방지
메일에서 가장 호환성이 까다로운 아웃룩을 위해 table 레이아웃·MSO 조건부 주석·VML 버튼을 적용하여, 일반 HTML이라면 깨졌을 화면을 의도한 디자인 그대로 유지했습니다.
경량 코드로 안정적 표시
불필요한 코드 없이 전체 용량을 약 20KB 수준으로 가볍게 유지하여, 용량이 큰 메일의 뒷부분을 잘라내는 Gmail의 클리핑 현상 없이 메일 콘텐츠 전체가 온전하게 표시되도록 했습니다.
핵심 기능
비개발자 교체 영역
이미지 URL·문구·버튼 링크 등 교체가 필요한 모든 지점을 눈에 띄는 한글 주석으로 명확히 표시하여, 비개발자도 주석만 따라가며 안전하게 내용을 바꿔 반복 재사용할 수 있도록 했습니다.
진행 단계
기획·레이아웃
2025.05.
전달하려는 메시지와 정보의 우선순위를 정리해, 헤더·메인 비주얼·소개 문구·핵심 제품 블록·CTA 버튼·푸터로 이어지는 단일 컬럼(최대 600px) 이메일 레이아웃 구조를 설계했습니다.
프로젝트 상세
[포트폴리오 소개] 홍보용 이메일 DM 발송을 위한 HTML 이메일 템플릿입니다. 비개발자 담당자가 이미지와 문구만 교체해 반복 재사용할 수 있도록 설계했으며, Gmail·네이버·다음·아웃룩 등 렌더링 방식이 서로 다른 주요 메일 클라이언트와 PC·모바일 환경 모두에서 레이아웃이 깨지지 않도록 호환성을 확보했습니다. (서비스 카테고리: 이메일 마케팅 / HTML 퍼블리싱 · 메인 타깃: 대량 메일을 직접 운
