반응형 이메일 프레임워크 mjml 설치 및 설정

1. 설치환경 점검

$ npm -v
11.6.2

$ node -v
v24.12.0

2. mjml 설치

$ npm install -g mjml
npm warn deprecated glob@10.5.0: Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me

added 166 packages in 8s

38 packages are looking for funding
  run `npm fund` for details

3. 권장 디렉터리 구조

my-email-project/
├─ src/               # 소스 코드 저장 위치
│  ├─ components/     # 재사용 공통 모듈
│  │   ├─ header.mjml
│  │   └─ footer.mjml
│  ├─ layouts/        # 기본 베이스 레이아웃
│  │   └─ base.mjml
│  ├─ assets/
│  │   └─ logo.png    # 이메일에 포함될 이미지
│  └─ index.mjml      # 실제 빌드될 파일
├─ dist/
│  └─ index.html      # 컴파일된 최종 HTML 파일 (자동 생성)
├─ .mjmlconfig        # MJML 설정 파일 (필요 시)
├─ package.json       # 빌드 스크립트 관리 (npm/yarn 사용 시)
└─ README.md

4. 소스 테스트

$ mjml src/index.mjml -o dist/index.html

5. vscode 설정

1. 명령 팔레트(Ctrl + Shft + P) 열기
2. Preference: Open User Settings (JSON) 검색
3. 설정 끝에 다음 코드 삽입

   /* MJML 관련 설정 */
   "mjml.preview.auto": true,
   "mjml.compileOnSave": true,
   "mjml.outputPath": "dist",
   "mjml.showPreview": true
   

【참고자료】

• MJML Guide