홈페이지 만들 때 알아야 할 용어집 1편 : 구조와 배치
홈페이지 구조와 배치를 이해하는 데 필요한 기본 용어를 정리했어요.
한 줄 요약
헤더, 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. 스택과 그리드는 어떻게 구분하나요?
둘 다 컨테이너 안에서 요소를 배치하는 방법이에요. 스택은 순서대로 쌓는 방식이고, 그리드는 격자로 나누는 방식이라는 점만 달라요.