🌌 Whispers of the Stars | Next.js 15 + Supabase로 웹사이트 구현 1주차(4/21~25) 회고

📚 목차

1. 프로젝트 기획 의도
2. 작업 흐름
3. 문제 발생 및 해결 과정
4. 현재까지 완성된 기능
5. 회고
6. 요약

---

🌟 프로젝트 기획 의도

이번 프로젝트는 단순한 웹사이트 구현을 넘어,

"개인 기록과 타로 리딩을 연결할 수 있는 공간"을 만들어보고 싶다는 생각에서 시작했습니다.

기획 초기에는 ChatGPT의 도움을 받아 아이디어를 정리하고 구조를 고민했습니다.
하지만 세부 방향성과 최종 구조 결정은 스스로 고민하고 수정하여 확정했습니다.

• 비로그인 사용자는 사이트를 가볍게 둘러볼 수 있는 화면구현
• 로그인 사용자는 감정 기록과 운세 결과를 연동하여 개인화할 수 사이트 제작

"기록"과 "성장"이라는 키워드를 중심으로 서비스 구조를 잡아나가기 시작했습니다.

---

🛠️ 작업 흐름 (일자별 순서 기반)

1. 프로젝트 기획 및 초기 세팅

• 타겟 서비스와 컨셉을 정하고, Corser AI + ChatGPT를 활용해 기획안을 정리
• Next.js 15 + TailwindCSS로 기본 프로젝트 세팅
• Supabase 연동을 위한 초기 연결 설정 완료
• GitHub 레포지토리 생성 및 초기 커밋

2. 메인/랜딩 페이지 기본 구조 제작

• 비로그인 시 노출되는 랜딩페이지 레이아웃 구성
• 로그인 시 이동할 메인 페이지 기본 틀 구성
• "별과 감정 기록" 테마에 맞춘 초기 디자인 스타일 가이드 작성
• 접근성을 고려하여 시맨틱 태그와 색상 대비를 기본 설계에 반영

3. 로그인/회원가입 기능 구축

• 이메일/비밀번호 기반 회원가입 및 로그인 기능 개발
• 로그인 여부에 따라 다른 페이지가 노출되도록 조건부 렌더링 처리
• 반응형 레이아웃 및 모바일 접근성을 고려한 폼 최적화

4. 구글 소셜 로그인(OAuth) 연동

• Supabase를 통한 Google OAuth 설정 및 연동
• Client ID/Secret 발급 및 .env 설정
• 리디렉션 처리 및 인증 플로우 수정
• /auth/callback/page.tsx 클라이언트 처리로 전환하여 로그인 완료 UX 개선

5. 오류 발생 및 해결

• Supabase 세션 교환 오류 해결 (cookies async 문제)
• .next/cache 오류로 인한 빌드 실패 문제 해결
• 로그인 완료 후 세션 인식 이슈 해결
• 구글 로그인 후 메인 이동 UX 다듬기

6. UI/UX 개선 및 디테일 작업

• "로그인 중입니다" 로딩 상태 추가
• 랜딩/메인/로그인/회원가입 페이지 반응형 최적화 + 접근성 디테일 개선
  (ex: 버튼 role 명시, 입력창 label 연결, 색상 대비 조정)
• 블로그 게시용 회고 작성 시작

---

🔍 문제 발생 및 해결 과정

🛠️ 문제 1. Supabase OAuth 세션 교환 오류

오류 메시지:

"invalid request: both auth code and code verifier should be non-empty"

 

원인:
Next.js 15에서는 서버사이드 cookies() 호출이 비동기(async)로 변경되었는데, Supabase의 기존 서버 예제가 이를 반영하지 않아 충돌이 발생했습니다.

해결 방법:

• 서버 라우트(/auth/callback/route.ts) 방식을 포기
• 클라이언트 컴포넌트(/auth/callback/page.tsx)로 전환
• createBrowserClient()를 사용하여 클라이언트에서 직접 세션 교환
• 로그인 완료 후 1.5초 지연 뒤 메인 페이지로 자연스럽게 이동하도록 UX 개선

---

🛠️ 문제 2. 빌드 캐시 오류 (.next/cache 관련)

