📌
1. UX/UI의 의미
2. UX/UI 디자이너의 역할
3. 디자인 가이드라인
4. UX/UI 디자인 트렌드
5. 과제

1. UX/UI의 의미

- UI (User Interface)

사용자가 접촉하는 지점
UI 디자인은 화면의 전체적인 구조, 시각적인 요소들을 디자인하는 것을 의미한다.

- UX (User Experience)

사용자가 어떤 제품, 서비스 혹은 브랜드를 이용하며 느끼는 총체적인 경험

📖 기타 용어

- HCI (Human Computer Interaction)

인간과 컴퓨터 간의 상호작용에 대해 연구하는 분야
사람이 컴퓨터를 더 쉽게 사용하고, 더 잘 활용할 수 있도록 하는 것이 목적

- CX (Customer Experience)

브랜드를 처음 만나는 순간부터 제품을 사용하는 고객 여정의 모든 측면에서 고객이 경험하는 느낌이나 인상을 의미한다.
UX와 구분되는 특징은 느낌, 인상에 더 집중
고객 서비스 (CS) 포함

- BX (Brand Experience)

고객이 브랜드와 상호작용할 때 갖는 전반적인 인식, 브랜드를 생각했을 때 떠오르는 감정 등을 의미한다.
(CX, UX ⊂ BX)
이름, 로고, 컬러, 슬로건 등의 Brand Identity가 포함된다.

2. UX/UI 디자이너의 역할

- UI 디자이너

화면의 전체적인 구조와 시각적인 요소들을 디자인하는 디자이너
화면 간의 관계와 인터페이스 구성을 디자인하는 것에 집중

- UX 디자이너

사용자가 서비스를 이용하면서 느끼는 총체적인 경험을 디자인하는 디자이너
사용자를 분석한 데이터를 토대로 편리한 경험을 이끌어내기 위한 일에 집중

- 프로덕트 디자이너

UX/UI 디자이너를 아울러 프로덕트 디자이너라고 부른다.
UI와 UX를 포함하여 제품 전반의 경험을 디자인하는 디자이너
사용자의 문제를 정의, 가설 설정, 솔루션 도출, 테스트 등의 업무 수행

💡 기업 JD를 보면 필요한 역량을 알 수 있다.

3. 디자인 가이드라인

일관된 디자인을 하기위함
디자인을 할 때 지켜야 할 원칙과 규칙 제안한다.

- 기업🏢

브랜드의 아이덴티티를 강력하게 유지할 수 있고 디자이너 간의 결과물 수준을 상향 평준화할 수 있다.

- 디자이너👩‍💻

미리 컴포넌트를 만들어두어 재사용하며 불필요하게 반복되는 업무를 줄여 효율성을 높일 수 있다.

- 사용자🤩

원칙에 따라 디자인된 화면을 통해 일관된 사용자 경험을 얻을 수 있다.

애플과 구글의 디자인 가이드라인

- 중요성

구글과 애플은 각각 iOS, 안드로이드 운영체제를 만드는 회사이고 전 세계 운영 체제 시장의 99%를 차지한다.

일반적으로는 한 화면을 디자인하여 두 운영체제에서 동일하게 사용하지만, 운영 체제의 이슈로 똑같이 적용할 수 없는 경우가 생기기도 한다.

따라서 애플과 구글의 디자인 가이드라인 숙지하는 것이 좋다.

- Human Interface Guidelines (HIG 히그)

애플 생태계 내에서 플랫폼 간의 흐름이 끊김 없이 이어질 수 있는 경험을 제공할 수 있도록 지원하기 위해 제작되었다.

앱 인터페이스를 일관되고 직관적으로 만들어 사용자 경험을 향상시키는 역할을 한다.

🔗 https://developer.apple.com/kr/design/

- Material Design

다양한 안드로이드 기기에서 공통으로 적용할 수 있는 일관된 디자인 가이드를 만들기 위해 제작되었다.

애플과 달리 구글은 안드로이드 OS를 오픈 소스로 제공하여 기기의 사양이 매우 다양하여 이 가이드라인을 통해 동일한 유저 경험을 만드는 역할을 한다.

🔗 https://m3.material.io/

