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

디자인카타

UXUI 디자인 입문 4주차

UXUI 디자인 입문 5주차 ~5-3

 

 

 

디자인카타

A 선택

35%의 사람이 A 선택

 

왜 해당 UI가 더 좋은지 작성합니다.
· 이미지에 '품절'이라는 표시가 없다면, 하나있는 버튼에 '품절'이라는 문구를 명확히 표시하고 부가적으로 '알림 신청'을 띄우는 것이 좋을 것 같음

· 사용자가 상품의 상태를 한번에 인지할 수 있고, 다음 행동으로 자연스럽게 이어나갈 수 있음

 

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

· 버튼이 두개인 경우에는 '품절' 버튼과 '재입고 알림 신청'을 나눠서 보여줄 수 있어 괜찮지만, 버튼이 하나일 경우 '재입고 알림 신청'만 표시된다면 '품절'된 상태임을 한 눈에 알아보기 어려움

· B처럼 이미지 품절표시 & 버튼 품절표시 둘다 없을 경우 품절 여부를 직관적으로 파악하지 못함 (두번생각하게됨)

 

 

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

세 곳만 봐도 '품절'과 '재입고 알림 신청' 을 따로 나눠놨다

 

A 1: B 3

B > A의 저 '재입고 알림 받기'의 형태는 '마감 임박'이 더 잘 어울릴거 같음

 

 

 

UXUI 디자인 입문 4주차

디자인 툴

 

디자인 툴

인터페이스 디자인 툴

▷ 디지털 제품의 화면 인터페이스를 그리기 위해 사용

▷ 피그마, 스케치, XD

· 주로 벡터 방식을 기반으로 함

 

그래픽 디자인 툴

▷ 비주얼 그래픽 이미지를 만들 때 사용

▷ 포토샵(비트맵), 일러스트레이터(벡터)

 

3D 그래픽 디자인 툴

▷ 3차원의 그래픽을 만들 때 사용

▷ 시네마 4D, 블렌더

 

모션 그래픽 디자인 툴

▷ 그래픽 리소스를 활용해서 영상을 만들거나 촬영한 영상을 편집할 때 사용

▷ 프리미어, 애프터이펙트

 

 

 

비트맵 이미지

픽셀

· 디지털 이미지를 구성하는 최소 단위의 점

▷ 비트 정보를 가진 픽셀이 모여 만들어진> 비트맵 이미지

▷.jpeg, .jpg, .png, .gif

 

장점

▷ 벡터보다 정교하게 이미지 표현

 

단점

▷ 이미지 안에 픽셀 수가 많을수록 품질이 좋아지지만, 용량 커짐

▷ 이미지 크기를 편집하면 원본 이미지의 픽셀 수가 변해 손상

벡터 이미지

▷ 그래픽을 수학적인 함수 공식으로 표현한 것

▷ .svg, .eps, .ai

 

장점

▷ 좌표계(x.y)의 점으로 표현하는 것이기 때문에 이미지를 줄이거나 키워도 손상X

▷ 좌표가 적힌 텍스트 파일로 저장되기 때문에 용량이 매우 적음

 

단점

▷ 색 표현 한계. 사진 같은 이미지 그래픽의 작업 어려움

▷ 복잡한 이미지를 벡터로 만들면 파일 용량이 매우 커질 수 있음

▷ 사용하는 곳에 따라 호환성에 문제가 생길 수 있음 (사용할 수 있는지 먼저 확인!)

 

피그마, 스케치, XD

공통 기능

▷ 벡터 기반 그래픽 편집 (반응형을 위함)

▷ 간단한 Lo-fi 프로토타이핑

▷ dex mode를 통한 그래픽 > 코드 변환

 

피그마

▷ 클라우드 기반, 멀티 플랫폼 지원

▷ 전 세계에서 가장 많이 쓰는 인터페이스 툴

스케치

▷ 개인의 로컬 컴퓨터 기반으로 동작. 안정적

▷ 피그마 이전까지 가장 많이 쓰고, 인기 있는 인터페이스 툴

▷ MacOS 기반 프로그램이라 애플 컴퓨터를 가진 사람만 사용 가능 단점

어도비XD

▷ 파일을 클라우드 형태로도 저장할 수 있지만, 기본적으로는 로컬 파일로 저장하는 방식이라 여러 사람이 다 함께 작업하기 좋지 않음

 

프로토타이핑 툴

프로토타이핑 툴

 

▷ 화면의 움직임이나 인터랙션을 구현할 수 있도록 도와줌

▷ 실제로 개발하지 않고 아이디어나 컨셉 테스트 & 팀원들에게 디자인 공유

▷ 구현 정도에 따라 Lo-fi 프로토아이핑 툴과 Hi-fi 프로토타이핑 툴로 나뉨

 

인터랙션 디자인

제품에서 말하는 인터랙션 > 사용자가 제품을 사용하면서 반응을 주고받는 것

▷ 사용자가 제품을 사용하면서 적절한 반응을 주고받고 막힘없이 서로 간에 소통하는 것을 도움

 

프로토타입이 중요한 이유 > 인터랙션 디자인을 테스트하기 위해

▷ 디자인 정지된 화면이기 때문에 실제 사용자가 제품을 이용하는 과정을 담지 못함

▷ UX는 정지된 화면이 아니라 서로 소통하는 인터랙션 과정에서 생겨나는 경험

▷ 사용자가 어려움 없이 화면 간을 이동하는, 원하는 기능을 찾고, 잘 사용하는지 보려면 동작하는 프로토타입으로 테스트하는게 정확함

 

