피그마 기초 완전 정복 - UXUI 기초 개념 이해 (피그마의 정의와 디자인 기초 개념 1편)

1. 오늘 학습 키워드

- 피그마

- 디스플레이와 배수

---

2. 오늘 학습 한 내용을 나만의 언어로 정리하기

 

<피그마>

- 제품을 만드는 모든 사람을 위한 협업 도구

- 디자인 작업과 실시간 협업을 동시에 지원하는 디자인 툴

- 디자이너를 중심으로 기획자, 개발자, 마케터 등 다양한 직군이 함께 활용

- 같은 화면을 보며 의견을 공유하고 작업할 수 있는 협업 환경 제공

- 디자인 협업 도구를 넘어 팀 전체를 위한 종합 협업 플랫폼으로 확장 중

- 최근에는 기획자, 개발자, 마케터 등 다양한 직군을 위한 기능을 강화하며 활용 범위를 넓히고 있음

 

→  협업 효율성과 활용 범위가 확대되면서 피그마를 도입하는 개인과 기업이 지속적으로 증가

피그마 툴
- 현재 가장 뛰어난 디자인 협업 툴

- 와이어프레임부터 핸드오프 과정 전부를 하나의 툴에서 수행 가능

- 다른 디자인 툴은 특정 단계에서만 활용되는 경우가 많지만, 피그마는 하나의 툴로 전 과정에 걸쳐 활용 가능

제품을 만드는 과정

 

 

피그마 VS 다른 디자인 툴

디자인 툴 종류 - 어도비의 포토샵, 일러스트레이터, 프로크리에이트(아이패드 앱) 등
피그마와 비교되는 툴 - 스케치, 제플린, 프레이머, 웹플로우 등

 

-  피그마만큼 동시에 여러 사람들이 접속해서 한 화면을 놓고 작업할 수 있는 툴은 없음

- 포토샵·일러스트레이터는 그래픽 디자인에 강점이 있지만 UI 디자인 및 협업에는 한계가 있음

- 스케치는 맥에서만 사용 가능

- 제플린은 핸드오프를 전달하는 부분에 특화되어 있음

- 프레이머는 코딩 없이 웹사이트를 배포하는 부분에 특화되어 있음

- 과정 전체에서 사용할 수 있으면서 학습 난이도가 낮은 건 피그마가 유일함

 

→ 다른 디자인 툴을 반드시 배울 필요는 없지만, 추가적으로 익혀두면 디자인 역량을 확장하는 데 도움이 됨

 

 

피그마 특징

• 장소와 기기에 구애받지 않는 협업 환경
  - 웹 기반 서비스로 언제 어디서나 접속할 수 있음
  - 맥과 윈도우를 모두 지원해 접근성이 높음
• 디자인부터 개발까지 하나의 툴 안에서 모든 작업 가능
  - 디자이너와 개발자를 모두 고려한 다양한 기능을 제공
• 강력한 커뮤니티
  - 플러그인, 템플릿 등 풍부한 커뮤니티 자료를 통해 생산성을 높일 수 있음
  - 활발한 사용자 커뮤니티를 기반으로 다양한 학습 및 협업 리소스를 활용 가능
• 학습 진입장벽이 낮음
  - 다른 디자인 툴과 유사한 인터페이스를 제공해 학습 난이도가 낮음
  - 디자인 기초부터 고급 기능까지 하나의 툴에서 학습하고 활용할 수 있음

 

 

 

<디스플레이와 배수>
- 디지털 화면의 원리를 이해해야 디자인을 더 정밀하게 설계할 수 있음

 

디스플레이(=디지털 화면)와 픽셀

-  '웹사이트, 앱, 키오스크, 전광판, TV 등을 본다' = '디지털 화면(Display) 을 본다'는 의미

- 디스플레이는 픽셀(Pixel) 이라는 아주 작은 점(칸)들이 모여 만들어짐

- 픽셀 : 화면에 색과 정보를 표현하는 가장 작은 단위
→ 화면 크기와 해상도에 따라 픽셀의 크기와 개수는 달라질 수 있음
→ TV나 모니터를 가까이에서 보면 작은 격자 형태의 픽셀을 확인할 수 있음

 

 

해상도

- 디스플레이의 선명한 정도 = 디스플레이 안에 들어가 있는 픽셀의 개수

- 가로 줄의 픽셀 개수 x 세로 줄의 픽셀 개수

ex) 1920 x 1080 디스플레이 = 가로 줄에는 픽셀이 1920개, 세로 줄에는 1080개가 들어있다는 의미

→ 2,073,600개의 픽셀이 들어가 있다는 의미

 

 

해상도와 픽셀의 관계

- 해상도가 같음 = 픽셀의 개수가 같음

→ 화면 크기가 클수록 픽셀 한 칸의 크기도 커짐

 

- 화면 크기가 같음 = 모니터 사이즈 동일

→ 해상도가 높아질수록 픽셀 한 칸의 크기는 작아짐

→ 화면 크기는 같지만 가로와 세로 픽셀 개수가 더 많을 수록 픽셀 한칸의 크기는 더 작아짐

ex) 5x3 해상도와 10x6 해상도가 있을 때, 가로와 세로가 2배라서 총 픽셀 수는 4배가 됨

 

