MJML(Mailjet Markup Language)์ ๋ฐ์ํ HTML ์ด๋ฉ์ผ ์ ์์ ๋จ์ํํ๊ธฐ ์ํด ์ค๊ณ๋ ์คํ ์์ค ๋งํฌ์ ์ธ์ด์ ๋๋ค. ์ด๋ฉ์ผ ํด๋ผ์ด์ธํธ ๊ฐ ํธํ์ฑ์ ์ํด ํ์ํ ๋ณต์กํ ํ ์ด๋ธ ๊ธฐ๋ฐ ๋ ์ด์์๊ณผ ์ธ๋ผ์ธ CSS๋ฅผ ์ถ์ํํ์ฌ, ๊ฐ๋ฐ์๊ฐ ๊น๋ํ๊ณ ์๋ฏธ ์๋ ์ฝ๋๋ฅผ ์์ฑํ๋ฉด ์ด๋ฅผ ์์ ํ ๋ฐ์ํ์ธ ์ด๋ฉ์ผ HTML๋ก ์ปดํ์ผํด ์ค๋๋ค.
๋ชจ๋ ์ฃผ์ ์ด๋ฉ์ผ ํด๋ผ์ด์ธํธ์์ ์๋ํ๋ ๋ฐ์ํ ๋ง์ผํ ์ด๋ฉ์ผ ํ ํ๋ฆฟ ๊ตฌ์ถ
์ฃผ๋ฌธ ํ์ธ ๋ฐ ๋ฐฐ์ก ์๋ฆผ์ ์ํ ํธ๋์ญ์ ์ด๋ฉ์ผ ํ ํ๋ฆฟ ์ ์
์ผ๊ด๋ ๋ธ๋๋ฉ์ ์ํ ์ฌ์ฌ์ฉ ๊ฐ๋ฅ ์ปดํฌ๋ํธ๊ฐ ํฌํจ๋ ์ด๋ฉ์ผ ๋์์ธ ์์คํ ๊ฐ๋ฐ
์ดํด๊ด๊ณ์ ๊ฒํ ๋ฐ ์น์ธ์ ์ํ ์ด๋ฉ์ผ ๋์์ธ์ ์ ์ํ ํ๋กํ ํ์ดํ
๋ ๊ฑฐ์ ์ด๋ฉ์ผ ํ ํ๋ฆฟ์ ํ๋์ ์ด๊ณ ์ ์ง ๊ด๋ฆฌ๊ฐ ์ฉ์ดํ ์ฝ๋๋ฒ ์ด์ค๋ก ๋ง์ด๊ทธ๋ ์ด์
๋๊ท๋ชจ ๊ฐ์ธํ ์ฝํ ์ธ ๋ฅผ ์ํด ํ๋ก๊ทธ๋๋ฐ ๋ฐฉ์์ผ๋ก ์ด๋ฉ์ผ ํ ํ๋ฆฟ ์์ฑ
HTML ์ ๋ฌธ ์ง์์ด ์๋ ๋น๊ฐ๋ฐ์๊ฐ ์ ๋ฌธ์ ์ธ ์ด๋ฉ์ผ ํ ํ๋ฆฟ์ ๋ง๋ค ์ ์๋๋ก ๊ต์ก
SaaS ํ๋ซํผ ๋ฐ ๋ํ์ฌ๋ฅผ ์ํ ํ์ดํธ ๋ผ๋ฒจ ์ด๋ฉ์ผ ํ ํ๋ฆฟ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๊ตฌ์ถ
์ด๋ฉ์ผ HTML ๊ฐ๋ฐ์ ์ด๋ฉ์ผ ํด๋ผ์ด์ธํธ๋ง๋ค ์ฝ๋๋ฅผ ๋ ๋๋งํ๋ ๋ฐฉ์์ด ์ผ๊ด๋์ง ์๊ธฐ ๋๋ฌธ์ ๋งค์ฐ ์ด๋ ค์ด ๊ฒ์ผ๋ก ์๋ ค์ ธ ์์ต๋๋ค. ํ๋์ ์ธ ํ์ค์ ๋ฐ๋ฅด๋ ์น ๋ธ๋ผ์ฐ์ ์ ๋ฌ๋ฆฌ Outlook๊ณผ ๊ฐ์ ์ด๋ฉ์ผ ํด๋ผ์ด์ธํธ๋ ์ฌ์ ํ ํ ์ด๋ธ ๊ธฐ๋ฐ ๋ ์ด์์๊ณผ ์ธ๋ผ์ธ CSS๊ฐ ํ์ํ ๋ ๊ฑฐ์ ๋ ๋๋ง ์์ง์ ์ฌ์ฉํฉ๋๋ค. ์ด ์ฝ๋๋ฅผ ์๋์ผ๋ก ์์ฑํ๊ณ ์ ์ง ๊ด๋ฆฌํ๋ ๊ฒ์ ์๊ฐ์ด ๋ง์ด ๊ฑธ๋ฆฌ๊ณ ์ค๋ฅ๊ฐ ๋ฐ์ํ๊ธฐ ์ฌ์ฐ๋ฉฐ, ๋จ ํ๋์ ๋ฐ์ํ ํ ํ๋ฆฟ์ ๋ง๋๋ ๋ฐ๋ ์ ์๊ฐ์ด ๊ฑธ๋ฆฌ๊ณค ํฉ๋๋ค. MJML์ ์ด๋ฌํ ๋ณต์ก์ฑ์ ์ถ์ํํ์ฌ ์ด๋ฉ์ผ ๊ฐ๋ฐ ์๊ฐ์ ํ๊ธฐ์ ์ผ๋ก ์ค์ฌ์ค๋๋ค. ๊ฐ๋ฐ์๊ฐ ์๋์ผ๋ก ์ฝ๋ฉํ ๋ 4~6์๊ฐ ๊ฑธ๋ฆด ์ ์๋ ์์ ์ MJML์ ์ฌ์ฉํ๋ฉด 30~60๋ถ ๋ง์ ์๋ฃํ ์ ์์ต๋๋ค. ์ด๋ฌํ ํจ์จ์ฑ ์ฆ๋๋ฅผ ํตํด ๋ง์ผํ ํ์ ํ์ง์ด๋ ํด๋ผ์ด์ธํธ ํธํ์ฑ์ ํฌ์ํ์ง ์๊ณ ๋ ์ด๋ฉ์ผ ๋์์ธ์ ๋ ๋น ๋ฅด๊ฒ ๋ฐ๋ณตํ๊ณ ์บ ํ์ธ์ ์ ์ํ๊ฒ ๋ฐ์นญํ ์ ์์ต๋๋ค. ์ด๋ฉ์ผ ๋ง์ผํ ์ด์ ์ธก๋ฉด์์ MJML์ ์์ ์๊ฐ ๋ชจ๋ฐ์ผ Gmail์์ ์ด๋ , ๋ฐ์คํฌํฑ Outlook์์ ์ด๋ , iPad์ Apple Mail์์ ์ด๋ ์๊ด์์ด ๋ชจ๋ ์ด๋ฉ์ผ์ด ์ฌ๋ฐ๋ฅด๊ฒ ๋ ๋๋ง๋๋๋ก ๋ณด์ฅํฉ๋๋ค. ์ด๋ฌํ ์ผ๊ด์ฑ์ ๋ธ๋๋ ์ธ์ง๋๋ฅผ ๋์ด๊ณ ์ฐธ์ฌ ์งํ๋ฅผ ๊ฐ์ ํฉ๋๋ค. ๋ ์ด์์์ด ๊นจ์ง๋ฉด ์์ ์๊ฐ ์ด๋ฉ์ผ์ ๋ฌด์ํ๊ฑฐ๋ ์์ ๊ฑฐ๋ถํ ๊ฐ๋ฅ์ฑ์ด ๋๊ธฐ ๋๋ฌธ์ ๋๋ค.
MJML์ ๋จ์ํ๋ ๋งํฌ์ ๊ตฌ๋ฌธ์ ์ค์ ์๋น์ค์ ๋ฐ๋ก ์ฌ์ฉํ ์ ์๋ HTML ์ด๋ฉ์ผ ์ฝ๋๋ก ๋ณํํ๋ ํธ๋์คํ์ผ๋ฌ(Transpiler)๋ก ์๋ํฉ๋๋ค. ๊ฐ๋ฐ์๋ mj-section, mj-column, mj-text์ ๊ฐ์ด ์ผ๋ฐ์ ์ธ ์ด๋ฉ์ผ ๋ ์ด์์ ํจํด์ ๋ฐ์ํ๋ MJML์ ์ปดํฌ๋ํธ ๊ธฐ๋ฐ ํ๊ทธ๋ฅผ ์ฌ์ฉํ์ฌ ์ด๋ฉ์ผ ํ ํ๋ฆฟ์ ์์ฑํฉ๋๋ค. ๊ทธ๋ฐ ๋ค์ MJML ์์ง์ด ์ด ์ฝ๋๋ฅผ ์ฒ๋ฆฌํ์ฌ ์ฌ๋ฌ ์ด๋ฉ์ผ ํด๋ผ์ด์ธํธ์์ ์ผ๊ด๋ ๋ ๋๋ง์ ์ํด ํ์ํ ๋ณต์กํ ์ค์ฒฉ ํ ์ด๋ธ ๊ตฌ์กฐ, ๋ฏธ๋์ด ์ฟผ๋ฆฌ ๋ฐ ์ธ๋ผ์ธ ์คํ์ผ์ ์์ฑํฉ๋๋ค. ์ด ํ๋ ์์ํฌ์๋ ํค๋, ํธํฐ, ์ด๋ฏธ์ง, ๋ฒํผ, ์์ ์์ด์ฝ ๋ฑ์ ํฌ๊ดํ๋ ํ๋ถํ ์ฌ์ ๊ตฌ์ถ ์ปดํฌ๋ํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ ํฌํจ๋์ด ์์ต๋๋ค. ๊ฐ ์ปดํฌ๋ํธ๋ ์ด๋ฉ์ผ ๋ฒ ์คํธ ํ๋ํฐ์ค๊ฐ ์ ์ฉ๋ ์ํ๋ก ์ค๊ณ๋์ด Outlook, Gmail, Apple Mail๊ณผ ๊ฐ์ ๋ค์ํ ์ด๋ฉ์ผ ํด๋ผ์ด์ธํธ์ ํน์ฑ์ ์๋์ผ๋ก ์ฒ๋ฆฌํฉ๋๋ค. MJML์ ์ปค๋งจ๋ ๋ผ์ธ ๋๊ตฌ, Node.js ํจํค์ง ๋๋ ์จ๋ผ์ธ ์๋ํฐ๋ฅผ ํตํด ์ฌ์ฉํ ์ ์์ผ๋ฉฐ ๊ฐ๋ฐ ์ํฌํ๋ก์ฐ์ ์ํํ๊ฒ ํตํฉ๋ฉ๋๋ค. ๋ํ MJML์ ์ฌ์ฉ์ ์ ์ ์ปดํฌ๋ํธ์ ํ ๋ง ์ค์ ์ ์ง์ํ๋ฏ๋ก ํ์์ ์ด๋ฉ์ผ ํ ํ๋ฆฟ์ ์ํ ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ ๋์์ธ ์์คํ ์ ๋ง๋ค ์ ์์ต๋๋ค. ๋ณ์์ include ๊ธฐ๋ฅ์ ํตํด ํ ํ๋ฆฟ์ ๊ตฌ์ฑํ ์ ์์ด ์ฝ๋ ์ค๋ณต์ ์ค์ด๋ฉด์ ์ฌ๋ฌ ์ด๋ฉ์ผ ์บ ํ์ธ ๊ฐ์ ์ผ๊ด์ฑ์ ์ฝ๊ฒ ์ ์งํ ์ ์์ต๋๋ค.
ํด๋ผ์ด์ธํธ ํธํ์ฑ ๋ณด์ฅ์ ์ํด ๋ง์ถคํ HTML ๋์ MJML์ ๋ด์ฅ ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฉํ์ธ์
Litmus๋ Email on Acid ๊ฐ์ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ฌ ์ฌ๋ฌ ์ด๋ฉ์ผ ํด๋ผ์ด์ธํธ์์ ์ปดํ์ผ๋ ๊ฒฐ๊ณผ๋ฌผ์ ํ ์คํธํ์ธ์
์ฌ์ฌ์ฉ ๊ฐ๋ฅํ ํค๋์ ํธํฐ ์น์ ์๋ mj-include๋ฅผ ์ฌ์ฉํ์ฌ ํ ํ๋ฆฟ์ ๋ชจ๋ํํ์ธ์
๋์์ธ ์ผ๊ด์ฑ ์ ์ง๋ฅผ ์ํด ๋ธ๋๋ ์์๊ณผ ํฐํธ๋ฅผ MJML ์์ฑ์ผ๋ก ์ ์ํ์ธ์
์ด๋ฏธ์ง๋ ์ฝ์ ์ ์ต์ ํํ๊ณ ์ ๊ทผ์ฑ์ ์ํด ํญ์ ๋์ฒด ํ ์คํธ(alt text)๋ฅผ ํฌํจํ์ธ์
์ด๋ฉ์ผ ํด๋ผ์ด์ธํธ ์์ ํจ์ ํ์๋๋ ๋ฏธ๋ฆฌ๋ณด๊ธฐ ํ ์คํธ๋ฅผ ์ ์ดํ๋ ค๋ฉด mj-preview๋ฅผ ์ฌ์ฉํ์ธ์
๋ง์ ์ด๋ฉ์ผ ํด๋ผ์ด์ธํธ๊ฐ ์ฌ์ฉ์ ์ ์ ํฐํธ๋ฅผ ์ง์ํ์ง ์์ผ๋ฏ๋ก ์น ํฐํธ์ ๋ํ ๋์ฒด(Fallback) ํฐํธ๋ฅผ ์ค์ ํ์ธ์
MJML ์์ค ํ์ผ์ ์ปดํ์ผ๋ HTML ๊ฒฐ๊ณผ๋ฌผ๊ณผ ๋ณ๋๋ก ๋ฒ์ ๊ด๋ฆฌํ์ธ์
๋ค, MJML์ MIT ๋ผ์ด์ ์ค ํ์ ์์ ํ ๋ฌด๋ฃ๋ก ์ ๊ณต๋๋ ์คํ ์์ค์ ๋๋ค. ๊ฐ์ธ ๋ฐ ์์ ์ ํ๋ก์ ํธ์ ๋น์ฉ ์์ด ์ฌ์ฉํ ์ ์์ต๋๋ค. Mailjet์์ ํ๋ก์ ํธ๋ฅผ ์ ์ง ๊ด๋ฆฌํ์ง๋ง ํด๋น ์ด๋ฉ์ผ ๋ฐ์ก ์๋น์ค๋ฅผ ๋ฐ๋์ ์ฌ์ฉํ ํ์๋ ์์ต๋๋ค.
MJML์ Gmail, Outlook(๋ฐ์คํฌํฑ ๋ฐ ์น), Apple Mail, Yahoo Mail ๋ฐ ๋ชจ๋ฐ์ผ ์ด๋ฉ์ผ ์ฑ์ ํฌํจํ ๋ชจ๋ ์ฃผ์ ์ด๋ฉ์ผ ํด๋ผ์ด์ธํธ์์ ์ฌ๋ฐ๋ฅด๊ฒ ๋ ๋๋ง๋๋ HTML์ ์์ฑํ๋๋ก ์ค๊ณ๋์์ต๋๋ค. ํ๋ ์์ํฌ๋ ์๋ก์ด ํด๋ผ์ด์ธํธ์ ํน์ด์ฌํญ์ด๋ ๋ ๋๋ง ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด ์ง์์ ์ผ๋ก ์ ๋ฐ์ดํธ๋ฉ๋๋ค.
๋ค, MJML์ ๋ชจ๋ ์ด๋ฉ์ผ ๋ฐ์ก ์๋น์ค์ ํธํ๋๋ ํ์ค HTML๋ก ์ปดํ์ผ๋ฉ๋๋ค. ์ปดํ์ผ๋ ๊ฒฐ๊ณผ๋ฌผ์ Mailchimp, SendGrid, HubSpot, Amazon SES ๋๋ HTML ์ด๋ฉ์ผ ํ ํ๋ฆฟ์ ํ์ฉํ๋ ๋ค๋ฅธ ๋ชจ๋ ESP์์ ์ฌ์ฉํ ์ ์์ต๋๋ค.
MJML์ ๋๋๊ทธ ์ค ๋๋กญ ๋น๋๋ณด๋ค ๋ ๋ง์ ์ ์ฐ์ฑ๊ณผ ์ ์ด๊ถ์ ์ ๊ณตํ๋ฉด์๋ ์์ HTML ์ฝ๋ฉ๋ณด๋ค๋ ์ฝ์ต๋๋ค. ์๊ฐ์ ๋น๋์ ํ๊ณ ์์ด ๋ง์ถคํ ๋์์ธ์ ์ํ๋ ๊ฐ๋ฐ์์ ๊ธฐ์ ์ ์ดํด๋๊ฐ ์๋ ๋ง์ผํฐ์๊ฒ ์ด์์ ์ด์ง๋ง ๊ธฐ๋ณธ์ ์ธ ์ฝ๋ฉ ์ง์์ด ํ์ํฉ๋๋ค.
์ง๊ธ BillionVerify๋ฅผ ์ฌ์ฉํ์ฌ 99.9% ์ ํ๋๋ก ์ด๋ฉ์ผ์ ๊ฒ์ฆํ์ธ์.
์ ์ฉ์นด๋ ๋ถํ์ ยท ๋งค์ผ 100ํ ์ด์ ๋ฌด๋ฃ ๊ฒ์ฆ ยท 5๋ถ ์ค์