[Article] 한눈에 보는 UI 용어 A to Z
출처: https://brunch.co.kr/@tigrisdesign/2
1. 요약
디자인 부서 내, 또는 유관 부서 간 원활한 소통을 위해 통일된 용어가 사용되어야 한다. 이를 위해 디자인 시스템을 구축하고, 파일 명과 양식을 배포하고, 이름 형식을 약속하는 등 부단한 노력이 강조된다. 특히 UI 컴포넌트 용어는 나라마다, 회사마다 다르게 사용되기도 하며, 통일되지 않은 경우 개발팀과 디자인팀 간 혼란이 발생할 수 있는 영역이다. 이를 위해 한번쯤 정리하고 가는 것이 좋다.
2. 인사이트
2-1. 좋았던 점
인터페이스 디자인에 사용되는 주요 컴포넌트의 이름과 시각적 자료, 짧은 부가 설이 함께 매치되어서 한눈에 이해할 수 있었다.
2-2. 아쉬웠던 점
모바일 위주로 소개되어 웹에서는 어떻게 적용되는지 알기 어려웠다. 또 한 줄 설명에서는 단순 정의만 알 수 있어서, 언제 사용하면 좋은지, 사용자에게 어떤 효과를 미치는지 등의 상세 설명이 한두문장 더 있었으면 자세히 알 수 있었을 것 같아 그 점이 아쉬웠다.
3. 알게 된 개념
(2)편에서 모달과 팝업에 대해 정리한 글을 읽을 수 있었는 데, 이 부분이 헷갈리는 개념을 정리하는 데에 도움을 주었다.
팝업: 아예 새 창을 띄우는 것
모달: 기존 창 위에 레이어를 까는 것
모달은 다시 크게 두 가지로 나뉜다.
모달: 모달을 닫기 전에는 기존 창과 인터랙션이 불가능
논 모달: 인터랙션이 가능하게 만든 모달
모달의 종류는 아래와 같다.
Dialog
종류: Alert/Simple/Confirmation/Full-Screen
용도: 정보 표시 및 선택 사항 확인. 전체 화면으로 띄울 때는 중요한 작업이 포함된 경우 사용한다.
Navigation
종류: Side/Bottom
용도: 앱 기능에 대한 액세스 제공. 화면에 영구적으로 표시되거나 탐색 메뉴 아이콘으로 제어할 수 있다.
Sheet
종류: Side(표준, 모달)/Bottom(표준, 모달, 확장)
용도: 주요 콘텐츠 보완. 모달 하단 시트는 추가 항목이나 메뉴를 제공. 확장 하단 시트는 축소된 작은 화면과 같다.
Snack bar
용도: 일시적으로 나타나서 수행할 또는 수행한 행위와 같은 정보 알림.
Menu
용도: 일반적으로 아이콘 버튼, 버튼 및 텍스트 필드에서 열 수 있고 사용자가 여러 기능 선택할 수 있음.
43) Banner
용도: 배너는 중요하고 간결한 메시지를 표시. 사용자가 처리할 작업 제공.
Tooltip
용도: 정보 텍스트를 표시. Hover, Select, Tap할 때.