ㅣ플러스 엑스 UI 강의ㅣ
2. 4-02 구성요소의 이해
효율적인 의사소통을 위해 UI 콤퍼넌트 용어를 알려줄께.
UI 구성요소는 폰트, 컬러, 형태, 인터렉션... 다양한 요소들의 조합.
다양한 UI를 사용하다보면 서로 사용 하는 용어가 달라서 혼동이 있을 수 있다.
why? 혼동스러우면 협업 어려움.
그래서 올바른 구성요소를 만들기 위해 구성요소를 이해 해야 한다.
'구성요소를 그릴 때 고려 해야 할 사항'
사용자에게 명료하게 전달하는것이 중요 요소별 특징을 알려주겠음.
[색]
- 강조, 화면 내 사용자를 행동하게 함.
- 사용성에 대한 힌트를 제공함.
- 사용자의 주의를 끌 수 있음.
- 색 표기법: Hex (#FFFFF) 웹 ,앱에 많이 사용함. 컬러를 코드로 변환.
- RGB 표기법: rgb(255,255,255) / rgba(255,255,255,1.0) 마지막 a 표기는 투명도
- 포인트 컬러(가장 높은 중요) 설정. ex) 로고, 키이미지를 바탕으로 브랜드 주조색
- 포인트 컬러를 기준으로 비슷한 컬러를 설정하여 시스템 컬러를 구성한다.
메인컬러 ~ 서브 컬러에 계층 구조를 더하여 UI 구성요성의 활성화 비활성화의 상태변화 표현.
- 계층구조: 명암 / 채도 를 통해서 단계 표현
[폰트]
메세지를 전달하기 위한 도구.
- 폰트로 시각적 개층을 인식 할 수 있기 때문에 한 폰트로 통일시켜주는 것이 좋다. 혹은
- 폰트 크기 규칙적으로 조절 → 사용자가 편리하게 읽을 수 있도록 한다.
ex) 모바일, PC 에서 12Point 이상 쓰는 것이 좋음, 가장 작은 글 (중요하지 않은것은) 8Point
- 언어별 한가지 폰트 사용 추천. 폰트 패밀리 유지 하는 것이 좋음. why? 통일성 일관성이 있기 때문
- 폰트는 9개 정도의 굵기를 가지도 있다. 그 중 2~3가지 를 사용하는 것이 좋음 ex) Lite / Regular / Bold
- 자간 행간 조절. 높은 가독성을 위해 테스트 필요.
- 시스템 폰트 사용 이유? 디자인 운영 및 유지 관리 효율성이 높기 때문.
[형태]
모양, R값, 크기 등의 사각 요소를 조합, 주목도 조절, 형태적 요소와 색상, 폰트 복합적 활용하여 차별점 강조
- 상태에 대한 메세지를 간접적으로 전달 가능
- 다양한 환경에 맞게 크기, 아이콘 R값 조절
[인터렉션]
구성요소에 인터렉션을 더해 콘텐츠를 부각하는 것. 더 다채로운 서비스 경험 제공.
- PC와 모바일 특성에 따른 인터렉션이 다름
| PC | 모바일 |
| 사용 도구: 마우스 커서_ 세밀함. | 사용 도구: 손 |
| Click | Tap |
| Double Click | Swipe |
| Hover | Long Press |
| Click + Drag | Zoom |
- 화면 넓게 보여주기 위한 인터렉션 활용 가능 ex) 헤더, 네비게이션 바 숨겨졌다가 액션이 있을때 보이는 인터렉션 활용
'콤포넌트'
요소, 부품을 뜻함. UI 디자인에서 화면을 구성하는 요소를 뜻함. 최소의 단위
사용자에 정보를 제공하고, 사용자가 콘트롤 할 수 있는 모든 것.
[Navigation]
정보 탐색에 필요한 콤퍼넌트
- 페이지 이동, 페이지 정보
- 서비스 구조 안내
- 이동 통로 역할
- GNB (Global Navigation Bar) 최상위 카테고리 메뉴 모음 거의 헤더or 좌측 배치 됨.
- LNB (Local Navigation Bar) 서브 메뉴로 최상위 카테고리 밑 하위 카테고리를 메뉴화 한 카테고리. 리스트 형식으로 표현됨.
[Segmented Contrl]
앱 내에서 페이지간 이동을 위해 4~5개 버튼으로 구성된 콤퍼넌트
세그먼트 컨트롤 테스트 정보
A better segmented control
How we embraced a growth mindset and ended up with a more robust ecosystem of selection patterns
medium.com
IOS 세그먼트 컨트롤 구축 가이드
Segmented controls | Apple Developer Documentation
A segmented control is a linear set of two or more segments, each of which functions as a button.
developer.apple.com
안드로이드 세그먼트 컨트롤 구글 머트리얼 가이드
Common buttons – Material Design 3
Buttons help people take action, such as sending an email, sharing a document, or liking a comment.
m3.material.io
[Tab Bar]
콘텐츠 영역 상단. 다른 콘텐츠 선택 하거나 콘텐츠 필터링. 모바일 경우 콘텐츠가 많을 경우 스와이핑 적용 기능
IOS 탭바 구축 설명 글
Tab bars | Apple Developer Documentation
Tab bars use bar items to navigate between mutually exclusive panes of content in the same view.
developer.apple.com
[Path]
서비스 구조속에서 사용자가 어디에 위치하고 있는지 보여주는주는 것. 시각적 계층구조로 표현.
Home > mypage
[Menu Button]
제공하는 서비스를 한눈에 볼 수있도록 함. 화면 가장자리에 위치. 화면의 복잡성을 최소화함.
ex) 햄버거버튼 메뉴버튼 디자인 시 버튼을 눌렀을때 펼쳐지는 레이아웃과 비슷하게 만들 것.
https://m2.material.io/components/menus#behavior
[Drawer]
메뉴 버튼을 눌렀을때 펼쳐지는 뷰.
[Card]
같은 주제 콘텐츠를 나열 할때 각각을 구분 하는 것이 필요함. 시각적으로 효과적으로 구분하기 위해 사용
ex) 카드 UI 같은 박스형 모듈 다양한 요소 포함.(이미지, 타이틀, 본문, 아이콘, 뱃지, 그래픽...) 화면에 많은 콘텐츠 배치 시 최소한의 디자인 원칙에 따라 카드 UI안에 정보 정리하기 → 다른 콘텐츠와 명확한 구분, 정보 정리에 용이.
카드에 포함되는 요소가 많기 때문에 어떻게 보이는지 테스트해야 함.
[Carousel]
여러 이미지를 순환 시키면서 콘텐츠를 반복해서 보여줌. ex) 배너, 카드 콘텐츠 순환
같은 줄에 몇개의 콘텐트가 있는지 알 수 있게 디자인 함. 새로운 페이지로 이동 가능.
네비게이션 콤포넌트를 사용하여 콘트롤 서비스 탐색 경험 향상.
* 이미지 연출은 운영가이드를 기준으로 통일
[List]
비슷한 카테고리 정보를 묶어서 정돈한 콤포넌트.
정보가 더 중요한 경우 사용. 항목과의 비교를 쉽게 표현.
* 리스트 디자인 시 오브젝트의 정렬을 맞추는 것이 중요.
리스트 구글 머트리얼 디자인 가이드
Lists – Material Design 3
Lists are continuous, vertical indexes of text or images.
m3.material.io
[Accordion]
세로로 쌓여있는 정보를 접을 수 있는 UI
하위 카테고리를 접고 펼칠 수 있음.
* 숨겨진 정보가 있음을 지각 시키도록 디자인. 펼쳤을때, 접었을때 아이콘 디자인. 위치는 우측 끝에 배치.
아코디언 디자인 분석 글
UI cheat sheet: Accordions
While accordions may seem like a simple component, there is more to them than meets the eye.
uxdesign.cc
[Pagination]
콘텐츠가 많은 경우 스크롤이 길어지는 것을 방지해 페이지로 구분 해주는 UI
페이지 네이션 정보글
Pagination
Pagination allows users to navigate through large amounts of content or data divided across multiple pages while making it clear that more pages exist.
canvas.workday.com
' Input '
사용자가 정보를 입력하거나 구체적 정보를 기록하고 입력할때 사용. 상황에 맞는 다양한 포넌트 사용
ex) 타이핑, 클릭, 터치 다양한 입력 방식 사용.
[버튼]
- 버튼 누를 시 텍스트 작성 가능함을 알림.
- 어포던스에 따라 다른 버튼 디자인(컬러, 위치..) 사용성에 따라 다양한 버튼 만들
- 텍스트(완결형, 짧고 명확하게), 아이콘, 요소 조합.
- 텍스트 버튼: 테스트로만 구성된 버튼 중요도 덜함. 눈에띄지 않는 버튼.
솔리드 버튼 / 외곽선 버튼 / 아이콘 버튼
- 권장 터치 영역 설정: 작은 버튼일 경우 투명한 영역을 지정하여 터치 영역을 확보하는것.
- 버튼 상태_ Status: Default or Enabled (기본) / Hover (마우스를 올렸을때.) / Pressed (누를 경우) / Disabled(비활성화)
- 사용성이 높을 수록 오른쪽 배치
[Toggle]
활성화, 비활성화 두 가지 기능 제공. On, Off
[Chek Box]
중복선택 가능한 옵션 제공
체크박스 구글 머트리얼 가이드
Checkbox – Material Design 3
Checkboxes allow users to select one or more items from a set. Checkboxes can turn an option on or off.
m3.material.io
[Radio Button]
중복선택 불가능. 옵션 중 하나만 선택 가능.
라디오버튼 구글 머트리얼 가이드
Radio button – Material Design 3
Radio buttons allow users to select one option from a set.
m3.material.io
[Floating Button]
상단 위치. 자주, 많이 사용하는 버튼 표시
- 명확한 디자인 필요.
- 사용자가 서비스를 보는데 방해가 되지 않는 곳에 위치 대부분 우측하단 위치.
[Text Input]
텍스를 입력하는 컴포넌트. 폼 형태.
- 텍스트 박스, 레이블, 플레이스 홀더로 구성.
- 텍스트 에어리아: 텍스트가 입력되는 사각 박스
- 라벨 텍스트: 텍스트 인풋에 어떤 정보를 써야하는지 설명하는 글.
- 피드백 텍스트: 사용자와 상호작용 글
-Text Field: 범주화 활 수 없는 글을 작성할때. 내부 글이 많을 경우 내부 스크롤 생성. 글자수 제한, 글자수 세기 기능 더할수 있음. → UI 가이드 작성.
텍스트 필드 구글 머트리얼 가이드
Text fields – Material Design 3
Text fields allow users to enter text into a UI. They typically appear in forms and dialogs.
m3.material.io
[Drop down]
서비스 지정값을 선택 하면 다른 정보들이 리스트 보여지는 것
드롭다운 디자인 설계 참고 글
Dropdown design: guidelines for web and mobile
We see dropdown menus everywhere. But what makes a good dropdown? What changes when designing for mobile screens? We got the full run-through for you!
www.justinmind.com
[Slider]
사용자가 연속되는 범위 안에서 값또는 특정 범위를 선택할 수 있는 UI
슬라이더 구글 머트리얼디자인 가이드
Sliders – Material Design 3
Sliders allow users to make selections from a range of values.
m3.material.io
[Stepper]
수량 변경 값에서 많이 사용.
스테퍼 디자인 지침 참고 글
Stepper | SAP Fiori for iOS Design Guidelines
Like the object card, the content within the list card and its items are designed to be flexible so as to accommodate different use cases. However, the content used for the list item, which are housed in condensed object cells, should be very concise.
experience.sap.com
'Information'
서비스와 사용자가 상호작용하는 과정에서 서로 구체적인 정보를 전달 할때 사용
사용자에게 정보 전달을 위한 컴포넌트
[Popup]
페이지 위에 새 브라우저를 띄움.
ex) 공지사항
팝업, 바텀시트, 스낵바 비슷한 콤포넌트 비교 분석
컴포넌트 스터디: ①팝업, 바텀시트, 스낵바 | 요즘IT
모달(modal) UI는 무엇일까? 모달은 사용자의 이목을 끌기 위해 사용하는 화면전환 기법을 의미한다. 팝업, 바텀 시트, 스낵바 등 여러 가지가 존재해, 어떤 UI를 사용하면 좋을지 헷갈릴 때가 많다.
yozm.wishket.com
팝업창 종류
팝업의 종류; 팝업, 알럿, 레이어 팝업, 모달, 토스트 팝업
작년 봄 신입이 들어왔었다. 기획 직무는 아예 처음인 친구였다. 나랑 같은 프로젝트를 하는 것도 아니었고, 우리 부서 사람이라는 것 외에는 큰 접점이 없었다. 평소에 사람들은 나한테 질문을
jeeeeehnmin.tistory.com
[Modal Popup]
- 확인, 경고시 띄우는 알람.
- 웹, 앱에 맞게 맞춤화 디자인.
[DIm]
- 팝업창 뒷배경은 어둡게 처리 = Dim
[Toast Popup]
화면 최상단, 최하단에서 동작에 대한 간단한 피드백을 텍스트 형태로 제공하고 시간이 지나면 사라지는 작은 팝업형태 컴포넌트
- 토스트 팝업 위치, 지속시간 설정해야함.
[Tool Tip]
콘텐츠 기능에 간단한 텍스트가 필요할 경우 사용.
공간 효율성을 위해 작게 디자인.
- 툴팁 팝업은 배경과달라 보이게 디자인.
[Splash]
앱 실행시 나오는 첫 화면
화면 로딩 될때 사용
- 서비스의 아이덴 티티를 보여줌.
[워크쓰루] 온보딩에 속함
새로운 사용자가 새로운 서비스에 적응할 수 있도록 돕는 역할을 하는 것을 의미. 워크쓰루는 여러 페이지에 사용 방법을 적어 안내하는 방식을 의미.
[코치마크] 온보딩에 속함
신규 사용자를 위해 화면 위에 반투명한 레이어를 덮어 메뉴를 설명하는 방식
[Loading]
로딩시 보여주는 콤포넌트. 모션
[Progress Bar]
진행상황을 알려줌. 연속적, 단계적으로 표현 함.
일처리 정도를 알려줌.
프로그레스 머트리얼 디자인 가이드
Progress indicators – Material Design 3
Progress indicators inform users about the status of ongoing processes, such as loading an app, submitting a form, or saving updates.
m3.material.io
[Badge]
크기 가장 작은 요소. 최소한의 정보만 기재
- Badge-noti : 알림 나타내는 용도로 사용. ex.사용자에게 새로운 알림이 있음을 알려줌.
텍스트/ 아이콘..
배지 구글 머트리얼디자인 가이드
Badge – Material Design 3
Badges are used as indicators to convey dynamic information, such as counts or status. A badge can include labels or numbers.
m3.material.io
' System UI'
'안드로이드와 IOS의 차이?'
| 상단 UI 시스템_ Status bar | |
| - 안드로이드: 기기에 따라 크기가 달라짐. | - IOS: 상단 노치 유무, 크기차이. 두가지 형태 |
| 하단 영역_ Bottom Area | |
| - 안드로이드: 네비게이션 바 | - IOS: 인케이터 바 |
 |
 |
