피그마?
디자인 협업 툴 ! 제품 제작의 모든 과정을 피그마로 활용 가능.
일러스트레이터,포토샵 등의 디자인툴도 있지만, 피그마는 팀원과의 협업이 가능하다는 장점. (개발 기능도 포함)
- 디스플레이 : 픽셀들의 모임으로 이루어진 디지털 화면 (TV, 휴대폰 등)
- 해상도 : 디스플레이의 선명한 정도. 디스플레이의 픽셀의 개수를 의미함.
EX) 가로 줄의 픽셀 개수 X 세로 줄의 픽셀 개수 (1920 X 1080 = 가로 줄의 1920개, 세로 줄의 1080개의 픽셀이 들어가 있음)
해상도와 픽셀의 관계
1) 해상도가 같다면, 화면 크기가 클수록 픽셀 한 칸의 크기가 커짐.
2) 화면 크기가 같다면, 해상도가 높아질수록 픽셀 한 칸의 크기가 작아짐.
3) 일반적으로 화면 크기가 클수록 해상도도 높음.
4) 면적 당 픽셀 갯수가 많을수록 더 세밀한 묘사가 가능함.
1배수 디자인?
디자인의 기준이 되는 사이즈 (1배,100% 원본 사이즈)
일반적으로 사람들이 가장 많이 쓰는 사이즈로 정함(타겟 파악 필요)/ 아이폰 375x812,안드로이드 360x800
이미지 표현 방식
1) 래스터 방식(비트맵 형식) : 픽셀 칸에 색깔 칩을 하나씩 담는 형식/jpg,png 등
해상도가 높을 수록 화질이 좋다.
해상도 낮은 이미지를 크게 만들어도 화질이 좋아지지 않음.
확대와 축소를 반복하면 색상정보가 사라짐.
고해상도 이미지를 표현하기에 적합 (파일 크기도 벡터에 비해 작음)
2) 벡터 방식 : 그림을 수식으로 표현하는 형식/svg
확대 및 축소 등 크기변형이 자유로움. (수식의 변화가 없기에)
이미지가 크고 복잡하면 수식이 복잡해짐. (파일 크기 증가)
8포인트 그리드?
일반적으로 디자인 요소들은 8의 배수로 만든다는 규칙.
통일 및 편의를 위한 규칙
레이어란
- 도형이나 텍스트 요소 하나하나의 층. 레이어의 위치를 조절해서 앞으로 혹은 뒤로 이동 가능
패스란
- 벡터 형식으로 된 모양 (선,모양,복잡한 그림도 가능)
아웃라인과 평탄화
아웃라인 : 윤곽선 처리 기능. 선을 면으로 바꿀 수 있다. 아이콘 등을 선으로 만들었을 때, 크기를 조정하더라도 굵기 비율을 균일하게 만들 때 사용.
평탄화 : 도형의 회전, 모서리 반경 등을 기본 설정으로 바꾸는 기능.
패스 파인더란
- 두 개 이상의 도형을 결합하거나 분리할 수 있는 도구.
- 합집합 : 도형을 서로 합침
- 차집합 : 도형 중 서로 겹치는 곳만 뺌.
- 교집합 : 도형 중 서로 겹치는 곳만 남김.
피그마의 핵심 기능
프레임, 오토레이아웃, 컨스트레인트, 리사이징
1. 프레임 : 피그마 디자인의 기본 단위
2. 컨스트레인트 :
3. 오토 레이아웃 :
4. 리사이징 :
프레임과 그룹
- 프레임은 코드 브록을 만드는 기능이자, 실제 화면으로 인식하는 개체. (하나의 틀)
다른 개체나 프레임을 넣을 수 있기에, 컨테이너라고도 불림. - 그룹은 여러 개체를 하나로 묶어주는 기능
= 그룹은 여러 요소를 한번에 담아서 움직일 때 주로 사용.
(위, 프레임/ 아래, 그룹)
프레임은 별개의 코드블럭이기에 각각의 블록에 배경색 지정 가능, 그룹은 여러 개체를 하나로 묶어둔 것이어서 배경색 개별지정 불가.
오토 레이아웃
- 레이어를 쌓고, 프레임을 배치하고 정렬하는 핵심 기능.
- 레이아웃에 유연함을 만들어주는 가장 중요한 기능 !
코드블록의 구조
- 패딩 : 코드 블록 안에 이는 개체와 함께 실제 블록 사이즈가 되는 내부 여백
- 보더 : 코드블록 내부 공간 바로 바깥의 가장자리, 테두리
- 마진 : 코드블록 바깥의 여백이자 다른 코드 블록과의 간격
= 오토레이아웃은 컨테이너의 내부여백과 외부여백을 조정하는 기능
오토레이아웃은 컨테이너를 간격에 맞게 규칙적으로 정렬해주는 기능도 수행
컨스트레인트
- 오토레이아웃을 오토-레이아웃으로 만들어주는 기능
- 오토레이아웃 안의 개체들이 움직이는 방식을 제한한다는 뜻.
= 부모 컨테이너 크기가 변할 때, 자식 컨테이너는 어디를 기준으로 변할까?를 정함.
컨스트레인트 조건 (위와 아래, 좌우) 에 따라서 부모 컨테이너가 변경함에 따라 자식 컨테이너도 이동함
리사이징 : 프레임을 오토 레이아웃으로 감싸는 순간 새로운 사이즈 개념이 생김.
- 픽스드 : 고정값 (공통)
- 허그 : 자식 컨테이너 크기에 맞춰 조정 (부모만)
- 필 : 부모 컨테이너 크기에 맞춰 조정 (자식만)
