피그마 활용법 강의 정리

📌 도형 저장 방법

Design 패널에 Export 들어가서 배수와, 제목, 확장자 선택 후 → 밑에 버튼을 누른다. (Export Polygon 5)

 

배수설정

 

📌 프레임 VS 그룹

◾  프레임은 코드 블록을 만드는 기능이고, 실제 코드로 바꿀 수 있는 개체예요.

◾  그룹은 편집이나 조정이 필요할 때, 또는 편의를 위해 여러 개체를 하나로 담는 기능이에요.

◾  프레임은 개발에 필요한 속성들을 적용할 수 있고, 그룹은 속성을 적용할 수 없어요.

 

📌  레이어와 정렬

◾ 레이어를 쌓은 구조가 곧 코드 구조

◾ 레이어는 화면 상단에서 하단으로 쌓이지만, 화면 앞에서부터 뒤라는 방향도 존재

◾  더 앞에 있는 개체는 제트값이 높다, 나한테 가까이 있다.

◾ 여러개체 정렬 시 프레임에 가장 가까이 있는 개체를 기준으로 정렬된다.

 

📌 오토레이 아웃

◾ 프레임 구조 ⭐ 중요하다. 

• 패딩(Padding): 코드 블록 안에 있는 개체와 함께 실제 블록의 사이즈가 되는 내부 여백
• 보더(Border): 코드 블록 내부 공간 바로 바깥의 가장자리. 실제 코드 블록의 테두리
• 마진(Margin) : 코드 블록 바깥의 여백이자 다른 코드 블록과의 간격

◾ 오토레이 아웃  : 패딩으로 감싸 컨테이너를 만들 때 사용, 순서가 앞에 있으면 밑으로 간다.(레이어 순서와 다름)

 

📌 컨스트레인트 : Constraint 제약, 제한

◾ 어디를 기준으로 고정할 것인가, 오토레이아웃 안에 있는 개체들이 움직이는 모양을 제한

◾ 프레임 리사이징 

 

📌 디스플레이와 픽셀

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

◾  픽셀의 갯수 : 가로 줄의 픽셀 개수 * 세로 줄의 픽셀 개수 (1920*1080 디스플레이는 총 2,073,600개의 픽셀)

◾ 1배수 디자인 : 1배(100%), 즉 원본 사이즈, 디자인을 할 때는 기준이 되는 사이즈

◾ 아이폰 권장사이즈 : 375 * 812 / 안드로이드 권장사이즈 : 360 * 800

- 375*812에서 비율을 그대로 유지한 채 375를 360으로 축소하면 812는 얼마가 되는지 한 번 보세요!

◾ 사이즈 참조 사이트 : https://yesviz.com/viewport/

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

 

- 렌더링 : 기기는 코드를 읽고 디자인으로 바꾼다음, 자기 배율만큼 확대 또는 축소

- 줄이는 건 다운스케일, 키우는 건 업스케일이라고 해요.

 

📌  분기점

◾  디스플레이의 해상도에 따라 각각 다른 화면을 보여주기 위한 기준점(경우의 수를 나누어서 보여준다.)

- 데스크탑 화면 : 가로가 1024px 이상

- 태블릿 화면 : 로가 768px 이상, 1024px 미만

- 모바일 화면 : 가로가 768px 미만

→ 더 이상 작아지지 않는 지점이 있어야 레이아웃이 깨지는 걸 막을 수 있다.

 

📌 그리드 : 격자

◾ 반응형 웹이 분기점마다 디자인을 바꿀 때, 그리드를 따라 정렬

◾ 균형감과 완성도, 일관성 위해 사용

◾ 일반적으로 12개 칼럼 사용 : 모바일 웹디자인에서는 기둥 4개 배치하기 시작, 디자인을 반응형으로 확장하기 위해서

태블릿에선 2배인 8개, 데스크톱에선 3배인 12개로 사용하면서 12개 칼럼이 일반적인 기둥 수로 자리 잡음.

◾ 그리드 구조 

- 거터,  유닛

◾ 대표적인 그리드

- 960 12 Column Grid : 유닛너비 60 / 거터 너비 20 

- 1200 12 Column Grid : 유닛너비 76 / 거터 너비 24

- 1440 12 Column Grid : 유닛너비 76 / 거터 너비 24

 

📌 8포인트-그리드 디자인

◾ 간격이나 크기 등을 8, 16, 24, 32, …로 맞추는 방법

- 디자인을 8의 배수만 기억하면 되기 때문에 빠른 커뮤니케이션과 빠른 작업가능

- 홀수는 확대 또는 축소할 때 소수점이 생기는데, 만약 소수점이 생기면 픽셀 한칸을 미처 못 채운 불완전한 디자인이 생기고, 결국 디자인이 깨져 보이는 현상이 발생

 

📌  반응형(Responsive)과 적응형(Adaptive)

 

📌 디자인 시스템

- UI키트는 재료 목록만 있는 상태, 디자인 시스템은 UI만 있는게 아니고 규칙도 있는 것 

- 아토믹 디자인 시스템 : 원자, 즉 디자인의 가장 작은 요소 

✅  파운데이션 :  

◾  색상(Color) :

- RGB: 빛의 3원색으로 구현되는 화면, 빨강, 초록, 파랑, 감산혼합, 256가지 색상 보여준다.

- Hex Code : 각각의 숫자를 컴퓨터가 16진수(Hexadecimal)로 변환해서 읽는것

◾  서체(Font, Typography)

◾ -아이콘(Icon)

◾  레이아웃(Layout)

• 간격, 여백(Spacing, Gap)
• 곡률(Radius)
• 그리드(Grid)
• 고도(Elevation)

 

📌  컬러 스타일

- 기본적으로 2~3개 : 포인트컬러(핵심부분), 메인컬러(백그라운드), 세컨더리컬리(포인트컬러 뒷받침)

- 색 정한 뒤 밝기를 10단계 만든다.

- 1(포인트):3(세컨더리):6(메인컬러) 법칙 : 빠르게 밸런스 잡는데 좋다.