RealisationA to Z

정성 분석의 첫걸음 어피니티 다이어그램의 이해

RealisationZ — Thu, 11 Apr 2024 15:57:05 +0900

어피니티 다이어그램은 그룹과 함께 인사이트를 도출해 낼 때 유용하게 사용되는 UX방법론 중 하나입니다. 서비스나 제품을 효과적으로 개선하기 위해서는 사용자의 니즈와 문제점에 대한 리서치를 기반으로 한 문제점 파악이 중요합니다. 본 글에서는 어피니티 다이어그램의 정의와 도구를 사용하는 방법 및 UXUI 서비스 기획에 있어 어떻게 활용될 수 있는지에 대해 살펴보겠습니다.

어피니티 다이어그램이란 무엇이며 왜 중요할까?

어피니티 다이어그램이란 방대한 데이터들 사이 의미있는 규칙을 발견하기 위한 그룹핑 기법입니다. 일본의 문화인류학자 카와키타 지로에 의해 고안되었으며 리서치를 통해 수집된 정성적 데이터를 분류하고 정리하는데 주로 사용됩니다. 어피니티 다이어그램이 필요한 이유는 복잡한 데이터를 명확하게 분석하여 사용자의 요구와 문제점을 도출해 내는데 큰 도움을 주기 때문입니다. 이를 통해 사용자의 생각과 행동 양식을 이해하고 서비스의 개선점을 찾기 위해 이 기법을 적극 활용하고 있습니다.

어피니티 다이어그램 활용이 필요한 사람들

그렇다면 어떤 사람들이 어피니티 다이어그램을 활용해야 보다 효과적으로 업무에 적용할 수 있을까? 이는 특정 직업군에 한정되어있지 않고 UX/UI디자이너, 서비스 기획자, 제품 매니저PM, 마케터 등 다양한 분야의 전문가들에게 적용될 수 있습니다. 이때 사용자의 피드백이나 인터뷰 결과, 설문 데이터 등 방대한 양의 정보를 체계적으로 분석하고 의사결정 과정 속 팀원들과의 커뮤니케이션을 강화하는 것이 중요합니다.

어피니티 다이어그램의 구체적인 활용 방법

어피니티 다이어그램을 만들기위해서는 다음과 같은 6단계 과정이 필요합니다.

해결하고자 하는 문제를 명확하게 정의한다
그와 관련된 모든 정보를 포스트잇에 메모한다
메모들 사이에서 패턴이나 규칙을 찾아, 연관성 및 유사성이 높은 정보들끼리 그룹화한다
효과적인 통찰을 위해 각 그룹을 대표할 수 있는 레이블, 제목을 짓는다.
각 그룹들의 우선순위를 매긴다. 이때 우선순위는 목표에 따라 다르게 지정될 수 있음을 유의한다.
단순히 정보를 식별하는 것에 집중하지 말고, 흩어져있을 때는 발견하지 못했던 인사이트를 도출한다.

어피니티 다이어그램의 장점과 한계

[장점]

사용자 데이터 가시적 그룹핑
인사이트 도출
유연한 접근 방식

[단점]

초기 단계 많은 시간과 노력 필요
그룹핑 과정 속 주관성 개입 가능성

결론

어피니티 다이어그램은 서비스 기획 및 UX/UI 디자인 과정에서 복잡한 데이터를 정리하고 사용자의 실제 필요를 분석하는 데 있어 핵심적인 도구이입니다. 오늘 알아본 사용 방법을 통해 직면한 프로젝트에서도 더 나은 결정을 내리고 더 효과적인 설계를 하는데 도움이 되길 바랍니다! 추가적인 어피니티 다이어그램의 구체적인 과정에 대해서는 아래 참고 글을 보는 것을 추천합니다!

참고글

09화 어피니티 다이어그램 기법이란?

데이터 더미에서 규칙 읽어내기 | '어피니티 다이어그램(Affinity Diagram)'은 방대한 데이터들 사이에서 의미 있는 규칙을 발견하기 위한 그룹핑 기법이다. 일본의 문화 인류학자인 카와키타 지로에

