Bolt.new(볼트)로 랜딩 페이지 제작을 자동화하는 3단계【초보자용】
機械翻訳 / Machine-translated
A
AI Friends
1日前・5分で読める
機械翻訳 / Machine-translated
@aifriends
AI Friends（https://aifriends.jp）のクロスポスト公式アカウント。AIツールの紹介・使い方・できることを、中学生でもわかるやさしい日本語で届けます。
Bolt.new(볼트)는 StackBlitz가 개발한 브라우저 완결형 AI 앱 빌더입니다. 프로그래밍 지식이 없어도 한국어로 지시를 내리는 것만으로 랜딩 페이지(LP)를 자동 생성할 수 있습니다. 이 글에서는 초보자도 3단계로 LP를 만드는 방법을 설명합니다.
기존의 LP 제작은 디자인 툴로 외관을 만들고, HTML이나 CSS로 코딩하고, 서버에 업로드해야 했습니다. 외주를 맡기면 10만 엔 이상이 드는 경우도 드물지 않습니다. Bolt.new라면 "파란색을 기조로 한 상품 소개 페이지를 만들어줘"라고 입력하는 것만으로 AI가 자동으로 디자인과 코드를 생성합니다. 브라우저 내에서 실행되는 WebContainers 기술 덕분에 로컬 환경 설정도 필요하지 않습니다. 2026년 5월에는 Microsoft Azure와의 연동도 발표되어 기업 사용에도 대응하고 있습니다. 무료 플랜에서도 월 100만 토큰(약 50페이지 분량)을 사용할 수 있어 개인이나 스타트업에 최적입니다.
먼저 bolt.new에 접속하여 "Sign in"을 클릭합니다. Google 계정 또는 GitHub 계정으로 로그인할 수 있습니다. 첫 로그인 시 표시되는 튜토리얼은 건너뛰지 말고 끝까지 볼 것을 권장합니다. 화면 오른쪽 상단의 톱니바퀴 아이콘에서 설정 화면을 열고 언어를 변경해 두면 이후 작업이 원활합니다. 무료 플랜의 경우 화면 상단에 남은 토큰 수가 표시되므로 확인해 두세요. 하루 상한은 30만 토큰입니다. 이 단계에서 어떤 LP를 만들고 싶은지 간단히 메모해 두면 다음 단계에서 헤매지 않습니다.
화면 중앙의 채팅란에 만들고 싶은 LP의 내용을 입력합니다. 예를 들어 "온라인 영어 회화 스쿨의 LP 작성. 파란색과 주황색 그라데이션, 히어로 섹션·요금표·문의 양식 포함"과 같이 구체적으로 지시합니다. 전송하면 AI가 React나 Vue.js 등의 프레임워크를 자동으로 선택하고 코드를 생성합니다. 오른쪽 미리보기 화면에서 실시간으로 확인할 수 있습니다. 마음에 들지 않는 부분이 있으면 "버튼 색상을 초록색으로 변경", "글꼴 크기를 크게"와 같이 추가로 지시를 내릴 수 있습니다. 2026년 업데이트로 Figma 디자인 불러오기도 지원하게 되어, 기존 디자인이 있는 경우 파일을 드롭하는 것만으로 반영됩니다.
미리보기 화면에서 문제가 없으면 화면 오른쪽 상단의 "Deploy" 버튼을 클릭합니다. Netlify와의 연동으로 몇 초 만에 공개 URL이 발급됩니다. 2026년부터는 공개 후 URL을 변경할 수 있는 기능도 추가되었습니다. 발급된 URL을 브라우저에서 열고 스마트폰 표시도 확인하세요. Chrome 개발자 도구(F12 키)로 반응형 표시를 확인할 수 있습니다. 문의 양식이 올바르게 작동하는지 실제로 전송 테스트도 진행합니다. 문제가 있으면 채팅란에 "양식 전송 시 오류가 발생한다"고 전달하면, AI가 자율 디버깅 기능(오류 루프를 98% 감소)으로 수정해 줍니다.
토큰 소진 오류: 무료 플랜은 하루 30만 토큰이 상한입니다. 복잡한 지시나 대량의 수정을 반복하면 상한에 도달합니다. 다음 날까지 기다리거나 Pro 플랜(월 25달러)으로 전환하세요. 미리보기가 흰 화면: 브라우저 확장 기능(광고 차단기 등)이 원인일 수 있습니다. 시크릿 모드로 시도해 보세요. 한국어 폰트가 반영되지 않음: "Google Fonts에서 Noto Sans KR을 불러와줘"라고 추가 지시를 내립니다. 배포 시 오류: 프로젝트 이름에 한국어나 특수 기호가 포함되어 있으면 실패합니다. 영문자와 숫자만으로 수정하세요. 2026년 1월 업데이트로 빌드 속도가 40% 향상되었지만, 첫 배포는 1~2분 걸릴 수 있습니다.
Team Templates 활용: 2026년 신기능으로 생성한 프로젝트를 템플릿으로 만들 수 있습니다. 여러 LP를 같은 디자인으로 만드는 경우에 편리합니다. Opus 4.6 모델 전환: 설정 화면에서 AI 모델을 선택할 수 있습니다. 가벼운 처리는 Haiku, 복잡한 디자인은 Opus 4.6을 선택하면 효율적입니다. AI 이미지 편집: 채팅에서 "히어로 이미지의 배경을 흐리게 해줘"라고 지시하면 외부 툴 없이 이미지 편집이 가능합니다. 자체 도메인 설정: Netlify 관리 화면에서 취득한 도메인을 연결할 수 있습니다. SEO 대책에도 효과적입니다. 애널리틱스 연동: Google Analytics 트래킹 코드를 "GA4 태그를 삽입해줘"라고 지시하면 자동으로 추가됩니다.
Bolt.new를 사용하면 LP 제작 비용과 시간을 크게 절감할 수 있습니다. 먼저 무료 플랜으로 시험해 보고, 마음에 들면 Pro 플랜으로 본격 운용하는 것을 권장합니다.
이 글은 AI Friends의 크로스포스트입니다.
