어디에 무엇을 배치할까? 웹사이트 기본 구조와 역할 완벽 정리 - 웹디자인 강좌 1-4

웹디자인을 처음 시작하면 가장 먼저 막히는 것이 있습니다.
“어디에 무엇을 배치해야 할까?”
웹사이트의 레이아웃은 감으로 만드는 것이 아닙니다. 사용자가 이미 익숙하게 받아들이는 기본 구조와 각 영역의 역할을 이해하면 훨씬 자연스럽고 사용하기 편한 화면을 설계할 수 있습니다.
이번 영상에서는 사용자가 웹사이트를 바라보는 방식과 관련된 멘탈 모델과 어포던스의 개념을 알아보고, 대부분의 웹사이트가 공통으로 사용하는 기본 구조를 살펴봅니다.
웹사이트의 상단에서 로고와 내비게이션을 제공하는 헤더, 핵심 콘텐츠가 배치되는 메인, 보조 정보와 탐색 기능을 제공하는 사이드바, 그리고 페이지를 마무리하며 다음 행동을 안내하는 푸터까지 각 영역의 역할을 정리합니다.
또한 노션, 잔디, 당근, 무신사 등의 실제 웹사이트를 살펴보며 서비스의 목적에 따라 같은 구조가 어떻게 다르게 활용되는지도 확인합니다.
웹사이트의 기본 구조를 이해하면 단순히 화면을 꾸미는 것을 넘어, 사용자가 익숙하고 예측 가능하게 사용할 수 있는 레이아웃을 설계할 수 있습니다.
다음 영상에서는 메인 영역을 구성하는 다양한 웹사이트 섹션과 각각의 역할을 자세히 알아보겠습니다.

#웹디자인 #webdesign #디자인베이스 #레이아웃 #UX디자인 #UI기획 #멘탈모델 #어포던스 #헤더 #푸터

🕐 타임스탬프
00:00 웹사이트의 기본 구조를 알아야 하는 이유
00:34 멘탈 모델과 어포던스
01:57 웹 레이아웃을 구성하는 기본 영역
02:32 헤더와 메인의 역할
03:47 푸터의 역할과 구성 요소
04:50 실제 웹사이트 구조 살펴보기
07:02 핵심 내용 정리


🚀 멤버십 가입 : https://www.youtube.com/channel/UCvYnDMeL-PFZhfIz6oc_U-Q/join
🚀 예제 다운로드는 멤버십 회원 전용 커뮤니티에 올린 링크에서 받으실 수 있습니다.

🔥 디자인베이스 웹사이트 : http://designbase.co.kr/
🔥 인스타그램 : https://www.instagram.com/designbasekorea/
🔥 이메일 문의 : [email protected]
🔥 카카오 오픈채팅방 : https://open.kakao.com/o/gmwngljb (참여코드 : dgoing12)