brunch.co.kr

관찰에서 발견으로(1) - 어피니티 다이어그램 | 요즘IT

어피니티 다이어그램은 사용자를 통해 얻은 정성적이고 파편화되어 있는 산발적 정보들 사이에서 유의미한 결론을 도출해 내는 데 사용되는 효과적인 그루핑 방법이며, 이는 일본의 인류학자

yozm.wishket.com

[UX 방법론] Contextual Design ③ - 어피티니 다이어그램 (Affinity Diagram)

어느덧 Contextual Design 시리즈의 3번째 편이다. 전 편에선 컨텍스추얼 인터뷰를 통해 사용자를 관찰하는 방법과 각 사용자의 싱글 케이스를 시퀀스 모델, 피지컬 모델, 아티팩트 모델 등을 통해 시

design-tra.tistory.com

Midjourney 미드저니 튜토리얼 가이드 [가입 방법]

RealisationZ — Tue, 2 Apr 2024 08:47:20 +0900

최근 AI 이미지 생성에 대한 관심이 많아지면서

다양한 리서치를 진행하게 되었다.

그중! 나만 모르고 있던 새로운 AI 이미지 생성 툴 발견!

바로 미드저니다!

미드저니는 나의 명령어를 통해

AI로 이미지를 생성해 주는 툴이다.

간단한 방법을 통해 가입이 가능하니

오늘은 Midjourney 미드저니 튜토리얼 가이드 [가입 방법]에 대해 알아보자!

우선 우측 하단 Join the Beta 버튼을 클릭!

그러면 디스코드 초대장이 전달되는데,

만약 디스코드 계정이 없다면 새로 생성해 미드저니 툴을 사용하길 바란다!

요렇게 참가를 하면 채널이 나오게 되고!

midjourney 채널에 들어가서 ' /subscribe' 명령어를 입력하면 구독료에 대한

설명이 나오며 원하는 결제 수단을 선택하면 된다!

이렇게 되면 가입 끝!

웹사이트에 코딩 없이 3D 디자인 적용하는 방법! 무료로 이용할 수 있는 3D 디자인 사이트 소개

RealisationZ — Sun, 31 Mar 2024 08:20:06 +0900

오늘은 비개발자도 가능한, 코딩 없이도 빠르게

웹사이트에 3d 디자인을 적용하는 방법에 대해

알아보고자 한다!

위의 영상에서는 spline이라는 프로그램을 소개한다!

https://spline.design/

Spline - 3D Design tool in the browser with real-time collaboration

Spline is a free 3D design software with real-time collaboration to create web interactive experiences in the browser. Easy 3d modeling, animation, textures, and more.

spline.design

스플라인에 대해 간략하게 소개하자면

3D 디자인 및 애니메이션을 위한 비주얼 툴로, 비전문가 및 전문가 모두에게 접근하기 쉬운 사용자 친화적 인터페이스를 제공한다. 사용자는 실시간으로 3D 모델을 생성하고 편집할 수 있으며, 다양한 미디어 및 형식에서 가져올 수 있는 다양한 기능을 제공한다.

주요 기능으로는,

3D 모델링: 사용자는 스플라인을 사용하여 다양한 3D 모델을 만들 수 있습니다. 이를 통해 캐릭터, 물체, 건축물 등 다양한 형태의 3D 모델을 만들 수 있습니다.
애니메이션: 스플라인은 강력한 애니메이션 기능을 제공하여 사용자가 자유롭게 오브젝트를 움직이고 변형시킬 수 있습니다. 이를 통해 다이내믹한 3D 애니메이션을 만들 수 있습니다.
실시간 렌더링: 스플라인은 실시간 렌더링을 지원하여 사용자가 작업 중에도 모델의 외관을 빠르게 확인할 수 있습니다. 이는 디자인 작업의 효율성을 높여줍니다.
다양한 형식 지원: 스플라인은 다양한 3D 파일 형식을 지원하여 사용자가 다른 소프트웨어에서 만든 모델을 가져올 수 있습니다. 이는 워크플로우의 유연성을 높여줍니다.

