12. 내 메일 관리 대시보드에 AI 넣기 : AI API

🎯

미션 : 내 메일 관리 대시보드를 만들고, Gemini API 로 내게 필요한 기능 5개를 붙이기 메일이 일의 중심입니다. 오늘은 개인 지메일로 연습합니다. 클로드가 지메일 메일을 읽어 정리하고, 그 결과를 휴대폰에서도 보는 대시보드로 만든 뒤, 대시보드 안에 Gemini API 를 넣어 답장 쓰기 · 번역 같은 AI 기능을 붙입니다. 마지막에는 CLAUDE.md 와 스킬로 기준점을 남깁니다.

터미널에는 claude 하나만 입력합니다. 나머지는 모두 채팅창에 말로 시킵니다

「이 명령을 실행해도 될까요?」 창이 뜨면 1. Yes

⏰

3교시는 점심을 사이에 두고 두 시간입니다

① 11:00~11:50 · 📖 왜 API 인가 3분 · Step 0 준비 7분 · Step 1 실습 메일 5분 · Step 2 대시보드 만들기 10분 · Step 3 메일 정리 10분 · Step 4 Gemini 연결 · 배포 15분

② 13:00~13:50 · 따라잡기 5분 · Step 5 인터뷰로 기능 추가 25분 · Step 6 내 답장 양식과 기준점 20분

한눈에 보는 실습 흐름

Plain Text

개인 지메일 ──(지메일 커넥터)──▶ 클로드 코드 : [실습] 메일 읽기 → 분류 · 해운 정보 · 답장 초안 → mails.json
                                                                          │
                                                                          ▼ 버셀 배포
                                          메일 관리 대시보드 (휴대폰에서 열기 · 입장 비밀번호)
                                                                          │
                                                                          ▼ 버튼을 누를 때마다
                                                    Gemini API : 답장 다시 쓰기 · 영문 번역 · 질문하기 · 내가 고른 기능

실습 순서	무엇을 하나	이렇게 되면 성공
Step 0. 준비	Gemini 키 발급, 지메일 커넥터 연결, 작업 폴더 열기	키 메모 · 「지메일 연결됨」
Step 1. 실습 메일	해운 업무 더미 메일 10통을 내 주소로만 받기	받은편지함에 [실습] 10통
Step 2. 대시보드 만들기	한 문장으로 대시보드를 만들고 내 PC에서 열기	샘플 메일이 카드로 보임
Step 3. 메일 정리	클로드가 지메일의 [실습] 메일을 읽어 분류하고 대시보드 데이터로 저장	대시보드에 내 메일 10통
Step 4. Gemini 연결 · 배포	키와 입장 비밀번호를 넣고 버셀에 배포	휴대폰에서 [답장 다시 쓰기] 동작
Step 5. 내 기능 추가	클로드가 인터뷰로 기능 5개를 찾아 주고, 그중 2개를 만들기	`기능목록.md` 와 새 기능 2개
Step 6. 내 양식 · 기준점	평소 답장 꼴을 `reply-templates.md` 로 · `CLAUDE.md` · 스킬 2개 · 커밋	`/clear` 뒤 「메일 정리 돌려줘」 한 줄로 돎

📖

📖 알아보기 · 왜 API 가 필요한가 (3분)

1. 왜 Gemini API 를 넣나요?

내 PC에서는 클로드 코드가 AI 일을 해 줍니다. 그런데 버셀에 올린 대시보드에는 클로드 코드가 없습니다.

휴대폰으로 대시보드를 열고 [답장 다시 쓰기]를 눌렀을 때 AI 가 답하려면, 웹이 직접 부를 수 있는 AI API 가 필요합니다.

오늘은 무료 한도가 있는 Gemini API(모델 gemini-3.5-flash-lite)를 씁니다.

	클로드 코드 + 지메일 커넥터	대시보드 + Gemini API
어디서 도나	내 PC	버셀 서버 (휴대폰 · 어디서든)
하는 일	지메일 읽기 · 분류 · 라벨 · 데이터 만들기	화면에서 누를 때마다 답장 쓰기 · 번역 · 질문
키	없음 (커넥터 연결만)	Gemini API 키 (버셀 서버에만 보관)

⚠️

