[번역] 5개의 프롬프트로 웹사이트 목업 만들기

Mock Up a Website in Five Prompts

---

"잠깐, 사용자들이 실제로 장바구니에 상품을 추가할 수 있나요?"

 

모든 프로토타입은 이런 질문, 혹은 그와 비슷한 질문을 반드시 마주하게 됩니다. 그때마다 우리는 "이건 그냥 Figma입니다.", "그냥 더미 데이터입니다."라고 설명하기 시작합니다. 하지만 이런 설며이 전혀 필요하지 않은 상황이라면 어떨까요?

 

클라이언트나 팀에게 와이어프레임을 만드는 시간보다 더 짧은 시간 안에, 실제로 데이터에 연결된 웹사이트 목업이나 새로운 페이지, 컴포넌트를 그대로 전달할 수 있다면 어떨까요?

 

오늘 다룰 내용은 바로 그 질문에서 출발합니다. 하지만 그 전에 먼저 살펴봐야 할 것이 있습니다.

오늘날 프로토타이핑 도구의 문제점

셋 중 두 가지를 선택해야 합니다: 속도, 유연성, 또는 인터랙티브함.

 

프로토타이핑 생태계는 다양한 요구를 해결하는 훌륭한 소프트웨어를 갖추고 있음에도 불구하고, 이 세 가지를 모두 제공하는 단일 도구는 사실상 존재하지 않습니다.

 

와이어프레임 앱은 몇 분 만에 박스를 그릴 수 있지만, 모든 버튼은 가짜입니다. 드래그 앤 드롭 빌더는 템플릿 범위 안에서는 스크롤 트리거 애니메이션까지 구현하지만, 템플릿 밖의 무언가를 요청하는 순간 한계가 드러납니다. 커스텀 코드는 자유를 주지만, 그 대가로 몇 시간의 오후를 떠나보내야 합니다.

 

AI 도구들도 이러한 트레이드오프를 깨뜨리지는 못했습니다. 단지 더 화려한 모습으로 포장했을 뿐입니다. 한 번의 프롬프트로 랜딩 페이지가 생성되기도 하지만, 다음 순간에는 2,000줄짜리, 주니어 수준보다 못한 React 파일이 그대로 던져집니다. 결국 병목은 여전히 존재합니다.

Builder의 웹사이트 목업 접근 방식

우리는 전체 웹사이트를 목업하면서 속도, 유연성, 인터랙티브함을 유지하기 위해 조금 다른 방식을 시도하고 있습니다. 저희의 AI 기반 비주얼 에디터는 다음과 같은 방식으로 동작합니다:

1. 몇 초 만에 레포지토리를 생성하거나, 기존 레포지토리에 연결하여 해당 코드를 디자인 참고용으로 활용합니다. React, Vue, Angular, Svelte가 별도 설정 없이 바로 동작합니다.
2. 일반 텍스트(자연어), 시각적 편집, 복사/붙여넣기한 Figma 프레임, 웹 레퍼런스, MCP 도구 등을 통해 컴포넌트를 수정할 수 있으며, 전체 웹사이트에 대한 지속적인 시각적 인지를 제공합니다.
3. 모든 변경 사항은 GitHub Pull Request로 깔끔하게 커밋되어 팀이 실제 코드 리뷰처럼 검토할 수 있습니다. 기존의 CI 체크와 린트 규칙도 그대로 적용됩니다.

추가 수정이 필요할 경우, GitHub PR 안에서 @builderio-bot에게 코멘트를 남겨 비동기적으로 변경을 요청할 수 있어, 컨텍스트 전환 없이 작업이 가능합니다.

 

이 결과로, 카페 운영자는 오늘 당장 실제로 상호작용할 수 있는 라이브 사이트를 사용할 수 있고, 개발자는 내일 해당 브랜치를 머지할 수 있습니다. 이해관계자들은 “이건 그냥 이렇게 동작한다고 가정해 주세요”라는 설명 없이도 실제 버튼을 클릭하고 상태 변화를 직접 확인할 수 있습니다.

 

이제 실제 동작을 보겠습니다.

빈 캔버스에서 작동하는 목업까지, 5개의 프롬프트로

오늘 저는 가상의 비즈니스 웹사이트를 목업으로 만들어 보겠습니다. 실제 웹사이트를 만들어도 괜찮습니다.

 

