[본캠프 7일차/피그마1강 복습] 디스플레이와 배수, 8포인트그리드, 평탄화

1. 오늘 학습 키워드

디스플레이와 배수 이해하기
이미지 표현방식, 백터와 래스터
8포인트 그리드

 

💡 수업 목표

• 피그마 인터페이스를 배우고 사용할 수 있다
• 레이어의 개념을 이해하고 만들 수 있다
• 도형을 생성하고 원하는 대로 편집할 수 있다

 

---

2. 오늘 학습 한 내용을 나만의 언어로 정리하기

1. 디스플레이와 픽셀

• 디스플레이와 픽셀
  • 우리가 웹사이트나 앱, 키오스크, 전광판, TV 등을 본다는 건 디지털 화면을 본다는 것

 

 

• 해상도(Resolution)
  • 해상도는 디스플레이의 선명한 정도를 나타내는 말
  • 해상도는 디스플레이 안에 들어가 있는 픽셀의 개수를 의미
  • 픽셀의 갯수는 가로 줄의 픽셀 개수 * 세로 줄의 픽셀 개수로 나타냄

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

1. • 💡 가로 1920개, 세로 1080개니까, 1920*1080 디스플레이는 총 2,073,600개의 픽셀로 이루어져 있어요.
         보고 있는 모니터 안에 작은 격자가 2백만 개 이상 들어있다는 뜻!
   •  
2. 1배수 디자인

 

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

권장하는 1배수 사이즈

   

픽셀 배율 확인할 수 있는 곳

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

---

• 디바이스별 픽셀 배율 및 해상도 확인하는 곳
• Viewport Size for Devices | Screen Sizes, Phone Dimensions and Device Resolution | YesViz.com
• 💡 아래 웹사이트의 표에서 확인하고 싶은 기기를 찾은 뒤, Pixel Ratio(픽셀 배율)을 보시면 됩니다. 2.0이라고 써져 있다면 **‘이 기기는 2배수 사이즈’**라는 뜻이다.

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

 

• 1. 래스터(Raster) 방식

• • 비트맵(Bitmap) 형식이라고도 부르며, 픽셀 칸에 색깔 칩을 하나씩 담는 형식
  • 포토샵이 래스터 형식의 대표적인 툴
  • 파일 형식 jpg, bmp, gif, png 
• 래스터 방식의 특징
  • 해상도가 높을 수록 화질이 좋음
  • 확대와 축소를 반복하면 색상 정보가 사라짐

이런 경우를 ‘깨진다’, 또는 열화됐다 고 표현

 

---

 

                2. 벡터(Vector) 방식

• 그림을 수식으로 표현하는 형식. 일러스트레이터나 피그마가 대표적인 툴
• 수식으로 표현하는 형식이라, 이미지라기보다는 코드 파일에 더 가까움
• 파일 형식  svg

 

3. 8포인트 그리드

버튼은 ± 2 / 여백은 ± 4

• 8은 1, 2, 4, 8로 나눌 수 있어요. 즉, 2로 3번이나 쪼갤 수 있고 나눈 숫자도 다시 짝수
• 그만큼 디자인을 축소할 때 디자인을 망가뜨리지 않고 축소할 수 있음
• 따라서 해상도가 변하면서 업스케일, 다운스케일될 때 유연하게 대처할 수 있음

아웃라인과 평탄화

• 1. 아웃라인(Outline)
  • 도형을 만들면 기본적으로 면 색상이 채워져 있어요
    • Fill 은 도형의 면색, Stroke는 도형의 테두리를 조절할 수 있어요.
    • Stroke 오른쪽의 +아이콘을 누르면 선택된 도형에 테두리를 추가할 수 있어요
  • 도형 테두리의 특징
    1. 도형의 크기가 변하더라도, 테두리 굵기가 정해져 있기 때문에 테두리 크기는 변하지 않아요도형의 크기가 달라도 테두리 굵기는 1이기 때문에 테두리 크기는 변하지않음
    2. 테두리 방향은 패스를 기준으로 가운데, 바깥쪽, 안쪽으로 나눌 수 있어요
       
       • 아웃라인(Outline;윤곽선 처리) 기능을 사용해 테두리를 선이 아닌  면으로 바꿀 수 있음
       • 즉, 도형의 원래 테두리 정보는 사라지기 때문에 주의
        💡 아웃라인 기능은 아이콘 등을 선으로 만들었을 때, 크기를 조정하더라도 굵기 비율을 균일하게 만들 때 자주 사용해요.
  1. 평탄화(Flatten)

-반드시 Flatten 처리를 해야됨 => 정렬을 예쁘게 할 수 있음.

-But, 회전 + 곡률 정보가 사라짐(유의)