피그마의 개요:

피그마는 협업에 능한 툴.

다양한 직군들이 같은 화면을 보며 작업할 수 있음.

다양한 직군들을 위한 기능들을 선보이는 중.

디스플레이와 픽셀의 개념:

웹사이트나 전광판, TV 등의 디지털 환경-화면.

디스플레이는 픽셀로 이루어져 있음. 정사각형의 점들이 모여 화면 출력.

해상도, 픽셀:

해상도는 디스플레이의 선명한 정도를 말함.

1920(가로)*1080(세로)의 형태. 각각 가로축에 1920개, 세로축에 1080개의 픽셀을 가지고 있는 것.

즉 해상도(픽셀의 수와 정비례)가 높을 수록 화질이 좋아짐.

1배수 디자인

UXUI 디자인은 다양한 해상도의 디스플레이에 유연하게 대처해야 함.

즉, 많이 사용되는 사이즈를 기준(1배수)으로 작업을 하게 됨. 이후 비율을 유지하며 확장.

아이폰은 375*812

안드로이드는 360*800

그렇다면 1배수를 어떻게 구현할 수 있을까?

1) 우선 기기 해상도를 확인해야 한다. 또한, 내가 만들 앱을 쓰게될 사람과 그 사람들이 주로 사용하는 기기를 알아야 한다.

2) 기기 해상도에 맞추어 1배수를 확장한다(렌더링 과정).

3) 그러나 언제나 원본 비율과 해상도가 일치할 수는 없기에, 이를 줄이거나(다운스케일) 늘여서(업스케일) 보정해주게 된다.

'8포인트 그리드'라는 규칙

UXUI 디자이너에겐 특히나 규칙이 중요하다(사실 모든 디자인 분야가 원활한 협업을 위해 규칙을 중요시하긴 함).

UI 컴포넌트들은 8의 배수에 맞추어 제작된다.

8은 2로 3번까지도 나눌 수 있고, 늘리거나 줄일 때 그 수가 짝수로 잘 떨어지기 때문에 매우 적합하다.

실무에서는 4배수도 많이 이용한다.

피그마는 이러한 UI 디자인을 위한 알맞은 툴이다.

이는 피그마의 그래픽 환경이 벡터기반인 영향이 크다.

심지어 어도비 일러스트레이터와 호환이 된다!

Ux :

사용자 경험, 즉 사용자가 어떤 제품이나 서비스를 이용하면서 느끼는 총체적인 경험.

그래픽 인터페이스나 제품디자인, 물리적 인터랙션 등 상호작용을 통한 경험을 디자인하는 것.

Ux적으로 성공한 디자인이란 사용자의 요구를 충족시키고, 그것이 사용자에게 하여금 좋은 경험이 될 때다.

니즈를 넘은 원츠를 이끌 디자인이 필요하기도…

Ui :

HCI(Human-Computer Interaction) 및 인터랙션 디자인 분야에서 사용하는 개념.

유저 인터페이스, 즉 시스템(그래픽 인터페이스, 물리적 인터랙션)과 사람 간의 상호작용이 발생하는 지점을 디자인하는 것.

함께 알아두면 좋은 용어

HCI (Human-Computer Interaction) : 인간과 컴퓨터 간의 상호작용에 대해 연구하는 분야

CX :  고객 경험.  고객이 브랜드와 제품을 어떻게 경험하는가. 고객 여정의 모든 측면에서 고객이 경험하게 되는 느낌과 인상.

UX와 구분되는 지점은 느낌과 인상에 더 집중한다는 점.

BX : 브랜드 경험. 브랜드와 상호작용할 때 갖는 전반적인 인식. 브랜드를 생각했을 때 떠오르는 감정 등.

큰 범위에서 UX와 CX는 BX에 포함된다고 할 수 있다.

애플의 Human Interface Guidelines, 구글의 Material Design

디자인 가이드라인이란 일관된 디자인을 하기 위한 지침서다. 디자인을 할 때 지켜야 할 원칙과 규칙.

용어는 다르지만 반복되는 디자인의 원칙을 정해둔 것이라는 점에서 기본적인 개념은 같다.