지킬 것

Gemini 무료 버전은 넣은 내용을 구글이 제품 개선에 쓰고, 사람이 읽을 수도 있습니다. 실습에는 [실습] 더미 메일만 씁니다. 실제 업무 메일 · 개인정보는 넣지 않습니다

API 키는 비밀번호와 같습니다. 채팅창 · 카톡 · 메일 · 깃허브에 붙이지 않습니다. 메모장으로 .env.local 에만 넣습니다

개인 지메일이라도 제목에 [실습] 이 붙은 메일만 읽게 합니다. 메일을 보내는 것은 Step 1 「내 주소로만」 한 번뿐입니다

버셀 주소는 누구나 열 수 있으므로 입장 비밀번호를 꼭 정합니다

🛠️

🛠️ 여기부터 실습입니다 · Step 0 → Step 6 순서대로. 각 Step 끝의 ✅ 가 보이면 다음으로 갑니다

🛠️ 실습 Step 0. 준비 (7분)

① Gemini API 키 발급

Google AI Studio 에 개인 구글 계정으로 로그인 → Get API key → Create API key → 키를 메모장에 복사해 둡니다

회사 구글 계정은 막혀 있을 수 있습니다. 안 되면 개인 계정으로 합니다

② 지메일 커넥터 연결

claude.ai → 설정 → 커넥터 → Gmail → 연결 → 개인 지메일 계정으로 로그인 · 허용

커넥터 목록에 Gmail 이 안 보이면 강사에게 알려 주세요

③ 작업 폴더 열기

바탕화면에 mail-dashboard 폴더를 만들고 VS Code 로 엽니다 → 메뉴 → 터미널 → 새 터미널

⌨️

입력 0-1 · 터미널 · 오늘 터미널에 치는 것은 이것 하나입니다

claude

💬

입력 0-2 · 채팅창

지메일 커넥터가 연결돼 있는지 확인하고, 연결된 지메일 주소를 알려줘. 메일 내용은 읽지 마.

🤖

예시 · 클로드 답변

지메일 커넥터가 연결되어 있습니다. 연결된 주소는 kimminsu.test@gmail.com 입니다. 메일 내용은 열지 않았습니다.

✅

키를 메모했고, 클로드가 내 지메일 주소를 알려 주면 다음 Step

🛠️ 실습 Step 1. 실습 메일 받기 (5분)

💬

입력 1-1 · 채팅창

나는 【부서 · 직무】에서 일한다. 내가 평소에 받는 것과 비슷한 더미 업무 메일 10통을 만들어서 내 지메일 주소로만 보내줘. 제목 맨 앞에 [실습] 을 붙이고, 내가 자주 받는 메일 종류 【부킹 요청 · 운임 견적 문의 · 입항 일정 변경 · 화물 클레임 · 사내 공지】가 골고루 섞이게, 한글 【7】통 · 영문 【3】통. 실제 회사명 · 사람 이름은 쓰지 말고, 【부킹번호 · 선명 · 항차 · 선적항 · 양하항 · ETD · ETA】 같은 내 업무에 나오는 정보를 넣어줘. 다른 주소로는 절대 보내지 마.

✏️

예시 · 입력 1-1 (빨간 【】 자리만 내 업무에 맞게 바꿉니다. 【】 표시는 지웁니다)

수출영업 2팀 : 메일 종류 부킹 요청 · 운임 견적 문의 · 선적 일정 문의 · 지연 항의 · 사내 공지 · 한글 6통 · 영문 4통 · 부킹번호 · 선명 · 항차 · POL · POD · ETD · 컨테이너 종류와 수량

물류센터 운영팀 : 메일 종류 입고 예정 안내 · 출고 요청 · 장기 보관 문의 · 보관료 청구 · 파손 신고 · 한글 9통 · 영문 1통 · 화물번호 · 입고일 · 출고 예정일 · 파레트 수 · 보관 구역

정산 · 회계 : 메일 종류 운임 청구서 · 미수금 독촉 · 입금 확인 · 비용 정산 요청 · 사내 결재 요청 · 한글 8통 · 영문 2통 · 청구서 번호 · 금액 · 통화 · 납부 기한 · 항차

