[내일배움캠프_UX/UI] 2주차 화요일 TIL

TIL (Today I learned)

 

 

🙄 오늘 나는 무엇을 했나요

오늘은 어제 못한 과제부터 2주차, 3주차, 4주차까지 과제 잔치였다.

그래도 빠르게 빠르게 진행해서 과제를 다 완료할 수 있었다.

점심 전후로는 국취제 상담을 다녀왔다.

빠진 시간을 채우기 위해 오늘은 나머지 공부를 해야한다.

일단 강의를 빠르게 듣고, 과제를 다 하자는 마음으로 열심히 달려서

배운 내용들 정리와 복습을 해야한다.

그래도 오늘 목표가 강의 다 듣는 거였기 때문에 다해서 뿌듯하다.

심지어 중간에 외출이 있었음에도 9시 전까지 다 했다니 정말 뿌듯 그 잡채.

여유롭게 마음 편하게 강의 내용을 정리할 수 있을 것 같다.

😰 오늘은 어떤 문제를 겪었고, 앞으로는 어떻게 해결할 것인가요

2-3주차 과제가 생각보다 어려워서 시간이 오래걸렸던 것 같다.

말이 쉬운 것 같으면서 애매해서 헷갈렸다.

머리를 계속 데굴데굴 굴리면서 어떻게 써야하나 고민을 많이 했다.

예시라도 있으면 좋겠다 싶어서 다른 사람들의 블로그를 보면서

과제를 어떻게 했는지 참고했는데 그게 도움이 되었다.

그 중에 어떤 분은 나처럼 헷갈렸는데, 튜터님께 가서 직접 물어보셨다!

오... 그런것도 질문해도 되는구나 싶으면서

아직도 튜터님들한테 질문하러 가는 길이 무겁고 어렵기만 하다.

지난번 팀원분이 혼자서 다른 튜터님께 가서 피드백을 받아오셨다.

오... 저런 방법도 있었구나 싶으면서

역시 난 질문 쉽지 않아.

나도 빨리 튜터님께 첫 질문하는 날이 오길 바란다.

앞으로 모르는 게 있으면 튜터님께 용기내어 가보자...!

🧐 오늘은 어떤 것을 배웠나요

3주차 강의는 실무 프로세스를 배웠고,

4주차 강의는 디자인 툴들에 대해 배웠다.

자세한 내용들은 아래에 차차 추가하며 채워나갈 계획...

 

[3주차]

제품팀 
: 제품을 만들기 위해 모인 팀
-목적조직(스쿼드, 사일로) : 여러 직무가 모인 팀, 속도가 빠름
-기능조직(챕터) : 유사한 직무끼리 모인 팀, 전문성이 높아짐
-매트릭스 조직 : 기능조직과 목적조직이 교차

제품팀이 일하는 방식
1. 린스타트업 (lean=낭비가 없는)
- 핵심은 낭비를 줄이는 것
- 적은 리소스(시간, 돈, 사람)로 제품을 만들고,
- 시장에 검증(사용자 피드백)해가면서 고도화해 나가는 방법
- 만들기 → 측정 → 학습을 반복

2. 애자일 (Agile=날렵한, 민첩한)
- 1~4주의 단위로 제품을 개발, 테스트하고 피드백을 받아 개선해 나가는 과정을 반복

 

 <-> 폭포수 : 수직적이고, 독립적, 규모가 큰 대기업에서 사용
- 오래 걸리고, 빠르게 바뀌는 시장에 유연하게 대처가 어려움

출처 : 박진희 튜터님, [스파르타코딩클럽] UXUI 디자인 입문 - 3주차

- 스프린트 : 여러 테스크를 완료하는 1~4주의 짧은 기간
- 스크럼 : 스프린트 안에서 제품을 개발하는 방식
             요구사항 설계 → 디자인 → 개발 → 테스트 → 배포의 과정
- 이터레이션 : 스프린트를 반복해나가는 것

 

---

UXUI 실무 프로세스
1) 디자인 프로세스
기획-디자인-개발
-기획
문제정의 : 우선순위가 높은 문제를 정함
아이데이션 : 문제 해결 아이디어를 내고, 적절한 솔루션 선택
프로덕트 스펙 문서 작성 : 솔루션에 대한 상세 내용을 글로 작성

-디자인
초안디자인 : 디자인 툴로 디자인, 전반적인 사용자 여정, UX에 집중하여 프로덕트 스펙 문서에서 놓친 엣지 케이스 없는지 확인
피드백 : 팀원들과 공유 및 피드백
최종 디자인 확정 및 핸드오프 : 피드백을 반영한 최종 디자인 확정
*핸드오프
디자인을 개발할 수 있도록 엔지니어에게 전달하는 것
디자이너의 의도가 잘 드러나도록 다음의 내용을 전달
1. 유저 플로우 : 기능의 전체 흐름이 잘 보이도록
2. 유즈케이스 : 상황, 케이스에 따라 달라지는 화면들 정의
3. 반응형 레이아웃 : 스크린 크기에 따른 가이드를 주는 것이 좋음

