[코드스테이츠 PMB 9기] Figma

W4D4 학습목표
- Figma를 사용하는 데 필요한 기능과 사용법을 숙달한다.
- Figma를 사용해 디자이너와 협업하여 제품 프로토타입을 만들 수 있다. 

개념 정리
- Figma, 디자인 툴
- 반응형 웹, 디자인 기준 단위 

이후 답변 가능한 질문
- Figma를 활용하여 디자이너 및 개발자와 커뮤니케이션 가능한 수준의 UXUI 디자인을 할 수 있는가?
- 반응형 웹과 운영체제에 따른 디자인 기준 단위에 대해 설명할 수 있는가?

---

반응형 웹

“웹의 해상도, 레이아웃 등이 스크린 환경에 따라 반응하여 변환되는 웹 페이지. 디스플레이의 종류와 화면 크기에 따라 실시간 반응하여 웹 페이지를 최적화된 화면 구성으로 보여주는 웹“

반응형 웹이란?

 

디바이스의 다양화에 따라, 출력되는 화면의 해상도 및 비율이 다양해졌습니다. 과거에는 모니터에 맞춰 1024x768, 1280x960 등의 동일한 비율에 한하여 대응하는 것이 가능했지만, 최근엔 화면의 비율이 다양해졌을 뿐만 아니라 높은 해상도에 비해 모바일 디바이스의 픽셀 크기가 매우 작아지는 경우도 있습니다. 즉, 페이지 설계 시 고려할 사항들이 많아졌습니다.

사용 중인 다양한 디바이스(모바일, 랩탑, 데스크, 패드 등)들을 사용하면서, 폰트의 크기가 눈에 띄게 다르거나 불편하다고 느끼지 못하는 이유는- 최근 환경에 따라 반응하여 변환되는 웹 페이지, 즉 '반응형 웹'으로 제작되기 때문입니다. 즉, 모든 해상도의 크기에 따라 웹페이지를 새로 만들지도, 모든 폰트의 크기가 다르게 제작되지도 않는다는 것의 의미합니다.

디자인 단위

1) PX(Picture element)

: 화면의 이미지를 구성하는 최소 단위로서, 우리말로는 ‘화소’라고 지칭합니다. 사각형으로 이루어져 있으며, 픽셀의 수가 많아질수록 고해상도의 이미지입니다.

2) 그리고 우리가 개발자와의 협업을 위해 알아야 할 단위 'REM' : 비교적 최근에 만들어진 단위로서 사용자가 설정한 브라우저 설정에 따라 폰트의 크기가 달라지는 단위입니다.

Rem은 브라우저의 글씨 크기에 비례해서 변화는 단위입니다.

확대/축소가 익숙해진 최근엔 픽셀의 화면 구성으로는 한계가 있으며, Rem을 써야 크기가 일정해집니다.

개발자는 Rem 단위를 통해 프로덕트를 개발합니다.

디자인 툴 Figma는 PX을 단위로 사용하는데, 개발자와의 소통을 위해선 단위 변경이 필수적입니다.

즉, 디자인은 px로 설계하고, 개발은 rem으로 진행합니다.

 

 

Figma를 활용해 Wireframe 만들어 보기
앱 서비스를 하나 선택해, 해당 앱에서 태스크(유저가 서비스에서 수행하길 원하는 과제)를 1가지를 선정합니다.
해당 태스크가 사용자의 어떤 문제를 해결하는지 정의하고 이에 대한 User Story를 작성해 봅니다.
** 단, 기존에 조사했던 제품/서비스 제외User Story 를 해결하기 위한 핵심 기능과 Flow를 파악하고, 화면 흐름을 종이에 간단히 그려 봅니다.(Lo-Fi)링크에 접속해 Figma를 설치합니다.
(https://www.figma.com/downloads/)Figma 웹사이트와 튜토리얼을 열람합니다.

 

기존 제페토 서비스 Lo-fi 와 NFT 서비스 추가

NFT 결합한 제페토 서비스