✅ UX/UI란?
UI 디자인 : User Interface의 약자로, 제품과 사용자 사이에서 소통할 수 있도록 하는 실체적인 수단이나 매개체
- 주로 화면의 전체적인 구조와 시각적인 요소들을 디자인
- 시각적인 요소 : 레이아웃, 색상, 크기와 정렬, 컴포넌트라고 부르는 버튼, 아이콘, 이미지 등
UX 디자인 : User eXperience의 약자로 사용자가 어떤 제품이나 서비스를 이용하면서 느끼는 총체적인 경험
- 주로 제품에서 어떠한 감정을 불러일으키거나 특정한 경험을 할 수 있도록 이끄는 것
- 넓은 의미로 제품뿐만 아니라 무형의 서비스나 브랜드를 이용할 때 느끼는 모든 경험
🐚 알아두면 좋은 용어
- HCI
- Human Computer Interaction의 약자
- 인간과 컴퓨터 간의 상호작용에 대해 연구하는 분야
- 대학원에서는 주로 UX/UI보다는 HCI라는 용어를 더 많이 사용
- 연구의 주된 목적은 사람이 컴퓨터를 더 쉽게 사용하고, 더 잘 활용할 수 있도록 개선하는 것
- CX
- Customer Experience의 약자
- 브랜드를 처음 만나는 순간부터 제품을 사용하는 고객 여정의 모든 측면에서 고객이 경험하는 느낌이나 인상
- UX와 구분되는 특징은 느낌, 인상에 더 집중
- CX에는 고객 서비스(CS)가 포함
- BX
- Brand Experience의 약자
- 고객이 브랜드와 상호작용할 때 갖는 전반적인 인식, 브랜드를 생각했을 때 떠오르는 감정 등을 의미
- 큰 범위에서 CX와 UX가 모두 BX에 포함
- Brand Identity라고 부르는 것들 ⇾ 이름, 로고, 컬러, 슬로건 등이 포함
- ex) 나이키 : 스우시 로고, Just Do it 슬로건, 조던 등
✅ UX/UI 디자이너의 역할
- UI 디자이너
👉 화면의 전체적인 구조와 시각적인 요소들을 디자인
- 화면 간의 관계와 인터페이스의 구성을 디자인하는 것에 집중
- 주 업무 : 레이아웃, 색상, 크기와 정렬, 컴포넌트라고 부르는 버튼, 아이콘, 이미지 등을 디자인
- 회사에서 따라서 GUI 디자이너라고 부름
- UX 디자이너
👉 사용자가 어떤 제품이나 서비스를 이용하면서 느끼는 총체적인 경험을 디자인
- 사용자를 분석한 데이터를 토대로 편리한 경험을 이끌어내기 위한 일에 집중
- 주 업무 : 유저 리서치와 테스트, 정보 구조 설계, 페르소나와 유저 시나리오 작성 등
- UI 디자이너보다 업무에서 조사와 분석의 비중이 큼
- 프로덕트 디자이너
👉 UI와 UX를 포함하여 제품 전반의 경험을 디자인
- 제품의 특정 부분이 아니라 사용자가 경험하는 제품의 시작과 끝 모두를 담당, 반복적인 개선을 통해 제품을 고도화하는 일에 집중
- 주 업무 : 문제 정의, 가설 설정, 솔루션 도출, 테스트 등
- 다수의 기업, 특히 스타트업에서 UX/UI 디자이너를 아울러 프로덕트 디자이너로 부름
✅ 디자인 가이드라인 _애플의 HIG(Human Interface Guidelines) / 구글의 Material Design
디자인 가이드라인이란?
👉 일반적으로 브랜드의 디자인 원칙과 컴포넌트별 규칙을 정의한 것
- 일관된 디자인을 하기 위한 지침서로서, 디자인할 때 지켜야 할 원칙과 규칙을 제안
- 컬러, 버튼, 폰트, 컴포넌트 디자인의 스타일부터 브랜드 철학이나 디자인 원칙까지 다양한 것들이 포함
- 기업에 따라 디자인 가이드라인을 디자인 시스템이나 스타일 가이드로 부르기도 함
- 규모가 있는 기업은 대부분 디자인 가이드라인을 만들고 오픈소스로 웹사이트에 공개
⇾ 애플의 Human Interface Guidelines 과 구글의 Material Design이 가장 대표적
❤️ 좋은점 ❤️
- 기업
브랜드 아이덴티티를 강력하게 유지
디자이너 간의 결과물의 수준을 상향 평준화
- 디자이너
미리 정의된 컴포넌트를 재사용하면서 불필요하게 반복되는 업무를 줄이고 효율적으로 일할 수 있음
- 사용자
원칙에 따라 디자인된 화면을 통해 일관된 사용자 경험을 얻을 수 있음
애플의 HIG(Human Interface Guidelines) 애플의 HIG 바로가기👆
- 애플 생태계 내에서 플랫폼 간의 흐름이 끊김이 없이 이어질 수 있는 경험을 제공할 수 있도록 지원하기 위해 만들어짐
- 앱 인터페이스를 더욱 일관되고 직관적으로 만들어 사용자 경험을 향상하는 역할
- 앱스토어에 등록하는 모든 애플리케이션은 심사를 받음. 이때 HIG를 지키지 않으면 앱 등록을 거부당할 수 있어 반드시 숙지
📍 가이드라인 문서 구조
💡 기본적으로 좌측의 네비게이션 메뉴를 통해 정보 탐색
- Platforms
아이폰, 아이패드, 맥북 등 기기별로 달라지는 특성과 UX 패턴을 설명- Foundations
색상, 다크모드, 타이포그래피 등 디자인 기초가 되는 요소를 설명- Patterns
로딩, 알림, 피드백 등 애플 기기에서 자주 사용되는 UX 패턴들을 설명- Components
실제 애플의 OS 화면에 사용되는 구체적인 컴포넌트들을 설명- Inputs
사용자가 기기에 데이터를 입력하는 데에 사용하는 방법들을 설명- Technologies
앱이나 게임에 사용할 수 있는 애플의 기술들을 설명
🐚 살펴보면 좋은 페이지 : Accessibility , Buttons , Modality
Modal 컴포넌트는 iOS에서 주로 사용하는 특징적인 컴포넌트 중 하나. 사용자에게 임시로 콘텐츠를 보여주고, 특정 작업을 수행하게 할 때 사용 (페이지 이동과는 다름)
구글의 Material Design 구글의 Material Design 바로가기👆
- 다양한 Android 기기에서 공통으로 적용할 수 있는 일관된 디자인 가이드를 만들기 위해 탄생
- 애플과 달리 구글은 안드로이드 OS를 오픈 소스로 제공하다 보니 기기의 사양도 무척 다양
- 머티리얼 디자인 UI를 통해 동일한 유저 경험을 만들 수 있도록 하는 역할
📍 가이드라인 문서 구조
💡기본적으로 좌측의 네비게이션 메뉴를 통해 정보를 탐색
- Foundations
접근성 표준, 레이아웃, 인터렉션 등 머티리얼 디자인에서 기초가 되는 요소를 설명- Styles
색상, 아이콘, 모션 등 UI의 시각적인 측면에 관해 설명- Components
버튼, 체크박스, 텍스트 필드 등 화면에서 인터페이스를 구성하는 구체적인 컴포넌트들을 설명- Blog
머티리얼 디자인과 관련한 새로운 소식을 자세한 글로 적어둔 블로그
🐚 살펴보면 좋은 페이지 : Accessibility , Buttons , Layout
❤️ 활용하면 좋은 사이트 모음 ❤️
1) Pinterest
- 여러 사람이 스크랩한 이미지를 모아서 볼 수 있는 서비스
- 인터넷에서 찾은 이미지를 저장해 주제에 따라 관리할 수도 있고, 다른 사람이 한 것 중에 공개된 걸 볼 수 있음
- 다른 사람이 디자인한 화면이나 실제 시장에 나와 있는 서비스도 쉽게 찾을 수 있음
2) mobbin
- 모바일과 웹 기반 서비스들의 화면을 모아놓은 해외 사이트
- 참고할 화면을 찾기 위해 일일히 앱을 다운받거나 스크린샷을 찍지않아도 되어 편리
- 유료 서비스. 일정 개수까지 무료이고, 자유롭게 사용하려면 비용을 지불
3) wwit
- 국내에서 서비스하는 모바일 기반의 앱 화면을 모아놓은 사이트
- 카테고리, 패턴, 컴포넌트로 구분해서 원하는 화면을 찾을 수 있어서 편리
- 모빈만큼 양이 많진 않지만, 국내 서비스를 찾을 때 이용하기 좋음
- 윗과 마찬가지로 국내에서 서비스하는 앱 화면을 모아서 볼 수 있는 서비스
- UX패턴과 그 설명이 자세히 적혀있어 자주 사용되는 UX패턴을 익히기 좋음
- 산업군, UX 요소별로도 필터를 적용해 볼 수 있어 편리
#UX/UI 디자이너가 되고 싶은🥇