brunch

You can make anything
by writing

C.S.Lewis

by BUNDI Nov 12. 2021

모르면 곤란한 UIUX 용어집 - 2

여러분은 다 알고 계신가요?

오늘은 2탄입니다.

바로 시작하겠습니다.


* 참고한 글 (원본)

https://story.pxd.co.kr/638


* 모르면 곤란한 UIUX 용어집 - 1

https://brunch.co.kr/@bundi/41







Index 목차



검색의 편의성

18. Incremental Search, Instant Search, Instant Previews




메뉴 노출 방법

19. Context Menu

20. MRU(Most Recently Used)

21. Adaptive Menu

22. Tear-off Menu

23. Mega Drop-down Menu

24. Context-sensitive Navigation







18. Incremental Search, Instant Search, Instant Previews


'Incremental Search'를 직역하면 '증분 탐색'이 됩니다. 하지만 의미상 '순간 검색'이라는 용어가 더 알맞고 쉽기 때문에 대신해서 사용하곤 합니다. 순간 검색의 핵심은, 사용자가 찾는 검색어를 입력하는 과정에서, 사용자가 찾는 결과물을 예상하고 미리 사용자에게 결과물을 노출시키는 것입니다. 이 점에서 '자동 완성'과의 차별점이 나타납니다. '자동 완성'이 단순히 예상되는 텍스트를 미리 보여주는 것과 달리 '순간 검색'은 한 단계 더 나아가 예측된 결과를 보여줍니다. '순간 검색'은 검색에서 발생되는 피로감과 시간을 줄여주고 편의성을 크게 향상할 수 있는 검색 방법입니다. 구글과 같은 포털 사이트를 비롯한 여러 서비스에서 사용성을 위해 적극적으로 사용하고 있습니다.


주가를 검색하려고 하니, 결과를 미리 보여주는 구글.
검색 이후에도 사용자가 궁금해할 만한 핵심 정보를 최상단에 보여주고 있습니다.
날씨를 치자, 날씨를 미리 알려주는 네이버.
단순히 자동완성이 아닌, 핵심 카테고리를 선택할 수 있도록 도와주는 ebay.
검색어를 입력하는 순간부터 도서를 추천해주는 YES 24.
번호 앞자리만 입력해도 연락처를 미리 추천해주는 기능.





19. Context Menu


Context는 맥락이라는 의미를 가지고 있습니다. Context Menu는 말 그대로 맥락에 맞는 메뉴를 보여줍니다. 가장 흔한 예시로 바탕화면 아이콘에 오른쪽 클릭을 하면, 아이콘에 적용할 수 있는 옵션들을 확인할 수 있습니다. Context Menu에서 가장 중요한 것은, 맥락에 맞는 메뉴들을 제공하는 것입니다.


마우스 우클릭 시, 맥락(상황)에 맞는 옵션들을 보여줍니다.



20. MRU(Most Recently Used)


MRU는 Most Recently Used라는 의미로, 사용자가 가장 최근에 선택한 내용 또는 옵션을 선별하여 보여줍니다. MRU의 가장 큰 장점은 '가장 최근'이라는 부분에서 찾을 수 있습니다. 사용자의 행동을 예측하여 적절한 옵션을 추천해주기 때문에, 적재적소에 사용한다면 서비스의 사용성을 크게 개선할 수 있습니다.


최근에 열었던 파일을 알려주는 Illustrator과 Photoshop.
최근에 사용한 이모지와 이모티콘을 보여주는 카카오톡.




21. Adaptive Menu


MRU 방식을 메뉴에 적용한 방식입니다. 사용자가 많이 선택한(또는 많이 이용하는) 메뉴 항목을 우선적으로 나타나도록 메뉴를 구성합니다. MS Office 2000 등에서 기본 설정으로 제공되다가 리본 메뉴의 등장으로 현재는 사용되지 않고 있습니다.


지금은 잘 사용되지 않습니다.





22. Tear-off Menu


Tear off (떼어내다)라는 말에서 알 수 있듯이, 메뉴를 떼어낸 후 안에 숨겨져 있던 메뉴들까지 표시하는 방식입니다. 아래 사진 같은 광고를 많이 보셨을 겁니다. 전단지 끝을 뜯어내듯이, 테어오프 메뉴는 메뉴 바를 드래그로 떼어내어 임의의 장소에 배치할 수 있습니다.


이런 전단지, 많이 보셨죠?
전단지처럼 메뉴를 떼어낼 수 있습니다.




23. Mega Drop-down Menu


1편에서 살펴본 드롭다운 메뉴의 확장판입니다. 일반적인 메뉴보다 훨씬 더 많은 메뉴를 표시할 수 있습니다. 특히 카테고리가 많고 메뉴 구조가 복잡한 쇼핑몰과 같은 서비스에서 적극적으로 사용합니다. 메가 드롭 다운 메뉴에서 가장 중요한 점은 메뉴를 명확히 분류하여 사용자가 많은 선택지 사이에서 헤매지 않도록 하는 것입니다. 구성은 자유롭게 하되, '원하는 메뉴를 정확히 선택'한다는 내비게이션의 핵심 목표를 잊지 말아야 합니다.


다양한 곳에서, 다양한 방식으로 메뉴를 보여주고 있습니다.




24. Context-sensitive Navigation


특정 상황(Context)에 반응(sensitive)하여 제공되는 기능을 말합니다. 특정 상황에 맞는 메뉴를 보여준다는 점에서 콘텍스트 메뉴와 닮았으나, 팝업 형태가 아닌 다양한 형태로 기능을 제공할 수 있다는 차별점이 있습니다. 전체 메일 리스트에서 체크박스를 통해 몇 개의 메일을 선택하면 숨겨져 있던 '삭제'버튼이 나타나는 것처럼, 상황에 맞는 기능을 제공하는 것이 핵심입니다. 콘텍스트 메뉴와 마찬가지로 상황에 어울리는 기능들을 상황에 맞게 제공하는 것이 핵심입니다.


메일을 선택하자 나타나는 메뉴들.
마우스를 호버 하면 나타나는 핀터레스트의 메뉴들
상품에 마우스를 호버 하면 나타나는 쿠팡의 구매하기 버튼.




'모르면 곤란한 UIUX 용어집 - 3'으로 돌아오겠습니다.

감사합니다.

브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari