UIUX 용어 정리 및 참고(2)

왼쪽 - PC / 오른쪽 - 모바일

1.  툴팁 Tool Tip

인터페이스의 부연 설명 메세지로 모바일과 PC의 작동 원리가 다르다.

 

PC는 UI컴포넌트에 마우스 호버시 작동하며 나타나며

마우스를 사용하지 않는 모바일의 경우에는 일정시간 탭하고 있으면 툴팁이 나타난다.

 

추가로 모바일에서는 툴팁을 다양하게 활용하고 있는데

페이지에 접속 시 자동으로 나타났다가 일정 시간이 지난 후 사라지거나

처음부터 고정되어 나타나다가 사용자가 직접 제거할 수 있는 방식으로 활용되기도 한다.

 

툴팁 관련 참고하면 좋은 글 > 어떻게 활용되고 있으면서 언제 사용해야하는지

https://brunch.co.kr/@leesubella/7

보조 설명을 제공하는 컴포넌트, Tooltip(1)

https://vurias0203.tistory.com/entry/UI-%EB%94%94%EC%9E%90%EC%9D%B8%EC%97%90%EC%84%9C-%ED%88%B4%ED%8C%81Tool-Tip-%EC%A0%9C%EB%8C%80%EB%A1%9C-%EC%93%B0%EB%8A%94-%EB%B2%95

UI 디자인에서 툴팁(Tool-Tip) 제대로 쓰는 법

 

-

 

스피너

2. 스피너 Spinner

스피너는 현재 필드에 입력된 값을 기준으로

값을 조절하거나 직접 원하는 값을 입력할 수 있다.

 

-

 

슬라이더

3. 슬라이더 Slider

대략적인 범위를 설정할 때 활용되며

입력값이 제한되어 있는 것을 시각적으로 인지할 수 있고

사용자가 유연하게 조작하며 변화를 감지할 수 있다.

 

슬라이더 관련 참고하면 좋은 글 > 활용된 디자인 참고

https://brunch.co.kr/@joohyup1001/15

슬라이더 디자인:엄지의 법칙

 

-

 

텍스트 필드

4. 텍스트 입력 필드 Text input field

사용자가 텍스트를 직접 입력할 수 있는 필드

= 편집 필드, 텍스트 필드

 

텍스트 필드 관련 참고하면 좋은 글 > 텍스트 필드 구조와 스타일 가이드, 활용된 디자인 참고

https://brunch.co.kr/@august9/248

UI 디자인 가이드 : Text fields

https://brunch.co.kr/@chulhochoiucj0/20

 

모바일 UI 디자인 기본 요소 - 텍스트 필드

 

-

 

플레이스홀더

5. 플레이스홀더 Placeholder

텍스트 입력 필드 안에 새겨져 있는 짧은 도움말로

검색, 회원 가입 등 앱 내 다양한 텍스트 입력폼에서 사용되고 있으며

사용자가 어떤 정보를 입력해야 하고 어떤 액션을 취해야 하는지 힌트를 준다.

 

플레이스홀더 관련 참고하면 좋은 글 > 다양한 텍스트 입력폼에서 어떻게 활용되는지 참고

https://yozm.wishket.com/magazine/detail/1584/

효율적인 안내 제공에 대한 고민: ①플레이스홀더 | 요즘IT

https://www.mobiinside.co.kr/2021/07/15/placeholder/

[모바일 서비스 분석 노트] 문구 하나로 서비스 사용성 높이기_ 플레이스홀더 - 모비인사이드 MOBI

 

-

 

버트콘

6. 버트콘 Butcon

버트콘이란 버튼과 아이콘의 조합으로 버튼 기능이 있는 아이콘을 말한다.