웹앱 화면의 기본 구조
화면 영역을 구분하는 기본적인 개념
웹과 앱을 디자인할 때 개발자와 소통하기 위해 화면의 구조를 알아야 합니다. 이를 모르는 상태로 작업해 두면 개발자는 의도한 레이아웃을 이해하기 어려워하고, 개발자가 디자이너와 논의하여 레이아웃을 재구성하는 데 많은 시간을 사용하게 됩니다. 개발자 입장에서 디자이너에게 수정 요청을 지속적으로 할 수밖에 없는 상황이 발생하게 됩니다.
디자이너뿐만 아니라 기획자 또한 서비스를 만들기 전에 화면의 기본 구조에 대해 알아두면 좋습니다. 서비스를 기획할 때 일관된 UX를 만들 수 있고, 디자이너・개발자와의 커뮤니케이션도 원활하게 가능해집니다. 한 마디로 화면의 기본 구조를 알아야 함께 작업하는 사람들과 협업이 원활해지고, 커뮤니케이션 비용을 낮출 수 있습니다.
전체 구조
웹과 앱에서 공통으로 사용되는 큰 틀의 구조는 3개 영역으로 나뉩니다. 동물의 신체 구조가 크게 머리, 몸통, 다리로 나눌 수 있는 것과 같습니다. 브런치 사이트를 예시로 설명해 보겠습니다.
1. 헤더(Header)
: 페이지 상단에 위치하며 주요 기능 제공 영역
ex. 로고, 네비게이션 메뉴, 프로필, 알림 등
◂ 일반적으로 스크롤 내릴 때마다 고정된 형태
2. 콘텐츠 영역(Content Area)
: 페이지의 중앙 부분에 위치하는 정보 제공 영역
**바디(Body)라는 표현도 많이 사용
ex. 블로그의 목차 리스트, 인스타의 카드 콘텐츠, 콘텐츠 썸네일 등
◂ 고정된 헤더 영역을 제외한 부분
3. 푸터(Footer) : 페이지 하단에 위치하는 영역
ex. 법적 정보, 서비스 약관, 개인정보 처리방침, 사이트 메뉴 등
◂ 주로 웹에서 많이 사용하며, 서비스를 운영할 때 필수로 기재해야 하는 내용 중심
이러한 큰 틀의 구조는 화면을 구현하는 관점에서 출발하는 개념입니다. 헤더는 HTML의 <header> 태그를 사용하여 구현되는 것이고, 페이지의 중앙 부분인 콘텐츠 영역은 HTML의 <main> 또는 <section> 태그 등을 사용하여 구현됩니다. 푸터 또한 HTML의 <footer> 태그를 사용하여 구현되는데요. 웹 개발에서 웹 페이지의 주요 구성 요소가 화면의 기본 구조가 됩니다.
여기서 헤더나 푸터와 달리, 콘텐츠 영역은 태그명과 다르게 불립니다. 해당 태그들이 포함된 중앙 영역은 사용자가 가장 많이 사용하는 정보와 기능을 담는 역할을 수행하는데요. 이러한 역할적인 의미를 쉽게 이해할 수 있도록 '콘텐츠 영역'이라고 부르는 것입니다.
+ 바디(Body)라는 표현을 많이 사용하는 이유도 웹 페이지의 주된 내용을 포함하는 영역을 직관적으로 이해하기 쉽고, HTML에서 <body>라는 태그를 사용하기 때문입니다.
세부 구조
위에 설명드린 큰 틀을 기준으로 서비스 유형에 따라 구조를 세부적으로 구분할 수 있습니다. 예를 들어, 현재 브런치는 '제12회 브런치북 출판 프로젝트'를 진행하는 중입니다.
◂ 브런치 화면에 접속하는 사용자들에게 해당 정보를 안내하고, 관심 있는 사용자가 바로 접근할 수 있도록 헤더 위에 이벤트 배너를 구현했음을 확인할 수 있는데요.
이처럼 헤더, 콘텐츠 영역, 푸터라는 큰 틀을 기준으로 제공하고자 하는 기능이나 정보 유형에 따라 다양하게 화면을 구성할 수 있습니다. 디자이너는 정보 위계와 사용성을 고려해 큰 틀을 헤치지 않는 선에서 디자인 컨셉과 구조를 설계해야 합니다. 이때 많이 사용되는 세부적인 구조는 다음과 같습니다.
1. 내비게이션(Navigaion)
: 페이지 내 위치 이동 혹은 다른 페이지로 이동하도록 돕는 메뉴나 링크를 모아둔 영역
◂ 카카오처럼 네비게이션을 헤더처럼 사용하는 것도 가능하고,
◂ 네이버처럼 헤더와 네비게이션을 분리하는 것도 가능합니다.
◂ 넥슨처럼 헤더에서 [메뉴]를 선택하면 좌측에 네비게이션이 노출되는 형태도 있습니다.
개인적으로 어떤 방식이 좋은가에 대한 정답이나 기준은 없다고 생각합니다. 오직 서비스의 성격(사용자의 이용 스타일, 서비스의 컨셉, 기획 의도 등)과 개발 가능한 환경에 따른 최선의 선택지만 있기 때문입니다.
2. 사이드바(Sidebar)
: 페이지의 좌우에 위치하며 추가적인 정보, 광고 등을 제공하는 보조 콘텐츠 영역
◂ 노션 사용법을 기록하는 티스토리 블로그입니다. 우측에서 블로그 발행글 외에 목차 등의 부가적인 정보를 확인할 수 있습니다.
◂ 크티(ctee) 사이트입니다. 상품을 소개하는 콘텐츠 영역에 구매 정보를 제공하고 있습니다. 취미로 노션 상품을 기획하고 있으니 구경해 주시면 감사합니다.
3. 메인 콘텐츠(Main Content) & 콘텐츠(Content)
: 콘텐츠 영역에서 정보를 2단으로 나누어 제공할 때 사용하는 구조
◂ 어도비의 무료로 Gif 변환해 주는 화면입니다. 메인 콘텐츠가 영상을 업로드한 부분이고, 일반 콘텐츠가 변환값을 선택하는 부분입니다.
◂ 이렇게 화면의 너비 줄였을 때, 브레이크포인트에서 메인 콘텐츠를 우선으로 화면이 구성됨을 볼 수 있습니다.
마무리하며
지금까지 웹과 앱 서비스에서 공통으로 사용되는 화면의 기본 구조에 대해 알아보았습니다. 이번 글에서는 기본 개념에 대해서만 설명드렸는데요. 다음 글에서는 이 개념과 이어지는 용어들에 대해 설명해 보겠습니다.
현업에서 기획자 또는 디자이너로 일을 하다 보면 '개발을 배워야 하나?'라는 생각을 종종 하실 수 있습니다. 이런 생각을 해결하는 방법은 개발자처럼 코드를 배워야 하는 게 아니라, 협업을 위한 기초 개념을 잘 알아두는 것입니다. UX/UI 디자인 혹은 서비스 기획자를 이제 막 준비하는 분이라면 바쁘더라도 개념에 대한 지식은 하나씩 알아가시면 좋겠습니다.
정리
1. 웹 혹은 앱 화면의 기본 구조 3가지
1) 헤더(Header) : 페이지 상단에 위치하며 주요 기능 제공 영역
2) 콘텐츠 영역(Content Area) : 페이지의 중앙 부분에 위치하는 정보 제공 영역
**바디(Body)라고도 많이 표현 : HTML에서 <body> 태그를 쓰기 때문
3) 푸터(Footer) : 페이지 하단에 위치하는 영역
2. 세부 구조
1) 내비게이션(Navigation)
: 페이지 내 위치 이동 혹은 다른 페이지로 이동하도록 돕는 메뉴나 링크를 모아둔 영역
2) 사이드바(Sidebar)
: 페이지의 좌우에 위치하며 추가적인 정보, 광고 등을 제공하는 보조 콘텐츠 영역
3) 메인 콘텐츠(Main) & 콘텐츠(Ccontent)
: 콘텐츠 영역에서 정보를 2단으로 나누어 제공할 때 사용하는 구조
