SchedAI 개발기 ep 1. 기본 기획 및 설계과정

SchedAI는 제가 현재 만들고 있는 구글 캘린더와 LLM(ChatGPT,Claude,LLama etc)을 결합한 웹앱입니다.

저는 성인 ADHD를 앓고있습니다(뇌피셜)

맨날 이것저것 하다가 뭐하다가 저거하다가 그럽니다. 그나마 개발이랑 방구석에서 기타 칠 때만 조금 집중하는 것 같습니다. ㅋㅋㅋ... 근데 요즘 많은 분들이 저랑 비슷하신 것 같습니다. 진짜 숏폼 끊는게 답인거 같습니다.

무튼, 그러한 이유로 저는 요즘 항상 노트에 제가 뭘했는지, 앞으로 뭘할건지, 시간관리가 어떻게 이루어지는지 상세히 적곤합니다.(J아님 ㅋ) 그리고 최근에 레버리지에 대한 강의를 들어서, 더욱 정리하고 시간을 쪼개서,

딴짓하는 시간을 줄이고 한정된 시간이라는 자원을 최대한으로 활용해보려고 합니다. 그러기 위해서 챗지피티를 완벽한 제

비서 Secretary; personal assistant

로 만들고 싶어서 시작하게 되었습니다.

기획에 목숨거는 이유...

처음엔 원래 구글 캘린더와 gpts를 연동하려는 계획에서 시작했다. 현재 gpts중에 참고할 만한 것으로는

mixerBox가 있다. 찾아보니 처음부터 연동되는 건 아니고 어플을 깔아서 회원가입을 하고 구글 캘린더 또는 그 외적인것들을 서비스와 연결해놓고 gpts와 연결가능한 api를 자체적으로 구축한것 같았다. (혹시 이 내용에 대해 더 알거나 사용해보신 분은 댓글로 알려주세요!)

아주 간단하게 연동해서 진정한 의미의 GPT 개인 비서를 만들어 내고 싶었다. 하지만, mixerbox나 다른 gpts에는 내가 좀더 커스텀 할 수 있는 부분들이 부족했다. 그래서 그냥 서비스를 직접개발하기로 했다. 나는 이런거 못참는...그런인간이니까...

AI가 생긴이후로 원래 일주일 정도 걸리는 작업이 거의 하루면 끝나는 속도가 되었다. 하지만 AI는 아직 생각보다 부족하다.

그냥 내가 활용하는 능력이 부족하기도 하고, 방대한 지식속에서 단순히 몇글자 만으로, 내가 원하는 결과를 뽑아내기란 쉽지않았다. 다양한 프롬프트를 사용도 해보고 역할놀이도 참 많이 했었는데, 몇번 AI를 사용하다 보니 AI는 성능이 뛰어나지만, 내가 하는 말을 잘 못알아 먹는 . 게크다는 사실을 알았다.

일단 AI와 나는 배경지식부터 다르다.

예를 들어 nextjs15로 개발한다 하면, AI의 데이터 속에는 아주 옛날 nextjs1부터 15까지 엄청난 데이터들 속에서 14로만 되어있는 데이터를 골라야 한다. 아무리 학습을 잘시키고 성능이 좋아도, 그냥 nextjs15로 뭐시기뭐시기 개발해줘. 라고 하면 갑자기 13버전에 있는 레거시 코드를 떡하니 등장시킬수도 있다. AI를 많이 써보신 분들은 알겠지만 AI는 긍정 프롬프트로 다루는 게 경제적이다. 네거티브 프롬프트가 점점많아지면 경제적이지 못하고 프롬프트만 길어지고, 원하는 결과가 잘 나오지 않는다.

이러한 시행착오들을 겪고 나니, 예전에 기획도 없이 바로 코드부터 갈겼던 내가 한심해졌다. AI를 잘 다루기 위해서는 매우 좋은 기획력이 필요하고,,, 우리는 다행이도 머리좋은 기획자도 이미 소유하고 있다. = 역시 지피티 행님

