Hint UI의 개념 및 종류 별 기능, 고려해야할 사항

Hint UI의 개념과 기본 역할

Hint UI는 사용자가 인터페이스를 보다 쉽게 이해하고 활용할 수 있도록 돕는 안내 요소이다.

버튼, 입력 필드, 아이콘 등에 적용되어 사용자의 인터랙션을 유도하고 서비스에 대한 학습 곡선을 낮추는 역할을 한다.

• 사용자 가이드 제공 : 버튼이나 메뉴, 각 섹션의 용도나 주의사항 설명
• 작업 피드백 제공 : 입력 값이 유효한지 안내
• 사용자 실수 방지 : 올바른 사용 방법 및 유효한 입력 양식을 힌트로 제공

 

---

 

Hint UI의 종류별 기능

Hint UI의 종류는 정말 다양하고 같은 UI여도 굉장히 다양한 이름으로 불려지는 경우가 많다.

따라서 아래 내용은 일반적으로 사용하는 용어 기준으로 설명을 하였다. 

 

1. 플레이스홀더 (Placeholder)

입력 필드 내에 사용되는 힌트 텍스트로 '이메일을 입력하세요', '-없이 입력하세요'처럼 사용자가 정보를 입력하기 전 예시를 제공한다.

실제로 사용자가 데이터를 입력했을 때의 Filled 상태와 구별하기 위해 흐릿한 텍스트로 제공되어야 한다.

 

2. 툴팁 (Tooltip)

사용자의 행동(마우스 오버, 클릭)에 반응하여 추가 정보를 제공하는 것이 특징으로, 보통 아이콘 옆이나 버튼 등에 사용되어 직관적인 안내 제공한다.

예시

• 아이콘 툴팁 : 정보(i)나 물음표(?) 아이콘과 함께 사용되며 해당 영역에 마우스 호버나 클릭 시 설명이 팝오버 형태로 나타남. 텍스트는 생략하고 Trigger Icon만 제공될 수 있음
• 버튼 툴팁 : 버튼 위에 마우스 호버 시 "버튼을 클릭하면 파일이 저장됩니다"와 같은 메시지 등장
• 차트 툴팁 : 그래프에 마우스를 올리면 데이터 값 표시

 

이때 툴팁 아이콘이 'i' 형태인 경우와 '!'형태로 제공되는 경우의 기준을 잠시 살펴보자면,

"i(알파벳 i)"는 보통 Information Icon으로 '정보 제공'을 목적으로 하는 툴팁 아이콘일 때 사용된다.예를 들어, 사용자가 알아두면 좋을 추가적인 정보를 제공하거나 기능에 대한 도움말 등의 경우이다.

"!(느낌표)"는 보통 Warning, Alert. 다시말해, 경고나 주의를 주는 목적의 툴팁 아이콘일 때 사용된다. 이를테면, 비밀번호가 일치하지 않아 재 입력을 요구하는 에러 메시지나 보안 경고, 필수 입력값 누락, 삭제나 변경에 대한 경고 등 사용자의 주의가 필요하고 잘못된 행동이나 오류를 방지하는 데 사용된다.

하지만 툴팁 아이콘은 한 형태로만 공통으로 통일하여 사용하여야 한다면 i 아이콘이 좀 더 범용성 있게 사용할 수 있을 것이다.

 

 

3. 인라인 헬프 (Inline Help)

Inline Help UI는 아이콘과 함께 제공되는 경우가 있어 툴팁과 혼돈하는 경우가 있다. 툴팁은 사용자가 특정 액션을 취해야 노출되는 반면 인라인 헬프는 추가적인 조작 없이 항상 보이는 상태로 노출된다는 것이 차이점이다.

인라인 헬프는 필드 Label 근처와 같이 레이아웃 내 고정 위치가 정해져 있다. 또한 다른 Hint UI들 보다 설명의 길이가 문장단위로 비교적 길 수 있다.

 

4. 헬퍼 텍스트 (Helper Text)

헬퍼텍스트는 입력 필드 하단에 위치하며 입력 양식에 대한 추가 설명 제공한다.

Error 가 발생했거나 입력한 내용이 양식 조건에 부합하지 않을 경우 경고 메시지를 제공하기도 한다.

• 예시 : 비밀번호 입력 시 "8자 이상, 특수문자 포함"

 

5. 인라인 밸리데이션 (Inline Validation)

사용자가 데이터를 입력하는 동안 실시간으로 오류 여부 확인하여 시각적으로 보여주는 역할을 한다.

 

---

 

Hint UI 적용 시 고려해야 할 사항

• 너무 많은 힌트는 오히려 방해가 됨 : 세 종류 정도만 추려서 사용
• 어떠한 내용을 안내하느냐에 따라 정보의 가독성을 고려하여 적절한 스타일 적용 필요
• 필요한 순간에만 자연스럽게 제공되어야 함 : 상시 노출되어야 할지, 팝 오버 형태로 제공되어야 할지, 어디에 위치할지 등을 고려
• 모바일과 데스크톱 환경에 맞게 최적화 필요

 

---

 

추가로 참고하면 좋은 자료

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

 

Contextual help - Spectrum