두고두고 써먹는 UI 용어집
그거 뭐라고 하더라, 그거?
1. chips 칩
우리 회사 개발자들이 이것을 보면서 뱃지라고 것을 해서 친절하게 '이것은 칩이라고 불러야 해요, 여러분'이라고 알려줬던 기억이 납니다. 이것은 칩입니다, 여러분. 보통 카테고리나 필터, 태그처럼 분류를 나눌 때 사용합니다.
2. Tooltip 툴팁
사용자가 특정 요소 위에 마우스를 올리거나, 요소를 클릭하거나, 요소에 포커스를 맞췄을 때 나타나는 작은 팝업 창이나 설명 창입니다. 이 팝업 창은 보통 간단한 텍스트를 포함하여 해당 요소에 대한 추가 정보를 제공합니다. 요즘은 닫기 버튼을 같이 노출시키는 게 트렌드인 것 같습니다.
3. Walkthrough & Onboarding 워크쓰루 & 혹은 온보딩
사용자에게 새로운 기능이나 앱 사용법을 안내해 주는 사용자 인터페이스 유형입니다. 이는 보통 앱을 처음 사용할 때 등장하며, 사용자가 앱을 빠르고 쉽게 이해할 수 있도록 돕는 것입니다.
4가지 유형으로 나뉘는데 코치마트(단계별로 알려줌), 온보딩 슬라이드(앱 시작 시 알려줌), 팝업 힌트(특정 기능 접근시 나타나 짧게 알려줌), 툴팁(특정 버튼이나 UI) 형식으로 나뉜다고 합니다.
4. Coachmark 코치마크
코치마크라고 하더라고요. 알려주는 마크라서 그런가 봅니다. 몰랐는데 코치마크도 일종의 walkthrouth ui중 하나라고 합니다.
5. ComboBox 콤보박스
'combo'는 'combination'의 어원인데 복합적이라는 뜻입니다. 보통 '둘 2 two'을 의미하죠. Combobox는 드롭다운 리스트와 텍스트 입력 기능을 결합한 UI 요소로, 사용자가 목록에서 선택하거나 직접 입력할 수 있게 해 줍니다. 드롭다운처럼 생겼으나 선택뿐만 아니라 입력방식도 가능한 컨트롤러입니다.
6. loading spinner 로딩스피너
loaders, loading icon, spinner... 실로 많은 이름으로 불리고 있는 친구입니다.. 정확한 명칭은 로딩 스피너입니다.
실로 다양한 디자인되어있는 로딩 스피너7. spinner control 스피너 컨트롤
숫자 컨트롤러라고도 불리는 이 친구는 흔히 사용되는 숫자 입력 컨트롤입니다. 마우스, 키보드, 손가락을 이용하여 데이터를 한 단계씩 위아래로 조절합니다. 구글 머티리얼 디자인에선 스피너 컨트롤, ios에선 스테퍼라고 명명하고 있습니다.
8. stepper 스테퍼
스테퍼는 두 가지 UI로 나뉩니다.
1. 첫 번째는 숫자를 하나씩 클릭해서 컨트롤할 수 있는 UI입니다. 위에서 말씀드린 IOS에서 사용하는 숫자 컨트롤 UI를 스테퍼라고 부릅니다.
숫자를 컨트롤하는 스테퍼2. 두 번째는 진행 상황을 보여줄 때 쓰는 UI로 쓰입니다.
수평형 스테퍼는 특히 디바이스 크기에 제한되는 모바일에 많이 쓰이며 수직형 스테퍼는 크기에 제한이 없는 PC에 많이 사용됩니다.
수직형 스테퍼
수평형 스테퍼9. label 레이블
라벨로도 불리는 레이블. 예전에는 레이블로만 쓰기로 하다가 어느 순간 둘 다 혼용하기로 결정되었습니다. 버튼, 입력 필드, 드롭다운 목록과 같은 다양한 UI 컴포넌트와 결합하여 사용됩니다. Label은 보통 해당 요소의 목적을 명확히 설명하는 데 사용되며, 사용자가 해당 요소의 의미를 쉽게 이해할 수 있도록 도와줍니다.
10. placeholder 플레이스 홀더
네. 당신이 알고 있는 그 플레이스 홀더.
11. Splash screen 스플래시 스크린
애플리케이션을 실행할 때 가장 처음 나타나는 화면으로, 주로 앱의 로고, 이름 또는 브랜드를 보여주는 이미지나 애니메이션으로 구성됩니다.
12. Drawer 드로어
Drawer UI는 화면의 측면에서 슬라이드 형태로 나타나는 메뉴나 패널을 말합니다. 보통 왼쪽이나 오른쪽에서 스와이프 하거나 특정 버튼을 클릭하면 나타나며, 사용자가 더 많은 옵션이나 내비게이션 메뉴를 확인할 수 있도록 돕습니다. 중요한 건 sidesheet와는 구분해야 한다는 점입니다. sidesheet는 콘텐츠 확장을 위한 UI라면 Drawer는 주로 메뉴 이동을 위한 UI입니다.
13. bottom sheet & side sheet 바텀시트 & 사이드 시트
밑에서 나오면 바텀 시트고 옆에서 나오면 사이드 시트인데 사용하는 용도에서 좀 차이가 있습니다. 바텀 시트는 보통 옵션이나 모달을 대체하기 위한 용도입니다. 사이드 시트는 추가 정보나 상황별 기능을 제공하기 위한 패널입니다. 주로 보조 정보나 설정을 표시하는 데 사용됩니다. 중앙에 배치되어 워크 플로우를 가로막아버리는 것을 대체하기 위해 개발된 UI입니다.
14. date picker 데이트피커
Date Picker UI는 사용자가 날짜를 쉽게 선택할 수 있도록 도와주는 사용자 인터페이스 컴포넌트입니다. 주로 웹 애플리케이션과 모바일 앱에서 날짜를 입력하는 폼 필드에 사용되며, 사용자가 텍스트로 직접 입력하는 대신 달력 형식으로 날짜를 선택할 수 있는 직관적인 방법을 제공합니다. 사실 제가 디자이너 초기에 잘 몰랐던 용어여서 추가해 보았습니다. 이걸 뭐라고 부르지... 했었던 잘 몰랐던 용어였거든요.
15. breadcrums 브레드크럼
안데르센의 '헨젤과 그레텔'에서 유래된 UI 용어입니다. 길을 잃어버리지 않게 떨어뜨려 놓은 빵 부스러기를 따라 집으로 돌아오게 되었다는 이야기에서 비롯되었습니다. Breadcrumbs는 사용자가 현재 위치한 페이지까지의 계층적 경로를 보여줍니다. 사용자가 더 상위의 페이지로 쉽게 돌아갈 수 있게 하는 데 사용됩니다. 특히 복잡한 구조나 많은 하위 페이지를 가진 웹사이트에서 자주 사용됩니다.
16. Navigation bar & tab bar 내비게이션바 혹은 탭바
navigation bar는 안드로이드에서 부르는 용어이고 tab bar는 IOS에서 부르는 용어입니다. 어떤 용어를 쓸지는 조직에서 적절히 타협하여 잘 지정해서 쓰면 됩니다. 참고로 저희 디자인팀 파트리더는 안드로이드 유저지만 희한하게 탭바라고 썼습니다. 오히려 제가 내비게이션 바라고 쓰자고 우겼다는...(옛날사람)
17. 미트볼, 햄버거, 케밥, 벤토, 되네르 메뉴 아이콘
자세한 설명은 이곳에...
18. Snackbar & Toastbar 스낵바 & 토스트 메시지
스낵바와 토스트 메시지도 살짝 차이가 있습니다. 추가 기능이 있느냐와 없느냐의 차이입니다. 많이 헷갈리시죠? 단순히 나타났다 사라지면 토스트 메시지이고 더 상호작용할 수 있는 피드백(다시 시도, 삭제 등)이 있다면 스낵바입니다.
19. Scrim & dim(dimmed) 스크림 & 딤
scrim은 영어로 면포, 막이라는 단어입니다. drawer나 popup이 더 명확하게 보이기 위해 뒤에 반투명한 검은색 막을 추가하는데 그게 바로 scrim이죠. 저는 보통 dim이라고 많이 씁니다. 제가 드리고 싶은 말씀은 scrim도 맞고 dim도 맞다는 거죠. 왜 UI 단어가 이렇게 많아졌는지 모르겠습니다.
UI 명칭이 다양한 건 구글 머티리얼 디자인과 HIG 와의 명칭이 다르기 때문입니다. 게다가 기관마다 조금씩 다르게 명명되던 것이 알음알음 전파되다 보니 이 지경에 다다른 것일 겁니다. 그래서 지금에 와서 디자인 시스템이 더더욱 강조되는 것일 테지요.
원활한 대화가 되려면 중간에 UI 명칭을 되짚어 주고 확인시켜줘야 하는 게 디자이너의 역할입니다. 모든 사람이 특히 개발자와 기획자가 UI 명칭을 다 잘 알 거라고 착각하지 않았으면 좋겠습니다. '지식의 저주'에 사로잡히면 안 됩니다. 그들도 잘 모를 수도 있습니다. 협업하는 조직에서 갈등과 오해를 낳는 것이 바로 이 지식의 저주에서 시작됩니다. 잘 알려주고 바로 잡아주고 살펴주었으면 좋겠습니다. 둥글둥글하게 조율하면서 말이죠.
참고문헌
https://m3.material.io/ 안드로이드 머티리얼 디자인
https://developer.apple.com/design/human-interface-guidelines IOS 디자인 가이드라인
https://www.figma.com/community/file/1035203688168086460 구글 머티리얼 디자인 피그마 UI
