피그마 활용 3주차 3-1 ~ 3-2

[수업 목표]

• UI 설계의 기본 원리와 기초 디자인 지식을 이해합니다
• 디자인 시스템의 설계 원리와 원칙을 이해합니다
• 기본적인 디자인 시스템 요소를 만들 수 있습니다.

오늘 배울 것

 

지난 시간까지는 피그마를 다루는 기본적인 테크닉을 배웠다면, 이번 시간부터는 본격적으로 UI를 그려볼 거예요! 하나씩 천천히 살펴봅시다!

 

UI 디자인 원리 기초

 

디자인 원리 기초

• 본격적인 UI 이야기를 하기 전에, 알면 도움 되는 디자인 원리들을 같이 배워볼 거예요.
• 디스플레이와 픽셀의 관계와 디바이스의 배율을 이해해 봅니다.
• 반응형 디자인을 위한 분기점과 그리드 등을 알아보고, 또 같이 만들어볼 겁니다.
• UI를 규칙적으로 배치할 수 있게 도와주는 8포인트 그리드의 개념도 알아볼 거예요!

디자인 시스템의 개념과 원리

• 앱과 웹을 빠르면서도 일관되게 설계할 수 있게 해주는 디자인 시스템에 대해 같이 알아봐요!
• 또한 디자인 시스템을 만드는 원리인 아토믹 디자인 시스템도 같이 살펴볼 거예요.

파운데이션과 스타일

• 디자인 시스템의 기초 단계인 파운데이션을 알아봅니다.
• 대표적인 파운데이션 요소인 컬러 스타일과 폰트 스타일을 만들어 볼 거예요.

 

디스플레이와 픽셀, 배수

우리가 보는 디지털 화면의 원리를 이해해야, 디자인을 더 정밀하게 설계할 수 있어요!

 

디스플레이와 픽셀의 개념

우리가 웹사이트나 앱, 키오스크, 전광판, TV 등을 본다는 건 디지털 화면을 본다는 거예요.

• 디지털 화면들을 디스플레이(Display)라고 불러요.
• 이 디스플레이는 픽셀(Pixel)이라는 정말 작은 칸들로 이루어져 있어요. 이 픽셀의 크기는 따로 정해져 있진 않아요.

TV나 일반적인 모니터를 정말 가까이에서 관찰해보면 정말 작은 격자를 볼 수 있어요

해상도

• 해상도는 디스플레이의 선명한 정도를 나타내는 말이에요.
• 해상도는 디스플레이 안에 들어가 있는 픽셀의 개수를 의미해요.

1920 * 1080 디스플레이의 경우, 가로 줄에는 픽셀이 1920개, 세로 줄에는 1080개가 들어가 있다는 뜻이에요.

픽셀이 많으면 왜 선명하다고 하는지는 다음 항목에서 같이 확인해봐요!

 

해상도와 픽셀의 관계

해상도가 같다면, 화면 크기가 클수록 픽셀 한 칸의 크기도 커져요.

왼쪽 디스플레이의 픽셀 크기보다 오른쪽 디스플레이의 픽셀 크기가 훨씬 크죠?

 

 

 

화면 크기가 같다면, 해상도가 높아질 수록 픽셀 한 칸의 크기는 작아져요

똑같은 크기인데

셀이 더 많다면

당연히 더 작고 오밀조밀하게 뭉칠 수밖에 없겠죠?

그만큼 면적 당 픽셀 수가 더 많아지게 돼요.

• 화면 크기는 같은데, 가로와 세로 픽셀 개수가 더 많을 수록 픽셀 한칸의 크기는 더 작아져요.
• 5*3 해상도와 10*6 해상도가 있을 때, 가로와 세로가 2배라서 총 픽셀 수는 4배가 돼요!

길이의 제곱은 면적이에요! (가로 2배 * 세로 2배 = 넓이 4배)

 

 

일반적으로 화면 크기가 클 수록 해상도도 높아요.

그래서 일반적으로 큰 모니터를 사면 더 선명하다고 볼 수 있어요.

 

하지만 모든 것에는 항상 예외가 있답니다

맥북처럼 화면 크기는 작은데

해상도가 매우 높은 디스플레이들이 있어요.

즉, 픽셀이 더 오밀조밀하게 모여 있는 셈이에요.

이런 경우, 디스플레이 품질의 차이도 있지만 해상도와 화면 크기의 관계때문에

일반적인 모니터보다 더 화질이 좋다고 느껴지는 거예요!

 

해상도가 높은 디스플레이의 픽셀은 더 오밀조밀 작게 모여있다.

 

 

 

 

면적 당 픽셀 갯수가 더 많다면, 더 세밀한 묘사가 가능해요

 

4*4 해상도에 그린 그림을 8*8 해상도에 똑같은 픽셀 크기로 그려보면 다음과 같아요.

8*8 해상도에 그린 그림을 4*4 해상도의 화면 크기에 맞게 크게 키우면 더 세

밀하게 볼 수 있겠죠?

8*8 해상도는 4*4 해상도보다 면적 당 픽셀 갯수가 4배 많기 때문에 4배 더 선명하고 세밀하게 표현할 수 있어요.

 

