daily.dev와 GPT-4o를 사용하여 개인 맞춤형 학습 경로 생성기를 만든 방법

문제점
저는 daily.dev에서 많은 시간을 보냅니다. 기사를 북마크하고, 태그를 팔로우하며, 저의 관심사와 지식 격차를 반영하는 독서 기록을 쌓아갑니다. 하지만 그 데이터를 실행에 옮길 수 있는 구조적인 방법은 없었습니다. 북마크는 쌓여만 가고, 기사들은 무작위 순서로 읽힙니다. 실제 커리큘럼은 없고 그저 소음뿐입니다. DevPath가 이를 변화시킵니다.

기능
DevPath는 사용자의 daily.dev 프로필에 연결하여 GPT-4o를 사용해 독서 활동을 구조화된 단계별 학습 경로로 변환합니다.

작동 방식

1. daily.dev 개인 액세스 토큰(Personal Access Token)과 OpenAI API 키를 붙여넣습니다.
2. 최대 3개의 집중 주제를 선택합니다.
3. 몇 가지 간단한 배경 질문(경험, 역할, 목표, 학습 스타일)에 답합니다.
4. DevPath는 daily.dev API를 통해 사용자의 북마크, 팔로우하는 태그, 기술 스택을 가져옵니다.
5. GPT-4o가 1218개의 관련 기사를 선정하고, 기초부터 심화까지 35단계로 구성하며 각 단계에 대한 명확한 이유를 제공합니다.
6. 모든 브라우저에서 작동하는 공유 가능한 URL을 생성합니다.

기술 스택 (Tech Stack)

• 프레임워크 (Framework): Next.js 16 (App Router)
• 언어 (Language): TypeScript
• AI: OpenAI GPT-4o
• 데이터 (Data): daily.dev Public API
• 스타일링 (Styling): Tailwind CSS v4 + CSS variables
• 지속성 (Persistence): localStorage 전용 (데이터베이스 없음)
• 배포 (Deployment): Vercel

주요 기술적 결정
백엔드 없음, 데이터베이스 없음
모든 것이 브라우저에서 실행됩니다. 경로는 localStorage에 저장되므로 계정이나 회원가입이 필요 없습니다. 이는 72시간의 빌드 기간 동안 아키텍처를 매우 가볍게 유지할 수 있게 해주었습니다.

사용자 제공 API 키
DevPath는 OpenAI 요청을 프록시(proxy)하지 않습니다. 사용자가 직접 API 키를 가져오므로 비용을 직접 제어할 수 있으며, 사용자의 데이터는 제 서버에 절대 닿지 않습니다. 경로를 생성하는 데는 보통 몇 센트 정도의 비용이 듭니다.

URL 인코딩을 통한 교차 브라우저 공유
localStorage는 기기 간에 공유할 수 없으므로, lz-string을 사용하여 전체 경로 JSON을 압축하고 이를 ?d= URL 파라미터로 인코딩합니다. 다른 곳에서 열리면 이를 디코딩하여 localStorage로 복구하고 URL을 정리합니다. 백엔드가 필요하지 않습니다.

배경 질문을 통한 프롬프트 개인화 (Prompt personalization via background questions)
사용자의 응답(경험, 역할, 목표, 학습 스타일)이 GPT-4o 프롬프트에 직접 주입되어, 모델이 깊이와 복잡성을 적절하게 조정할 수 있도록 합니다.

JSON 모드를 활용한 신뢰할 수 있는 구조화된 출력 (Reliable structured output with JSON mode)
response_format: { type: "json_object" }를 사용함으로써 일관되고 파싱 가능한 응답을 보장하며, 취약한 파싱 로직이나 별도의 에러 핸들링이 필요하지 않습니다.

배운 점 (What I Learned)

• daily.dev API는 놀라울 정도로 풍부한 신호를 제공합니다. 북마크, 태그, 기술 스택(tech stack)을 결합하면 개발자의 의도를 강력하게 파악할 수 있습니다.
• GPT-4o는 구조화된 컨텍스트(context)가 주어졌을 때 커리큘럼 설계에서 뛰어난 성능을 발휘합니다.
• lz-string은 URL 기반의 상태 공유에 매우 효과적입니다 (JSON을 약 60~70% 압축).
• Next.js App Router + Server Actions를 사용하여 추가적인 라우팅 복잡성 없이 API 상호작용을 깔끔하게 서버 사이드(server-side)로 유지했습니다.

직접 체험해보기: https://devpath-gules.vercel.app/

필요한 사항:

• daily.dev 개인 액세스 토큰 (Plus 계정 필요): https://app.daily.dev/settings/api
• OpenAI API 키: https://platform.openai.com/api-keys

#dailydevhackathon 을 위해 제작되었습니다 - 피드백은 언제나 환영합니다.