TIL - 피그마의 이해/디스플레이와 배수

피글렛·2024년 10월 1일

피그마는 현재 가장 강력한 디자인 툴이자,
와이어프레임부터 핸드오프 과정 전부를
하나의 툴에서 할 수 있는 효율적인 툴입니다.

제품을 만들 때는 기획 → 디자인 → 개발 → 테스트 및 출시의 과정을 거칩니다.

1. 접급성
웹에서도 사용해 접근성이 좋고, 맥과 윈도우 모두 사용 가능하다.

2. 올인원
디자인 툴이며 개발자까지 가능한 종합 협업 툴이다.

3. 커뮤니티
풍부한 커뮤니티 자료있어 각종 플러그인과 디자인 자료들이 피그마의 인기를 높였다.

4. 쉬운 학습
많이 사용하는 툴들과 사용 방법이 유사해 금방 배울 수 있고,
디자인 기초부터 고급 기능까지 모두 피그마로 가능하다.

웹사이트나 앱, 키오스크, 전광판, TV 등을 본다 = 디지털 화면을 본다.
디지털 화면을 디스플레이(Display)라고 부른다.

디스플레이는 픽셀(Pixel)이라는 정말 작은 칸들로 이루어져 있다.
픽셀의 크기는 따로 정해져 있진 않다.

TV나 모니터를 가까이 관찰해보면 작은 격자를 볼 수 있다.
작은 칸 하나하나가 픽셀이다.

해상도(Resolution)

해상도 = 디스플레이의 선명한 정도
해상도 = 디스플레이 안에 들어 있는 픽셀의 개수
픽셀의 갯수 = 가로 픽셀 개수 x 세로 픽셀 개수

해상도와 픽셀의 관계
해상도가 같다면, 화면 크기가 클수록 픽셀 한 칸의 크기도 커진다.
화면 크기가 같다면, 해상도가 높아질 수록 픽셀 한 칸의 크기는 작아진다.

하지만!
맥북처럼 화면 크기는 작은데 해상도가 매우 높은 디스플레이들이 있다.

면적 당 픽셀 개수가 더 많다면, 더 세밀한 묘사가 가능하다
8 x 8 해상도에 그린 그림을 4 x 4 해상도의 화면 크기에 맞게 크게 키우면 더 세밀해진다.

8 x 8 해상도는 4 x 4 해상도보다 면적 당 픽셀 갯수가 4배 많기 때문이다.

1배수 디자인을 정한 이유

같은 앱이라면 어떤 스마트폰으로 열어도
항상 화면에 보이는 디자인의 위치나 배치가 동일하다.
디바이스마다 맞는 디자인을 다 만들지 않기 때문이다.
기준이 되는 사이즈가 1배수 디자인이다.

1배수 디자인의 개념

1배수의 뜻은 1배(100%), 즉 원본 사이즈라는 뜻이다.
사람들이 가장 많이 쓰는 사이즈로 하는 것이 일반적이다.

권장하는 1배수 사이즈

배수는 픽셀 배율이라고도 부른다.
픽셀 배율은 기기를 만들고 출시할 때 정해져서 나온다.

2.0이라고 써져 있다면 ‘이 기기는 2배수 사이즈’라는 뜻이다.
아이폰 = 375 x 812, 안드로이드 = 360 x 800을 권장한다.

디자인 사이즈와 실제 사이즈의 원리

구현과정

1배수 사이즈를 디자인하고 개발한다.
기기는 코드를 읽고 디자인으로 바꾼다음, 자기 배율만큼 확대 또는 축소한다. (렌더링)

아이폰 15프로 기기의 경우, 375 x 812의 디자인을 3배 확대해서 1125 x 2436으로 만든다.
기기 실제 해상도에 맞게 미세하게 조정을 마친 후 화면에 띈다.

아이폰 15프로 기기의 실제 해상도는 1125 x 2436보다 조금 더 큰 1179 x 2556이다.
따라서 조금 더 크게 키워서 화면에 출력한다. (업스케일링)

업스케일, 다운스케일

ZEP으로 팀원들과 첫대면 후 팀장 및 팀명 선정하기
- 팀장은 내가 자원해서 맡게 되었고 팀명은 meow로 정해짐
팀 노션 제작하기
- 팀원들과 함께 팀 노션을 제작하고 데일리 스크럼 작성함
블로그 생성하기
- 벨로그를 생성하고 팀 노션에 링크 공유함
- 첫글은 스타터 노트로 TIL을 작성함
- 시작에 앞서, 목표와 각오를 명확하게 다짐