메인 페이지

프로젝트가 만들어졌으니 이제 첫 페이지를 만들어 봅시다. 메인 페이지는 고객이 가장 먼저 보는 페이지입니다. 첫인상이 중요합니다!

먼저 서버를 켜두세요

터미널에서 서버를 실행합니다:


npm run dev

서버가 켜져 있어야 수정한 내용을 바로바로 확인할 수 있습니다. Chrome에서 localhost:3000을 열어두세요.

Cursor에서 AI 채팅을 엽니다 (Ctrl + L). 아래와 같이 요청해 보세요:

"src/app/page.tsx를 수정해서 카페 메인 페이지를 만들어줘.

가게 이름: 봄날 카페

슬로건: 매일 아침, 따뜻한 한 잔

구성:

- 상단에 네비게이션 바 (메뉴, 오시는 길, 연락처 링크)

- 히어로 섹션: 가게 이름과 슬로건을 크게, 따뜻한 베이지 배경

- 아래에 영업시간 안내: 평일 8:00~21:00, 주말 9:00~20:00

- 맨 아래에 전화번호와 주소

따뜻하고 편안한 분위기로. Tailwind CSS 사용."

물론 여러분의 가게 정보로 바꿔서 요청하면 됩니다.

AI가 코드를 작성하면 Apply 버튼을 눌러 적용합니다. Chrome으로 돌아가면 페이지가 자동으로 바뀌어 있습니다.

확인할 점:

완벽하지 않을 수 있습니다. 그럴 때는 AI에게 구체적으로 수정을 요청하세요:

"제목 글씨를 더 크게 해줘"

"배경색을 좀 더 연한 베이지로 바꿔줘"

"네비게이션 바를 화면 맨 위에 고정해줘"

"영업시간을 표 형태로 보여줘"

한 번에 하나씩 수정하는 것이 좋습니다. 여러 가지를 한꺼번에 요청하면 AI가 헷갈릴 수 있습니다.

가게 사진이 있다면 넣어봅시다:

"히어로 섹션에 /cafe-main.jpg 이미지를 배경으로 넣어줘"

사진이 없다면 이 단계는 건너뛰어도 됩니다. 나중에 언제든 추가할 수 있습니다.

요즘은 고객 대부분이 스마트폰으로 홈페이지를 봅니다. Chrome에서 모바일 화면을 미리 확인할 수 있습니다:

글씨가 너무 작거나 배치가 이상하면 AI에게 말해 주세요:

"모바일에서 제목이 잘려. 반응형으로 수정해줘"