사전캠프 1017

📋 1주차 - 3

해상도 : 디스플레이의 선명한 정도 / 디스플레이 안에 들어가 있는 픽셀의 수

   · 1920*1080 디스플레이는 가로 줄에 픽셀 1920개 세로 줄에 1080개 있음

해상도와 픽셀의 관계 · 화면 사이즈가 커질수록 픽셀 한 칸의 크기도 커진다 ·  면적당 픽셀 수가 많을수록 해상도가 높아짐 ·  일반적으로는 화면 사이즈가 커질수록 해상도도 높다 ·  8*8 해상도는 4*4 해상도 보다 4배 더 높다

 

1배수 디자인

 

디바이스마다 맞는 디자인을 일일이 다 만들지 않음

  → 기준이 되는 사이즈 하나를 정해서 디자인

일반적인 1배수 디자인 사이즈 = 사람들이 가장 많이 쓰는 사이즈

내가 만들 앱이 안드로이드를 쓰는 사람이 많이 쓸 앱이라면 안드로이드를 기준으로함

 

*권장하는 1배수 사이즈*

아이폰 375*812  / 안드로이드 360*800

 

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

기기마다 다 정해진 픽셀 배율이 있고, 이 픽셀 배율이 우리가 디자인한 1배수 디자인을 몇 배 확대할 건지 정함

 

---

📋 1주차 - 4

 

래스터 방식

 

래스터방식 = 비트맵 형

해상도 낮은 이미지를 크게 만든다고 화질이 좋아지진 X

고해상도 이미지 표현하기 좋음

 

*주의*

확대와 축소를 반복하면 색상정보가 사라짐 

 

 

벡터 방식

 

백터 = 일종의 함수

확대 축소 자유로움 

고해상도, 많은 색 → 파일 크기도 커짐

 

*피그마는 벡터 방식인데 이미지가 깨지는 이유*

· 모니터, 폰 화면은 결국 픽셀기반

·  이미 래스터 형식인 이미지를 벡터 툴에서 작업한다고 벡터 개체가 되진 않음

 

---

📋 1주차 - 5

 

 

8포인트 그리드

:UI를 8의 배수에 맞춰 배치하는 레이아웃 규칙

 

쓰는 이유

: 디자인에 일정한 규칙이 있으면 다른 디자이너, 개발자와 협업할 때 효율적임

 

8인 이유

: 확대 축소시 다른 수에 비해 짝수로 딱 떨어지게 만들기 쉬운 숫자

+) 홀수나 소수점이 나오면 매끄러운 모양을 만들기 어려움 (앨리어싱)

 

---

 

📋 1주차 - 6

 

피그마 인터페이스 살펴보기

 

---

📋 1주차 - 7

 

무브 툴(v) - 무브 툴로 사이즈를 변경하면 하나하나 다 변경해야함

스케일 툴(k) - 다같이 사이즈를 변경할 수 있음  하지만 크기가 강제로 변하므로 주의.