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

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

 

 

1일차 디자인 직무의 이해

디자인에서도 업무 범위가 있다 

 

서비스기획 - 디자이너 - 개발자 이렇게 구성되 있는데 

 

서비스 기획은 전략을 짠다고 생각하면된다

전략,서비스, 상품 기획과 리서치,스토리보드를 짠다고 보면 된다.

디자이너는 리서치와 와이어프레임 프로모션 디자인등을 한다 

개발자는 디자인을 퍼블리싱 하거나 스토리보드를 짠다.

 

직무별 디자이너의 업무에는 

웹다자인(GUI) / UI디자인 / UX디자인 / 프로덕트 디자인이 있고, 업무와 툴사용도 직무마다 다르다.

 

웹페이지나 이벤트 페이지, 제품페이지 등을 제작하는 웹 디자인

UI의 문제를 파헤치고 기획과 UI개선 구축등을 하는  UI디자인 

UI는 건드리지 않고, 사용자의 데이터를 수집 후 분석해 시나리오를 짜는 UX디자인

UI와 UX를 합친 프로덕트 디자인이 있다.

 

역시나 툴 사용도 가지각색인데  간략하게만 설명하면 

 

웹디자이너들은 그래픽과 코딩에 중점을 두기에 포토샵 피그마, VScode 를 이용한다  나에게 있어 제일 최적화된 포지션이기도 하다 

UI 디자이너는 UI 툴 - 피그마, 스케치 그래픽 툴 - 포토샵, 일러스트레이터 프로토타입 툴 - 프르토파이 등 이 있고,

UX 디자이너는 리서치에 중점을 둬 엑세과 파워포인트 피그잼, 프로토타입툴 등을 이용한다

그리고 모두 협업에 필요한 슬랙과 노션은 공동으로 사용한다.

 

---

디자인은 그리는 행위가 아닌 문제를 정의하고  해결하는 일이다 

가치있는 문제를 발견하고 정의하고 해결해 나가는 일을 한다

---

 

시대별 디자인의 의미?

 

미적 형태를 만드는 일 -> 비지니스에 맞게 설계와 구현 -> 서비스 이용시 경험을 변화시키는 작업으로 이어지고 있다

 

 

 

UX - User eXperience ux는 사용자의 관점에서 좋은 경험을 제시하는 절차

 

"사용자 경험이란 사용자가 어떤 시스템, 제품, 서비스를 직, 간접적으로 이용하면서 느끼고 생각하게 되는 총체적 경험을 말한다"

 

 

UIUX 디자인의 체계와 빙각의 일산

• 비주얼 디자인(GUI) - 표면층에 시각형태, 색채,표현방법 등 시각적 경험
• 사용자 인터페이스(UI) - 내용을 구성하고 배치 표현
• 인터랙션 디자인(IXD) - 사용자의 행동을 유도하고 실행, 피드백 제공 동적 경험
• 정보구조 및 흐름(IA, User Flow)
• 서비스(Content, Function)
• 전략 및 콘셉(Concept)

 

 

 

 

User eXperience는 ?
디자이너는 사용자가 어떤 생각을 하는지, 어떻게 행동 하는지, 어떤 감정을 느끼는지 알아야 한다

인지 - 동기, 목표, 고민, 갈등, 회상, 판단

행동 - 유입, 탐색, 비교, 선택, 인증, 활동, 보류, 공유, 저장

감정 - 좋아요, 싫어요,선호도, 믿음, 관심, 불안, 우려, 반발 가 있다.

<Engagement in software>의 사용자 경험의 단계를 알아보자 

 

Difficulty - UX 디자인이 나빴을 때 나타나는 감정 중 사용이 어려운 단계  ex) 로고가 어두워서 안보여요, 제품사진만 보고 어떻게 개봉하는지 모르겠어여, 버튼이 어디있는지 모르겠어요.

 

Anger - UX 디자인이 나빴을 때 나타나는 감정 중 가장 최악의 단계 ex) 못 써먹을 정도의 이용감과 불편함

 

---

 

Easy - 사용자 경험 단계 중에서 기본 단계인 사용자에게 쉽고, 편하고, 구매가 간편하게 하는 단계 ex) 타 경쟁 어플보다 사용하기 쉬웠어요

 

Pleasure - 사용자 경험 단계 중에서 두번째 단계인 사용자에게 유쾌하고, 상쾌한 경험을 주는 단계 ex) 보기 편안한 정도

 

Fun - 사용자 경험 단계 중에서 세번째로 높은 단계인 사용자에게 즐겁고 재미있는 경험을 주는 단계

 

Joy - 사용자 경험 단계 중에서 가장 높은 단계인 사용자의 습관을 바꿀 수 있는 서비스의 최종목표 ex) 에어팟 같이 이제는 없으면 안되는 것들 , 인스타 유튜브처럼 매일 들어가게 되는 프러덕트

 

이런게 JOY급 이제는 많이 사용하고 있는 프러덕트

 

 

 

 

---

 

UX 방법론이란? 

• UX 방법론은 문제 해결의 유형이다
• 사용자 경험에서 문제를 밝힌 다음 해결 방법을 디자인한다.

UX 방법론의 역할

• 사용자가 서비스를 쉽게 접근하고 명확하게 인식하도록 한다
• 서비스를 이용하면서 맥락에 맞는 흐름이나 예외를 설계하고 배치한다
• 사용자가 원하는 정보를 능숙하게 사용할 수 있게 한다.

UX 방법론  - Golden circle

 

   