가장 먼저 홈페이지에 들어가면 이런 화면이 나오는데,

우선 get started 버튼을 눌러 무료로 시작한다.

이후 좌측 패널에 community를 눌러 내가 사용하고 싶은

3d 디자인을 클릭!

원하는 디자인을 클릭했다면

우측 보라색 remix버튼을 다시 클릭!

이후 자신이 원하는 요소들을 추가하거나 수정해

가장 상단에 있는 export -> viewer모드

이후 playsettings 조정,

overview를 통한 코드를 복사하면 끝!

마지막으로 자신의 사이트에 코드를 붙여 넣으면

끝이 난다~!

피그마 Figma 기초강좌 파해치기 [ 피그마 설치방법 ]

RealisationZ — Sat, 30 Mar 2024 08:53:13 +0900

피그마 설치를 위해선 우선 검색창에 피그마를 입력!

피그마 공식 사이트에 들어갑니다!

홈페이지 우측하단의 login클릭 혹은 페이지 get started 파란 버튼을 클릭!

구글 로그인 혹은 계정 생성을 통해 피그마 가입을 해줍니다.

계정을 생성했다면 products -> downloads에 들어갑니다.

개인의 환경에 따라 다운받으면 끝!

성공적인 UX 리서치 방법

RealisationZ — Fri, 29 Mar 2024 20:12:56 +0900

UX 리서처란?

사용자에게만 초점을 두는 게 아닌 실무자나 이해관계자들이 전략적인 관점에서 사용자 경험뿐만 아니라 서비스의 비즈니스/ 비즈니스 맥락 등 사용자와 인터랙션 하면서 미칠 수 있는 온갖 요소들을 리서치하는 것

문제해결이 잘 되지 않았을 때

해외 교육 자료들 참가
컨퍼런스 참여
해외 선진 사례 연구
UX리서치 효용성에 대한 탐구

UX리서치를 통한 문제 해결법/ 업무 방식

올바른 리서치를 통해 적절한 시기에 공유가 되어야 하고 공유 인사이트가 실무에서 실제 유용하게 쓰여야 함
잘 전파되기 위해서는 각 팀과의 소통 중요
올바른 사용자를 만나서 리서치 진행해야 함
리서치 참여자 섭외/모집 중요
참여자 어떻게 구하는지? 아웃소싱 채널 섭외 (비용 절감 많이 됨)
설계 시 잘 진행되기 위해서는 옳은 질문/좋은 질문 중요
협업 파트너와 함께 많은 얘기/충분한 이해를 통한 방향을 잡아야 함
상대방과 충분한 관계가 형성되어야 한다 (어떤 일들을 하고 있는지, 어떤 방향으로 가야 좋을지)

UX리서처로서 가장 중요하게 생각되는 태도

나는 사용자가 아니다는 생각

피그마 버튼 만드는 방법 [오토레이아웃 활용]

RealisationZ — Thu, 28 Mar 2024 19:49:45 +0900

아무것도 없는 화면에 단축기 t or text를 클릭해 원하는 텍스트를 입력해 줍니다.

오토레이아웃 단축키 shift+a를 눌러 오토레이아웃을 실행합니다.

우측 패널에 fill을 추가해 원하는 컬러를 입혀줍니다.

패널에서 텍스트 컬러, 코너값을 적용해 주어 버튼 디자인을 완성하면 끝!

웹사이트 사용 폰트 확인하는 방법!

RealisationZ — Thu, 29 Feb 2024 17:17:41 +0900

폰트에 관한 공부를 하다 보니 자연스럽게 웹사이트 내에 어떤 폰트가 사용되었고

사이즈는 어느정도 인지에 대한 물음이 떠올랐다~! 그리하여 찾아본 웹사이트 사용 폰트 확인법!

1) 원하는 홈페이지에 들어간다

2) 원하는 영역을 드래그 후 마우스 우클릭 -> 검사를 클릭