금액 · 번호는 모두 가짜로 만듭니다. 실제 거래처 · 담당자 이름이나 실제 운임은 넣지 않습니다

대시보드의 업무 종류 버튼(부킹 · 견적 · 운항 · 클레임 · 정산 · 사내 · 참고)을 내 업무에 맞게 바꾸고 싶으면 Step 5 인터뷰에서 기능으로 고릅니다

🤖

예시 · 클로드 답변 (수출영업 2팀)

아래 10통을 kimminsu.test@gmail.com 으로만 보냈습니다. 다른 주소로는 보내지 않았습니다.

[실습] [부킹 요청] 부산→로테르담 40HC 2대 / 10월 말 선적

[실습] [스케줄 변경] SAMPLE VOYAGER 0412E ETD 지연 안내

[실습] Rate quotation request - Busan to Los Angeles, 20GP x 5

… 모두 10통 (한글 6 · 영문 4)

받은편지함에서 제목에 [실습] 이 붙은 메일을 확인해 주세요.

메일을 보내도 되는지 물으면 받는 사람이 내 주소인지 확인하고 허용합니다

✅

지메일 받은편지함에 [실습] 메일 10통이 보이면 다음 Step

🛠️ 실습 Step 2. 대시보드 만들기 (10분)

💡

아래 문장 하나로 클로드가 「메일 관리 대시보드」 웹을 통째로 만듭니다. 내용을 다 이해하지 않아도 됩니다. 바꿀 곳 없이 그대로 복사해 붙여 넣습니다. 문장이 길어 보이는 것은, 뒤 Step 에서 쓸 파일 이름과 칸 이름을 미리 정해 두기 때문입니다.

💬

입력 2-1 · 채팅창

버셀에 배포할 「메일 관리 대시보드」 웹을 이 폴더에 만들어줘. Next.js, 외부 패키지는 최소로.

메일은 data/mails.json 에서 읽는다. 이 파일은 나중에 네가 지메일 커넥터로 메일을 읽어 만든다. 웹은 지메일에 직접 접속하지 않는다

mails.json 모양 : { generatedAt, mails: [ { id, receivedAt, from, subject, body, category(부킹 · 견적 · 운항 · 클레임 · 정산 · 사내 · 참고), urgency(오늘 처리 · 이번 주 · 참고만), summary, action, shipping{bookingNo, blNo, vessel, voyage, pol, pod, etd, eta, containers}, draft } ] }. 이 모양을 data/mails.schema.md 에 적어줘

샘플 data/mails.json 에 해운 업무 더미 메일 10통

화면(휴대폰 우선) : 업무 종류 · 급한 정도 걸러 보기와 건수, 메일 카드, 누르면 상세(본문 · 해운 정보 표 · 답장 초안), 맨 위에 마지막 정리 시각. 한글은 word-break: keep-all. 홈 화면에 추가 가능하게

Gemini 는 버셀 서버 함수에서만 부른다. 키는 환경 변수 GEMINI_API_KEY, 모델 gemini-3.5-flash-lite. 브라우저 코드에 키를 넣지 마. 상세 화면 버튼 : [답장 다시 쓰기] (말투 정중 · 간결 고르기) · [영문으로 바꾸기] · [이 메일에 질문하기], 결과마다 [복사]. 메일에 없는 금액 · 날짜 · 번호는 지어내지 말고 [확인 필요]

입장 비밀번호 : 환경 변수 SITE_PASSWORD 와 맞아야 화면과 API 를 쓸 수 있게. 메일을 서버에서 직접 보내는 기능은 만들지 마

기능추가안내.md (기능을 더할 때 고칠 파일 표), .env.example, .gitignore(.env* 제외)

다 만들면 패키지를 설치하고 내 PC에서 실행해서 열 주소를 알려줘. 비밀번호는 test 로 임시 실행해줘

이 문장에 들어 있는 것 (쉬운 말로)

