개발자도 골치 아픈 '카카오톡 로그인', 커서 AI와 Clerk으로 10분 만에 뚫는 법(포트폴리오 홈페이지 제작 7탄)

안녕하세요, 바이브랩스입니다.

단순히 코드를 짜는 것을 넘어, AI와 함께 일하는 방식을 혁신하는 '바이브 워킹', 그 생산성의 세계로 여러분을 초대합니다. "코딩 몰라도 만드는 나만의 포트폴리오 홈페이지" 시리즈 일곱 번째 영상입니다.

홈페이지 만들 때 가장 골치 아픈 기능, 바로 '회원가입 및 로그인'입니다. 보안도 신경 써야 하고, 구글/카카오 같은 소셜 로그인까지 붙이려면 개발자들도 며칠을 고생하곤 하죠.

이번 영상에서는 인증 전문 서비스인 Clerk과 커서 AI를 활용해서, 복잡한 로그인 기능을 구축하는 방법을 보여드립니다.

💡 이번 영상의 핵심 포인트

Clerk 도입:
복잡한 인증 로직(세션, 보안 등)을 직접 짜지 않고, 전문 서비스에 위임하여 생산성을 극대화하는 전략.

카카오톡 로그인 연동 (꿀팁):
Clerk에서 공식 지원하지 않는 '카카오 로그인'을 커스텀 프로바이더(OpenID Connect) 설정을 통해 뚫어내는 비법 공개.

SDD 실전 (Phase 2):
tasks.md에 정의된 인증 작업을 /speckit implement 명령어 한 줄로 AI에게 구현시키는 과정.

실전 디버깅:
"카카오로 가입하려는데 구글로 로그인되는 문제?" AI와 함께 에러 로그를 분석하고 해결하는 개발자의 찐 문제 해결 방식을 보여드립니다.

이제 로그인 기능 때문에 포기하지 마세요. 바이브랩스가 가장 쉬운 길을 알려드립니다.

📨 비즈니스 및 작가 제안
futurewave@gmail.com

타임라인
00:00 인트로: 개발자처럼 일하는 법, SDD(스펙 주도 개발) 리마인드
00:33 왜 직접 만들지 않고 'Clerk'을 써야 하는가?
00:53 Clerk 프로젝트 생성 및 API 키 발급 (기초 공사)
02:10 Next.js 프로젝트에 환경변수(.env.local) 설정하기
02:28 [핵심] 카카오톡 로그인 연동 시작 (카카오 개발자 센터 설정)
04:07 Clerk에서 'OpenID Connect' 활성화 및 커스텀 프로바이더 등록
05:02 카카오와 Clerk 연결을 위한 '비밀 출입증(Client Secret)' 교환
06:36 SDD 실전: AI에게 Phase 2(인증 기능) 구현 명령하기 (/speckit implement)
09:26 구현 결과 확인: 디자인이 깨졌다? UI 수정 요청하기
11:55 디자인 개선: 로고 배치 및 내비게이션 바 위치 수정
13:23 [디버깅] 카카오 로그인이 구글로 연결되는 버그 발생?
15:26 시크릿 모드와 브라우저 검사 도구로 원인 파악하기
17:08 AI에게 에러 로그 전달 및 수정 요청
19:04 카카오 로그인 최종 성공 및 DB(Supabase) 연동 확인
22:03 아웃트로: 시스템 완성, 다음 단계 예고