[10/13_To Do]
- 원티드 클론 과제 해석을 통한 회고
- UXUI 입문 - Chapter 2. 디자인씽킹
- UXUI 입문 - Chapter 5. 디자인 원칙
- UXUI 입문 - Chapter 6. 레퍼런스 분석
원티드 클론 과제 해석을 통한 회고
✅ 아이콘은 꼭 Scale로 지정해서 사이즈가 변할 때에도 비율이 유지되도록 한다.
✅ 화면을 오토레이아웃으로 구성할 때 gap을 적용하는 방법과 콘텐츠에 padding을 주고 gap은 0으로 배치하는 방법이 있다. 둘 다 실무에서 잘 사용되는 방법으로 상황에 따라 사용한다.
UXUI 입문 - Chapter 2. 디자인씽킹
디자인씽킹
- 논리적으로 제품을 만들 수 있도록 도와주는 프레임워크
- 사용자에 대한 이해를 기반으로 문제를 찾고 제품을 만들어 검증하는 프로세스
디자인씽킹의 5단계
디자인씽킹은 빠른 시간에 논리적, 현실적으로 눈에 보이는 것으로 만들 수 있도록 도와주는 도구
테이터드리븐(Data-Driven)
- 데이터를 중심으로 의사결정하는 것
- "데이터 = 사용자에 대한 이해"로써 사용자를 더 잘 이해할 수 있고, 그들에게 맞는 정확도 높은 제품을 만들 수 있음
- 정확도 높은 의사결정과 빠른 의사결정으로 제품의 개발 속도를 높여줌
데이터드리븐 + 디자인씽킹
- 데이터는 사용자를 이해하는 도구 + 디자인씽킹은 데이터를 체계적으로 활용
디자인씽킹 1단계 - 공감하기(Empathy)
공감하기란?
- 제품을 쓰게 된 사용자를 완벽히 이해하는 것이 중요
- 인터뷰, 관찰 등 다양한 방법으로 그들의 경험을 이해
- 공감대를 형성한 후 충족되지 못한 욕구(Needs)와 불편함 점(Pain Point)를 파악. 진짜 문제에 접근함
공감하기 단계에서 활용할 수 있는 방법
- A-E-I-O-U 관찰법 : 체계적인 정보 수집 관찰법
- Activities(활동) - 사용자의 행동 관찰
- Environments(환경) - 사용자의 활동이 일어나는 모든 시간적, 공간적 요소 관찰
- Interactions(상호작용) - 사람이나 사물, 사건등과 어떤 영향을 주고 받는지 관찰
- Objects(사물) - 사용자와 연관이 있는 것, 눈에 띄는 특이한 물건을 관찰
- Users(사용자) - 사용자를 포함한 주변의 인물들을 관찰
- 공감지도(Empathy Map) : 8개의 도표를 채우며 사용자의 어려움과 욕구를 유추할 수 있도록 도와주는 시각화 도구
- 인터뷰 : 유저 인터뷰, 심층 인터뷰로써 사용자를 직접 만나 목적을 분명하게 설정하고 다양한 대답을 들을 수 있는 질문을 묻는 것
디자인씽킹 2단계 - 문제 정의하기(Define)
문제 정의하기란?
- 사용자가 불편함을 느끼는 지점을 발견하는 단계
- "무엇이 문제인가?", "그것이 왜 문제인가?", "풀어야 항 문제 중 가장 중요한 것인가?"에 대답이 가능하도록 정의
- GIGO(garbege-in, garbege-out) 올바르지 않은 데이터에는 올바르지 않은 결과값이 나온다. 정확한 문제 정의가 의미 있는 결과를 만든다.
문제정의 단계에서 활용할 수 있는 방법
- 친화도 분석(Affinity Diagram) : 최대한 많은 정보를 무작위로 수집, 유사한 그룹으로 묶어 결과를 정리
- 페르소나(Persona) : 제품의 사용자를 대표하는 가상의 인물
- 5 Whys : 문제의 근본적인 원인을 파악하기 위해 5번의 질문을 반복
- 사용자 여정 지도(Customer Jorney Map) : 사용자가 제품을 처음 만나는 시점부터 끝나는 시점까지의 경험을 분석
디자인씽킹 3단계 - 아이디어 발산하기(Ideate)
아이디어 발산하기
- 정의한 문제를 해결할 다양한 아이디어를 냄
- 가장 적절한 아이디어를 선택
아이디어 발산하기 단계에서 활용할 수 있는 방법
- HMW(How Might We?) : "만약 ~할 수 있다면 어떨까?"라고 상상을 통해 아이디어를 끌어내는 방법
- SCAMPER : 일종의 브레인스토밍 기법. 7개의 키워드로 질문을 던지고 대답을 생각해보면서 생각을 전환시켜보는 방법
- Substitute(대체하기) - A 대신 B를 쓰면 어떨까?
- Combine(결합하기) - A와 전혀 다른 B를 합쳐보면 어떨까?
- Adjust/Adapt(응용하기) - A를 B 외에 C에도 사용하면 어떨까?
- Modify(수정하기)/Magnify(확대하기)/Minify(축소하기) - A를 변형하면 어떨까? A를 확대/축소하면 어떨까?
- Put to another use(다르게 활용하기) - A를 B가 아니라 C로 사용하면 어떨까?
- Eliminate(제거하기) - A의 일부를 제거하면 어떨까?
- Reverse(역발상해보기)/Rearrange(다시 정렬하기) - A → B를 B → A로 바꾸면 어떨까?
- 브레인스토밍(Brainstorming) : 여러 사람이 모여 특정 문제에 대해 최대한 많은 아이디어를 내어보는 방법
- Yes and : "네, 그리고~"라는 대화법으로 상대방의 말에 동의한 후 이야기를 이어나가는 방법
디자인씽킹 4단계 - 프로토타입 만들기(Prototype)
프로토타입이란?
- 사용자가 아이디어를 경험해볼 수 있도록 구체적인 제품이나 서비스로 개발
- 다양한 아이디어 중 하나의 아이디어를 선정하고 그 가능성을 판단해보기 위해 최소 기능을 중심으로 만드는 것
- 최소기능=MVP(Minimum Viable Product)으로 목적을 달성하기 위한 최소한의 기능만 구현한 제품
- 문제를 해결하는 주요 컨셉이 프로토타입으로 잘 표현되어야 함
프로토타입 단계에서 활용할 수 있는 방법
- 와이어프레임(Wireframe) : 화면의 인터페이스를 단순한 선과 도형으로 표현
- 목업(Mockups) : 실제 프로덕트의 시각적인 컨셉은 담은 화면. 본격적인 UI 디자인 전에, 미리 시각적인 컨셉을 공유
- 프로토타입(Prototype) : 와이어프레임이나 목업 화면에서 실제 움직임을 구현한 것
- Lo-fi(Low fidelity) 프로토타입 - 와이어프레임 수준의 움직임, 아이디어를 빠르게 검증해보고 싶을 때
- Hi-fi(High fidelity) 프로토타입 - 최종 제품과 유사한 수준으로 구현한 프로토타입, 구체적인 기능이나 화면의 사용성을 시험해보고 싶을 때
디자인씽킹 5단계 - 테스트하기(Test)
테스트란?
- 프로토타입을 사용자가 직접 사용해보게 하고 피드백을 받는 단계
- 피드백을 통해 다시 문제정의로 되돌아가 과정을 반복
테스트 단계에서 활용할 수 있는 방법들
- 사용성 테스트(Usability Test) : 사용자에게 직접 제품을 보여주고 평가를 받는 것
- 진행자, 참가자(사용자, 인터뷰이), 관찰자, 평가할 제품, 평가받고 싶은 시나리오를 준비. 테스트 후 문제점을 모아 개선점 도출
- 휴리스틱 평가(Heuristic evaluation) : 일종의 체크리스트. 특정 기준에 따라 제품의 사용성을 평가
- 린캔버스(Lean Canvas) : 일종의 비즈니스 체크리스트. 제품을 평가할 수 있는 9개의 항목으로 구성된 도표
- 역할극(Role Playing) : 실제 제품을 사용하는 상황을 가정, 사용자 역할을 대신해 문제점을 찾는 방법
[실습] 디자인씽킹 프로세스를 활용해 스카이스캐너 앱의 홈 화면 개선 아이디어 도출
1단계 - 공감하기 : 공감지도(Empathy Map)를 활용
| 스카이스캐너 사용자 공감지도 | |
| 생각과 느낌 | 항공권 예약을 원한다. 항공권 날짜, 시간, 가격 정보를 원한다. 항공사별 가격비교를 원한다. 저렴한 항공 예약을 원한다. |
| 보는 것 | 스카이스캐너에서 항공권을 비교한다. |
| 듣는 것 | 스카이스캐너에서 저렴한 항공권 특가 소식을 듣는다. |
| 말과 행동 | 새로고침을 하며 특가를 확인한다. 여행지별 가격을 비교한다. |
| 불편한 것 | 여러 검색을 통해 항공권을 비교하다가 내가 봤던 항공권을 다시 보고 싶은데, 다시 검색해야하는게 불편하다. |
| 얻는 것 | 다양한 항공사의 항공권을 한 번에 비교할 수 있다. |
2단계 - 문제 정의하기 : 5 whys 활용
| Why 1 | 왜 항공권 비교에서 사용자가 불편함을 느낄까? 👉 이전에 확인했던 항공권을 다시 확인할 수 없다. |
| Why 2 | 왜 이전에 확인했던 항공권을 다시 확인할 수 없을까? 👉 검색 기록만 기록되고 확인했던 항공권은 기록되지 않는다. |
| Why 3 | 왜 확인했던 항공권은 기록되지 않을까? 👉 하트 아이콘을 눌러 위시리스트에 저장해야만 기록된다. |
| Why 4 | 왜 위시리스트에 저장해야만 기록될까? 👉 항공권 확인 기록은 제공하지 않는다. |
| Why 5 | 왜 항공권 확인 기록을 제공하지 않을가? 👉 검색 기록만 제공하기 때문에 |
3단계 - 아이디어 도출하기 : SCAMPER 활용
| Substitute(대체하기) | 검색 기록 대신에 항공권 확인 기록을 사용하기 |
| Combine(결합하기) | 홈 화면과 위시리스트 화면을 합치기(홈 화면에서 바로 위시리스트를 확인할 수 있도록) |
| Adjust/Adapt(응용하기) | 검색 기록처럼 항공권 확인 기록 기능 만들기 |
| Modify(수정하기) | 홈 화면에 항공권 확인 기록 탭을 만들기 |
| Put to another use(다르게 활용하기) | 항공권 확인 기록을 바탕으로 다른 항공권 추천하기 |
| Eliminate(제거하기) | 검색 기록을 제거하기 |
| Rearrange(다시 정렬하기) | 홈 화면의 검색 기록을 항공권 확인 기록으로 만들기 |
▶︎ 홈 화면 UI에 최근에 조회한 항공권 기록 섹션을 만드는 아이디어 도출
UXUI 입문 - Chapter 5. 디자인 원칙
디자인 원칙
- 인지심리학의 관점에서 디자인할 때 지켜야 할 규칙을 정해놓은 것
- 사용자가 편안하게 느끼고 자연스럽게 행동하도록 유도
- 사용성이 높은 제품을 만들 수 있도록 도움
디자인 원칙의 종류
- 게슈탈트 심리학
- UX 비주얼 디자인 원칙
- UX/UI 심리학 법칙
- 기업의 디자인 원칙
게슈탈트 심리학
사람이 이미지를 인식할 때 주변에 있는 요소 간의 관계와 맥락에 영향을 받는다는 이론
- 유사성의 원리 : 크기나 형태, 방향, 색 등의 특성이 비슷한 것끼리 묶어서 지각(모양의 유사성 < 색상의 유사성)
- 근접성의 원리 : 가까운 것끼리 묶어서 자각하는 경향(유사성 < 근접성)
- 폐쇄성의 원리 : 공백이 있더라도 틈이나 간격을 메워서 닫힌 형태로 인식하려는 경향
- 연속성의 원리 : 연속적으로 직선이나 곡선을 이루는 요소를 잘 인지하는 경향
- 공통성의 원리 : 같은 방향으로 움직이는 것들끼리 더 관련성이 높다고 인식하는 경향(모션, 스크롤에서 사용)
UX 비주얼 디자인 원칙
- 스케일 : 상대적인 크기 차이를 사용하여 구성의 중요도를 표시
- 시각적 위계 : 중요한 순서에 따라 시선의 흐름을 이동하도록 디자인하는 것
- 균형 : 디자인 요소 간 적당한 배열이나 비율을 주는 것
- 대비 : 눈에 띄게 구별되도록 강조하기 위해 두 요소간의 차이를 두는 것
UX 비주얼 디자인 원칙의 힘
- 시각적으로 매력적인 이유를 근거를 들어 설명할 수 있다.
- 심미적으로 아름다울뿐만 아니라 사용성도 높인다.
- 사용자가 제품에 몰입하는 것을 돕는다.
UX/UI 심리학 법칙
심리학 법칙이란?
- 사람이 어떻게 행동하고, 왜 그런 행동을 하는지를 설명
- 정량적, 정성적 데이터가 없는 초기 제품에 대한 의사결정의 근거가 되어줌
- 명확한 이론적 근거를 바탕으로 주장할 수 있음
1️⃣ 제이콥의 법칙
- 새로운 제품을 사용할 때 익숙한 방식으로 작동하길 원한다는 법칙
- 기존에 학습된 지식과 경험을 바탕으로 보편적이고 익숙한 방식으로 설계한다.
- 멘탈모델(보편적인 생각패턴)이 중요한 영향을 끼친다.
2️⃣ 피츠의 법칙
- 사용자가 인터렉션해야 하는 대상은 거리가 가깝고, 크기가 커야 사용성이 좋음
- 터치 영역의 크기는 충분히 커야 한다.
- 터치 대상은 마우스나 손가락이 쉽게 닿을 수 있는 영역에 있어야 한다.
3️⃣ 힉의 법칙
- 의사결정에 걸리는 시간은 선택지의 개수와 복잡성에 비례해 늘어난다.
- 인지부하의 한계점을 넘어가는 순간 사용자는 이탈한다.
- 복잡한 작업은 더 작은 단계로 나눈다.
- 의사결정 시간을 줄이기 위해 선택지의 개수를 최소화한다.
4️⃣ 밀러의 법칙
- 보편적으로 무언가를 기억할 수 있는 정보의 덩어리가 7개 정도이다.
- 정보를 적절히 구조화, 그룹화하는 것이 중요하다.
기업의 디자인 원칙
기업의 디자인 원칙이란?
- 기업의 철학을 담고, 심미성과 사용성이 높은 제품을 만들 수 있도록 제시하는 가이드
- 공통된 느낌을 주는 일관된 원칙을 제시
- 의사결정의 기준이 되고 시간을 절약한다.
[실습] 디자인 원칙의 실제 사례 찾아보기
✅ 게슈탈트 심리학에서 3가지를 골라 실제 사례 찾아보기
디즈니 플러스 앱에서 게슈탈트 심리학이 적용된 것을 확인할 수 있었다.
유사성의 원리로 크기가 같은 카드끼리 묶어서 인식하는 것을 알 수 있었으며 연속성의 원리로 같은 행끼리 묶어서 인식하는 것을 알 수 있었다. 또한 공통성의 원리로 같이 스크롤되는 행은 같은 묶음으로 자연스럽게 인식되는 것을 확인할 수 있었고, 폐쇄성의 원리로 스크롤 시 콘텐츠가 이어서 나타난다는 것을 알 수 있었다.
✅ UX 비주얼 디자인 원칙에서 3가지를 골라 실제 사례 찾아보기
밀리의 서제 앱에서 UX 비주얼 디자인 원칙이 적용된 것을 확인할 수 있었다.
먼저 투데이 탭의 Hero 섹션의 스케일을 크게 지정하여 강조하였다. 동시에 색상 차이를 주어 대비를 사용하여 요소간의 차이를 주고 있었다. 인생책 섹션에서는 시각적 위계를 위해 텍스트의 크기를 다르게 설정하였으며 배치로 시선이 위에서부터 아래로 자연스럽게 흐르게 하였다.
✅ 좋은 사례의 화면을 찾아보고 디자인 원칙의 근거를 활용해 설명하기
다양한 컨텐츠를 제공하는 OTT 서비스들에서 디자인 원칙을 잘 활용하여 사용자에게 제공된다고 느꼈다. 특히 많은 컨텐츠들을 사용자에게 제공할 때에는 사용자의 피로도를 감소시키고 사용자가 쉽게 인지할 수 있도록 구조화와 그룹화가 중요하다. 웨이브 앱의 경우 카테고리별로 컨텐츠를 나열하여 제공하는 부분에서 게슈탈트 심리학의 유사성, 근접성, 연속성의 원리를 알아볼 수 있고, 컨텐츠 정보 페이지에서 컨텐츠 사진과 제목 텍스트를 강조하고 나머지 텍스트들과의 크기 차이로 UX 비주얼 디자인의 원칙인 스케일, 시각적 위계, 대비를 확인할 수 있었다.
UXUI 입문 - Chapter 6. 레퍼런스 분석
레퍼런스 분석이란?
- 세부 요소들을 관찰하면서 좋은점과 나쁜 점, 그 이유를 찾고 생각한다.
- 레퍼런스 분석을 통해 스스로 생각하는 힘을 기를 수 있다.
레퍼런스 분석
- 화면 구조 분석 : 화면이 각각 어떤 요소들로 구성되어 있는지 분해
- 디자인 원칙 기반 분석 : UI 요소들을 디자인 원칙들을 기준으로 분석해보는 단계, 좋은점과 나쁜점을 논리적인 근거를 찾는 것
- 인사이트 정리하기 : 분석한 내용들로 얻은 인사이트를 정리해 내 것으로 만드는 단계
UX/UI 디자인 패턴
디지털 제품, 주로 앱이나 웹에서 자주 사용되는 디자인 요소
UX/UI 패턴 → 디자인시스템으로 제작하여 재사용
자주 사용되는 UX/UI 디자인 패턴
- 온보딩 : 사용자가 제품을 처음 만나는 과정의 경험
- 튜토리얼 - 조작법이나 설명을 넣는 방식
- 가치 보여주기 - 제품을 사용하면서 얻을 수 있는 가치를 몇 개의 화면으로 보여주는 방식
- 개인화 설정하기 - 개인 맞춤 정보를 제공할 수 있도록 선택지를 주고 정보를 입력하게 하는 방법
- 로딩 : 화면이 그려지는 동안 사용자가 잠깐 기다려야 할 때 보여주는 화면
- 스피너 아이콘 혹은 애니메이션 활용
- 프로그레스 바
- 스켈레톤
- 검색 : 사용자가 원하는 정보를 빠르게 찾을 수 있도록 키워드로 정보를 찾는 방법
- 기본 검색 화면 - 검색의 중요도에 따라 검색 기능의 위계가 달라짐
- 연관 상품 추천 / 연관 검색어 노출 - 검색뿐만 아니라 탐색을 할 수 있도록 도움
- Empty view(검색 결과가 없을 때) - 추천 혹은 베스트 상품으로 이어지는 행동 유도
- 회원가입
- 리스트
- 카드
- 캐러셸
래퍼런스 분석 1 - 핀테크/금융
핀테크/금융 주요 레퍼런스
- 금융자산 연결
- 자산/소비 분석
- 신용대출 비교
토스 분석
래퍼런스 분석 2 - 콘텐츠
콘텐츠 주요 레퍼런스
- 콘텐츠의 종류에 따라 영상, 오디오, 텍스트, 웹툰 등 다양하게 나눠지고 특성에 따라 차이가 큼
- 콘텐츠 제품은 체류시간을 늘리는 UX/UI를 찾는데 집중해야 한다.
- 콘텐츠에 몰입할 수 있게 해주는 포인트를 분석
티빙 분석
래퍼런스 분석 3 - 커머스
커머스 주요 레퍼런스
- 전자상거래인 이커머스를 말하며 온라인에서 판매 및 거래가 이뤄지는 플랫폼
- 커머스는 상품 탐색 ~ 구매로 이어지는 사용자 여정에 집중하여 탐색
무신사 분석
[실습] 카카오톡 래퍼런스 분석하기
1️⃣ 화면 구조 분석
| [친구] 탭 화면 | - 상단 GNB(Global Navigation Bar)(반복) - 프로필 섹션 - 업데이트 프로필 섹션 - 펑 섹션 - 배너 - 즐겨찾기 섹션 -채널 섹션 - 네비게이션 바(반복) |
| [채팅] 탭 화면 | - 배너 - 채팅 목록 리스트 |
| [오픈채팅] 탭 화면 | - 탭 - 배너 - 오픈채팅 목록 리스트 - 배너 |
| [쇼핑] 탭 화면 | - 탭 - 콘텐츠 카드 리스트 - 카테고리 바 - 검색 바 - 신상 톡딜 카드 리스트 |
| [더보기] 탭 화면 | - 지갑 섹션 - 카테고리 섹션 - 베너 |
2️⃣ 디자인 원칙 기반 분석
| 좋은 사례 | [더보기] 탭 화면에서 카카오톡의 주요 기능 중 하나인 지갑 섹션을 컬러로 강조한 부분이 UX 비주얼 디자인의 원칙인 시각적 위계와 대비를 잘 적용함 |
| [더보기] 탭 화면에서 화면의 레이아웃이 대칭으로 나열되어 있어 UX 비주얼 디자인의 균형을 잘 적용함 | |
| 나쁜 사례 | [채팅] 탭 화면에서 폐쇄성의 원리가 활용되지 않아 사용자가 스크롤을 하지 않으면 채팅 목록이 더 있다는 것을 모를 수 있다. |
| [더보기] 탭 화면에서 지갑 섹션을 컬러로 강조한 것은 좋지만, 너무 많은 기능이 한번에 강조되어 있어 지갑 섹션 속 위계가 잘 나타나지 않는다. |
3️⃣ 개선점 찾기
✅ [채팅] 탭 화면에서 폐쇄성의 원리로 사용자가 스크롤 하지 않아도 채팅 목록이 더 있다는 것을 알 수 있도로 게슈탈트 심리학 폐쇄성의 원리를 적용하여 채팅 목록 중 하나의 모듈이 중간에서 끊어져 보일 수 있게 배치되면 혼란을 줄일 수 있을 것 같다.
✅ [더보기] 탭 화면에서 강조된 지갑 중 가장 강조되어야 할 기능에만 컬러를 넣거나, 지갑 섹션 안에서 텍스트 크기 등으로 위계를 만들어 UX 비주얼 원칙의 시각적 위계를 적용하면 더 좋을 것 같다.
'2025 내일배움캠프' 카테고리의 다른 글
| A-E-I-O-U 프레임 분석 (0) | 2025.10.15 |
|---|---|
| 음식 배달 시장을 타깃으로 아이디어 도출하기 (0) | 2025.10.14 |
| 원티드 UI 구조 분석과 클론 디자인 (2) | 2025.10.10 |
| 디자인 시스템 제작으로 Toss App 클론하기 (0) | 2025.10.02 |
| UI 디자인 레이아웃과 그리드, 컴포넌트 제작 (0) | 2025.10.01 |