홈페이지 만들 때 알아야 할 용어집 1편 : 구조와 배치
·
Qshop Growth Lab
홈페이지 구조와 배치를 이해하는 데 필요한 기본 용어를 정리했어요.
한 줄 요약
헤더, GNB, 섹션, 스택 등. 홈페이지를 만들 때 자주 나오는 구조 용어를 한 번에 정리했어요.
홈페이지 만들 때 알아야 할 용어집
이 시리즈는 홈페이지 화면 요소의 이름을 정리한 용어집이에요. 이름을 모르면 화면을 손으로 짚어가며 커뮤니케이션해야 하는데, 이름을 알면 훨씬 빠르게 전달돼요.
잠깐, 용어는 왜 알아두면 좋을까요?
두 가지 상황 때문이에요.
1) 직접 에디터를 만질 때
이름을 모르면 에디터의 수많은 기능을 하나씩 눌러보면서 "이게 맞나?" 확인해야 하는 상황이 반복돼요. 그러나 "헤더", "패딩"이라는 이름을 알면 뭘 찾아야 할지 바로 떠오르고 곧장 그 항목으로 갈 수 있어요.
2) 디자이너나 개발자와 소통할 때
"메뉴 있는 저 윗부분이요"라고 설명하는 대신 "GNB"라고 말하면 훨씬 빠르고 정확하게 피드백이 전달돼요.
반응형 화면? 반응형 홈페이지?
가장 먼저 알아야 할 개념이 있다면 바로 반응형이에요.
이미 경험했다시피, 홈페이지 방문자는 PC로도 들어오고, 휴대폰으로도 들어와요.
그럼 PC용 따로, 모바일용 따로 만들어야 하나 생각할 수 있지만, 반응형으로 홈페이지를 구현하게 된다면 하나의 페이지가 화면 크기에 맞춰 알아서 모습을 바꿀 수 있어요. 즉, 화면 크기 변화에 "반응"해서 레이아웃이 바뀐다는 뜻이에요.
그렇다면 PC와 모바일, 두 화면을 모두 대비하려면 어떤 부분을 고려해야 할까요?
- 배치: PC에서는 요소가 가로로 나란히 있는 경우, 모바일에서는 세로로 쌓이도록 신경 써야 해요.
- 메뉴: PC에서는 GNB 메뉴가 가로로 쭉 펼쳐져 보이지만, 모바일에서는 같은 메뉴가 햄버거 메뉴* 안으로 숨도록 처리해야 해요.
- 노출 여부: 부가 정보나 장식성 이미지처럼 꼭 필요하지 않은 요소는 모바일에서 아예 안 보이게 처리할 지 판단해야 해요.
*햄버거 메뉴는 세줄로 쌓인 아이콘 모양이 햄버거를 닮았다고 해서 붙은 이름이에요.
페이지 뼈대
홈페이지는 맨 위, 중간, 맨 아래, 이렇게 세 부분으로 이루어져 있어요. 이 중 맨 위와 맨 아래에는 페이지마다 반복되는 고정된 요소들이 자리 잡고 있어요.
| 용어 | 한 줄 정의 | 위치/역할 |
|---|---|---|
| 헤더 | 페이지 맨 위, 로고와 메뉴가 있는 영역 | 페이지 최상단에 고정되어, 스크롤해도 브랜드와 메뉴가 계속 보이게 하는 영역 |
| GNB* | 사이트 전체를 이동하는 메뉴 모음 | 헤더 안에 위치하며, 클릭하면 다른 페이지로 이동시키는 링크들의 모음 |
| 히어로 섹션 | 헤더 다음, 가장 먼저 보이는 큰 화면 영역 | 헤더 바로 아래, 스크롤 없이 화면에 보이는 첫 번째 섹션 |
| 푸터 | 페이지 맨 아래, 부가 정보 영역 | 페이지 최하단에 위치하며, 본문에서 다루지 않은 부가 정보를 모아두는 영역 |
여기서 헤더와 GNB는 자주 혼동돼요. 헤더는 영역 전체를 가리키고, GNB는 그 안에 들어 있는 메뉴 부분만 가리켜요. 로고는 헤더에 속하지만 GNB에는 속하지 않아요.
*GNB는 Global Navigation Bar의 약자예요
화면을 나누는 단위
페이지 중간은 여러 개의 섹션으로 나뉘어요. 섹션 하나는 스크롤할 때 한 덩어리씩 넘어가는 화면 블록이에요.
| 용어 | 한 줄 정의 | 위치/역할 |
|---|---|---|
| 섹션 | 하나의 주제를 담은 화면 블록 단위 | 페이지 중간에 위치하며, 스크롤할 때마다 다음 섹션으로 넘어가는 구획 단위 |
| 컨테이너 | 섹션의 영역(폭)을 조절하는 것 | 섹션 안에 위치하며, 배경은 화면 폭 그대로 두고 콘텐츠 폭만 좁혀주는 역할 |
화면이 아무리 넓어도 글자·이미지가 화면 끝까지 꽉 차 있으면 읽기 불편해요.
그래서 섹션의 배경은 화면 전체를 채우더라도, 실제 콘텐츠는 컨테이너가 정한 좁은 범위 안에서만 표시될 수 있게 설계하는 경우가 많아요. 이미지처럼 화면은 넓어도 콘텐츠는 가운데 정렬된 채 일정 폭 안에 머무는 게 가능한 것도 이 컨테이너 때문이에요.
TIP
컨테이너는 큐샵 스튜디오 에디터에서 직접 세밀하게 조절할 수 있어요. 위 이미지처럼, 콘텐츠가 쌓인 스택을 감싸는 컨테이너에 최대 너비를 지정할 수 있어요. (최소 너비 지정도 가능해요.)
컨테이너 안 배치 방식
컨테이너라는 틀 안에서, 텍스트·이미지 같은 요소를 실제로 어떻게 배치할 지 정하는 방법이 두 가지 있어요.
| 용어 | 한 줄 정의 | 위치/역할 |
|---|---|---|
| 스택 | 요소를 세로/가로로 순서대로 쌓는 방법 | 컨테이너 안에 위치하며, 요소를 놓는 순서 그대로 세로나 가로로 배열하는 역할 |
| 그리드/컬럼 | 요소를 격자(칸)로 나눠 배열하는 방법 | 컨테이너 안에 위치하며, 여러 요소를 동일한 크기의 칸으로 나눠 배열하는 역할 |
스택은 한 줄로 순서대로 쌓는 배치이고, 그리드는 바둑판처럼 칸을 나눠서 채우는 배치에요. 상품을 하나씩 세로로 소개할 땐 스택을, 여러 상품을 격자로 나란히 보여줄 땐 그리드를 씁니다. 여기서 컬럼은 그리드를 이루는 세로 칸 하나하나를 가리켜요. 그리드를 몇 개의 칸으로 나눌지에 따라 2컬럼, 3컬럼으로 불러요.
TIP
스택과 그리드도 큐샵 스튜디오 에디터에서 직접 설정할 수 있어요. 스택은 기본 레이아웃에서 세로·가로 방향을 선택할 수 있고, 그리드는 홈페이지에서 권장되는 2×2, 3×3 레이아웃을 기본으로 선택할 수 있게 해줘요.
여백
같은 요소라도 주변에 얼마나 여백을 두는지에 따라 화면에서 주는 느낌이 완전히 달라져요.
| 용어 | 한 줄 정의 | 위치/역할 |
|---|---|---|
| 마진 | 요소 바깥의 여백(다른 요소와의 거리) | 요소와 요소 사이에 위치하며, 서로 다른 요소임을 구분해주는 역할 |
| 패딩 | 요소 안쪽의 여백(내용과 테두리 사이) | 요소 테두리와 내용 사이에 위치하며, 내용이 답답해 보이지 않게 여유를 만드는 역할 |
패딩은 요소 안쪽 여유 공간이고, 마진은 그 요소와 옆 요소 사이의 거리예요. 버튼 안 글자와 버튼 테두리 사이가 좁아 보이면 패딩을 늘리고, 버튼과 다른 요소가 너무 붙어 보이면 마진을 늘려요.
TIP
마진과 패딩도 큐샵 스튜디오 에디터에서 직접 픽셀 단위로 조절할 수 있어요. 스택 레이어를 선택한 후, 마진은 "행 간격"이나 "열 간격"에서, 패딩은 "여백"에서 설정할 수 있어요.
자주 묻는 질문
Q. 반응형은 자동으로 되는 건가요?
큐샵 에디터에서는 데스크탑용 화면을 만들면 기본적으로 모바일 화면도 자동 생성돼요. 다만 레이아웃이 어색하면 모바일 화면에서 따로 조정이 필요할 수 있어요.
Q. 헤더와 GNB, 같은 말 아닌가요?
아니에요. 헤더는 로고·메뉴를 포함한 전체 영역이고, GNB는 그중 메뉴 부분만 가리켜요.
Q. 섹션과 컨테이너는 어떻게 다른가요?
섹션은 화면을 위아래로 나눈 블록 자체이고, 컨테이너는 그 섹션의 영역(폭)을 조절하는 거예요. 섹션 배경은 화면 폭을 그대로 따라가지만, 컨테이너는 최대 폭을 갖고 있다가 화면이 그보다 좁아질 때만 함께 줄어들어요.
Q. 스택과 그리드는 어떻게 구분하나요?
둘 다 컨테이너 안에서 요소를 배치하는 방법이에요. 스택은 순서대로 쌓는 방식이고, 그리드는 격자로 나누는 방식이라는 점만 달라요.
다음 편에서는
이번 편에서는 페이지의 뼈대와 구조를 정리했어요. 다음 편에서는 CTA 버튼, 띠배너, 아코디언처럼 방문자가 직접 누르고 반응하는 요소들의 용어를 같이 정리해볼게요.
