한국어
Cursor와 Logto를 사용해 바이브 코딩으로 앱을 빠르게 만들고 로그인 플로우 처리하기
Cursor를 사용해서 사진 갤러리 앱을 바이브 코딩으로 만들고, Logto로 몇 분 만에 로그인 기능을 추가하는 방법을 배워 보세요. UI부터 인증까지, 빠르고, 간단하며, AI로 작동합니다.
Guamian
Product & Design
Product & Design
Cursor를 사용해서 사진 갤러리 앱을 바이브 코딩으로 만들고, Logto로 몇 분 만에 로그인 기능을 추가하는 방법을 배워 보세요. UI부터 인증까지, 빠르고, 간단하며, AI로 작동합니다.
바이브 코딩은 Cursor와 Windsurf 같은 강력한 도구 덕분에 점점 인기를 얻고 있습니다. 경험이 많지 않아도, 직접 앱을 빠르게 만들 수 있습니다.
많은 개발자와 빌더들에게 로그인 플로우를 설정하는 일은 까다로울 수 있습니다. 하지만 MCP와 현대적인 IDE에 내장된 컨텍스트 인식 기능으로, 개발자가 아니더라도 앱에 인증을 추가하는 과정은 더 이상 복잡한 과제가 아니게 됐어요.
이 튜토리얼에서는:
먼저, Cursor에서 채팅을 열고 다음처럼 프롬프트를 입력합니다:
“Next.js Page Router를 사용해서 싱글 페이지 앱을 만들어줘.” Cursor가 나머지를 알아서 처리해주고 앱을 생성해줍니다.
이제 이 앱을 사진 갤러리 앱으로 바꿔볼게요. Unsplash에서 여러 사진을 가져와서 자동으로 정리해줍니다.
전통적으로는 직접 문서를 읽고 SDK를 활용해서 통합을 완료해야 했죠. 하지만 Cursor로는, AI의 힘을 최대한 활용해서 훨씬 더 매끄럽고 빠르게 작업할 수 있습니다.
앱을 보호하는 로그인 플로우를 쉽게 추가할 수 있습니다. Cursor는 컨텍스트 인식 프롬프트를 지원하므로, Logto 문서를 참고용으로 추가할 수 있어요. Next.js (Page Router)용 Logto SDK를 활용해 인증 연동도 아주 쉽게 할 수 있습니다.
보다시피, 퀵스타트 가이드를 참고해서 다음에 무엇을 해야 할지 알려줍니다. 두 번째 단계에서는 appId, endpoint 같은 설정을 입력하라고 하죠. 이 값들은 Logto Cloud에서 새 앱을 등록해 얻을 수 있습니다.
그리고, http://localhost:3000/api/auth/callback/logto를 리디렉션 URI로 입력하라고 합니다.
Logto Cloud 콘솔에 리디렉션 URI를 입력합니다.
이 값들을 가져와 네 설정 파일에 저장해 주세요.
자, 이제 App ID, App Secret, Logto endpoint를 Cursor에 제공하면, Cursor가 코드를 자동으로 업데이트합니다.
그리고 서버를 실행하면 간단한 로그인 홈 페이지가 뜹니다. Sign In을 클릭하면 Logto 로그인 페이지로 리디렉션 됩니다.
좋아요! Logto 로그인 페이지로 성공적으로 리디렉션됐어요!
첫 화면이 너무 밋밋해서, 디자인을 더 예쁘게 바꿔달라고 Cursor에 요청했어요.
Cursor가 이렇게 결과를 내줬습니다.
이제 전체 인증 플로우를 테스트할 차례예요.
참고로 Logto는 내장 이메일 서비스를 제공하니까, 이메일 인증 과정까지 즉시 경험할 수 있어요.
모든 플로우를 끝내면, 성공적으로 로그인되고 화면에 네 사용자 ID가 표시됩니다.
이제 이 사용자가 Logto 콘솔에 추가됐는지 살펴볼까요? 오! 추가됐어요! 🎉
Logto 문서와 베스트 프랙티스, Copilot 스타일의 코딩 덕분에, 기술 경험이 적은 사람도 손쉽게 연동할 수 있습니다. 로그인 플로우 설정은 더 이상 무겁거나 귀찮은 작업이 아니에요.
이건 작은 연습 사례일 뿐입니다. Logto는 IDE 내부에서 직접 실행되는 MCP 서버를 활발하게 개발 중입니다. 이를 활용하면 Logto 콘솔과 Management API를 개발 환경을 벗어나지 않고 바로 활용할 수 있어요. 이렇게 되면 네가 할 수 있는 일은 다음과 같습니다:
AI 파워와 Logto의 튼튼한 인프라 설계로, 인증 연동은 더 이상 도전과제가 아닙니다! 기대해 주세요!