UI 기본 용어 이 정도만 알아도 중간은 갑니다

안녕하세요. 제시요입니다. : )

요즘 날씨가 정말 오락가락하죠?

추웠다 따뜻했다 반복하는 날씨지만

여러분들 모두 항상 몸조심하시기 바랍니다.

 

오늘은 기획 파트를 담당하고 계신

모든 분들을 위해 준비한 콘텐츠,

바로 UI 기본 용어 알아보기입니다.

 

UI 기본 용어의 경우에는 회사 특성상 사용하는

말이 조금씩은 차이가 있는데 짧게 줄이는 약어를

사용하기도 하고, 산업 분류 상 다른 단어로

대체되는 경우도 종종 있기 때문에 다 같이

확인해야 하는 문서들의 경우 이해하기

힘들거나 버거운 경우도 존재합니다.

 

 

 

그래서 오늘은 IT 업체에 입문한 기획자분들이

조금이나마 문서 읽기에 부담이 적어졌으면

하는 마음에서 UI 기본 용어 목록을 소개 드리는

시간을 가져보았으니 찬찬히 살펴보시고

업무에 반영하시면 좋을 것 같습니다. : )

​

 

 

자주 사용되는 UI요소 & 컴포넌트

■ GNB(Global Navigation Bar)

 

웹 사이트의 최상에 위치한 메뉴를

지칭하는 말로, [메뉴]라고 부르기도 합니다. 

 

보통은 웹 사이트의 어느 페이지로 이동해도

동일한 위치에 공통적으로 노출되는 메뉴고

원하는 목차로 빠르게 이동이 가능하다는

장점이 있기 때문에 배열 순서에 따라서

전환율과 이탈률이 크게 달라질 수 있습니다.

​

GNB의 구성에 웹 사이트의 성공이 달렸다는

말이 있을 정도로 굉장히 중요한 부분이니

만약 구성하게 되신다면 어느 위치에

어느 페이지를 연동시킬지 충분한 고민을

거쳐서 설정하시면 좋을 것 같습니다.

 

 

 

■ Main Banner(Hero Banner)

 

메인 배너의 경우에는 타사 웹 페이지에도

항상 있어서 익숙하실 테지만 조금 더 쉽게

안내드리자면, 웹 사이트 메인에

설정할 수 있는 배너를 이야기합니다.

 

웹 사이트를 접속했을 때

눈에 바로 띄는 부분이어서 많은 기업들이

메인 배너에 어떤 콘텐츠를 노출시킬지에

관한 수많은 고민을 거치고 화려한 이미지나

특수효과 등을 활용해서 더욱 이목을 집중

시킬 수 있는 액션을 동반하는 편입니다.

​

이렇게 시선을 바로 이끄는 위치에

있는 메인 배너의 경우 가장 중요한 콘텐츠를

등록하여 효과를 기대하는 경우가 많습니다.

​

 

 

■ Drop Down List

출처 : WPS Office

 

클릭을 했을 때 숨겨져 있던 세부 항목들이

펼쳐지고 그 안에서 또 다른 클릭이 가능하도록

설정되어 있는 GUI 위젯의 일정을 우리는

드롭 다운 리스트라고 부릅니다.

 

선택이 가능한 요소들이 많은데 그중 하나를

선택해야 하는 상황에서 자주 사용되고,

메뉴가 내려온다는 뜻에서 풀다운 메뉴라는

말로도 불린다고 합니다.

 

모든 클릭 요소를 펼쳐두는 것이 아니라

깔끔하고 간결하게 접어놓고 필요시에만

펼쳐서 클릭할 수 있게 되어있어서

훨씬 깔끔해 보인다는 장점으로 자주 이용됩니다.

​

*GUI 위젯

사용자가 편리하게 사용할 수 있도록

입출력 등의 기능을 알기 쉬운 아이콘 등의

그래픽으로 나타낸 것.

​

 

 

■ 스낵바, 토글, 툴팁

출처 : GitHub

 

스낵바 : 사용자의 액션에 대한

결과를 노출시키는 것을 의미합니다.

대개 안내 문구가 적힌 박스가 화면의

상단 혹은 하단에 노출됩니다.

 

 

출처 : Pinterest

 

토글 : 설정 ON / OFF

 

 

 

출처 : LINE Design System for Messenger

 

툴팁 : 화면 특정 위치에 커서를 움직이면

해당 요소에 관한 설명이 노출되는 것을 의미하고,

부연 설명이 필요할 때 활용하기 좋습니다.

 

 

■ Modal, Popup (모달, 팝업)

출처 : Pixabay

 

모달 : 페이지가 열려 있는 상황에서

새로운 레이어를 덮는 기능.

 

쉽게 말씀드리자면 마치 또다른 이미지가

나오는 것처럼 툭 하고 노출되는 게

모달입니다.

 

 

출처 : Play nexacro

 

팝업 : 페이지 위에 또 하나의

페이지를 띄우는 기능

 

페이지나 띄워지는 것이기 때문에

상단에 창닫기 버튼이 있습니다.

 

 

UI요소들의 상태를

나타내는 단어 정리

 

앞서 UI 기본 용어에 관해서 알아보는 시간을

가져보았으니 그럼 이제 UI 요소들의 상태를

나타내는 용어를 알아보는 시간을 가져볼까요?

​

Enabled : 상호작용이 가능한 상태

Disabled : 동작할 수 없는 비활성 상태

Hover : 마우스 혹은 포인터가

버튼 위에 올려져 있는 상태

Focused : 키보드 혹은 음성 등의

입력을 통해 강조된​ 상태

Pressed : 마우스 혹은 포인터로

클릭 혹은 터치한 상태

​

버튼의 결괏값을 전달하는 일이 있거나

혹은 보고하실 일이 있으실 때 해당 용어들을

활용하신다면, 시간 단축과 이해에 큰 도움이

될 거라는 생각이 듭니다. : )

 

 

 

 

 

오늘은 이렇게 UI 기본 용어 & 상태에

관하여 알아보는 시간을 가져보았습니다.

관련하여 더 궁금하신 사항이 있으시다면

댓글로 편하게 문의 부탁드립니다.

 

제시요는 개발사와 의뢰사의 원활한 의사소통을

위해 개인 맞춤형 매칭을 도와드리고 있고,

성공적인 외주 개발을 위해 기획서 작성도

도움드리고 있으니 관련하여 제시요의 도움이

필요하시다면 언제든지 편하게 문의 부탁드립니다.