모르면 곤란한 UIUX 용어집 - 3
여러분은 다 알고 계신가요?
오늘은 2탄입니다.
바로 시작하겠습니다.
* 참고한 글 (원본)
* 이전 시리즈 보러 가기 : 모르면 곤란한 UIUX 용어집 - 1
https://brunch.co.kr/@bundi/41
* 이전 시리즈 보러 가기 : 모르면 곤란한 UIUX 용어집 - 2
https://brunch.co.kr/@bundi/42
Index 목차
25. Light Box
26. Toast Pop-up
27. Progress Indicator (Throbber, Hourglass, Progress Bar)
28. Label, Placeholder
29. Intriguing Branches
25. Light Box
'라이트 박스'는 일종의 팝업이자 모달이라고 할 수 있습니다. 요소를 선택하면 해당 요소를 강조하여 보여주기 위해 뒷 배경을 밝거나 어둡게 처리합니다. 다만 일반적인 팝업과 다른 점은, 박스를 닫지 않고서는 뒷 배경 요소와 인터랙션 할 수 없다는 데 있습니다. 때문에 라이트 박스는 '특정 영역을 강조, 또는 사용자의 행동을 유도'함 강점을 가집니다.
가장 대표적인 활용 예시는 이미지를 자세히 보는 UI에서 찾을 수 있습니다. 아래와 같은 경우를 많이들 접해보셨을 겁니다.
이미지를 눌렀을 때, 이미지를 크게 확인하는 UI는 대표적인 Light Box UI입니다.
로그인/회원가입 등 페이지에도 사용됩니다.
일반 팝업과 다른 점은, 박스를 해결하지 않고서는 뒷 요소에 접근할 수 없다는 점입니다.26. Toast Pop-up
토스트기에서 따끈따끈한 토스트가 튀어나오는 이미지를 상상해 보세요. '토스트 팝업' 또는 '토스트 노티 Toast Notification'은 화면 위 또는 아래에 발생하는 작은 팝업입니다.
사용자에게 정보를 제공해야 하지만, 그렇다고 라이트 박스처럼 화면 전체를 사용해서는 안 되는 그런 환경에서 사용하면 효과적인 방식입니다.
사용자의 행동에 대한 피드백으로도 사용됩니다.
현재 진행 중인 내용, 완료된 내용을 표시하는데도 사용됩니다.27. Progress Indicator (Throbber, Hourglass, Progress Bar)
다운로드, 붙여 넣기 등 작업의 경과를 표시해야 하는 상황에서 사용합니다. 정확한 진행도를 확인할 수 있는 경우와, 아닌 경우로 나뉘게 됩니다.
Throbber (또는 Spinning Wheel)
자세한 경과는 알 수 없지만, 현재 작업 중인 상태를 표시하는 데 사용합니다.
다운로드.. 중이지만, 언제 될지는 모르는 상황에서 사용되었습니다.Hourglass (맥의 경우 Spinning Pinwheel)
보통 시스템 전체가 로딩중일 경우에, 마우스 포인터가 모래시계 모양으로 바뀌게 됩니다. 썩 기분 좋은 상황은 아니겠군요. 역시나 진행도를 확인하기 어려울 때 사용합니다.
맥 환경에서의 Spinning Pinwheel
예전 윈도우에서는 모래시계 포인터를 사용했기에 Hourglass라는 명칭이 사용되고 있습니다.Progress Bar
자세한 진행도를 확인할 수 있고, 이를 표시하는 데 사용합니다. 대표적으로 다운로드 중인 상황에서 진행도를 알리는 데 사용됩니다.
다운로드가 몇 퍼센트 완료되었는지 확인할 수 있습니다.
실시간 진척도를 표시하는 데 사용할 수 있습니다.28. Label, Placeholder
'레이블'과 '플레이스홀더'는 보통 한 세트로 붙어 다니는 요소입니다. 둘 다 사용자에게 어떤 걸 입력해야 하는지 안내하는 기능을 수행합니다. 레이블은 보통 왼쪽에 간단한 명사로 제시됩니다 (이름, 이메일 등). 플레이스 홀더는 주로 레이블 옆 오른쪽에 있으며, 사용자에게 어떤 식으로 내용을 입력할지 안내하는 역할을 합니다 (example@email.com 등).
Html5 표준 가이드에 따르면, 레이블과 플레이스 홀더에 동일한 내용을 작성하는 것을 지양하길 권장합니다. 하지만 모바일 환경의 경우 공간 활용을 위해 레이블을 생략한 채 플레이스 홀더와 기능을 합치는 화면을 구성하곤 합니다.
City (Label) / Phoenix (Placeholder)
무언가를 입력하는 부분이라면 대부분 등장하는 두 요소.레이블, 플레이스홀더를 포함한 입력 필드에 더 알고 싶으시다면, 제가 전에 올린 글을 확인해 보세요.
https://brunch.co.kr/@bundi/36
29. Intriguing Branches
쉽게 생각해서 '링크'라고 이해하시면 될 것 같습니다. 수많은 서비스에서 '자세히 보기'와 같은 링크를 보셨을 거라 생각합니다. 이런 모든 요소를 '인트리깅 브랜치'라고 부릅니다.
이러한 인트리깅 브랜치를 잘 사용한다면 효과적으로 사용자 경험을 유도할 수 있습니다. 그런 방향성을 생각했을 때, 인트리깅 브랜치의 텍스트를 어떻게 작성할지 충분한 고민이 필요합니다. 여러분은 비밀번호가 기억이 나지 않을 때 '비밀번호 찾기', '비밀번호가 기억이 안 나시나요?', '도움이 필요하세요?'중에서 어떤 걸 선택하실 것 같나요? 이처럼 같은 기능이라도 다른 텍스트를 부여하면 서비스 자체의 어조가 달라지게 됩니다.
수많은 인트리깅 브랜치로 장식된 나무위키.
See more, Shop now 등 다양하게 사용되는 인트리깅 브랜치.'모르면 곤란한 UIUX 용어집 - 4'로 시리즈를 마무리하러 돌아오겠습니다.
감사합니다.
