이게 뭔데? 꼭 알아야 할 웹디자인 용어 정리했어요!

웹 디자인을 처음 배우는 분들을 위해 UI, UX, 반응형 웹과 GNB, LNB, 레이아웃, 그리드 등 기본 용어를 설명합니다.

꼭 알아야 할 웹디자인 용어

UI (User Interface)

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

UX (User Experience)

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

GNB (Global Navigation Bar)

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

LNB (Local Navigation Bar)

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

레이아웃 (Layout)

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

그리드 (Grid)

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

벡터 (Vector)

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

반응형 웹 (Responsive Web)

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

Pixso에서 웹 화면을 설계해 보기

Pixso는 Windows와 macOS의 브라우저에서 사용할 수 있는 디자인 협업 툴입니다. 기존 도구의 파일을 가져와 작업을 이어 가고, 팀원과 같은 디자인을 검토할 수 있습니다.

먼저 주요 메뉴와 본문, 버튼의 위치를 잡고 그리드와 오토 레이아웃으로 간격을 조정하세요. 반복되는 요소는 컴포넌트로 관리할 수 있습니다. 화면을 프로토타입으로 연결하면 사용자가 필요한 정보를 찾고 다음 단계로 이동하는 흐름을 팀과 함께 확인할 수 있습니다.