가능하면 5일 완강 플랜으로 가보고 싶다. 더 이상의 밤샘은 사양이다. 오늘 새벽 5시까지 하다가 잤다니까..발제 중에는 크리틱이 기대됐다. 얼마나 날카롭고 사실 적시적인 피드백들로 정신을 헤집어 주실까..🥰
목표와 지향점을 좀 더 알고 싶었다. 나중에 돌아볼까 생각 중.
이외엔 젭 포인트 제도💰와 밍글링🎪이 기대됐다. 어쩐지 꼬박꼬박 출석해도 포인트가 안 쌓이더라니. 가상화페라도 많이 모아서 캐꾸하고 다녀야겠다😎
10:30 ~ CH 2.UXUI 디자인 입문 주차 강의(2) 수강
Day list에는 과제 수행을 위해 2강 > 5강 > 6강 순서로 권장하셨는데.
조금만 정신을 돌려도 깜빡깜빡 잊어먹는 탓에 1강부터 완강해 버렸다. 사실 오래 걸리지 않을 것 같아서 대강대강 넘기기도 했는데..아무튼 오전 중에는 2-3강의 절반까지 수강했다. 점심은 가볍게 어제 먹다 남은 치밥.
아참. 1강 과제는 미제출이라 제출하긴 해야 한다.
14:00 ~ 개인 과제(2) 발제 및 강의 수강
정기석 튜터님께서 과제 발제를 진행해 주셨다. 질문도 드리고, 듣기도 하고..주제에 맞게 발표 형식으로 가시성 있는 페이지를 제작하는 것이 과제의 주 내용. 그 과정에서 2, 5, 6강에서 다룬 개념이 사용되는 모양이었다. 2강에서 배운 디자인 씽킹과 AEIOU 질문법 등등..을 활용하는 모양이더라. 오늘 5강을 완강했는데, 필수과제 02) 아이디어 도출에서 요구되는 HMW가 있었다.뭔 헛소리야 진짜 매트릭스 기법은 6강에 나오는 모양.
예전과 비교해 리서치 능력이 떨어진 것 같아 걱정이 조금 되긴 했다. 그래도 어떻게든 될 거다. 나한텐 perprexity가 있으니까! 라기 보다는 그냥 해야 하니까 이렇게 말하는 거긴 하다.
발제 참여 중 적은 날 것의 텍스트들. 할 거 되게 많다.
아무튼, 이번 주차의 강의에서는 내가 몰랐던 정보들이 아주 많았다. 그렇게 하면 그렇게 되겠지~정도는 알았어도 실전에 적용할 정도는 아니었거나 개념이 명확하지 않은 것도 많았고. 그래서 적었다. 적고 또 적었다. 사실 강의 숙제 제출란에 각 주차의 정리본을 올려달라고 하기도 하셔서..짧게 적어도 됩니다^^ 라고는 하셨는데, 생각해보니 제대로 떠올리지 못하면 안 들은 거랑 차이가 없는 것 같더라고. 그래서 다시 수강하며 계속 손을 놀렸다. 그 일부를 여기 옮긴다.
💡 디자인 씽킹
: 논리적으로 제품을 만들 수 있도록 도와주는 가장 널리 알려진 프레임뭐크 방법론.
유동적인 프로세스로 진행된다.
순서가 이리저리 꼬이기도 한다.
디자인 씽킹에는 다음과 같은 것들이 있다.
참, 데이터드리븐은 데이터를 중심으로 의사결정 하는 것. 그러니까..
: 데이터를 중심으로 의사결정/결과물을 제작하는 과정.
그렇게 보면 된다.
1. 공감하기: Empathy
: 가장 중요한 단계. 인터뷰나 관찰 등의 다양한 방법으로 사용자의 공감대를 알고 충족되지 않은 욕구(Needs)&불편사항(Pain Point)들을 파악해야 한다. > A - E - I - O - U 관찰법 - 정보를 체계적으로 수집할 수 있도록 5가지 정보 분류로 수집하는 관찰법 - 인터뷰, 현장 조사에서 사용자와 면대면으로 마주칠 때 사용
> 공감지도 (Empathy Map) - 6개 도표를 채우며 사용자의 숨겨진 어려움과 욕구를 유추할 수 있도록 도와주는 시각화 도구 - 면대면으로 사용하는 것이 좋으나 페르소나st로 가상 인물을 정해 쓸 수도 있음 - 사용자의 생각, 느낌/말과 행동/듣은 것/보는 것/불편점/얻는 것
> 인터뷰 - 사용자를 파악하는 가장 대표적인 방법 - 강사님: 제품 만드는 주기(sprint)가 3주 한 번 씩인데 많이 할 때는 스프린트 한 번마다 유저 불러서 해 보셨었음. - 인터뷰를 통해 얻고자/알고자 하는 목적을 분명하게 설정 -> 대답을 듣기 적절한 사용자 그룹 5명 정도(경향성 얻기 좋음) 모집(스크리닝) -> 질문지를 미리 준비해 대답을 듣기: 예, 아니오 단답형 질문 X, 다양한 대답을 들을 수 있는 개방형 질문 O
- AEIOU 질문법 : 주제를 정한 뒤 정보를 나눠서 분리.
표로 정리해 봤다.
Activities: 활동
- 관찰 대상이 움직이는 것 살펴보기 - 사용자의 모든 행동 눈여겨보기 ex) 대화 중 먹거나 보인 행동, 특별한 움직임이나 반응, 제스쳐, 목적을 이루기 위해 선택한 방법
Environments: 환경
-관찰하는 곳이나 인터뷰 장소 주변 둘러보기 -활동이 일어나는 모든 시간적·공간적 요소 ex) 공간의 조명, 음악, 디지털 환경 너머의 물리적인 공간, 개인 공간 혹은 공용 공간 내가 만든 앱이 출퇴근 시간에 많이 켜짐 -> 지하철에서 자주 사용하더라.
Interaction: 상호작용
-관찰하는 대상이 어떤 것과 영향을 주고 받는지 관찰하기 -상호작용은 사람-사물-사건 등 다양한 관계에서 발생 ex) 카페에 방문한 사람이 키오스크 사용법을 정확히 알고 있는지, 주문에 어려움 없는지, 곤란한 상황에서 어떻게 하는지, 상호작용으로 인한 감정 변화, 일상 루틴
Objects: 사물
-관찰하는 대상 주변의 눈에 띄는 것 -당연하게 있는 물건 말고도 특이한 물건 확인하기 ex)사람/활동/환경과 연관 있는 것, 사물이 가진 원래의 뜻과 다르게 쓰이고 있는 것, 공간과 어울리지 않는 특이한 물건
Usere:사용자💡
-관찰 대상을 포함해 주변에 있는 모든 사람들 살펴보기 ex) 직접 사용자 외의 영향받는 간접 사용자, 대상의 구체적 활동이나 니즈 등
대상이 편향될 수 있으므로 친구 몇 명에게 AEIOU를 시도하는 것 보다는 앱스토어의 평점을 참고하는 것이 더 효율적이고 빠를 것이라고 말씀해 주셨다. 지금 바로 취소 연락을 넣으러 가기로..ㅎㅎ
2. 문제 정의하기: Define
: 정보 해석 -> 사용자가 불편함을 느끼는 지점을 발견하는 단계 - 무엇이 문제인가? / 그것이 왜 문제인가? / 풀어야 할 문제 중 가장 중요한 것인가? - 문제 정의 방법론
> 친화도 분석(Affinity Diagram) - 무작위 많은 정보 수집 -> 유사한 것 그룹핑 -> 결과 정리하는 과정 - 최우선 이슈 적기 -> 관련 정보(친화도 높은 것)부터 묶기 -> 중복/가치 낮은(유사성 없는) 것 제거 -> 각 그룹 타이틀 적기 -> 살펴보며 인사이트 정리
> 페르소나 : 제품 사용자를 대표하는 가상의 인물 - 페르소나는 제품 만들며 정보 얻다 보면/시간 지나다 보면 **정교화/고도화** 가능 - 리서치로 조사 가능. 팀 인원들 모두 모여서 합의하는 방안 추천, 불가능하면 디자이너 개인적으로 제작해보기 - 나이, 직업, 성별, 행동, 목표, 페인포인트 등 템플릿 존재
5 Whys를 사용한 문제 해결 방안이다.
> 5 Whys : 문제의 "근본적" 원인 파악을 위해 5번의 질문을 반복하는 과정 1. 관찰한 사용자의 문제/이슈를 상단에 적고 시작 ㄴ 2. Why 1: 기록한 내용에 대해 '왜?' 라고 질문 ㄴ 3. why 2: 첫 번째 질문에 대답&다시 why 1의 대답에 대한 이유를 질문 ㄴ 4. wht 3, 4, 5: 원인이 파악될 때까지 질문 반복 ㄴ 5. 마지막 대답 토대로 문제의 근본적 원인/인사이트 도출
+ Funnel 분석: 각 페이지별로 사람들이 잘 이동하고 있는지 분석하는 것(이탈율 ck)
> 사용자 여정 지도(CUJ/CJM: Customer Journey Map) : 사용자에 빙의: 제품 첫 만남 -> 끝나는 시점까지 경험 흐름을 시간/순서 등에 따라 분석하는 과정 - 제품 전체 경험 점검, 개선점 찾고 싶을 때 사용 - 행동을 기준으로 생각/감정 등을 단계별로 나눔. 템플릿 존재하니 볼 것
3. 아이디어 발산하기: Ideate
> HMW(How Might We?) : 만약 ~할 수 있다면 어떨까? 라고 질문 시작해 가정/상상 속 아이디어 이끌어 내는 방법 - 제공 예시 확인하기: 고객/드러나는 요구/심층이유/장애요인 찾기
> SCAMPER : 7개의 키워드로 질답하며 사고 전환을 시켜보는 방법 -> 브레인스토밍 기법 중 하나. 1. 대체하기 Substitute: A 대신 B를 쓰면 어떨까? 2. 결합하기 Combine: A와 전혀 다른 B를 합쳐보면 어떨까? 3. 응용하기 Adjust/Adapt: A를 B외 C에도 활용하면 어떨까? 4. 수정하기 Modify - 확대하기 Magnify - 축소하기 Minify: A를 변형하면 어떨까? A를 확대/축소하면 어떨까? 5. 다르게 활용하기 Put to another use: A를 B가 아니라 C로 사용하면 어떨까? 6. 제거하기 Eliminate: A의 일부를 제거하면 어떨까? 7. 역발상 해보기 Reverse, 다시 정렬하기 Rearrange: A→B를 B→A로 바꾸면 어떨까?
> 브레인스토밍 : 여러 사람이 모여 특정 문제에 대해 최대한 많은 아이디어 내는 방법. 다디익선.
> Yes and : "네, 그리고~" 라는 대화법으로 상대의 말에 동의한 후 이야기 진행하는 방식 -> 회의 시 생산적 논의/새로운 아이디어 만들고 싶을 때 사용
4. 프로토타입: Prototype
: 아이디어 중 하나를 선정해 가능성을 판단하기 위한 MVP(목적 달성을 위한 최소한의 기능) 중심 제시안 -문제 해결 주요 컨셉이 프로토타입으로 잘 표현되어야 아이디어의 정확한 평가 가능 -최대한 빠르게 아이디어의 가능성을 검증하는 과정 아래 단어들은 실무에선 섞여 혼용되나 개념은 알고 있어야 함.
> 와이어프레임 Wireframe : 화면 인터페이스를 단순 선&도형으로 표현한 것 -> 아이디어를 구체적으로 보여주고 시각화해 공유하고 싶을 때 사용 - 시각적 측면(심미 등) < 구조에 집중하기. - 단순한 선과 도형만 사용해 잘 표현하는 게 중요.
> 목업 Mockups : 실제 프로덕트의 시각적 컨셉 화면 -> 본격 UI 디자인 전 팀원들과 컨셉 공유할 때 사용 * 색상, 텍스트 스타일, 비주얼 컨셉 등 표현(솔루션 화면 위주로)
> 프로토타입(Prototype) : 와이어프레임/목업 화면에서 실제 움직임 구현한 것 * 프로토타이핑 툴: Invision, Protopie / 피그마도 ok * 최종 제품과 의 움직임 유사도에 따라 Lo-fi/Hi-fi 확인 가능 - Lo-fi(Low fidelity): 시각적 부분 적게 고려한 와이어프레임 수준. 업무 초반 이해를 돕고 싶을 때 사용 - Hi-fi(High fidelity): 최종 제품과 유사한 수준으로 구현. 구체적 기능이나 화면 사용성 시험하고 싶을 때 / 사용자가 프로토타입인 거 모르고 실제인 걸로 알고 써야 할 경우
역할극 : 실제 사용자 만날 수 없을 때 사용자를 이해해보기 위해 함. * 사용자 역할을 대신해 보면서 문제점을 찾아보는 방법 * 시나리오를 정해서 역할 나누고, 반응 -> 녹화도 하고 대화하면서 제품 만들 때 가정 못 한 문제점 발견하기
16:50~ 그리고 3강을 좀 듣다가..
자세한 설명은 생략한다.
17:30~ 챕터 5-2: 게슈탙트 심리학 수강
5강으로 넘어갔다.
1) 게슈탈트 심리학이란? 👉 사람이 이미지를 인식할 때 주변에 있는 요소 간의 관계와 맥락에 영향을 받는다는 이론
💡 게슈탈트 심리학의 원리에는 이런 것들이 있어요 1. 유사성의 원리 The law of similarity 2. 근접성의 원리 The law of proximity 3. 폐쇄성의 원리 The law of closure 4. 연속성의 원리 The law of continuance 5. 공통성의 원리 The law of common fate
1. 유사성의 원리
크기나 형태, 방향, 색 등의 특성이 비슷한 것끼리 묶어서 지각하려는 경향 [1] 모양을 이용한 유사 관계 형성 * 모양의 그룹화 효과 > 색상의 유사성, 크기의 유사성 [2] 크기를 이용한 유사 관계 형성 + 크기가 동일한 사각형은 해당 요소들끼리의 연관성을 의미할 수도 있다. [3] 색상을 이용한 유사 관계 형성
[4] 방향을 이용한 유사 관계 형성
차례로 형태, 크기, 방향이다.
* 모양이 유사한 컴포넌트 -> 하나의 그룹이라는 느낌이다. * 정보 그룹화가 잘 되면 사용자가 내용을 파악하기 쉬워진다.
2. 근접성의 원리
가까운 것끼리 묶어서 지각하려는 경향 * 모양이 달라도 여백을 두고 나눠진 요소들끼리 서로 그룹화가 되어 보임: 유사성의 원리(형태/색상)에서 달라지는 순간. * 모양(형태)의 유사성 < 색상(형태)의 유사성 < (여백을 활용한)근접성의 원리
3. 폐쇄성의 원리
: 공백이 있더라도 틈이나 간격을 메워서 닫힌 형태로 인식하려는 경향
좌측은 실제 예시 화면이다. carousel도 폐쇄성의 원리를 이용했군..싶더라.
4. 연속성의 원리
: 연속적으로 직선이나 곡선을 이루는 요소를 잘 인지하는 경향 예시에선 직선 / 곡선으로 나눠서 보게 됨. > 색상(형태)의 유사성!
세로 스크롤의 강조다. 편안함을 유도한다.
5. 공통성의 원리
: 같은 방향으로 움직이는 것들끼리 더 관련성이 높다고 인식하는 경향 +사실 모션그래픽에서 주로 사용됨. +유사성의 원리-방향의 유사성과도 유사함. * 같은 방향으로 움직이면 관계가 있을 거라고 생각하게 됨!
챕터5-3 : UX 비주얼 디자인 원칙
시각적으로 매력적인 이유를 근거를 들어 설명하게 해 주고,
잘 활용하면 심미적으로 아름다울 뿐만 아니라 사용성도 높여 주고,
원칙에 따라 잘 설계된 디자인은 제품에 몰입/편하게 사용하게 도와주는 것. 그것이 UX 비주얼 디자인 원칙!
스케일의 원칙
시각적 위계
균형
대비
1. 스케일 Scale의 원칙
: 상대적인 크기를 사용하여 구성의 중요도와 순위를 표시하는 것
시각적으로 보기 좋은 디자인은 일반적으로 3가지 이하의 크기를 사용한댄다. 이건 몰랐다!
당연함.
2. 시각적 위계
: 중요한 순서에 따라 시선의 흐름이 이동하도록 디자인하는 것
크기, 색상, 간격, 배치 등을 통해 표현할 수 있다.
사용자가 화면에서 정보를 찾기 어려워한다면 명확한 시각적 위계가 없을 가능성이 높다.
명확한 시각적 위계 -> 2~3개 정도의 텍스트 크기 사용 권장
위계의 낮음, 중간, 높음에 따라 요소의 크기를 large, medium,small로 분류.
중요하다고 생각되는 요소 -> 채도가 높고(강하고) 색상 대비가 크게
중요하지 않은 요소 -> 채도가 낮고 색상 대비가 크지 않게
우버의 경우 사용자가 둘 모두 보는 게 UI 의도.
3. 균형
: 디자인 요소 간에 적당한 배열이나 비율을 주는 것
디자인 축은 수직에 있을 수도, 수평에 있을 수도 있다. -> 양 쪽이 균등하게 유지하는 것이 사용자 편의성에 좋음.
중요하다. 난 비대칭의 재밌는 레이아웃을 좋아하니까 더 신경써야 할 거다.
양 쪽의 정보량이 비슷하도록-시소처럼 대칭되도록 디자인하는 것이 좋다.
균형에 활용할 수 있는 요소들
대칭: 재미없을 수도 있다.
비대칭: 세로-가로의 중심에서 축을 나눠 보면 비대칭이지만, 전반적으로 네 방향에서 가지고 있는 이미지가 비슷하다.
방사형: 중앙 원을 기준으로 원형으로 배치한 것. 시선이 중앙 집중!
비대칭을 활용했다.
4. 대비
: 눈에 띄게 구별되도록 강조하기 위해 두 요소간의 차이를 두는 것
특정 부분을 사용자에게 돋보이게 하고 싶을 때. 크기/색상을 사용하기도 함(시각적 위계라고도 할 수 있겠다.)
주의할 것! 덜 중요한 텍스트의 강조를 줄이기 위해 너무 줄이지 않도록 하기.
-> 흐릿한 텍스트는 사용성 감소로 이어진다.
돌이킬 수 없는 기능인 탈퇴. 제품에서 사용하지 않는 전혀 반대의 색상을 사용해 강조할 수 있다.
19:53~ 5-4. UX/UI 심리학 법칙 수강 시작.
너무 길어져서 슬슬 자르겠다.
1. 제이콥의 법칙
이렇게.
2. 피츠의 법칙
3. 힉의 법칙
4. 밀러의 법칙
그리고 5-5로 넘어갔다.
끝!
제발 시간 들인 것 만큼이나 기억에 남길..🥺
3. 학습하며 겪었던 문제점 & 에러
- 문제&에러에 대한 정의 - 내가 한 시도 - 해결 방법 - 새롭게 알게 된 점 - 이 문제&에러를 다시 만나게 되었다면?
여전히 비효율적으로 사는 듯. 효율적인 삶이란 뭘까..좀 더 고민해봐야 할 것 같다.
4. 내일 학습 할 것은 무엇인지
오늘 달성한 목표
오늘 달성 못한 목표& 이유
내일 목표
손민정
- 디자인 카타 - 개인 과제 확인&위크 플랜 수정 - 5강 완강
- 어제자 학습 회고: 금일 일정 이슈 - A-E-I-O-U 주제 리스트업: 필요X -> 튜터님 상담 후 앱스토어 평점 리서치로 변ㄴ경