이전 프로젝트를 할때는 적당히 요구사항명세서만 만들어서 했었다. 하지만 그렇게 개발하니 코드들이 하나하나 나올때 마다 유기적인 관계가 많이 떨어지는 현상이 많이 보였다. 그래서 더 잘게 쪼개고 기획을 탄탄히 잡아나가기로 했다.

아래는 AI가 제작해준 요구사항 명세서의 초안을 내가 조금 더 보완한 것이다. 마지막 부분에 개발일정을 만들었는데,

다음스텝으로는 이 개발일정의 각부분을 상세하게 업그레이드 할것이다. 

 

 

---

SchedAI 요구사항 명세서초안

1. 프로젝트 개요

Google Calendar와 ChatGPT를 연동하여 사용자가 채팅형 인터페이스로 일정을 관리하고 대화를 통해 효율적인 비서 역할을 수행할 수 있는 웹 애플리케이션을 개발합니다. 주요 사용 사례로는 바쁜 직장인이 자연어로 일정을 추가하고, 자동 리마인더를 생성하거나 일정 변경 내역을 간편하게 추적하는 경험을 제공합니다.

• 백엔드: Next.js v14
• 스타일링: Tailwind CSS: Glassmorphism
• 핵심 기능:
  • Google 계정을 통한 사용자 로그인 및 인증
  • OpenAI API를 활용한 대화형 채팅 기능
  • Google Calendar 변경사항을 로그 형태로 확인 가능
  • AI 기반의 커스텀 기능을 제공하여 사용자의 선호도와 패턴에 맞춘 개인화된 일정 관리
• 목표 사용자:
  • 일정 관리가 필요한 직장인, 학생, 프리랜서.
• 주요 사용 사례:
  • "다음 주 금요일 오후 2시에 회의 추가해줘"와 같은 요청을 처리.
  • 자동 리마인더 생성 및 일정 변경사항 추적.

---

2. 기능 요구사항

2.1 사용자 인증 및 관리

• Google OAuth 2.0을 통해 로그인.
• 인증된 사용자에게 JWT 토큰 발급.
• 사용자는 발급된 토큰을 통해 API 호출 가능.
• 토큰 소진 시 결제 페이지로 리다이렉트.

2.1.1 추가 고려사항

• 토큰 사용량 알림: 사용자가 토큰 소진에 근접했을 때 알림 제공.
• 결제 시스템 연동: 나이스 페이먼츠와 연동하여 간편 결제 제공.
• 다중 계정 관리: 개인 계정과 회사 계정의 통합 관리.

---

2.2 대화형 채팅 인터페이스

• 기본 UI는 대화형 채팅창.
• 사용자는 자연어로 명령을 입력하여 일정을 관리하거나 질문 가능.
• ChatGPT가 다음 작업 수행:
  • Google Calendar 이벤트 조회.
  • 새 일정 추가.
  • 일정 변경 및 삭제.
  • 일정 리마인더 생성.

2.2.1 추가 고려사항

• 대화 맥락 유지: 사용자의 이전 요청을 기준으로 자연스러운 응답을 제공합니다. 이를 위해 AI 메모리가 대화 내역을 실시간으로 저장하고 필요 시 참조합니다. 사용자가 대화 맥락을 재설정하거나 초기화할 수 있는 기능을 추가해, 특정 요청 이후 새 대화 흐름을 시작할 수 있도록 지원합니다.
• 다국어 지원: 초기 지원 언어로 한국어와 영어 제공, 향후 일본어, 중국어 등 확장.
• 대화 세션 저장 및 재조회 기능 추가.

---

2.3 Google Calendar 연동

• Google Calendar API를 활용하여 일정 데이터 동기화:
  • 사용자 이벤트 조회 (캘린더 ID별).
  • 새 이벤트 추가.
  • 기존 이벤트 수정 및 삭제.
• 변경사항 로그 페이지:
  • 사용자가 원하는 시점에 Google Calendar 변경 로그를 확인 가능.
  • 필터 기능 제공 (날짜, 이벤트 유형 등).
  • 검색 기능 추가.

2.3.1 추가 고려사항

• 캘린더 동기화 주기 설정 (실시간, 10분 단위 등).
• 이벤트 알림 제공 (예: 이메일, 푸시 알림).
• Google Workspace와 통합 지원.

