[3화] AI로 내 아이디어를 웹사이트로 만들기 — 프롬프트로 진짜 화면 만들어보기

1화에서 아이디어를 정리하고, 2화에서 AI 개발 도구를 설치했다면 이제 준비는 다 끝났습니다. 이번 편에서는 그 아이디어를 실제로 AI에게 전달해서, 진짜로 작동하는 화면을 만들어보는 과정을 다룹니다. 이 편이 시리즈에서 가장 중요한 편이라고 해도 과언이 아닙니다. 프롬프트를 어떻게 쓰느냐에 따라 결과물이 크게 달라지기 때문입니다.

이 시리즈의 전체 여정

프롬프트란 무엇인가요

'프롬프트'란 AI에게 무엇을 해달라고 요청하는 문장을 말합니다. 채팅하듯 편하게 써도 되지만, 정보가 부족하면 AI도 추측해서 판단할 수밖에 없습니다. 반대로 필요한 정보를 갖춰서 전달하면, 첫 결과물부터 원하는 모습에 훨씬 가까워집니다.

좋은 프롬프트를 만드는 3가지 재료

사실 이 재료는 이미 1화에서 다 준비해두었습니다. 1화에서 정리한 내용이 그대로 프롬프트의 뼈대가 됩니다.

1. 목적 — 누구를 위한, 무엇을 하는 서비스인지 (1화의 '한 문장')
2. 핵심 기능 — 반드시 있어야 할 기능 3가지 (1화의 '핵심 기능 3가지')
3. 화면 구성 — 몇 개의 화면이 필요하고, 각 화면에 무엇이 있어야 하는지 (1화의 '화면 구성')

이 세 가지를 순서대로 문장으로 이어 붙이기만 해도 꽤 훌륭한 프롬프트가 완성됩니다.

실전 예시 1 — "우리 반 숙제 알림 앱" 프롬프트 작성하기

1화에서 예시로 들었던 아이디어를 그대로 프롬프트로 옮겨보겠습니다. 2화에서 만든 프로젝트 폴더에서 claude를 실행한 뒤, 아래 문장을 그대로 입력해보세요.

학생이 오늘 숙제가 뭔지 헷갈릴 때, 반 친구들이 올린 숙제 목록을 바로 확인할 수 있는 웹페이지를 만들어줘. 핵심 기능은 세 가지야. 첫째, 숙제를 등록할 수 있어야 해. 둘째, 오늘 등록된 숙제 목록을 볼 수 있어야 해. 셋째, 완료한 숙제를 체크할 수 있어야 해. 화면은 총 3개로 구성해줘. (1) 오늘 숙제 목록을 보여주는 첫 화면 (2) 숙제를 등록하는 화면 (3) 완료 여부를 체크하는 화면. 디자인은 깔끔하고 학생들이 보기 편하게 만들어줘.

이렇게 목적, 기능, 화면 구성을 순서대로 담아 전달하면, "그냥 숙제 앱 만들어줘"라고만 했을 때보다 훨씬 구체적인 결과물이 나옵니다.

이 프롬프트를 실행하면 어떤 일이 벌어지나요

프롬프트를 입력하고 나면 AI가 필요한 파일들을 만들기 시작합니다. 화면에 어떤 파일을 만들고 있는지, 왜 그렇게 만들었는지 설명이 함께 나타납니다. 작업이 끝나면 AI가 결과물을 어떻게 확인하면 되는지도 알려줍니다.

• 간단한 웹페이지라면 index.html 같은 파일이 만들어지는데, 이 파일을 더블클릭하면 바로 브라우저에서 열어볼 수 있습니다.
• 조금 더 복잡한 프로젝트라면 package.json 파일이 함께 만들어지는데, 이 경우 터미널에 npm run dev라고 입력하면 실행 서버가 켜지고, 안내되는 주소(대개 http://localhost:3000)를 브라우저 주소창에 입력하면 결과물을 확인할 수 있습니다.

어떤 방식이든 AI가 화면에 안내한 그대로 따라가면 됩니다. 헷갈리면 "이거 어떻게 실행해서 봐?"라고 그대로 물어봐도 됩니다.

실전 예시 2 — 다른 아이디어에도 똑같이 적용해보기

이 방법은 어떤 아이디어에도 똑같이 적용할 수 있습니다. 이번엔 "동네 카페 웨이팅 확인 앱"이라는 새로운 아이디어로 연습해보겠습니다.

• 목적: 손님이 카페에 가기 전에, 지금 자리가 있는지 미리 확인할 수 있는 서비스
• 핵심 기능: ① 카페 사장님이 현재 남은 자리 수를 입력하기 ② 손님이 남은 자리 수를 확인하기 ③ 자리가 다 차면 '만석' 표시하기
• 화면 구성: (1) 손님이 보는 현재 자리 수 화면 (2) 사장님이 자리 수를 입력하는 화면

이 세 가지를 그대로 이어 붙이면 다음과 같은 프롬프트가 됩니다.

손님이 카페에 가기 전에 지금 자리가 있는지 미리 확인할 수 있는 웹페이지를 만들어줘. 핵심 기능은 세 가지야. 첫째, 사장님이 현재 남은 자리 수를 입력할 수 있어야 해. 둘째, 손님이 남은 자리 수를 확인할 수 있어야 해. 셋째, 자리가 0이 되면 '만석'이라고 크게 표시해줘. 화면은 두 개로 구성해줘. (1) 손님이 보는 자리 수 확인 화면 (2) 사장님이 숫자를 입력하는 화면.

아이디어의 내용은 완전히 다르지만, 프롬프트를 만드는 방법(목적 → 기능 → 화면 구성)은 똑같다는 것을 알 수 있습니다.

프롬프트를 쓸 때 자주 하는 실수

• 너무 짧게 쓰기: "쇼핑몰 만들어줘"처럼 목적만 던지면 AI가 임의로 많은 것을 추측해야 합니다.
• 한 번에 너무 많이 요구하기: 핵심 기능 3가지를 넘어 10가지를 한꺼번에 요청하면, 오히려 결과물의 완성도가 떨어질 수 있습니다. 처음엔 핵심만, 나머지는 다음 요청에서 추가하는 것이 좋습니다.
• 화면 수를 말하지 않기: 화면이 몇 개 필요한지 말해주지 않으면, AI가 하나의 화면에 모든 기능을 욱여넣거나 반대로 너무 여러 화면으로 나눌 수 있습니다.

처음 결과가 마음에 안 들어도 괜찮아요

첫 결과물이 상상과 다를 수 있습니다. 그건 아주 자연스러운 일입니다. 이번 편의 목표는 완벽한 결과물이 아니라, "프롬프트를 쓰면 진짜로 화면이 만들어진다"는 흐름을 직접 경험해보는 것입니다. 결과물을 다듬는 방법은 바로 다음 편에서 자세히 다룹니다.

다음 편 예고

4화에서는 지금 만든 결과물을 화면으로 직접 확인하고, 마음에 안 드는 부분을 다시 프롬프트로 요청해서 고쳐나가는 반복 과정을 다룹니다. 처음부터 완벽할 필요는 없습니다. 확인하고, 고치고, 다시 확인하는 과정이 오히려 자연스러운 개발 방식입니다.

이전 화 / 다음 화

• 2화: 개발 도구 설치하고 시작하기
• 4화: 확인하고 다듬기