<aside> 📚 토글 (▶ )을 클릭하여, 교육자료의 목차를 확인하고 빠른 이동을 할 수 있습니다. (전체 토글을 열고닫는 단축키 - Windows : Ctrl + alt + t / Mac : ⌘ + ⌥ + t )

• 목차 확인하기 </aside>

<aside> 💡 Figma (피그마)

많은 스타트업에서 figma(피그마)를 활용하여 화면 기획 업무를 진행하고 있습니다. 피그마를 통해 화면을 직접 구성하여 볼 수 있기에 사업, 디자인, 개발 등 협업 부서와 원활하게 소통할 수 있습니다.

</aside>

1. Figma (피그마)

• 화면 기획을 위해 PPT, Axure, 구글 프레젠테이션 tool을 사용하기도 하지만, 이번 교육과정에서는 Figma (피그마)를 학습 해 보고자 합니다.

  • PM이 화면 기획을 직접 하는 경우도 있으나, 기업의 조직구조에 따라 운영/시스템 정책 수립에 집중하고 화면 기획은 별도 디자인 조직에서 제작하는 등, 다양한 방식으로 팀이 운영될 수 있습니다.

• 아마 가장 많이 사용 해 보셨을 툴인 PPT의 경우, 스크롤이 긴 화면을 기획 할 때에는 PPT의 페이지별로 화면을 분리해야 하고, 화면 이동을 하나의 페이지에서 표현하기 힘들다는 단점이 있습니다.

• 하지만 피그마는 아래와 같은 장점을 가지고 있어, 함께 협업하는 디자이너, 개발자, QA 분들에게 작업물을 공유하면서 이해를 도울 수 있는 다양한 기능을 제공 합니다.

  1. 화면을 그린 페이지 안에서 페이지 별 이동 구간을 바로 표현할 수 있으며,
  2. 작업 중인 화면을 웹 링크를 통해 빠르게 공유할 수 있고,
  3. 다른 작업자에게 권한을 주어 직접 수정을 하거나, 코멘트를 추가할 수 있는 기능을 포함하고 있습니다.

• 특히 피그마는, PPT를 조금 다루어 보신 분이라면 각 기능이 크게 어렵지 않고, 기본 기능에 익숙해진다면 기획을 리뷰하거나 디자인이 필요한 설계를 하는 과정에서 요구사항을 설명하는 등 큰 도움을 받을 수 있습니다.

(1) 피그마 살펴보기

• 피그마에서는, 기본적으로 아래와 같이 (목적에 따른) 다양한 기본 템플릿을 제공하고 있습니다.

  

(2) 피그마 기본기능 살펴보기

1. 작업 기본 화면은 다음과 같이 구분됩니다.

   • 텍스트 및 도형을 삽입하여 화면을 구성하고, 각 레이어별로 그룹을 생성하여 관리할 수 있습니다.

   

• 화면 이동/선택
  • 피그마 작업 페이지의 우측 상단에서 다음 버튼을 클릭하여 이동과 선택을 변경할 수 있습니다.

• 레이어 생성하기
  • 포인터 상태 변경 버튼 옆, 다음과 같은 버튼을 통해 작업 레이어를 생성할 수 있습니다.