상황에 따라 분업이 잘 되어있는 회사에 간다면
직접 디자인을 할 일은 없겠지만
나의 경우에는 디자이너 겸 개발자로 일을 했었기 때문에
피그마 사용법은 어깨너머로 익히게 되었다.
프로젝트 기간 동안에, 기획단계에서 화면을 구성해야 할 일이 있었는데,
이때 알고 있던 피그마 지식이 도움이 되었다.
그래서 첫 교육은 간단한 디자인 겸 피그마 교육을 진행하였다.
피그마란?
이렇게 웹이나 앱을 통해 디자인이 가능한 협업 툴이다.
동시 편집이 쉽고, 초보자도 쉽게 생성할 수 있으며, 제공되는 템플릿도 다양하다.
기존의 어도비 일러스트나, 포토샵 보다 가볍고 게다가 무료로 사용 가능해서
디자이너와 개발자 간 소통이 편해지기 때문에 많이 이용되고 있는 편이다.
-레이어
-에셋
-디자인
-프로토타입
+템플릿 검색 팁
프론트 개발자가 피그마를 이용할 때 유용한 기능들을
이렇게 다섯가지 항목으로 나눠 설명해 보고자 한다.
1. 레이어
레이어는 주로 화면 별로 나누어 컴포넌트(개별 요소)들을 배치하여 그룹화 하기 적절한 단계이다.
계단식 구성으로 확인할 수 있어, 개발 시에 프론트단에서 컴포넌트 구조를 짜기에도 도움이 된다.
또한 레이어별로 화면을 내보내거나, 복사하여 같은 화면에 적용해야 할 기능을 시각적으로 추가할 수 있어 편리한 장점이 있다.
Frame
프레임은 말 그대로 하나의 화면 구성을 의미하는데,
타이틀을 작성할 수 있어 한눈에 전체 화면 플로우를 확인하기 좋다.
프레임으로 한 화면당 보여주어야 할 컴포넌트들을 구성하고, 레이어에서 확인 후 원하는 위치의 컴포넌트를 선택할 수 있어 편리하다.
Section
섹션은 주로 프레임 보다 큰 범주로 이용하는 경우가 많다.
하나의 화면 구성을 프레임으로 디자인 한 후에,
기능별로 화면을 모아 하나의 섹션으로 관리하기도 한다.
섹션은 위와 같이 흰색 배경으로 묶어서 보여주기 때문에 훨씬
시각적으로 기능을 설명하기에 적절하다.
Group
가장 작은 단위의 요소 모임을 그룹으로 정의한다.
그룹으로 묶게 되면 하나의 형태로 내보낼 수 있기 때문에
가장 작은 단위, 텍스트, 도형, 이미지 등을 묶어 하나의 그룹으로 생성한다
여러개의 텍스트와 이미지를 하나의 그룹으로 묶어 이용한 예시이다.
2. 에셋
자주 사용하는 요소들은 에셋으로 만들어 이용하면 편리하다
또한, 클릭했을때, 다크모드 등 상태를 미리 지정해 두면 여러번 작업할 필요 없기 때문에 편리하다.
3. 디자인
피그마는 기본으로 도형과 펜툴, 텍스트 등 디자인 요소를 제공하기 때문에
간단한 디자인은 누구나 쉽게 만들어 볼 수 있다.
4. 프로토 타입
피그마에서도 화면 플로우를 시각적으로 표현하고 프로토타입 뷰 기능을 통해
실제 어떤 순서로 이동되는지 미리 구현해 볼 수 있다.
이 기능은 백엔드 파트와 소통할 때 데이터 송/수신 플로우를 화면을 보며 설명할 수 있어 매우 도움이 되었던 부분이다.
분량 조절 실패로 피그마 템플릿 팁은 추가 게시물로 작성해 보아야겠다.
사실 멘티님은 피그마를 실제로 배워 보신 경험이 있다고 하셔서
내가 알려드릴 수 있는 부분들이 있을 까 걱정했는데,
실제로 개발자 입장에서 자주 사용 하는 부분들과 피그마의 장점들을 소개하며
프로토타입이나, 계층 구조, 컴포넌트 개발 시 어떤 방향으로 디자인을 하면 좋은지 실제 사례를 설명하며
도움을 드릴 수 있던 것 같아 뿌듯했다.