3) 오른쪽 패널 styles 확인

그러면 이렇게 폰트사이즈 글길이 폰트무게에 대해 확인할 수 있다!

웹사이트에 적합한 폰트 크기가 있을까?

RealisationZ — Wed, 28 Feb 2024 16:08:16 +0900

웹사이트 서비스를 디자인하는 사이드 프로젝트를 진행 중인데,

폰트와 관련한 질문이 들어와 그렇다면 적정한 웹사이트 폰트 크기는 어떤 것일까 라는 물음에 관련 영상들을 찾아보았다.

사용자가 누구냐에 따라 다르고 각자 서비스에서 보여주고자 하는 비즈니스의 목표가 다른만큼 해당 영상과 글을 통해 적정한 웹사이트 폰트 크기는 무엇인가에 대한 고찰을 해보았으면 좋겠다.

사실 여기까지 영상을 보았을때도 적정한 폰트가 무엇인지에 대한 감을 찾기 어려웠다.

그러다~!! 위의 영상을 보면서 이런 식으로 폰트 사이즈를 정하고 디자인 시스템을 정의해도 좋겠다는 생각이 들었다.

가장 좋은 방법은 여러 레퍼런스들을 찾아보거나 이미 만들어진 디자인 시스템을 참고해

나의 디자인에도 적용해 보는 것! 영상 속 유튜버는 여러 사이트의 폰트명, 무게/표준변수 등을 정리하여 스프레드 시트로 정리하였고 그룹화 및 차트 생성을 정렬하여 공통 패턴을 찾아냈다고 한다... 이 정도 열정이 있어야 폰트 사이즈에 대한 이해가 될까..?! 그러면서 폰트 사이즈를 정하고 이러한 폰트를 정의하는 방법에 대해 알려주었다.

기본적으로 폰트를 생성할 때 있어 고려해야 할 네 가지 사항은 display/ heading/ body/ label이다.

이 각각의 기능에 맞춘 텍스트 스타일 또한 평균적 통계를 내었을 때 아래와 같은 표준 가이드가 필요시 된다.

display	Avg : 4 text styles
Heading	Avg : 6 text styels
Body	Avg : 3 text styels
Label	Avg : 3 text styels

그렇다면 텍스트를 어떻게 정의할 수 있을까

Typographic Level	Display, Heading, Body, Link, Label
HTML Tags	H1,H2,H3,P
Token	font-size-1, font-size-2, font-size-3
T-shirt Sizing	xs,sm,md,lg,xl

각각 상황에 따른 property 정의

Font Weight	Regular, Medium, Semibold, Bold
Numerals	100,200,300,400,500,600,700,800,900
T-shirt Sizing	Lg,Large
Text Emphasis	Italic, Underline
Context	Link Navigation, Section Header
Lettercase Property	Uppercase
Intersection State	Hover, Focusm Active, Disabled
Device Size	Desktop, Mobile, Large Screen, Small screen

디자인 시스템을 정의할 때 보통 typographic level + t-shirt size + font weignt를 활용한 조합으로 구성한다.

그렇다면 가장 일반적인 글꼴 크기는 무엇인가. (내가 사이드 프로젝트를 하면서 12pt가 작다라는 의견이 있었는데... 이거는 다른 사이트들을 찾아보면서 어떠한지 좀 봐야 될 듯싶다 사용자의 시선을 끌어야 하는 부분이라면 12pt가 작겠지만 그런 시선을 요구하지 않는 꾸밈 요소의 텍스트라면 12pt 정도는 적당하지 않을까..? 하는 개인적인 의견이다)

Display	36 42 48 60 72 78 96
Heading	14 16 20 24 28 32 40 48
Body	12 13 14 16 18
Label	10 12 13 14

* line height의 경우 대게 피그마에서 자동으로 기준선과 일치시키거나 4의 배수인 특정 값으로 지정한다.

General Line height
Display	120.81%
Heading	132.36%
Body	147%
Label	141.76%