모바일 앱의 사이즈

세 사이즈 모두 다 다른 사이즈인데, 앱들은 항상 같은 디자인의 모양을 유지해요.

• 같은 앱이라면 어떤 스마트폰으로 열어도 항상 화면에 보이는 디자인의 모양이 같아요.
• 디바이스마다 맞는 디자인을 일일이 다 만들지 않기 때문이에요.

아이폰, 갤럭시, 샤오미, 화웨이, HTC, 에이서, 구글 픽셀 등 스마트폰은 수십~수백 가지예요. 이 모든 사이즈를 디자이너가 다 고려해서 디자인할 수는 없어요. 대표적인 몇 개만 한다고 하더라도, 어디까지를 대표적인 사이즈라고 할 지도 정하기 어려워요.

 

• 따라서 기준이 되는 사이즈를 하나 정해서 디자인을 하게 돼요.

여기서 기준이 되는 사이즈는 무슨 뜻인지, 어떻게 정하는지는 다음 항목에서 알아봅시다.

 

1배수 디자인의 개념

앱의 예시만 들었지만 모바일 웹도 원리는 마찬가지예요.

• 우리가 디자인을 할 때는 기준이 되는 사이즈를 하나 정하게 돼요.
• 그 사이즈를 1배수 디자인이라고 합니다.

1배수의 뜻은 1배(100%), 즉 원본 사이즈라는 뜻이에요!

 

1배수 디자인을 정하는 방법

일반적인 1배수 디자인 사이즈

• 1배수 디자인 사이즈는 사람들이 가장 많이 쓰는 사이즈로 하는 것이 일반적이에요.
• 다만 유의해야 할 것은, 내가 만들 앱을 쓸 사람들이어야 해요!

 📌 1배수 사이즈를 정할 때 유의할 것

만약 내가 만들 앱을 사용할 사람들이 안드로이드 기기를 더 많이 사용한다면, 디자인도 안드로이드 기기를 기준으로 하는 것이 좋아요. 만약 사람들이 안드로이드 기기를 더 많이 사용하는데 아이폰을 기준으로 디자인한다면, 실제 사용하는 사람들을 고려하기 어렵겠죠?

 

권장하는 1배수 사이즈

📎 픽셀 배율 확인할 수 있는 곳

배수는 픽셀 배율이라고도 불러요. 이 픽셀 배율은 기기를 만들고 출시할 때 정해져서 나와요.

• 디바이스별 픽셀 배율 및 해상도 확인하는 곳
• 💡 아래 웹사이트의 표에서 확인하고 싶은 기기를 찾은 뒤, Pixel Ratio(픽셀 배율)을 보시면 됩니다. 2.0이라고 써져 있다면 **‘이 기기는 2배수 사이즈’**라는 뜻이에요.
• https://yesviz.com/viewport/

Viewport Size for Devices | Screen Sizes, Phone Dimensions and Device Resolution | YesViz.com

 

• 아이폰의 경우 320 * 480, 안드로이드의 경우 360 * 640이 처음에 나왔던 1배수 사이즈예요.
• 그런데 갈수록 스마트폰들이 발전하면서, 1배수 사이즈도 조금 더 커졌어요.
• 지금은 아이폰의 경우 375 * 812, 안드로이드의 경우 360 * 800을 권장해요.

 

디자인 사이즈와 실제 사이즈의 원리

해상도랑 픽셀 개념도 알았고, 1배수 사이즈도 알았다면 이제 구현 방법을 간단하게 살펴봐요!

픽셀 배율 확인할 수 있는 곳에서 iPhone 15 Pro의 Device Resolution(기기 해상도)를 확인해 주세요.

 

기기 해상도는 4자리 숫자인데, 우리가 디자인하려는 사이즈는 3자리 숫자에 불과해요.

위에서 정한 1배수 사이즈는 375 x 812인데, 아이폰 15 프로의 기기 해상도는 1179 x 2556예요. 꽤 많은 차이가 있죠?

 

1배수 디자인이 실제 스마트폰에서 구현되는 과정

• 위에서 기기마다 다 정해진 픽셀 배율이 있다라는 걸 배웠어요!
• 이 픽셀 배율이, 우리가 만든 1배수 디자인을 몇배 확대할 건지 정해주게 돼요!
• 구현과정

 

 

픽셀 해상도 1배수디자인

픽셀과 해상도는 말로만 높으면 좋은거지 생각했는데,

해상도가 높을수록 픽셀이 작고 오미조밀하구나 일반적으로 화면이 클수록 좋고 화면이작은데도 해상도가 높은거는 고급기술~ 애플꺼 ㅎㅎ

 

1배수 디자인은 생소하다.

1배수의 뜻은 1배(100%), 즉 원본 사이즈라는 뜻이에요!

사람들이 많이 사용하는 기기에 맞춰서 디자인 

우리는 나와있는대로 쓰면 기기가 알아서 자기배율만큼 확대및 축소 렌더링

미세조정으로 업스케일 다운스케일한다.