코드 없이 첫 웹사이트 만들기

🔄 Quick Recall: 이전 레슨에서 프로젝트에 맞는 플랫폼 선택법을 배웠어요. 이제 직접 만들어 볼 차례 — 첫 웹사이트 구축이에요.

먼저 기획하기

빌더를 열기 전에 AI에게 사이트 구조를 설계해 달라고 하세요:

내 웹사이트 구조를 설계해줘.

비즈니스: [업종과 설명]
타깃 고객: [누구를 위한 사이트?]
사이트 목적: [고객 확보 / 정보 제공 / 제품 판매 / 포트폴리오]
방문자에게 원하는 행동: [문의하기 / 예약하기 / 구매하기 / 전화하기]

만들어줘:
1. 필요한 페이지 목록과 각 페이지의 목적
2. 홈페이지의 섹션 구성 (순서대로)
3. 각 페이지에 들어갈 핵심 콘텐츠
4. 네비게이션 메뉴 구조
5. CTA(행동 유도) 버튼의 문구와 위치

검증된 홈페이지 구조

1. 히어로 — 제목, 부제목, CTA 버튼
2. 사회적 증거 — 고객 로고, 추천글, 숫자
3. 특징/혜택 — 3-4개 핵심 가치 제안
4. 작동 방식 — 3단계 프로세스
5. 고객 추천 — 실제 사용자 인용
6. 행동 유도 — 메인 CTA + 긴급성
7. 푸터 — 링크, 연락처, 법적 정보

비디자이너를 위한 디자인 기본

✅ Quick Check: 디자인 경험이 없어도 전문적 사이트를 만들 수 있나요? 네! 비결은 ‘덜 하는 것’이에요. 색상 3가지 이하, 폰트 2개, 충분한 여백, 일관된 정렬 — 이 네 가지만 지키면 깔끔하고 전문적인 디자인이 나와요.

AI로 콘텐츠 생성

모든 페이지의 카피를 AI로 만들 수 있어요:

내 웹사이트의 모든 페이지 카피를 만들어줘.

비즈니스: [업종과 설명]
톤: [전문적 / 친근 / 유머 / 고급스러운]
타깃: [누구에게 말하는지]

필요한 카피:
1. 홈페이지 히어로 (제목 3개 + 부제목 3개 옵션)
2. 회사 소개 페이지 (스토리, 미션, 팀)
3. 서비스/제품 설명 (각 150자 내)
4. CTA 버튼 문구 5가지 옵션
5. 메타 설명 (SEO용, 각 페이지 155자 내)

퍼블리싱 전 체크리스트

핵심 정리

• 빌더를 열기 전에 사이트 목적, 타깃, 핵심 행동을 먼저 정의하세요
• 디자인 비결은 ‘덜 하기’ — 색상 3개, 폰트 2개, 충분한 여백, 일관된 정렬
• AI에게 비즈니스 세부사항을 알려주면 80% 완성도의 카피를 즉시 받을 수 있어요
• 퍼블리싱 전 반드시 모바일 미리보기와 링크 테스트를 하세요

Up Next: 다음 레슨에서 단순 웹사이트를 넘어 사용자가 로그인하고 데이터를 다루는 앱을 만들어 봐요.