1. 오늘의 아티클
서비스 화면 구조 설계
아티클 원문
2. 아티클 요약
웹/앱 화면에서 콘텐츠를 어떻게 설계해야할까?
현재 웹을 기반으로 하는 웹/앱 반응형 서비스에서 통상적인 구조
좌측: 네비 우측:콘텐츠 영역
보통 해더에서 GNB 글로벌 네비게이션 바 / 왼쪽 빨간 부분 LNB 로컬 네비게이션 바
💡
GNB (Global Navigation Bar)
웹사이트 전체에 똑같이 적용되는 내비게이션 바이며, 어떤 페이지를 클릭해도 공통으로 쓸 수 있는 메뉴. 보통 웹사이트 최상단에 위치하고 있어 메인 메뉴.
LNB ( Local Navigaion Bar)
GNB를 클릭하거나 마우스를 호버했을 때 노출되는 하위 메뉴.
웹사이트 중 특정 영역으로 한정한다는 의미가 있어 서브메뉴라고 함
SNB (Side Navigation Bar)
보통 메인 메뉴와 서브 메뉴를 제외한 나머지 메뉴를 SNB라고 한다.
왼쪽이나 오른쪽이 위치하고 있어 Side라고 표현함. GNB영역의강의나로드맵을 클릭해서 이동했을 때 왼쪽에 노출된다.
FNB (Foot Nabigator Bar)
웹사이트 갖아 하단에 위치하는 메뉴. GNB처럼 사이트 내 모든 페이지에 공통으로 노출되는 메뉴.가장 하단에 위치하고 있어 Foot이라고 표현하며, 해당 영역을 푸터(Footer)라고 한다.
보통 기업 정보 등 사이트 정보가 위치하는 영역.
서비스의 내용이 맣아져 콘틴츠 영역을 더 분리해야 된다면?
1. 좌측에 콘텐츠를 놓은 서비스
메인 콘텐츠를 왼쪽에 크게 배치하고 오른쪽에는 서비스 콘텐츠(목차나 서브 내용)를 배치
모바일에서는 좌측 메인콘텐츠를 먼저두고 그 밑에 서브 콘텐츠를 두는 형태로 설계에 들어감
2. 우측에 콘텐츠를 놓은 서비스
우측에 콘텐츠를 넣는 서비스는 왼쪽에 콘텐츠 영역을 주로 LNB 메뉴로 사용한다.
3. LNB, 서브 콘텐츠 모두 필요한 서비스
유튜브가 그예시
왼쪽에 LNB(평소에는 접혀져 있다가 왼쪽 상단 햄버거 버튼을 눌렀을 경우에만 딤 처리되어 보인다.), 메인콘텐츠가 가운데, 서비스 콘텐츠가 오른쪽을 차지한다.
F 형태로 콘텐츠를 인지하기 때문에 가장 왼쪽에 가장 중요한 메인 콘텐츠가 먼저 와야한다는 근거로 이렇게 설계를 함
참고 아티클
사이트를 디자이할 때 F,Z패턴을 사용하면 사람들이 읽게 해야 하는 정보의 위치를 제어할 수 있다.
F패턴 레이아웃
블록단위의 콘텐츠를 읽기에 가장 보편적인 스캐닝 패턴이다. 빠르게 읽는데 장점이 있음
F자 모양의 레이아웃은 왼쪽에서 오른쪽으로 글을 읽는 문화르 가진 사라들에게 편안하게 느껴진다. 블로그 및 뉴스 사이트와 같은 텍스트가 많은 웹 사이트를 위한 레이아웃임.
-사용자는 웹 진입시 일반적으로 콘텐츠 역역의 상단 부분에서 가로로 이동한다.
-왼쪽을 세로로 스캔하며 단락의 초기 문장에서 관심 지점을 찾고, 흥미로운 것을 발견했을 때 이전보다 짧은 두 번째 수평 움직이을 보인다.
-사용자는 콘텐츠의 왼쪽을 세로로 스캔한다.
Z패턴 레이아웃
사용자가 육안으로 페이지를 스캔할 때 눈이 왼쪽에서 오른쪽으로, 위에서 아래로 이동하는 경로를 사용한다. 대부분의 서양 독자들이 책을 위에서 아래로, 왼쪽에서 오른쪽으로 스캔할 때와 같은 방식으로 작동한다. 최소한의 정보와 몇가지 주요 요소로 이루어진 단순한 디자인에 적합한 솔루션이다.
-왼쪽 상단에서 오륹꼬 상단으로 스캔하여 수평선을 만든다.
-페이지의 왼쪽과 아래쪽으로 대각선을 만든다.
-오른쪽을 가로질러 두 번째 수평선을 형성한다.
F 패턴 레이아웃의 형태가 반응형에도 최적화 되어있고 내부 스크롤을 지양하고 전체스크롤을 통해 사용서이 높아진다.
3. 인사이트
오늘의 아티클은 콘텐츠 설계에 대해 알아보았는데 몰랐었던 정보를 많이 알게되었다.
특히 푸터라는 말을 많이 들어보았는데 그게 무엇을 의미하는지 잘 몰랐었다. 그냥 아 그런게 있구나 라고 넘어갔는데 오늘 아티클을 요약하면서 LNB,GNB,SNB,FNB,F패턴 레이아웃,z패턴 레이아웃 이란 추가적인 내용도 알게되어 도움이 많이 되었다. 아티클 요약을 하면 할수록 아는 정보는 많아지는데 이 많은 내용들을 잘 정리해서 어딘가에 기록을 해둬야겠다.
