2주차 2_TIL UXUI 디자인 입문

< 3주차 강의 >

제품팀이란

📌 제품팀이란

◼ 제품을 만들기 위해 각자 다른 전문적인 능력을 갖춘 사람들이 모인 팀

◼ 제품관리자(PO,PM) 1명, 디자이너 1명, 엔지니어 2명이 최소조건

📌 목적조직 = 제품팀과 같다 = 스쿼드, 사일로

◼ 목적을 달성하기 위해 다양한 직무의 사람들이 모인팀 

◼ ex) 대출, 카드팀, 예/적금팀, 기획자·디자인 ·개발자 등이 포함

📌 기능조직

◼ 유사한 직무끼리 구성된 팀

◼ ex) 기획팀, PO/PM팀, 디자인팀 : 각자의 전문 분야에 깊이 논의할 수 있다. 전문성 높일 수있다.

→회사에 따라서 목적조직을 만들지 않고 기능조직만 만든 상태에서 필요시에만 목적조직을 만드는 경우도 있다. 

📌 매트릭스 조직 = 기능조직과 목적조직의  장점을 모두 가져간다.

◼기능조직과 목적조직이 교차된 형태 

◼ 목적 조직 형태로 일하면서 전문성도 기능조직으로 보완한다.

 

제품팀이 일하는방식

📌 린스타트업

📌 애자일 (=날렵한, 민첩한) 

◼ 1~4주 안에 완성되도록 한다.(스프린트)  빠른 시장 변화에 맞춰 빠르게 테스트 한다.

◼ 설계 → 디자인 → 개발 → 테스트 (스크럼)

 

UXUI 실무 프로세스 

📌  기획 : 문제정의, 아이데이션, 프로덕트 스펙 문서 작성 

📌  디자인

📌  개발 

 

<4주차 강의>

디자인 툴

◼  인터페이스 디자인 툴 : 피그마, 스케치, XD

◼ 그래픽 디자인 툴 : 포토샵, 일러스트레이터

◼ 3D 그래픽 디자인 툴 : 시네마 4D, 블렌더 

◼ 모션 그래픽 디자인 툴 : 프리미어, 애프터이펙트 

 

비트맵과 벡터의 이해 

📌 비트맵 

◼ 픽셀 : 디지털 이미지를 구성하는 최소 단위의 점 

◼ 비트맵 이미지 파일 확장자 :  jepg, jpg, png, gif

◼ 픽셀 수가 많아질 수록 용량이 커지고, 이미지 크기 편집 시 픽셀 수가 변해 이미지가 깨진다. 

📌 벡터이미지 

◼ 좌표가 적힌 텍스트 파일로 저장, 좌표계(x,y)의 점으로 표현하기 때문에 이미지 크기 바꿔도 손상가지 않음. 

◼ svg, eps, ai 

◼ 색표현에 한계가 있다. 복잡한 이미지를 하면 용량이 매우 커질 수 있다. 소수점이 안나오록 정수로 작업하도록 노력필요.

 

피그마, 스케치, XD

◼ 모두 벡터 기반 그래픽 편집, Lo-fi(간단한)프로토타이핑 기능 있음. dev mod를 통한 그래픽을 파일 그대로 코드를 변환할 수 있다. → 엔지니어와 협업이 용이

◼ 피그마 : 클라우드 기반(클라우드에 파일 저장, 인터넷이 가능한 곳에 언제든지 사용가능), 멀티 플랫폼 지원(데스트톱 설치 및 브라우저 동시 사용가능) 

프로토타이핑 툴 

◼  Lo-fi(Low fidelity) 프로토타입: Fidelity-정확도, 충실도 / 와이어프레임 수준으로 움직임을 구현

◼  Hi-fi(High fidelity) 프로토타입  : 최종 제품과 유사한 수준으로 구현

◼  인터렉션 디자인 : 사용자가 제품을 사용하면서 반응을 주고받는 것,  사용자가 제품을 사용하면서 적절한 반응을 주고받고 막힘없이 서로 간에 소통하는 것을 돕습니다. ex) 로딩 아이콘 

📌  프로토파이 툴 : 코딩 없이 실제 제품과 비슷한 수준의 프로토타입을 만들 수 있다는 것이 큰 장점, 코드를 잘 모르더라도 다양한 애니메이션과 인터랙션을 구현하고 싶은 경우

◼ Hi-fi 수준 기능

◼  Conditions (조건부 트리거) : 내가 입력한 값을 기억해서 실행

📌  프레이머 : 코드 기반으로 실제 제품과 가장 유사한 수준으로 프로토타입

◼ 디자인부터 프로토타이핑까지 한 번에, 실제 제품으로 배포 가능 

◼ 재사용성 : 코드 재사용성, 컴포넌트 재사용성 (특정애니메이션, 조건을 코드로 공유) 

◼ CMS : Content Management System, 콘텐츠 관리 시스템, 혼자서 시장제품 만들고 싶을때(디자인과 개발 모두) 

 

<5주차 강의>

디자인 원칙

