[내일배움캠프] UX/UI 6기 Day 1 - 내가 자주 쓰는 서비스 뜯어보기

본 캠프 첫째날이다.

한 보름 정도 눈뜨고 싶을 때 눈뜨다가 갑자기 9시 전에 기상하려니까 힘들었는데 오늘 이후로는 빨리 적응해야지

 

사전캠프 때랑은 다르게 팀이 편성됐는데 이번에 만난 팀원들도 너무 좋은 것 같다.

본 캠프 팀명은 '힘순Z'

뭔가 힘을 숨기고 있다가 한 번에 발휘할 것 같은 느낌이랄까

 

아무튼 이제 본 캠프가 시작됐으니까 더 열심히 해봐야지

4개월이 길다면 길고 짧다면 짧을 텐데 바짝 정신차리고 공부해야겠다

 

---

강의 내용 요약

 

UI 디자인 👉 UI는 User Interface의 약자, 제품과 사용자 사이에서 소통할 수 있도록 하는 실체적인 수단이나 매개체

• 화면의 전체적인 구조와 시각적인 요소들을 디자인하는 것

UX 디자인 👉 UX는 User eXperience의 약자, 사용자가 어떤 제품이나 서비스를 이용하면서 느끼는 총체적인 경험

• UX 디자인은 주로 제품에서 어떠한 감정을 불러일으키거나 특정한 경험을 할 수 있도록 이끄는 것

UI 디자이너 👉 화면의 전체적인 구조와 시각적인 요소들을 디자인하는 사람

• 시각적인 요소를 활용하여 화면 간의 관계와 인터페이스의 구성을 디자인하는 것에 집중
• 주 업무는 레이아웃, 색상, 크기와 정렬, 컴포넌트라고 부르는 버튼, 아이콘, 이미지 등을 디자인

UX 디자이너 👉 사용자가 어떤 제품이나 서비스를 이용하면서 느끼는 총체적인 경험을 디자인하는 사람

• 사용자를 분석한 데이터를 토대로 편리한 경험을 이끌어내기 위한 일에 집중
• 주 업무는 유저 리서치와 테스트, 정보 구조 설계, 페르소나와 유저 시나리오 작성 등
• UI 디자이너보다 업무에서 조사와 분석의 비중이 큼

프로덕트 디자이너 👉 UI와 UX를 포함하여 제품 전반의 경험을 디자인하는 사람

• 요새는 다수의 기업, 특히 스타트업에서 UX/UI 디자이너를 아울러 프로덕트 디자이너로 부르고 있음
• 제품의 특정 부분이 아니라 사용자가 경험하는 제품의 시작과 끝 모두를 담당, 반복적인 개선을 통해 제품을 고도화하는 일에 집중
• 주 업무는 문제 정의, 가설 설정, 솔루션 도출, 테스트 등

👉 디자인 가이드라인  = 디자인 시스템 = 스타일 가이드
- 브랜드의 디자인 원칙과 컴포넌트별 규칙을 정의한 것
- 애플의 Human Interface Guidelines과 구글의 Material Design이 가장 대표적
-사용자 경험을 위해 인터페이스를 설계하는 기본 원칙을 배울 수 있음
-애플과 구글의 서로 다른 UX/UI 지침을 비교할 수 있음
-애플과 구글에서 제공하는 리소스를 다운받아 살펴보고 디자인에 활용할 수 있음

 

💡 디자인 가이드라인 장점

• 기업
  - 브랜드 아이덴티티를 강력하게 유지할 수 있음
  - 디자이너 간의 결과물의 수준을 상향 평준화할 수 있음
• 디자이너
  - 미리 정의된 컴포넌트를 재사용하면서 불필요하게 반복되는 업무를 줄이고 효율적으로 일할 수 있음
• 사용자
  - 원칙에 따라 디자인된 화면을 통해 일관된 사용자 경험을 얻을 수 있음

 

UX/UI의 변천사

 

- 리얼 메타포: 1990년대, IBM HCI 디자인팀에서 초보자들도 컴퓨터를 쉽게 이용할 수 있도록 실제 물건을 모방해 디자인한 것이 시초

- 스큐어모피즘: 아이폰과 함께 등장한 양식

- 플랫디자인: 2013년 애플이 iOS7에서 처음 선보인 GUI 양식

- 뉴모피즘: 2020년부터 스큐어모피즘과 플랫디자인의 장점을 결합한 디자인 트렌드로 떠오르고 있는 양식 중 하나

---

 

숙제 - 내가 자주 쓰는 서비스 뜯어보기

 

내가 고른 어플은 '스타벅스' 다.

 

실제 사용 중인 화면

 

눈에 띄는 요소 찾기

- 우측 하단의 Delivers 버튼

 

플로팅 작업 버튼(FAB)

- 화면에서 가장 중요한 액션에 FAB를 사용.

- 화면의 다른 모든 콘텐츠 앞에 나타나며, 등근 모양과 중앙에 있는 아이콘으로 알아볼 수 있다.

- 화면의 주요 동작을 표현하는 데만 사용

- 왼쪽, 중앙 또는 오른쪽에 정렬. 탐색 막대 위에 네비게이션 바 위에 배치하거나 막대 안에 중첩할 수 있다.

- FAB의 아이콘은 명확하고 이해하기 쉬워야 한다.

- 호버 시 텍스트 레이블이 있는 툴 팁을 표시해야 한다.

- 화면의 다른 곳에 있는 알림이나 작업이 포함되어서는 안된다.

- 접근성을 위해 FAB의 컬러 명암비는 3:1가 넘는 것이 좋다.

 

• 우측 하단의 초록색 Delivers 버튼은 플로팅 작업 버튼으로 처음엔 아이콘과 텍스트가 함께 있는 버튼이지만 스크롤을 하면 아이콘만 남고 텍스트가 사라지고 원형의 버튼이 된다.
• 바이크 모양의 아이콘으로 배달을 의미한다는 것을 명확하게 알 수 있다.
• 스타벅스의 새로운 서비스인 배달 서비스를 FAB를 이용해 눈에 띄게 알리는 점이 좋은 것 같다.