[피그마 강의] 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번이나 쪼갤 수 있고 나눈 숫자도 다시 짝수이다. 

· 디자인을 망가뜨리지 않고 축소할 수 있다. 

· 해상도가 변하면서 업스케일, 다운스케일 될 때 유연하게 대처할 수 있다.