[아티클 읽기] 기획자들이 알아야할 UI 기본 용어

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

기획자들이 알아야 할 UI 기본 용어 | 요즘IT

 

1. BTN 상태 : State 정리

• Enabled : 상호작용이 가능한 상태일 때
• Disabled : (어떠한 이유로든) 동작할 수 없는 비활성 상태
• Hover : 마우스 또는 포인터가 올려진 상태
• Focused : 키보드 또는 음성 등의 입력을 통해 강조된 때
• Pressed : 마우스 또는 포인터로 클릭 / 터치 했을 때

2. GNB

• 웹사이트 상단 최상위 메뉴 → GNB
• 웹사이트 전체에서 공통적으로 노출되는 메류이며 주요 메뉴로 빠르게 이동할 수 있는 링크 포함
• 웹 이탈률과 전환율에 큰 영향을 미치는 메뉴 → 배열의 순서가 중요함

3. LNB

• GNB 메뉴를 누르거나 마우스 오버 상태일 때 발생되는 소메뉴 → 하위에 위치한 특정 메뉴로 이동 가능

4. Hero Banner

• 웹사이트 메인 상단에 위치하는 대형 배너 → 사용자의 주목을 이끄는데 효과적이며 중요한 영역
• 고객에게 전달하고 싶은 가장 중요한 콘텐츠를 등록하는 세션

5. Drop Down List

• 드롭 다운 리스트는 버튼을 클릭하거나 커서를 올렸을 때 세부 항목들이 펼쳐지고 하나의 항목을 선택할 수 있는 요소
• 주로 많은 값에서 하나를 선택해야할 때 사용 → 풀다운 메뉴라는 말로도 불림
• 여러 항목들을 나열된 상태로 두지 않고 간결하게 표현할 수 있다는 것이 장점

6. 모달, 팝업

• 기존에 열려있던 페이지 위에 새로운 레이어를 덮는 기능
• 팝업은 모달과 달리 페이지 위에 또 하나의 브라우저 페이지를 띄우는 개념
• 두 창 모두 주의사항이나 공지 등 유저의 이목을 이끌고 중요한 정보를 전달할 때 사용

7. 스낵바, 토클, 툴팁

• 스낵바는 유저가 수행한 작업에 대한 결과를 간단한 텍스트 레이블로 보여줌 → 대략 4초 뒤에 자동으로 사라짐, 액션 버튼이 함께 표시된다는 점에서 토스트 팝업과 차이가 있음
• 토글을 스위치와도 많이 통용됨 → 설정을 켜기/끄기와 같은 항목에 적용할 수 있음
• 툴팁은 특정 화면 요소에 마우스를 가져가면 나타나는 설명

8. Input Field 와 유효성 검사

• 사용자가 텍스트를 입력하고 편집할 수 있는 입력란을 의미함
• 자주 함께 사용하는 유효성 검사는 유저가 입력 필수 요소를 생략했거나 정해진 양식에 맞춰 입력하지 않을 경우 오류 상태 표시
• 작성에 필요한 필수 항목이 여러 줄 (긴 문장)을 입력할 때 Textarea를 주로 사용

9. CheckBox

• 체크박스는 여러 개의 목록 중에서 값을 다중 선택할 때 자주 컴포넌트
• 하나 이상의 값을 다중 선택할 수 있다는 점에서 라디오 버튼과 차이가 있음
• 유저가 취할 액션을 사전에 고려해 사용 여정에 더 적합한 요소를 사용하는 것이 좋음

10. Accordion

• 내용을 접었다가 펼칠 수 있는 컴포넌트
• 리스트를 접기, 펼치기의 형태로 표현할 수 있음

11. Breadcrumb

• 브레드크럼은 PC웹 환경에서 자주 활용되는 정보구조기법
• 정보 구조 상 표시되는 콘텐츠의 양에 따라 구분자, 말줄임표 등으로 구분한다
• 현재 위치를 시각적 계층 구조로 나타나는 내비게이션 → 사용자는 손쉽게 상위, 하위 페이지로 이동가능