웹디자인 용어 8가지: UI·UX부터 GNB·그리드까지

웹디자인 용어는 뜻만 외우기보다 한 화면에서 어떤 역할을 하는지 구분하면 이해하기 쉽습니다. UI와 UX는 화면과 이용 경험의 관계를, GNB와 LNB는 이동 범위를, 레이아웃과 그리드는 배치 방식과 정렬 기준을 설명합니다. 벡터와 반응형 웹은 이미지와 화면이 크기 변화에 대응하는 방식과 연결됩니다.

고객지원 페이지에서 ‘영수증 다운로드 방법’을 찾는 상황으로 여덟 가지 용어를 살펴보겠습니다. Pixso의 웹사이트 UI 설계 기능으로 같은 페이지를 데스크톱과 모바일에 배치해 보면 용어가 실제 디자인 결정에 어떻게 쓰이는지 확인할 수 있습니다.

꼭 알아야 할 웹디자인 용어

UI (User Interface)

UI(User Interface)는 사용자가 제품의 정보를 읽고 기능을 조작하는 접점입니다. 웹과 앱에서는 버튼, 입력창, 메뉴, 아이콘과 같은 요소가 여기에 해당합니다. 디자이너는 글자, 색상, 크기와 배치를 조정해 사용자가 다음 행동을 이해하도록 돕습니다.

고객지원 화면의 검색창, 질문 목록, ‘영수증 보기’ 링크가 UI입니다. 링크가 눌릴 수 있어 보이는지뿐 아니라, 검색 중·결과 없음·선택됨처럼 상태가 바뀌어도 의미를 읽을 수 있어야 합니다.

UX (User Experience)

UX(User Experience)는 사용자가 제품이나 서비스를 이용하면서 얻는 전체 경험입니다. UI의 읽기 쉬운 정도뿐 아니라, 원하는 기능을 찾고 작업을 끝내는 과정도 포함합니다. 예를 들어 결제 버튼이 잘 보여도 가입 절차가 복잡하면 구매 경험은 불편할 수 있습니다.

지원 문서가 보기 좋아도 영수증 발급 위치가 설명과 다르거나 로그인 뒤 문서로 돌아오지 못한다면 경험은 좋지 않습니다. UI는 UX에 영향을 주지만 둘이 같은 뜻은 아닙니다. 이 과제에서는 ‘영수증을 실제로 찾고 내려받았는가’까지 살펴봐야 합니다.

GNB (Global Navigation Bar)

GNB(Global Navigation Bar)는 웹사이트의 주요 영역으로 이동하는 전역 내비게이션입니다. 보통 여러 페이지에서 같은 위치와 이름을 유지하며, 사용자가 사이트의 구조를 이해하고 필요한 영역으로 이동하도록 돕습니다.

예시 사이트의 ‘제품·요금제·고객지원’은 전역 메뉴에 해당합니다. 고객지원 문서를 읽는 중에도 다른 주요 영역으로 이동하는 길을 제공합니다. 아래에서는 Starbucks 사이트의 주요 메뉴를 표시한 기존 사례로 전역 이동 범위를 볼 수 있습니다.

LNB (Local Navigation Bar)

LNB(Local Navigation Bar)는 현재 영역 안에서 관련 페이지로 이동하는 로컬 내비게이션입니다. 예를 들어 고객지원 영역의 사용 가이드, 자주 묻는 질문, 문의 메뉴가 여기에 해당할 수 있습니다.

예시의 고객지원 안에서는 ‘계정·결제·파일 공유’가 로컬 메뉴이고, 결제 안에서 ‘영수증 다운로드 방법’을 고릅니다. 메뉴가 왼쪽에 있다는 이유만으로 LNB가 되는 것은 아닙니다. 어디로 이동시키는지, 사이트 전체와 현재 영역 중 어느 범위를 다루는지가 기준입니다.

이 그림은 상위 메뉴 아래에 하위 목적지가 펼쳐진 사례입니다. 실제 화면에서는 드롭다운·메가 메뉴 같은 표시 방식과 전역·로컬이라는 이동 범위를 구분해서 설명하면 혼동을 줄일 수 있습니다.

레이아웃 (Layout)

레이아웃은 한 화면 안에 글, 이미지, 버튼과 같은 요소를 배치하는 방식입니다. 중요한 정보를 먼저 읽고 주요 작업으로 이어 갈 수 있도록 순서, 크기와 여백을 정합니다.

고객지원의 데스크톱 화면에서는 위에 공통 헤더, 왼쪽에 지원 분류, 오른쪽에 문서 본문을 둘 수 있습니다. 본문 안에서는 제목, 핵심 답변, 단계, 관련 안내 순서로 배치합니다. 레이아웃은 이 전체적인 공간과 읽는 순서를 다룹니다.

그리드 (Grid)

그리드는 요소를 일정한 기준에 맞춰 배치하기 위한 격자입니다. 열과 간격을 정해 두면 카드, 이미지, 본문의 시작선을 맞추기 쉬워지고, 여러 화면에서도 일관된 구성을 유지할 수 있습니다.