문장 속 말	쉬운 말로
버셀에 배포할 웹, Next.js, 패키지 최소	인터넷에 올릴 수 있는 웹을 만든다. 설치할 부품은 적게 써서 오류를 줄인다
메일은 `data/mails.json` 에서 읽는다	웹은 클로드가 정리해 둔 메일 파일만 보여 준다. 지메일에 직접 들어가지 않는다 (지메일은 Step 3 에서 클로드가 읽는다)
`mails.json` 모양 (id, from, subject, category …)	메일 한 통마다 담을 칸 목록 : 보낸 사람 · 제목 · 본문 · 업무 종류 · 급한 정도 · 한 줄 요약 · 할 일 · 해운 정보(부킹번호 · 선명 · 항차 …) · 답장 초안. Step 3 에서 클로드가 이 칸대로 채운다
샘플 메일 10통	연습용 가짜 메일을 미리 넣어 둔다. 지메일을 연결하기 전에도 화면을 볼 수 있다
화면(휴대폰 우선)	휴대폰에서 보기 좋게. 업무 종류 · 급한 정도 버튼으로 걸러 보고, 메일을 누르면 자세히. 맨 위에 「마지막 정리 시각」이 있어 오늘 정리됐는지 알 수 있다
word-break: keep-all	한글이 단어 중간에서 줄이 끊기지 않게 하는 설정
홈 화면에 추가 가능하게	휴대폰 바탕화면에 앱처럼 아이콘을 둔다
Gemini 는 버셀 서버 함수에서만, 키는 `GEMINI_API_KEY`	AI 버튼을 누르면 버셀 서버가 Gemini 를 부른다. 키는 화면 코드에 넣지 않는다. 넣으면 사이트를 연 누구나 키를 볼 수 있다
버튼 3개 : 답장 다시 쓰기 · 영문으로 바꾸기 · 질문하기, [복사]	대시보드 안에서 쓰는 AI 기능. 결과는 [복사] 로 가져가 지메일 · 아웃룩 회신 창에 붙여 넣는다
없는 금액 · 날짜 · 번호는 [확인 필요]	AI 가 숫자를 지어내지 않게 한다
입장 비밀번호 `SITE_PASSWORD`, 보내기 금지	비밀번호를 아는 사람만 들어온다. 웹에서는 메일을 보낼 수 없다
`기능추가안내.md` · `.env.example` · `.gitignore`	기능을 더할 때 고칠 파일 안내서 · 키를 넣을 자리 견본 · 깃허브에 올리지 않을 목록 (키 파일은 올라가지 않음)
설치하고 실행해서 주소, 비밀번호 test	다 만들면 내 PC 에서 바로 열어 볼 수 있게 해 준다. 연습용 비밀번호는 test

