n8n(셀프호스팅설치)에서 Gmail 연동 완벽 정복 - 클라우드는 쉬운데 왜 이렇게 복잡해?

🎯 핵심 요약

- 클라우드 n8n: 구글 로그인 한 번으로 끝

- 셀프호스팅 n8n: Google Cloud Console 설정 필수

- 필요한 것: Gmail API 활성화 + OAuth 설정 + 클라이언트 ID 생성

- 결과: HTML 이메일 자동 발송, 노션 연동까지 가능

⚠️ 에러 나면? 구글 프로젝트 삭제하고 처음부터 다시!

n8n(셀프호스팅설치)에서 Gmail 연동 완벽 정복, 클라우드는 쉬운데 왜 이렇게 복잡해?

n8n에 gmail연결하는 법을 배워봅시다.

검은 색 배경의 Google Cloud 및 Google Analytics 로고

클라우드방식으로 사용하신다면 google에 로그인하는 과정으로 한번에 연결이 되지만,
셀프호스팅방식으로 사용하신다면 몇가지 설정을 해주셔야 합니다.

gmail의 API를 사용하는 것이라서 그렇습니다.

준비되셨나요??

구글클라우드 콘솔 접속

https://console.cloud.google.com/

이쪽으로 접속하고, 사용할 gmail계정으로 로그인합니다.

우측 상단에 있는 New Project를 클릭하세요

프로젝트이름을 입력하고, 만들기 버튼을 클릭하세요.

이렇게 만든 프로젝트를 선택합니다.

이제 gmail API를 사용해보러갈거에요. 이건 프로젝트별로 설정하는 거라서 프로젝트를 선택한 후에 여러가지 API를 사용하겠다고 신청을 해야합니다.

왼쪽 햄버거 메뉴 클릭

API 및 서비스 메뉴 클릭

API 및 서비스 사용 설정 클릭

Gmail API 검색 및 선택

Gmail API 사용 클릭

OAuth 동의 화면

시작하기 클릭

앱정보입력(앱이름, 사용자지원 이메일)

앱이름 입력
이메일 선택
다음 버튼 클릭

대상입력(외부 선택)

연락처 정보 입력

완료!! 사용자정책 확인

마지막!! 만들기 버튼 클릭

여기까지가 OAuth 동의 화면 구성을 위한 단계였습니다 .

대상을 설정합니다.

테스트사용자입력(자신의 이메일)

이제, OAuth 2.0 클라이언트 ID를 만들어야합니다.

사용자인증정보

애플리케이션 유형 선택

애플리케이션 이름 입력과 승인된 리디렉션 URI 추가

자 여기서부터는 n8n의 Gmail Credential과 같이 협업을 해야합니다.

우선, n8n쪽 설정

새로운 크레덴션을 만듭니다. Gmail OAuth2 API 선택합니다.

Gmail OAuth2 설정화면

긴급!!!! 7월17일 업데이트 내용입니다.

n8n 구글인증에 새로운 항목이 오늘 생겼어요.

필수 입력 필드들:

1. Authorization URL (인증 URL)
https://accounts.google.com/o/oauth2/auth

2. Access Token URL (액세스 토큰 URL)
https://oauth2.googleapis.com/token

이걸 Gmail 크레덴셜에 추가하시면 됩니다.
시크릿을 지우셨다면 다시 생성해서 붙혀넣으시면 됩니다.

1번 처럼 보려서 붙혀넣을 수가 없어요. 그럴땐
2번 버튼을 눌러서 다시 받으세요. 그럼 됨.

1번의 URL을 Gmail OAuth설정에 사용하기위해서 복사해줍니다.

저장하시면,

클라이언트ID와 클라이언트 보안 비밀번호를 얻을 수 있어요.
이걸 n8n의 Gmail 크레덴셜에 붙혀넣으세요. 아래 이미지 2번항목

2번 항목을 입력하면 구글로그인 버튼이 나타날거에요. 그걸 클릭하고 로그인을 진행하세요. 확인하지않은 앱이라서 지금부터 확인을 할거에요. 계속버튼 클릭

구글계정에서 n8n이 어느 정보까지 액세스할 건 유저에게 묻는 화면입니다. 모두 선택을 선택하겠습니다.

성공!!!

이제 이메일을 n8n에서 사용해봅시다.

클로드에서 html문서를 만들어달라고 할게요. html에 style을 포함해서 작성하라고 하면 css내용을 포함해서 만들어줍니다. html 코드를 n8n에 복붙할 거에요.

아티팩트의 코드를 복사합니다. (코드 수정해서 css적용됩니다.)

<!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>