*영상의 내용은 일반적인 자간을 나타낼 뿐 개인의 서비스 환경에 따라 자간이 달라질 수 있음을 참고하면 좋을 듯싶다!

General letter space
Display	-2.5~-1%
Heading	-2%~0%
Body	0%~1%
Label	0%~3%

이러한 내용들을 기반으로 반응형 디자인에는 폰트를 어떻게 정의해야 할까?

이 문제를 해결하기 위해 세 가지 방법을 제시했다.

첫 번째, 초소형/중형과 같은 범위별로 텍스타일을 지정하는 것 (개인적으로 초소형과 중형을 폰트 패밀리 내에 나누어야 하는데 그 기준을 명확히 나누기 좀 어려울 듯싶어 이건 사용하지 않을 듯싶다)

유사 예시 https://www.figma.com/@shopify

두 번째, 제목에 대해서만 별도의 영역 지정

예시 : https://www.figma.com/community/file/913828647221574819

세 번째 방법, 범위당 가장 큰 제목을 축소 ( 작은 단위의 범위는 지정 x)

https://www.figma.com/@paradigm

이렇게 웹사이트의 적정 폰트 사이즈를 알아보려다 디자인 시스템의 폰트 정의법까지 알아보게 되었는데, 아직 완전히 이해가 된 것 같지는 않아 추가 영상들을 더 찾아봐야 할 듯싶다..ㅎ

위의 영상에 추천한 관련 링크이다.

- https://www.designsystemsforfigma.com/

Design Systems For Figma

A collection of Design Systems for Figma from all over the globe.

www.designsystemsforfigma.com

- https://www.designsystems.com/

DesignSystems.com

A design systems publication by Figma

www.designsystems.com

사용자 분석 UX Research 정의와 방법

RealisationZ — Tue, 19 Dec 2023 22:05:40 +0900

https://learn.udacity.com/courses/ud509/lessons/4cac5681-ce91-4367-99e1-5c5f341e3096/concepts/8bd19b73-b47f-4af3-b243-73bd65472020

learn.udacity.com

구글 프로덕트 디자인 강의를 수강하다 사용자 리서치에 대한 이야기가 나왔는데 따로 블로그 글로 작성하면 좋을 듯하여 구글의 시니어 사용자 연구원 토너 샤론의 이야기를 기록했다.

사용자 분석 UX Research란 무엇일까?

인사이트를 적절한 시기에 적절한 사람들에게 그들의 관점과 능력을 제품 사용자들에게 제공하는 규율
조금 더 쉽게 요약하면
1. 사람들이 필요로 하는 것은 무엇인가
2. 사람들이 원하는 것은 무엇인가
3. 우리가 만든 제품을 사람들이 쉽게 사용할 수 있는가

Q. 사용자 조사는 새로운 아이디어를 위해 쓰이는 것인가?

-> 해결할 가치가있는 문제에 사용자 조사가 진행된다

Q. 사용자 조사에서 결정까지 가는 과정

-> 결정을 내리기위해 문제가 무엇인지에 대해 알아야 한다. 그러면 사용자 프로세스를 어떻게 시작할지 알 수 있다. 그러기 위해서는 여러분이 답하려고 하는 질문의 목록을 만드는 것이 우선되어야 한다. 그러기 위해서 모든 가정에 대한 목록을 적어야 함. 사용자 조사가 끝난 이후 이에 대한 답을 알아야 함.

https://uxmastery.com/better-user-research-through-surveys/

Better User Research Through Surveys - UX Mastery

Summary: Creating a great survey is like designing a great user experience—they become a waste of time and money if the audience is not at the centre of the process. Chris Gray shows us in this whiteboard animation how to build the kind of survey that wi

uxmastery.com

[ 유용한 설문조사를 만들기 위한 방법 ]

설문 조사를 통해 얻고자 하는 답이 무엇인지 생각
가정을 한 다음 사용자 질문 생성
사용자가 이해하기 쉽고 적절한 질문으로 구성
유사한 질문들로 나열
두 가지 개념을 한 질문에 하는 것은 지양
부정적인 응답과 긍정적 응답 반반으로 구성
오픈 질문형으로 구성