클로드가 알려 준 주소(예 : http://localhost:3000)를 브라우저로 열고, 비밀번호 test 로 들어갑니다

클로드가 설치나 실행을 해도 되는지 물으면 1. Yes (만들기에 3~4분 걸립니다)

🤖

예시 · 클로드 답변 (실제로 돌려 본 답변을 줄인 것)

웹을 다 만들고 패키지를 설치했습니다.

data/mails.json 해운 더미 메일 10통 · data/mails.schema.md 칸 설명

화면 전체(걸러 보기 · 카드 · 상세 · AI 버튼 · 복사) · Gemini 호출(서버 전용) · 입장 비밀번호 · 홈 화면 아이콘

외부 패키지는 next · react · react-dom 만 썼습니다. 보내기 기능은 만들지 않았습니다

열 주소는 http://localhost:3000 이고 비밀번호는 test 입니다. AI 버튼을 쓰려면 .env.local 에 GEMINI_API_KEY 를 넣어 주세요.

내 PC 브라우저에서 보이는 화면 (샘플 메일)

✅

샘플 메일 10통이 카드로 보이고, 업무 종류 버튼으로 걸러지면 다음 Step

🛠️ 실습 Step 3. 메일 정리 : 지메일 → 대시보드 (10분)

💬

입력 3-1 · 채팅창

지메일 커넥터로 제목에 [실습] 이 들어간 메일만 최근 20통 읽어줘. 다른 메일은 열지 마. data/mails.schema.md 모양대로 업무 종류 · 급한 정도 · 한 줄 요약 · 내가 할 일 · 해운 정보 · 답장 초안(받은 메일과 같은 언어)을 채워서 data/mails.json 을 새로 만들어줘. 메일에 없는 값은 비워 둬. 지메일에는 업무 종류 라벨만 붙이고, 메일을 보내거나 지우지 마.

🤖

예시 · 클로드 답변

제목에 [실습] 이 들어간 메일 10통을 읽었습니다. 다른 메일은 열지 않았습니다.

급한 정도 : 오늘 처리 5 · 이번 주 4 · 참고만 1

업무 종류 : 부킹 2 · 견적 2 · 운항 1 · 클레임 2 · 정산 1 · 사내 1 · 참고 1

지메일에 「업무/부킹」 같은 라벨 7개를 만들어 붙였습니다

메일에 없는 부킹번호 · ETA 는 비워 두었습니다

data/mails.json 을 새로 저장했습니다. 메일을 보내거나 지우지 않았습니다.

위 답변과 화면은 강사 지메일로 실제로 돌린 결과입니다 (10통 · 라벨 7개)

대시보드 화면을 새로고침합니다

✅

대시보드에 내 지메일의 [실습] 메일이 보이고, 지메일에도 업무 종류 라벨이 붙어 있으면 다음 Step

🛠️ 실습 Step 4. Gemini 연결하고 배포하기 (15분)

① 키 넣기 (직접)

💬

입력 4-1 · 채팅창

이 폴더에 .env.local 파일을 만들고 GEMINI_API_KEY= 와 SITE_PASSWORD= 두 줄만 빈 값으로 적어줘. 값은 내가 넣을게.

VS Code 왼쪽 파일 목록에서 .env.local 을 열고, = 뒤에 메모해 둔 Gemini 키와 내가 정한 입장 비밀번호를 붙여 넣고 저장(Ctrl+S)합니다. 키는 채팅창에 붙이지 않습니다

② 내 PC에서 확인

💬

입력 4-2 · 채팅창

.env.local 값으로 다시 실행해줘. 값은 화면에 보여주지 마.

대시보드에서 메일 하나를 눌러 [답장 다시 쓰기] 를 눌러 봅니다

③ 배포 (1회차에 만든 버셀 계정을 씁니다. 로그인이 풀렸으면 「버셀에 로그인해줘」)

💬

입력 4-3 · 채팅창

.env.local 의 두 값을 화면에 보여주지 말고 버셀 환경 변수(Production)로 등록한 다음, 이 폴더를 버셀에 배포하고 주소를 알려줘.

🤖

예시 · 클로드 답변

.env.local 의 값 2개를 버셀 환경 변수(Production)로 등록했습니다. 값은 화면에 표시하지 않았습니다.

배포가 끝났습니다 : https://mail-dashboard-kimminsu.vercel.app

휴대폰으로 열고 입장 비밀번호를 넣으면 됩니다.

받은 주소를 휴대폰으로 열고 → 입장 비밀번호 → 메일 하나 → [답장 다시 쓰기] · [영문으로 바꾸기]

휴대폰 브라우저 메뉴의 홈 화면에 추가를 누르면 앱처럼 쓸 수 있습니다

휴대폰에서 보이는 화면 (샘플 메일)

[답장 다시 쓰기] 를 눌렀을 때 (실제 배포판 · Gemini 연결)

메일에 없는 스케줄 · 운임은 지어내지 않고 [확인 필요] 로 남깁니다. [이 메일에 질문하기] 에 메일에 없는 것을 물으면 「메일에서 확인되지 않습니다」라고 답합니다

✅

휴대폰에서 Gemini 버튼이 답을 주면 다음 Step

3교시 ② · 13:00~13:50 : 기능 추가 · 내 답장 양식 · 기준점

🧰

따라잡기 (5분) : 오전에 Step 4 배포까지 못 했으면 아래 완성 예시 키트로 바로 이어갑니다. 샘플 메일 10통과 기능이 다 들어 있습니다.

파일을 받아 바탕화면에 풀면 mail-dashboard 폴더가 생깁니다. 그 폴더를 VS Code 로 열기 → 터미널 → claude

「패키지를 설치하고 .env.local 을 .env.example 처럼 만들어줘. 값은 내가 넣을게」 → Gemini 키 · 입장 비밀번호 넣기

「값을 보여주지 말고 버셀 환경 변수로 등록한 다음 배포해줘」

✅ 휴대폰에서 배포 주소가 열리고 샘플 메일 10통이 보이면 Step 5 로

mail-dashboard-catchup-kit.zip43.14 KiB

🛠️ 실습 Step 5. 인터뷰로 내 기능 추가하기 (25분)

💬

입력 5-1 · 채팅창 · 인터뷰

나는 【부서 · 직무】에서 메일로 일한다. 이 대시보드에 넣으면 좋을 기능을 인터뷰로 찾아줘. 한 번에 질문 하나씩, 질문마다 보기를 주고, 질문은 5개까지. 끝나면 기능 5개를 「무엇을 하나 · Gemini 를 쓰나 · 만드는 데 걸리는 시간」 표로 정리해서 기능목록.md 로 저장해줘.

✏️

예시 · 입력 5-1

나는 수출영업 2팀에서 메일로 일한다. …

보기로 나올 만한 기능 (강사 대시보드에 실제로 넣은 11가지) : 검색(부킹 번호 · B/L · 선명) · 급한 순 정렬 · 「오늘 처리 남음」 칸 · 처리 완료 표시 · 지메일에서 열기 · 초안 직접 고치기 · [확인 필요] 노란 강조 · 해운 번호 눌러서 복사 · 영문 메일 한글 요약 · 내 양식으로 다시 쓰기 · 메일 보내기(작성 창 열기)

🤖

예시 · 인터뷰와 결과 (수출영업 2팀)

질문 1/5 메일 일에서 시간이 가장 오래 걸리는 것은?

1) 답장 쓰기 2) 메일 찾기 3) 기한 챙기기 4) 영문 메일 읽기 · 쓰기 5) 직접 입력

