평생 무료로 커스텀 이메일 사용하기
안녕하세요. 또 다시 찾아온 평생 무료 시리즈입니다. 저는 틈만나면 1인 사이드 프로젝트를 진행하기 때문에, 어떻게든 공짜로 서버를 돌리기 위해 온갖 노력을 하고 있습니다. 그래서 무료로 이용하는 방법에 관한 글을 몇 개 올렸는데 GA를 살펴보니 다른 주제보다 조회수가 높더군요. 역시 공짜가 좋네요.
그런 관계로 제가 알고 있는 무료로 서비스를 운영하는 방법들을 시간이 날 때마다 종종 올려보도록 하겠습니다. ㄱ
이메일 서비스
이번엔 이메일입니다. 온라인 서비스 운영자에겐 필수라고 할 수 있겠습니다.
이유는 서비스 관련 각종 알림, 광고 발송과 계정 인증까지 모두 저비용으로 커버가 가능한 고마운 전달 매체이기 때문이죠.
그런데 이 이메일 서비스는 제대로 구현해서 안정적으로 서비스하기는 생각보다 꽤 까다롭습니다. 커스텀 이메일을 보내기 위해선 도메인 관련 지식도 필요하고, 자동화 및 개인화 하려면 서버도 돌려야 하고, 요샌 모바일로도 메일을 많이 읽어서 반응형으로 템플릿 만드는 등 이메일 하나에 정말 많은 노력이 들어갑니다. 운영하는 서비스에 따라서 전담 인력이 필요할 수도 있습니다.
그래서 스티비, Mailchimp 같은 이메일 솔루션을 사용하는 게 맘 편하기는 합니다.
하지만 문제는 가격입니다. 스티비의 경우 무제한으로 이메일을 보내기 위해선 최소 월 29,000원을 지불해야합니다. 솔직히 사용 만족도 대비 절대 아깝지 않습니다만, 사이드 프로젝트인데 이메일 서비스에만 월 3만원 가량을 지불한다는 건 무일푼으로 프로젝트하는 우리에게 있을 수 없는 일입니다.
그리고 사실 스티비는 자체 서버에서 100% 커스텀해서 통합하긴 어렵습니다. 이메일 구독시키기, 그룹화하기나 웹훅 API 정도만 지원하기 때문입니다.
다음 스마트워크
그래서 평생 무료로, 100% 원하는대로 커스텀 이메일을 서비스하는 방법을 준비했습니다. 바로 다음 스마트워크를 이용하는 방법입니다.
지금은 카카오랑 통합했지만, 다음도 네이버와 마찬가지로 오래전부터 메일 서비스를 제공 중입니다. 다만 이 방법은 다음 계정 1개당 커스텀 도메인 1개만 가능합니다.
그리고 개인 계정이랑 커스텀 도메인이 완벽히 분리되는 방법은 아닙니다. 개인 계정을 커스텀 도메인처럼 사용하는 방식이기 때문입니다. 뭐 크게 신경쓸 부분은 아닙니다.
그리고 가끔 이메일 발송이 늦는 경우가 있습니다. 그래도 보통 1분 이내로 발송됩니다.
카카오도 최근 메일 서비스를 베타로 출시했는데, UI가 기존 다음 이랑 거의 비슷합니다. 다만 스마트워크처럼 커스텀 도메인을 만드는 기능은 없습니다. 정식 버전에선 지원해주길 기도하겠습니다.
카카오 메일 BETA. 스마트워크 유지해주세요. 제발
시작하기
먼저 다음 사이트에 접속해서 로그인 후, 메일로 이동합니다. 기존 다음 계정이나, 통합된 카카오 계정이라도 상관 없습니다. 저는 기존 다음 계정과 카카오 계정을 통합시킨 계정으로 사용 중입니다.

그리고 왼쪽 사이드 메뉴 하단에 Daum 스마트워크로 이동해주세요.

