[내일배움캠프 14일차(3)] 피그마 활용 심화 수강

오늘 드디어 강의로만 보던 태길 튜터님 영접했다

따로 찾아가서 인사드렸는데

공감도 많이 해주시고

조언도 많이 해주시고 넘 따땃했다

또 찾아뵙겠슴둥

 

 

 

 

<피그마 활용 심화 1주차>

수업 목표

1️⃣ 피그마를 더 능숙하게 다루기 위한 배경 지식을 이해할 수 있다.

2️⃣ UI디자인에 필요한 심화 이론을 학습하고 적용할 수 있다.

 

 

 

 

 

다양한 환경에 대한 UI 차이 이해

1️⃣ 웹과 앱의 특성

	웹	앱
운영체제 제한	없음	안드로이드와 iOS앱 별도로 준비
접근성	웹브라우저에 주소만 입력하면 가능	앱마켓에서 설치해야 함
업데이트 난이도	업데이트하기 쉬움	앱마켓 심사를 통과해야 가능
인터랙션 및 UI	웹브라우저와 충돌하지 않는 선에서 가능	다야하게 사용할 수 있음
성능	다양한 기기에서 제약 없이 쓸 수 있지만 그만큼 카메라, GPS, 사진 보관함 등 성능 면에서 떨어짐	기기에 특화된 기능을 사용할 수 있지만 다양한 디바이스를 지원하게 만드는 것이 어려움
개인화	푸시나 알림을 제공하기 어려움	푸시 메시지를 보낼 수 있음

 

2️⃣ 대표적인 웹과 앱의 UI 차이

1) 페이지 이동

앱은 임의로 주소를 입력해서 이동할 수 없다.

반면 웹은 주소창에 URL을 입력하면 어디든 접근할 수 있다.

 

2) 뒤로가기

앱의 경우, 일반적으로 화면 상단의 아이콘 등 버튼을 눌러 화면을 이동한다.

반면, 웹의 경우 브라우저 자체 기능을 통해 이전 화면으로 돌아가는 것이 자유롭다.

 

💡 접근할 수 없는 화면에 뒤로가기를 통해 접근이 가능한 경우 결제가 2번 발생하거나

취소가 여러번 되는 등 치명적인 문제가 발생할 수 있어요.

 

3) 주요 메뉴 이동

모바일 웹에선 일반적으로 화면 상단에 주요 메뉴로 이동할 수 있는 UI를 배치한다.

앱에선 화면 하단에 고정된 탭을 배치해 주요 메뉴로 이동할 수 있도록 한다.

두 UI는 동일한 목적과 기능을 가지고 있지만, 웹과 앱에서 다르게 나타나는 대표적인 UI이다.

최근 모바일 웹들도 앱처럼 화면 하단에 고정된 메뉴를 놓는 걸로 바뀌고 있다.

 

4) 바텀 시트

바텀 시트의 경우 화면의 하단에 고정되어 있다.

앱에서는 바텀 시트를 다양한 용도로 활용하지만, 모바일 웹에서는 사용하기 까다롭다.

앱에서는 바텀 시트를 드래그해서 닫을 수 있지만, 모바일 웹에서는 드래그해서 닫기 어렵다.

 

3️⃣ OS별 차이

-운영체제(Operating System; OS)

앱이나 프로그램을 실행하는 배경이 되는 시스템을 뜻한다. 우리가 이야기하는 iOS나 안드로이드도 운영체제의 종류이다. MacOS나 윈도우는 노트북이나 데스크톱 같은 컴퓨터의 운영체제이다.

 

OS에 따라 UI를 다르게 사용하는 경우가 있다.

아이폰의 경우, 애플 로그인이 다른 로그인 수단에 비해 덜 중요하게 보이지 않도록 해야 한다.

또한 소셜 로그인이 있는 경우, 애플 로그인도 로그인 수단에 반드시 포함시켜야 한다.

 

1) iOS 홈 인디케이터

홈 인디케이터가 있는 경우, 하단에 고정된 UI들을 신경 써야 한다.

왼쪽은 안드로이드, 오른쪽은 아이폰이다. 화면 하단의 홈 인디케이터가 콘텐츠를 가리는 경우이다.

 

2) 안드로이드 네비게이션 바의 뒤로가기

안드로이드의 경우 뒤로가기 버튼이 기본 UI로 제공된다.

안드로이드에서 앱을 사용하다가 뒤로가기를 누르는 경우,

2가지의 경우(이전 화면, 상위 화면)가 존재해요.

