TIL_1W1D_피그마 본격적으로 둘러보기
[사전캠프 당시의 TIL]
피그마는 제품을 만드는 모든 사람을 위한 디자인 툴이자 협업 도구
디스플레이는 웹사이트, 앱, 키오스크 등 디지털 화면을 뜻함, 이 디스플레이는 픽셀이라는 정말 작은 칸으로 이루어져있으며 크기가 한정되지 않음
해상도는 디스플레이의 선명한 정도를 나타냄(디스플레이 안에 들어가 있는 픽셀의 개수)
해상도와 픽셀의 관계
해상도가 동일 시, 화면 크기가 클수로 픽셀 한 칸의 크기 커짐
화면 크기 동일 시, 해상도가 높아질수록 픽셀 한 칸의 크기 작아짐
일반적으로 화면 크기가 클수록 해상도가 높음
1배수 디자인는 디자인을 할 때 기준이 되는 사이즈를 하나 정하게 되는데 1배(100%), 즉 원본 사이즈라는 의미
사람들이 가장 많이 쓰는 사이즈로 하는 것이 일반적
아이폰의 경우 375 x 812, 안드로이드의 경우 360 x 800
래스터 방식은 비트맵 형식이라고도 부르며, 픽셀 칸에 색깔 칩을 하나씩 담는 형식 예로는 포토샵이 대표적인 툴이며 파일 형식으로는 jpg, bmp, gif, png 등
해상도가 높을 수록 화질이 좋으며 낮은 이미지를 크게 만든다고 화질이 좋아지지는 않음
확대와 축소 반복 시 색상 정보 사라짐, 단순 방식이라 고해상도 이미지 표현에 좋음
백터 형식은 그림을 수식으로 표현하는 형식이며 예로는 일러스트나 피그마가 대표적인 툴
이미지보다 코드 파일에 가까움 파일 형식으로는 svg가 대표적
확대 및 축소 등 크기 변형 자유로움, 이미지가 크고 복잡 시 수식도 복잡해짐
또한, 래스터 형식 이미지를 백터 툴에서 작업한다고 백터 개체가 되는 것이 아님
일반적으로 디자인 요소들을 8의 배수로 만든다는 규칙을 지님
그 규칙을 8포인트 그리드 디자인이라고 부름
UI 사이의 간격, 요소의 여백, 크기 등을 8의 배수 단위로 조정해서 사용
피그마는 기본적으로 피그마 계정에 파일을 온라인으로 저장하는 클라우드 방식
내 컴퓨터에 파일을 저장하는 방식은 로컬 방식
전체를 캔버스라고 부름
맨 왼쪽을 파일 패널 그 밑을 페이지 패널, 레이어 패널이라 함
맨 오른쪽을 디자인 패널이라고 부름
도구 메뉴에는 이동툴 프레임툴 도구툴 패스툴 텍스트 커뮤니케이션을 위한 기능으로 이루어짐
Appearance에서 Count를 5로 하면 오각형으로 변함
Corner radius를 50으로 하면 50만큼 둥글게 하는 것임
독립적인 꼭짓점도 설정이 가능함
기본값이 100*100
4096까지 지원함
Flip horizontal 좌우반전
Filp vertical 상하반전
Line height 행간 줄과 줄 사이의 간격
Letter spacing 자간 글자와 글자 사이의 간격
Fill에서 색상을 누르면 색상 그라데이션 이미지 동영상 순으로 되어있음
Fill 도형 전체의 이미지
Fit 도형 끝에 맞춰서 전체의 이미지
Crop 내가 원하는 만큼 조작이 가능
Tile 이미지를 반복해서 보여줌
이며 밑의 사진은 Fill Fit Crop Tile 순이다
레이어란 피그마에서 도형이나 텍스트를 만들면 요소 하나하나가 하나의 층을 이루는 데 그 층을 의미함
Bring to front 앞으로 가져오기
Send to back 뒤로 내려가기
드래그 해서도 가능하다
스케일 툴을 사용하면 소수점이 발생해서 지양한다
Outline stroke 면과 선이 따로 된 레이어 발생
(글자에서 하면 글자처럼 생긴 도형이 됨)
Flatten 회전한 정보나 곡률이 사라짐 정렬 기준이 사라짐
이 때의 주의사항으로 아웃라인과 평탄화 모두 기존 개체의 편집 정보를 없애고 새로운 형태로 다시 만들어줌
Union selection 합치기
Subtract selection 빼기
1주차 숙제
4번 도형이 사각형일 것이라는 생각을 못 해서 인지 조금은 헤매는 감이 없지 않아 있었고 마지막 도형은 사각형 8개를 각도 별로 돌린 후 합친 후 원을 넣어 빼야겠다고 생각해 어설프게 나왔는데 해설을 보니 내가 너무 어렵게 생각한 듯하였다
프레임은 피그마의 기본 단위
프레임은 코드 블록을 만드는 기능 실제 코드로 바뀔 수 있는 개체, 실제로 디자인 할 때는 프레임 사용
프레임은 다른 개체나 프레임을 넣을 수 있기 때문에 컨테이너라고도 함
그룹은 여러 개체를 하나로 묶어주는 기능
일괄적 조정을 위해, 디자인이 복잡하여 약간의 편의를 위함
그룹으로 묶으면 코드블럭으로 인식하지 않고 이미지 개체로 인식, 백터 그래픽으로 인식
그룹을 사용하는 경우가 적음 일러스트레이션, 특정 그래픽을 만들 때만 사용
Parant and Child
Frame 5는 부모, Frame 1,2는 자식인 관계가 됨
Alignment 정렬의 기본값은 Left top
단일 개체는 부모 개체가 기준이지만 다중 개체를 정렬할 때는 선택된 개체들 사이에서 정렬이 발생
다중 개체 일 때는 More actions가 나오는데 세가지의 정렬이 나옴
Tidy up 그리드를 맞춰서 정렬
Distribute vertical spacing 수직 간격을 균등하게 맞춰줌
Distribute horizontal spacing 수평 간격을 균등하게 맞춰줌
Tidy up 적용 시 ->
디스플레이의 크기가 바뀌어도 디자인이 유연하게 바뀔 수 있도록 만들어야 함
오토레이아웃은 레이아웃의 유연함을 만들어주는 가장 중요한 기능이며, 컨테이너의 내부 여백과 외부 여백을 조정하는 어떤 레이아웃의 기능임
컨테이너를 하나의 개체라고 보면, 이 개체를 패딩으로 감싸서 컨테이너 안에 넣을 수 있음
오토레이아웃을 만드는 방법 2가지
프레임이 아닌 개체에 오토레이아웃을 적용함, 기본 패딩 값을 가진 오토레이아웃 프레임이 생김
이미 있는 프레임에 오토레이아웃 속성을 적용함, 프레임 자체가 오토레이아웃으로 변환 Shift+A
1번은 차례대로 수직, 수평, 감싸기임
컨테이너2를 5번 간격으로 80 조정한 결과 ->
오토레이아웃은 만들어지는 순서대로 밑으로 쌓임
이미 정렬이 되어 있는 컨테이너이기 때문
