Basic Website Structure🏋️♂️
Header
일반적으로 위쪽에 제목과 로고를 포함하는 큰 띠.
일반적으로 한 웹페이지에서 다른 웹 페이지에 까지 동일하게 유지가 된다.
Navigation bar
홈 페이지의 메인 섹션으로 연결한다. 주로 메뉴 버튼이나 링크, 탭으로 구성된다. 헤더 처럼 웹 페이지마다 동일한 형태를 유지하게 하는 것이 좋다. 동일하지 않은 형태는 사용자에게 혼란을 줄 수 있다.
그래서 많은 웹 디자이너들은 네비게이션 바를 헤더의 일부로 보는것이 낫다고 하기도 하지만, 반드시 그런 것은 아니다. 그리고 일부 사람들은 두개로 나누는 것이 접근성이 좋다고들 한다.
Main content
웹 페이지에서 가장 독특한 컨텐츠를 포함하고 있는 중심의 큰 부분이다.
예를 들어, 보고 싶어하는 비디오, 읽고 있는 주요 이야기, 보고 싶어하는 지도, 또는 뉴스 헤드라인 등이 있다. 물론 이 부분은 각 페이지마다 다르다.
Side bar
주변의 정보, 링크, 인용 부호, 광고 등. 일반적으로 이는 메인 컨텐츠에 무엇이 포함되어 있느냐에 따라 다르다.
(예를 들어 기사 페이지에서, sidebar는 작성자의 소개, 또는 관련 기사 링크를 포함할 것이다.)
그러나 보조 navigation system으로서 되풀이되는 요소를 사용하는 경우도 찾아볼 수 있다.
Footer
페이지 바닥 줄로 일반적으로 작은 정보, 저작권 정보, 연락처 등에 대한 정보가 있다.
헤더 처럼 일반적인 정보를 담고 있지만, 보통 중요하지 않거나 웹 사이트 자체에 부수적인 정보들이다.
또 가끔 SEO(검색 엔진 최적화) 목적으로 사용되는데, 인기 컨텐츠 바로가기 링크를 제공한다.
아주 전형적인 웹사이트의 형태
아주 간단하게 웹사이트 계획하는 방법🐈
간단한 웹 페이지의 콘텐츠를 계획했으면 다음 논리 단계는 전체 웹 사이트에 넣을 콘텐츠, 필요한 페이지, 그리고 최상의 User experience를 위해 서로 정렬하고 연결해야 하는 방법을 생각해야한다.
This is called Information architecture! 📛
1.
몇 요소들은 대부분의 페이지에 공통적으로 적용된다. navigation bar 이나 footer 처럼. 예를 들어 비즈니스를 위한 페이지라면, 연락처를 각각의 페이지의 footer에 보이도록 하는 것은 좋은 생각이다. 모든 페이지에 공통적으로 포함하고 싶은 것을 적으면 된다.
2.
다음으로, 각 페이지의 구조를 간단한 스케치로 그리기. 각 블럭의 기능을 적어보자.
3.
이제 웹사이트에 포함시키길 원하는 (각 페이지에 공통적이지 않은) 다른 모든 컨텐츠를 brainstorming. 리스트에 모두 적어 내려가기.
4.
다음으로, 이 모든 컨텐츠들을 그룹화 해 다른 페이지에서 어떤 부분들이 함께할 수 있을지 생각해보자.
5.
이제 대략적인 사이트맵을 그려보기!
사이트의 각 페이지를 동그라미로 지정하고, 각 페이지 간 동작 흐름을 보여주기 위해 선을 그려보자. 홈페이지는 아마 가운데에 있고, 모두는 아니어도 대부분에 연결될 것이다! 작은 사이트 안의 대부분의 페이지는, 비록 예외는 있겠지만, 메인 네비게이션에서 사용할 수 있어야 함. 추가적으로 이것들이 어떻게 보여져야하는지 등의 메모도 적어놓자.
웹 사이트를 설계하는 방법이 이렇게 정해져 있다기 보다는 설계시 참고를 하면 좋을 것으로 생각된다.
무작정 하는 것 보다는 구조적으로 잘 설계를 할 수 있을 것이다!
REFERENCE
https://developer.mozilla.org/ko/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure