[유데미x스나이퍼팩토리] UI/UX 포트폴리오 과정 2기 - 사전직무교육 2일차 UX - User eXperience / 피그마

본 후기는 본 후기는 [유데미x스나이퍼팩토리] UI/UX 포트폴리오 과정 2기(B-log) 리뷰로 작성 되었습니다.

 

오늘은 UX에 관한 개념을 듣게 되었다.

사용자의 경험을 바탕으로 개선안을 찾는 방법이라 할 수 있다.

 

서비스를 이용하며, 각자의 서비스에 대한 생각과 경험을 지니고있는 사람들을 사용자라고 일컫는다.

페르소나도 비슷한 유형이다.

 

사용자의 경험은 연령, 성별, 시간, 장소, 맥락에 따라 다양하다.

 

예를 들어 , 뱅킹 이용시 누구는 돈을 보내기 위해 가입했고, 펀드를 위해 가입했고, 적금 상품을 알아보고 가입했다 등이 있다.

 

경험요소는 What 과 How로 구분된다 

 

What - 어떤 은 정보 기능 형태를 말한다. 약간 눈에 보이는것들이고

How - 어떻게 는 이용과정, 절차, 안내를 말하면서 추상적인것들로 보면 될 거 같다

 

ex) 네이버 지도
What - 위치찾기, 이동 경로, 추천경로, 저장 ,닫기
How - 거리안내 , 소요시간안내 

 

 

---

UX 피라미드 - 사용자 경험을 6단계로 나눌 수 있다 

https://semanticstudios.com/user_experience_design/

 

1. 유용성(Useful)
2. 신뢰성(Reliable)
3. 사용성(Usable)
4. 편의성(Convenient)
5. 감성적인(Pleasuable)
6. 의미성(Meaningful)
   
   

 

1. 유용성(Useful)

사용자가 원하는 목적을 달성할 수 있도록 유용한 기능과 정보,서비스를 제공하는것

What과 How중 What에 해당 - 기능 정보

 

CTA(고객의 행동을 유도하는 행위를 의미하는 Call To Action)를 배치

관련기능과 쉽게 연관되는 버트을 만드는 것

중지, 건너뛰기 기능

필요할 때 필터링 기능 

 

ex)쿠캣은 필터링 기능으로 신상품순/ 높은 할인순/후기 많은 순 등 섬세한 설계를 살펴 볼수 있다.

지도만 제공했을 때 보다 훨씬 더 유용함을 전달한다.

 

2.신뢰성(Reliable)

시스템 오류가 없고, 보안이 철저하여 서비스를 믿고 쓸 수 있게 하는 것.

최신의 콘텐츠, 믿을 수 있는 데이터 관리, 사용자의 행동을 지원하는 화면 등

 

ex)쿠캣의 제품 사용 후기로 안심하게 선택할 수 있도록 한다.

 

3. 사용성(Usable)

제품을 사용하는데에 불편함이 없는 "쉽고 직관적이다"이다

사용자가 원하는 정보를 빠르게 찾을 수 있고,원하는 목적을 자연스럽게 달성하도록 흐름을 만든다

 

ex) 카카오뱅크는 이체 전 받는 계좌와 금액을 다시 확인하고 비밀번호 확인을 거친다
원래 화면 하단에 모달형태(dimmed page)로 표시하여 흐름이 끊기지 않게 한다.

 

4.편의성(Convenient)

쉽고 직관적인것을 넘은 편리함

사용자가 목적을 달성하는 노력을 줄여 주거나, 기대에 충족하거나 개인화/추천/즐겨찾기/SNS기능

 

ex) 마이리얼트립의 항공권 예상 가격
카카오택시 항공권 조회 필터링

5. 감성적인(Pleasuable)

 

   

CU 아이콘 애니메이션 같이 흥미와 재미를 전달하는 애니메이션,아이콘 , 짧은 문구

 