오류 메시지:

ENOENT: no such file or directory, rename '/.next/cache/webpack/...'

원인:

개발 중 .next/cache/webpack 디렉토리 파일 꼬임으로 빌드 실패 발생.

해결 방법:
.next 폴더 전체 삭제 후 npm run dev로 서버 재빌드 → 정상 작동

---

🛠️ 문제 3. Google OAuth 설정 & 시크릿 코드 확인 오류

증상:

• Google Cloud Console에서 OAuth 설정 시 클라이언트 시크릿(Client Secret) 정보가 바로 보이지 않음
• 리디렉션 URI 입력 위치나 인증 관련 메뉴도 혼란스러움

원인:
Google OAuth 초기 설정 화면이 직관적이지 않고, 시크릿 코드 확인은 "편집(Edit)" 버튼을 눌러야 가능했음.

해결 방법:

• OAuth 클라이언트 생성 후 "편집" 진입 → 시크릿 코드 확인
• Supabase Auth 설정의 리디렉션 URL 일치
• .env.local 파일에 클라이언트 ID/시크릿 정확히 입력하여 재연결

---

🛠️ 문제 4. 로그인 후 세션 상태 유지 이슈

증상:
구글 로그인 이후 메인 페이지로 이동하긴 했지만, 세션 데이터가 완전히 잡히지 않아 로그인 상태로 인식되지 않는 경우 발생.

원인:

• 서버사이드에서 세션 교환 처리가 제대로 완료되기 전에 페이지 전환
• 쿠키 기반 세션 저장이 늦게 적용되는 문제

해결 방법:

• /auth/callback/page.tsx에서 exchangeCodeForSession() 완료까지 기다린 뒤
• 상태가 안정화된 후 메인 페이지로 이동 처리
• "로그인 중입니다" 문구를 추가하여 UX 흐름을 자연스럽게 만듦

---

📦 현재까지 완성된 기능

• 메인/랜딩 페이지 기본 구현
• 이메일/비밀번호 회원가입 및 로그인 기능 구축
• 구글 소셜 로그인(OAuth) 연동 완료
• 반응형 레이아웃 적용
• Supabase 기반 인증 플로우 정상 작동
• 전반적인 접근성(시맨틱 태그, 색상 대비, 폼 최적화) 반영

---

🌟 회고

이번 주는 기능 구현 자체보다 문제에 부딪혔을 때 끝까지 원인을 파악하고 해결하는 경험이 훨씬 컸습니다.

Next.js 15의 새로운 서버-클라이언트 구조, Supabase 인증 흐름, Google OAuth 연동 과정 모두 문서만으로 쉽게 이해할 수 없는 부분이 있었지만, 오류를 반복해서 분석하고 직접 수정하면서 결국 해결할 수 있었습니다.

특히 초반 설계 단계부터 접근성과 반응성을 의식하고, 개발 중간중간에도 디테일을 계속 점검하고 개선하려 했던 부분은 개발자로서 좋은 습관을 만드는 데 큰 도움이 되었다고 느낍니다.

또한 AI 도구(Corser AI, ChatGPT)를 초반 참고 자료로 활용했지만, "최종 기획과 결정은 스스로 한다"는 원칙을 지키며 주도적으로 방향을 잡아 나간 것도 이번 프로젝트의 중요한 성장 포인트라고 생각합니다.

---

🧩 요약

항목	결과
프로젝트 구조 세팅	완료
메인/랜딩 페이지 구현	완료
이메일/비밀번호 로그인 구축	완료
구글 소셜 로그인 연동	완료
주요 오류 분석 및 해결 경험	보유
기획 및 구조 최종 결정	주도적으로 수행
접근성과 반응성 최적화	꾸준히 반영

---

✅ 최종 마무리

짧은 기간이었지만, 기획부터 개발, 오류 분석, 개선까지 모든 과정을 직접 이끌며 끝까지 완성할 수 있었습니다.

"문제가 생겨도 끝까지 이해하고 해결할 줄 아는 개발자"에 한 걸음 더 다가선 시간이었습니다.

앞으로도 더 유연하고 단단한 개발자가 되기 위해 계속 성장해 나가겠습니다.