Golden Circle 사이먼 시넥의 방법8
Why- 서비스를 왜 만들었을까? 존재이유 또는 신념
How - 목적을 실현하기 위한 행동(Why를 달성하기 위한 방법)
What - 결과물(How를 실현하기 위한 구체적인 기능 또는 기술)

 

 

 

 

 

 

 

 

 

UX 방법론  - 워터폴

 

• 1970년대부터 사용한 방법론으로 폭포수가 떨어지는 것 처럼 기획-> 디자인 -> 개발 등 프로세스가 순차적으로 진행된다
• 단계별로 팀으로 인식하고 다음 단계로 넘어하려면 최종 승인 과정을 거쳐야 한다
• 체계적이고 업격한 일처리 방식으로 각 단계별 문서 작업이 필수다
• 시간이 많이 걸리고 유연한 대처가 어렵다.

 

 

 

 

 

 

 

UX 방법론  - 더블 다이아몬드 

2004년 영국의 디자인 카운슬에서 개발했으며 확장과 수렴의 사고를 두번하는 반복하는 형태로 다이아몬드
모양이라고 해서 더블 다이아몬드라고 부른다

문제를 정의하고 해결책을 도출하는 과정이다.

 

 

 

 

 

 

 

 

 

UX 방법론 - 에자일 , Desigin thinking , 린 UX , 디자인 스프린트 등이 있다 

 

• 클라이언트의 요구에 유연한 대처가 가능하다
• 개발과 디자인이 긴밀한 커뮤니케이션으로 프로젝트를 빠르게 진행한다
• 계속되는 수정으로 업무 강도가 클 수 있으며 최종 파일 정리가 꼭 필요하다.

린UX

 

가설을 담은 프로토타입을 통해 해결하고자 하는 문제를 시장에서 직접 빠르게 검증하는 것이다
Think -> Make-> Check 단계를 반복한다
1단계 Think - 사용자 이해하기
2단계 Make - MVP 최소한의 기능만으로 만들어서, 가설을 최대한으로 검증하고, 제품의 방향을 결정
3단계 Check - 직접 사용자와 만나 피드백을 수렴하며 완성도를 높여간다.

 

 

 

 

 

 

 

UI - User Interface 서비스가 구체적으로 보여지는 형태와 정보의 배치 및 구성 / 눈에 보이는 것

사람과 사물 또는 시스템, 기계, 컴퓨터 프로그램 등 사이에서 의사소통을 할 수 있도록 일시적 또는 영구적
인 접근을 목적으로 만들어진 물리적, 가상적 매개체이다

 

- 스크린 기반의 User Interface -> 스마트폰, 컴퓨터, Tv등 시스템과 사용자 사이의 만나는 접점

- 물리적 제품 기반의 Pysical UserInerface (PUI) - 자동차의 핸들 , 페달, 스위치 등

 

UI의 변천사

Text User Interface -> Graphic User Interface (사용자가 편리하게 사용할수 있도록 알기 쉬운 아이콘으로 나타낸 것 ) 

-> Voice User Interface(음성을 통해 사용자와 소통하는 UI  시리 빅스비등 )

->Natural User Interface (생체인식 기술 : 지문/안면/ 홍채 인식 기술, 음성 인식, 제스처 인식, 시선추적, 터치리스 인터페이스 기술
)

 

---

UIUX용어

 

- 해상도 : 스크린의 선명도를 말한다

한 화면에 픽셀이 몇개나 포함되어 있느지 의미

 

-픽셀 밀도 : 밀도가 높을수록 좋다.픽셀에 몇개의 점이 들어가는지를 말한다 

- PPI(Pixel per inch) : 1인치 안에 들어가는 픽셀의 수

- DPI(Dot per inch) : 1인치 안에 들어가는 점의 수

 

 

해상도 분석 웹사이트
https://gs.statcounter.com

 

안드로이드, 데스크탑 이용률 등을 볼 수 있다 

 

 

이미지 저장 방식

비트맵 방식 - 픽셀로 이루어진 이미지로 확대하면 깨진다. ex) 포토샵
벡터 방식 - 점과 선으로 이루어진 이미지로 확대해도 깨지지 않는다. ex) 피그마,일러스트레이터

 

컬러 모드

RGB(Red, Green, Blue)- 가산혼합으로 빛을 섞을 수록 밝아지고 흰색이 된다. 홈페이지,앱 디자인 등 모
니터로 보는 디자인을 한다.(포토샵,피그마)

CMYK(Cyan, Magenta, Yellow, Black) - 인쇄디자인은 모두 CMYK로 한다. 감산혼합으로 물감을 섞을
수록 탁하고 어두워진다.(일러스트레이터)

 

 

그 외 좋은 툴

 

모바일 뷰포트 사이트
- 모든 웹사이트의 디바이스별 테스트하는 브라우저 기반 도구
https://lab.maltewassermann.com/viewport-resizer/

Viewport Resizer - Responsive design testing tool by Malte Wassermann

 

Human Interface design
iOS 디자인 가이드라인입니다

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

Design - Apple Developer

CSS Peeper
웹 사이트나 개별요소에 사용된 C SS를 확인하는 크롬 확장 프로그램이다.
요소사이 간격, 패딩, 폰트,색상,이미지 다운로드 등

https://chromewebstore.google.com/detail/css-peeper/mbnbehikldjhnfehhnaidhjhoofhpehk?hl=ko-KR

CSS Peeper - Chrome 웹 스토어