4. UXUI의 디자인 트렌드

1. 리얼 메타포

1990년대, IBM HCI 디자인 팀에서 초보자들도 컴퓨터를 쉽게 이용할 수 있도록 실제 물건을 모방하여 디자인한 것이 시초이다.
(이미지 출처 : https://story.pxd.co.kr/m/593)

2. 스큐어모피즘

2007년 아이폰과 함께 등장한 양식
실제 물건의 특징을 최대한 반영하여 사용자들이 기존의 실제 물건을 사용하던 그대로 디지털 화면에서도 어려움 없이 사용할 수 있도록 의도하였다.
(이미지 출처 : 나무위키)

3. 플랫 디자인

2013년 iOS7에서 처음 선보인 GUI 양식

스큐어모피즘은 실물과 유사한 모습으로 사용성을 높인다는 장점이 있지만 실물과 가깝게 표현하기 위해 디자인에 많은 시간이 필요하다는 맹점이 있다.
또한 사용자들의 인터페이스 조작 능력과 UI에 대한 이해도가 높아졌고 다양한 모바일 기기의 등장으로 다양한 크기의 화면에 반응할 수 있는 효율적인 디자인의 필요성이 커진 상황에서 등장하였다.

(이미지 출처 : 내 핸드폰)

4. 뉴모피즘

2020년 스큐어모피즘과 플랫디자인의 장점을 결합한 디자인 트렌드

시각적인 구분이 불명확하다는 플랫디자인의 단점을 실물의 입체감을 구현하는 스큐어모피즘의 시각적 효과를 통해 보완하는 것을 목표로 한다.

단순한 디자인이지만 그림자를 사용하여 대상을 구분하고 볼륨감을 부여하는 것이 특징이다.
(이미지 출처 : https://www.justinmind.com/ui-design/neumorphism)

5. 과제

요즘 내가 주로 쓰는 어플인 올리브영

눈에 띄는 요소

1. 장바구니 아이콘 위의 뱃지 표시
2. 내비게이션 바
3. 히어로 섹션

내비게이션 바 분석

🔗 참고 : https://m3.material.io/components/navigation-bar/overview

• 3-5개의 목표 지점 (destination)에 대한 접근을 제공한다.
• 하나의 내비게이션이 활성되어있어야한다.
• 편리한 접근을 위해 항상 화면의 하단에 위치한다.
  

✨ 좋은 점

1. FAB가 내비게이션 바를 가리지 않고 올바르게 위치한다.
2. 스크롤을 내리면 내비게이션 바가 없어지고 다시 올리면 생긴다. ➡️ 스크롤되는 내용을 더 많이 볼 수 있다.
3. 라벨과 아이콘이 무엇을 의미하는지 명확하게 보여준다.
4. 내비게이션이 비활성일 때는 아웃라인 아이콘 (Outline Icon)이고 활성화일 경우 색이 채워진 (Filled Icon)으로 변경된다.
5. 내비게이션을 선택하면 해당 화면으로 원활하게 바뀐다.

🛠️ 아쉬운 점

1. 아이콘 뒤에 활성화 표시를 하는 도형이 없다.
   (올리브영의 시그니처 색상 연두색 도형을 뒤에 넣어도 괜찮을 것 같다.)
   

2. 내가 커뮤니티 기능인 셔터 기능을 잘 안 써서 그런지 다른 내비게이션을 적용했어도 좋을 것 같다.
   (검색 기능 혹은 관심 브랜드 한 번에 보기 등)

🎙️소감

드디어 본 캠프가 시작했다!
OT를 하고 강의를 지급 받고 강의를 들으며 공부했다.
UX/UI의 개념에 대해서 제일 먼저 짚고 넘어가고 내가 요즘 주로 사용하는 어플의 화면을 보며 분석해보니 재미있었다.

사전 캠프때 디자인 가이드라인을 보면서 정리하는게 약간 귀찮기도 하고 그랬는데 디자인 가이드라인의 중요성을 좀 깨닫게 되었다.

❤️‍🔥다음 시간에 학습할 내용
디자인 씽킹
공감하기
문제 정의하기
아이디어 발산하기
프로토타입 만들기
테스트하기