TIL_11W2D_Mastering Figma Basics Step by Step(1~2)
11w 1d off
체계적으로 배우는 피그마 기초 완전 정복(1)
03. 디스플레이와 배수 이해하기
디스플레이와 픽셀
1) 디스플레이와 픽셀의 개념
우리가 웹사이트나 앱, 키오스크, 전광판, TV 등을 본다는 건 디지털 화면을 본다는 것
디지털 화면들은 디스플레이(Display)라고 함
이 디스플레이는 픽셀(Pixel)이라는 정말 작은 칸들로 이루어져 있으며, 픽셀의 크기는 따로 정해져 있지 않음
해상도(Resolution)
해상도는 디스플레이의 선명한 정도아며, 디스플레이 안에 들어가있는 픽셀의 개수를 말함
픽셀의 갯수는 가로 줄의 픽셀 개수 * 세로 줄의 픽셀 개수
2) 해상도와 픽셀의 관계
해상도가 같다면, 화면 크기가 클수록 픽셀 한 칸의 크기도 커짐
화면 크기가 같다면, 해상도가 높아질 수록 픽셀 한 칸의 크기는 작아짐
일반적으로 화면 크기가 클 수록 해상도도 높음
면적 당 픽셀 갯수가 더 많다면, 더 세밀한 묘사가 가능
1배수 디자인
1) 모바일 앱의 사이즈
같은 앱이라면 어떤 스마트폰으로 열어도 항상 화면에 보이는 디자인의 위치나 배치가 동일
디바이스마다 맞는 디자인을 일일이 다 만들지 않기 때문
따라서 기준이 되는 사이즈를 하나 정해서 디자인함
2) 1배수 디자인의 개념
우리가 디자인 할 때 기준이 되는 사이즈를 하나 정하는데, 그 사이즈를 1배수 디자인이라고 함
3) 1배수 디자인을 정하는 방법
일반적인 1배수 디자인 사이즈
1배수 디자인 사이즈는 사람들이 가장 많이 쓰는 사이즈로 하는 것이 일반적
다만 유의할 점으로는 내가 만들 앱을 쓸 사람들이어야 함
권장하는 1배수 사이즈
픽셀 배율을 확인할 수 있는 곳
지금은 아이폰의 경우 375 x 812, 안드로이드의 경우 360 x 800을 권장함
4) 디자인 사이즈와 실제 사이즈의 원리
기기해상도가 4자리 숫자인데, 우리가 디자인 하려는 사이즈는 3자리 숫자에 불과함
1배수 디자인이 실제 스마트폰에서 구현하는 과정
픽셀 배율이, 우리가 만든 1배수 디자인을 몇배 확대할 건지 정해주게 됨
구현 과정
1배수 사이즈를 디자인하고 개발함
기기는 코드를 읽고 디자인으로 바꾼 다음, 자기 배율만큼 확대 또는 축소를 함(이 과정을 렌더링이라고 함)
아이폰 15프로 기기의 경우, 375 x 812의 디자인을 3배 확대하여 1125 x 2436으로 만듦
기기 실제 해상도에 맞게 미세하게 조정을 마친 후 화면에 띄우게 됨
📌 업스케일, 다운스케일
실제 해상도가 더 크면 조금 더 키우고, 실제 해상도가 더 작다면 조금 더 줄임
줄이는 건 다운스케일, 키우는 건 업스케일이라고 함
아이폰 15프로 기기의 실제 해상도는 1125 x 2436보다 조금 더 큰 1179 x 2556임
따라서 조금 더 크게 키워서 화면을 출력함
04. 이미지 표현 방식, 백터와 래스터
컴퓨터가 그림을 그리는 방법
1) 래스터(Raster) 방식
비트맵(Bitmap) 형식이라고 부르며, 픽셀 칸데 색깔 칩을 하나씩 담는 형식
포토샵이 래스터 형식의 대표적인 툴
파일 형식으로는 jpg, bmp, gif, png 등 우리가 흔히 보는 이미지 형식들이 있음
2) 벡터(Vector) 방식
그림을 수식으로 표현하는 형식이며, 일러스트레이터나 피그마가 대표적인 툴임
수식으로 표현하는 방식이라, 이미지라기보다는 코드 파일에 더 가까움
대표적으로 svg가 있음
래스터 방식의 특징
해상도가 높을 수록 화질이 좋음
해상도가 낮은 이미지를 크게 만든다고 화질이 좋아지지 않음
확대와 축소를 반복하면 색상 정보가 사라짐
단순한 방식이라 고해상도 이미지를 표현하기 좋음
백터 방식의 특징
확대 및 축소 등 크기 변형이 자유로움
이미지가 크고 복잡하면 수식도 복잡해짐
05. 8포인트 그리드는 뭘까?
화면 디자인에도 규칙이 있다
일반적으로 디자인 요소들은 8의 배수로 만든다는 규칙을 가지고 있음
그 규칙을 8포인트 그리드 디자인(8-point grid design)이라고 부름
8포인트 그리드 디자인의 개념
일반적으로 가장 많이 사용하는 규칙
UI를 8의 배수에 맞게 배치하는 레이아웃 규칙
UI 사이의 간격, 요소의 여백, 크기 등을 8의 배수 단위로 조정해서 사용
꼭 8의 배수여야 하나요?
8은 1,2,4,8로 나눌 수 있는데, 2로 3번이나 쪼갤 수 있고 나눈 숫자도 다시 짝수임
그만큼 디자인을 축소할 때 디자인을 망가뜨리지 않고 축소할 수 있음
반대로 커질 때도 다른 수에 비해 딱 떨어지게 만들기 쉬워짐
따라서 해상도가 변하면서 업스케일, 다운스케일될 때 유연하게 대처할 수 있음
최근에는 디바이스의 해상도가 워낙 선명하고 좋아져서, 디자인도 더 세밀하고 복잡하게 만들기 위해 8대신 4배수나 2배수까지도 사용하는 경우도 많음
앨리어싱은 디지털 이미지나 화면상 해상도가 부족해 곡선이나 대각선 등이 계단처럼 울퉁불퉁하게 보이는 현상임
안티앨리어싱은 앨리어싱(계단 현상, 왜곡 등)을 없애는 기술임
체계적으로 배우는 피그마 기초 완전 정복(2)
코드는 디자인을 어떻게 읽을까?
1) 디자인을 코드로 변환함
2) 이때, 코드는 디자인을 레고처럼 쌓음
코드는 기본적으로 네모난 박스 영역을 만드는데 그래서 박스모델이라고 함
3) 웹과 앱은 코드를 읽고, 디자인으로 다시 바꿔서 화면에 보여줌
따라서 UI를 설계할 때는 코드로 변환할 수 있는 구조를 만듦
그 구조를 위한 기능이 프레임임
프레임과 그룹
1) 프레임의 개념
프레임은 피그마에서 코드 블록을 만드는 기능이자, 실제 화면으로 인식하는 개체
프레임은 디자인을 코드로 바꿀 때 개발이 가능한 코드 블록으로 만들어짐
박스 모델의 박스 하나하나가 피그마에서 프레임이라는 기능으로 구현되는 셈
프레임은 다른 개체나 프레임을 넣을 수 있기 때문에, 컨테이너(Container)라고도 부름
2) 그룹의 개념
그룹은 여러 개체를 하나로 묶어주는 기능
프레임과 달리 그룹은 코드 블록으로 인식되지 않음
3) 프레임 VS 그룹
프레임은 코드 블록을 만드는 기능이고, 실제 코드로 바꿀 수 있는 개체
그룹은 편집이나 조정이 필요할 때, 또는 편의를 위해 여러 개체를 하나로 담는 기능
프레임은 개발에 필요한 속성들을 적용할 수 있고, 그룹은 속성을 적용할 수 없음
부모-자식 관계와 레이어 정렬
감싸고 있는 것과 감싸진 것의 관계를 부모-자식(Parent-Child) 관계라고 함
Postion에서 ... 클릭 시
정리하기(Tidy up)
수직 간격 균등 분배(Distribute vertical spacing)
수평 간격 균등 분배(Distribute horizontal spacing)
오토레이아웃의 개념
Q. 오토레이아웃은 왜 알아야 할까요?
레이어를 쌓고, 프레임을 배치하고 정렬하는 피그마의 핵심 기능
레이아웃에 유연함을 만들어주는 가장 중요한 기능이 바로 오토레이아웃임
프레임을 배치하고 정렬해 레이어를 코드 블록처럼 쌓는 핵심 레이아웃 기능
1) 코드 블록의 구조
우리가 보는 화면의 디자인들은 모두 코드 블록으로 이루어져 있음
이 코드 블록은 피그마에선 프레임으로 만들 수 있으며, 다른 말로는 컨테이너라고 함
패딩(Padding): 코드 블록 안에 있는 개체와 함께 실제 블록의 사이즈가 되는 내부 여백
보더(Border): 코드 블록 내부 공간 바로 바깥의 가장자리. 실제 코드 블록의 테두리
마진(Margin) : 코드 블록 바깥의 여백이자 다른 코드 블록과의 간격
2) 컨테이너가 만들어지는 원리
오토레이아웃은 개체를 패딩으로 감싸 컨테이너를 만들 때 사용
모든 코드 블록은 내부에 들어있는 개체와, 개체를 둘러싼 패딩(내부 여백)으로 만들어짐
즉, 우리가 만드는 UI의 크기는 개체의 크기 + 패딩
3) 컨테이너를 쌓으려면?
오토레이아웃은 컨테이너를 간격에 맞게 규칙적으로 정렬해주는 기능도 수행
컨테이너는 개체와 패딩으로 이루어짐
컨테이너를 하나의 개체라고 본다면, 이 개체를 또 패딩으로 감싸서 컨테이너 안에 넣을 수 있음
이 컨테이너들을 여러 개 쌓을 때, 얼마만큼의 간격으로 몇 개를 쌓을 건지를 오토레이아웃으로 편하게 만들어 낼 수 있음
새 오토레이아웃 컨테이너 만들기
1. 프레임이 아닌 개체에 오토레이아웃을 적용하기 Shift + A
기본 패딩값을 가진 오토레이아웃 프레임이 생김
2. 이미 있는 프레임에 오토레이아웃을 적용하기
프레임 자체가 오토레이아웃 속성으로 변환됨 Ctrl + Alt + G / Shift + A
오토레이아웃 패널 둘러보기
1. 오토레이아웃의 정렬 방향: 오토레이아웃 안에 있는 프레임을 어떤 방향으로 쌓을 지
세로: 수직 방향으로 쌓임
가로: 수평 방향으로 쌓임
감싸기: 수평 방향으로 쌓다가, 일정 위치부터는 다음 줄에 쌓임
- 오토레이아웃 해제: 오토레이아웃 속성을 제거하며, 일반 프레임으로 변경됨
- 프레임 크기를 내부 콘텐츠에 딱 맞게 맞춰줌
컨스트레인트를 꼭 알아야 하나요?
오토레이아웃을 정말로 오토-레이아웃으로 만들어주는 기능
오토레이아웃은 그 자체로도 이미 레이아웃을 자동으로 쌓을 수 있지만, 반응형 웹사이트처럼 실시간으로 같이 움직이는 레이아웃을 만들기 위해서는 오토레이아웃이 움직일 때의 규칙을 만들어 줘야함
컨스트레인트의 뜻
컨스트레인트(Constraint)는 제약(조건), 제한이라는 뜻
오토레이아웃 안에 있는 개체들이 움직이는 방식을 제한한다는 뜻
더 정확하게는, 부모 컨테이너의 크기가 변할 때, 자식 컨테이너는 어디를 기준으로 변할까?를 정할 수 있음
프레임 리사이징
리사이징의 개념
프레임은 기본적으로 가로와 세로 길이가 고정이며, 이 상태를 Fixed(픽스드;고정된)으로 부름
프레임을 오토레이아웃으로 감싸는 순간, Fixed 외의 다른 사이즈값이 생기는데, 이걸 리사이징이라고 함
부모의 리사이징 값에 따라 자식의 리사이징 값이 영향을 받음
반대로, 자식의 리사이징 값에 따라 부모의 리사이징 값도 영향을 받음
리사이징의 종류
피그마에서 리사이징은 3가지 값이 있음
리사이징은 가로 길이와 세로 길이에 각각 적용할 수 있음
포지션 이해하기
요소의 위치를 고정하거나 스크롤에 따른 위치를 조정할 때, 개발에서 포지션이라는 속성을 조정해서 만듦
피그마에서 설정할 수 있는 포지션의 종류
Static(스태틱) 일반적인 요소들이 가지고 있는 포지션, 기본값이자 스크롤을 하면 같이 따라 같이 움직임
Fixed(픽스드;고정된) 화면 전체를 기준으로 스크롤하더라도 항상 고정된 위치에 있음
Absolute(앱솔루트) Fixed와 유사하지만 고정되는 기준이 컨테이너 안이며, Fixed는 화면 전체를 기준으로 하고, Absolute는 본인이 담겨 있는 부모 컨테이너를 기준
Sticky(스티키) 스크롤에 따라서 기본값과 Fixed를 전환하는 포지션이며, 스크롤을 따라 움직이다가, 특정 위치부터는 상단에 고정되는 것임
