TIL_2W1D_화면 디자인 실습 - 목록 화면 만들기
리스트 컴포넌트는 컴포넌트 종류 중 컨테이너에 해당, 동일한 형태의 정보 덩어리를 반복적인 패턴으로 보여줄 때 사용
화면 디자인 실습 - 목록 화면 만들기
화면 디자인 실습 - 상세 화면 만들기
화면 디자인 실습 - 로그인 화면 만들기
프로토타입의 원래 뜻은 시제품임
디지털 제품에선 실제 제품을 만들지 않고 아이디어를 테스트해볼 수 있는 것을 뜻함
구현하는 정도에 따라 낮은 단계와 높은 단계를 나눌 수 있음
프로토타입을 만들거나 프로토타입을 사용해 테스트하는 것을 프로토타이핑이라고 함
프로토타입은 왜 만드는 걸까?
실제 제품을 만들지 않고 아이디어를 검증해 볼 수 있음
팀 구성원들과 시각적인 결과물로 소통할 수 있음
부족하거나 놓친 부분을 확인할 수 있음
피그마 프로토타입의 장단점
장점
직관적임
빠르게 만들 수 있음
단점
프로토타입은 3가지 구성요소로 이루어짐
피그마 프로토타입 모드
프리뷰 모드는 디자인 중간에 작업 중인 화면과 흐름을 빠르게 확인하고 논의할 때 사용하며 프로토타입 모드가 아니라 디자인 중에도 바로 실행해볼 수 있음
프레젠테이션 모드는 프로토타입 공유 시 사용하거나 프레젠테이션 형태로 만들 수 있음
오버플로우는 프레임 밖으로 컨텐츠가 넘어가는 것을 말함
프레임에 오버플로우가 발생하면, 프레임 밖으로 넘어간 콘텐츠를 스크롤로 보여줄 수 있음
즉, 스크롤이 되게 하려면 프레임보다 콘텐츠가 더 길어서 넘쳐야 함
오버플로우가 되지 않으면 스크롤이 생기지 않음
스크롤 컨테이너는 오버플로우가 생긴 프레임을 스크롤로 만들어주는 기본적인 프로토타입 기능임
스크롤을 만드려면 실제로 스크롤 되어야 하는 콘텐츠, 스크롤 속성을 적용할 컨테이너가 있어야 함
스크롤 컨테이너 만들기
프로토타입의 흐름 하나하나는 플로우라고 부름
플로우는 트리거와 애니메이션, 액션으로 구성
트리거는 프로토타입의 플로우를 실행하는 조건
어떤 이벤트(사건)가 발생하면 실행할 건지를 설정
액션은 프로토타입의 플로우의 목적지이자 트리거로 인해 만들어지는 결과
어떤 이벤트가 발생하면 어떻게 되는지를 설정
트리거는 시작하는 조건, 액션은 실행하는 내용이며, 애니메이션은 액션을 어떻게 실행할지를 결정함
피그마 애니메이션의 종류
Instant 별도의 애니메이션 없이 즉각 실행
Dissolve 천천히 흐릿해지면서 화면 전환, 페이드인/아웃이라고도 함
Smart animate 이름이 같은 프레임들이 자연스럽게 움직이도록 만듦
Move in/out 현재 화면 위에 다음 화면을 덮거나 현재 화면이 벗겨지듯 전환
Push 현재 화면을 지정한 방향으로 밀면서 등장
Slide in/out 현재 화면을 지정한 방향으로 밀어 사라지게 하면서 등장
스마트 애니메이트
피그마 프로토타입에서 가장 중요한 애니메이션 기능임
이름이 같은 요소가 있다면, 화면을 이동할 때 그 요소의 변화를 자연스럽게 만들어주는 기능
스마트 애니메이트로 조작할 수 있는 속성
스마트 애니메이트 활용하기
디자인 핸드오프, 핸드오프는 '손을 떠나다'라는 뜻으로 개발자에게 전달하기 위해 디자인 사양을 정리한 문서
핸드오프를 자세하게 작성해야 내가 의도한 디자인대로 실제 개발이 가능
핸드오프 작성 시 지켜야 할 원칙
통일된 구성
최대한 자세하게
쉬운 언어로
핸드오프의 구성
디자인의 전체적인 구조
각 프레임의 크기 및 길이
각 프레임의 여백 및 간격
사용된 폰트 및 컬러 스타일 등
핸드오프 플러그인 사용하기
5주차 숙제
쉽다 쉬워
UX/UI란?
UI 디자인은 User Interface의 약자로, 제품과 사용자 사이에서 소통할 수 있도록 하는 실체적인 수단이나 매개체를 뜻함
주로 화면의 전체적인 구조와 시각적인 요소들을 디자인하는 것을 말함
시각적인 요소에는 레이아웃, 색상, 크기와 정렬, 컴포넌트라고 부르는 버튼, 아이콘, 이미지 등이 있음
UX 디자인은 User eXperience의 약자로, 사용자가 어떤 제품이나 서비스를 이용하면서 느끼는 총체적인 경험임
주로 어떤 제품에서 어떠한 감정을 불러일으키거나 특정한 경험을 할 수 있도록 이끄는 것을 말함
넓은 의미로 제품뿐만 아니라 무형의 서비스나 브랜드를 이용할 때 느끼는 모든 경험임
함께 알아두면 좋은 용어들
HCI는 Human Computer Interaction의 약자임
인간과 컴퓨터 간의 상호작용에 대해 연구하는 분야를 말하며, 대학원에서는 주로 UX/UI보다는 HCI라는 용어를 더 많이 사용함
연구 주된 목적은 사람이 컴퓨터를 더 쉽게 사용, 더 잘 활용할 수 있도록 개선하는 것
CX는 Customer Experience의 약자임
브랜드를 처음 만나는 순간부터 제품을 사용하는 고객 여정의 모든 측면에서 고객이 경험하는 느낌이나 인상을 말함
UX와 구분되는 특징은 느낌, 인상에 더 집중한다는 데에 있음
CS에는 고객 서비스(CS)가 포함
BX는 Brand Experience의 약자임
고객이 브랜드와 상호작용할 때 갖는 전반적인 인식, 브랜드 생각 시 떠오르는 감정 등을 의미
큰 범위에서 CX와 UX가 모두 BX에 포함된다고 볼 수 있음
Brand Identity라고 부르는 것들 이름, 로고, 컬러, 슬로건 등이 포함되며, 예를 들면 나이키의 스우시 로고와 Just Do it 슬로건, 조던 등이 BX임
UX/UI 디자이너의 역할
UI 디자이너는 시각적 요소를 활용하여 화면 간 관계와 인터페이스 구성을 디자인하는 것에 집중
주 업무는 레이아웃, 색상, 크기와 정렬, 컴포넌트, 아이콘, 이미지 등을 디자인하는 것
회사에 따라서 GUI 디자이너라고도 부름
UX 디자이너는 사용자 분석 데이터를 토대로 편리한 경험을 이끌어내기 위한 일 집중
주 업무는 유저 리서치와 테스트, 정보 구조 설계, 페르소나와 유저 시나리오 작성 등
UI 디자이너보다 업무에서 조사와 분석 비중이 큼
프로덕트 디자이너는 제품의 특정 부분이 아니라 사용자가 경험하는 제품의 시작과 끝 모두를 담당하며, 반복적인 개선을 통해 제품을 고도화하는 일에 집중함
주 업무는 문제 정의, 가설 설정, 솔루션 도출, 테스트 등이 있음
요새 다수 기업, 특히 스타트업에서 UX/UI 디자이너를 아울러 프로덕트 디자이너로 부르고 있음
디자인 가이드라인은 일관된 디자인을 하기 위한 지침서로, 디자인 시 지켜야 할 원칙과 규칙을 제안함
컬러, 버튼, 폰트, 컴포넌트 디자인의 스타일부터 브랜드 철학이나 디자인 원칙까지 다양한 것들이 포함될 수 있음
기업에 따라 디자인 가이드라인을 디자인 시스템이나 스타일 가이드로 나눠 부르기도 하나 기본적인 개념은 동일함
디자인 가이드라인의 장점
기업
브랜드의 아이덴티티를 강력하게 유지할 수 있음
디자이너 간의 결과물 수준을 상향 평준화할 수 있음
디자이너
미리 정의된 컴포넌트 재사용하며 불필요하게 반복되는 업무를 줄이고 효율적으로 일할 수 있음
사용자
원칙에 따라 디자인된 화면을 통해 일관된 사용자 경험을 얻을 수 있음
⭐ 애플의 Human Interface Guidelines과 구글의 Material Design
읽어야 하는 이유
애플은 iOS, 구글은 안드로이드 운영체제를 만드는 회사, iOS와 안드로이드는 전 세계 운영체제 시장의 99%를 차지함
대부분의 앱은 이 두 운영체제 위에서 동작하기 때문에 운영체제 규칙이 디자인에도 영향을 줌
일반적으로 한 화면을 디자인해 iOS와 안드로이드 모두 동일하게 적용하나, 일부 특정한 스타일은 운영체제 이슈로 똑같이 적용할 수 없는 경우가 생김
두 디자인 가이드라인을 읽으며 얻을 수 있는 것
사용자 경험을 위해 인터페이스를 설계하는 기본 원칙을 배울 수 있음
애플과 구글의 서로 다른 UX/UI 지침을 비교할 수 있음
애플과 구글에서 제공하는 리소스를 다운받아 살펴보고 디자인에 활용할 수 있음
애플의 Human Interface Guidelines
HIG는 애플 생태계 내에서 플랫폼 간의 흐름이 끊김이 없이 이어질 수 있는 경험을 제공할 수 있도록 지원하기 위해 만들어짐
앱 인터페이스를 더욱 일관되고 직관적으로 만들어 사용자 경험 향상하는 역할을 함
앱스토어에 등록하는 모든 애플리케이션은 심사를 받으며, HIG를 지키지 않으면 앱 등록을 거부당할 수 있으므로 가이드라인을 위반하지 않도록 꼼꼼히 살펴야 함
구글의 Material Design
머티리얼 디자인은 다양한 Android 기기에서 공통으로 적용할 수 있는 일관된 디자인 가이드를 만들기 위해 탄생
애플과 달리 구글은 안드로이드 OS를 오픈 소스로 제공하다 보니 기기 사양도 무척 다양함
머티리얼 디자인 UI를 통해 동일한 유저 경험을 만들 수 있도록 하는 역할을 함
UX/UI의 역사와 트렌드
리얼 메타포는 1990년대, IBM HCI 디자인팀에서 초보자들도 컴퓨터를 쉽게 이용할 수 있도록 실제 물건을 모방해 디자인 한 것이 시초
대표적으로 IBM의 Real Thing 프로젝트가 있음
스큐어모피즘, 아이폰과 함께 등장한 양식
플랫디자인, 2013년 애플이 iOS7에서 처음 선보인 GUI 양식
뉴모피즘, 2020년부터 스큐어모피즘과 플랫디자인의 장점을 결합한 디자인 트렌드로 떠오르고 있는 양식 중 하나
HW. 내가 자주 쓰는 서비스 뜯어보기
CGV를 골랐음
CGV의 예매하기 버튼에 내한 나의 분석
좋은 점
화면에서 가장 중요한 액션에 FAB를 사용하였다는 점
아이콘이 명확하고 이해하기 쉬움
FAB 색상은 최소 3:1 비율을 충족해야 하며, 3.69:1 비율임
아쉬운 점
?
여러 점을 충족한 좋은 FAB 예시라고 생각함
디자인씽킹은 논리적으로 제품을 만들 수 있도록 도와주는 프레임워크 중 하나임
세상엔 제품을 만드는 다양한 방법이 있지만, 디자인씽킹이 가장 널리 알려져 있고 많이 사용하는 방법론임
5단계로 구성되어있음
공감하기 Empathy
인터뷰나 관찰 등의 다양한 방법으로 사용자와 공감대를 맞추고, 그들의 경험을 완전히 이해하기 위한 노력을 하는 단계
문제 정의하기 Define
공감으로 얻은 정보를 해석해 사용자가 불편함을 느끼는 지점을 발견하는 단계
아이디어 발산하기 ideate
다양한 아이디어를 내고, 그중에서 가장 적합한 아이디어를 선택하는 단계
프로토타입 만들기 Prototype
사용자가 아이디어를 경험할 수 있도록 구체적인 제품이나 서비스로 개발하는 단계
테스트하기 Test
프로토타입을 사용자가 직접 사용해 보게 하고 피드백을 받는 단계
이 5단계 프로세스는 꼭 1번에서 5번으로 한 방향으로 진행 되는 건 아니며, 필요에 따라 되돌아오기도 하고 일부를 반복하기도 함**
디자인씽킹의 역사
2008년, 미국 디자인 회사인 IDEO의 CEO인 Tim brown이 Harvard Business Review지에 'Design Thinking'을 기고하면서 알려짐
이후 2009년 독일 경영 솔루션 그룹 SAP 사의 설립자인 Hasso Plattner가 Stanford 대학교 대학원에 d.School 설립을 후원하며 확산
오늘날, 가장 대중적으로 알려진 디자인씽킹 모델 역시 스탠퍼드 대학의 디자인씽킹 5 steps model임
배워야 하는 이유
아이디어를 빠른 시간에 논리적, 현실적으로 눈에 보이는 것으로 만들 수 있도록 도와주는 도구이기 때문임
데이터드리븐은 데이터를 중심으로 의사결정 하는 것을 말함
데이터는 곧 사용자에 대한 이해를 의미
데이터드리븐이 중요한 이유
정확도 높은 의사결정을 할 수 있음
빠른 의사결정으로 제품 개발 속도를 높임
데이터드리븐과 디자인씽킹
데이터가 모든 정답을 말해주지는 않으며, 도구이므로 사용하는 사람에 따라 결과가 변화함
어떤 데이터를 보고, 어떻게 해석할지 결정하는 것은 사람의 몫
데이터를 활용해도 언제든 개인에 따라 주관적 의사 결정할 위험이 있음
디자인씽킹 1단계 공감하기 Empathy
디자인씽킹에서 가장 중요한 단계
회사는 매출을 내고 이익을 남겨야 하는 조직이며, 그 매출은 제품, 정확히는 그 제품을 쓰는 사용자한테서 나옴
제품을 쓰면서 회사에 돈을 벌어다 줄 사람이 사용자이기 때문에 끈질기게 사용자를 조사하고, 분석해서 더 많은 사용자가 제품을 잘 쓸 수 있도록 디자인해야 함
이 단계에서는 인터뷰나 관찰 등의 다양한 방법으로 사용자와 공감대를 맞추고, 그들의 경험을 완전히 이해하기 위한 노력을 해야함
공감대를 형성한 후 사용자의 충족되지 않은 욕구와 불편한 점 등을 파악하여 진짜 문제에 다가갈 수 있게 됨
AEIOU로 사용자 이해하기
활동 Activities
관찰하는 대상이 어떻게 움직이는지
사용자의 모든 행동을 눈여겨보는 것이 좋음
예로는 이야기를 나누는 중 먹거나 보인 행동, 특별한 움직임이나 반응, 제스처, 목적을 이루기 위해 선택한 방법
환경 Environments
관찰하는 곳이나 인터뷰하는 장소 주변
활동이 일어나는 모든 시간적, 공간적 요소들이 여기에 포함될 수 있음
예로는 공간의 조명, 흘러나오는 음악, 디지털 환경 너머의 물리적인 공간, 개인 공간 혹은 공용 공간
상호작용 Interactions
관찰하는 대상이 어떤 것과 영향을 주고 받는지
상호작용은 사람이나 사물, 사건 등 다양한 관계 사이에서 발생
예로는 사람들 간 혹은 사람, 사물, 환경 사이의 특별한 상호작용, 상호작용으로 인한 감정의 변화, 일상적으로 반복하는 루틴
사물 Objects
관찰하는 대상 주변으로 눈에 띄는 것들이 있는지
당연하게 있어야 하는 물건 말고도 특이한 물건은 없는지
예로는 사람 혹은 활동, 환경과 연관이 있는 것, 사물이 가진 원래의 뜻과 다르게 쓰이고 있는 것, 공간과 어울리지 않는 특이한 물건
사용자 Users
관찰하는 대상을 포함하여 주변에 있는 모든 사람
예로는 직접 사용자 외에 영향을 받는 간접 사용자, 대상의 구체적인 행동이나 니즈, 역할, 성향 등