감성은 현재의 경험 요소들을 매력적으로 만들어 서비스를 사용하는 데 즐거움을 주는 것이다
서비스를 이용하면서 느끼는 고충과 니즈에 기반한 감정들.
서비스가 좀 더 매력적이고, 사용자들이 재미있게 느끼게 하는 것이 목적

 

ex)
재미있는 애니메이션
고해상도 이미지

제스처 명령
소리 상호작용
사용자에게 오류가 발생한 경우 지침

 

 

 

 

 

 

 

 

 

 

 

6. 의미성(Meaningful)

 

사용자에게 어떠한 가치를 제공하여, 단순 기능성이나 일회성으로 제공하는 것을 넘어 지속적으로 참여하도록 만드는 것이다

 

#자주 사용 #적극적 참여 #마음을 움직이는 #일상에 스며드는 

 

ex) 카카오톡의 생일인 친구 등등

 

---

 

피그마 

 

 

이동 툴 (v)

 

스케일  툴(k) - 모든 크기를 조정할 수 있다. 다만 소수점이 나오니 유의하자?

오브젝트 크기를 비율에 따라 조정, 폰트 블러 테두리를 한번에 빠르게 조정   

 

색션툴( shift + s) - 아이디어 , 프레임을 그룹핑

 

슬라이스 툴 (s) - 특정영역만 내보내기 할 때 사용

 

스포이드 툴(i)

코멘트(c) - 문자를 남김

커서 채팅 (/) - 채팅기능이며 자동으로 사라짐

 

 

프레임 툴 (f)- 그냥 시작이라고 생각하자. 또한 웹과 앱의 사용자 경험을 테스트하고 프로토타입을 만드는데 매우 유용

 

프레임 크기 조정

W/H -에 사칙연산으로도 가능하다

프레임 모서리 둥글게(개별 둥글게도 가능) 와 프레임 색상 채우기 

 

프레임 밖의 오브젝트 감추기
<Layout>- <Clip content> 로 프레임 밖의 오브젝트를 감출 수 있다 ex) 사진이 프레임 밖으로 삐져나오는거 안보이게 해주는거 

근데 사진크기만큼 프레임을 맞추고 싶다?

 

Resize to Fit
프레임 안에 있는 컨텐츠 크기에 맞게 프레임의 크기 조정을 빠르게 한다
단축키 <Cmd+Shift+Opt+R><Ctrl+Shift+Alt+R>

 

프레임 크기만 변경
프레임 안의 오브젝트는 그대로 두고 프레임의 크기만 변경 - <Cmd>를 누르고 프레임을 드래그

 

프레임 속성

Corner radius – 프레임의 모서리를 둥글게 만들 수 있다.
Clip content – 프레임 밖의 오브젝트를 감출 수 있다.
Constraints - 프레임 안의 오브젝트를 통제할 수 있다.
Position - 프레임이 절대 좌표로(absolute) 기준점이 되어 프레임 안의 하위 요소의 포지션 설정이 가능
Resize to fit- 프레임의 크기를 자식 요소 크기 만큼 재설정 할 수 있다.

Nested Frames - 프레임 안에 프레임을 중첩해서 만들 수 있다.
Fill – 프레임에 단색, 그레디언트, 이미지,비디오 등 채우기를 할 수 있다.
Scroll Prototype – 카드가 옆으로 슬라이드 되는 프로토타입이나 프레임 안의 지도가 가로,세로 방향으로 스크
롤 되는 기능인 스크롤 설정이 가능(프로토타이핑에서 배웁니다)

 

프레임 vs 그룹 

- 그냥 이제부터 디자이너 소리 듣고싶으면 그룹 쓰는거 자제해;;;;

 

 

폰트 font

 

타이포그래픽 - 웹폰트

 

접속한 웹사이트에 사용한 폰트가 컴퓨터에 없어도 폰트가 화면에 표시된다. 이 방식을 웹폰트 또는 폰트 임베디드
라 한다
서버에 있는 폰트를 브라우저에 출력되는 형태이며 브라우저마다 지원하는 폰트의 형식이 다릅니다. 항상 확인이
필요하다
https://www.w3schools.com/Css/css3_fonts.asp