이미 등록한 개인 도메인이 없다면, 도메인을 입력하는 공간이 있을 겁니다. 저는 지금은 취소를 할 수가 없어서 사진을 첨부하지 못했는데, 그냥 사용할 도메인 주소를 넣어주기만 하면 됩니다.
그리고 커스텀 도메인을 사용하기 위해 도메인을 구입한 호스팅 업체에 가서 MX 레코드를 추가해주셔야 합니다. 저는 Godaddy를 사용 중입니다. 다른 업체를 사용하고 계셔도 작동 원리는 모두 같습니다.
DNS 설정하는 곳으로 가셔서 MX 레코드 2개 추가해주세요.
- aspmx.daum.net (우선순위: 10)
- alt.aspmx.daum.net (우선순위: 20)

친절하게 설정 방법까지 메일로 보내주네요.
이러면 커스텀 도메인을 사용하기 위한 준비가 끝났습니다. 쉽죠?
다음에서 정상적으로 도메인 MX 레코드를 확인한 상태
서버에 통합하기
여기까지 설정을 마치셨다면, 지금부터 개인 도메인 주소로 메일을 발송할 수 있습니다. 서버 통합 필요없이 그냥 웹 메일만 이용하실 분들은 지금 상태로도 이용하는데 문제 없습니다.
하지만 자체 서버에서 메일을 보내길 원하시는 분들은 아래 예제를 참고해주시면 되겠습니다.
저는 Node.js를 사용했고, 메일 발송을 위해 Nodemailer 라이브러리를 사용했습니다.
# yarn
$ yarn add nodemailer
$ yarn add -D @types/nodemailer # typescript 사용하는 경우
# npm
$ npm i nodemailer
$ npm i -D @types/nodemailer # typescript 사용하는 경우
패키지 설치 후, 코드 재사용성을 위해 아래와 같이 모듈화 해줍니다.
import nodemailer from "nodemailer";
export type mailOptions = {
to: string | string[];
subject: string;
html: string;
};
export class Nodemailer {
private transporter;
constructor() {
this.transporter = nodemailer.createTransport({
host: "smtp.daum.net",
port: 465,
secure: true,
auth: {
user: "다음 계정 아이디",
pass: "다음 계정 비밀번호",
},
});
}
public sendMail(options: mailOptions) {
return this.transporter.sendMail({
priority: "normal",
sender: "브리아나랩스",
from: "브리아나랩스 <contact@brianalabs.com>",
to: "contact@brianalabs.com",
bcc: options.to,
subject: options.subject,
html: options.html,
});
}
}
nodemailer의 인터페이스는 매우 간단합니다. 이메일 서비스 업체의 정보를 담은 transport 객체를 만들고, 이 객체에 내장된 sendMail 함수를 통해 메일을 발송하면 끝입니다.
여기서 한 가지 짚어드릴 부분이 있다면, sendMail 함수의 to 옵션을 수정하지 못하도록 작성했습니다. 이유는 같은 메일을 여러 명에게 발송할 때 to 객체에 다 넣게 되면 메일을 받는 사람에게 다른 사람들의 메일까지 전부 노출되게 됩니다.
수신자 입장에선 내 메일 주소가 다른 사람에게 노출됐기 때문에 상당히 불쾌할 수 있습니다.
그런 불상사를 막기 위해 받는 사람을 메일 발송자의 주소와 동일하게 해두고, 숨은 참조로만 메일을 보내도록 설계해주세요. 이건 이메일 예절이기도 합니다.
숨은 참조로 보내면 메일을 여러 명에게 발송해도 개인에게만 발송된 것 처럼 보입니다. 그리고 관리자 계정으로 메일을 보내기 때문에, 우리 메일이 잘 발송됐는지 확인도 가능합니다.
사용 예제는 이렇습니다.
const mailer = new Nodemailer();
const info = await mailer.sendMail({
to: "tmna1234@naver.com",
subject: "이메일 인증 코드를 보내드립니다.",
html: "인증번호는 [000000] 입니다.",
});