무엇보다 디자이너라면 애플과 구글의 ios와 안드로이드에서 벗어날 수 없는 바, 두 다자인 가이드라인을 읽어야 한다.

애플 Human Interface Guidelines(이하 히그)

히그는 애플 생태계 내에서 플랫폼 간의 흐름이 끊임 없이 이어질 수 있는 경험을 제공할 수 있도록 지원하기 위해 만들어 졌다.

히그를 지켜야 앱등록에 있어서 더욱 유리하기도 하다.

히그의 디자인 원칙 3가지

계층: 명확한 시각적 계층으로 구분하라

조화: 하드웨어와 소프트웨어의 동심원적 디자인에 맞춰 인터페이스 요소와 기기 간의 조화를 이뤄라.

일관성: 플랫폼 구조를 사용하여 다양한 크기의 윈도우와 디스플레이 환경에서도 지속적으로 적응하는 일관된 디자인.

디자이너인 우리가 주목해야 할 것은?

1)앱사이즈, 앱 기준

2)버튼의 역할, 종류별 스타일 가이드 : 마우스가 호버되었을 때, 클릭했을 때 달라지는…

3)모달리티 : iOS에서 볼 수 있는 특징적인 컴포넌트. 페이지 전환을 할 때, 임시로 잠깐 무엇을 하고 있다는 걸 보여주기 위해 모달뷰를 사용.

구글 Material Design

접근성: 모두가 사용할 수 있는, 사용성이 높은 디자인. 손가락이 두꺼운 사람은 버튼을 누르기 쉽지 않다. 그걸 고려해서 최소 48픽셀은 주어야 한다. 색약인들을 위해 명도대비가 3:1은 되어야 한다....등

반응형 레이아웃: 다양한 기기에서 흐름이 끊김없이 자연스럽게 이어질 수 있도록, 레이아웃 가이드가 필요.

엘리베이션: 플랫디자인의 장점을 살리면서도 빛에 따른 종이의 그림자 효과를 통해 입체감을 살림. 높이에 따라 컬러와 그림자가 어떻게 달라지는지.

Ux/Ui의 역사와 트렌드

1)리얼 메타포

1990-GUI를 좀더 친숙하게 사용할 수 있도록, 실제 물건을 모방해 디자인함. 디자인은 혁신적이었으나, 실제 사용성이 좋지 않았다고 한다.

2)스큐어모피즘

애플이 선보임. 실제 물건의 특징을 최대한 반영. 리얼메타포와 의도 자체는 비슷.

3)플랫디자인

어느정도 GUI에 익숙해졌고, 스크린 크기가 다양해지면서 반응형으로 효율적으로 디자인할 필요성이 대두되며 등장.

4)뉴모피즘

스큐어모피즘과 플랫디자인의 장점을 결합. 플랫디자인의 시각적 구분의 불분명성을 스큐어 모피즘의 입체감을 가져와 시각적 보완.

5)글래스모피즘

투명도와 흐릿함을 이용해 시각적 위계를 나타냄. 깊이감과 움직임을 더욱 명확하게 나타냄. 간혹 시인성이 떨어지는 경우도 있음.

<1주차 과제>

저는 스포티파이의 검색 플로우와 아이콘버튼을 각각 HIG와 Material Design에 근거해 분석해보았습니다.

HIG에 따르면, 검색 범위를 지정하거나 결과를 필터링하는 등의 정밀한 검색 서비스를 제공할 것을 권장한다. 그러나 스포티파이의 경우, 가령 '빅뱅'을 검색하면 곡과 아티스트, 플레이리스트와 팟캐스트까지 다양한 형식의 결과가 구분 없이 나열된다.

검색을 하기 앞서 사용자 데이터에 기반한 브라우징 기능을 통해 다양한 콘텐츠를 제안하거나 최근 검색 기록을 남겨 빠른 탐색을 가능케 하는 것은 좋지만, home 페이지가 제공하는 서비스와 크게 차이가 없다.

스포티파이의 네비게이션 속 버튼은 아이콘버튼으로 구현되어 있다. Material Design에서는 아이콘 버튼의 토글을 시각화하는 데에 윤곽선 스타일과 채워진 스타일로 구현할 것을 권장한다. 스포티파이의 네비게이션 버튼 또한 같은 방식으로 토글을 시각화한다. 그러나 배경을 두지 않아 더욱 모던하고 미니멀리즘한 분위기를 연출하였다.