📌게슈탈트 심리학 : (유사성의 원칙, 근접성의 원칙, 폐쇄성의 원칙, 연속성의 원칙, 공통성의 원칙) 

📌 uxui 심리학 법칙

◼  제이콥의 법칙 

◼ 피츠의 법칙 : 사용자가 인터랙션해야 하는 대상은 거리가 가깝고, 크기가 커야 사용성이 좋다는 뜻 

ex) 쉽게 터치 할 수 있어야 한다. 오른 엄지손가락이 가장 잘 닿을 수 있는 위치(Thumb zone)

◼  힉의 법칙 : 선택지가 늘어나면 시간이 걸리고 사용자가 이탈할 확률이 커진다. 인지부하가 생김.

- ⭐ 인지 부하의 한계점을 넘어가는 순간 사용자는 이탈

- 선택지 개수 최소화, 복잡한 작업은 더 작은 단계로 나누기, 정보양이 지나치게 작아도 인지부화생김, 선택지 추천 

◼  밀러의 법칙 :

- 보편적으로 무언가를 기억할 수 있는 정보의 덩어리가 7(±2)개

- 개수가 아니라 정보 덩어리 (그룹핑이 중요하다!) 

 

기업의 디자인 원칙

◼ 기업과 제품의 비전을 공유

◼ 공통된 느낌을 주는 일관된 원칙을 제시

◼ 심미적인 UI와 인터렉션을 구현하는 동시에 사용성을 지키는 방법을 안내

◼ 의사결정 기준이 되고 시간을 절약

<6주차 강의>

레퍼런스 분석

1. 화면 구조 분석 : 파운데이션 → 엘리먼트 → 모듈 → 페이지

2. 디자인 원칙 기반 분석 : 주장과 그에 알맞은 논리적인 근거를 찾는 것/게슈탈트 심리학, UX 비주얼 디자인 원칙, UX/UI 심리학 법칙, 기업의 디자인 원칙

3.  인사이트 정리하기 : 그룹화해서 정리, 개선점 찾기 

UX/UI 디자인 패턴 

◼  온보딩 : 서비스를 처음 만나는 사용자가 기능을 잘 이해하고 가치를 느낄 수 있도록 돕는 과정 

- 시장에 나와 있는 앱은 평균적으로 앱 설치 후 3일 이내에 DAU¹의 77%가 이탈

1) 튜토리얼 : 화면애 앱 설명 넣는 방식, 사용자의 행동을 제한하고, 흥미를 떨어뜨려 추천 안함.

2) 가치 보여주기 : skip 기능을 제공, 자동으로 넘어가도록 구성, 동영상으로 구성도 추천 

3) 개인화 설정하기 : 개인 맞춤 정보를 제공할 수 있도록 몇 개의 카테고리와 선택지를 주고 정보를 입력하게 하는 방법

◼ 로딩 

- 스피너 아이콘 혹은 애니메이션 활용

- 프로그레스 바  : 진행사항을 게이지 형태 바로 보여주는 것 

- 스켈레톤 : 불러오는 화면의 빈 버전, 회색박스, 실제 페이지를 예측, 실제화면을 더 느리게 하면 안된다.

◼ 검색 : 결과 보여줄 수 없을 때 다른 행동 유도 (콘텐츠 추천, 다른키워드 추천)

- 기본 검색 화면 : 검색의 중요도에 따라 위치와 크기가 다른 것에 주목

-  연관 상품 추천 / 연관 검색어 노출

- mpty view: 검색 결과가 없을 때 

◼ 회원가입

◼ 리스트 

◼ 카드

◼ 캐러셀

핀테크/금융

◼ 국가, 금융 기관의 법과 정책의 영향, UI에 대한 구체적인 가이드라인과 화면에 심의가 있다.

◼ 핀테크/금융은 여러 앱을 동시에 비교해 보는 걸 추천

◼ 핀테크 : 토스, 네이버페이, 카카오페이

◼ 은행사 : 금융(신한은행), 인터넷(카카오뱅크), 저축은행(ok저축은행)

◼ 금융기관(카드사, 증권사 보험사) : 현대카드, 나무증권, 삼성화재

👩‍💻 아래의 기능들을 한 번 살펴보세요

• 금융자산 연결
• 자산/소비 분석
• 신용대출 비교 

콘텐츠

◼ 각 종류의 특성에 따라 제품의 차이가 크다

👩‍💻  콘텐츠 제품을 분석할 때는 사용자를 떠나지 않고 제품에 오래 붙잡아 둘 방법에는 어떤 것들이 있을지, 이러한 관점으로 콘텐츠 도메인을 분석

커머스

◼ 제품의 지표, UX/UI가 상품으로 인한 영향을 크게 받음.

◼ 커머스는 상품 탐색 → 구매로 이어지는 사용자 여정에 집중

---

📌  UXUI 디자인입문 3주차강의 숙제, 4주차 강의 숙제 완료 

---

📌  2주차 과제 :  [11번가 App] 문제 정의, 솔루션 도출 

- 쿠팡, 네이버, 지마켓, 알리익스프레스 홈화면 서치 함.