W3Schools.com

 

 

우수한 접근성 + 효과적인 메세지 전달 + 검색 최적화 + 쉬운 텍스트 수정 = 웹폰트

 

웹폰트 최적화는 -> 서브셋인 폰트를 사용해라 서브셋 폰트는 요량을 줄이기 위해 현대에 쓰이지않는 조합을 제외함

 

폰트 포맷

True Type Font
- 가장 오래된 폰트 파일 형식으로 맥과 윈도우에서 모두 사용할 수 있다. 로딩 속도가 빨라 그래픽 작업보다는 일반 문서 작업에 주로 사용한다.

Open Type Font
- 어도비와 마이크로소프트사에서 만든 폰트 형식으로 섬세한 작업으로 그래픽 디자인이나 인쇄에 사용한다.

Embeded Open Type
- 마이크로소프트사에서 웹에 사용할 목적으로 만들어진 글꼴 형식으로 익스플로러만 지원해서 맥에서는 글자가 깨져 보인다.

 

Web Open Font Format
- 웹에 사용할 목적으로 만들어진 글꼴 형식으로 거의 모든 브라우저에서 사용가능하다.
- 압축이라 용량이 가벼워 다운로드 속도가 빠르다.

Scalable Vector Graphics
- 벡터 형식의 글꼴 형식으로 웹과 모바일에서 사용하기 가벼워 최근 많이 사용한다.

---

문자 툴 (t)

 

 

1. 폰트 패밀리
2. 두께와 스타일
3. 크기(cmd+shift+ >)
4. 행간(opt+shift+ > )
5. 자간 (opt+ >)         이 둘을 %로 
6. 가로 정렬
7. 세로 정렬
8. 셋팅

 

행간 자간은 다른 디바이스에서도 %로 해놓으면 글자크기와 상관없이 일정하게 띄어주니 %로 해라 그냥! 

 

 

 

 

 

 

 

 

혹은 라인쪽 더블클릭

 

 

Outline Stroke
일러스트레이터의 <Create outline>과 같이 패스로 완전하게 만드는 기능

단축키는<Cmd(Ctrl)+Shift+O> 
문자를 패스로 만들고 싶을 때 사용하며, 글자가 패스로 되고 그룹으로 묶는다.

도형을 불린으로 했을 경우 Flatten처럼 하나의 패스로 합쳐서 수정을 할 수 없다

 

웹사이트 글자 크기
사용자의 연령을 고려하여 글자의 크기를 정한다
본문 크기를 먼저 정한다. body 14~18
가장 작은 글자 크기를 정한다.
10px이하로는 크롬 브라우저에서 랜더링 되지 않는다.

 

폰트를 찾아주는 사이트

 

산돌 폰트를 찾아줘 https://www.sandollcloud.com/what-the-fon

어도비 폰트 검색 https://fonts.adobe.com/fonts/vs/uploa.

My Font(영문)  

https://www.myfonts.com/pages/whatthefont

WhatTheFont Font Finder - Identify Fonts by Image

 

컴퓨터에 이미지 가져오기 단축키

 

cmd + shift + k

 

다중으로도 이미지를 가져올 수 있고 드래그 하면된다 

 

Crop Image 

이미지를 선택하고 Opt + 더블클릭 혹은 이미지 아이콘 선택

 

PNG 복사 copy properties 는 Cmd+shift+C / Cmd + Opt +C

 

 

Font Hierarchy 폰트 위계

폰트 계층 구조 

 

글꼴, 글꼴 두께 및 문자 간격을 사용하여 일관된 디자인을 만든다

사용자가 빠르게 정보를 찾을 수 있도록 한다.

 

Text type
제목 Heading
부제목 Subheading
본문 Body
캡션 Caption

 

