[4화] AI로 내 아이디어를 웹사이트로 만들기 — 확인하고 다듬기

3화에서 프롬프트로 첫 화면을 만들어보셨나요? 처음 나온 결과물이 상상과 조금 다르더라도 괜찮습니다. 이번 편에서 다루는 '확인하고 다듬기'가 바로 그 간극을 좁혀나가는 과정입니다.

이 시리즈의 전체 여정

왜 한 번에 완벽하게 나오지 않을까요

AI는 프롬프트에 적힌 내용을 바탕으로 최선의 결과물을 만들어내지만, 여러분 머릿속에 있는 구체적인 이미지까지 정확히 맞히긴 어렵습니다. 글자 크기, 버튼 위치, 색상 같은 세부적인 부분은 실제로 화면을 보기 전까지는 말로 다 담아내기 힘들기 때문입니다. 그래서 실제 개발에서는 '한 번에 완성'이 아니라 '확인 → 수정 요청 → 다시 확인'을 여러 번 반복하는 것이 지극히 정상적인 과정입니다.

화면을 실제로 확인하는 법

2화, 3화에서 다룬 방법을 그대로 사용하면 됩니다. index.html 파일이 있다면 더블클릭해서 열어보고, package.json 파일이 있는 프로젝트라면 터미널에서 npm run dev를 입력한 뒤 안내되는 주소(대개 http://localhost:3000)로 접속하면 됩니다. 중요한 건, 프롬프트로 수정을 요청한 뒤에는 반드시 브라우저를 새로고침해서 바뀐 부분을 눈으로 직접 확인하는 습관입니다.

좋은 수정 요청 vs 애매한 수정 요청

수정을 요청할 때도 프롬프트를 쓸 때와 마찬가지로, 구체적으로 말할수록 원하는 결과에 빨리 도달합니다.

• 애매한 요청: "좀 더 예쁘게 해줘"
• 구체적인 요청: "제목 글자 크기를 더 크게 하고, 배경색을 흰색에서 연한 하늘색으로 바꿔줘"

"예쁘게"라는 말은 사람마다 기준이 다르기 때문에 AI도 무엇을 바꿔야 할지 판단하기 어렵습니다. 반면 어떤 요소를, 어떻게 바꾸고 싶은지 짚어주면 원하는 결과가 훨씬 정확하게 나옵니다.

실전 예시 — "우리 반 숙제 알림 앱" 다듬어보기

3화에서 만든 숙제 알림 앱을 실제로 확인해보니 몇 가지 아쉬운 점이 보인다고 가정해보겠습니다. 아래처럼 한 번에 하나씩 순서대로 요청해봅니다.

1차 수정 요청

완료 체크한 숙제가 목록에서 사라지지 않고 그대로 남아있어. 완료한 숙제는 글자에 취소선을 긋고 흐리게 표시해서, 아직 안 한 숙제와 구분되게 해줘.

2차 수정 요청

제목 글자가 너무 작아서 잘 안 보여. 제목은 더 크고 굵게, 눈에 잘 띄게 바꿔줘.

3차 수정 요청 (버그 신고)

숙제 등록 화면에서 등록 버튼을 눌러도 목록 화면에 새 숙제가 안 나타나. 등록한 숙제가 목록에 바로 반영되게 고쳐줘.

이렇게 기능 개선 요청과 버그 신고를 구분 없이, 눈에 보이는 문제를 그대로 설명하기만 하면 됩니다. "이 버튼이 이상해요"보다 "이 버튼을 눌렀을 때 무슨 일이 일어나야 하는데 실제로는 어떻게 되고 있다"는 식으로 지금 상태와 원하는 상태를 함께 말해주면 더 정확하게 고쳐집니다.

한 번에 하나씩 요청하기

여러 가지가 마음에 안 들어도, 한 번에 5가지, 10가지를 다 요청하기보다는 1〜2가지씩 나눠서 요청하는 것이 좋습니다. 그래야 각 수정이 잘 반영됐는지 확인하기도 쉽고, 혹시 의도와 다르게 바뀐 부분이 있어도 원인을 바로 찾을 수 있습니다.

다음 편 예고

5화에서는 이렇게 다듬은 결과물을 나 혼자만 보는 게 아니라, 인터넷에 올려 누구나 볼 수 있게 공개하는 방법을 다룹니다. GitHub과 Vercel을 활용하는 구체적인 방법은 이미 AI로 홈페이지 만들고 무료로 인터넷에 올리기 글에서 다뤘으니, 5화에서는 이 시리즈에서 만든 프로젝트를 기준으로 그 과정을 이어서 정리하겠습니다.

이전 화 / 다음 화

• 3화: 프롬프트로 진짜 화면 만들어보기
• 5화: 전 세계에 공개하기 (마지막 화)