---

2.4 커스텀 기능: AI 기반 메모리 및 학습

• AI 메모리 아카이브:
  • 사용자의 Google Calendar 데이터와 대화 내용을 클라우드 기반 서버에 아카이브하여 저장합니다. 데이터는 AES-256 암호화를 통해 보호되며, 접근은 인증된 사용자만 가능합니다. GDPR 및 국내 개인정보 보호법을 준수하며, 사용자는 데이터 보관 기간과 삭제를 관리할 수 있습니다.
  • 대화 내용 기반으로 개인화된 일정 추천 및 자동화.
  • 데이터 암호화 및 GDPR 준수.
• 사용자 선호도 학습:
  • 일정 패턴, 빈 시간대 분석, 반복 일정 학습.
  • 사용자의 일정 변경 기록을 분석하여 최적의 일정 제안.
• AI 학습 데이터 관리:
  • 데이터 보관 기간 및 삭제 정책 설정.

2.4.1 에이전트 기반 아키텍처

• 명령체계 AI:
  • 사용자의 요청을 분석하고 작업을 수행할 적절한 하위 에이전트에게 명령 전달.
• 작업 수행 AI:
  • 명령체계 AI의 지시에 따라 Google Calendar 작업 수행.
  • 대화 내용 및 작업 결과를 명령체계 AI로 보고.

---

3. 기술 스택

3.1 프론트엔드

• Next.js v15: 서버와 클라이언트를 통합하여 SSR/CSR 제공.
• Tailwind CSS: 스타일링 프레임워크.
• DaisyUI: UI 컴포넌트 라이브러리.

3.2 백엔드

• OpenAI API: GPT-4 및 다양한 모델 지원.
• Google Calendar API: 일정 관리와 로그 제공.
• JWT: 사용자 인증 및 세션 관리.
• Database: SQLite (개발 및 테스트), PostgreSQL (프로덕션).

3.3 결제 및 알림

• 결제: 토스 페이먼츠.
• 알림: Firebase Cloud Messaging (푸시 알림), 이메일 알림.

---

4. UI/UX 요구사항

4.1 메인 화면 (채팅창)

• Google Material Design 스타일.
• 채팅 입력창과 메시지 출력창으로 구성.
• GPT 응답의 텍스트 및 버튼 제공 (예: "일정 추가", "로그 보기").

4.2 로그 화면

• Google Calendar 이벤트 변경 내역 표시.
• 날짜, 시간, 이벤트 유형 필터.
• 검색 기능 제공.
• 이벤트 세부 정보 제공.

4.3 결제 화면

• 사용 가능한 토큰과 결제 옵션 표시.
• 간단한 결제 프로세스와 결제 이력 확인.

4.4 사용자 대시보드

• 일정 통계 (예: 가장 바쁜 시간대, 평균 일정 수).
• AI 추천 일정 및 맞춤형 알림 설정.

---

5. 추가 기능 제안

1. 테마 설정:
   • 사용자가 다크 모드와 라이트 모드를 선택할 수 있도록 지원.
2. 음성 입력 지원:
   • 음성으로 일정 추가 및 조회 가능.
3. AI 추천:
   • 사용자의 일정 데이터를 분석해 빈 시간 추천.

---

6. 개발 일정 (단계별)

목표파일구조

src/
├── app/
│   ├── api/
│   │   ├── auth/
│   │   │   └── [...nextauth]/route.ts  # NextAuth API 라우트
│   │   ├── chat/
│   │   │   └── route.ts               # ChatGPT 연동 API
│   │   ├── calendar/
│   │   │   ├── events/
│   │   │   │   └── route.ts           # Google Calendar 이벤트 API
│   │   │   └── logs/
│   │   │       └── route.ts           # Google Calendar 로그 API
│   ├── dashboard/
│   │   └── page.tsx                   # 사용자 대시보드
│   ├── fonts/
│   ├── login/
│   │   └── page.tsx                   # 로그인 페이지
│   ├── page.tsx                       # 메인 페이지 (홈)
│   ├── favicon.ico
│   ├── layout.tsx                     # 공통 레이아웃
│   └── globals.css                    # 전역 스타일

