꼭 알아 두어야 할 기본적인 웹 UI 용어
협업을 하는데 상대방이 나만 모르는 용어를 알아듣지 못해 민망했던 경험. 또는 홈페이지 제작 의뢰 후 미팅을 진행하는데 담당자가 내가 모르는 용어들을 사용해서 난감했던 경험이 있으신가요? 기본적인 UI 용어를 파악하고 있다면 그런 상황에서 큰 도움이 될 것입니다. 오늘은 홈페이지를 제작할 때 기본적으로 알고 있으면 좋은 용어들을 알아보도록 하겠습니다.
1. GNB : Global Navigation Bar
GNB는 Global Navigation Bar의 줄임말로 일반적으로 웹사이트 최상단에 위치하는 메뉴를 말합니다.
모든 페이지에서 공통적으로 노출되는 메뉴로 사용자가 원하는 메뉴로 빠르게 이동할 수 있도록 링크가 포함되어 있습니다.
2. LNB : Local Navigation Bar
LNB는 Local Navigation Bar의 줄임말로 현재 서비스 영역만 해당되는 네비게이션을 뜻합니다.
앞서 설명한 GNB의 하위 메뉴로써 서브 메뉴라고도 불립니다. 쉽게 말해 GNB가 대분류, LNB는 중분류, 소분류 메뉴라고 볼 수 있습니다.
3. 헤더 : Header
웹사이트 최상단의 로고, GNB 등 주요 기능이 포함된 영역입니다.
모든 페이지에서 항상 상단에 고정되어 있으며 'Head'를 따와 'Header' 라고 불립니다.
4. 푸터 : Footer
웹사이트 최하단에 위치한 영역으로 기업 소개, 이용약관, 카피라이트 등 사업 정보에 대한 내용이 들어갑니다.
모든 페이지에서 항상 하단에 고정되어 있어 'Foot'을 따와 'Footer' 라고 불립니다.
5. 햄버거 메뉴
화면에 모든 항목을 드러내는 방식이 아닌 메뉴를 클릭하면 숨겨져 있던 메뉴들이 펼쳐지는 요소를 말합니다.
일반적으로 헤더 내 모서리에 위치하며 3개의 가로 선으로 된 아이콘을 주로 사용합니다.
아이콘 모양이 햄버거같이 생겼다고 하여 '햄버거 메뉴' 라고 불립니다.
6. 팝업과 모달
팝업창과 모달창은 사용자들의 시선을 사로잡아 주목도를 올려주는 같은 목적을 갖고 있지만 사용 방식은 완전히 다릅니다.
1) 팝업창
먼저 팝업창이란 현재 열려있는 브라우저 위에 또 다른 브라우저가 열리는 것을 말합니다.
주로 광고, 공지 등을 알리는 용도로 활용되곤 했습니다.
하지만 팝업창은 트래픽 증가, 메모리 낭비 등의 이유로 브라우저 자체에서 팝업 차단을 기본값으로 설정해두기 시작했습니다.
때문에 설정해둔 팝업창이 강제로 사용자에게 보이지 않게 되면서 점차 팝업창의 사용이 줄어들고 있습니다.
Google MATERIAL DESIGN 22) 모달창
모달창은 현재 열려있는 브라우저 내에서 상위 레이어를 띄우는 방식입니다.
모달창이 띄워져 있는 경우 모달창을 종료하지 않는 이상 원래 창 화면을 사용할 수 없습니다.
때문에 모달은 서비스 내에서 다음 단계를 진행하기 위해 사용하는 경우가 많습니다.
또한 레이어 형태이기 때문에 브라우저 자체의 옵션에 전혀 영향을 받지 않습니다.
따라서 반드시 사용자에게 노출되어야 하는 창일 경우 모달창을 사용하는 것이 좋습니다.
7. 브레드크럼 : Breadcrumbs
헨젤과 그레텔의 '빵 부스러기로 표시한 길'에서 따온 브레드크럼은 서비스에서 유저의 위치를 보여주는 네비게이션 시스템입니다.
쉽게 ‘로케이션’이라고도 불리죠. 이는 서비스의 구조를 심플하게 보여주기 때문에 복잡한 구조를 쉽게 이해할 수 있도록 하여 사용자의 이탈률을 줄여준다는 장점이 있습니다.
8. 페이지네이션 : Pagination
흔히 목록 하단에 숫자가 나열되어 있는 것을 보신 적이 있을 겁니다. 이것이 페이지네이션인데요.
이는 콘텐츠를 여러 페이지로 나눠서 보여주는 인터페이스입니다.
다음 또는 이전 페이지로 이동하거나 특정 페이지로 이동하는 것을 돕습니다.
리스트가 많아 세로로 스크롤이 길어지는 경우 사용합니다.
9. 파비콘 : Favicon
웹사이트에 방문했을 때 브라우저 탭 좌측에 나타나는 아이콘을 보실 수 있습니다.
그 작은 아이콘의 이름이 '파비콘' 이며 주로 로고를 활용하여 해당 사이트의 특징을 나타내곤 합니다.
10. 반응형 웹
디지털 기기가 점차 다양해지면서 등장한 반응형 웹은 접속하는 디스플레이 종류에 따라 화면의 크기가 알맞게 변하는 웹사이트를 뜻합니다.
반대로 크기에 따라 변하지 않고 고정되어 있는 것은 '적응형 웹'이라고 불립니다.
반응형 웹에 관한 더 자세한 설명은 여기를 참고해 주세요!
11. 스토리보드
스토리보드는 UX 구현을 위한 사용자의 니즈와 목표, 인터페이스 간 상호작용을 시각화한 화면 설계도입니다.
이는 프로젝트 참여자들의 의사소통을 돕는 도구이자 서비스가 완성되기 전 예상되는 경험과 이슈들을 '미리보기' 할 수 있는 중요한 단계입니다.
프로젝트의 첫 단추인 기획단에서 기획자가 ‘제대로 된’ 스토리보드를 작성한다면 다음 디자인 단계에서 디자이너가 더 효과적이고 생산적인 디자인을 구현할 수 있겠죠.
그렇다면 스토리보드는 어떤 툴로 작성하는 게 좋을까요?
일반적으로 PPT로 작성하곤 했으나 최근에는 피그마를 활용해 반복 작업을 최소화하고 있습니다.
이 외에도 XD, 파워목업, 스케치 등 다양한 툴이 있어 회사마다 가장 적합한 도구를 선택하고 있습니다.
이에 관련해 프로토 타이핑 툴 소개는 추후 더 세부적으로 따로 다룰 예정입니다.
Sense Styleguide by Chelsea Officer for Sense
12. 스타일 가이드
다수의 사람들이 프로젝트를 진행하다 보면 저마다 각기 다른 스타일로 디자인을 하게 되는 일이 발생합니다.
이를 방지하기 위해 정하는 것이 바로 스타일 가이드인데요.
스타일 가이드를 활용하면 혼란을 최소화하여 효율성을 높여 작업 시간을 단축시킬 수 있습니다.
또한 일관적인 디자인을 산출해 내어 사용자에게도 일관적인 경험을 줌으로써 서비스에 대한 긍정적인 인식을 심어줄 수 있습니다.
스타일 가이드는 최소한 아래 4가지를 포함해야 합니다.
- 타이포 그래피 : 폰트, 사이즈, 행간, 자간, 컬러 등
- 색상 팔레트 : 주조색, 보조색, 본문 텍스트 컬러 등
- 아이콘 : 굵기, 끝모양, 꺾임, 겹침 등 스타일 정의
- 이미지 : 크기, 색감, 강조 표시, 간격, 배경색 등
마치며
지금까지 알아두면 도움이 되는 기본적인 UI 관련 용어를 알아보았습니다.
깊이 있게 알고 있지 않더라도 기본적인 개념만 익혀놓는다면 협업 시 꽤 큰 도움이 될 것입니다.
다음에는 더 심화된 내용인 '컴포넌트 용어'를 정리한 글로 돌아오겠습니다.
출처
IT 회사의 비전공자를 위한 UX 용어 모음집
https://brunch.co.kr/@zero-base/20
꼭 알아야 할 웹디자인 용어
