📌 들어가며
윈도우프로그래밍 수업 과제로 MFC를 이용해 Maily Christmas 라는 나만의 크리스마스 메일 생성 프로그램를 제작했다.
크리스마스의 설렘이 다가오는 12월, 나만의 편지를 작성하여 소중한 사람에게 메일로 전달함으로써 크리스마스를 기념하고 마음을 전할 수 있는 프로그램이다.
🤔 개발 배경
빠르고 짧은 영상 매체에 익숙해진 현대인들은 간단한 단문의 메시지를 추구한다. 채팅에서도 즉흥적이고 감각적인 이야기가 주를 이루곤 한다.
이러한 상황에서 긴 글로 부담 없이 마음을 전할 수 있는 방법이 없을까 고민했고, 대부분의 사람들이 사용하는 이메일이라는 매체를 떠올렸다.
메일은 긴 글로 감정을 담아내기 좋은 매체다. 문자나 카카오톡보다 부담스럽지 않게 편지를 전달할 수 있고, 메일함으로 들어오는 편지는 다른 매체와는 달리 사적이고 친근한 느낌을 준다.
연말이 다가오는 지금, 최근 편지 작성 서비스의 인기인 점을 고려하여 크리스마스 메시지를 메일로 보내는 서비스를 기획하였다.
⚒️ 주요 기능
SMTP 서버 설정 : 이메일 주소를 입력하면 해당 메일 주소의 도메인에 따라 적절한 SMTP 서버와 포트를 자동으로 설정하도록 개발했다.
편지지 선택 : 다양한 편지지 중 하나를 선택하면 메일 발송 시 해당 이미지가 배경으로 적용된다.
텍스트 작성(html) : 텍스트 에디터에서 메일 내용을 작성 시 HTML 형식을 활용해 특정 부분에 이미지삽입 및 링크 생성이 가능하다
(편지지는 그냥 Adobe 생성형 AI인 firefly를 이용해 만들었다… 계속 기괴한 편지지를 만들어줘서 몇 번이나 다시 가르쳐줘야 했다)
💌 HTML 메일 보내기 기능
텍스트 입력 칸에 편지를 입력하고 ‘전송’ 버튼을 클릭하면 메일이 전송된다. 메일 수신자가 받는 내용은 입력한 텍스트에 편지지 이미지를 background로 설정한 html 텍스트다.
SMTP 서버를 이용해 메일을 보내는 예시는 꽤 많았지만 html 메일을 보내는 기능을 구현하는 게 까다로웠다. 가까스로 EASendMail 에서 미리 만들어놓은 프로젝트에서 필요한 기능들을 가져와 이용했는데, 이걸 이용하는 것도 꽤나 복잡한 설정이 필요해서 며칠 간 프로젝트 구조를 뜯어보는 데에만 시간을 썼다.
또, 보통 html 문법으로 작성했더니 메일에 css가 적용이 되지 않은 채로 전송이 되었는데, 이는 메일 템플릿 구현 시 사용되는 html은 따로 적용되는 규칙이 있기 때문이었다.
HTML 메일에는 div 태그를 사용하면 안된다?
몇몇의 이메일 클라이언트는 <div> 태그를 미지원한다고 한다. 때문에 정상적인 이메일 구조를 제공하기 위해 <table>구조로 마크업 하는 것이 좋다.
<table> <tr> <td> 외의 다른 코드의 사용은 최소화해야 한다.
CSS는 인라인 스타일로
스타일은 각 태그 내 인라인 스타일로 정의한다.
모든 스타일은 단축 속성이 아닌 개별 속성을 사용한다.
margin 값 또한 미지원되는 경우가 있다. 때문에 여백 값을 줘야 할 땐 <td>에 padding 을 추가하거나, height 값으로 빈 셀을 넣어 공간을 생성하는 것이 좋다.
최종 html 코드
<body style='background-image: url(편지지 이미지소스); background-size: 500px; width:500px; height:500px; background-repeat: no-repeat; display: flex; justify-content: center; align-items: center;'>
<div style='color: black; font-size: 15px; text-align: center; font-family: Arial, sans-serif; padding: 100px; box-sizing: border-box;'>
입력한 텍스트
</div>
</body>
👀 완성본
수신인, 발신인, 제목 작성
편지지 선택
텍스트 작성 및 메일 전송
받은 메일 확인
📝 마무리하며
MFC 특성상 사용자가 직접 다운을 받아 사용해야 하고, UI 디자인에 한계가
아주 많이있다는 문제가 있다 (귀여운 UI의 이벤트성 웹페이지로 만들어도 꽤 재밌겠다는 생각이 든다)현재 크리스마스 카드 디자인이 단조롭지만, html 이메일 템플릿을 잘 적용하면 메일 뉴스레터처럼 깔끔하게 편지를 보낼 수 있을 것 같다
인기 있는 기술이 좋구나…. 풍부한 자료와 문서를 참고할 수 있다는 것이 얼마나 큰 장점인지 깨달았다. 윈도우 프로그래밍은 오래된 기술이라 그런지 자료가 다른 스택에 비해 많이 부족했다. 검색을 통해 얻을 수 있는 것이 그리 많지 않아서 구조를 뜯어보며 조금 깊게 들어가 구현해야 하는 것이 많았다. 그래도 윈도우프로그래밍은 다른 스택보다 난이도는 훨씬 쉬운 것 같다 응용도는 떨어지지만…