웹 화면 레이아웃 설계
웹 화면에서의 메인 콘텐츠 영역과 서브 스티키 영역 설계
한윤석 (두블링 DOBLING, UI/UX 디자이너)
안녕하세요! 이제 1년차에 현재 2년차 주니어에서 디자이너가 되었습니다!
2년차 주니어 디자이너에서 미래 프로 디자이너를 꿈꾸는 사람으로써 같은 상황의 모든 신입, 주니어, 초보, 입문, 예비 디자이너들을 위해 매주 제가 경험한 디자인 인사이트를 업로드 합니다.
회사에서 작업을 하다가 서비스 화면의 메인 콘텐츠, 서브 콘텐츠에 대한 내용을 글로 정리하면 좋을 것 같아 오랜만에 글을 올립니다~!
서비스 화면 구조 설계
웹/앱 화면에서 콘텐츠를 어떻게 설계해야할까?
기본적인 서비스 구조
현재 웹을 기반으로 하는 웹/앱 반응형 서비스에서는 통상적인 구조로 좌측:네비, 우측: 콘첸츠 영역을 두고 있습니다. 사용목적에 맞게 레이아웃을 유연하게 사용하는데요,
보통 해더에서 GNB 글로벌 네비게이션 바가 들엉가고 왼쪽 빨간 부분에 LNB 로컬 네비게이션바가 들어가는 형태를 많이 가져가고 있습니다. 그래서 우측에 콘텐츠를 두는 형태를 많이 가져가는데요?
여기서 서비스의 내용이 많아져서 서비스 콘텐츠 영역을 더 분리해야된다면 어떻게 할까요? 콘텐츠영역을 가운데 놓고 왼쪽으로 LNB영역 오른쪽에 따로 서브 콘텐츠 영역을 두는게 맞을까요?
어디에 서브 콘텐츠 영역을 둘지 알아봅시다!
좌측에 콘텐츠를 놓은 서비스
위 이미지 처럼 메인 콘텐츠를 왼쪽에 크게 배치하고 오른쪽에는 서비스 콘텐츠(목차나 서브 내용)를 배치하는 것을 볼 수 있습니다.
이런 경우 모바일에서는 좌측 메인 콘텐츠를 먼저 두고 그 밑에 서브 콘텐츠를 두는 형태로 설계에 들어갑니다.
우측에 콘텐츠를 놓은 서비스
우측에 콘텐츠를 넣는 서비스는 주로 왼쪽 콘텐츠 영역을 LNB 메뉴로 사용하는 경우가 많습니다!
그렇다면 LNB, 서브 콘텐츠 모두 필요한 서비스의 경우는?
유튜브 같은 경우 여기서 화면이 세단으로 나눠지는데요
왼쪽에는 LNB, 메인콘텐츠가 가운데, 서비스 콘텐츠가 오른쪽을 차지합니다.
그러나 자세히보면 LNB의 경우에는 평소에는 접혀져 있다가 왼쪽 상단 햄버거 버튼을 눌렀을 경우에만 딤 처리되어 보입니다!
유튜브도 이렇게 하는 이유는 사용자가 화면을 접할때 F 형태로 콘텐츠를 인지하기 때문에 가장 왼쪽에 가장 중요한 메인 콘텐츠가 먼저 와야한다는 근거로 이렇게 설계를 한 것 같습니다.
왼쪽 LNB메뉴는 필요할때마다 햄버거 버튼을 눌러서 딤처리로 확인하구요!
확실히 메인 컨텐츠가 가장 왼쪽에 붙어서 크게 차지하니 중요한 콘텐츠 먼저 잘 읽히게 되는 것 같습니다.
출처 : https://www.reddit.comF패턴 레이아웃은 Z 패턴 레이아웃과 마찬가지로 일반적인 시선을 기반으로 한 기본 레이아웃입니다. 특히 독서 습관을 반영한 레이아웃이기에 콘텐츠가 많은 웹 페이지에 적합합니다. 주로 뉴스, 블로그 웹 페이지나 검색 결과 페이지를 F 패턴 레이아웃으로 디자인합니다.
이러한 이유때문에 메인 콘텐츠를 왼쪽에 배치하고 서비스 콘텐츠를 작게 오른쪽에 배치하며 LNB같은 메뉴는 햄버거 버튼으로 숨겨놓고 볼 수 있게 하는게 가장 좋은 서비스 구조라고 생각됩니다.
또 이러한 형태가 반응형에도 최적화되어있고 내부스크롤을 지양하고 전체스크롤을 통해 사용성이 높아지는 것 같습니다.
앞으로 웹 디자인 시에는 해당 설계를 많이 참고해야겠습니다.
클라우드 서비스 구조 설계
위 내용들을 바탕으로 HR 클라우드 서비스인 talenx(회사에서 진행하는 프로젝트)는 이미지와 같은 구조로 설계를 하였습니다.