├── components/
│   ├── Chat.tsx                       # 채팅 컴포넌트
│   ├── Navbar.tsx                     # 네비게이션 바
│   ├── LogTable.tsx                   # Google Calendar 로그 테이블
│   └── Footer.tsx                     # 푸터
├── lib/
│   ├── google.ts                      # Google API 클라이언트 설정
│   ├── auth.ts                        # 인증 관련 유틸리티
│   └── openai.ts                      # OpenAI API 클라이언트 설정
├── prisma/
│   └── schema.prisma                  # Prisma 데이터베이스 스키마
├── styles/
│   ├── globals.css                    # Tailwind 전역 스타일
├── .env                               # 환경 변수 파일
├── next.config.js                     # Next.js 설정 파일
├── package.json                       # 프로젝트 의존성
└── tsconfig.json                      # TypeScript 설정 파일

6.1 1단계: 프로젝트 초기 설정

• Next.js 프로젝트 초기화 및 기본 구조 설정.
• Tailwind CSS 설치 및 글래스모피즘 UI 초기 구성. glass container, button, primary color 등 글래스 모피즘에 맞는 tailwind UI components 생성.
• DarkMode. : [next-theme 활용]https://github.com/pacocoursey/next-themes
• OpenAI API 및 Google Calendar API 키 발급 및 테스트.

6.2 2단계: 사용자 인증 구현

• Google OAuth 2.0을 활용한 사용자 로그인 구현.
• Nextauth v5(auth.v5) 사용 'auth()'
• JWT 토큰 발급 및 세션 관리.
• 인증된 사용자의 계정 정보와 토큰 사용량 데이터베이스 저장.

6.3 3단계: 대화형 채팅 기능 구현

• OpenAI API 연동 및 기본 채팅 로직 구현.
• 사용자 입력 처리 및 ChatGPT 응답 반환.
• 채팅창 UI 구현 (입력창, 응답창, 메시지 레이아웃).

6.4 4단계: Google Calendar 연동

• Google Calendar API와의 연동 설정.
• 이벤트 조회, 추가, 수정, 삭제 기능 구현.
• 사용자 명령어를 Google Calendar 작업으로 변환하는 로직 추가.

6.5 5단계: 로그 화면 구현

• Google Calendar 변경사항 로그 데이터베이스에 저장.
• 로그 페이지 UI 설계 및 필터링 및 검색 기능 구현.
• 사용자별 변경 내역 표시.

6.6 6단계: AI 기반 커스텀 기능 구현

• 대화 내용과 Google Calendar 데이터를 아카이브하여 AI 메모리 구축.
• 사용자 일정 패턴 분석 및 자동화 기능 구현.
• 명령체계 AI와 작업 수행 AI의 분리 및 통신 로직 설계. 명령체계 AI는 사용자의 요청을 해석하고, 해당 요청을 처리하기 위해 적합한 작업 수행 AI에게 명령을 전달합니다. 두 AI 간의 통신은 REST API를 통해 이루어지며, 비동기 작업의 경우 메시지 큐(예: RabbitMQ 또는 AWS SQS)를 활용해 안정성을 확보합니다. 작업 수행 AI는 요청에 따라 Google Calendar API와 상호작용하며, 완료된 작업 결과를 명령체계 AI에 보고하여 대화 흐름이 유지되도록 합니다.

6.7 7단계: 토큰 및 결제 시스템 구현

• 토큰 사용량 추적 및 경고 알림 추가.
• 토스 페이먼츠를 사용한 결제 시스템 연동.
• 결제 완료 시 토큰 충전 및 결제 내역 저장.

6.8 8단계: 테스트 및 디버깅

• 전체 시스템 통합 테스트.
• 주요 사용 시나리오 테스트 (로그인, 채팅, 캘린더 연동, 결제).
• 에러 처리 및 로깅 시스템 강화.

6.9 9단계: 배포 및 유지 관리

• Vercel을 사용하여 프로젝트 배포.
• 사용량 모니터링 및 성능 최적화.
• 사용자 피드백 기반 업데이트 및 기능 확장.

---