소개
클라우드에서 n8n을 사용할 때는 Gmail 연동이 정말 간단합니다. 그냥 Google 계정 로그인 한 번이면 끝이죠. 그런데 셀프호스팅으로 설치한 n8n에서는 이야기가 완전히 달라집니다 😵
"이렇게까지 해야 돼...?" 라는 말이 절로 나왔습니다. Google Cloud Console 설정, OAuth, 클라이언트 ID 생성까지. 처음엔 막막했지만, 결국 끝까지 해냈어요! 🎉
진행 방법
🛠 사용한 도구
n8n (self-hosting 버전)
Google Cloud Console
Gmail API
🔧 Google Cloud Console 설정
Google Cloud Console 접속 후 새 프로젝트 생성
"Gmail API" 사용 설정
OAuth 동의 화면 구성
앱 이름, 사용자 이메일, 외부 사용자, 테스트 사용자 등록
OAuth 2.0 클라이언트 ID 생성
승인된 리디렉션 URI 입력 (n8n 인증용)
🔐 n8n에서 Gmail Credential 설정
Gmail OAuth2 API 선택
아래 정보 입력:
Authorization URL: https://accounts.google.com/o/oauth2/auth Access Token URL: https://oauth2.googleapis.com/token클라이언트 ID / 클라이언트 Secret 붙여넣기
구글 로그인 버튼 클릭하여 인증 진행
💌 HTML 이메일 작성 및 발송
메시지 입력 후 정상적으로 초안 생성 확인
사본
{
"nodes": [
{
"parameters": {},
"type": "n8n-nodes-base.manualTrigger",
"typeVersion": 1,
"position": [
0,
0
],
"id": "f5500a69-0f47-44e9-a4f2-fc968b506bd5",
"name": "When clicking ‘Execute workflow’"
},
{
"parameters": {
"resource": "draft",
"subject": "n8n-gamil test",
"emailType": "html",
"message": "<!DOCTYPE html> <html lang=\"ko\"> <head> <meta charset=\"UTF-8\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <title>지피터스 AI스터디 17기 환영합니다</title> </head> <body style=\"margin: 0; padding: 0; font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: linear-gradient(135deg, #ff6b35, #f7931e); min-height: 100vh;\"> <table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" width=\"100%\" style=\"background: linear-gradient(135deg, #ff6b35, #f7931e); min-height: 100vh;\"> <tr> <td> <!-- Header --> <div style=\"background: #ff6b35; padding: 15px 0; text-align: center; box-shadow: 0 2px 10px rgba(0,0,0,0.1);\"> <div style=\"color: white; font-size: 18px; font-weight: 500;\"> 🧠 가장 빠르게 AI를 배우는 곳 | 지피터스 AI스터디 17기 🚀 </div> </div> <!-- Main Container --> <div style=\"padding: 40px 20px; text-align: center;\"> <!-- Welcome Card --> <div style=\"background: rgba(255, 255, 255, 0.95); border-radius: 20px; padding: 60px 40px; text-align: center; max-width: 800px; margin: 0 auto; box-shadow: 0 20px 40px rgba(0,0,0,0.1);\"> <h1 style=\"font-size: 2.5rem; font-weight: 700; color: #333; margin-bottom: 30px; line-height: 1.3; word-break: keep-all;\"> 나만 빼고 모두가 쓰는 느낌이라면? </h1> <p style=\"font-size: 1.4rem; color: #666; margin-bottom: 40px; font-weight: 400; word-break: keep-all;\"> 최신의 AI를 배우고 빠르게 활용하세요 </p> <div style=\"font-size: 3.5rem; font-weight: 800; color: #ff6b35; margin: 40px 0; text-shadow: 2px 2px 4px rgba(0,0,0,0.1); word-break: keep-all;\"> 지피터스 AI스터디 17기 </div> <div style=\"margin: 50px 0;\"> <div style=\"font-size: 1.2rem; color: #555; margin: 15px 0; font-weight: 500; word-break: keep-all;\"> 📚 20+의 다양한 주제를 </div> <div style=\"font-size: 1.2rem; color: #555; margin: 15px 0; font-weight: 500; word-break: keep-all;\"> 🔥 한 번의 신청으로 모두 공부해요 </div> </div> <p style=\"font-size: 1.1rem; color: #666; margin: 40px 0 30px 0; font-weight: 500; word-break: keep-all;\"> (오늘 중으로) 빠르게 등록하세요! </p> <a href=\"#\" style=\"display: inline-block; background: linear-gradient(45deg, #ff6b35, #f7931e); color: white; padding: 15px 40px; border: none; border-radius: 50px; font-size: 1.1rem; font-weight: 600; text-decoration: none; box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);\"> 지금 등록하기 ▶ </a> <div style=\"background: linear-gradient(45deg, #ff6b35, #f7931e); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 1.3rem; font-weight: 600; margin-top: 40px; padding: 20px; border: 2px solid #ff6b35; border-radius: 15px; background-color: rgba(255, 107, 53, 0.05); word-break: keep-all; color: #ff6b35;\"> 🎉 17기 노션스터디에 오신 여러분을 진심으로 환영합니다! 🎉<br> 함께 AI의 무한한 가능성을 탐험하며 성장해나가요! </div> </div> </div> </td> </tr> </table> </body> </html>",
"options": {}
},
"type": "n8n-nodes-base.gmail",
"typeVersion": 2.1,
"position": [
220,
0
],
"id": "c4e374cf-80eb-4e6b-a6c6-62275c9fa067",
"name": "Gmail",
"webhookId": "67c4f194-dcb5-4779-a815-d438da6142b4",
"credentials": {
"gmailOAuth2": {
"id": "f8qm6Lwq6J0YN8BN",
"name": "n8n-gmail v001"
}
}
}
],
"connections": {
"When clicking ‘Execute workflow’": {
"main": [
[
{
"node": "Gmail",
"type": "main",
"index": 0
}
]
]
}
},
"pinData": {},
"meta": {
"templateCredsSetupCompleted": true,
"instanceId": "60b3aa39b94bed457e20533702f9886361ef2530a4621307d97c6d3cd59c0e5c"
}
}캡처
결과와 배운 점
처음에는 간단히 메일만 보내면 되겠지 싶었는데, OAuth 인증 구조를 하나하나 이해하고 설정하는 과정이 꽤 험난했습니다. 특히 시나리오 흐름에 따라 데이터를 받아오는 노드를 잘못 연결해서 삽질을 꽤 했어요 😓
하지만 이 과정을 통해 OAuth 구조와 n8n Credential 연동의 전체 흐름을 확실히 익힐 수 있었습니다. 또한, Gmail에서는 <style> 태그가 제대로 동작하지 않으므로, 반드시 인라인 스타일로 작성해야 한다는 점도 중요한 교훈이었어요.