[ 설문지를 통해 얻을 수 있는 것 ]
제품에 대한 피드백을 얻을 수 있다
어떤 서비스를 사용하는 이유에 대해 답변을 얻을 수 있다
질적 연구에서 질량적인 결과 도출 가능
- Who your users are;
- What your users want;
- What they purchase;
- Where they shop;
- What they own; and
- What they think of your brand or product.
- 이에 대해 알 수 있다.
[ 초기 기업가의 사용자 조사 방법 ]
제품을 만들어서 내놓고 피드백을 받는 것
사람들을 참여시키는 것은 힘듦 그렇기에 사용자의 니즈를 필요로 하는 제품을 만들어야 함
초기 배포 방법을 알아 최대한 빠른 시일에 프로토타입을 내놓고 사용자들의 피드백을 들어야 함
https://learn.udacity.com/courses/ud509/lessons/4cac5681-ce91-4367-99e1-5c5f341e3096/concepts/fb8fa8ba-aeea-48d5-90f6-e0c2151518de

https://learn.udacity.com/courses/ud509/lessons/4cac5681-ce91-4367-99e1-5c5f341e3096/concepts/fb8fa8ba-aeea-48d5-90f6-e0c2151518de

learn.udacity.com

어떻게 와이어프레임을 만들어야 하는가

RealisationZ — Mon, 11 Dec 2023 18:25:44 +0900

왜 와이어프레임이 필요할까?

유저가 목적지에 도달할 때까지 얼마나 효율적으로 플로우를 짜는가와 함께 사용성에 앞서 미래 예측 가능

[ 기획자와 디자이너가 와이어프레임을 만들 때 고려해야 할 것 ]
기획자 : 페이지/기능/콘텐츠 기준으로 배치 <-> 디자이너: 사용성과 시각적 요소에서 고민

와이어프레임에 들어가기전 알아야 할 게슈탈트 이론

게슈탈트 이론 : 형태나 모양을 볼 때 인지하는 방식을 설명

[ 게슈탈트 이론 속 UI디자이너를 위한 핵심 ]
유사성의 원리 : 색/크기/모양 유사한 것들을 묶는 것 -> 사람의 구분이 더욱 쉬워짐
근접성의 원리 : 이웃해있는 요소들과 그렇지 않은 요소 구분 (그룹핑)

공통 영역의 원리 : 박스안에 요소를 같은 정보로 보는 것

연속성의 원칙 : 연속성을 띄는 물체에 대해 연관성 있다 생각

게슈탈트 이론을 활용한 와이어프레임 제작

우선순위와 배치 고려
배너영역/비주얼 영역 고민
간략한 관찰 후 인사이트 도출
디자인보다는 콘텐츠별 그룹핑 집중

ui kit를 활용한 와이어프레임

커뮤니티에서 wireframe free ui kit 검색
필요한 아이콘/컴포넌트 가져오기
frame 원하는 프로토타입 선택
통으로 복사할 경우 분리가 어렵기 때문에 일부분씩 가져가서 진행

* 와이어프레임의 경우 디자인을 입히는 과정이 아니기 때문에 대략의 위치만 잡는다 생각

영상 시청 후 느낀 점

- 와이어프레임 제작시 기획자에게 전달받은 기능명세서/ 필요 콘텐츠를 토대로 각각 영역의 그룹핑, 효과적인 레이아웃 배치를
고려해 ui키트로 빠른 제작을 하면 되겠다 생각

[ 고려할 점 ]

-다른 디자이너와 협업시 어떻게 와이어프레임을 제작해야 할까 라는 궁금점도 생김 -> 각각 파트를 나누어서 진행한 이후 서로 피드백을 주며 와이어프레임을 제작해 나가면 빠르게 해낼 수 있지 않을까..?
-ui키트로 제작할 때에는 아이콘은 기존 무료 ui kit를 사용하고 이후 플랫폼의 컨셉에 맞춰 제작