[아티클 리뷰] 기획자들이 알아야 할 ui용어

2024.04.27

💚 제목

 

[ 기획자들이 알아야 할 ui용어 ]

주니어 기획자를 위해 기본적인 UI 용어에 대해서 정리해둔 글.

알고 있어도 한번씩 더 확인하면 도움이 될 것 같아 들고 옴.

---

💚 내용

 

(1) GNB
- 웹사이트 최상단 최상위 메뉴
- 웹사이트 전체에 공통적으로 노출
- 주요 메뉴로 빠르게 이동할 수 있는 링크 포함
- 웹 이탈률/전환율에 큰 영향을 미쳐 배열 순서를 고려해서 배치

(2) LNB
- GNB 메뉴를 누르거나 마우스 오버 상태일 때 발생되는 소메뉴
- 최상위 카테고리 하위에 위치한 특정 메뉴로 이동 가능

(3) Hero Banner (Main Banner)
- 웹사이트 메인 상단에 위치하는 대형 배너
- 헤더 영역에 눈에 띄게 배치되어 주목을 끄는데 효과적 / 중요한 영역
- 고객에게 전달하고 싶은 가장 중요한 콘텐츠를 등록하는 섹션
- 단순 이미지형, 슬라이드 형 등 다양한 형태

(4) Drop Down List
- 버튼을 클릭하거나 커서를 올렸을 때 세부 항목이 펼쳐지고 그중 하나의 항목을 선택할 수 있는 요소
- 주로 많은 값 중 하나를 선택해야할 때
- 풀 다운 메뉴(Pulldown Menu)로도 불림
- 여러 항목들을 나열된 상태로 두지 않고도 간결하게 표현이 가능

(5) 모달/팝업
- 모달 : 기존에 열려있던 페이지 위에 새로운 레이어를 덮는 기능
- 팝업 : 페이지 위에 또 하나의 브라우저 페이지를 띄움
- 주의사항, 공지 등 유저의 이목을 끌고 중요한 정보를 전달할 때
- 최근 사용자 브라우저 환경 설정에 따라 팝업이 차단되는 경우도 있어, 필수적인 노출사항은 모달을 통해 노출

(6) 스낵바, 토글, 툴팁
- 스낵바
: 유저가 수행한 작업에 대한 결과(피드백)을 간단한 텍스트 레이블 형태로 보여줌
: 4초 뒤 화면에서 자동으로 사라짐
: Action 버튼이 함께 표시
- 토글 = 스위치 (Switch) : 설정 켜기/끄기와 같은 항목에 적용
- 툴팁
: 특정 화면 요소에 마우스를 가져가면 나타나는 설명
: 마우스를 올려놓은 Hover 상태에서는 계속 유지됨
: 부연 설명을 표시할 때 유용한 요소

(7) Input Field와 유효성 검사
- Input field : 사용자가 텍스트를 입력하고 편집할 수 있는 입력란
- 유효성 검사 : 유저가 입력 필수요소를 생략했거나 정해진 양식에 맞춰 입력하지 않을 경우 오류 상태를 표시, 양식에 맞는 데이터 입력을 유도

(8) Checkbox
- 여러개의 목록에서 값을 다중선택해야할경우 자주 사용하는 컴포넌트
- 하나 이상의 값을 다중선택

(9) Accordion
- 내용을 펼쳤다가 접을 수 있는 컴포넌트
- 리스트를 접기, 펼치기 형태로 표현
- 콘텐츠 / 메뉴를 펼쳤다 접을 수 있음 = 효과적인 레이아웃 구축이 가능

(10) Bread Crumb
- PC 웹환경에서 자주 활용되는 정부 구조기법
- 정보 구조 상 표시되는 콘텐츠 양에 따라 구분자, 말줄임표 등으로 구분
- 사용자가 지나온 위치를 포함
- 현재의 위치를 시각적 계층구조로 나타나는 내비게이션
- 상위/하위페이지로 이동가능

---

💚 느낀 점

알고 있는 내용이지만, 단어와 용어로 한번 더 정리해서 머릿속에 한번 더 밀어넣기에 좋은 아티클. 예시도 함께 넣어져 있어서 아무것도 모르는 사람들도 이해하기 쉽다.
혼자 일하는 것이 아니라 협업을 진행할 때 서로의 의견을 나누기에는 정확한 용어를 사용해서 소통하는 것이 가장 좋을 것 같다는 생각. 아티클 맨 아래에 작성자가 적어두신 부분 (커뮤니케이션적 고충)에 공감함. 디자이너가 아니라 기획자들도 알고 있으면 좋을 것 같다.

---

💚 아티클 주소

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

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