왼쪽은 아이폰, 오른쪽은 안드로이드이다.

 

 

 

 

 

분기점과 그리드

1️⃣ 분기점(Breakpoint)

디스플레이의 해상도에 따라 각각 다른 화면을 보여주기 위한 기준점을 분기점이라고 한다.

사용자의 디바이스 화면 크기를 고려해서 디자인을 나눌 수 있어야 한다. 그 기준점이 분기점이다.

일반적으로 데스크탑, 태블릿, 모바일의 3가지 기준점을 세운다.

 

1) 분기점을 정할 때 생각하면 좋은 것

태블릿 해상도 대응

태블릿은 생략하거나, 태블릿 해상도 전체를 모바일 분기점으로 통합하는 경우도 많다.

태블릿 사용자가 데스크톱과 모바일에 비하면 매우 적기 때문이다.

또한 디자인과 개발해야 하는 화면 세트가 1개씩 더 늘어나기 때문이기도 하다.

하지만 온라인 강의나 교육은 태블릿으로 많이 하기 때문에, 태블릿 해상도도 신경 써야 한다.

 

2️⃣ 그리드(Grid)

그리드(Grid)는 화면에 디자인을 배치하는 가이드라인이다.

일반적으로는 세로 방향의 기둥들을 좌우로 세우는데, 가로 줄을 추가로 사용하는 경우도 있다.

디자인을 배치할 기준선이 되는 가상의 선을 긋고, 그 선에 맞춰서 레이아웃을 짜게 된다.

 

그리드를 사용하는 이유는 글과 그림들을 균형감 있게 배치하기 위해서이다.

또한 주목해서 읽어야 하는 부분을 강조하고,

적당한 간격을 만들어 더 잘 읽히게 하기도 하는 등 전체적인 완성도를 올리기 위해서이다.

웹에서 그리드를 사용하는 이유 역시 균형감과 완성도, 일관성을 위해서이다.

 

1) 그리드의 구조

일반적으로 데스크톱 화면을 기준으로 기둥은 12개를 사용한다.

12개를 사용하는 레이아웃을 12칼럼 그리드(12 Column Grid)라고 한다.

칼럼은 유닛(Unit)과 거터(Gutter)로 이루어져 있다.

유닛은 실제 콘텐츠를 정렬하는 기준선이고, 거터는 유닛과 유닛 사이의 여백이다.

한 개의 칼럼은 유닛 1개와 양쪽에 거터 절반씩을 합친 크기이다.

맨 양끝의 칼럼 끝에는 거터 절반이 남는데, 이건 좌우 여백으로 사용한다.

 

 

 

 

 

 

반응형과 적응형

1️⃣ 반응형 디자인

해상도의 변화에 실시간으로 반응한다.

반응(Respond)한다고 해서, 반응형은 영어로 Responsive라고 부른다.

2️⃣ 적응형 디자인

적응형 디자인은 한번 적응하면 움직이지 않은 고정된 디자인이다.

해상도가 변하더라도 반응을 하지 않거나 실시간으로 변하지 않는다.

적응(Adapt)한다고 해서, 적응형은 영어로 Adaptive라고 한다.

 

 

 

 

 

 

정보구조도와 플로우차트

제품을 하나의 건물에 비유한다면, IA는 층별 안내도, 플로우차트는 오시는 길이라고 할 수 있다.

 

1️⃣ 정보구조도 (IA)

보구조도의 영문 앞글자를 따서 IA로 부르기도 한다.

화면과 정보들이 어떤 구조로 연결 있는지를 나타내는 일종의 설계도라고 할 수 있다.

 

 

2️⃣ 화면흐름도 (Flowchart)

화면흐름도는 플로우차트라는 이름으로 더 많이 쓴다.

(유저플로우, 유즈케이스라고 부를 때도 있다.)

사용자가 어떤 과정으로 제품을 이용하는지를 시각적으로 정리한 순서도라고 할 수 있다.

 

 

 

 

 

 

와이어프레임

와이어프레임은 말 그대로 선(와이어)으로 그려진 화면이라는 뜻이다.

어떻게 만들지 논의하는 과정을 거치고 나면, 본격적인 디자인을 하기 전에 주로 하게 된다.

낮은 단계의 프로토타입이라는 뜻에서 Lo-fi Prototype 이라고 부를 때도 있다.

 

1️⃣ 와이어프레임을 만드는 이유

팀원 간의 다른 생각을 통일할 수 있고 협업을 원활하게 한다.

