코딩을 전혀 모르는 문과생이 AI 도구 Bolt.new와 v0를 활용해 10분 만에 랜딩페이지를 만든 실제 과정을 단계별로 정리합니다. 사전 준비, 프롬프트 작성, 수정·배포까지 초보자를 위한 체크리스트도 함께 제공합니다.
랜딩페이지가 필요하다는 사실을 처음 인지했을 때 저는 개발자가 아니라, 전형적인 인문계열 전공자였습니다. HTML과 CSS가 무엇인지, 프론트엔드와 백엔드가 어떻게 나뉘는지조차 잘 알지 못했고, 코드 에디터를 열어 본 경험도 거의 없었습니다. 그럼에도 사이드 프로젝트 소개용 페이지가 필요했고, 제작 비용과 시간을 최소화해야 했기 때문에 스스로 해결하는 방법을 찾을 수밖에 없었습니다. 그러던 중 자연어 프롬프트만으로 웹페이지를 만들어 준다는 AI 기반 도구 Bolt.new와 v0를 알게 되었고, “정말 10분 만에 가능한가?”라는 호기심으로 직접 시도해 보게 되었습니다.
이 글은 문과생인 제가 실제로 Bolt.new와 v0를 사용해 랜딩페이지를 만든 과정을 시간 순서대로 정리한 기록입니다. 각 단계에서 무엇을 준비했고, 어떤 프롬프트를 입력했으며, 어떤 화면에서 무엇을 클릭했는지까지 가능한 한 구체적으로 설명합니다. 특히 코딩을 모르는 분들도 그대로 따라 할 수 있도록 기획 단계, 문구 작성, 레이아웃 수정, 반응형 확인 과정까지 흐름을 세분화해 설명합니다. 이 과정을 통해 문과생에게 필요한 것은 복잡한 문법 지식이 아니라, 전달하고 싶은 메시지를 명확하게 정의하는 능력이라는 점도 함께 보여 드리고자 합니다.
AI 도구 선택과 사전 준비: 문과생이 먼저 한 일
본격적으로 Bolt.new와 v0를 열기 전에 제가 가장 먼저 한 일은 랜딩페이지의 목적을 한 문장으로 정의하는 것이었습니다. “이 페이지는 ○○ 서비스를 처음 접하는 사람에게 핵심 가치를 5초 안에 이해시키고, 체험 신청 버튼을 누르게 만드는 데 목적이 있다”와 같이 구체적인 문장을 먼저 적었습니다. 이런 문장은 나중에 프롬프트를 작성할 때 그대로 활용할 수 있기 때문에 문과생에게 익숙한 글쓰기 작업이 곧 기술적 준비 단계가 됩니다. 또한 목표를 명확히 적어 두면, AI가 생성한 결과물을 보고 나서도 “예쁘다”가 아니라 “목적에 맞는가”를 기준으로 평가할 수 있습니다.
다음으로는 랜딩페이지에 반드시 포함하고 싶은 섹션을 텍스트로만 나열했습니다. 예를 들어 문제 인식, 해결책 소개, 주요 기능 세 줄 요약, 실제 사용 사례나 후기, 가격 혹은 플랜 안내, 자주 묻는 질문, 마지막 콜투액션 버튼 등입니다. 이 단계에서는 디자인을 고민하지 않고, 그냥 “문제 인식 섹션: 이런 상황에서 이런 불편을 느낀다”, “해결책 소개 섹션: 서비스 한 줄 설명과 핵심 장점 세 가지”처럼 각 섹션에서 전달하고 싶은 메시지를 문장으로 정리했습니다. 복잡한 와이어프레임을 그리는 대신, 메모장에 텍스트로 구조를 쓰는 방식이기 때문에 문과생에게 부담이 적습니다.
세 번째로는 타깃 독자와 말투를 정의했습니다. 저는 이 랜딩페이지를 스타트업 초기 단계의 기획자나 1인 사업자를 대상으로 설정했습니다. 그래서 프롬프트에도 “너무 장난스럽지 않고, 업무에 바로 쓸 수 있는 실용적인 톤으로 작성해 달라”는 문장을 추가했습니다. 이렇게 미리 정리한 내용은 나중에 Bolt.new에 입력하는 하나의 긴 프롬프트로 자연스럽게 이어집니다. 사전 준비에 사용한 시간은 실제로 3~4분 정도였고, 이 시간이 정리되어 있었기 때문에 이후 AI가 생성한 결과물을 빠르게 수용하거나 수정할 수 있었습니다.
Bolt.new로 5분 만에 랜딩페이지 뼈대 만들기
준비가 끝난 후 저는 브라우저에서 Bolt.new를 열고 새 프로젝트를 생성했습니다. 화면에는 코드 영역과 미리보기 영역이 나란히 보였지만, 코드 자체를 이해할 필요는 없었습니다. 상단의 프롬프트 입력 영역에 앞에서 정리해 둔 내용을 한 번에 붙여넣었습니다. 예를 들어 “스타트업용 SaaS 서비스 랜딩페이지를 만들어 주세요. 첫 화면에는 서비스 한 줄 설명과 강력한 헤드라인, 주요 장점 세 가지, ‘지금 무료로 시작하기’ 버튼을 배치해 주세요. 그 아래에는 문제 인식 섹션, 해결책 섹션, 기능 요약, 후기, 가격, FAQ 섹션을 순서대로 만들어 주세요”와 같이 지시했습니다.
프롬프트를 입력하고 실행하자 Bolt.new가 자동으로 HTML과 스타일 코드를 생성하면서 동시에 오른쪽 미리보기 화면에 랜딩페이지 뼈대가 나타났습니다. 저는 코드를 보지 않고 미리보기 화면만 집중해서 확인했습니다. 첫 화면의 헤드라인이 다소 추상적으로 느껴졌기 때문에 프롬프트에 “헤드라인은 구체적인 숫자나 시간을 포함해 효용을 바로 이해할 수 있게 작성해 달라”는 문장을 추가해 다시 실행했습니다. 그러자 헤드라인 문구가 보다 직설적이고 명확한 형태로 바뀌었습니다. 이 과정은 마치 문서의 초안을 수정하는 것처럼, 코드 대신 프롬프트만 수정하는 방식으로 진행되었습니다.
섹션 구조 역시 같은 방식으로 조정했습니다. 처음 생성된 페이지에는 제가 원하지 않았던 블로그 섹션이 포함되어 있었기 때문에 “블로그 섹션은 제거하고 FAQ를 더 위로 올려 달라”는 지시를 프롬프트에 추가했습니다. Bolt.new는 이 문장을 해석해 코드 구조를 다시 생성했고, 미리보기에서 FAQ 섹션이 상단으로 이동한 것을 바로 확인할 수 있었습니다. 저는 이때도 CSS나 자바스크립트는 전혀 건드리지 않았고, 오직 자연어로만 레이아웃을 제어했습니다. 약 3분 정도의 반복 수정 끝에 원하는 섹션 순서와 대략적인 레이아웃이 완성되었습니다. 남은 시간에는 버튼 문구, 각 섹션의 짧은 설명 등을 프롬프트에 더 구체적으로 적어 넣어 랜딩페이지의 전체 톤을 다듬었습니다.
v0에서 디자인·카피 다듬기와 반응형 체크
Bolt.new에서 뼈대가 완성된 후에는 더 정교한 디자인 조정을 위해 v0를 사용했습니다. v0에서는 생성된 컴포넌트를 시각적으로 확인하면서 여백, 색상, 폰트 크기 등을 조금 더 세밀하게 조정할 수 있었습니다. 저는 먼저 전체 컬러 팔레트를 서비스 브랜드에 맞는 색으로 바꾸는 작업을 했습니다. 프라이머리 버튼 색상을 브랜드 메인 컬러로 변경해 시각적 일관성을 확보하고, 배경색과 텍스트 색상 대비가 충분히 나도록 설정했습니다. 이 과정에서도 CSS 코드를 직접 수정하지 않고, 인터페이스에서 제공하는 옵션을 선택하는 방식으로 처리할 수 있었습니다.
텍스트 카피는 문과생으로서 가장 많은 시간을 투자한 부분입니다. Bolt.new가 생성한 문장들은 구조적으로는 훌륭했지만, 제가 전달하고 싶은 뉘앙스와 완전히 일치하지는 않았습니다. 그래서 v0에서 각 텍스트 블록을 클릭해 문장을 하나씩 수정했습니다. 헤드라인에는 타깃 사용자가 겪는 구체적인 문제와 해결 후 상태를 모두 포함하도록 문장을 재구성했습니다. 기능 설명 부분에서는 명사 나열식 문장을 피하고, “무엇을 할 수 있고 어떤 결과를 얻을 수 있는지”를 동사 중심으로 표현했습니다. FAQ 섹션에서는 실제로 받을 법한 질문을 세 개 정도만 남기고, 나머지는 과감히 삭제해 읽는 부담을 줄였습니다.
반응형 디자인 체크도 v0 화면에서 함께 진행했습니다. 상단의 미리보기에서 모바일, 태블릿, 데스크톱 아이콘을 번갈아 클릭하며 화면이 어떻게 재배치되는지 확인했습니다. 일부 섹션에서는 모바일 화면에서 버튼이 너무 아래로 밀려 내려가는 문제가 있었기 때문에, 섹션 간 여백 값을 줄이고 버튼 위치를 한 단계 위로 올렸습니다. 이 때도 “모바일에서 첫 화면 안에 헤드라인과 버튼이 함께 보이도록 배치해 달라”는 식으로 자연어 지시를 활용해 레이아웃을 조정했습니다. 최종적으로는 세 가지 해상도에서 모두 헤드라인과 주요 콜투액션이 자연스럽게 보이는 구조가 되었고, 문과생 입장에서도 충분히 설득력 있는 랜딩페이지라고 느낄 수 있는 수준에 도달했습니다.
결론: 요약 및 정리
정리하면, 코딩 1도 모르는 문과생이 Bolt.new와 v0를 활용해 10분 만에 랜딩페이지를 만든 과정은 세 단계로 설명할 수 있습니다. 첫째, 랜딩페이지의 목적, 타깃, 섹션 구조를 글로 충분히 정리하는 사전 준비 단계입니다. 이 단계에서 투자한 3~4분이 이후 AI가 생성한 결과물을 빠르게 다듬는 기반이 되었습니다. 둘째, Bolt.new에 이 내용을 프롬프트로 입력해 전체 뼈대를 자동으로 생성하고, 원하지 않는 섹션을 제거하거나 순서를 조정하는 단계입니다. 여기서는 코드를 수정하지 않고, 자연어 지시로 레이아웃을 여러 번 재구성했습니다. 셋째, v0에서 디자인과 카피를 세밀하게 다듬고 반응형 레이아웃을 확인하는 단계입니다. 색상, 여백, 문구, 모바일 화면 구성 등을 점검하면서 실제 서비스 소개에 적합한 수준으로 품질을 끌어올렸습니다.
이 경험을 통해 확인한 핵심은 문과생에게도 랜딩페이지 제작은 더 이상 불가능한 일이 아니라는 점입니다. 기술적인 코딩 능력 대신, 전달하고 싶은 메시지를 논리적으로 정리하는 능력과 사용자 입장에서 콘텐츠를 검토하는 시각이 중요했습니다. AI 도구 Bolt.new와 v0는 이런 사고 과정을 코드로 옮겨 주는 역할을 했을 뿐, 방향을 정하고 판단하는 부분은 여전히 사람의 몫이었습니다. 따라서 코딩에 대한 두려움 때문에 프로젝트 소개 페이지를 미루고 있었다면, 작은 한 페이지부터 지금과 같은 방식으로 시도해 보는 것을 추천드립니다. 몇 분의 사전 정리와 AI 도구 활용만으로도, 생각보다 빠르게 “쓸 만한” 랜딩페이지를 완성하는 경험을 할 수 있을 것입니다.