[10/16 내일배움캠프] 사전캠프 4: 1주차 강의

사전캠프 D-4

📌To Do List

*1주차 강의: 피그마

---

01 강의 1주차 - 체계적으로 배우는 피그마 기초 완전 정복

 

📌Figma

: 기획 → 디자인 → 개발 → 테스트 모두 단계에서 사용할 수 있는 커뮤니티 협업 툴

*왜 사용하나요?

1) 웹, 앱 모두 사용 가능(OS,Window)

2) 디자인, 개발 업무 가능

3) 풍부한 커뮤니티 자료: 플러그인, 디자인 자료

4) 쉽게 학습 가능

 

 

📌디스플레이와 배수

*디스플레이(Display): 디지털 화면(TV, 모바일, 전광판, 웹사이트 등)

- 픽셀로 이루어짐.

 

*해상도: 디스플레이의 선명도(픽셀 갯수) 

- 픽셀 갯수 계산 : 가로 * 세로 픽셀 갯수 계산. (ex. 1920*1080 = 2,073,600)

<픽셀 & 해상도 관계>

1) 해상도 같은 경우, 화면 크기가 클수록 픽셀 한 칸 크기도 커진다

2) 모니터 크기 같은 경우, 해상도가 높아질수록 픽셀 한 칸 크기는 작아진다

 

3) 화면 크기 클수록 해상도 높아진다

❗예외: 맥북 M2 Pro (2560*1600) - 화면 크기 작지만 해상도 좋음

 

4) 면적당 픽셀 수 많을 때, 세밀한 묘사 가능

8*8은 4*4보다 4배 많기 때문에 선명, 세밀한 표현 가능

 

 

[1배수 디자인]

- 다양한 기기에서 취급하는 화면의 크기는 모두 다르기 때문에 기준이 되는 사이즈는 없으므로 그 기준이 되는 사이즈를 정해야한다.

그 사이즈를 1배수 디자인이라고 한다. (1배수 = 1배(100%), 원본)

1배수 디자인 정하는 법

- 사람들이 가장 많이 쓰는 사이즈 - 내가 만든 앱을 쓸 사람 기준 (ex.안드로이드 유저가 더 많으면 안드로이드 위주로)

💡 배수 = 픽셀배율

https://yesviz.com/viewport/

1) 웹사이트의 표에서 확인하고 싶은 기기 찾기
2) Pixel Ratio(픽셀 배율)보기. 2.0이라고 써져 있다면 ‘이 기기는 2배수 사이즈’ 라는 뜻.

 

- (기존) 아이폰 320 * 480 / 안드로이드 360 * 640 

- (현재) 아이폰 375 * 812 / 안드로이드 360 * 800 권장  (스마트폰 발전하면서 1배수도 커짐)

 

[1배수 디자인이 실제 스마트폰에서 구현되는 과정]

1) 1배수 사이즈를 디자인하고 개발한다. (ex. 393*852 사이즈)

2) 렌더링 과정을 거친다.

💡렌더링이란?
기기가 코드를 읽고 디자인으로 바꾼다음, 자기 배율만큼 확대 또는 축소하는 것.

- 393*852 디자인을 3배 확대하여 1125*2436 으로 만든다.  (1179*2556가 만들어지기위해 다음 과정을 거친다)

3) 기기 실제 해상도에 맞게 미세하게 조정을 한다.

: 모든 기기들의 가로-세로 비율은 다르다. 디자인을 배율만큼 확대하거나 축소하면 실제 해상도와 차이가 조금씩 생길 수 있다.

이때 실제 해상도가 더 크다면 조금 더 키우고(업스케일), 실제 해상도가 더 작다면 조금 더 줄여요.(다운스케일)

ex) 아이폰 15프로 기기의 실제 해상도는 1125 * 2436보다 조금 더 큰 1179 * 2556. 따라서 조금 더 크게 키워서 화면에 출력.

 

 

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

*래스터(Raster) 방식:또 다른 말로는 비트맵이라고도함.

                                        : 포토샵같이 빈 칸에 데이터를 채우는 방식(픽셀)

                                        :  jpeg, bmp, gif, png / 파일형식: 확장자

<특징>

1. 해상도 ↑ 화질 ↑

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

3. 확대/축소 반복 시 원본 색상 정보를 잃음(=깨진다)

4. 고해상도 이미지 표현에 최적화 (단순하게 픽셀만 칠하면 됨, jpg 가장 가볍고 png 가장 무거움)

 

 

*백터(Vector)방식:일러스트, 피그마같이 그림을 수식으로 표현.(이미지보단 코드파일에 가까움)

                                   :  svg 확장자

<특징>

1. 크기 변형이 자유로움

2. 이미지가 크면 수식이 복잡해져서 파일 크기가 커진다

 

Q&A

Q: 피그마는 벡터 형식인데, 그래픽이 깨져요

