[피그마 강의] 1주차: 디스플레이 배수, 이미지 표현, 8포인트 그리드 이해하기

 

1-3) 디스플레이와 배수

 

해상도란?

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

 

해상도와 픽셀의 관계

• 화면의 크기가 클수록 픽셀 한 칸의 크기도 커진다 .(해상도가 같은 상황)
• 해상도가 높을 수록 픽셀 한 칸의 크기는 작아진다. (모니터 크기가 같은 상황)
• 일반적으로 화면 크기가 클수록 해상도가 높다.
  8*8 해상도는 4*4 해상도보다 면적 당 픽셀 갯수가 4배 많기 때문에 4배 더 선명하고 세밀하게 표현 가능

 

 

1배수 디자인

• 1배수 디자인이란?
  디자인할 때 기준이 되는 사이즈를 하나 정해야 하는데 그 사이즈를 1배수 디자인이라고 한다. 

 

• 1배수 디자인을 정하는 방법
  사람들이 가장 많이 사용하는 사이즈로 하는 것이 일반적이다. 

 

• 유의점
  - 내가 만들 앱을 쓸 사람들을 생각해야 한다. 
  - 내가 만들 앱을 사용할 사람들이 안드로이드 기기를 더 많이 사용한다면, 디자인도 안드로이드 기기를 기준으로 하는 것이 좋다. 

 

• 권장하는 1배수 사이즈
  - 갈수록 1배수 사이즈도 조금 더 커져 다음과 같이 권장한다. 
  - 아이폰의 경우: 375* 812
  - 안드로이드의 경우: 360*800

 

• 1배수 디자인이 실제 스마트폰에서 구현되는 과정
  • 기기마다 정해진 픽셀 배율이 있다. 이 때, 픽셀 배율이 우리가 만든 1배수 디자인을 몇배 확대할 건지 정해주게 된다. 
    1. 1배수 사이즈를 디자인하고 개발한다. 
    2. 기기는 코드를 읽고 디자인으로 바꾼 다음, 자기 배율만큼 확대 or 축소한다.
    3. 기기 실제 해상도에 맞게 미세하게 조정을 마친 후 화면에 띄우게 된다. 

 

---

1-4) 이미지 표현 방식, 벡터와 래스터

 

컴퓨터가 그림을 그리는 방법

• 컴퓨터는 그림을 그린다기 보다 데이터를 채우는 것에 더 가깝다. 
• 래스터(Raster) 방식
• 벡터(Vector) 방식

 

래스터(Raster) 방식이란?

• 비트맵 형식이라고도 부르며, 픽셀 칸에 색깔 칩을 하나씩 담는 형식이다.
• 래스터 형식의 대표적인 툴: 포토샵
• 파일 형식(= 확장자)으로는 jpg, bmp, gif, png 등 우리가 흔히 보는 이미지 형식들이 있다. 
• 특징
  - 해상도가 높을 수록(= 픽셀 갯수가 많을수록 ) 화질 up
  - 해상도 낮은 이미지를 크게 만든다고 화질이 좋아지지는 않음
  - 확대와 축소를 반복하면 색상 정보가 사라짐(= 깨진다, 또는 열화됐다고 표현함)
  - 크고 화려한 이미지도 벡터에 비해 파일 크기가 작음 (일반적으로 jpg가 가장 가볍고, png가 가장 무거움)
     

 

벡터(Vector) 방식이란?

• 그림을 수식으로 표현하는 형식이다. 코드 파일에 더 가깝다. 
• 벡터 형식의 대표적인 툴: 일러스트레이터, 피그마
• 확장자:  svg
• 특징
  - 확대 축소 등 크기 변경이 자유로움
   - 이미지가 크고 복잡하면 수식도 복잡해짐 (깨지지 않는다고 무조건 svg 형식으로 이미지를 만들면 안됨, 상황에 맞춰 적합한 확장자를 선택해서 사용해야 함)

 

---

1-5) 8 포인트 그리드는 뭘까?

 

8포인트 그리드 디자인의 개념

• 일반적으로 가장 많이 사용하는 규칙이다. 
• UI를 8배수에 맞춰 배치하는 레이아웃 규칙이다. 
• UI 사이의 간격, 요소의 여백, 크기 등을 8의 배수 단위로 조정해서 사용한다. 

 

8포인트 그리드를 왜 사용할까?

• 다른 디자이너나 개발자는 처음 보는 디자인을 보더라도 그 규칙을 적용하면 된다. 
• 사전에 약속을 맺는 것, 그 약속을 8 포인드 그리드 또는 8포인트 그리드 디자인이라고 한다. 

