내일배움캠프_디지털마케터_3기 (사전캠프 5일차)

오늘 배운 피그마 강의

---

이미지 표현 방식, 벡터와 래스터

컴퓨터는 그림을 그린다는 개념보다 데이터를 채운다는 개념에 가깝다.

 

• 래스터(Raster) 방식 : 비트맵 형식이라고도 부르며, 픽셀 칸에 색깔 칩을 하나씩 담는 형식, 대표적인 툴은 포토샵이다. > 파일 형식으로는 jpg, bmp, gif, png 등 우리가 흔히 보는 이미지 형식들
  
  - 특징 :
  1. 해상도가 높을 수록 화질이 좋다. > 일정한 칸 안에 색깔을 칠하는 모자이크 같은 형식이라, 픽셀 갯수가 많을 수록 화질이 좋다.
  해상도가 낮은 이미지를 크게 만든다고 화질이 좋아지지 않는다. > 모자이크를 크게 키우면 칸의 크기만 커질뿐 화질이 좋아지진 않는다.
  
  2. 확대와 축소를 반복하면 색상 정보가 사라진다. > 색상을 칠할 수 있는 픽셀의 개수가 강제로 적어졌다가 많아지는 과정에서 원본에 있던 색상 정보가 사라진다. 다시 원본 크기로 만들어도 복구할 수 없다. 이런 경우를 ‘깨진다’, ‘열화됐다(나빠졌다)’ 고 표현한다.
  
  3. 단순한 방식이라 고해상도 이미지를 표현하기 좋다. > 화려한 이미지도 벡터에 비해 파일크기가 작다. 일반적으로 jpg가 가장 가볍고, png가 가장 무겁다.
  
  
• 벡터(Vecter) 방식 : 그림을 수식으로 표현하는 방식, 대표적인 툴은 일러스트레이트나 피크마가 있다.
  > 이미지라기보다는 코드 파일에 가깝다. 대표적으로 svg가 있다.
  
  - 특징 :
  1. 확대 및 축소 등 크기 변형이 자유롭다. > 픽셀 개수로 만들어진 게 아니라 일종의 함수라서 확대 및 축소에 영향이 없다.
  
  2. 이미지가 크고 복잡해지면 수식도 복잡해진다. > 고해상도의 많은 색을 표현하는 경우 수식이 복잡해져 파일크기가 커진다.

 

8포인트 그리드

 

- 일반적으로 가장 많이 사용하는 규칙이다.

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

- UI 사이의 간격, 요소의 여백, 크기 등을 8의 배수 단위로 조정해서 사용한다.

 

• 사용하는 이유

UI디자인에 일정한 규칙이 있으면 다른 디자이너와 함께 일할 때도, 개발자가 디자인을 보고 개발할 때도 서로 물어보는 번거로움이 사라진다. > 규칙이 있기 때문에 다른 디자이너와 개발자는 처음 보는 디자인을 보더라도 규칙을 적용하기만 하면 된다.

 

• 왜 8의 배수일까

 

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

- 그만큼 디자인을 축소시킬 때 디자인을 망가뜨리지 않고 축소 할 수 있다.

- 반대로 커 질 때도 다른 수에 비해 딱 떨어지게 만들기 쉽다.

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

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

 

• 10이나 5를 기준으로 나누지 않는 이유

- 10도 짝수지만 한 번 나누면 바로 홀수가 된다는 문제가 있다. > 홀수는 확대 또는 축소할 때 소수점이 생기는데, 만약 소수점이 생기면 픽셀 한 칸이 온전하게 채워지지 못한 불완전한 디자인이 생기고 깨져보이는 현상(앨리어싱(Aliasing)이 발생한다.

- 큰 문제가 생기지는 않지만, 8이나 4에 비해 단위가 비교적 크고 홀수나 소수점이 나와 매끄러운 모양을 만들 때 불편할 수 있다.

 

 

---

 

 

오늘은 팀을 새로 배정받아 페어 인터뷰라는 것을 했다. 

2인1조로 서로 인터뷰를 한 뒤, 상대방을 타켓팅한 광고 문구 1줄을 만들어보는 것!

새로운 팀원분과 얘기도 많이 해보고 서로 알아갈 수 있는 뜻깊은 시간이였다ㅎㅎ

내가 만든 광고 문구를 보고 누군가 눌러보고 싶게 만든다는게 어떤 사람을 대상으로 하느냐에 따라 많이 달라질 수 있겠다는 생각이 들었다.

여러모로 재밌는 시간이였다!

 

첫째주 수업 완료!