blevels

Home / AI / AI 바이브코딩 / AI로 캘린더 할일 앱 만들기 — 구글 캘린더 API 연동 1시간

VIBE

AI로 캘린더 할일 앱 만들기 — 구글 캘린더 API 연동 1시간

게시일 2026-04-30수정일 2026-04-30
공식 링크
On this page

Google Calendar API를 붙이면 "오늘 일정 알려줘"라는 한 마디가 실제 캘린더를 읽어 답변하는 AI 앱이 된다. OAuth 인증과 API 연동 두 단계만 넘으면 1시간 안에 동작하는 결과물을 얻을 수 있다.

:::callout type=info 이 튜토리얼은 Cursor 1.0 / Claude Sonnet 4.6 / Next.js 16 / Node.js 20 기준입니다 (2026-04). 도구 업데이트 시 검토 필요. :::

목표

Google Calendar API를 연동해 일정을 등록하고 조회하는 할일 앱을 AI와 함께 만든다. OAuth 인증 설정부터 AI 요약 UI 완성까지 단계별로 진행하며, 코딩 경험이 없어도 따라갈 수 있다.

준비물

  • Google Cloud Console 계정 (무료)
  • Node.js 20 이상
  • Cursor IDE (cursor.sh)
  • Anthropic API 키

1단계 — Google Cloud 프로젝트 및 OAuth 설정

Google Cloud Console에 접속해 새 프로젝트를 생성한다.

1. APIs & Services → Enable APIs 에서 "Google Calendar API" 검색 후 활성화 2. OAuth consent screen 설정 — 앱 이름, 이메일 입력. 테스트 사용자에 본인 이메일 추가 3. Credentials → Create Credentials → OAuth 2.0 Client ID — 유형: Web application 4. 승인된 리다이렉트 URI에 http://localhost:3000/api/auth/callback/google 추가 5. Client ID와 Client Secret 복사

AD

2단계 — Next.js 프로젝트 생성 및 패키지 설치

Cursor 터미널에서 실행한다.

npx create-next-app@latest calendar-ai-app \
  --typescript --tailwind --eslint --app

cd calendar-ai-app
npm install next-auth googleapis @anthropic-ai/sdk

.env.local 파일을 프로젝트 루트에 생성한다.

GOOGLE_CLIENT_ID=발급받은_client_id
GOOGLE_CLIENT_SECRET=발급받은_client_secret
NEXTAUTH_SECRET=랜덤32자이상문자열
NEXTAUTH_URL=http://localhost:3000
ANTHROPIC_API_KEY=발급받은_api_key

3단계 — NextAuth Google OAuth 인증 설정

src/app/api/auth/[...nextauth]/route.ts 파일을 만들고 Cursor에 아래 프롬프트를 입력한다.

NextAuth.js를 Google OAuth provider로 설정해줘.
accessToken을 session에 포함시켜 Calendar API 호출에 쓸 수 있게 하고,
scope에 calendar.readonly와 calendar.events 포함해줘.

Claude가 생성한 코드를 그대로 적용하면 /api/auth/ 엔드포인트가 완성된다.

AD

4단계 — Calendar API 연동 및 AI 요약 구현

src/app/api/calendar/route.ts를 만들고 Cursor에 입력한다.

Google Calendar API로 오늘부터 7일간 일정을 조회하고,
결과를 Anthropic API에 전달해 자연어로 요약하는 Next.js API route를 만들어줘.
인증은 NextAuth session의 accessToken 사용.
// 핵심 구조 예시
import { google } from 'googleapis';
import Anthropic from '@anthropic-ai/sdk';

export async function GET() {
  const session = await getServerSession();
  const calendar = google.calendar({ version: 'v3', auth: getOAuthClient(session) });

const events = await calendar.events.list({
    calendarId: 'primary',
    timeMin: new Date().toISOString(),
    maxResults: 10,
    singleEvents: true,
    orderBy: 'startTime',
  });

const client = new Anthropic();
  const summary = await client.messages.create({
    model: 'claude-sonnet-4-6',
    max_tokens: 500,
    messages: [{
      role: 'user',
      content: `다음 일정을 친절하게 요약해줘: ${JSON.stringify(events.data.items)}`
    }]
  });

return Response.json({ summary: summary.content[0].text });
}

5단계 — UI 완성 및 검증

Cursor에 아래 프롬프트로 프론트엔드를 생성한다.

Tailwind CSS로 Google Calendar 연동 할일 앱 UI를 만들어줘.
로그인 버튼, 이번 주 일정 카드, AI 요약 섹션을 포함해줘.
npm run dev

http://localhost:3000에서 Google 로그인 → 일정 조회 → AI 요약 흐름을 순서대로 검증한다.

결과

동작 확인 체크리스트:

  • [ ] Google 로그인 후 accessToken이 세션에 저장되는가
  • [ ] /api/calendar 호출 시 이번 주 일정 JSON이 반환되는가
  • [ ] AI 요약 텍스트가 화면에 표시되는가

다음 단계

일정 추가·삭제 기능은 calendar.events.insert() / calendar.events.delete() API를 동일한 방식으로 연동한다.

관련 튜토리얼: google-calendar-api / nextauth / cursor

AD