디자인싱킹은 디자이너가 생각하는 방식으로 문제를 창의적으로 해결하는 과정이다. 디자인의 영역을 넘어 다양한 상황과 맥락에서 문제점을 찾고 해결하는 접근 방법으로 활용되며 더욱 발전하고 있다.

논리적으로 제품을 만들 때 사용할 수 있는 프레임워크다. 제품을 만드는 ‘방법론’

공감하기>>문제정의하기>>아이디어 발산>>프로토타입>>테스트

일방향은 아님. 유기적으로 뒤로 갈 수 있음.

데이터드리븐과 디자인싱킹

현재 데이터 드리븐이 매우 중요해지고 있다.

데이터를 중심으로 의사결정을 한다는 것.

사용자의 행동이 데이터로 쌓이고, 이를 활용하여 사용자를 이해하는 것.

데이터를 해석하는 것이 중요.

디자인 싱킹을 통해 데이터라는 도구를 체계적으로 활용해야 한다. 그게 우리의 목표.

1)공감하기

회사의 매출은 사용자로부터 나오기 때문에… 사용자를 조사하고 분석하는 것은 매우 중요.

사용자를 완벽히 이해해야 한다. 우리의 주인공!!
사용자를 이해하는 시작점이 바로 ‘공감하기’

>a-e-i-o-u 관찰법 : 사용자를 관찰하거나 해석할 수 있는 5가지 정보분류 체계

활동activities: 어떤 움직임을 보이고 어떻게 반응하고, 어떤 제스쳐를 하는가.

환경environments: 활동이 일어나는 모든 시간적 공간적 요소. 앱 너머의 사용자들의 공간.

상호작용interaction: 관찰하는 대상이 어떤 것과 영향을 주고 받는지. 사람, 사물, 사건 등 다양한 관계에서 일어나는 특별한 상호작용, 루틴에는 무엇이 있나.

사물object: 사물이 어떻게 쓰이고 있는지, 대상의 주변으로 눈에 띄는 사물은 뭔지.

유저user: 사용자 외에 영향을 받는 간접사용자? 구체적인 행동이나 니즈. 역할, 성향 등.

>공감지도 : 생각, 느낌, 말과 행동, 유저가 보는 것, 듣는 것 이러한 체계에 맞추어서 유저를 생각해보고, 프레임을 가지고 유저를 가늠해보는 것.

>인터뷰 : 사용자를 직접 만나서 질문을 던지고 대답을 들으며 정보를 얻는 것.

목적을 분명하게 설정하여, 대답을 듣기에 적절한 사용자그룹을 선택. 이를 스크리닝이라고 한다. 인터뷰이는 5명 정도. 대답을 통해 경향성을 추출한다. 예, 아니오로 대답할 수 있는 질문보다는 개방형 질문을 하는 것.

2)문제정의하기

공감으로부터 얻은 정보를 해석하여 사용자가 어떤 불편함을 느끼는 지점을 발견하는 단계.

페인포인트. 문제정의 단계에서 사용할 수 있는 방법론.

>친화도분석 : 정보를 무작위로 최대한 많이 수집하고, 유사한 그룹으로 묶어서 결과를 정리.

그루핑된 결과를 보며 인사이트 도출.

>페르소나 : 제품의 사용자를 대표하는 가상의 인물.

사용자를 더 잘 이해하기 위해 가상의 페르소나를 설정. 페르소나와 브랜드의 관계맺기도 필요. 인터뷰, 서베이, 리서치 등 사용자에 대한 정보를 몹고, 페르소나 프레임에 맞춰 정리해보기.

>5whys : 유저가 가진 문제의 근본적인 원인을 파악하기 위해 5가지 질문을 해보는 것.

질문을 통해서 문제의 본질에 가까이 가는 것. 표면적 문제가 아니라 속 뜻을 가늠하기.

발견한 이슈가 왜 발생했나? > 대답을 적고, 그 대답에 대한 질문을 또 해보는 것. 계속 왜? 왜? 하면서 근본적 원인을 탐색.

