01
페르소나 카드 — 누가 내 사이트에 올까?
⏱ 8분
실제 아는 사람 1명을 떠올리세요. 형·누나·친구·동아리 후배 누구든 OK.
02
무드보드 — 좋아하는 사이트 3개
⏱ 10분
awwwards.com · dribbble.com · linear.app · stripe.com · notion.so 또는 평소 자주 가는 브랜드 사이트 OK.
03
와이어프레임 — 종이에 박스로 화면 뼈대
⏱ 12분
박스만 그리세요. 디자인 X · 색 X · 회색 박스만. 어떤 영역이 어디에 들어갈지만.
💡 영역 예시:
헤더 / 히어로 / 갤러리
소개 / 푸터
04
콘텐츠 인벤토리 — 5개 콘텐츠 미리 정하기
⏱ 10분
5개 다 채울 필요 X. 진짜 보여주고 싶은 것 3개라도 OK.
| 종류 |
제목 (무엇) |
어떻게 만들지 |
언제 OK |
| 📝 글 | 자기소개 · 블로그 · 이력 | 직접 작성 | W2 전 |
| 🖼 사진 | | | |
| 🎨 작품 | | | |
| 🎵 음악 | | | |
| 🎬 영상 | | | |
05
핵심 메시지 + 사이트맵
⏱ 8분
방문자가 2초 안에 읽을 한 줄. 어떤 페이지를 만들지 3-5개 결정.
공식: "나는 ___하는 ___ 입니다." 예) "공간을 그림으로 기록하는 건축학과 3학년입니다."
/about
소개 — 자기소개 · 이력 · 연락처
/contact
문의 폼 (W3에 Firebase 연결)
이번 주에 나오는 용어들. 처음 듣는 게 정상입니다. 막힐 때 사전처럼 펴서 보세요.
페르소나Persona
가상의 사용자 1명을 구체적으로 그린 카드. 사용자 만족도를 높이는 핵심 도구.예: 25세 디자이너 김민지 — 인스타·핀터레스트 즐겨봄.
와이어프레임Wireframe
디자인 X, 박스만 그린 화면 설계도. 사이트의 골격.예: 건축의 평면도 같은 것.
콘텐츠 인벤토리Content Inventory
사이트에 들어갈 글·사진·영상의 전체 목록. 이사 전 짐 리스트.예: 자기소개 1장, 작품 12개, 블로그 5편.
무드보드Moodboard
참고 사이트·이미지를 모은 게시판. 분위기를 미리 정의.예: 핀터레스트에 좋아하는 디자인 8장 모으기.
정보 구조IA · Information Architecture
어떤 페이지·메뉴를 어디에 배치할지 결정한 구조도.예: 도서관에서 책을 주제별로 꽂는 규칙.
핵심 메시지Tagline
사이트의 한 줄 정체성. "나는 ___입니다"를 압축.예: Nike — "Just Do It".
행동 유도 버튼CTA · Call To Action
방문자가 누르길 바라는 버튼. 사이트의 목적.예: "지원하기" "구매하기" "문의하기".
사이트맵Sitemap
사이트의 전체 페이지 목록과 관계를 그린 다이어그램.예: 홈 → 소개 → 작품 → 문의.
유저 플로우User Flow
방문자가 사이트 안에서 다니는 경로. 첫 화면부터 목표까지.예: 홈 → 작품 클릭 → 문의 폼 작성.
카피Copy
사이트에 쓰는 글. 짧고 명확해야 함.예: "5분 만에 만드는 홈페이지" (제목 카피).
레퍼런스Reference
참고할 만한 다른 사이트·작품. 표절 X, 영감 O.예: linear.app 의 색감을 참고.
헤더 · 푸터Header · Footer
화면 맨 위·맨 아래 영역. 헤더엔 로고·메뉴, 푸터엔 연락처.예: 잡지의 표지·뒷표지.