바이브코딩 2편｜AI에게 홈페이지 제작을 제대로 요청하는 방법

1. 바이브코딩에서는 ‘프롬프트’가 설계도가 된다

기존의 홈페이지 제작에서는 기획자가 사이트 구조를 정하고, 디자이너가 화면을 디자인하고, 개발자가 코드를 작성하는 방식이 일반적이었습니다.

바이브코딩에서는 이 과정의 상당 부분을 AI와 대화하면서 진행할 수 있습니다.

따라서 AI에게 입력하는 프롬프트(Prompt)는 단순한 질문이 아니라 홈페이지 제작을 위한 일종의 설계도 역할을 합니다.

이렇게 요청해도 AI는 홈페이지를 만들 수 있습니다. 하지만 회사가 무엇을 하는지, 어떤 고객을 대상으로 하는지, 어떤 메뉴와 디자인이 필요한지 알 수 없기 때문에 결과가 평범해질 가능성이 높습니다.

두 요청은 몇 줄밖에 차이가 나지 않지만 AI가 이해할 수 있는 정보량은 크게 달라집니다.

2. 홈페이지 제작 요청에는 무엇을 넣어야 할까?

처음부터 어려운 프롬프트 작성법을 외울 필요는 없습니다. 다음 몇 가지 항목만 정리해도 AI가 훨씬 정확하게 홈페이지를 만들 수 있습니다.

3. 홈페이지의 목적부터 설명하자

AI에게 가장 먼저 알려줘야 하는 것은 “이 홈페이지를 왜 만드는가?”입니다.

예를 들어 같은 회사 홈페이지라도 목적에 따라 구성은 완전히 달라질 수 있습니다.

• 회사를 소개하는 홈페이지
• 제품 문의를 받기 위한 홈페이지
• 온라인에서 제품을 판매하는 홈페이지
• 투자자에게 사업을 설명하는 홈페이지
• 해외 바이어를 위한 영문 홈페이지

목적을 정확하게 알려주면 AI는 화면 디자인뿐 아니라 메뉴와 콘텐츠의 우선순위까지 다르게 제안할 수 있습니다.

4. 홈페이지를 방문할 사람을 알려주자

두 번째로 중요한 것은 누가 홈페이지를 이용하는가입니다.

예를 들어 20대 소비자를 대상으로 하는 패션 사이트와 기업 구매 담당자가 방문하는 산업용 장비 사이트는 디자인부터 문장 표현까지 달라야 합니다.

이처럼 예상 방문자를 한 문장으로 설명하는 것만으로도 AI가 사이트의 방향을 잡는 데 도움이 됩니다.

5. 필요한 메뉴를 미리 정해주자

홈페이지의 메뉴는 건물의 층별 안내판과 비슷합니다. 방문자가 원하는 정보를 빠르게 찾을 수 있도록 구성해야 합니다.

회사 홈페이지라면 예를 들어 다음과 같이 요청할 수 있습니다.

어떤 메뉴가 필요한지 모르겠다면 AI에게 직접 추천을 요청해도 됩니다.

이것도 바이브코딩의 중요한 방법입니다. 모르는 것을 사람이 억지로 결정하기보다 AI에게 먼저 기획안을 요청하는 것입니다.

6. 디자인도 말로 설명할 수 있다

디자인 전문용어를 몰라도 괜찮습니다. 평소 사용하는 표현으로 원하는 느낌을 설명하면 됩니다.

색상을 지정할 수도 있습니다.

7. 한 번에 완벽하게 만들려고 하지 말자

바이브코딩을 처음 시작할 때 가장 흔한 실수 중 하나는 모든 요구사항을 한꺼번에 넣고 완벽한 결과물을 기대하는 것입니다.

실제로는 만들기 → 확인하기 → 수정하기를 반복하는 것이 훨씬 효과적입니다.

이 과정에서 AI와 계속 대화하면 됩니다.

8. 수정 요청은 구체적으로 하자

첫 번째 결과물이 마음에 들지 않는다고 처음부터 다시 만들 필요는 없습니다.

원하는 부분을 하나씩 수정하도록 요청하면 됩니다.

“예쁘게 해줘”보다 “어느 부분을 어떻게 바꿔줘”라고 요청하는 것이 좋습니다.

9. 잘 모르겠다면 AI에게 먼저 물어보자

바이브코딩의 장점은 AI가 단순히 코드를 만드는 도구에 그치지 않는다는 것입니다.

기획 단계에서도 AI를 활용할 수 있습니다.

이렇게 요청하면 AI가 필요한 내용을 질문하고 사용자는 질문에 하나씩 답하면서 홈페이지 기획을 완성할 수 있습니다.

초보자에게는 오히려 이런 방식이 더 쉽습니다.

10. 실제로 사용할 수 있는 홈페이지 제작 프롬프트

아래와 같은 기본 양식을 만들어두면 여러 종류의 홈페이지 제작에 활용할 수 있습니다.

11. 처음부터 코드부터 만들어 달라고 하지 않는 것도 방법이다

조금 더 좋은 결과를 얻고 싶다면 AI에게 바로 코드를 생성하라고 하기보다 먼저 기획을 시켜볼 수 있습니다.

예를 들어 다음 순서입니다.

이렇게 하면 사람이 AI가 만든 기획안을 검토하면서 방향을 수정할 수 있기 때문에 처음부터 코드를 생성하는 것보다 시행착오를 줄일 수 있습니다.

12. 바이브코딩에서 사람의 역할은 더욱 중요하다

AI가 코드를 대신 작성한다고 해서 사람이 할 일이 없어지는 것은 아닙니다.

오히려 사람은 무엇을 만들 것인지 결정하고, AI의 결과를 평가하고, 잘못된 부분을 찾아 수정하도록 지시하는 역할을 맡게 됩니다.

AI가 빠른 손이라면 사람은 방향을 잡는 머리에 가깝습니다. 목적지가 흐릿하면 아무리 빠르게 코드를 만들어도 엉뚱한 곳에 도착할 수 있습니다.

그래서 바이브코딩에서 가장 먼저 익혀야 하는 것은 어려운 프로그래밍 문법보다 자신이 원하는 결과를 구체적으로 설명하는 방법일 수 있습니다.

13. 정리: 좋은 프롬프트가 좋은 홈페이지를 만든다

이번 글에서 가장 중요한 내용을 정리하면 간단합니다.

• 홈페이지의 목적을 먼저 설명한다.
• 누가 이용할 사이트인지 알려준다.
• 필요한 메뉴와 기능을 정리한다.
• 원하는 디자인 분위기를 설명한다.
• 한 번에 완성하려 하지 않는다.
• 결과를 보면서 하나씩 수정한다.
• 모르는 부분은 AI에게 먼저 제안을 요청한다.

처음에는 몇 줄짜리 프롬프트로 시작해도 괜찮습니다. 중요한 것은 AI와 대화를 반복하면서 원하는 결과에 가까워지는 과정입니다.

이것이 바이브코딩의 가장 기본적인 작업 방식입니다.

바이브코딩 FAQ