위 사진은 메일함에서 받았을 때 모습이고, 아래는 아이폰 기본 메일 앱에서 받았을 때 보이는 모습입니다. 우리가 흔히 받는 메일의 포맷이죠? 이제 옵션을 조절해서 원하는 포맷으로 메일을 마음껏 발송하세요.
마무리
다음 스마트워크는 도메인 당 계정 500개까지 등록 가능하고, 계정 당 20GB의 용량을 무료로 제공합니다. 이 혜택은 정말 미친겁니다. 웬만한 규모에선 사실상 이메일 관련해서 지출 없이 서비스를 운영할 수 있습니다.
여기서 추가로 이메일 UI/UX 개선을 위해 반응형 이메일 템플릿까지 제공하면 완벽하겠죠. 다만 분량 관계로 무료로 반응형 이메일 템플릿을 작성 및 유지보수하는 방법은 다음 포스팅에서 다루도록 하겠습니다.
잘 안되거나, 모르는 부분은 아래 댓글로 남겨주세요.
참고
같은 카테고리의 다른 글
[Nuxt 3] Composition API로 자동 스크롤링 기능 구현하기
이번 포스팅에서는 실시간 채팅 서비스에서 새로운 대화 내용이 추가되었을 때 자동으로 스크롤이 계속해서 아래로 내려가면서, 스크롤을 조작함에 따라 자동 스크롤이 활성화/비활성화되는 기능을 Vue 3에서 새로 추가된 Composition API를 통해 만들어볼겁니다.
Twilio 번호 구매 없이 연락처 인증 서비스 5분만에 구현하기
이번 포스팅에선 Twilio를 이용해 Node.js에서 개인 번호를 발급받지 않고, 핸드폰 번호 인증을 매우 간단하게 구현하는 방법에 대해 소개해드리겠습니다.
[Nuxt 3] 사이드 프로젝트 만들기 - 개발 환경 설정편
저번 사이드 프로젝트 만들기 - 기획편의 다음 편입니다. 이번엔 nuxt3의 주요 변경사항 일부를 알아보고, 쾌적한 개발 환경을 위해 몇 가지 세팅을 해보도록 하겠습니다.
[Nuxt 3] 사이드 프로젝트 만들기 - 기획편
올해 첫 개발 관련 주제를 뭘로할까 고민하다가 사이드 프로젝트 아이디어가 떠올라서 그걸 같이 만들어볼까 합니다. 하지만 이미 잘 알고 있던 기술을 사용해서 만들면 재미없겠죠. 사이드 프로젝트는 역시 신기술을 이용해서 만드는게 가장 좋습니다. 나만의 프로젝트를 만들면서 최신 기술도 마음껏 써볼 수 있으니까요.
평생 무료로 반응형 이메일 템플릿 무한대로 만들기 - mjml.io
저는 이메일을 데스크톱과 모바일 환경에서 매일매일 확인합니다. 그런데 아직도 모바일 디스플레이에 최적화되지 않은 이메일을 받을 때가 많습니다.
클립보드 이미지를 1초만에 링크로 만드는 툴 개발하기
저는 이 블로그를 운영하면서 가장 귀찮은 일이 하나 있습니다. 바로 이미지 주소를 만드는 일인데요, 저는 @nuxt/content 모듈을 이용해 마크다운 포맷을 이용하는 정적 블로그를 운영 중이라 글 작성 중에 원격 이미지 주소를 삽입하는 기능을 사용하지 않습니다.
평생 무료인 모니터링 도구 10분만에 만들기
서버를 운영하다보면 예상치 못한 서버 다운이나 응답 속도 저하를 반드시 겪게 됩니다. 원인은 둘째 치구요. 근데 문제는 서버 장애를 원천 차단할 방법이 사실상 없기 때문에, 우리 개발자들이 24시간 눈을 뜨고 지켜볼 수 밖에 없겠습니다.
Vue.js로 크롬 확장 프로그램 만들기 강의 - 3부
이전 포스팅에서는 Vite을 이용해 크롬 확장 프로그램을 만들기 위한 기본적인 프로젝트 환경 설정까지 마쳤습니다. 본격적으로 Vue.js 코드를 작성해보도록 합시다.
정말 너무 쉬운 Docker
우리가 Docker를 사용해야하는 가장 큰 이유는, 어떤 컴퓨터에서든 똑같은 개발 환경을 보장해주기 떄문입니다. 로컬 컴퓨터에서 열심히 개발하고 AWS에 코드를 올렸는데, 에러를 마주하며 스트레스를 받았던 경험이 한 번쯤은 있을겁니다. 내 컴퓨터랑 클라우드 컴퓨터의 환경이 100% 똑같지 않기 때문이죠. 근데 이 어려움을 한 번에 해결해준다? 쓰지 말아야 할 이유가 없습니다.
웹소켓과 socket.io
예전에 회사 프로젝트를 진행할 때, 지도에 실시간으로 사용자의 위치를 보여주는 기능이 필요해서 socket.io 를 사용해서 구현했던 적이 있습니다.
Vue.js로 크롬 확장 프로그램 만들기 강의 - 2부
이전 포스팅에서 index.html과 manifest.json 파일을 이용해서 확장 프로그램을 개발자 모드로 실행시키는 것 까지 진행했습니다.
Vue.js로 크롬 확장 프로그램 만들기 강의 - 1부
제가 최근 우연히 크롬 확장 프로그램을 개발했는데, 이게 생각보다 꽤 괜찮은 시장이라는 걸 알게 되었습니다.
웹팩보다 100배 빠른 번들러, esbuild
이번 포스팅은 떠오르는 차세대 자바스크립트 번들러 esbuild에 대한 내용입니다. 작년 Github에서 떠오르는 번들링 프로젝트 중 1위를 차지했고, 오늘을 기준으로 20만개의 가까운 Github Star를 받았습니다.
Rollup.js - 플러그인으로 완성도를 높이다
지난 포스팅에서 rollup.js 를 이용해 두 개의 자바스크립트 파일을 하나로 묶고, rollup.config.js 파일을 구성해서 CLI가 아닌 스크립트로 설정 파일을 관리하는 것 까지 진행했습니다.
Rollup.js - 번들링, 파일을 하나로 합쳐보자
번들링 이라는 말을 프론트엔드 개발자라면 많이 들어보셨을겁니다. 번들링은, 파일을 하나로 묶는 것을 말합니다. 그럼 왜 굳이 파일을 하나로 묶어야 할까요? 바로 HTTP 통신의 특성 때문입니다.
코인 시세 1초만에 보는 크롬 확장 프로그램 만들기
가상화폐 거래소 API를 활용해 브라우저에서 단축키로 빠르게 코인 시세를 확인할 수 있는 툴을 크롬 확장 프로그램으로 만들어보았다.
평생 무료로 개인 블로그 운영하기
거의 대부분의 개발자들이 개인 블로그를 운영하라고 얘기한다. 나도 그렇게 생각한다. 왜냐면 분명히 내가 작성했던 코드인데도, 일주일만 지나도 기억이 안나기 때문이다. 그리고 웬만하면 공개해서 작성하라고 하고 싶다. 이미 우리는 누군가가 옛날에 썼던 글을 보고, 문제를 해결한 경험히 굉장히 많기 때문이다. 나는 이런 개발자들의 문화가 너무 좋다. 이런 개발자들의 문화가 다른 업종에도 접목된다면 정말 좋으련만.
Firebase를 대체할 오픈소스 프로젝트, Supabase
Supabase는 구글 Firebase를 엔터프라이즈 레벨에서도 사용 가능하도록 만든 오픈소스 프로젝트이다. 현재는 베타 서비스이다.