레이아웃이 ‘분류는 왼쪽, 문서는 오른쪽’이라는 배치를 정한다면 그리드는 각 영역이 어느 선에서 시작하고 끝나는지 맞추는 기준이 됩니다. 모든 화면에 같은 열 수를 강제할 필요는 없습니다. 이 지원 문서에서는 본문이 너무 넓어 한 줄을 읽기 어렵지 않은지 먼저 살피고, 제목과 이미지의 시작선을 맞춥니다.

벡터 (Vector)

벡터 그래픽은 점과 선, 곡선 등의 정보를 수학적으로 표현한 이미지입니다. 크기를 바꿔도 윤곽을 선명하게 유지할 수 있어 아이콘이나 로고에 적합합니다. 픽셀로 이루어진 래스터 이미지와 구분해 사용합니다.

지원 메뉴의 문서 아이콘이나 내려받기 아이콘에는 벡터를 쓸 수 있습니다. 반면 실제 사용 화면을 캡처한 스크린샷은 보통 래스터 이미지입니다. 스크린샷 파일의 확장자만 SVG로 바꾼다고 내부 글자가 벡터로 변하지는 않습니다. 형태를 그린 아이콘과 촬영·캡처한 이미지를 목적에 맞게 나눠 사용하세요.

반응형 웹 (Responsive Web)

반응형 웹은 화면 크기에 따라 레이아웃이 조정되는 웹사이트를 말합니다. 큰 화면의 여러 열을 작은 화면에서는 한 열로 바꾸거나, 메뉴의 표시 방식을 조정할 수 있습니다. 글자의 가독성과 버튼을 누르기 쉬운 크기도 함께 살펴야 합니다.

지원 문서에서는 왼쪽 분류를 본문 위의 접을 수 있는 목록으로 옮기고, 본문은 한 열로 읽게 할 수 있습니다. 데스크톱 화면을 통째로 줄이는 것과는 다릅니다. 사용자가 선택한 ‘결제’와 읽던 문서는 유지하고, 좁아졌다는 이유로 제목이나 복귀 경로를 지우지 마세요.

한 지원 문서에서 각 용어를 구분해 보기

화면에서 보이는 것	역할	다른 개념과의 차이
제품·요금제·고객지원	GNB: 사이트 주요 영역으로 이동	문서 안의 소제목으로 이동하는 목차와 다릅니다.
계정·결제·파일 공유	LNB: 고객지원 안의 분류로 이동	좌우 어느 위치에 놓였는지가 정의를 결정하지 않습니다.
발급 위치·다운로드·문제 해결	현재 문서 안의 목차	별도 분류 페이지가 아니라 같은 문서의 해당 위치로 이동합니다.
왼쪽 분류와 오른쪽 본문	레이아웃: 화면 영역 배치	그리드는 영역을 맞추는 정렬 기준입니다.
모바일에서 분류를 접고 본문을 한 열로 표시	반응형 구성	글자와 버튼을 단순히 작게 축소하는 것과 다릅니다.

Pixso에서 같은 지원 페이지를 설계해 보기

Pixso는 브라우저에서 UI를 설계하고 팀과 검토할 수 있는 디자인 협업 도구입니다. 예시를 만들 때는 먼저 데스크톱과 모바일용 프레임을 나란히 두고 ‘영수증 다운로드 방법’이라는 동일한 제목과 본문을 넣어 보세요. 빈 상자로만 비교하면 긴 제목과 문서 이미지가 차지하는 공간을 놓치기 쉽습니다.

전역 메뉴와 지원 분류를 각각 컴포넌트로 정리하고, 현재 선택된 ‘고객지원’과 ‘결제’를 표시합니다. 그리드로 본문의 시작선을 맞추고, Auto Layout으로 메뉴 항목과 문단 사이 간격을 조정하세요. 그리드가 정렬 기준을 보여 준다면 Auto Layout은 콘텐츠를 담은 요소의 배치 규칙을 정하는 기능입니다.

모바일 프레임에서는 분류의 펼침·접힘 상태를 따로 만들고 본문은 읽을 수 있는 크기로 유지합니다. 문서 아이콘을 확대해도 윤곽이 유지되는지, 스크린샷은 표시 크기에서 글자가 보이는지도 살펴보세요. 마지막으로 고객지원에서 결제를 고르고 문서를 여는 경로를 프로토타입으로 연결합니다.

팀원에게 메뉴 이름을 알려 주지 말고 ‘지난 결제의 영수증을 찾아 주세요’라고 요청해 보세요. 메뉴를 못 찾으면 분류와 이름을, 문서 안에서 헤매면 정보 순서와 목차를, 모바일에서 조작하기 어려우면 배치와 크기를 다시 살필 수 있습니다. 용어를 아는 것은 이런 문제를 정확한 위치와 역할로 설명하기 위한 출발점입니다.

Pixso에서 웹페이지 구조 설계하기