비개발자를 위한 바이브코딩 UI 사전 · 01편
AI로 프로그램이나 웹사이트를 만들고 싶다는 생각은 점점 현실적인 목표가 되고 있습니다. 코드를 직접 작성하지 않아도 AI에게 원하는 것을 설명하고, 만들어진 결과를 확인하면서 고쳐 나갈 수 있기 때문입니다.
그런데 막상 시작하면 이런 말을 하게 됩니다.
“회사 소개 사이트를 만들어 줘.”
“좀 더 세련되게 만들어 줘.”
“사용하기 편하게 해 줘.”
이런 요청이 잘못된 것은 아닙니다. 다만 AI가 해석해야 할 여지가 큽니다. 첫 화면에 큰 제목을 둘지, 설명과 버튼을 어떻게 배치할지, 어떤 정보를 먼저 보여줄지 구체적으로 정해져 있지 않기 때문입니다.
첫 화면의 역할부터 정해 보자
사이트에 처음 들어왔을 때 방문자가 가장 먼저 보게 되는 대표 영역을 디자인에서는 Hero Section(히어로 섹션)이라고 부릅니다.
보통 다음 세 가지 요소로 구성됩니다.
핵심 메시지를 전달하는 헤드라인
내용을 보충하는 짧은 설명
방문자의 다음 행동을 유도하는 버튼(CTA)
예를 들어 병원 업무용 AI 서비스를 소개한다면 첫 화면에 기능을 모두 나열하기보다, 서비스가 해결하는 문제를 한 문장으로 알리고 데모 신청 버튼으로 이어지도록 구성할 수 있습니다.
막연한 요청을 구체적인 요청으로 바꾸기
막연한 요청
우리 회사 소개 사이트를 만들어 줘.
구체적인 요청
첫 화면에 Hero Section을 적용해 줘. 핵심 헤드라인 1개, 이를 설명하는 짧은 부제, 주요 행동 버튼 1개를 배치해 줘. 방문자가 서비스의 가치를 바로 이해할 수 있게 하고, 모바일에서도 읽기 편하게 구성해 줘.
두 번째 요청은 AI에게 첫 화면의 구조와 포함할 요소를 알려 줍니다. 결과를 확인할 때도 무엇이 맞고 무엇을 고쳐야 하는지 판단하기 쉬워집니다.
바로 써 보는 프롬프트
아래 문장을 복사해 본인의 서비스에 맞게 바꿔 보세요.
[내 서비스 이름] 소개 페이지를 만들어 줘. 첫 화면은 Hero Section으로 구성해 줘. 핵심 헤드라인, 한두 문장의 설명, 주요 행동 버튼 1개를 배치해 줘. 방문자가 서비스의 목적을 빠르게 이해하도록 하고, 모바일 화면에서도 자연스럽게 재배치해 줘.
결과가 마음에 들지 않을 때
사이트 전체를 처음부터 다시 요청할 필요는 없습니다. 바꾸고 싶은 부분을 구체적으로 지정하세요.
제목이 약하다면: “헤드라인을 더 구체적으로 바꾸고, 고객이 얻는 이점을 앞에 배치해 줘.”
버튼이 많다면: “주요 행동 버튼은 하나만 남겨 줘.”
모바일에서 답답하다면: “모바일에서는 제목, 설명, 버튼을 세로로 배치하고 여백을 늘려 줘.”
이렇게 수정할 요소를 좁혀 요청하면 원하는 결과에 더 가까워질 수 있습니다.
오늘 기억할 한 가지
AI에게 원하는 결과를 설명할 때는 분위기만 말하지 말고, 화면의 구조와 구성 요소를 함께 지정하세요.
코딩을 몰라도 괜찮습니다. 먼저 원하는 화면이 어떤 모습이어야 하는지 이해하고, 그 구조를 AI에게 설명하는 것부터 시작하면 됩니다.
다음 편에서는 정보를 카드 단위로 나누어 보여주는 Card Layout을 살펴봅니다. 환자 목록, 상품 목록, 업무 현황을 왜 카드로 구성하는지 실제 예시로 알아보겠습니다.