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 는 2017 년 Eric Simons 와 Albert Pai 가 만든 StackBlitz 팀이 개발했습니다. StackBlitz 는 WebContainers 라는 브라우저 네이티브 WebAssembly 런타임을 개척하여, Node.js 환경을 브라우저에서 직접 실행할 수 있게 했습니다. 이로써 최신 JavaScript 앱 개발 시 클라우드 서버나 로컬 설치가 필요 없어졌습니다.
2023 년, StackBlitz 는 전환점을 맞이했습니다. 성장 속도가 둔화됐고, 팀은 보다 과감한 방향을 모색했습니다: WebContainer 에 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 엔드포인트와 앱 ID 를 Bolt.new 에 복사해 넣었습니다.
그리고 나서 Redirect URIs 와 로그아웃 이후 리디렉션 URI 도 설정해야 합니다.
중요한 점: Bolt.new 는 브라우저 기반이므로 로컬 IDE 와 달리 http://localhost:3000/ 를 리디렉션 URI 로 쓸 수 없습니다. 대신, Bolt.new 브라우저 탭에 표시되는 프리뷰 URL 을 사용해야 합니다.
Logto 사전 제작 로그인 경험 커스터마이즈하기
Logto 는 콘솔에서 구성 가능한 사전 제작(sign-in) 플로우를 제공합니다. 시작하려면 Sign-in Experience > Sign-in & Sign-up 으로 이동해, 이메일, 사용자명, 전화번호, 소셜 로그인 등 원하는 로그인 방식을 선택하면 됩니다.
설정이 끝나면, 인증 플로우를 트리거 했을 때 Logto 가 호스팅하는 로그인 페이지로 사용자를 리디렉션하며, 선택된 옵션이 적용됩니다. 전체 인증 과정은 Logto 가 처리하고, 사용자는 로그인 후 앱으로 돌아옵니다.
제품 화면 위에 플로팅 로그인 패널 만들기
이제 한 단계 더 나아가서 Perplexity 처럼 별도의 페이지로 리디렉션하지 않고, 제품 UI 위에 직접 떠 있는 로그인 패널을 구축해 더 맞춤화된 로그인 경험을 만들어 보고자 합니다. 이렇게 하면 사용자는 문맥을 유지한 채 Logto 인증 플로우를 사용할 수 있습니다.
아래 프롬프트를 사용했습니다:
로그인 페이지를 더 보기 좋게, 단순한 배경에 버튼 두 개로 구성하고 싶습니다: "Sign In" 하나, "Create Account" 하나. 각각 별도의 화면으로 리디렉션되도록 하고, Logto 가 처리를 맡게 해주세요. Logto 문서의 첫 화면 경험(https://docs.logto.io/end-user-flows/authentication-parameters/first-screen) 을 사용해주세요.
좋은 점은, "Sign In" 을 클릭하면 바로 로그인 페이지로 가고, "Create Account" 를 클릭하면 계정 생성 화면으로 바로 이동한다는 것입니다.
소셜 로그인 플로우 추가하기
[Logto 의 직접 로그인 안내(https://docs.logto.io/end-user-flows/authentication-parameters/direct-sign-in)]와 함께 "소셜 로그인 플로우 추가" 같이 요청할 수 있습니다. 이렇게 하면 Logto 기본 랜딩 화면을 건너뛸 수 있습니다. 예를 들어 Google Sign-In 버튼을 클릭하면 바로 Google 인증 플로우가 실행되므로, 사용자에게 더 빠르고 친근한 로그인 경험을 제공합니다.
Logto 의 곧 출시될 업데이트: AI 기반 인증 통합 지원 예정
여기서는 기본적인 예시만 다뤘지만, Logto 는 현재 MCP 서버 를 개발 중입니다. 이 서버는 IDE 내부에서 직접 구동되어, Logto 콘솔 과 Management API 와 상호작용을 할 수 있으므로 개발 환경을 벗어나지 않고도 인증 리소스를 관리할 수 있게 됩니다.
이 환경에서는 다음과 같은 기능을 사용할 수 있습니다:
- 사용자 생성 및 관리
- 로그 보기 및 필터링
- 로그인 및 회원가입 플로우 구성
- API 리소스, 권한, 역할 정의
- 애플리케이션 및 접근 설정 관리
- 기타
로컬 도구, AI, Logto 인프라가 결합되어 인증 통합 작업이 더 이상 번거로운 과정이 아니라, 자연스러운 개발 흐름의 일부가 됩니다.