피그마 활용 심화_1

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

웹과 앱의 특성 비교

 

대표적인 웹과 앱의 UI 차이

1) 페이지 이동

• 앱은 임의로 주소를 입력해서 이동할 수 없어요.
• 반면 웹은 주소창에 URL을 입력하면 어디든 접근할 수 있어요.

2) 뒤로가기

• 앱의 경우, 일반적으로 화면 상단의 아이콘 등 버튼을 눌러 화면을 이동해요.
• 반면, 웹의 경우 브라우저 자체 기능을 통해 이전 화면으로 돌아가는 것이 자유로워요.

3) 주요 메뉴 이동

• 모바일 웹에선 일반적으로 화면 상단에 주요 메뉴로 이동할 수 있는 UI를 배치해요.
• 앱에선 화면 하단에 고정된 탭을 배치해 주요 메뉴로 이동할 수 있도록 해요.
• 두 UI는 동일한 목적과 기능을 가지고 있지만, 웹과 앱에서 다르게 나타나는 대표적인 UI예요.
• 최근 모바일 웹들도 앱처럼 화면 하단에 고정된 메뉴를 놓는 걸로 바뀌고 있어요.

4) 바텀 시트

 

OS별 차이

1) iOS 홈 인디케이터

아이폰에서 홈 화면으로 이동할 수 있는 UI예요. 다른 UI와는 다르게 화면 위에 있기 때문에 실제 화면과 겹치는 경우가 있어요. 이전 아이폰 모델의 경우 홈 버튼이 물리적으로 기기에 있지만, 이후 비교적 최신 모델은 홈 버튼이 없고 대신 홈 인디케이터가 있기 때문에 같은 아이폰 앱이라고 하더라도 차이를 고려해야 해요.

 

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

안드로이드 사용자들이 뒤로가기를 눌렀을 때 어떻게 이동해야 하는지 정하기 위해선 디자이너가 제품 전체의 구조를 잘 이해하고 있어야 해요.

 

---

분기점과 그리드

분기점(Breakpoint)

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

- 사용자의 디바이스 화면 크기를 고려해서 디자인을 나눌 수 있어야 해요.

• 가로가 1024px 이상이라면 데스크탑 화면입니다.
• 가로가 768px 이상, 1024px 미만이라면 태블릿 화면입니다.
• 가로가 768px 미만이라면 모바일 화면입니다.

그리드(Grid)

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

- 일반적으로 데스크톱 화면을 기준으로 기둥은 12개를 사용합니다. 12개를 사용하는 레이아웃을 12칼럼 그리드(12 Column Grid)라고 해요.

- 그리드의 구조

• 칼럼은 유닛(Unit)과 거터(Gutter)로 이루어져 있어요.
• 유닛은 실제 콘텐츠를 정렬하는 기준선이고, 거터는 유닛과 유닛 사이의 여백이에요.
• 한 개의 칼럼은 유닛 1개와 양쪽에 거터 절반씩을 합친 크기예요.
• 맨 양끝의 칼럼 끝에는 거터 절반이 남는데, 이건 좌우 여백으로 사용해요.좌우측 끝에는 초록색 블록이 한 줄씩밖에 없는 걸 보실 수 있어요.

 

---

반응형과 적응형

반응형 디자인

- 반응형 디자인은 말 그대로 반응하는 디자인이에요.

- 해상도의 변화에 실시간으로 반응해요.

- 반응(Respond)한다고 해서, 반응형은 영어로 Responsive라고 불러요

 

적응형 디자인

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

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

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

 

---

정보구조도와 플로우차트

정보구조도와 플로우차트의 차이

• 정보구조도와 플로우차트는 유사해보이지만 개념과 목적에 큰 차이가 있어요.
• 제품을 하나의 건물에 비유한다면, IA는 층별 안내도, 플로우차트는 오시는 길이라고 할 수 있어요.

정보구조도

• 정보구조도의 영문 앞글자를 따서 IA로 부르기도 해요.
• 화면과 정보들이 어떤 구조로 연결 있는지를 나타내는 일종의 설계도라고 할 수 있어요.

  

화면흐름도(Flowchart)

• 화면흐름도는 플로우차트라는 이름으로 더 많이 써요.
• 사용자가 어떤 과정으로 제품을 이용하는지를 시각적으로 정리한 순서도라고 할 수 있어요.

---

와이어프레임

• 와이어프레임은 말 그대로 선(와이어)으로 그려진 화면이라는 뜻이에요.
• 어떻게 만들지 논의하는 과정을 거치고 나면, 본격적인 디자인을 하기 전에 주로 하게 돼요.
• 낮은 단계의 프로토타입이라는 뜻에서 Lo-fi Prototype 이라고 부를 때도 있어요.