[내일배움캠프] 사전캠프 Day3 - 피그마 기초 강의 1주차

---

[1주차 강의 목표]

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

---

 

💡피그마

제품을 만드는 모든 사람을 위한 협업 도구

 

- 웹에서도 사용할 수 있어 접근성이 좋고, 맥과 윈도우 모두 사용할 수 있음

- 디자인 툴로 시작했지만, 지금은 개발자까지 아우르는 종합 협업 툴

- 각종 플러그인과 디자인 자료들이 피그마의 인기를 높이는 데 일조

- 금방 배울 수 있고 디자인 기초부터 고급기능까지 피그마 하나로 가능

 

💡디스플레이와 픽셀

- 웹사이트나 앱, 키오스크, 전광판, TV 등 디지털 화면들을 디스플레이(Display) 라고 부름

- 디스플레이는 픽셀(Pixel)이라는 정말 작은 칸들로 이루어짐

 

💡해상도

- 디스플레이의 선명한 정도

- 디스플레이 안에 들어가있는 픽셀의 개수

- 가로 줄의 픽셀 개수 * 세로 줄의 픽셀 개수 (Ex. 1920x1080)

 

📌해상도와 픽셀의 관계

- 해상도가 같다면 화면 크기가 클수록 픽셀 한 칸의 크기도 커짐 (픽셀의 갯수는 동일한데 화면의 크기가 크기때문)

- 화면의 크기가 같다면 해상도가 높아질 수록 픽셀 한 칸의 크기는 작아짐 (같은 크기의 화면에 더 많은 픽셀이 들어가야 하기 때문에)

- 일반적으로 화면 크기가 클수록 해상도도 높음 (예외도 있음)

- 면적 당 픽셀 객수가 더 많다면 더 세밀한 묘사 가능

 

💡1배수 디자인

- 디자인을 할 때 기준이 되는 사이즈

- 1배(100%), 원본 사이즈

 

📎픽셀 배율 확인할 수 있는 곳

배수=픽셀 배율, 픽셀 배율은 기기를 만들고 출시할 때 정해져서 나옴

 

📌기기 해상도는 4자리 숫자인데, 디자인 사이즈는 3자리 숫자인 이유!

- 기기에서 코드를 읽고 디자인으로 바꾼 다음, 자기 배율만큼 확대 또는 축소함 > 이 과정을 렌더링이라고 함

 

📌모든 기기의 크기가 다 다르기 때문에 기기 실제 해상도에 맞게 미세하게 조정을 마친 후 화면에 띄우게 됨

- 업스케일, 다운스케일

 

💡래스터(Raster) 방식

- 비트맵(Bitmap) 형식, 픽셀 칸에 색깔 칩을 하나씩 담는 형식

- 포토샵이 래스터 형식의 대표적인 툴

- 파일형식(확장자)으로는 jpg, bmp, gif, png 등이 있음

- 해상도가 높을 수록 화질이 좋음

- 해상도가 낮은 이미지를 크게 만든다고 화질이 좋아지지 않음

- 확대와 축소를 반복하면 색상 정보가 사라짐 (이미지가 깨졌다, 열화됐다 라고 표현)

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

- 파일 크기를 결정하는 속성으로는 압축률이나 색상 표현 범위 등이 있는데, 일반적으로 jpg가 가장 가볍고, png가 가장 무거움

 

💡벡터(Vector) 방식

- 그림을 수식으로 표현하는 형식

- 일러스트레이터나 피그마가 대표적인 툴

- 이미지라기보다는 코드 파일에 더 가까움

- 대표적 파일 형식으로 svg가 있음

- 확대 및 축소 등 크기 변형이 자유로움

- 이미지가 크고 복잡하면 수식도 복잡해짐

- 고해상도의 많은 색을 표현하는 경우 수식이 매우 복잡해져 파일 크기가 커짐

 

💡8포인트 그리드 디자인

- 일반적으로 가장 많이 사용하는 디자인 요소들은 8의 배수로 만든다는 규칙

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

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

 

❓왜 하필 8일까

- 8은 2로 3번이나 나눌 수 있고, 나눈 숫자도 짝수임

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

- 업스케일, 다운 스케일될 때 유연하게 대처할 수 있음

- 나눴을 때 소숫점이 생기는 숫자는 불완전한 픽셀이 생김

---

사전캠프 기간 동안 스파르타 코딩클럽에서 제공해 주는 강의를 듣기 시작했다.

피그마에 대해 아주 기초적인 것부터 알려주셔서 이해하기가 쉬운 것 같다.

 

 

[숙제]

 

세상에... 숙제를 하다보니 내가 Export하는 방법도 몰랐다는 것을 알았다.

검색해서 Export 하고 zip파일로 숙제 업로드 완료!

 

손에 익지 않아서 더듬더듬 완성해낸 것이 아쉽지만 쓰다보면 금방 익숙해질 것 같다.도구 버튼을 눌러서 사용하기보다는 최대한 단축키로 사용하려고 노력중이다.이 것 또한 쓰다보면 많이 쓰는 것들은 단축키가 바로바로 외워지겠지?

 

모르는게 생기면 튜터님께서 도와주신다고 하니 든든하다.

일단은 최대한 검색해가면서 해보고 안되면 튜터님 도움을 받아야겠다.

 

오늘은 1주차 강의 완료했으니 2주차 강의도 들어봐야겠다.

내일은 팀원들과 함께하는 미션이라 재미있을 것 같다.