→ 내 답 : 1. 매번 같은 꼴로 답장을 새로 써

질문 2/5 답장은 주로 어디서 쓰나요? … (질문 5개까지)

기능목록.md

내 답장 양식으로 다시 쓰기 · Gemini · 10분

검색 (부킹 번호 · B/L · 선명) · 화면만 · 5분

처리 완료 표시 · 완료 숨기기 · 화면만 · 5분

영문 메일 한글로 요약하기 · Gemini · 5분

해운 번호 눌러서 복사 · 화면만 · 5분

💬

입력 5-2 · 채팅창 · 만들기

기능목록.md 의 1번과 2번을 하나씩 만들어줘. 그리고 메일 보내기도 추가해줘 : [지메일로 보내기] 를 누르면 받는 사람 · Re: 제목 · 초안이 채워진 지메일 작성 창만 열리게. 서버에서 직접 보내지는 마. 하나 만들 때마다 내 PC 화면에서 확인받고, 둘 다 끝나면 빌드가 통과하는지 보고 버셀에 다시 배포해줘.

기능을 더하면 이렇게 됩니다 (강사 완성 예시 · 기능 11가지 · 실제 배포판 · [실습] 메일)

메일 보내기 : [지메일로 보내기] 를 누르면 받는 사람 · Re: 제목 · 초안이 채워진 지메일 작성 창이 열립니다. [보내기] 는 내가 누릅니다. 아웃룩을 쓰면 [메일 앱으로 보내기]. 웹 서버에는 메일 계정 권한을 두지 않습니다

✅

기능목록.md 에 기능 5개가 있고, 2개가 배포된 화면에서 동작하면 다음 Step. 나머지 3개는 실전 프로젝트에서 이어서 만듭니다

🛠️ 실습 Step 6. 내 답장 양식과 기준점 (20분)

답장 초안이 내가 평소 쓰던 꼴로 나오게 하고, 지금 상태를 「이 대시보드는 이렇게 만들고, 이렇게 돌린다」로 남깁니다. 다음부터는 여기서 출발합니다.

① 내 답장 양식 만들기

지메일이나 아웃룩 보낸편지함에서 내가 보냈던 답장 2~3통(부킹 회신 · 견적 회신 · 영문 회신 등)을 복사합니다

붙이기 전에 거래처 이름 · 사람 이름 · 금액 · 번호는 {받는 분} {금액} 처럼 { } 로 바꿉니다. 서명의 전화 · 메일도 가짜 값으로 바꿉니다. 이 양식은 무료 Gemini 와 깃허브로 갑니다

