웹페이지는 큰 덩어리로 읽습니다

웹페이지를 처음부터 작은 코드로 보지 않습니다. 첫 화면, 소개, 카드 목록, 갤러리, 질문, 문의처럼 큰 섹션으로 나누면 구조가 보이고 AI에게도 정확히 부탁할 수 있습니다.

첫 화면은 방문자의 첫 질문에 답합니다

첫 화면은 방문자가 가장 먼저 보는 곳입니다. “여기는 무엇인가요?”, “나에게 필요한가요?”, “무엇을 누르면 되나요?”에 바로 답해야 합니다.

• 1큰 제목과 한 줄 설명을 먼저 둡니다.
• 2대표 이미지와 가장 중요한 버튼 하나를 보여줍니다.

소개 섹션은 이유를 알려줍니다

첫 화면이 관심을 만들었다면, 소개 섹션은 왜 이 페이지를 봐야 하는지 설명합니다. 누가 만들었는지, 무엇을 도와주는지, 어떤 이야기가 있는지 알려줍니다.

• 1방문자에게 필요한 이유를 짧게 씁니다.
• 2사진이나 아이콘으로 분위기를 보여줍니다.

카드 섹션은 정보를 나누어 보여줍니다

수업 특징, 서비스 장점, 작품 목록처럼 비슷한 정보가 여러 개 있을 때는 카드로 나누면 읽기 쉽습니다. 카드는 반복되는 작은 덩어리입니다.

• 1카드마다 제목, 짧은 설명, 아이콘을 넣습니다.
• 2모바일에서는 카드가 1열로 쌓여야 합니다.

갤러리 섹션은 증거를 보여줍니다

작품, 수업 장면, Before/After, 결과 화면은 말보다 이미지로 보여주는 것이 좋습니다. 갤러리는 방문자가 실제 모습을 확인하는 섹션입니다.

• 1작고 안 보이는 썸네일은 피합니다.
• 2이미지마다 짧은 설명이나 캡션을 둡니다.

마지막 섹션은 다음 행동을 정합니다

페이지를 다 읽은 방문자는 다음에 무엇을 해야 할지 알아야 합니다. 문의하기, 신청하기, 작품 보기, 다운로드 같은 행동을 마지막에 분명히 둡니다.

• 1버튼 문구는 행동으로 씁니다.
• 2연락처, 지도, 링크처럼 필요한 정보를 함께 둡니다.

섹션 순서가 흐트러지면 헷갈립니다

좋은 페이지는 방문자가 위에서 아래로 자연스럽게 이해합니다. 이미지, 카드, 문의가 아무 곳에나 섞이면 방문자가 무엇을 먼저 봐야 할지 모릅니다.

• 1첫 화면 전에 너무 많은 정보를 넣지 않습니다.
• 2문의 버튼은 방문자가 충분히 이해한 뒤에 둡니다.

종이에 먼저 섹션 지도를 그립니다

AI에게 부탁하기 전, 종이에 위에서 아래로 섹션을 그려봅니다. 그림 실력이 아니라 순서가 중요합니다.

AI에게는 섹션 이름을 말합니다

“아래에 이것저것 넣어줘”보다 “첫 화면, 소개, 카드 목록, 갤러리, FAQ, 문의 섹션 순서로 만들어줘”가 훨씬 정확합니다.

섹션마다 검사 질문이 다릅니다

검수할 때도 섹션별로 봅니다. 첫 화면은 바로 이해되는지, 카드 섹션은 반복 규칙이 있는지, 갤러리는 이미지가 잘 보이는지 확인합니다.

나쁜 요청을 섹션 요청으로 고칩니다

“멋진 홈페이지 만들어줘”는 AI가 추측할 빈칸이 많습니다. 섹션 순서를 주면 AI가 훨씬 안정적으로 만듭니다.

오늘의 실습: 내 섹션 지도 만들기

집에서는 만들고 싶은 페이지를 정하고, 위에서 아래로 6개 섹션을 적어옵니다. 다음 시간에는 이 지도를 AI 웹 명령으로 바꿉니다.