출처 : 박진희 튜터님, [스파르타코딩클럽] UXUI 디자인 입문 - 3주차

-개발
디자인QA : 디자인대로 개발되었는지 확인
사용자와 비슷한 환경으로 테스트
앱이라면 안드로이드, IOS 두 환경 모두 확인

 

2)프로덕트 스펙 문서
=PRD (Product Requirements Document, 제품 요구사항 정의서)
: 팀원 모두가 같은 생각을 갖고 제품을 만들도록 하는 가이드

기획 배경, 솔루션, 기능 요구사항, 실험 계획 포함
가능한 모든 내용을 적고, 파편화되어 있다면 URL로 첨부하기
기획 초기부터 종료까지 끊임없이 업데이트하고 관리함

- 기획 배경 & 문제 정의 : 문제 발견 과정, 문제로 정의한 이유, 문제의 원인, 누가 이 문제에 영향을 받는지
- 솔루션 설명 : 페르소나, 사용자 시나리오, 기능별 주요 특징& 요구사항, 예외 상황 및 엣지 케이스 정의, 최종 시안
- 실험 설계 : 실험 가설(만들고자 하는 결과), 실험 방식, 결과 평가, 실험 기간
- 예상 일정 : 프로덕트 스펙 초안 작업 완료 일정, UIUX 디자인 최종 시안 제작 완료 일정, 개발 분야별 일정, 배포 목표 일정

- Google의 PRD Template

3) 디자인 공유하고 피드백 받기
배경, 솔루션의 의도, 필수 리뷰어, 참고 문서, 피드백 기한 포함

 

---

 

실무프로세스1 : 협업하기
- 각 직무의 리소스가 낭비 없이 좋은 솔루션 만드는데 직중적으로 쓰이는 것
- 더 좋은 퍼포먼스를 위해 돕고, 시너지를 낼 수 있도록 하는 것

-PM/PO
PM Product Manager : 제품 전략 수립, 솔루션 설계 등 실무 위주
PO Product Owner : PM보다 더 많은 역할과 책임, 조직 관리도 함

-엔지니어
프론트엔드 엔지니어 : UI를 코드로 구현, 화면 이동, 컴포넌트 모션 등
백엔드 엔지니어 : =서버 엔지니어, 정보 저장 및 전송, 제품 전체를 효율적으로 운영할 수 있도록 구조를 고민
QA 엔지니어 : 배포 전에 기능 테스트, 서비스 안정성과 품질 관리
데이터 애널리스트 : 데이터 수집, 분석하여 인사이트 제공

-UXUI
BX 디자이너 : Brand Experience, 브랜드 경험 관련 전반적인 디자인
로고, 심볼부터 그래픽, 각종 인쇄물 등
UX writer : 제품 내의 문구를 담당, 브랜드의 보이스앤톤을 문구로 전달, 명확한 메시지를 통해 제품의 사용성을 높임

 

실무프로세스2 : 실험문화
실험 : 제품의 개선이 실제로 사용자에게 더 나은 경험으로 이어지는지 데이터로 검증하는 것
- 사람은 편향적이기 때문에 만드는 사람의 주관이 반영될 수 있음
- 데이터 증명되기 때문에 객관적인 의사결정 할 수 있다.

전후 비교 테스트
- A/B 테스트 설계할 수 없는 특정한 상황에서 사용
- 실험기간 전후로 지표가 어떻게 달라졌는지 비교

A/B테스트
- 두가지 이상을 사용자에게 보여주고 성과를 측정
- 대조군(control)과 실험군(treatment)에 다른 안을 보여주고 어느 집단이 더 좋은 지표를 보이는지 측정하여 평가
- 기존 화면은 대조군, 테스트하고 싶은 안은 실험군
- 변수의 효과의 정확도를 높이기 위해 변수는 가능한 1개로 제한 하는 것이 좋음
- 제품에 어떤 변화를 줬을 때 사용자가 어떻게 반응하고, 행동하는지 정보를 얻기 위해 실시
- 사용자를 이해하고, 더 나은 의사결정을 하도록 함

분석 도구
앰플리튜드(유료)- 기능이 다양하고, 인지도 높음, PO/PM이 많이 사용
구글 애널리틱스(무료)- 마케팅 플랫폼과 연계성 좋아서 마케터가 주로 사용

 

실무프로세스3 : 디자인 QA
QA (Quality Assurance) : 제품이 출시되기 전에 기능을 테스트하는 것
- 처음 기획대로 구현되었는지, 품질 기준이 충족되었는지 확인
- 치명적인 결함, 프로덕트스펙 문서대로 구현되었는지, 특수한 상황에서 예상하지 못한 동작이 있는지, 전반적인 사용성 체크