보낸 답장을 꺼내기 어렵거나 회사 규정상 안 되면 「해운 영업 답장 예시 3통을 만들어서 그걸로 양식을 만들어줘」라고 합니다

💬

입력 6-1 · 채팅창 · 내 답장 양식

내가 평소에 쓰던 답장을 아래에 붙일게. 거래처 · 사람 이름 · 금액은 { } 로 바꿨어. 이 꼴(인사말 · 목록 · 맺음 · 서명)을 업무 종류별(부킹 · 견적 · 운항 · 클레임 · 정산 · 영문)로 정리해서 data/reply-templates.md 로 저장해줘. 없는 업무 종류는 비슷한 꼴로 만들어 주고, 맨 위에 「내 정보」(이름 · 팀 · 회사 · 전화 · 메일) 칸을 두고 내게 물어서 채워줘. 그다음 [내 양식으로 다시 쓰기] 버튼(없으면 [답장 다시 쓰기] 의 이름을 바꿔서)과 mails.json 의 답장 초안이 이 파일을 따르게 바꾸고, 빌드가 통과하면 배포해줘.

(여기에 내 답장 2~3통 붙이기)

🤖

예시 · 클로드 답변 (강사 대시보드에서 실제로 돌린 결과)

붙여 주신 답장 3통에서 꼴을 뽑아 data/reply-templates.md 로 저장했습니다.

공통 : 첫 줄 「{받는 분} 님, 안녕하세요.」 · 둘째 줄 「{내 회사} {내 팀} {내 이름}입니다.」 · 본문은 「- 항목: 값」 목록 · 서명 3줄

업무 종류별 : 부킹 · 견적 · 운항 · 클레임 · 정산 · 영문 (운항 · 정산은 비슷한 꼴로 만들었습니다)

[내 양식으로 다시 쓰기] 는 메일의 업무 종류에 맞는 양식을 골라 Gemini 에 함께 보냅니다

mails.json 의 초안 8개를 내 양식으로 다시 썼습니다 (사내 공지 · 뉴스레터 2통은 답장이 필요 없어 초안 없음). 메일에 없는 스케줄 · 운임은 [확인 필요] 로 두었습니다

양식을 바꾸고 싶으면 data/reply-templates.md 만 고칩니다. 클로드 초안과 대시보드 버튼이 함께 바뀝니다

② 기준점 만들기

💬

입력 6-2 · 채팅창 · 기준점

지금까지 만든 대시보드를 보고 이 폴더의 CLAUDE.md 를 만들어줘. 답장 초안은 반드시 data/reply-templates.md 를 먼저 읽고 그 꼴을 따른다는 규칙을 맨 앞에 넣고, 폴더 구조와 mails.json 모양, 지켜야 할 것([실습] 메일만 읽기 · 보내지 않기 · 키는 서버에만 · 입장 비밀번호 유지), 고친 뒤 확인하는 순서(빌드 → 배포), 추가한 기능 목록을 넣어줘.

그리고 스킬 두 개를 저장해줘.

「메일 정리 돌려줘」 : Step 3 메일 정리부터 버셀 배포까지

「대시보드 기능 추가」 : 인터뷰로 기능 고르기부터 하나씩 만들고 확인 · 빌드 · 배포까지

💬

입력 6-3 · 채팅창 · 깃허브에 기준점 저장 (2교시에 배운 것)

이 폴더를 깃허브에 【영문이름】-mail-dashboard 라는 비공개(private) 리포지토리로 올려줘. .env.local 은 올라가지 않게 확인하고, 커밋 이름은 「기준점 : 대시보드 + 기능 2개」로 해줘.

💬

입력 6-4 · 채팅창 · 확인

/clear → 메일 정리 돌려줘

🤖

예시 · 클로드 답변

6-2 : CLAUDE.md 를 만들었습니다 (폴더 구조 · 답장은 내 양식으로 · mails.json 모양 · 지킬 것 4가지 · 빌드 → 배포 순서 · 추가한 기능 2개). 스킬 2개를 .claude/skills/ 에 저장했습니다 : mail-sync(메일 정리 돌려줘) · dashboard-feature(대시보드 기능 추가)

6-3 : kim-minsu-mail-dashboard 비공개 리포지토리에 올렸습니다. .env.local 은 올라가지 않았습니다. 커밋 : 「기준점 : 대시보드 + 기능 2개」