>사용자여정지도 : 사용자가 제품을 만나는 시점부터 나가는 시점가지의 경험의 흐름을 정리 및 분석. 행동을 기준으로 여정을 단계화한다. 각각의 터치포인트마다 사용자의 행동, 생각, 감정, 니즈 등을 자세히 적어본다.

3)아이디어 발산하기

> HMW? : 만약 ~할 수 있다면 어떨까? 라고 질문을 사용해 가정과 상상 속에서 아이디어를 이끌어내는 방법.

>scamper : 브레인스토밍 기법 중 하나. 7개의 질문을 던짐.

대체하기-a대신 b를 쓰면 어떨까?

결합하기-a와 b를 합쳐보면?

응용하기-a를 b이외에도 c에 사용해보자.

수정, 확대, 축소하기

다르게 활용하기

제거하기-a의 일부를 제거해보면 어떨까?

역발상하기-a>b를 b>a로 바꿔보면?

>브레인스토밍 : 집단지성을 활용하는 방법. 최대한 많은 아이디어를 내보기. 다양한 아이디어가 필요할 때 사용. 질보다 양.

>yes and? : 상대방의 말에 우선 동의를 한 뒤에 그리고를 붙여서 문장을 이어보는 것.

4)프로토타입 만들기

최소기능을 중심으로 빠르게 시험버전을 만들어보는 단계.

MVP(minimum viable product) 목적을 달성하기 위해서 최소한의 기능만 구현한 제품.

리소스를 효율적으로 쓰기 위해 핵심 기능만 만들어보는 것.

빠르게 아이디어의 가능성을 검증하는 것.

>와이어프레임 : 화면의 인터페이스를 단순한 선과 도형으로 표현.

>목업 : 실제 프로덕트의 시각적 컨셉을 담은 화면. 컨셉츄얼한 화면 몇 가지를 골라 그림.

>프로토타입 : 와이어프레임이나 목업화면에서 실제 움직임을 구현한 것. 실제 제품을 개발하기 전에 사용성 평가. 인비전이나, 피그마 자체 프로토타이핑ㅇㄹ 이용하여 동작 구현.

최종버전과 얼마나 유사하게 프로토타이핑됐는가.

와이어프레임 정도는 시각적 부분이 고려되지 않음. 로우피 프로토타입. 초기에 사용.

하이피 프로토타입은 최종 제품과 유사한 수준으로 구현됨, 구체적 기능이나 화면의 사용성을 시험하고 싶을 때. 사용자의 몰입한 경험을 테스트하고 싶을 때.

5)테스트

프로토타입을 사용자가 직접 사용해보게 하고 피드백 받는 단계.

가설이 맞았는지, 틀렸는지를 확인한 후 다시 문제정의로 돌아가 사용자의 관점에서 다듬음.

>사용성테스트 : 사용자에게 직접 제품을 보여주고 평가 받는 것. 진행자와 사용자, 관찰자, 제품이 필요함. 평가하고 싶은 내용을 시나리오로 준비하고 참가자에게 수행하도록 안내한다. 테스트가 끝난 후 발견한 문제점을 모아 개선점을 도출.

>휴리스틱 평가 : 일종의 체크리스트. 전문적 평가자가 독립적으로 평가.

>린캔버스 : 9개 항목으로 구성된 체크리스트. 유저의 니즈와 사업성 평가를 동시에 체크.

>역할극 : 실제 제품을 사용하는 상황을 가정하고, 사용자 역할을 대신해보면서 문제점을 찾아보기.

디자인원칙

인지심리학의 관점에서 디자인할 때 지켜야 할 규칙

디자인 원칙에 기반해 디자인하면 편안하게 느끼고 자연스럽게 행동하도록 유도할 수 있음.

게슈탈트 심리학

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

착시현상. 뇌는 대상을 있는 그대로 받아들이지 않는다. 정보 중 필요 없는 것은 지우고 기억하기 쉬운 형태로 정리해 받아들임. 통일성, 연속성, 유사성을 기대하고 본다. 그렇지 않으면 몰입이 깨져버림.