제목 폰트
제목용 폰트는 사용자에게 다양한 감각과 분위기를 전달합니다. 사용자의 눈을 사로잡아 본문으로 유인하는 기능을 한다
유저의 연령대, 성별 등 고려하여 신중하게 선택한다.

산세리프체
- 현대적인 느낌과 실용적이고 감각적으로 보인다.
세리프체
- 부드럽고 우아함이 담겨 있다.
스크립트체
- 직접 손으로 쓴 것처럼 친근하며 다정하다.

 

폰트 패밀리

콘텐츠를 조직적인 방식으로 제시하여 사용자가 매끄럽고 직관적인 경험을 할 수 있도록 도와준다
사용자가 제목과 단락 사이의 관계를 즉각적이고 무의식적으로 파악하면 텍스트를 빠르게 스캔하고 관심 있는 부분을 선별하여 해당 내용에 집중할 수 있다.

 

폰트 크기 

 

디바이스에 따라 폰트 크기를 다르게 정한다 -> 다음daum 같은경우 본문크기가 모바일이 더 크다 

본문 크기를 기준으로 정하고 타이틀과 서브 타이틀 등 정한다 

 

폰트 두께

 

글꼴의 두께에 달리해서 중요 요소를 빠르게 인식

 

 

한글폰트 추천 - 본문 고딕
프리텐다드 https://cactus.tistory.com/306
스포카한 산스 https://spoqa.github.io/spoqa-han-sans/ko-KR/
지마켓 https://corp.gmarket.com/fonts/
Noto Sans KR https://fonts.google.com/noto/specimen/Noto+Sans+KR
나눔 스퀘어 / 나눔스퀘어 네오 https://hangeul.naver.com/fonts/
S-Core Dream https://s-core.co.kr/company/font2/
수트 https://sunn.us/suite/
원스토어 https://www.onestorecorp.com/sv/fordev_font/

한글폰트 추천 - 세리프
 Noto Serif  https://fonts.google.com/noto/specimen/Noto+Serif+KR?query=noto+serif
 고운바탕 https://github.com/yangheeryu/Gowun-Batang
 경기천년 https://www.gg.go.kr/contents/contents.do?ciIdx=679&menuId=2457
 제주명조 https://www.jeju.go.kr/jeju/symbol/font/infor.htm
 리디바탕 https://ridicorp.com/ridibatang/
 마루부리 https://hangeul.naver.com/
 카페24 고운밤 https://fonts.cafe24.com/
 마포꽃섬 https://www.mapo.go.kr/site/main/content/mapo04010201
 을유1945 http://www.eulyoo.co.kr/member/font.html
 아리따부리 https://www.apgroup.com/int/ko/about-us/visual-identity/arita-typeface/arita-
typeface.html

 

 

 

 

 

컬러의 역할

기능을 위한 색상과 정서를 위한 색상의 역할을 한다

 

기능을 위한 색상 - 시스템 아이콘, 헤드라인 제목, 정보의 위계, 마케팅적 요소, 링크 유도

정서를 위한 색상  - 로고 색상 , 히어로 이미지, 브랜드 아이콘, 버튼

 

컬러 가이드

(프라이머리) 브랜드 컬러

 

Brand color - 특정 브랜드를 떠올렸을 때 자연스럽게 연상되는 색상

 

마켓컬리는 보라, 네이버는 초록, 카카오는 노랑색 등 브랜드 컬러를 먼저 선정한다

브랜드 컬러가 정해졌다면 다음으로 Secondary color를 선정한다
위계에 따라 브랜드 컬러가 가장 먼저 눈에 띄도록 한다
바디, 오버라인, 캡션, 툴팁 등에 사용한다.

 

 

시멘틱 컬러

Semantic Color – 의미적인 상황이나 요소를 전달하는 컬러

 

잘되면 파랑 , 안되면 빨강 등등

 

Grayscale - 타이포에서 그레이 컬러가 많이 사용됨

 

 

컬러 비율