6-4 : mail-sync 스킬로 [실습] 메일 10통을 다시 정리하고, reply-templates.md 를 읽어 내 양식으로 초안을 쓴 뒤 배포했습니다. 마지막 정리 시각이 바뀌었습니다

✅

설명하지 않았는데 같은 순서로 정리 → 내 양식 초안 → 배포까지 돌면 실습 끝입니다

🔗

4교시와 이어집니다 : 4교시 스케줄링에서 「매일 아침 8시 30분 메일 현황 알림」을 등록하고, 심화에서 8시 20분 『메일 정리 돌려줘』까지 걸면, 대시보드가 아침마다 새로 고쳐집니다. PC가 꺼져 있으면 돌지 않고, 다음에 켤 때 한 번 돕니다.

아웃룩으로 바꾸려면 (교육 뒤 · 회사와 함께)

순서	할 일
1. 회사 IT 승인	Claude 조직 소유자가 Microsoft 365 커넥터를 켜고, 회사 Microsoft 365 관리자가 한 번 동의합니다
2. 연결	`claude.ai` → 설정 → 커넥터 → Microsoft 365 → 회사 계정으로 연결
3. 바꾸기	💬 「『메일 정리 돌려줘』 스킬과 `CLAUDE.md` 를 Microsoft 365 커넥터를 쓰게 바꿔줘. 라벨 대신 아웃룩 범주를 붙이고, 읽는 범위는 『대시보드』 폴더로. mails.json 모양은 그대로」 → 대시보드 웹은 그대로 씁니다
4. 매일 자동으로	꺼지지 않는 사무실 PC에서 「메일 정리 돌려줘」를 매일 아침 예약 실행합니다. 노트북을 닫아도 대시보드는 휴대폰에서 계속 볼 수 있고, 정리는 사무실 PC가 합니다

⚠️

실제 업무 메일이 되면 꼭 바꿀 것

Gemini 무료 키 → 회사 결제 유료 키 (또는 Gemini 버튼을 끄고 클로드에서만 처리)

공개 버셀 주소 + 비밀번호 → 회사 보안 담당과 상의해 접근 보호가 되는 곳에 둠

[실습] 제목 → 특정 폴더만 읽기 (아웃룩 규칙으로 필요한 메일만 그 폴더로)

막혔을 때

아래 문장은 모두 💬 채팅창에 입력합니다.

이럴 때	채팅창에 입력
커넥터 목록에 Gmail 이 없다	(입력 없음) 강사에게 알립니다. 그동안 Step 2 샘플 메일로 Step 4 부터 진행합니다
AI Studio 에서 키 발급이 막힌다	(입력 없음) 회사 계정이면 개인 구글 계정으로 다시 로그인합니다
내 PC 실행 주소가 안 열린다	「실행 중인 서버가 있는지 보고, 없으면 다시 실행해서 주소를 알려줘」
[답장 다시 쓰기] 에 「GEMINI_API_KEY 환경 변수가 설정되지 않았습니다」	「.env.local 값이 반영됐는지 확인하고 다시 실행해줘. 값은 보여주지 마」 · 배포판이면 「버셀 환경 변수에 등록됐는지 보고 다시 배포해줘」
배포 주소에서 비밀번호 화면이 계속 뜬다	「버셀 환경 변수 SITE_PASSWORD 가 등록됐는지 보고 다시 배포해줘」
대시보드에 내 메일이 안 보이고 샘플만 보인다	「data/mails.json 이 내 [실습] 메일로 바뀌었는지 보고, 배포판에도 반영해줘」
배포 때 「No Output Directory named ‘public’」	「이 프로젝트는 Next.js 야. vercel.json 에 framework 를 nextjs 로 적고 다시 배포해줘」
빌드 오류가 난다	「빌드 오류를 읽고 고친 다음, 빌드가 통과하는지 확인해줘」
기능을 추가하다 망가졌다	「깃허브 기준점 커밋으로 되돌려줘」 (Step 6 뒤) · 그 전이면 「방금 고친 것을 되돌려줘」

같은 Step 에서 10분 넘게 막히면 손을 들어 강사를 부릅니다