첫 번째 프롬프트를 실행하기 전에, 메모를 하나 준비해서 아래 내용을 적어주세요:

1. 비즈니스 이름과 분위기
2. 핵심 페이지
3. 주요 목표
4. 브랜드 색상 팔레트와 톤

이것만 있으면 됩니다. 세부사항은 크게 신경 쓰지 않으셔도 됩니다. 언제든지 반복해서 개선할 수 있습니다. 제 경우에는 이렇게 작성했습니다:

1. Sunny Trails Bakery — family-owned, feel-good, smells like warm cinnamon.
2. Home, About, Pricing / Subscription Box, Menu (with daily specials).
3. Drive online orders and foot traffic—every CTA should funnel toward “Order Now” or “Reserve a Table.”
4. Warm yellow, chocolate brown, rounded typography, playful copy.

 

우리는 여기서 모든 것을 맞추려는 것이 아닙니다. 중요한 것은 우리가 무엇을 만들고 있는지에 대한 명확성입니다. 그래야 AI가 실제로 사용할 수 있는 스캐폴드(기본 구조)를 생성할 수 있고, 이후의 수정도 클라이언트의 비전과 일관되게 유지될 수 있습니다.

Builder는 기본적으로 React, Vite, Tailwind를 사용합니다. 만약 다른 JS 프레임워크를 사용하고 싶다면, 해당 스택을 사용하는 기존 레포지토리를 연결할 수 있습니다. 앞으로는 React가 아닌 프레임워크도 이 추가 단계 없이 바로 사용할 수 있게 될 예정입니다.

(Builder 무료 플랜은 하루 5개의 AI 크레딧, 월 25개의 크레딧을 제공합니다. 오늘 데모를 따라 하는 데에는 충분한 수준입니다. 업그레이드는 필요할 때만 하시면 됩니다.)

첫 번째 프롬프트로 전체 웹사이트 만들기

이제 시작할 준비가 되었습니다.

 

Builder.io로 이동해서 아래 프롬프트를 그대로 붙여 넣거나, 본인이 작성한 프롬프트를 입력해 주세요:

Create a cozy bakery website called “Sunny Trails Bakery” with pages for:
• Home
• About
• Pricing
• Menu
Brand palette: warm yellow and chocolate brown. Tone: playful, inviting. The restaurant is family-owned, feel-good, and smells like cinnamon.
The goal of this site is to drive online orders and foot traffic—every CTA should funnel toward "Order Now" or "Reserve a Table."

 

엔터를 누르면 Builder가 새로운 개발 컨테이너를 생성합니다. 그리고 그 컨테이너 안에서 AI가 사이트의 첫 번째 버전을 구축하게 됩니다. 작업이 진행되는 동안 페이지를 떠나도 괜찮으며, 완료된 후 다시 돌아오면 됩니다.

 

이제 더 진행하기 전에, 버전 히스토리를 처음부터 제대로 가져가기 위해 레포지토리를 생성하겠습니다. 오른쪽 상단의 “Create Repo”를 클릭하고 GitHub 계정을 연결해 주세요.

 

과정이 완료되면 새로운 레포지토리가 생성됩니다.

 

이 단계나 이후 과정에서 도움이 필요하시면 해당 문서를 참고하시면 됩니다.

목업의 주문 시스템 동작시키기

우리가 한 번의 프롬프트로 만든 결과물만으로도 클라이언트에게 보여주기에는 꽤 좋은 시작점이 이미 만들어져 있습니다. 하지만 “Order Now” 버튼을 눌러보면, 단순한 기본 알림(alert)만 표시되는 상태입니다.

이제 이를 수정해 보겠습니다.

 

GitHub에 연결해 두었기 때문에 버전 관리 기능을 그대로 활용할 수 있습니다. 대시보드로 다시 돌아가서 새로 생성한 프로젝트의 설정을 편집해 주세요. 프로젝트 이름도 더 적절하게 변경할 수 있습니다. 그리고 “Advanced” 섹션으로 이동한 뒤, “Commit Mode”를 “Pull Requests”로 변경합니다.

 

이제 Builder 내부에서 새로운 브랜치를 생성할 수 있게 되어, 메인 버전에 영향을 주지 않고도 과감한 변경을 진행할 수 있습니다. 또한 동일한 프로토타입의 여러 버전을 클라이언트나 팀에게 보여주고 싶을 때도 유용합니다.

 

