본문 바로가기
내일배움캠프 본캠프/5월

[내일배움캠프 본캠] 5/28 TIL

by mimi30 2025. 5. 28.

디자인카타

5분 기록 보드 세션

UX 기획 및 리서치 1주차

 

 

 

디자인카타

B 선택

70%의 사람이 선택

 

왜 해당 UI가 더 좋은지 작성합니다.

· 이커머스 앱에서는 개별 상품 목록을 들어가서 하나씩 확인하고 구매하는 경우가 많기 때문에, 즉각적으로 '담기' 동작이 가능한 것이 나을 거 같다고 생각

· '담기' 버튼을 눌러도 다음 상품을 계속 탐색할 수 있는 구조여서 흐름이 자연스러움

 

나머지 하나의 UI는 왜 별로인지, 왜 선택하지 않았는지 작성합니다.

· 체크박스로 여러 상품을 한 번에 선택해 '담기'가 되는 방식이라면, 상품을 자세히 보려 들어가고 싶을 때 다시 취소 버튼을 눌러 돌아가야하는 번거로움이 생김.

· 체크박스를 선택한 후 '장바구니에 담기' 버튼을 한번 더 눌러야 하기 때문에 행동을 두번 하게되어 사용성에 안좋음

 

내 의견을 뒷받침 할 수 있는 실 사례가 있는지 찾아봅니다. 도전

마켓컬리/올리브영

 

 

 

 

 

'5분 기록 보드'

취업 준비를 시작하기 가장 좋은 시점

▷ 지금 당장-!

 

지금부터 해야한다면, 취업 준비는 매일 얼마나 해야할까

 5분

 

최종 프로젝트의 의미

▷ '디자이너'로서 나의 기술적인 역량을 보여주기 위한 방법 + 동료 기획자/개발자와 소통/협업하는 방법을 배울 수 있는 기회

 

이력서= 내가 뭘 했는지 보여주는 목차

포폴= 나의 생각과 의도를 의사결정 과정에 따라 어떻게 적용했는지 보여주는 줄거리

면접= 내가 뭘했는지, 어떤 의사결정을 할줄 아는지 설명하는 미팅

 

디자이너가 되려면?

"내가 뭘 했는지, 내가 알아야 한다!"

 

어떻게 문제를 인식하고 해결방법을 도출해야 할까?

문제== "그렇지. 그게 문제라고 생각할만 하지"

해결=="그렇지. 그 상황/조건에서는 그렇게 해결하는게 타당하지"

 

포트폴리오= 이력서에 담을 수 없던 내용을 담는 것 (의사결졍 프로세스, 결정에 대한 근거, 함께 보여줄 시각화 자료 등)

▷ 이 페이지에서 인지하길 원하는 정보를 텍스트로

▷ 이미지로 유저 플로우를 직관적으로 전달

 

▷ 본격적인 디자인 전, 반드시 텍스트로 내용을 먼저 배치한 후 작업

 

 

 

 

UX 기획 및 리서치 1주차

UX 사용자 경험 vs UI 사용자 인터페이스

더보기

UX

유저의 관점에서 유저의 문제를 해결하는 것에 집중

UI

시각 언어의 규칙을 만드는 것에 집중

 

UXUI 디자인 프로세스

더블 다이아몬드 모형

▷ 문제 정의와 문제 해결에 초점을 둔 디자인 프로세스 모형

더보기

 

다이아몬드 1: 해결해야 할 문제 찾기

▷ 발견(Discover) 단계

· 무엇이 문제인지를 발견하고 이해하는 단계

· 유저 리서치 진행하며, 이 과정에서 문제가 여러 개 발견될 수 있음

· 유저 리서치 (데스크 리서치, 필드 리서치)

 

▷ 정의(Difine) 단계

· 집중할 문제가 무엇인지 정의하는 단계

· 유저 리서치 결과물을 분석하고 정리하며, 이 과정에서 어떤 문제에 집중할지 논리를 정립

· 어피니티 다이어그램, 유저 페르소나 작성 등

 

다이아몬드 2: 해결책 찾기

▷ 발전(Develop) 단계

· 문제 해결을 위한 아이데이션을 진행하는 단계

· 문제를 해결할 수 있는 아이디어를 발산하되, 제한을 두기보다 다양한 방향을 열어두고 고민하는 것이 중요

· 정보구조도, 와이어프레임 등

 

▷ 전달(Deliver) 단계

· 디자인을 구현하여 유저에게 제공하는 단계

· 프로토타입 제작 후 사용성 테스트를 해보면서 개선을 거듭

· 최종 프로토타입, 사용성 테스트 등

 

4가지 핵심 원칙

 

 

Lean UX와 MVP

더보기

Lean UX 프로세스

유저 피드백을 데이터로 측정하고 반복적으로 디자인과 기능을 개선하는 과정을 거쳐 더 나은 유저 경험을 제공하는 프로세스

▷ 클라우드의 발전으로 실시간 협업이 활발해짐

▷ 분석 툴의 발전으로 데이터를 통해 임팩트를 측정하기 용이해짐

▷ 치열한 시장 경쟁에서 살아남기에 적합

 

MVP

최소한의 리소스로 앞으로 더 많은 자원을 투자할 가치가 있을지 판단할 수 있음