디자인을 관리하기 쉽고, 불필요한 부분에 시선을 뺏기지 않는다.

습관 형성 모델을 반복적으로 실험해 볼 수 있다.

 

2️⃣ 와이어프레임 그리는 법

1) 와이어프레임 규칙 정하기

와이어프레임에서 표현할 것과 표현하지 않을 것을 과감하게 고른다.

최대한 단순하고 빠르게 그릴 수 있도록 단색의 선을 사용하는 것을 권장한다.

 

2) 그리고자 하는 화면 스케치하기

최대한 단순하게 그리는 게 핵심이다.

시나리오에 필요하지 않은 부분은 과감하게 글자나 단순한 도형으로 대체한다.

텍스트의 경우 최대 길이를 가늠할 수 있도록 실제 사용할 내용으로 넣어주면 좋다.

 

3) 화면을 선으로 연결하기

화면과 화면을 선으로 연결해 주세요. 또는 특정 버튼이나 영역과 화면을 연결할 수도 있다.

 

 

 

 

 

 

<피그마 활용 심화 2주차>

수업 목표

1️⃣ 다양한 화면들을 놓고 역으로 분석하는 과정을 통해 디자인 의도를 추론해 볼 수 있다.

2️⃣ 클론 디자인을 통해 UI를 분석적으로 관찰하고 UI를 설계하는 패턴에 익숙해질 수 있다.

 

 

 

 

 

 

서비스 역으로 설계하기

1️⃣ 역설계의 개념

우리가 디자인을 할 때는 항상 만들어야 하는 결과와 목표가 있다.

그 결과나 목표를 처음부터 고민하는 것은 매우 어려운 일이다.

그럴때는, 내가 디자인하려는 것과 비슷한 서비스를 찾아보는 게 큰 도움이 된다.

이미 잘 만들어져 있는 서비스들을 참고하면, 내가 어떻게 해보면 좋을지 힌트를 찾기 쉽다.

그 과정을 역설계, 역기획이라고 부른다

2️⃣ 역설계에서 고려할 점

1) 디자인 자체보다는 그렇게 한 이유에 대해 생각한다.

2) 어떤 것이 유사하고, 어떤 것이 다른지 다각도로 관찰한다.

3) 사용자가 해야 하는 가장 중요한 행동을 중심으로 분석한다.

예를 들면, 뭔가를 팔아야 하는 서비스들은 사용자의 구매 행동이 제일 중요하다.

또 소셜미디어는 사용자가 자주 들어와서 다른 사람과 소통하는 게 제일 중요하다.

3️⃣ 역설계 과정 살펴보기

1) 도메인 및 레퍼런스로 삼을 서비스 확인하기

2) 역설계로 어떤 걸 확인하고 조사할 지 정하기

3) 조사 대상 화면 준비하기

4) 화면을 비교하며 분석한 내용 정리하기

 

 

 

 

 

 

클론 디자인과 규칙 찾아내기

1️⃣ 클론 디자인의 개념

Clone(복제하다) + Design : 디자인을 복제한다는 뜻으로, 다른 서비스의 디자인을 따라하면서 규칙과 스타일가이드를 분석하는 훈련이다.

 

-클론 디자인을 하는 이유

잘 만들어진 서비스의 디자인 시스템이나 스타일 가이드를 역으로 추적해봄으로써, 어떤 UI 규칙을 가지고 있는지 파악해볼 수 있기 때문이다.

또한 UI 디자인이 익숙하지 않을 때, 다양한 UI를 직접 따라 그려보면서 규격, 크기, 형태, 색상 등에 대한 나름의 기준점을 만드는 것에 도움을 준다.

 

-클로닝의 목적

클로닝의 최종 목적은 이 서비스의 UI 규칙을 파악해내는 것이에요. 클로닝도 역설계와 마찬가지로 목적이 분명한 것이 좋다. 물론 단순한 UI 연습이어도 괜찮지만, 그 사이에서도 확실하게 목표를 정해서 집중적으로 연습하는 것이 더 좋다.

 

 

 

 

 

클론 디자인 과정 실습하기

1) 디자인 할 서비스 정하기

💡 안드로이드에서 캡처했다면 캡처한 이미지의 가로 길이를 360으로 맞춰주고, 아이폰이라면 375나 390으로 맞춰야 1배수 크기의 UI를 확인하기 수월하다.

 

2) 전체적인 레이아웃 규칙 발견하기

 

3) 세부적인 UI 따라하기

 

4) 스타일가이드로 정리하기