더 정확하게 요청하는 법

지금까지 HTML, CSS, JavaScript, React의 기본 개념을 알아봤습니다. 이 개념들을 활용해서 AI에게 더 정확하게 요청하는 방법을 배워봅시다.

좋은 요청 vs 나쁜 요청

같은 것을 만들더라도 요청하는 방법에 따라 결과가 크게 달라집니다.

나쁜 요청	좋은 요청
"홈페이지 만들어줘"	"카페 메인 페이지를 만들어줘. 상단에 네비게이션 바, 중앙에 큰 사진과 가게 이름, 아래에 영업시간이 있어야 해"
"예쁘게 해줘"	"배경을 연한 베이지색으로, 제목은 갈색 큰 글씨로, 카드 모서리는 둥글게 해줘"
"메뉴 넣어줘"	"메뉴 카드 컴포넌트를 만들어줘. 각 카드에 사진, 메뉴 이름, 가격, 한 줄 설명이 들어가고, 3열 그리드 레이아웃으로 배치해줘"
"연락처 추가해줘"	"연락처 페이지를 만들어줘. 전화번호는 클릭하면 전화가 걸리게, 카카오톡 채널 버튼도 넣어줘"

차이가 보이시나요? 좋은 요청에는 무엇이 어디에 어떻게 있어야 하는지가 들어 있습니다.

앞에서 배운 개념들을 활용하면 AI와 더 정확한 대화가 가능합니다:

이 용어들을 외울 필요는 없습니다. 이 페이지를 즐겨찾기 해두고 필요할 때 참고하세요.

좋은 요청에는 보통 이런 요소가 들어갑니다:

"~을 만들어줘. ~이 있어야 하고, ~처럼 보여야 해."

예를 들어:

"카페 메뉴 페이지를 만들어줘.

각 메뉴에 사진, 이름, 가격이 있어야 하고,

배달의민족 앱의 메뉴 목록처럼 보여야 해."

이 구조를 기억해 두면 어떤 요청이든 쉽게 만들 수 있습니다.

말로 설명하기 어려울 때는 참고할 대상을 알려주는 것이 효과적입니다:

"배달의민족 앱처럼 메뉴를 카드로 보여줘"

"네이버 블로그 글 목록 같은 레이아웃으로 해줘"

"애플 홈페이지처럼 깔끔하고 여백이 많은 디자인으로"

유명한 웹사이트나 앱을 언급하면 AI가 그 스타일을 참고해서 만들어 줍니다.

처음 요청한 결과가 마음에 안 들 수 있습니다. 그건 완전히 정상입니다.

좋은 과정은 이렇습니다:

"제목이 너무 작아. 더 크게 해줘."

"카드 사이 간격이 좁아. 여백을 더 넓혀줘."

"색상이 너무 진해. 좀 더 연하게."

이렇게 조금씩 다듬어 가는 것이 바이브 코딩의 자연스러운 과정입니다. 전문 디자이너도 이렇게 작업합니다.