여러분은 다 알고 계신가요? | 오늘은 2탄입니다. 바로 시작하겠습니다. * 참고한 글 (원본) https://story.pxd.co.kr/638 * 모르면 곤란한 UIUX 용어집 - 1 https://brunch.co.kr/@bundi/41 Index 목차 검색의 편의성 18.

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

텍스트를 입력하세요

근데 어떻게요? | 안녕하세요. 오랜만입니다. 개인적으로 재충전의 시간을 가지고 돌아왔습니다. 내용을 입력하거나 수정하는데 반드시 필요한 UI가 있죠. 텍스트 필드입니다. 사용자가 서비스

brunch.co.kr/@bundi/36

29. Intriguing Branches

쉽게 생각해서 '링크'라고 이해하시면 될 것 같습니다. 수많은 서비스에서 '자세히 보기'와 같은 링크를 보셨을 거라 생각합니다. 이런 모든 요소를 '인트리깅 브랜치'라고 부릅니다.

이러한 인트리깅 브랜치를 잘 사용한다면 효과적으로 사용자 경험을 유도할 수 있습니다. 그런 방향성을 생각했을 때, 인트리깅 브랜치의 텍스트를 어떻게 작성할지 충분한 고민이 필요합니다. 여러분은 비밀번호가 기억이 나지 않을 때 '비밀번호 찾기', '비밀번호가 기억이 안 나시나요?', '도움이 필요하세요?'중에서 어떤 걸 선택하실 것 같나요? 이처럼 같은 기능이라도 다른 텍스트를 부여하면 서비스 자체의 어조가 달라지게 됩니다.