💡 어떤 디자인을 보더라도 8의 배수만 기억하고 보면 되기 때문에 커뮤니케이션을 더 빠르게 할 수 있다. 

 

왜 하필 8일까?

• 8은 1, 2, 4, 8로 나눌 수 있다. 즉 2로 3번이나 쪼갤 수 있고 나눈 숫자도 다시 짝수이다. 
• 디자인을 망가뜨리지 않고 축소할 수 있다. 

출처: 체계적으로 배우는 피그마 기초 완전 정복 (1)

 

출처: 체계적으로 배우는 피그마 기초 완전 정복 (1)

• 8은 1, 2, 4, 8로 나눌 수 있다. 즉, 2로 3번이나 쪼갤 수 있고 나눈 숫자도 다시 짝수이다.

💡 여백이나 간격, 높이나 너비 등 UI 수치를 키우거나 줄일 땐 최대한 8의 배수 단위로 한다는 약속을 하는 셈!

 

• 최근에는 디바이스의 해상도가 좋아져서, 디자인도 더 세밀하고 복잡하게 만들기 위해 8대신 4배수나 2배수까지도 사용하는 경우도 많다. 

---

1-8) 도형과 글자 만들기

 

레이어(Layer층)

• 피그마에서 도형이나 텍스트를 만들면 계속 화면에 요소가 쌓이며, 만든 요소 하나하나가 하나의 층을 이룬다. 이를 레이어라고 부른다. 
• 레이어의 원근
  • 화면에 요소를 그리다보면, 요소 위에 다른 걸 겹쳐 올리거나 밑에 넣을 수 있다. 
  • 요소의 가로 세로 길이가 아니라, 캔버스로부터 몇 층 위에 있는지를 '높이'로 이야기한다. 
• 레이어 높이의 개념
  • 레이어가 앞뒤로 쌓이는 걸, 레이어가 멀거나 가깝다는 뜻에서 높이는 원근이라고 부른다. 
  • 레이어가 멀고 가까운 걸, 레이어가 화면으로부터 얼마나 떠있는지로 이야기 한다. 
  • 화면을 보는 나한테 가까울수록 화면으로부터 더 높이 떠있고, 멀수록 화면에 더 낮게 떠있다. 

💡 레이어의 높이는 화면을 보고 있는 내가 느끼는 UI의 멀고 가까운 정도!

 

• 레이어가 떠 있다는 것은?
  • 우리가 보는 화면은 평면이다
  • 하지만 화면에 겹쳐있거나 그림자가 있으면 화면들이 입체적으로 느껴진다. 
  • 우리가 보는 화면을 입체 도형에 대입하면 입체 도형의 축이 되고 각각 X, Y, Z 방향이다
  • 레이어가 떠 있다는 건 Z축 방향으로 레이어가 더 높이 올라와 있다는 뜻이다. 

출처: 체계적으로 배우는 피그마 기초 완전 정복 (1)

💡 레이어의 높이:
실무에서도 가로, 세로, 높이라고 부른다. 너비 또는 높이와 헷갈리지 않도록 개발과의 표현을 통일해서 각각 width, height, z-indext 라고 부른다. Z값이나 Z인덱스 등으로 쓰기도 한다. 

---

1-9) 패스 알아보기

 

패스와 펜툴

• 패스(Path)란?
  • 벡터 형식으로 된 모양을 모두 뜻한다. 
  • 선도 될 수 있고, 모양일 수도 있고, 복잡한 형태도 될 수 있다. 
  • 사각형이나 원형 도구를 이용해 바로 그릴 수 있지만, 펜 툴을 사용해도 그릴 수 있다. 

 

아웃라인

• 도형 테두리의 특징: 도형 크기가 변해도, 테두리 크기는 변하지 않는다. 
• 도형 크기에 따라 테두리 크기도 변하게 하려면? 아웃라인(outline;윤곽선 처리) 기능을 사용해 테두리 선이 아닌 면으로 바꿀 수 있다. Move ▶️ Scale로 변경

💡 아웃라인 기능은 아이콘 등을 선으로 만들었을 때, 크기를 조정하더라도 굵기 비율을 균일하게 만들 때 자주 사용한다. 

 

 

평탄화(Flatten)

• 아웃라인과 평탄화 모두 기존 개체의 편집 정보를 없애고 새로운 형태로 다시 만들어준다. 
• 특히 아웃라인은 글자처럼 굴기 정보가 있는 개체면 어떤 것이라도 모두 면으로 처리한다. 
• 회전한 개체를 회전하지 않은 것으로 만든다.