QA문서
- 체크리스트(CL) : 예/아니요, Pass/Fail로 답변, 작은 배포일 때
- 테스트 시나리오(TS) : 기능이 모두 제대로 동작하는지
- 테스트 케이스 (TC) : 특정 케이스에서 요구사항을 충족하는지, 

   특정 조건, 테스트 범위, 케이스, 기댓값, 테스트 환경 등을 상세히 작성

디자인QA
- 어디가 잘못되었는지 엔지니어가 정확하게 알도록 작성
- 잘못 개발된 화면과 원래 디자인 화면을 기획 의도와 함께 전달
- 지라, 트렐로 같은 프로젝트 관리툴 사용하여 업무 티켓 전달
- 이슈의 중요도 표시하기 (Highest~Lowest)

 

---

 

[4주차]
디자인 툴
-인터페이스 디자인툴 : 피그마, 스케치, XD (주로 벡터 방식 기반)
-그래픽 디자인툴 : 포토샵, 일러스트레이터
-3D 그래픽 디자인툴 : 시네마 4D, 블렌더
-모션 그래픽 디자인툴 : 프리미어, 에프터이펙트

 

왼 : 비트맵 / 오 : 벡터 방식, 출처 : 박진희 튜터님, [스파르타코딩클럽] UXUI 디자인 입문 - 4주차

비트맵
-디지털이미지를 구성하는 최소 단위의 점 픽셀이 모여 만들어진 이미지
- jpeg, jpg, png, gif
- 벡터보다 정교하게 이미지 표현
- 픽셀 수가 많을수록 품질이 좋아지지만 용량도 함께 커짐
- 크기를 편집하면 원본 이미지의 픽셀 수가 변해 손상됨

벡터
- 그래픽을 수학적인 함수 공식으로 표현
- 점과 점을 연결해 선을 만들고, 선과 선을 연결해 면을 만드는 방식
- svg, eps, ai
- 좌표계(x,y)의 점으로 표현하여 이미지 크기 변경해도 손상되지 않음
- 좌표가 적힌 텍스트 파일로 저장되기 때문에 비트맵보다 용량이 작음
- 색 표현에 한계가 있어 사진 같이 섬세한 작업은 어려움
- 복잡한 이미지를 벡터로 만들면 용량이 매우 커짐
- 사용하는 곳에 따라 호환성 문제 생길 수 있음

피그마
- 가장 많이 쓰는 툴
- 클라우드 기반, 멀티 플랫폼 지원
- 인터넷이 가능한 곳에서 언제든지 파일 열고 편집할 수 있음 

스케치
- 개인 로컬 컴퓨터 기반으로 안정적임
- MacOS기반 프로그램

어도비XD
- 어도비 플랜 구독에 포함
- 어도비 인터페이스가 익숙한 사람들 쉽게 적응
- 기본적으로 로컬 파일 저장 방식이라 여러 사람이 작업하기엔 안 좋음


프로토타이핑 툴
- 화면의 움직임이나 인터랙션을 구현할 수 있도록 도와주는 툴
- 실제 개발 전, 아이디어 컨셉 테스트 용도
- 구현 정도에 따라 Lo-fi와 Hi-fi로 나뉨

* 인터렉션 디자인
- 제품을 사용하면서 적절한 반응을 주고 받고, 서로 소통할 수 있게함
- 인터렉션 : 사용자가 제품을 사용하면서 반응을 주고 받는 것
- 버튼 누른 후 소요되는 시간 동안 아무것도 변화하지 않으면 사용자가 답답함
  -> 혼란을 겪지 않도록 적절한 피드백, 로딩 애니메이션, 로딩 시간 제공 등

프로토타입이 중요한 이유 > 인터랙션 디자인을 테스트하기 위해
정지된 화면에선 사용자가 제품을 이용하는 과정을 담지 못함
사용자가 화면 이동, 원하는 기능 찾기 등 잘 사용하는지 보기 위해

 

피그마 프로토타이핑
- 피그마 디자인 후 간편하게 만들 수 있음
- 실제 데이터나 복잡한 애니메이션 구현은 어려움
- 단순한 동작 시연할 때 사용

프로토파이
- 코딩없이 실제 제품과 비슷한 수준으로 만들 수 있음
- 눈에 보이는 GUI 클릭으로 작업할 수 있어 코드를 몰라도 사용 가능
- 키패드로 텍스트 입력 및 전송 가능
- Conditions : 특정 상황일 때 이동하거나 색상이 변하는 조건을 거는 기능

프레이머
- Hi-fi 프로토타입으로 코드 기반의 툴
- 인터페이스 디자인 툴 기능도 함께 제공
- 실제 제품으로 배포까지 가능
- 재사용성 : 코드, 컴포넌트, CMS(콘텐츠 관리 시스템)
- 실제 제품과 거의 같은 수준
- 코드 다루는 데 익숙하고, 혼자 디자인과 개발까지 할 때 사용