새로운 브랜치에서, 저는 또 하나의 짧은 프롬프트를 작성해 보겠습니다:

Can you make the "Order Now" button work, even if it's just with dummy JSON for now?

 

위에서 보이듯이, Builder는 주문 시스템과 완전히 모바일 반응형인 장바구니 및 결제 흐름까지 함께 생성합니다.

 

이제 오른쪽 상단의 “Send PR”을 클릭하면, 일반적인 GitHub Pull Request가 생성되며 필요에 따라 리뷰하고 병합할 수 있습니다.

 

이것이 두 개의 프롬프트로 가능한 결과입니다. 이제 세 번째 단계에서는 스타일을 좀 더 다듬어 보겠습니다.

웹 디자인 인스피레이션을 통한 스타일 개선

저처럼 다른 사람들의 멋진 디자인을 감상하고, 이를 참고해서 자신만의 스타일로 컴포넌트를 구현하는 데 시간을 많이 쓰는 경우가 있을 수 있습니다.

 

다행히 Builder에는 이러한 기능도 포함되어 있으며, Chrome 확장 프로그램을 통해 사용할 수 있습니다. 저는 OpenAI 웹사이트에서 “Featured Posts” 섹션을 찾았는데, 레이아웃과 스크롤 방식이 마음에 들었습니다. 이 부분을 복사해서 저희 카페의 “Featured Treats” 섹션에 붙여 넣으면, 카페 고유의 브랜드 스타일을 유지하면서도 해당 디자인을 활용할 수 있습니다.

 

걱정하지 않으셔도 됩니다. OpenAI는 약간의 웹 스크래핑 정도는 크게 문제 삼지 않습니다.

 

이 기능은 어떤 웹사이트의 어떤 컴포넌트에도 적용할 수 있기 때문에, 어떻게 활용하느냐에 따라 여러분의 프로젝트를 매우 빠르게 “웹 최고의 디자인 모음집”처럼 만들 수도 있습니다.

 

또한 Figma 디자인도 거의 동일한 방식으로 활용할 수 있으며, 디자인 재현 정확도는 훨씬 더 뛰어납니다. 저희 Figma 플러그인을 사용해 Figma 프레임을 복사해서 붙여 넣은 뒤, AI에게 해당 컴포넌트를 디자인 참고용으로 사용할지, 혹은 디자인 기준이 되는 1:1 레퍼런스로 사용할지를 지시하면 됩니다.

 

(이 기능으로 어떤 작업을 할 수 있는지 더 많은 아이디어가 필요하다면, 저희 design-to-code 가이드를 참고하시면 됩니다.)

 

이제 PR을 보낼 준비가 되었습니다. 이번에는 AI가 생성한 코드를 조금 더 자세히 살펴보겠습니다.

 

보시는 것처럼, 코드는 재사용 가능한 두 개의 컴포넌트로 깔끔하게 구성되어 있습니다. 더 아래로 내려가 보면 CSS 파일이 있고, 그 다음에는 홈페이지에서의 실제 구현 코드가 이어집니다. 또한 더미 게시글 데이터를 표현하기 위한 깔끔한 JSON 구조도 함께 확인할 수 있습니다.

비주얼 편집으로 목업 디자인 수정하기

AI가 OpenAI의 레이아웃을 가져오는 과정에서 발생한 한 가지 문제는, 텍스트가 “Featured Treats”에서 “Featured Stories & Treats”로 변경되었다는 점입니다. 그런데 생각해 보니 저는 둘 다 마음에 들지 않았고, 이 텍스트를 “Fresh Out of the Bakery”로 바꾸고 싶었습니다.

 

하지만 이런 작은 수정 하나를 위해 다시 AI에 프롬프트를 입력하는 것은 다소 비효율적입니다. 이제 편집 모드로 전환해 보겠습니다.

Edit Mode에서는 원하는 컴포넌트를 선택한 뒤, 해당 콘텐츠나 내부 CSS를 직접 수정할 수 있습니다. 필요한 세부 조정을 할 수 있도록 Webflow와 유사한 다양한 옵션도 함께 제공됩니다.

 

