UI/UX 용어정리 (1)UI 구조중심

 

UI/UX 용어를 내 언어로 한 번쯤 정리하고 싶었다.

용어는 프로젝트 마다, 함께 소통하는 사람들이 조금씩 조정해 가며 맞춰가야 하는 부분이 있기에

나의 기준을 명료하게 정리하고자 이 글을 작성했다.

해당 글은 시리즈로 작성해 나갈 예정이다.

 

 

 

1. UI/UX

포털에 검색하면 나오는 용어 개념은 다음과 같다.

- UI(User Interface) : 사용자 인터페이스

- UX(User eXperience) : 사용자 경험

UX는 사용자가 접하고 이용하면서 느끼는 모든 행동, 감정, 습관, 심리 등이며 

이것을 고려하여 UI로 화면, 버튼, 아이콘 등 시각적 요소를 활용하여 표현하는 것이다.

실예로 나는 버튼위치, 디자인적 의사결정에서 '이러이러한 UX를 고려하여 UI에 반영하였다'는 표현을 자주 사용하곤 했다.

 

 

 

2. 헤더(Header)

사실 헤더/푸터는 쉽게말하면 최상단/최하단 영역이라고 할 수 있다.

헤더(최상단)를 무엇으로 구성할지, 푸터(최하단)에 어떤 내용과 기능을 넣을지 

영역을 잡고 논의할 때 헤더, 푸터로 얘기하면 개발자, 퍼블리셔가 이해하기 쉽다.

헤더/푸터 영역

헤더에는 일반적으로 사이트의 로고, 메뉴로 구성된 GNB(Global Navigation Bar, 뒤에 설명)로 배치하는 경우가 많다.

때에 따라 검색바를 넣기도 하고, 성격에 따라 표현은 다르게 된다. 

기업 소개 홈페이지 같은 경우에는 GNB를 고정형으로 헤더 부분에 많은 기능을 넣고

서비스 소개 페이지 같은 경우에는 간단하게 표현하거나 숨겨놓는 형식으로 구성하기도 한다.

 

 

 

3. 푸터(Footer)

앞서 언급한 바와 같이 최하단 영역이다.

주로 기업정보, 사이트맵, 정책적으로 배치해야 하는 이용약관 등이 배치된다.

푸터 영역에 배치하는 내용은 때에 따라 하단 네비게이션 바, FNB(Foot Navigation Bar)라고 표현하는 경우도 있다.

 

 

 

4. 네비게이션(Navigation)

- GNB(Global Navigation Bar)

사이트 최상위 전체 공통 내비게이션을 GNB라고 부른다.

메인 대분류 메뉴라고 보면 되고 특히 기업 소개 홈페이지 같은 곳에서는 

고정형으로 배치하는 경우가 많다.

한국수력원자력 홈페이지 내 GNB 예시

- LNB(Local Navigation Bar)

GNB를 통해 소제목으로 들어간 해당 페이지(로컬페이지)에 해당하는 영역의 메뉴이다.

GNB보다 하위 메뉴라고 생각하면 되고, 이때의 L은 Local의 약자이다.

한국수력원자력 홈페이지 내 LNB 예시

 

- SNB(Side Navigation Bar)

GNB와 LNB를 제외한 나머지 사이드 메뉴이다.

왼쪽에 있는 경우가 많아 LNB를 쓰는데, 여기서 L은 Left의 약자이다.

반대로 오른쪽에 있을 경우엔 RNB로 쓰기도 한다.

로컬 LNB와 사이드 LNB를 혼용해서 쓰면 커뮤니케이션에 혼선이 있을 수 있어 

개인적으로는 SNB라고만 사용했다.

요청에 따라 기능정의서에서는 SNB(L), SNB(R)이라고 친절히 표기한 적도 있다....ㅎㅎ

한국수력원자력 홈페이지 내 SNB 예시

 

 

 

5. 브레드크럼(Breadcrumb)

현재 콘텐츠의 위치를 알려주고, 상위 카테고리로 쉽게 오가도록 도와주는 요소이다.

헨젤과 그레텔에서 빵 부스러기를 통해 길을 찾고자 했던 것에서 유래한 용어라고 한다.

트리구조를 띄는, Depth가 여러 갈래로 나뉘는 메뉴가 있는 경우에 유저에게 편의성을 줄 수 있는 요소다.

한국수력원자력 홈페이지 내 페이지네이션 예시 (붉은색 상자표기)

 

 

 

6. 페이지네이션(Pagination)

콘텐츠를 여러 개 페이지에서 나누어 보여주는 방식이다.

페이지 하단에 나열된 숫자로 페이지를 이동하거나, 화살표로 다음 페이지 이동 등이 가능하여

여러 콘텐츠를 통제적으로 깔끔하게 볼 수 있다.

(필터, 정렬과 곁들이면 페이지네이션의 깔끔함에 대한 장점을 더 활용할 수 있다.)

네이버 페이지네이션 예시

다만 '페이징 처리 해주세요'와 같이 페이징이라고 표현하는 경우도 있다.

페이지네이션을 페이징 기법이라고 하는 것이 의사소통에는 문제가 없지만,,

개발자 입장에서 페이징 기법은 메모리 관리 기법이라는 정의로 먼저 인식이 될 수 있으니 

UI에 대해 소통할 때는 페이지네이션이라고 표현하는 게 기획자에게는 더 낫다고 생각되었다.

 

 

 

7. 무한 스크롤(Scroll)

말 그대로 콘텐츠 중심으로 무한정 스크롤하는 방식이다.

쉽게 말해 인스타그램, 페이스북 모바일 앱을 생각하면 좋을 것 같다.

썸네일이 중요도가 높은 숏폼 콘텐츠 앱도 마찬가지로 무한 스크롤이 어울리는 방식이다.

 

단, 이 방식은 성능을 고려해야 한다.

내가 최근에 참여한 기획에서는 3D 콘텐츠를 CMS(Content Management System)에서
불러와 로딩하는 과정이 필요했는데

섣불리 무한스크롤을 도입하면 스크롤하다가 시간 다 가는 수가 있다.

스크롤 한번 할 때마다 메모리를 너무 많이 써서 뻗을 수도 있다는 뜻이다.

 

예시로, 게임 같은 곳에서 아이템 보관함 UI를 기획하는데 무한 스크롤을 쓰면 

1) 아까 봤던 아이템을 다시 확인하기 위해 돌아가는데도 사용자가 불편하고, 

2) 정리되지 않아 보는 불편함도 크다. 

3) 심지어 스크롤을 올리고 내릴 때 로딩이 계속되는 불편함이 있을 수 있다는 것이다.

 

언제나 그렇듯 용도와 상황에 맞게 적용하면 될 것 같다.

특히 PC의 경우 UI/UX 적으로 유저의 사용성을 고려하는 것도 중요하지만

그렇게 구현하기 위해 필요한 기술이 유저가 사용하는 기기 사양에 적합한지 테스트가 중요하다.