| Font | |
| - 안드로이드 시스템 폰트: Roboto / Noto Sans | - IOS 시스템 폰트 : SF Pro / Apple SD 산돌고딕 Neo |
[App icon]
라운딩 처리된 둥근 사각. 정방형으로 제작. PNG, 투명 배경 안됨. 요구 규격에 맞는 이미지 준비
[Favicon]
웹에서 웹 주소 옆에 표시되는 작은 이미지 아이콘 16 or 32픽셀 정사각형 제작
'콤퍼넌트 제작시 주의점'
1. 소수점이 생기지 않게 정수로 디자인
- 위치, 크기..
2. 색상, 폰트, 형태의 규칙
- 컴포넌트를 동일하게 사용.
- 색상, 폰트, 형태, 인터렉션 일관성 유지
3. 컴포넌트 특징과 일맥상통하게 디자인
- 보편적인 규칙
- 출처:https://plusxsharex.fastcampus.co.kr/courses/213930/clips/
[🌰인사이트]
●UI 컴포넌트 용어 정리
- Segmented Contrl : 페이지내 이동을 위한 버튼형 콤포넌트
- Tap Bar: 메뉴 카테고리 모음 바 ex) 앱 하단에 위치하는 경우 많음
- Path: 사용자가 위치한 곳 표시 ex) 홈 > 음식 > 쿠키
- Menu Button: 서비스를 한번에 볼 수 있게 모아놓은 버튼 ex) 햄버거 버튼
- Drawer: 메뉴버튼 눌렀을 때 펼쳐지는 뷰
- Accordion: 하위카테고리를 접고 펼칠 수 있음
- Pagination: 페이지 표시 UI
- Chek Box: 중복선택 가능한 체크 박스
- Radio Button: 중복선택 불가능한 체크
- Flotiong Button: 사용자가 많이 사용하는 or 자주사용하는 서비스를 찾을 수 있게 고정해서 보여주는 버튼 ex) 우측 하단 1:1 상담사 연결 버튼
- Drop down: 지정값 선택 시 관련 다른 정보 리스트가 보여짐.
- Slider: 연속된 범위중 사용자가 원하는 특정값을 조절하여 선택할 수 있는 UI
- Stepper: 일정한 값만큼 +, - 할 수 있는 UI
- Toast Popup: 작은 팝업 형태로 간단한 피드백을 제공.시간이 지나면 사라짐.
- Tool Tip: 마우스 호버시 간단한 텍스트 문구가 뜨는 것.
- Splash: 앱 실행시 나오는 첫 화면
- 워크쓰루: 가입후 첫 화면 전에 나오는 온보딩 페이지 여러 페이지에 사용방법을 써서 안내.
- 코지마크: 반투명 레이어 위 신규사용자를 위한 사용 방법 안내.
- Progress Bar: 진행상황을 알려주는 바 -
- Badge: 최소한의 정보 기재, 가장 작은 요소
●앱 아이콘 제작 크기
- 앱아이콘: 라운딩 된 둥근 사각형, 정방형으로제작. PNG파일, 투명도 안됨. 요구 규격에 맞는 이미지 제작
- 퍼비콘: 웹 주소옆 표시 되는 작은 아이콘 16픽셀 or 32픽셀 정사각형
[🥜 추가조사]
UI설계에 필요한 용어
https://brunch.co.kr/@bcc5736f7b26444/5
04. UI설계에 필요한 용어들-1
Prologue 실무자들간의 빠르고 스무스한 소통을 위해서, 회의 시 오가는 대화를 한 번에 알아듣고 정리하기 위해서, 아이디어 향상을 위해서 웹/앱 UI 설계 시 사용되는 용어들을 (아는 선에서) 총
brunch.co.kr
네비게이션바 IOS, 안드로이드 비교
https://brunch.co.kr/@dalgudot/98
03화 UI/UX 디자인 가이드_ 내비게이션 바
디자인 독학하기 03 | UI/UX 디자인 경험을 공유합니다 :) [Contents] 01 내비게이션 바 디자인하기 1_ 양옆 여백(Margin) 정하기 2_ 높이(Heights)와 동작(Action) 정하기 3_ 타이틀(Title) 위치 정하기 4_ 타이틀
brunch.co.kr
[🌞 목표]
▶ 디자이너, 개발자가 이해 할 수 있는 용어로 이야기 할 수 있다.
▶ 기획한 UI의 명칭을 알고 기획서에 작성할 수 있다.
'디자인 > UIUX' 카테고리의 다른 글
| [UI 디자인 협업] 네이밍 룰 (0) | 2023.08.10 |
|---|---|
| [UI 디자인 기초] 구성 요소 (0) | 2023.08.08 |
| [UI 디자인 기초] UI 구조의 이해 (0) | 2023.08.02 |
| [UI 디자인 기초] 그리드 (0) | 2023.08.01 |
| [UI 디자인 기초]레이아웃에 대한 이해 (0) | 2023.07.28 |