버튼 색상이나 border-radius 같은 부분까지 포함해 원하는 시각적 변경을 모두 완료했다면, “Apply Edits”를 클릭하면 됩니다. 그러면 AI가 여러분의 레포지토리 스타일에 맞도록 내부 코드를 자동으로 정리해 줍니다.

Builder Bot으로 목업 비동기 수정하기

이제 Pull Request는 거의 병합할 준비가 되었지만, 한 가지 문제가 발견되었습니다.

 

앞서 OpenAI 웹사이트 레이아웃을 복사해 왔을 때, 블로그 게시글 중 하나는 단순 이미지가 아니라 비디오를 대표 그래픽으로 사용하고 있었습니다. OpenAI에는 잘 어울리는 방식이지만, 저희 베이커리 사이트에서는 이 섹션에 이미지만 사용하고 싶었습니다. 하지만 제가 Builder AI에게 별도의 지시를 하지 않았기 때문에, AI는 그대로 레이아웃을 따라가며 비디오 기능을 위한 추가 코드까지 생성해 버렸습니다.

 

문제 없습니다. 마지막 프롬프트를 사용해서 GitHub 내부에서 바로 수정할 수 있습니다. Pull Request에 코멘트를 남기고 builderio-bot을 태그하기만 하면 됩니다.

 

약 1분 정도가 지나면 Builder Bot이 비디오 기능을 성공적으로 제거합니다. 또한 필요한 코드에만 최소한으로 변경을 적용하기 때문에, diff 역시 매우 간결하게 유지됩니다. 예를 들면 다음과 같습니다:

Builder에서 다시 프로젝트로 돌아가 보면, Bot이 적용한 변경 사항이 채팅 창에도 반영되어 있는 것을 확인할 수 있습니다. 또한 라이브 프리뷰 링크를 사용해 사이트가 의도한 대로 정상 동작하는지도 바로 검증할 수 있습니다:

 

이제 이것이 실제 프로젝트였다면, 클라이언트를 위해 바로 웹에 배포하는 것도 어렵지 않습니다. 결국 여러분은 완전한 GitHub 레포지토리를 이미 가지고 있기 때문입니다. 이것은 단순한 목업이 아닙니다. Builder나 Cursor를 사용해서, 혹은 직접 코드를 수정하면서 원하는 수준까지 다듬은 뒤 실제 운영 환경에 배포할 수 있는 진짜 코드입니다.

그렇다면, 왜 Builder로 웹사이트를 목업해야 할까요?

물론 이번 예시는 어느 정도 의도적으로 단순화된 사례였습니다. 실제 프로토타입이라면 훨씬 더 보기 좋게 만들 수 있습니다. 왜냐하면 제가 마음에 들지 않는 디자인 요소들에 더 많은 시간을 들여 다듬게 될 것이기 때문입니다.

 

하지만 바로 그것이 좋은 AI 도구의 핵심입니다. 최고의 AI 도구는 인간을 작업 과정에서 배제하지 않습니다.

 

여전히 모든 중요한 결정은 사람이 직접 내리게 되며, 기존 작업물도 존중됩니다. AI가 생성한 코드를 항상 직접 확인할 수 있고, 브랜치 단위로 작업할 수 있으며, 컴포넌트 수준의 정밀한 프롬프트도 가능하기 때문에, AI가 내 의도를 덮어쓸까 걱정하기보다 본래 목적에 맞는 ‘도구’로 활용하는 데 집중할 수 있습니다.

 

팀의 Figma 디자인을 그대로 가져올 수도 있고, 웹 디자인 레퍼런스를 불러올 수도 있으며, MCP 서버를 연결해 Jira 티켓을 바로 활용할 수도 있습니다. 그리고 무엇보다 중요한 점은, 기존 스타일이 이미 적용되어 있는 레포지토리와 함께 작업할 수 있다는 것입니다. Builder는 OpenAI의 레이아웃을 저희 작은 카페 사이트 스타일에 맞게 조정했던 것처럼, 기존 스타일도 이해하고 자연스럽게 맞춰줍니다.

 

즉, 프롬프트 작성부터 Pull Request, 그리고 실제 운영 환경까지 이어지는 전 과정에서 속도, 유연성, 인터랙티브함을 모두 확보할 수 있습니다.

 

지금 바로 Builder를 사용해 보세요.