- 대부분  화면 크기가 클수록 해상도가 높아짐

→ 큰 모니터를 사면 더 선명해짐

 

예외도 존재함
ex) 맥북
→  크기는 작은데 해상도가 매우 높은 디스플레이

→ 픽셀이 더 많이 모여있음

→ 디스플레이 품질의 차이도 있지만 해상도와 화면 크기의 관계때문에 일반적인 모니터보다 더 화질이 좋다고 느껴짐

 

- 면적 당 픽셀 갯수가 더 많음
→ 세밀한 묘사 가능

ex) 4x4 해상도에 그린 그림을 8x8 해상도에 똑같은 픽셀 크기일 때

 

ex) 8x8 해상도에 그린 그림을 4x4 해상도의 화면 크기에 맞게 키울 때

8x8 해상도는 4x4 해상도보다 면적 당 픽셀 갯수가 4배 많음

→  4배 더 선명하고 세밀하게 표현 가능

 

 

 

<1배수 디자인>
모바일 앱의 사이즈

- 기기마다 화면 크기는 달라도 앱의 기본 레이아웃은 동일하게 유지됨

- 모든 기기 크기에 맞춰 각각 디자인하는 것은 현실적으로 어려움

- 디자인 시 기준이 되는 화면 크기 또는 기준 해상도를 정하고 작업함

- 웹도 돌일한 원리가 적용됨

 

1배수 디자인
- 디자인을 할 때 기준이 되는 사이즈
- 1배수 = 1배(100%) = 원본 사이즈 = 픽셀 배율

- 픽셀 배율은 기기를 만들고 출시할 때 정해짐

 

일반적인 1배수 디자인 사이즈

-사람들이 가장 많이 사용하는 사이즈

- 디자인 기준은 서비스의 타깃 사용자 환경을 고려해 결정해야 함

→ 안드로이드 사용자가 많다면 안드로이드 기기를 기준으로 디자인 하는 것이 효과적임

→ iOS 사용자가 많다면 아이폰을 기준으로 디자인하는 것이 효과적임

디바이스별 픽셀 배율 및 해상도 확인 가능한 사이트

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

 

1배수 권장 사이즈

- 초기 1배수 권장 사이즈 - iOS 320x480, Android 360x640

- 현재 1배수 권장 사이즈 - iOS 375x812, Android 360x800

→ 스마트폰이 발전하면서 1배수 사이즈도 커짐

 

디자인 사이즈 vs 실제 사이즈

디자인 기준 사이즈 → 375 × 812

아이폰 15 Pro의 실제 해상도 → 1179 × 2556

 

구현 과정
1. 1배수 사이즈를 디자인하고 개발

 

ex) 375x812 사이즈를 디자인하고 개발

 

2. 기기는 코드를 읽어 화면을 구성한 뒤, 자신의 배율에 맞게 확대 또는 축소하여 표시

= 이 과정을 렌더링 한다고 표현

 

ex) 아이폰 15프로 기기 → 375x812의 디자인을 3배 확대해서 1125x2436으로 변환되어 출력

 

3. 기기 실제 해상도에 맞게 미세하게 조정을 마친 후 화면에 띄움

- 업스케일 → 화면을 키우는 것

- 다운스케일 → 화면을 줄이는 것

 

ex) 아이폰 15프로 기기의 실제 해상도는 1125x2436보다 조금 더 큰 1179x2556

→ 해상도 사이즈에 맞게 키워서 화면에 출력

 

---

3. 학습하며 겪었던 문제점 & 에러

1)

 학습 과정에서 이미지가 어느 정도부터 깨진 것으로 판단하는지 궁금했다.

 이를 해결하기 위해 추가 학습을 진행한 결과, 이미지가 깨졌는지 판단하는 명확한 수치 기준은 존재하지 않는다는 것을 알게 되었다. 일반적으로 사용자가 픽셀화 현상이나 선명도 저하를 인지할 정도로 품질이 떨어진 상태를 '이미지가 깨졌다'고 표현한다는 점을 이해할 수 있었다.

2)

 학습 과정에서 피그마 하나로 모든 디자인 작업이 가능하다고 소개되었는데, 실제로도 모든 작업을 수행할 수 있는지 궁금했다.

 이를 해결하기 위해 추가 학습을 진행한 결과, 피그마는 UI/UX 디자인, 프로토타이핑, 협업 등 다양한 기능을 제공하지만 사진 보정, 고품질 일러스트 제작, 3D 모델링과 같은 전문 영역에서는 한계가 있다는 것을 알게 되었다. 따라서 작업 목적에 따라 다른 전문 툴을 함께 활용하기도 한다는 점을 이해할 수 있었다.

3)

 학습 과정에서 iOS와 Android 외에도 디자인 작업 시 사용하는 권장 사이즈가 존재하는지 궁금했다.

 이를 해결하기 위해 추가 학습을 진행한 결과, 태블릿, 웹, 워치, TV 등 다양한 디바이스 환경마다 기준으로 삼는 작업 사이즈가 존재한다는 것을 알게 되었다. 따라서 서비스가 제공되는 환경에 맞춰 적절한 기준 사이즈를 선택하는 것이 중요하다는 점을 이해할 수 있었다.