개발자 없이 서버를? AI와 Make로 '문의하기' 기능 10분 만에 구현하기

"문의하기 버튼, 장식품으로 두실 건가요?"

지난 3부작 시리즈를 통해 우리는 돈 한 푼 들이지 않고 멋진 포트폴리오 사이트를 배포했다. 하지만 한 가지 치명적인 문제가 있다. 방문자가 'Contact(문의하기)' 폼에 내용을 입력하고 전송 버튼을 눌러도... 아무 일도 일어나지 않는다.

이유는 간단하다. 정보를 받아서 처리해 줄 '서버(Backend)'가 없기 때문이다. 이 기능을 구현하려면 과거에는 PHP나 Node.js 같은 어려운 서버 언어를 배워야 했다. 하지만 우리는 든든한 지원군 '클로드(Claude)'가 있고, 최근 자동화로 유명한 '메이크(Make)'까지 활용한다면 손쉽게 구축이 가능하다.

오늘은 클로드에게 "기능 좀 추가해 줘"라고 부탁하고, 자동화 툴 'Make'를 연결해 단 10분 만에 '문의 내용이 내 메일로 자동 전송되는 시스템'을 구축해 보겠다. 서버 비용 0원, 코딩 지식 0으로 가능한 '서버리스(Serverless)'의 마법을 경험해 보자.

준비물: 딱 3가지만 챙기세요

내 웹사이트 코드 파일: 지난번에 저장한 index.html 파일
Make 계정: Make.com (무료)
클로드(Claude): 우리의 영원한 수석 개발자

Step 1. Make에서 '디지털 우체통' 만들기

웹사이트에서 보낸 데이터를 받아줄 '주소'가 필요하다. 이걸 웹훅(Webhook)이라고 부른다.

1. Make 로그인: 로그인 후 우측 상단 [+ Create a new scenario]를 클릭한다.
2. 모듈 추가: 왼쪽의 'Build from scratch'를 선택하자. 그럼 화면 중앙의 거대한 플러스(+) 버튼이 나올 것이다. 해당 버튼을 누르고 검색창에 Webhooks를 입력한다.
3. 트리거 선택: 목록 중 맨 위에 있는 [Custom webhook]을 선택한다.

4. 주소 생성: 설정 창이 뜨면 [Add] 버튼을 누르고 이름(예: My Portfolio Contact)을 적은 뒤 [Save]를 누른다.
5. 주소 복사: https://hook.eu1.make.com/...으로 시작하는 긴 주소가 생겼다. [Copy address to clipboard] 버튼을 눌러 복사해 둔다. (이게 우리 서버 주소다!)

Step 2. 클로드에게 "이 주소로 데이터 쏴줘" 명령하기

이제 클로드에게 다시 코딩을 시킬 차례다. 아티팩트 창이 닫혀있다면, 이전에 저장해 둔 index.html 파일을 메모장으로 열어서 전체 내용을 복사한 뒤 클로드 대화창에 붙여 넣자. (문맥이 이어져 있다면 바로 명령해도 된다.)

아래 프롬프트를 입력한다.

[클로드 프롬프트]
"현재 코드의 Contact 섹션에 있는 <form> 태그 기능을 수정해 줘.
사용자가 내용을 입력하고 '전송' 버튼을 누르면, 자바스크립트의 fetch 함수를 사용해서 아래 주소로 데이터를 전송(POST)하게 해줘.

전송 주소: [아까 복사한 Make 주소를 여기에 붙여넣기]

[요구사항]
1. 페이지가 새로고침 되지 않게 preventDefault()를 써줘.
2. 전송할 데이터는 name, email, message를 JSON 형식으로 담아줘.
3. 전송이 성공하면 alert('성공적으로 발송되었습니다!') 창을 띄우고 입력창을 비워줘."

클로드는 즉시 코드를 수정해서 새로운 아티팩트(Preview)를 보여줄 것이다. 우측 미리 보기 화면에서 '전송' 버튼을 눌러봤을 때 "성공적으로 발송되었습니다!"라는 알림 창이 뜬다면 코드는 완벽하다.

Step 3. 수정된 코드 저장 및 테스트

이제 수정된 코드를 내 컴퓨터에 저장해야 한다.

클로드 아티팩트 창 우측 하단의 [Download] 버튼을 누르거나, 코드를 복사해서 기존 index.html 파일에 덮어쓰고 저장한다.
저장한 index.html 파일을 더블 클릭해서 연다.
Contact 폼에 테스트 정보를 입력한다. (이름: 홍길동, 내용: 테스트입니다)
[전송] 버튼을 누른다. 성공 알림 창이 떴는가?
Make 화면을 보면 "Successfully determined"라는 초록색 메시지가 떴을 것이다. 데이터가 잘 도착했다는 뜻이다!

Step 4. 이메일 연결하고 자동화 완성하기

이제 데이터를 받았으니, 내 메일로 쏴주기만 하면 된다.

1. Webhook 모듈 오른쪽의 반원(Add another module)을 클릭한다.
2. Gmail을 검색하고 [Send an email]을 선택한다. (구글 로그인 필요)
3. 설정 창이 뜨면 아래처럼 채워 넣는다.

To: 내 이메일 주소 (받을 사람)
Subject: [포트폴리오 문의] 새로운 연락이 왔습니다!
Content: 여기가 핵심이다. 입력창을 클릭하면 아까 받은 데이터(홍길동, 테스트입니다 등)가 보라색 풍선으로 뜬다. 이걸 클릭해서 본문에 넣어준다.

4. [OK]를 누르고, 좌측 하단의 [Run once]를 눌러 테스트해 본 뒤, 이상 없으면 [Scheduling: ON]으로 켜두고 저장한다.

Step 5. (가장 중요) 세상 밖으로 업데이트하기

많은 분들이 여기서 멈춘다. "내 컴퓨터에서는 되는데, 스마트폰에서는 안 돼요!"

당연하다. 우리가 수정한 index.html 파일은 아직 내 컴퓨터(Local)에만 있기 때문이다. 이걸 지난 3편에서 썼던 Netlify에 다시 올려줘야 한다.

Netlify 사이트에 접속해서 로그인한다.
[Deploys] 탭으로 이동한다.
화면에 보이는 점선 박스(Drag and drop)에 수정된 index.html이 들어있는 폴더를 다시 드래그해서 넣는다.
"Published" 메시지가 뜨면 끝! 이제 친구에게 보낸 링크에서도 문의 기능이 완벽하게 작동한다.

마무리하며: 클로드와 함께라면 '풀스택'도 가능

이제 당신의 사이트는 살아있다. 누군가 문의를 남기면, 1초 뒤 당신의 스마트폰으로 메일 알림이 '띠링-' 하고 울릴 것이다. 우리는 개발자 없이 클로드와 대화만으로 프론트엔드(화면)와 백엔드(기능)를 모두 구현했다.

이 방식(AI 코딩 + Make 자동화)은 무궁무진하게 확장된다. 문의 내용을 구글 시트에 차곡차곡 쌓을 수도 있고, ChatGPT에게 "정중하게 답장 초안 써줘"라고 시킨 뒤 슬랙(Slack)으로 받을 수도 있다. 상상은 당신이 하고, 구현은 클로드와 Make가 한다. 이것이 2025년형 생산성이다.

[이전 글 보기] 내 사이트 전 세계 무료 배포하기 (Netlify 편)

Tech Vibe