UI / UX / GUI가 도대체 무엇일까?
어렴풋이 알 것 같은 유저 인터페이스. 도대체 무슨 의미?
- UI = User interface
- ‘컴퓨터와 사람 간의 상호작용의 접점’이 해석인데, 한마디로 인간이 컴퓨터나 기계를 하고 싶으면 무엇이 필요할까요? 바로 눈에 보이는 화면이 있어야 터치도 하고, 클릭도 하고, 스크롤도 하겠죠? 화면이 없는 핸드폰을 떠올려 보세요. 깡통을 들고 다니는 셈이죠. 한마디로 ‘눈에 보이는 화면’이라고 생각하면 이해하기 쉬울 것 같습니다.
사용자의 경험은 정확히 무슨 일을 하는거지?
- UX = User eXperience
- 사용자의 경험을 만드는 것으로, 심리학과 연관이 된 사례가 많죠. 왜 버튼이 여기에 위치해야 하는지, 어떤 심리로 이 사이트를 방문하고 돌아다닐지 등… 초능력을 가질 수 있다면 ‘상대의 마음을 읽는 능력’을 갖고 싶다고 하잖아요. 그게 왜 초능력일까요? 그만큼 어렵고 절대 불가한 일이기에 초능력이 되었겠죠? 그만큼 UX도 사람의 심리나 패턴을 분석하여 ‘더’ ‘잘’ 클릭하고, 동의하고, 구매할 수 있도록 유도해야 하기에 어려운 것입니다.
Ui와 같은 interface인데 똑같은 일 하는 거 아냐?
- GUi = Graphical User interface
- 눈에 보이는 것을 디자인한다는 목적은 같습니다. 단지 같은 걸 어떻게 더 잘 보이고, 이해하기 쉽고, 좋아 보이게 만드는지에 대한 차이입니다. 예를 들어 면접에 A는 아침부터 미용실에 방문하여 머리를 손질하였고, B는 자다 일어난 머리 그대로 면접을 봤습니다. 아무래도 A의 인상이 더 좋게 작용됐을 거예요. 이렇듯 같은 아이콘이어도 유저가 받아들이기에 더 쉽고 좋은 것으로 디자인하는 것이 GUi입니다.
- 하지만 UI디자이너, GUi디자이너 구분을 하는 회사는 많지 않아 UI디자이너가 GUi 디자이너가 해내야 하는 몫까지 하는 편입니다!
Component(컴포넌트)는 무엇일까?
- Component(컴포넌트)란 사용자 인터페이스(눈에 보이는 화면)를 만들기 위한 아이템이라고 생각하면 됩니다. 이제 우리에게는 UI라는 그릇이 준비되었는데 그 속에 담을 것이 없잖아요? 바로 컴포넌트라는 음식들을 담아 주면 됩니다. 맛있는 음식일지, 아니면 손질하지도 않은 재료만 담은 것인지에 대한 차이는 바로 GUi의 역량입니다.
용어
용어는 박종민 디자이너*가 나눈 기준으로 저도 나누고자 합니다.
Navigation: 정보를 탐색할 때 사용하는 컴포넌트
Input: 사용자가 정보를 입력할 때 사용하는 컴포넌트
Information: 사용자가 정보를 전달할 때 사용하는 컴포넌트
이번 용어 정리 1편은 Navigation으로 정보 탐색할 때 주로 쓰이는 컴포넌트입니다.
Accordian 아코디언
: 콘텐츠를 접어 페이지 길이를 관리할 수 있게 한 것입니다.
특징
1. 화살표뿐만 아니라 +, - 등 아이콘을 활용할 수 있습니다. 때로는 아이콘이 없이 처리하는 것도 가능합니다.
2. 사용하는 아이콘의 경우 사용자들이 빠르게 판단하고 원하는 정보를 얻을 수 있도록 디자인해야 합니다.
Badge 배지
: 탐색 항목 및 아이콘에 대한 알림, 개수 또는 상태 정보를 표시하는 것입니다.
특징
1. 라벨이나 숫자를 포함할 수 있습니다.
2. 소형 및 대형 2가지 유형으로 나뉩니다.
3. 아이콘 위쪽 끝 부분에 위치합니다.
4. 콘텐츠를 ‘+’ 포함하여 4자로 제한하는 것이 좋습니다.
5. 기본 색상 매핑 유지하는 것이 좋습니다.
Breadcrumbs 브레드크럼
: 빵부스러기로 표시한 길이란 뜻으로 헨젤과 그레텔에서 따온 용어입니다.
: 페이지내 자신이 지나 온 흔적과 현재 위치를 알 수 있습니다.
특징
1. 뒤로 가기 버튼이나 전체 내비게이션을 이용하지 않고 한 번에 갈 수 있습니다
2. 텍스트를 가로로 펼쳐서 보여주기에 최소한 공간을 차지합다.
3. 내비게이션을 대체하지 않습니다.
4. 구분해 주는 기호나 그래픽을 사용해야 합니다.
Card 카드
: 카드는 하나의 주제에 대한 콘텐츠와 작업이 담아낸 것입니다.
특징
1. 카드의 크기는 내용에 따라 다양한 형태를 가질 수 있습니다.
2. 헤드라인, 버튼, 목록 등 무엇이든 카드 내에 포함시킬 수 있습니다.
Carousel 캐러셀
: 화면 안팎으로 스크롤할 수 있는 항목을 모은 것입니다.
특징
1. 주로 가로로 스크롤하는 구조를 가집니다.
2. 텍스트와 이미지, 비디오와 같은 시각적인 항목도 포함시킬 수 있습니다.
3. 항목의 너비는 다양할 수 있으며, 스크롤 시 너비도 변경 가능합니다.
Dividers 디바이더
: 목록이나 기타 항목의 콘텐츠를 그룹화하는 얇은 선입니다.
특징
1. 구분선은 표시하되 굵게 표시하지 않습니다.
2. 항목을 열린 공간에만 그룹화할 수 없는 경우에만 구분선을 사용합니다.
3. 개별 항목 분리로 쓰이는 것이 아닌 항목을 그룹화하기 위한 것입니다.
Gallery 갤러리
: 사진, 동영상, 텍스트와 같은 콘텐츠들을 실시간으로 제시하여 나열한 것입니다.
특징
1. 자주 업데이트되는 콘텐츠를 업로드하는 경우에 적합합니다.
2. 그리드형과 캐러셀형으로 구분할 수 있습니다.
List 리스트
: 이미지나 텍스트 등이 수직으로 연속 나열된 것입니다.
특징
1. 나열할 때 논리적인 방법으로 목록의 항목을 정렬해야 합니다.
2. 항목을 짧고 쉽게 스캔할 수 있도록 유지해야 합니다.
3. 아이콘, 텍스트, 작업을 일관된 형식으로 표시해야 합니다.
Menu 메뉴
: 어떤 처리도 되지 않은 화면에서 선택 항목 목록을 표시한 것입니다.
특징
1. 쉽고 열고 닫고 선택할 수 있어야 합니다.
2. 지나치게 길기보다 한눈에 들어올 수 있도록 항목을 표시해야 합니다.
3. 아이콘 버튼, 텍스트 필드 등 다양한 구성 요소에서 메뉴를 열 수 있습니다.
Tab 탭
: 콘텐츠를 각 화면과 보기에 맞기 카테고리로 그룹화한 것입니다.
특징
1. 탭은 가로로 스크롤할 수 있는 구조로 많은 탭이 있을 수 있다.
2. 탭은 꼭 고정형태로 있어야 되는 것은 아닙니다.
3. 탭은 움직여선 안됩니다.
'UXUI > Study' 카테고리의 다른 글
| [서비스기획] 데이터 기반으로 문제를 잘 정의하는 방법 01 (0) | 2025.09.25 |
|---|---|
| <사용성 개선만으로는 좋은 프로덕트를 만들 수 없다.> 아티클 후기 (0) | 2024.01.10 |