색 구성 비율의 균형을 조화롭게 맞추는 공식, 60-30-10 법칙
60%(배경) 30%(보조배경) 10%(강조색)
주제색(Primary Color): 주인공 역할을 하는 색, 브랜드 컬러(Brand Color)
강조색(Accent Color): 강조하는 역할을 하는 색
배경색(BG Color): 바탕, 백그라운드(BG, Background)에 사용하는 색
보조색(Sub Color): 보조적인 역할을 하는 색

 

 

60:30:10 법칙 사례

앱 디자인을 보면 배경색으로 흰색 60%, 보조색으로 검정색 30%, 강조색 10% 정도로 주황색 적용
29cm의 주제색인 브랜드 컬러(검정)가 보조색으로 사용되었다
브랜드 컬러가 보조색의 역할로 적용될 수 있다

 

행동 유도성

 

CU나 GS에서 무엇인가를 살때 구매하기 버튼만 특별한 색을 통해 행동 할 수 있게 유도한다.

 

 

---

---

자 오늘의 중요 내용 

제이콥 닐슨 그룹의 10가지 휴리스틱 평가 원칙

 제품 상태의 가시성
 제품과 사용자 현실 세계를 반영
 사용자에게 자유와 주도권 제공
 일관성과 표준성
 오류 방지
 보는 것 만으로도 이해할 수 있는 디자인
 유연성과 효율성
 심미적이고 단순한 디자인
 사용자가 오류를 인식하고 진단하고 복구할 수 있도록 지원
 도움말과 설명서

 

 

 

1. 제품상태의 가시성

서비스 상태에 대해서 알려주고 있는가?

ex) 로딩 애니메이션이나 장바구니가 비었으면 나오는 사진들 등

배민 장바구니 비웠을 시

 

2. 제품과 사용자 현실 세계를 반영 

 

실생활에서 늘 사용하는 용어와 이미지인지? 

ex) 휴지통인데 휴지통 아이콘이 아닌것 등

3. 사용자에게 자유와 주도권 제공 (실행한 후)

 

사용자에게 주도권을 주고 있는지  ex) 카카오뱅크의 계좌 순서 변경 

사용자가 실수 했을 때 취소나 재실행을 할 수 있는가
사용자가 선택한 행위를 쉽게 취소할 수 있는가
사용자가 원하는 컨트롤을 자유롭게 할 수 있는가? (스크롤 자유성)

 

ex)Back 버튼 - 이전 페이지로 이동
이체 취소 버튼 등 사용자가 취소 또는 중단을 할 수 있다.

 

4.일관성과 표준성

 

페이지마다의 배치 및 스타일이 어느정도 일관성이 있어야겠죠?

색상 스트링 폰트 컨트롤 동장방식 등등 

제 1일차 후기만 봐도 일관적이지 않죠?

 

a. 일관성 있는 이름 : 메뉴나 명령어,약자가 일관성 있게 제시되는가

b. 일관성 있는 정보 : 메뉴,제목,페이지,에러메시지 등이 일관성이 있는가

c. 일관성 있는 구조 : 입, 출력창의 구조가 화면마다 비슷한 구조를 가지고 제공되는가?

확인,취소,도움말 등 중요 버튼의 위치가 일관성이 있는가

d.일관성 있는 표현 : 아이콘,스타일,색감,컨셉의 일관성이 있는가?

 

5. 오류 방지 (실행하기 전)

 

구독 해지 or 나가기 등 한번더 물어볼때 글씨 색상 등등 차별화를 둬서 오류 방지하기 

 

오류를 범할 확률 낮추기 : 헷갈리는 문자,혼동되는 데이터 등
 오류를 범하기 쉬운 것은 보여주지 않기 : 현재 상태에서 가능한 행동만 보여줌
 심각한 오류를 범하기 힘들게 하기 : 결과 경고, 기능키나 버튼의 위치 차별화, 재확인 등
 예상되는 결과 보여주기

 

 

