웹 화면 구성, 메뉴·레이아웃·반응형 설계로 보기 편한 페이지 만들기
처음 만든 웹페이지를 휴대전화로 열어 보니 글자가 너무 작고, 메뉴는 어디에 있는지 찾기 어려운 경우가 있습니다. 컴퓨터 화면에서는 괜찮아 보여도 작은 화면에서는 이미지가 잘리거나 버튼이 서로 겹치기도 합니다. 이런 문제는 색상보다 먼저 화면의 뼈대인 웹 화면 구성을 살펴봐야 알 수 있습니다.
이 글을 읽으면 웹페이지를 헤더, 본문, 보조 영역, 푸터로 나누는 방법과 메뉴를 배치하는 기준을 알게 됩니다. 피그마 같은 화면 설계 도구를 사용할 때 무엇부터 그려야 하는지, 컴퓨터와 휴대전화 화면을 어떻게 다르게 확인해야 하는지도 함께 살펴봅니다.
웹 화면 구성은 무엇을 정하는 일일까
웹 화면 구성은 화면에 어떤 내용을 어떤 순서로 보여줄지 정하는 작업입니다. 단순히 상자와 글자를 배치하는 일이 아닙니다. 방문자가 어디에서 시작하고, 무엇을 먼저 읽으며, 다음에 어떤 행동을 할지 흐름을 만드는 일에 가깝습니다.
보통 화면은 다음 네 영역으로 나눌 수 있습니다.
- 헤더: 로고, 주요 메뉴, 검색, 로그인처럼 사이트 전체에서 자주 쓰는 기능을 둡니다.
- 본문: 방문 목적에 가장 가까운 내용을 보여줍니다. 상품 목록, 글, 안내문, 영상 등이 들어갑니다.
- 보조 영역: 관련 글, 필터, 공지, 추천 항목처럼 본문을 도와주는 내용을 배치합니다.
- 푸터: 회사 정보, 이용 약관, 문의 방법, 저작권처럼 마지막에 확인하는 정보를 담습니다.
모든 페이지가 네 영역을 똑같이 가져야 하는 것은 아닙니다. 글 읽기 페이지는 본문을 넓게 쓰고 보조 영역을 줄일 수 있습니다. 반대로 상품 검색 화면은 필터와 목록을 함께 보여줘야 하므로 보조 영역이 중요해집니다.
그리기 전에 확인할 체크리스트
화면을 바로 그리기보다 먼저 방문자의 목적을 한 문장으로 적어 보세요. 예를 들어 “처음 온 사람이 강의 내용을 보고 신청한다”라고 정하면 필요한 정보의 순서를 정하기 쉬워집니다.
- 이 페이지를 방문하는 사람은 누구인가?
- 방문자가 가장 먼저 알아야 할 내용은 무엇인가?
- 페이지에서 꼭 해야 하는 행동은 무엇인가?
- 메뉴 이름만 봐도 이동할 곳을 예상할 수 있는가?
- 글자가 길어져도 제목과 버튼의 위치가 무너지지 않는가?
- 휴대전화에서 손가락으로 누르기 편한 크기인가?
- 이미지가 늦게 나타나도 내용의 흐름을 이해할 수 있는가?
특히 메뉴를 만들 때는 내부 조직의 말보다 방문자가 익숙한 말을 쓰는 편이 좋습니다. 운영자가 “콘텐츠 관리”라고 부르는 곳을 방문자는 “자료실”이나 “게시판”으로 찾을 수 있습니다. 메뉴 후보를 정한 뒤 실제 사용자가 어떤 단어를 떠올릴지 한 번 더 살펴보세요.
웹페이지 구성 방식은 목적에 따라 달라진다
모든 사이트에 같은 레이아웃을 적용하면 만들기는 편하지만 사용성은 떨어질 수 있습니다. 대표적인 세 가지 구성을 비교해 보면 선택 기준이 분명해집니다.
| 구성 방식 | 잘 맞는 페이지 | 주의할 점 |
|---|---|---|
| 한 줄 중심 구성 | 소개 페이지, 캠페인 화면 | 내용이 길어지면 아래로 너무 길어질 수 있음 |
| 본문과 보조 영역 구성 | 뉴스, 블로그, 자료실 | 작은 화면에서는 보조 영역의 순서를 다시 정해야 함 |
| 목록과 필터 구성 | 쇼핑몰, 검색 결과, 서비스 목록 | 필터가 많으면 처음 방문한 사람이 복잡하게 느낌 |
한 줄 중심 구성은 시선이 단순하게 흘러 장점이 있습니다. 하지만 방문자가 비교하거나 여러 정보를 찾아야 한다면 적합하지 않습니다. 목록 화면에서는 카드의 모양보다 제목, 가격이나 날짜, 상태처럼 비교에 필요한 정보가 먼저 보여야 합니다.
화면 너비가 달라질 때 배치가 바뀌는 것을 반응형 구성이라고 합니다. 반응형은 컴퓨터 화면을 작게 줄이는 것과 다릅니다. 가로로 나란히 놓은 메뉴를 세로 목록으로 바꾸고, 세 칸 카드가 한 칸 또는 두 칸으로 줄어드는 식으로 읽는 순서를 다시 설계해야 합니다.
웹 화면을 설계하는 순서
- 목적을 정합니다. 판매, 정보 전달, 신청, 문의 중 가장 중요한 행동을 하나로 좁힙니다.
- 내용을 묶습니다. 비슷한 정보끼리 묶고, 서로 관련 없는 내용을 한 영역에 섞지 않습니다.
- 종이에 먼저 그립니다. 사각형과 선만 사용해 헤더, 본문, 버튼의 위치를 잡습니다. 이 단계에서는 색상과 장식보다 순서가 중요합니다.
- 큰 화면과 작은 화면을 따로 봅니다. 큰 화면에서 넓게 보이는 영역이 작은 화면에서는 가장 아래로 밀릴 수도 있습니다.
- 실제 문장을 넣습니다. 짧은 임시 문장만 넣으면 제목이 길어졌을 때 생기는 문제를 발견하기 어렵습니다.
- 다른 사람에게 사용을 부탁합니다. 메뉴를 찾고 원하는 행동을 하는 데 막히는 지점을 관찰합니다. 설명을 해 주기보다 어디에서 멈추는지 기록하는 편이 좋습니다.
화면 설계 도구에서는 먼저 회색 상자와 글자만으로 구조를 만들 수 있습니다. 이를 와이어프레임이라고 하며, 화면의 뼈대를 뜻합니다. 뼈대가 안정된 뒤 글꼴, 색상, 그림을 넣으면 꾸민 화면 때문에 구조의 문제를 놓치는 일을 줄일 수 있습니다.
자주 생기는 실수와 고치는 방법
메뉴를 너무 많이 넣는 실수가 있습니다. 메뉴가 열 개를 넘으면 방문자는 무엇이 중요한지 판단하기 어렵습니다. 상위 메뉴를 줄이고, 관련 항목은 하위 메뉴나 검색으로 묶어 보세요. 다만 중요한 기능을 숨기기 위해 무조건 접는 방식은 피해야 합니다.
첫 화면에 내용을 과하게 담는 실수도 흔합니다. 큰 제목, 여러 개의 버튼, 긴 설명, 장식 이미지를 한꺼번에 넣으면 시선이 갈 곳을 잃습니다. 첫 화면에는 방문자가 누구를 위한 페이지인지, 어떤 이점이 있는지, 다음 행동이 무엇인지 정도를 우선 보여주는 편이 낫습니다.
컴퓨터 화면만 확인하는 실수도 주의해야 합니다. 휴대전화에서 버튼이 너무 작거나 가로 스크롤이 생기면 사용자는 내용을 보기 전에 떠날 수 있습니다. 특히 표, 긴 메뉴, 가로로 나열한 카드, 큰 이미지는 작은 화면에서 따로 점검해야 합니다.
글자와 배경의 차이가 약한 실수는 보기 좋게 꾸미려다 생깁니다. 연한 회색 글자를 흰 배경에 올리면 읽기 어렵습니다. 색을 고를 때는 장식보다 글자가 또렷하게 보이는지를 먼저 확인하고, 색만으로 상태를 구분하지 않는 것이 좋습니다.
웹 화면 구성에 관한 질문
헤더에는 무엇을 꼭 넣어야 하나요?
모든 기능을 넣을 필요는 없습니다. 로고나 첫 화면으로 돌아가는 방법, 핵심 메뉴, 검색이나 로그인처럼 자주 쓰는 기능을 우선합니다. 페이지의 목적이 단순하다면 메뉴 수를 줄이는 것이 오히려 더 편합니다.
페이지마다 같은 구조를 써야 하나요?
기본 위치와 표현 방식은 어느 정도 유지하는 것이 좋습니다. 예를 들어 로고는 계속 같은 위치에 두고, 본문 영역만 페이지 목적에 맞게 바꿀 수 있습니다. 공통 규칙은 익숙함을 만들지만, 모든 화면을 똑같이 만들면 정보의 차이가 흐려질 수 있습니다.
반응형 화면은 몇 가지 크기로 만들면 되나요?
정해진 숫자만 외우기보다 내용이 깨지는 지점을 찾는 방식이 안전합니다. 메뉴가 겹치거나 문장이 지나치게 길어지는 폭을 확인하고, 그 지점에서 배치를 바꿉니다. 사용하는 기기와 방문자 통계가 있다면 실제 환경을 기준으로 점검하세요.
예쁜 화면과 쓰기 편한 화면이 충돌하면 무엇을 먼저 봐야 하나요?
방문자가 목적을 이루는 데 필요한 구조를 먼저 봐야 합니다. 장식은 내용을 돕는 범위에서 더하고, 버튼을 찾기 어렵게 하거나 글을 읽기 힘들게 만든다면 줄이는 편이 좋습니다. 완성 뒤에는 실제 문장과 여러 화면 크기로 다시 확인해야 합니다.