[UIUX] 네이버 '클로바노트'를 통해 살펴본 기본 UI용어
개인적으로 공부하면서 기록하는 공간으로
잘못된 정보는 댓글을 통해 알려주시면 감사하겠습니다 :-)
▪ ▪ ▪ ▪ ▪
이번에는 네이버 서비스 중 하나인
'클로바 노트'를 통해 간단한 UI용어를 알아보도록 할게요 (●'◡'●)
클로바노트란?
네이버가 AI 기술을 선보였습니다.
중요한 순간에 듣고, 작성하는 것 등 여러가지에 집중해야할 때 상당히 많은 불편함을 겪으셨던 분들이 많을 것 같은데요.
클로바노트는 그 순간에 집중할 수 있도록 참석자의 목소리를 구분해서 음성 기록을 정리해주는데,
후에 대화를 눈으로 볼 수 있다는 것이 가장 큰 장점인 것 같네요 !
단, 녹음을 하기 전 참석자분들의 동의를 구하는 것은 필수이겠죠 ?
스플래시(Splash)
일반적으로 로고 이미지 혹은 애니메니션을 사용하여 스플래시 화면에 보여주는데요.
클로바노트의 경우 로고를 활용하여 단순하게 제공을 하였습니다.
앱이 로딩되는 시간은 짧지만 그 순간에 사용자에게 어떤 이미지를 심어주느냐가 중요할 것 같아요.
온보딩(Onboarding)
온보딩 화면은 대게 새로운 사용자나 다시 돌아온 사용자를 위한 페이지 인데요.
사용자가 서비스에 접근하기 전 간략하게 어플을 소개하거나 사용법 등의 팁, 콘텐츠를 보여주기 위해 사용되고 있습니다.
클로바 노트는 기능을 간략하게 설명해줌으로써 사용자가 자연스럽게 학습하도록 유도하고 있어요.
로그인/ 회원가입
클로바노트는 비교적 간단한 회원가입 절차를 제공하고 있었습니다.
1️⃣ 체크박스(CheckBox)
체크박스는 다중선택이 가능한 타입입니다.그와 반대로 사용되는 것이 '라디오 버튼(Radio Button)' 인데요.체크박스와 달리 한가지만 선택 가능하다는 반대적인 특징을 가지고 있습니다.
2️⃣ 텍스트필드(Text Field)사용자의 입력 방법 중 흔히 사용되는 방법입니다.로그인 및 회원가입 등에서 텍스트를 입력하거나 정보를 보낼 때 주로 사용하고 있습니다.[구성요소]- Lable: 공유 받은 초대코드 입력
- Placeholder(자리 표시자): 초대코드입력
툴팁(Tool - Tip)
클로바 노트에서 서비스를 시작하기에 앞서 메인 기능에 대해 툴팁을 제공하고 있습니다.
이 기능은 사용자에게 직접 설명하지 않았을 때 알지 못하는 것 혹은 익숙하지 않은 것들을 이해시킬 때 주로 사용하는데,
여기서는 보충 설명 혹은 추가 정보가 필요해서 사용한 것 같네요.
툴팁을 잘 활용한다면 화면의 공간을 효율적으로 사용할 수 있다는 장점이 있습니다.
툴팁을 잘 활용하기 위해서는 시각적인 단서가 없기 때문에 사용자로 하여금 쉽게 발견이 가능해야합니다.
또한 짧고 간결한 문장으로 제공되어야 하며, 사용자의 행동을 방해하지 않는 적절한 위치 선정도 중요합니다.
기타
1️⃣ 햄버거메뉴(Drawermenu)
Navigation Drawer이라고도 불리는 이것은 앱 내에서 사용가능한 기능을 탐색할 수 있도록 제공하는 메뉴인데요.
기본적으로 화면 가장자리에 숨겨져있으며, 클릭시 나타나는 형태 입니다.
2️⃣ 탭 바(Tab Bar)
하단 네비게이션바로 흔히 볼 수 있는 일반적으로 구성요소로 카테고리 사이의 전환을 위해 사용됩니다.
3️⃣ Chips
흔히 태그, 키워드로 많이 불리고 있는데요.
일반적으로 칩을 통해 정보를 필터링할 때 사용합니다.
4️⃣ 바텀시트(Bottom Sheet)
바텀시트는 기존 콘텐츠에서 벗어나지 않고 관련 작업을 할 수 있어 프로세스가 빠르게 진행된다는 장점을 가지고 있는데요. 화면 이동을 하지 않아 사용자로부터 신속하고 간편한 느낌을 전달할 수 있습니다.
댓글