[5주차 - Day5] UI 디자인 기초 Chapter 2. 인터페이스 디자인기초

Chapter 2. 인터페이스 디자인기초

2-1) 디자인 환경

 

- 모바일 디자인 환경

평면으로 보고 있기 때문에 X, Y축만 있는 것 처럼 보이지만 실제로는 Z축도 존재함.

모바일에서는 Z축을 다양하게 표현함 -> 그림자를 주어 화면에서 살짝 띄워져있는 것처럼 보임 -> Z축의 의미를 가짐

 

A와 B는 동일한 선상에 있지만 C는 조금 더 뒤에 있음

섀도우의 깊이감을 통해 높이를 조절할 수 있음

 

 

- 밀도와 해상도

동일한 사이즈의 스마트폰이어도 그 안에 담겨 있는 실제 픽셀의 밀도가 다를 수 있음

-> 밀도와 픽셀 차이를 무시하면 스마트폰 해상도에 따라서 어떤 화면에서는 작은 원, 어떤 화면에서는 큰원으로 보일 수 있음

 

DP(Density Independent Pixel): 화면의 구성 요소들의 크기나 배치를할 때 기기의 물리적인 디스플레이 해상도에 영향을 받지 않고 독립적으로 크기를 지정할 수 있도록 하는 가상적 화소의 단위. 160DPI의 디스플레이 해상도를 기준으로 함

DPI(Dots Per Inch): 실제 크기 1인치 당 점이 몇개 들어가는 가를 나타냄 

 

 

모든 화면에서 비슷한 출력을 내기 위해서 밀도 차이를 두어서 계산하는 방식

사이즈는 같게 하지만 그 안의 픽셀 밀도는 다르게 함

 

 

 

---

2-2) 레이아웃과 그리드시스템1

 

- 스크린 사이즈

스크린 사이즈를 잡을 때 지금 진행하고자 하는 모바일 서비스의 주요 타켓 디바이스를 정의하는데 이 타켓 디바이스에 맞는 해상도에 맞게 아트보드를 정의 (최신폰보다 1~2단계 아래의 기종 사이즈를 설정함)

일반적으로 모바일 디바이스의 경우 2배수 이상의 해상도를 가짐 -> 해당 타켓 디바이스의 DPI를 보고 정의를 해야함

 

 

- 레이아웃

레이아웃: 설계, 지면의 배열, 배치 -> 디자인 할 때 텍스트나 이미지 등의 요소를 보기 좋게 배열하는 것

 

 

-그리스 시스템

디자인에서 화면을 구성하는 요소들을 일관된 시스템 속에 배치하는 것으로 화면을 효과적으로 사용하기 위해 가상의 구역을 나누어 놓는 것을 말함

 

모바일 환경과 PC환경 모두를 감안해서 그리드 시스템을 설계해야함

규칙없이 무작정 나열된 것 같지만 그리드 시스템을 지키면서 레이아웃 규칙을 일관적으로 사용하고 있음

일관적인 그리드와 레이아웃을 적용하면 통일성을 느끼게 할 수 있음

 

---

2-2) 레이아웃과 그리드시스템1

 

안드로이드 모바일에서는 8dp를 이용한 그리드 시스템을 이용함

대부분 8배수를 기준으로 움직이고 있음

4배수, 2배수까지도 많이 사용하고 있음

 

 

컬럼과 컬럼 사이 -> 거터

전체 화면 상 가장 좌측과 우측 여백 -> 마진

 

 

 

 

 

거터는 단과 단 사이의 공간, 컨텐츠를 분리함

거터를 적정하게 잡아주어야 모듈 사이의 간격을 잘 책정할 수 있음

 

 

고정값으로 지정됨

 

 

---

2-4) 컬러시스템

 

 

1번이 메인 컬러, 2번이 서브 컬러

3번 영역은 밝고 어두운 부분의 변형 레인지 값

 

 

 

- 백그라운드 컬러, 표면 컬러, 에러 컬러

 

포인트 컬러와, 기본 컬러만 정의하는 것이 아니라 에러 상황에 사용할 에러 컬러도 정의해 둬야함

 

 

---

2-5) 타이포그래피

 

본문 사이즈: 14~16

 

---

2-6) 아이콘

 

제작 사이즈를 제공하고 있음

 

시스템 아이콘을 제작할 때 준수하면 좋을 제작 가이드가 존재함

 

 

 

1. 아이콘 레이아웃

규정된 사이즈 준수, 상하좌우 2픽셀의 여백을 두는 것을 권장

 

 

다른 아이콘이 눌리거나 할 수 있음 제대로 된 사용성을 위해서 테두리를 48X48로 싸주기

터치 영역간의 오류 최소화를 위함

 

 

 

2. 아이콘 그리드, 키 라인

 

동일한 영역에 아이콘을 그리더라도 영역들의 비율을 명확하게 잡아주지 않으면, 사이즈가 크거나 작아보임 -> 사이즈가 일관되지 않아 보일 수 있음

 

 

 

- 아이콘 스타일

 

보편적으로 가장 많이 사용하는 아이콘은 라인 아이콘, 면 아이콘이라고도 불리는 필 아이콘, 컬러 아이콘이 있음

컬러 아이콘의 경우 피드백을 주거나 주목도를 높힐 때 사용함

 

 

---

2-7) 인터랙션

 

- 인터렉션: 중간에서 일어나는 행동, UI 사용에서 일어나는 행동

ex) 쇼핑을 위해 쇼핑몰 앱을 누른다 (입력) -> 쇼핑몰 메인 페이지가 나온다 (출력)

검색한다 -> 스크롤, 탭 등 -> 검색 결과가 나온다