유저 피드백

 

ex) 에어비앤비, 아마존

에어비앤비

 

 

데이터 드리븐 UX 트렌드

더보기

데이터 드리븐 UX 등장 배경

▷ 디자이너가 홀로 작업할 때 뿐만 아니라 협업할 때, 그리고 산출물의 임팩트를 측정할 때에도 중요한 역할을 함

▷ 디자이너 관점

유저 데이터의 해석을 바탕으로 디자인 산출물에 대한 논리적인 근거를 제공할 수 있음

커뮤니케이션 관점

데이터는 타 조직과 원활한 의사소통을 돕는 공용어 역할

▷ 비즈니스 관점

디자인 산출물이 비즈니스에 얼마나 기여하는 지 파악할 수 있음

 

데이터 드리븐 UX에서 활용되는 지표 예시

유저 관여도 관점 (Engagement)

· 얼마나 많이 이용하는가? - DAU 일일 활성화 유저, WAU 주간 활성화 유저, MAU 월간 활성화 유저

· 얼마나 자주 이용하는가? - DAU/MAU, DAU/WAU

 

 유사 재방문 관점 (Retention)

· 특정한 특성의 유저들이 재방문하는가?- 코호트 리텐션 나이, 성별, 행동 등

· N일째 된 유저들이 재방문하는가?- Day N 리텐션 가입한 날?

 

 유사 획득 관점 (Acquistion)

· 얼마나 보는가?- 페이지 뷰 수, 클릭 뷰 수

· 얼마나 획득되는가?- 전환율, 이탈율

 

ex) 여기어때, 코드아카데미

해결 방법에 A가 as-is

https://goodui.org/

 

 

실무 UX/UI 용어

디자인 관련 용어

더보기

시각적 계층 구조 Visual Hierarchy

중요한 순서에 따라 시선의 흐름이 이동하도록 디자인하는 것

와이어프레임 Wireframe

화면의 인터페이스를 단순한 선과 도형으로 표현한 것

프로토타입 Prototype

제품이나 서비스의 초기 버전으로, 아이디어를 시각적으로 보여주고 테스트하는 모델

정보 구조도 Information Architecture; IA

제품이나 서비스를 구성하는 요소들의 구조를 도식화하는 것으로, 유저가 길을 잃지 않고 원하는 정보를 쉽게 찾고 작업을 완료할수 있도록 돕는 과정

피델리티 Fidelity

디자인 또는 프로토타입의 디테일 및 정확성 수준으로 Lo-fi는 낮은  피델리티, H-fi는 높은 피델리티를 가짐

CTA Call To Action

사용자가 원하는 동작을 취하도록 유도하기 위해 설계된 디자인 요소나 텍스트

모크업 Mockup

정적인 형태로 디자인된 인터페이스나 레이아웃을 보여주는 이미지나 모형

 

인지 심리 관련 용어

더보기
인지부하 Cognitive Lode

정보를 이해하고 처리하는 데 필요한 정신적 노력의 양

멘탈 모델 Mental Model

유저가 시스템이나 서비스를 어떻게 이해하고 예측하는지를 나타내는 개념

어포던스 Affordance 

디자인 요소가 유저에게 어떤 동작을 할 수 있는 단서나 힌트를 제공하는 원리

게슈탈트 원리 Gestalt Principles

사람이 이미지를 인식할 때 주변에 있는 요소 간의 관계와 맥락에 영향을 받는다는 이론

유사성, 근접성, 연속성, 폐쇄성 등 해당

힉의 법칙 Hick's Law

선택할 수 있는 옵션 수가 늘어날수록 결정 시간이 증가하는 원리

파츠의 법칙 Fitt's Law

대상까지의 거리와 크기에 따라 상호작용 시간이 달라지는 원리

제이콥의 법칙 Jacob's Law

유저가 과거 경험을 토대로 익숙한 디자인 패턴을 기대하는 원리

 

개발 관련 용어

더보기

서버 Server

정보와 서비스를 제공하는 소프트웨어로, 웹사이트나 앱의 데이터를 저장하고 제공

클라이언트 Client

서버로부터 정보를 요청하고 받아오는 디바이스나 소프트웨어로, 웹 브라우저나 모바일 앱과 같은 유저가 상호작용하는 부분 가리킴

접근성 Accessibility

모든 유저, 포괄적으로 장애가 있는 유저를 포함하여, 웹사이트나 앱을 이용할 수 있도록 디자인하고 개발하는 것

API Application Progreamming Interface

서로 다른 소프트웨어 간의 상호작용을 도와주는 인터페이스로, 데이터를 교환하거나 서비스를 활용할 수 있도록 하는 프로그래핑 규칙과 도구의 집합

CMS Content Management System

웹사이트 또는 앱의 콘텐츠를 쉽게 관리하고 업데이트하는 도구 또는 플랫폼

오픈소스 Open Source

소프트웨어 또는 프로젝트가 무료로 공개되며, 누구나 소스 코드를 확인하고 수정할 수 있는 개발 방식

디버깅 Debugging

소프트웨어 오류를 찾고 수정하는 프로세스로, 프로그램이 예상대로 동작하지 않을 때 문제를 식별하고 해결하기 위해 사용하는 과정