Skip to main content
Hashnodeyelim's dev blog

Command Palette

Search for a command to run...

[프로젝트] 나의 조그만 mfc 프로젝트

Updated
•3 min read•View as Markdown
[프로젝트] 나의 조그만 mfc 프로젝트
정
정예림
Part of seriesProjects

📌 들어가며

  • 윈도우프로그래밍 수업 과제로 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 이메일 템플릿을 잘 적용하면 메일 뉴스레터처럼 깔끔하게 편지를 보낼 수 있을 것 같다

  • 인기 있는 기술이 좋구나…. 풍부한 자료와 문서를 참고할 수 있다는 것이 얼마나 큰 장점인지 깨달았다. 윈도우 프로그래밍은 오래된 기술이라 그런지 자료가 다른 스택에 비해 많이 부족했다. 검색을 통해 얻을 수 있는 것이 그리 많지 않아서 구조를 뜯어보며 조금 깊게 들어가 구현해야 하는 것이 많았다. 그래도 윈도우프로그래밍은 다른 스택보다 난이도는 훨씬 쉬운 것 같다 응용도는 떨어지지만…

🔗 참고 자료

#mfc#projects

Comments

Join the discussion

No comments yet. Be the first to comment.

Projects

Part 1 of 1

More from this blog

Kotlin Spring Boot로 RESTful 웹 서비스 만들기 - [1] 스프링부트 시작하기 (IntelliJ IDEA Community)

들어가기 전 스프링부트를 이용해 간단한 스프링부트 프로젝트를 시작하고, JDBC를 사용하여 프로젝트에 데이터베이스를 추가하고 구성해보자. 코틀린으로 스프링부트 프로젝트를 시작하기 전 필요한 것은 다음과 같다. JDK (JDK8 이상 권장) IntelliJ IDEA (Ultimate 버전이 있으면 편하지만 필자는 Community 버전으로 진행한다) Gradle (최신 버전 권장) start.spring.io를 이용해 스프링부트 프로젝트...

Jan 9, 20243 min read
Kotlin Spring Boot로 RESTful 웹 서비스 만들기 - [1] 스프링부트 시작하기 (IntelliJ IDEA Community)

[글또] 글또 9기를 시작하며

들어가며 글또 9기에 합격했다! 글 쓰는 개발자들의 모임이라니 정말 멋지다. '개발'과 '글'이라는 공통 분모로 이렇게 많은 개발자들과 함께 소통할 수 있다는 건 좋은 기회인 것 같다. 지원서의 주요 문항은 내가 어떻게 살아왔는지에 대한 '삶의 지도'였는데, 왜인지 사람 그 자체를 봐주는 느낌이라 좋았다. 운영자 분도 슬랙에 공지사항과 응원의 글을 올려주시는데 항상 글이 너무 따뜻하셔서 하루의 끝에 읽으면 위로가 된다. 글또 9기의 시작점은 ...

Dec 9, 20233 min read
[글또] 글또 9기를 시작하며

[네트워크] 인터넷이란 무엇인가? : 두 가지 관점으로 알아보기

[Computer Networking - A Top Down Approch] 원서와 번역본을 읽고 작성한 글입니다. 오역이 있을 수 있습니다. Chapter 1.1.1 ~ 1.1.2 인터넷이란 무엇일까? 이 질문에 답하기 위한 두 가지 방법이 있다. 1. 인터넷의 구성요소(nuts and bolts) 기술하기 2. 분산 애플리케이션에 서비스를 제공하는 네트워킹 인프라스트럭처 관점에서 인터넷 기술하기 아직은 무슨 의미인지 감이 오지 않는다...

Oct 1, 20234 min read
[네트워크] 인터넷이란 무엇인가? : 두 가지 관점으로 알아보기

yelim's dev blog

5 posts