6. 보는것만으로도 이해할 수 있는 디자인 

 

기억하지 않고 바로 눌러서 사용할 수 있어야 한다.
ex)마켓컬리의 최근에 본 상품

 

7. 효율과 유연성

불편할 경우 대안이 있는가
전문성에 따른 유연성 : 숙달될 수록 복잡한 명령 사용,많은 정보 제)
옵션의 제공 : 같은 작업이라도 여러 가지 방법으로 수행할 수 있는가
개인화 : 사용자가 시스템을 자신에게 편리하게 재구성할 수 있는가 (메일함에서 순서 변경)
신속한 수행 방법 : 계층 구조와 관계없이 즉시 사용해야 하는 기능이 있는가 (커뮤니티 앱에서 바로 글쓰기 기능이 보이는것 )
자동적인 수행 제공 : 기계적인 반복 작업을 대신 처리해 주는가?

 

개인화

 

 

8.심미적이고 단순한 디자인

 

디자인적으로 완성도가 있나?
1. 최소한의 표현 - 색상,폰트, 도형 ,크기 등 많지 않나?
2. 심미성 (아름다움을 느끼는 미적 의식) - 색상 도형 서체 가독성 배치와 정렬에 대한 조화

3. 최소한의 입력 요구 - 사용자가 귀찮게 느끼지 않게 너무 많은 동작을 요구시키게 하지마라 제발!! 주절주절 아주그냥 ;;;;

 

"보기 좋은 디자인을 사용성이 더 뛰어난 디자인으로 인식한다. 보기좋은 디자인은 사소한 문제에 관대해진다."

 

ex) 회원가입 화면 이나 로그인 화면 <완전단순>

 

 

9. 사용자가 오류를 인식하고 진단하고 복구할 수 있도록 지원

 

페이지가 없을 경우 404페이지를 만들어준다
회원가입시 사용자가 오류를 빠르게 인식 할 수 있도록 한다. 

404화면이나 비밀번호를 입력하지 않을시 빠르게 인식하고 먼저 알려주기

 

10. 도움말과 설명서 

 

도움말 제공 : 상황 파악, 따라하기 쉬움, 대안 제공
도움말의 표현 : 눈에 잘 띄는가? - 잘 보이는곳에 배치
이해하기 쉬운 표현인가?
글과 그림을 적절히 사용했는가
작업 전환의 용이함 : 원래 작업과 도움말 간의 전환이 쉬운가? - 다른페이지에서 도움페이지 보여주다 다시 뒤로가기 킹받음 

 

요즘 문의사항 전화 죽어도 안받으니까 이런거 잘 만들어놔서 답답함을 해소시켜야함 진짜 ㄹㅇ;;;

챗봇이나 도움말,설명서등을 잘 만들어놔야한다 

 

 

---

UX 기본 5가지 

 

동기 행동 고충 태도 니즈 

 

1. 동기 = 서비스를 이용하는 이유

동기는 목적의식동기  & 비목적의식동기 로 나뉜다

 

비목적의식적 동기는 습관성이나 심심해서 들어가게되는 게임이나 SNS등이 있다 ex) 유튜브, 인스타

 

목적의식적 동기 - 금융 교육 업무 생상선 구매 관련 서비스등이 있다 ex) 송금을 위해 카카오뱅크를 사용하는 듯 한 느낌

 

2. 행동 = 사용자가 어떻게 서비스를 이용하는지, a-앱을 실행해서 b-알람이 떠서

 

3. 고충 = 사용자들이 서비스를 이용하는데 다양한 불편함과 고충을 느낀다.

고충해결은 엄청 중요!! 리뷰남기는건 최악의 단계이다

 

4. 니즈 = "고충은 아니지만 있으면 좋겠다" , 트렌드와 신기술에 민감하고, 만족을 높여야하는 UX구성요소

 

5. 태도 = 사용자가 서비스를 이용하는데 있어 긍정적 부정적 신호이다