>유사성 : 크기, 형태, 방향, 색 등의 특성이 비슷한 것끼리 그룹핑. 색상끼리의 유사성이 제일 큼.

>근접성 : 가까운 것끼리 그룹핑하는 것. 가령 같은 위계의 정보는 근접하게 두는 것. 색상의 유사성보다 근접성이 더 큰 힘을 가짐. 더 강력한 관계 형성 방법.

>폐쇄성 : 공백이 있더라도, 틈이나 간격을 메워서 이해하는 것. 가로스크롤은 일부러 잘린 화면을 남겨두어서, 여기도 내용이 있어요! 라는 메시지를 전달한다.

>연속성 : 수평강세, 수직강세 등을 통해 방향성을 만들어내고, 그룹핑하는 것.

>공통성의 원리 : 같은 방향으로 움직이는 것끼리 그룹핑. 모션에서 주로 사용.

UX 비주얼 디자인 원칙

시각적으로 매력적인 이유에는 논리적인 근거가 있다.

데이터를 바탕으로 증명이된 시각적 원칙.

>스케일의 원칙 : 상대적인 크기를 사용하여 구성의 중요도와 순위를 표현. 크기가 크면 좀 더 주목하게 됨. 시각적으로 보기 좋은 디자인은 3가지 이하의 크기를 사용. 너무 단계를 크게 나누면 정보의 양이 많아지고, 어지러워진다…

>시각적 위계 : 시각적 위계는 크기, 색상, 간격, 배치 등을 통해 표현할 수 있음. 강한 요소에서 약한 요소로 흐름.  두껍고 큰 폰트, 채도가 높고 색상 대비가 큰 색 등. 그런데 너무 여기저기 대비해버리면 안 됨.

>균형 : 비대칭적으로 구성을 하더라도 양쪽이 가진 시각적 힘이 비슷하도록.

>대비 : 특정 부분을 사용자에게 돋보이게 하고 싶을 때 사용.

UXUI 심리학 법칙

사람의 마음에 대한 이해를 바탕으로 디자인하기.

>제이콥의 법칙 : 익숙한 지식과 경험을 바탕으로 비슷하게 사용하려고 시도… 보편적이고 익숙한 경험을 따라야 한다.

>멘탈모델 : 다양한 대상에 대해 갖고 있는 생각 패턴. 가령 스마트폰에서 사진을 확대할 때 두 손가락을 오므렸다 펼침. 어던 것을 익숙하게 생각하고, 기존의 방법을 어떻게 활용할 것인지 생각하기. 스큐어모피즘의 사례…

>피츠의 법칙 : 사용자가 인터랙션해야 하는 대상의 크기가 크고 거리가 가까워야 사용성이 좋다.

충분하게 터치 대상의 크기가 커야하고 손가락이 쉽게 닿을 수 있는 위치에 놓아야 한다. 오른손의 엄지가 잘 닿는 부분. 대부분 중앙과 엄지와 가까운 아래. 왼쪽 위는 사용성 떨어짐.

>힉의 법칙 : 선택지의 개수가 높아질 수록 복잡해진다. 처리할 정보가 많아질 수록 이탈하게 되는 것. 쿠팡의 로켓 필터를 생각해봐… 선택의 다양성보다 적당한 선택지가 효율적인 소비를 이끔. 선택지를 최소화해보는 것도 나쁘지 않음.

또한 한 화면에서 정보를 우다다 주는 것보다 단계별로 정보를 분산하는 것도 좋음. 예를 들어 휴대폰 인증할 때 처음에 이름 입력칸만 나오고 이후에 전화번호랑 생년월일 나오는 식. 더 접근하기 편함. 어려운 과정을 단순한 단계 여러 개로 분할하여 쉽게 느껴지게 만드는 것.

>밀러의 법칙 : 기억할 수 있는 정보의 수는 7(+2/-2) 정도. 따라서 정보를 덩어리지어주는 게 중요하다. 당연히 메뉴나 항목을 무조건 7개 이하로 제한하는 건 아님.

기업의 디자인 원칙

기업의 가이드를 참고할만도 하다. 심미적 UI와 사용성 높은 인터랙션을 추구. 이런 게 오픈소스로 있다면 참고하면 좋을듯.