피그마 프로토타이핑, 프로토타이, 프레이머

프로토타이

▷ 코딩없이 실제 제품과 비슷한 수준의 프로토타입을 만들 수 있음

▷ 눈에 보이는 GUI를 클릭해서 작업할 수 있어 코드가 어려운 디자이너도 편리하게 사용 

 

특징

▷ Hi-fi 수준 기능

·  키패드로 텍스트를 입력하거나 입력한 텍스트를 전송하는 것처럼 보이게 할 수 있음

▷ Conditions (조건부 트리거)

·  특정 상황일 때 이동하거나 색상이 변하는 등의 조건을 걸 수 있음

프레이머

▷ 코드 기반으로 실제 제품과 가장 유사한 수준 Hi-fi 프로토타입

▷ 인터페이스 디자인 툴의 기능도 함께 제공해서 한 번에 작업 가능

▷ 만든 프로토타이핑을 실제 제품으로 배포까지 가능

 

특징

▷ 재사용성

코드 재사용성

· 개발 언어인 React를 기반으로 코드 작성

컴포넌트 재사용성

· 특정 애니메이션이나 조건을 정의한 컴포넌트를 여러 번 재사용할 수 있음

 

▷ CMS

· Content Management System 콘텐츠 관리 시스템

· 콘텐츠를 작성하고 데이터 관리

· 등록한 데이터를 이용해 리스트나 상세 화면에 노출되도록 활용할 수 있음

· 배포된 화면을 분석할 수 있는 Analytics 기능도 제공> 방문자 수와 어떤 경로로 들어왔는지 등 확인 가능

 

UXUI 디자인 입문 5주차 ~5-3

디자인 원칙

▷ 인지심리학의 관점에서 디자인할 때 지켜야 할 규칙을 정해놓은 것

인간이 어떻게 보고, 생각하고, 받아들이는 지를 연구하는 학문

▷ 디자인 원칙은 많은 사람들이 비슷하게 느끼고,  행동하는 방식에 기초해 디자인하는 방법 제시

▷ 게슈탈트 심리학, UX 비주얼 디자인 원칙, UX/UI 심리학 법칙, 기업의 디자인 원칙

 

게슈탈트 심리학

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

▷ 착시 현상

· 제품을 이용하는 사용자의 의식은 계속해서 화면 구성의 통일성, 연속성, 유사성을 기대함

· 화면이 기대한 대로 구성되어 있지 않다면 사용자의 몰입이 깨지고 제품을 이탈하는 이유가 됨

 유사성의 원리

· 크기나 형태, 방향, 색 등의 특성이 비슷한 것끼리 묶어서 지각하려는 경향

▷ 모양을 이용한 유사 관계 형성

· 모양의 그룹화 효과는 크기, 색의 이용한 것보다 훨씬 약함

▷ 크기를 이용한 유사 관계 형성

· 크기가 더 큰 사각형이 주변의 다른 사각형보다 더 중요하게 보임

▷ 색상을 이용한 유사 관계 형성

· 유사성은 색상에 큰 영향을 받음

▷ 방향을 이용한 유사 관계 형성

· 특정 요소만 방향을 바꾸면 그 요소들끼리 별도의 그룹 형성

 

근접성의 원리

· 가까운 것끼리 묶어서 지각하려는 경향

▷ 여백을 사용한 근접 관계 형성

· 모양이 달라도 여백을 두고 나눠진 요소들끼리 서로 그룹화 되어 보임

· 색상의 유사성보다 여백을 사이에 둔 근접성이 더 큰 힘을 가짐

 

폐쇄성의 원리

· 공백이 있더라도 틈이나 간격을 매워서 닫힌 형태로 인식하려는 경향

 

연속성의 원리

· 연속적으로 직선이나 곡선을 이루는 요소를 잘 인지하는 경향

 

공통성의 원리

· 같은 방향으로 움직이는 것들끼리 더 관련성이 높다고 인식하는 경향

· 모션 그래픽에서 자주 사용

 

 

UX 비주얼 디자인 원칙

▷ UX에 영향을 끼치는 시각 디자인의 원칙을 정리한 것

▷ 원칙의 힘

· 시각적으로 매력적인 이유를 근거를 들어 설명할 수 있도록 도와줌

· 심미적으로 아름다울 뿐만 아니라 사용성도 높여줌

· 사용자가 제품에 몰입하는 것을 도와주고 쓰기에도 편리함

스케일 Scale

· 상대적인 크기를 사용하여 구성의 중요도와 순위를 표시하는 것

 

시각적 위계 Visual hierachy

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

· 크기, 색상, 간격, 배치 등을 통해 표현

· 2~3개 정도의 텍스트 크기 (large, medium, small)

 

균형 Balance

· 디자인 요소 간에 적당한 배열이나 비율을 주는 것

▷ 대칭

· 가상의 중심축으로 기준으로 대칭으로 분포

· 안정적 & 정적인(지루) 느낌

▷ 비대칭

· 가상의 중심축을 기준으로 비대칭으로 분포

· 역동적 & 신선한 느낌

▷ 방사형

· 중앙의 점을 기준으로 원형으로 배치한 것

· 시선을 중앙에 집중

 

대비 Contrast

· 눈에 띄게 구별되도록 강조하기 위해 두 요소 간의 차이를 두는 것

· 크기나 색상을 사용해 두 디자인 요소 간에 뚜렷한 차이

· 덜 중요한 텍스트의 강조를 줄이기 위해 배경과의 명도 차이를 너무 줄이지 않도록 주의