A: 모니터, 핸드폰 = 픽셀기반. 래스터인 이미지는 피그마에서 작업해도 벡터화X.

 

 

📌8포인트 그리드⭐⭐⭐

💡8포인트 그리드란?
UI를 8의 배수에 맞춰 배치하는 레이아웃 규칙
ex) UI 사이의 간격, 요소의 여백, 크기 등을 8의 배수 단위로 조정해서 사용

 

❓🤔8포인트 그리드를 써야하는 이유?

예시 1)  규칙 = 폰트: 2씩 / 여백: 4씩 규칙 존재

- 일정한 규칙 존재 시, 다른 디자이너&개발자가 물어보는 등의 번거로움이 없어지고 효율적.

- 규칙이 없으면 업무의 효율성이 떨어므로 사전에 약속을 하는 것.

"여백, 간격, 높이, 너비 등 UI 수치를 키우거나 줄일 때 최대한 8의 배수 단위로 한다" = 8포인트 그리드 or 8포인트 그리드 디자인

(다른 디자이너의 디자인 시스템을 봐도 8의 배수 생각하면 됨!)

 

❓🤔왜 하필 '8'의 배수일까? 

- 8은 0.25배, 1.25배, 1.5배, 2배, 3배, 4배... 해도 정수로 깔끔하게 떨어져 업스케일, 다운스케일 시에도 유연하다.

- 최근엔 디바이스 해상도가 좋아져서 8대신 2배, 4배도 사용한다.

 ※ 10도 짝수지만 한 번 나누면 홀수가 됨.
홀수는 확대/축소 시 소수점이 되는데 픽셀 한 칸을 채우지 못한 불완전한 디자인이 생겨 깨짐현상이 발생한다.
큰 문제는 아니지만 매끄러운 모양을 만들 때 불편할 수 있다는 점!

 

 

📌피그마 기능 둘러보기

피그마의 기본 기능에 관한 것은 유튜브 강의를 보는 것을 추천한다. 하나하나 다 설명해줄 수가 없기때문...

 

- 피그마와 다른 툴(포토샵, 일러스트 등)에서 크기를 변경하는 프로세스가 다르다.

피그마 ui디자인을 위한 툴이며 개발자한테 코드로 전달하기 위해 Move 툴이 아닌 Scale툴을 통해 확대/축소해야한다.

- 다각형 도형 생성 시, 각 최대 60개까지 만들 수 있다.

 

# flip horizontal: 좌우반전 (왼/오)

# flip vertical: 수평반전 (위/아래)

 

* 이미지

- 가로/세로 4096px 이상인 경우, 자동으로 4096px로 맞춰짐.

 

*레이어

- x:가로 y:세로 z:높이

 

*패스 (포토샵, 일러스트에서의 펜툴기능)

* Out line stroke (도형 깨기)

- 단축키: ctrl + alt + O 우클릭 메뉴에서 선택 가능

       └ scale로 확대/축소 시 사이즈가 소수점이 나옴. 그럴때 도형을 깨서 면으로 만들기.

* Flatten (도형 rounding box 리셋)

- 단축키: ctrl + E 우클릭 메뉴에서 선택 가능

        └ 도형의 각도를 변형했을 때 선택한 rounding box 영역도 같이 틀어짐. 이 때 바른 정사각형으로 다시 만들어주는 기능.

 

*Path finder (패스 분리,결합 기능) 패스란 쉽게 '도형'이라고 생각하면된다

우측 이미지의 도형을 테스트 해봤다.

Union selection	Substract selection	Intersect selection	Exclude selection

 

 

 

---

 

Retrospect

 

😥 배수와 관련된 개념을 몰라서 유튜브로 강의를 봐도 이해 못했는데

✔️ 강사님이 초보자(?)의 눈으로 섬세하게 잘 알려주셔서 배수의 개념을 파악할 수 있었다.

 

😥 피그마는 이미 다 안다고 생각했는데 막상 강의를 들어보니

✔️ 왜 그렇게 해야하는지에 대한 개념까지 설명해주셔서 90%이해했던걸 100%이해할 수 있었다.

ex. 도형 200*100의 round값을 줬을 때 왜 50이 최대값인지? → round는 한 모서리의 값. 세로 100을 가로로 나눴을 때 한 모서리의 최대값은 50. 

 

✔️ 강사님께서 디자인할 때 정답을 찾는 것 보다는 정답을 향해 가는 과정 = 디자인이라고 하셨다. 정답은 존재하지 않지만 이 상황에서 최선이 무엇일까를 고민해보는 태도를 갖는 건 어느 직업에서나 중요한 것 같다.

 

---

 

강의를 보고 요약해서 정리하는 게 생각보다 시간이 오래 걸렸다.

본 캠프 전에 할 게 많아서 주말에도 강의 보는 걸 쉬면 안되겠다는 생각..

개인과제와 + 아티클 스터디 + 개인 시간표 관리 + 포트폴리오 수정까지..

할 수 있겠지..?