Bolt.New와 Logto를 사용하여 맞춤 로그인 플로우 빠르게 구축하기
Bolt.new를 활용해 Logto 인증이 적용된 풀스택 앱을 만드는 방법을 배워보세요. 로그인 플로우 구성부터 플로팅 로그인 패널 생성, 소셜 로그인 연동까지, 이 가이드는 설치와 커스터마이즈 전 과정을 다룹니다.
Product & Design
Bolt.New란?
Bolt.new는 브라우저에서 즉시 풀스택 웹 애플리케이션을 생성하고 실행할 수 있게 해 주는 도구입니다. StackBlitz의 WebContainer 기술을 기반으로 하며, 개발자에게 Next.js(App Router), Tailwind CSS, Supabase, Prisma, ShadCN UI 등이 미리 설정된 깔끔한 스택을 제공합니다. 모든 환경이 브라우저에서 로컬로 동작하므로 별도의 설치, 클라우드 빌드 단계, 가입이 필요하지 않습니다.
AI 코딩 도구들이 기존 프로젝트 내 코딩 지원에 집중하는 것과 달리, Bolt.new는 개발의 시작 단계에 중점을 둡니다. 프로젝트 구조, 의존성, 로컬 서버 설정의 번거로움을 없애 아이디어에서 실행 가능한 프로토타입까지 몇 초 만에 도달할 수 있습니다.
Bolt.new는 Cursor나 Lovable과 어떻게 다른가요?
Cursor나 Lovable은 코드 에디터 내에서 AI 코파일럿 역할을 하지만, Bolt.new는 즉각적인 풀스택 프로젝트 생성 및 실행에 초점을 맞춥니다.
- Cursor는 VS Code 환경에서 AI를 활용해 기존 코드 작성과 편집을 돕습니다.
- Bolt.new는 프롬프트나 템플릿을 기반으로 앱을 처음부터 만들어, WebContainers를 통해 브라우저 안에서 바로 실행합니다.
로컬 도구나 클라우드 VM에 의존할 필요가 없으며, Node.js, 패키지 관리, 풀스택 개발을 모두 브라우저에서 지원합니다. AI, SaaS 프로젝트의 신속 프로토타이핑과 로컬 우선 실험에 특히 적합합니다.
Bolt.new는 누구를 위한 도구인가요?
Bolt.new는 아래와 같이 빈번하게 새로 시작해야 하는 개발자를 위해 설계되었습니다:
- 제품 아이디어를 검증하는 인디 해커
- 워크플로우를 테스트하거나 모델을 임베딩하는 AI 빌더
- MVP를 프로토타이핑하는 창업자
- 내부 툴이나 데모를 만드는 엔지니어
이런 사용자는 현대 웹 스택에 익숙하며, 빠르고 깔끔하며 비의존적인 도구를 선호합니다. Bolt.new는 비주얼 사이트 빌더나 튜토리얼 중심 플랫폼이 아니며, React 및 풀스택 개발에 익숙하다는 전제를 두고 셋업을 간소화합니다.
Bolt.new의 역사와 진화
Bolt.new는 StackBlitz 팀이 만들었습니다. StackBlitz는 2017년 Eric Simons와 Albert Pai가 설립했으며, WebContainers라는 브라우저 네이티브 WebAssembly 런타임을 개척해 Node.js 환경을 브라우저 안에서 직접 실행할 수 있도록 했습니다. 이는 현대 JavaScript 앱 개발에서 클라우드 서버나 로컬 설치 없이도 개발이 가능하도록 만들었습니다.
2023년, StackBlitz는 새로운 도전에 직면했습니다. 성장세가 둔화되자, WebContainers와 AI를 결합해 자연어 프롬프트만으로 동작하는 앱을 만드는 방향을 실험했습니다.
이 실험의 결과가 Bolt.new로, 2024년 10월에 공개되었습니다. 몇 주 만에 개발자들 사이에서 빠르고 간결하다는 평가와 함께 큰 반향을 얻었습니다. 수년간 StackBlitz가 쌓아온 런타임 격리, 빠른 의존성 설치, 공유 환경을 AI 인터페이스와 결합해, 익숙한 개발 목적을 술술 해결해나갔기 때문입니다.
Bolt.new는 개발자 도구에 새로운 전환점을 제시했습니다. 더 빨리 코드를 쓰는 것에 머무르지 않고, 이미 실행 중인 코드로부터 바로 시작할 수 있게 된 것이죠.
가이드: Logto와 Bolt.New로 맞춤 로그인 경험 추가하기
Logto 콘솔에서 앱 등록하기
이 예시에서는 Bolt.new를 사용해 CMS 앱을 만들었습니다. 프롬프트 단계는 건너뛰고, 에이전트에게 인증 제공자로 Logto를 쓰는 CMS를 만들 것을 바로 요청했습니다.
설명에 따라 두 가지 주요 정보가 필요했습니다:
Logto 엔드포인트앱 ID
앱이 싱글 페이지 React 앱이므로 앱 시크릿은 필요 없었습니다. 나머지는 에이전트가 처리했습니다: 최신 Logto React SDK를 설치하고, 인증 컴포넌트를 설정한 뒤 모든 코드를 연결했습니다.
마지막 셋업을 위해 Logto Cloud Console에 들어가 새 싱글 페이지 앱을 만들고, Logto 엔드포인트와 App ID를 Bolt.new에 입력했습니다.
그런 다음 Redirect URI 및 Post sign-out redirect URI를 설정합니다.
중요한 점: Bolt.new는 브라우저 기반이라 로컬 IDE가 아니기 때문에, http://localhost:3000/을 리디렉트 URI로 쓸 수 없습니다. 반드시 Bolt.new 브라우저 탭의 미리보기 URL을 사용하세요.
Logto 기본 제공 로그인 경험 커스터마이즈하기
Logto는 콘솔에서 직접 설정 가능한 사전 구축 로그인 플로우를 제공합니다. 로그인 경험 > 로그인 & 회원가입 메뉴로 이동해 이메일, 사용자명, 전화번호, 소셜 로그인 등 원하는 방식을 선택하세요.
설정 후 로그인 플로우를 트리거하면 Logto의 호스팅 페이지로 리디렉션되며, 선택한 옵션대로 플로우가 진행됩니다. 전체 인증 프로세스는 Logto가 처리하며, 로그인이 완료되면 사용자는 다시 앱으로 돌아옵니다.
제품 상단에 플로팅 로그인 패널 만들기
이제 한 단계 더 나아가 Perplexity와 비슷한 맞춤 로그인 플로우를 만들어보겠습니다. 별도 페이지로 리디렉션하지 않고, 제품 UI 바로 위에 플로팅 로그인 패널을 배치해보죠. 이렇게 하면 사용자는 컨텍스트를 잃지 않고도 Logto 인증을 연동할 수 있습니다.
다음과 같이 프롬프트를 작성합니다:
로그인 페이지를 더 보기 좋게, 오른쪽 하단에 플로팅 패널로 만들고 싶어요. 버튼 두 개: “Sign In”과 “Create Account”. 각 버튼은 Logto가 관리하는 서로 다른 화면으로 이동해야 하고, Logto의 first-screen experience(https://docs.logto.io/end-user-flows/authentication-parameters/first-screen) 문서를 참고하려고 해요.
장점은 Sign In을 누르면 바로 로그인 화면으로, Create Account를 누르면 계정 생성 화면으로 바로 이동한다는 점입니다.
소셜 로그인 플로우 추가하기
Logto의 직접 로그인 문서와 "add social sign-in flows"와 같은 프롬프트를 에이전트에게 전달하면, Logto 기본 화면을 생략하고 곧바로 인증을 시작할 수 있습니다. 예를 들어, Google Sign-In 버튼을 누르면 즉시 구글 인증 플로우가 실행되어 사용자에게 더 빠르고 편리한 로그인 경험을 제공합니다.
Logto의 곧 출시될 업데이트: AI 기반 인증 통합 지원
이 예시는 단지 시작일 뿐입니다. Logto는 IDE 내부에서 직접 동작하는 MCP 서버를 개발 중입니다. 덕분에 Logto 콘솔과 관리자 API를 IDE 밖으로 나가지 않고도 다룰 수 있게 됩니다.
이를 통해 다음과 같은 작업이 가능해집니다:
- 사용자 생성 및 관리
- 로그 조회 및 필터링
- 로그인 및 회원가입 플로우 설정
- API 리소스, 권한, 역할 정의
- 애플리케이션 및 액세스 설정 관리
- 기타 등등
로컬 도구, AI, Logto 인프라가 결합되면 인증은 더 이상 까다로운 통합 단계를 요구하지 않고, 자연스러운 개발 흐름 일부가 됩니다.