[아티클 인사이트 #8] UI 용어를 정리해야 하는 이유

 타부서와 원활한 소통을 위해서는 UI용어를 정리하는 것이 중요하다.

'티그리스 디자인팀'의 글을 참고하여 국내에서 가장 많이 사용하는 기준으로 이번 아티클을 분석하려고 한다.

UI 용어를 정리해야 하는 이유 (brunch.co.kr)

UI 용어를 정리해야 하는 이유

#1 오늘의 아티클

▼ UI 용어를 정리해야 하는 이유

#2 아티클 정보 요약

▼ 메뉴종류

 1) GNB

    - 웹사이트 최상위 메뉴. 모든 페이지에서 공통적으로 보이는 메뉴바로 대부분 상단에 위치.

 2) LNB

    - GNB 메뉴를 클릭 혹은 마우스 올린 상태(hover) 일 때 보이는 메뉼 서브 페이지, 특정 메뉴로 이동할 수 있는 메뉴.

 3) SNB

    - 상단 메뉴를 제외한 왼쪽에 붙은 메뉴바 SNB 혹은 LNB(Left Navigation Bar).

 4) FNB, Footer

    - 최하단 메뉴. 로고, 주소, 전체 메뉴 영역 외에도 SNS채널, 패밀리 사이트 등을 배치하기도 함.

 5) Tab Menu

    - 병렬형 콘텐츠를 보여줄 경우 상단에 Tap 탭으로 표현하며, 탭으로 다른 카테고리를 클릭하여 화면을 전환할 수 있음.

 6) FAB

    - 플로팅 버튼은 페이지 내에서 고나련성이 높거나 자주 사용되는 동작을 주로 우측 하단에 표시.

 7) Splash Screen

    - 앱이 시작할 때 보여주는 화면으로 앱의 로고나 성격이 보이는 콘텐츠로 홍보.(보통 3초 내외)

 8) Hamburger

    - 웹이나 모바일 상단에 위치한 버튼으로 이 버튼은 전체 메뉴를 한눈에 볼 수 있는 역할.

 9) Drawer

    - 드로어는 평상시에는 닫혀있다가 클릭하면 열리는 방식. (보통 앱의 상단에 위치)

 10) Accodian

    - 내용을 펼쳤다 접을 수 있는 컴포넌트로 모바일에서 리스트 형식을 효과적으로 표현.

 11) BTN, Button

    - 버튼은 크게 활성화 된 상태와 비활성화된 상태 2가지로 나뉜다. 그 외에 사용자의 행동에 따라 다양한 상태로 표현.

 12) Label

    - 주로 입력 필드 상단이나 좌측에 입력할 정보에 대해 설명해 주는 문구.

 13) Text Field

    - 한 줄 텍스트를 입력하는 폼 필드로 텍스트 입력 혹은 수정하는 필드.

 14) Place Holder

    - 텍스트 필드 안에 짧은 힌트를 입력 상자에 표시. (사용자의 입력을 유도하는 기능)

 15) Text Area

    - 주로 긴 문장의 텍스트를 입력하는 경우 텍스트 에어리어를 사용.

 16) Place Holder Images

    - 이미지를 사용자가 입력할 수 있는 공간. (or 아바타라고도 부름)

 17) Check Box

    - 중복 손택이 가능한 선택 수단.

 18) Radio BTN

    - 중복 선택이 불가한 버튼 형식의 선택 수단.

 19) Toggle

    - 활성화된 상태와 비활성화된 상태 2가지로 표현.

 20) Slider

    - 양쪽 끝에 위치한 아이콘을 선택하여 움직이며 수치 값, 카테고리의 배율을 지정하여 표현.

 21) Select Box

    - 사용자에게 어떤 특정 값을 선택하게 할 때 사용.

 22) Drop Down

    - 버튼 뒤로 숨겨진 메누를 표현할 때 주로 사용.

 23) Progress Bar

    - 작업의 진행 상태를 사용자에게 알려줄 때 사용하는 컴포넌트. (디자인은 원형, 바 형태 등으로 표현)

 24) Loader

    - 화면이 진행 중일 때 보이는 표현 방식. (보통 5초 내외로 표시)

 25) Tooltips

    - 레이블, 아이콘 등에 간단한 설명 텍스트가 필요한 경우 사용.

 26) Carousel

    - 하나의 화면에서 두 개 이상의 콘텐츠를 보여주는 방식. (콘텐츠를 나열해서 보여줄 때 주로 사용)

 27) Navigation

    - 앱에서 하단의 위치한 내비게이션으로 보통 4-5개 정도 카테고리와 레이블을 함께 표시.

 28) Breadcrumbs

    - 웹 혹은 앱에서 현재 위치를 보여주는 내비게이션으로 표현.

 29) Pagination

    - 콘텐츠가 많은 경우 스크롤이 길어져 페이지네이션으로 표현.

 30) Favicon

    - 특정 웹싸이트에 방문했을 때 웹사이트 주소 옆이나 브라우저 탭에 나타나는 작은 아이콘.

 

#3 인사이트

• 알고있는 명칭도 있지만 완전히 생소한 명칭이 있어 신기하면서도 타 직군과 커뮤니케이션을 할 때 많은 주의가 필요하겠구나 생각이 들었다.
  
• 디자이너뿐만 아니라 다른 직군들도 UI용어가 헷갈릴 수 있다고 생각이 든다. 그림과 함께 명칭을 언급하면서 소통하는 것이 원활한 커뮤니케이션이 가능할 듯 싶다.
  
• 회사마다 언급하는 명칭은 다르겠지만 UI를 정리하는 것은 '소통'을 더 쉽고 즐겁게 하기 위함이니 틈틈히 용어에 관한 공부를 하는 것이 좋아보인다.