Cursor와 Logto를 사용해 바이브 코딩으로 앱을 빠르게 만들고 로그인 플로우 처리하기

바이브 코딩은 Cursor와 Windsurf 같은 강력한 도구 덕분에 점점 인기를 얻고 있습니다. 경험이 많지 않아도, 직접 앱을 빠르게 만들 수 있습니다.

많은 개발자와 빌더들에게 로그인 플로우를 설정하는 일은 까다로울 수 있습니다. 하지만 MCP와 현대적인 IDE에 내장된 컨텍스트 인식 기능으로, 개발자가 아니더라도 앱에 인증을 추가하는 과정은 더 이상 복잡한 과제가 아니게 됐어요.

이 튜토리얼에서는:

1. Cursor에서 바이브 코딩으로 웹 앱을 만드는 방법
2. Logto로 인증(로그인 플로우)을 추가해서 네 콘텐츠를 보호하는 방법 을 보여줄게요.

Cursor에서 사진 갤러리 앱 만들기#

먼저, Cursor에서 채팅을 열고 다음처럼 프롬프트를 입력합니다:

“Next.js Page Router를 사용해서 싱글 페이지 앱을 만들어줘.” Cursor가 나머지를 알아서 처리해주고 앱을 생성해줍니다.

이제 이 앱을 사진 갤러리 앱으로 바꿔볼게요. Unsplash에서 여러 사진을 가져와서 자동으로 정리해줍니다.

사진 갤러리 앱에 인증 추가하기#

전통적으로는 직접 문서를 읽고 SDK를 활용해서 통합을 완료해야 했죠. 하지만 Cursor로는, AI의 힘을 최대한 활용해서 훨씬 더 매끄럽고 빠르게 작업할 수 있습니다.

Logto 문서를 컨텍스트로 추가하기#

앱을 보호하는 로그인 플로우를 쉽게 추가할 수 있습니다. 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를 개발 환경을 벗어나지 않고 바로 활용할 수 있어요. 이렇게 되면 네가 할 수 있는 일은 다음과 같습니다:

1. 사용자 생성 및 관리
2. 로그 조회
3. 로그인 플로우 구성 및 관리
4. 인가(예: API 리소스, 권한, 역할) 설계 및 관리
5. 애플리케이션과 리소스 관리
6. 그리고 그 이상

AI 파워와 Logto의 튼튼한 인프라 설계로, 인증 연동은 더 이상 도전과제가 아닙니다! 기대해 주세요!