주요 기능 개발

• 초기 Tailwind 기반 스타일 정비 후 히어로·헤더·가이드·코칭 샘플 등 주요 섹션을 반복 개선하며 페이지 간 일관된 디자인 토대를 구축
• 감정분석 페이지 추가 → 단계별 진행률·브레드크럼·로딩·결과 페이지까지 확장하며 사용자 여정 전체를 체계화
• Supabase Edge Function을 통해 GPT 기반 감정 생성 API 도입, DB 저장 API, Kakao 소셜 로그인 추가로 서비스형 구조 마련

트러블 슈팅 경험

Supabase Edge Function 첫 경험으로 인한 전면 오류

Greenie 프로젝트에서 GPT 분석 기능을 구현하기 위해Supabase Edge Function을 사용해야 했지만, Deno 기반의 런타임도, 작성 방식도 모두 처음이었습니다.

공식 문서를 따라 해봐도 개념이 잘 잡히지 않았고, 로컬 실행 자체가 익숙하지 않아 CORS, 요청 body가 undefined로 들어오는 문제, OpenAI API 호출 시 계속 500 에러 발생, GPT응답을 JSON으로 파싱하지 못하는 또다른 에러 등 완전히 동작하지 않았습니다.

문제 원인

• Node.js 문법(require, process.env)이 그대로 들어가 있었음
• CORS 헤더가 없어 브라우저에서 요청이 차단됨
• await req.json()이 정상 동작하지 않아 body가 항상 비어 있음
• GPT 응답이 문자열 형태로 와서 JSON.parse가 실패함
• 그 결과: 환경 차이, Supabase Edge Function 사용법의 부족이었다.

해결 과정

처음부터 다시 시작한다는 마음으로, Supabase에서 제공하는 가장 기본적인 Edge Function 예제를 분석했다.
Node환경이 아니라 Deno 환경이며, CORS는 직접 설정해야 한다. 환경변수는 process.env가 아닌 Deno.env.get()으로 동작했다.

• 환경을 이해하자 문제가 하나씩 풀리기 시작했습니다.
• 이러한 환경들을 기반으로 AI를 사용해서 Edge Function을 작성헀으며 완전히 살아날 수 있었습니다.

결과

• Edge Function 정상 동작
• OpenAI 분석 결과를 안정적으로 반환
• 데스크톱·모바일 전부 CORS 문제 해결
• Supabase DB 저장 흐름까지 완전 정착

배운 점

• Supabase Edge Function은 Node.js가 아니라 Deno 환경이다.
• AI가 생성한 코드는 출발점이지, 바로 동작하는 정답이 아님
• 문제를 분해하면 해결 속도가 비약적으로 빨라진다는 것이다.