이런 상황에서 나옵니다
"GNB에 메뉴 하나 추가해주세요" — 국내 웹 프로젝트 회의에서 상단 주메뉴를 가리킬 때 거의 항상 이 말을 씁니다.
사이트 전체에 공통으로 노출되는 최상위 메뉴입니다. 어느 페이지에 있든 항상 같은 항목이 보입니다.
눈으로 보기 직접 눌러보세요
파란 부분이 GNB입니다. 로고·로그인은 헤더에는 속하지만 GNB에는 보통 포함하지 않습니다.
헷갈리는 지점한국 웹 업계에서만 쓰는 용어입니다. 해외 자료나 외국계 클라이언트에게는 통하지 않습니다. 영어로는 Primary Navigation / Main Nav 라고 합니다.
실무에서 쓸 때GNB 항목은 5~7개를 넘기지 않는 게 좋습니다. 그 이상은 사용자가 훑어보지 못합니다. 항목을 추가해달라는 요청이 오면 "무엇을 뺄까요"를 함께 물어보세요.
이렇게 요청하세요
GNB(상단 주메뉴)에 항목을 추가해주세요. 다만 현재 6개라 더 늘리면 훑어보기 어려워집니다. 우선순위가 낮은 항목을 하위로 내리거나 메가 메뉴로 묶는 것을 검토해주세요.
이런 상황에서 나옵니다
"이 페이지는 LNB 붙여주세요" — 어떤 섹션 안에 하위 페이지가 여러 개일 때 나옵니다.
특정 섹션 안에서만 쓰이는 하위 메뉴입니다. GNB에서 "고객지원"을 눌러 들어갔을 때, 그 안에서만 보이는 왼쪽 세로 메뉴가 LNB입니다.
눈으로 보기 직접 눌러보세요
파란 부분이 LNB. "고객지원" 안에서만 보입니다.
헷갈리는 지점GNB와 마찬가지로 한국식 용어입니다. 해외에선 Secondary Navigation / Side Navigation. 보통 사이드바 형태라서 "사이드바"와 섞어 부르는데, 사이드바는 위치, LNB는 역할을 가리킵니다.
실무에서 쓸 때모바일에는 왼쪽 세로 LNB를 그대로 둘 공간이 없습니다. 상단 가로 스크롤 탭으로 바꾸거나 셀렉트로 접는 게 일반적입니다. 이 변환을 시안에 함께 그려야 합니다.
이렇게 요청하세요
고객지원 섹션에 LNB(좌측 하위 메뉴)를 넣어주세요. 현재 보고 있는 항목은 활성 표시해주시고, 모바일(767px 이하)에서는 상단 가로 스크롤 탭으로 바꿔주세요.
06
콘텐츠 영역
Content Area · 본문 영역
이런 상황에서 나옵니다
"콘텐츠 영역만 스크롤되게 해주세요" 같은 요청에서 나옵니다.
실제 내용이 들어가는 주 영역입니다. 헤더·푸터·사이드바를 뺀 나머지라고 보면 됩니다.
이렇게 요청하세요
헤더와 사이드바는 고정하고, 콘텐츠 영역만 스크롤되게 해주세요.
07
컨테이너
Container · 래퍼(Wrapper)
이런 상황에서 나옵니다
"본문 1200으로 잡아주세요" — 큰 모니터에서 내용이 너무 넓게 퍼지는 걸 막을 때 나옵니다.
콘텐츠의 최대 너비를 잡아주는 보이지 않는 박스입니다. 모니터가 아무리 커져도 글이 화면 끝까지 늘어나지 않게 잡아줍니다.
눈으로 보기 직접 눌러보세요
회색 = 화면 전체 폭 / 파란색 = 내용이 들어가는 최대 폭. 창을 넓혀도 파란 부분은 더 넓어지지 않습니다.
헷갈리는 지점"본문 1200px로 잡아주세요"의 그 1200px이 컨테이너 너비입니다. 배경색은 화면 전체로 깔고 내용만 컨테이너 안에 두는 게 일반적인 구조입니다.
실무에서 쓸 때글이 많은 페이지는 오히려 더 좁게(680~760px) 잡습니다. 한 줄이 너무 길면 다음 줄로 눈이 잘 못 넘어갑니다.
이렇게 요청하세요
콘텐츠 최대 너비를 1200px 컨테이너로 잡고 가운데 정렬해주세요. 배경색은 화면 전체 폭으로 깔아주세요. 좌우 여백은 20px 확보해주세요.
09
컬럼 · 거터 · 마진
Column · Gutter · Margin
이런 상황에서 나옵니다
개발자가 "거터가 몇이죠?"라고 물을 때. 그리드 수치를 정확히 전달해야 하는 순간입니다.
그리드를 이루는 3요소입니다. 컬럼은 세로 칸, 거터는 칸과 칸 사이 간격, 마진은 화면 양옆 바깥 여백입니다.
눈으로 보기 직접 눌러보세요
파란 칸 = 컬럼 · 칸 사이 벌어진 곳 = 거터 · 노란 테두리 안쪽 = 마진
헷갈리는 지점셋 다 "간격/여백"이라고 뭉뚱그려 말하면 개발자가 못 알아듣습니다. 거터 24, 마진 20처럼 이름을 붙여 수치로 전달해야 합니다.
이렇게 요청하세요
그리드 수치는 컬럼 12개, 거터 24px, 좌우 마진 20px입니다. 모바일에서는 컬럼 4개, 거터 16px, 마진 16px로 바꿔주세요.
14
z-index · 레이어
z-index · Layer · 쌓임 순서
이런 상황에서 나옵니다
"모달이 헤더 뒤로 숨어요" — 이 버그 리포트가 올라올 때 반드시 나옵니다.
요소가 앞뒤로 겹칠 때 무엇이 위에 오는지를 정하는 값입니다. 숫자가 클수록 앞에 옵니다.
눈으로 보기 직접 눌러보세요
z-index: 1
z-index: 10
z-index: 100
헷갈리는 지점"모달이 헤더 뒤로 숨어요" 같은 버그의 원인이 대부분 z-index입니다. 프로젝트 시작할 때 헤더·드로어·모달·토스트의 층위를 미리 정해두면 이런 문제가 안 생깁니다.
실무에서 쓸 때층위를 문서로 정해두세요. 예: 기본 0 / 스티키 헤더 100 / 드로어 200 / 모달 300 / 토스트 400. 아무 숫자나 쓰면 나중에 9999가 여러 개 생깁니다.
이렇게 요청하세요
z-index 층위를 정리해주세요 — 헤더 100 / 드로어 200 / 모달 300 / 토스트 400. 9999 같은 임의값은 쓰지 말고 이 규칙으로 통일해주세요.