웹기획자 15년차 피그마 툴을 사용해 보지 않았지만 

이제는 피그마를 사용하지 않으면 일이 끊길 수 있는 2025년이 되었네요

 

웹기획 15년  IT의 많은 변화들 중에 이정도의 변화는 잔잔한 바람이죠

남들 보다 많이 늦은 피그마 너 도대체 뭐인지 한번 알아 보도록 하겠습니다.

 

제가 들은 피그마에 대한 썰!!

디자인 할때 포토샵보다 편하게 사용할 수 있어

포토샵과 PPT의 중간 버전이야

기획자가 디자인 급하게 필요할때 피그마를 많이 쓴대
스토리보드나 UX설계도 피그마로 하면 너무 편해

 

 

이 많은 말들이 피그마를 조금 알고 나서는 긍정회로가 돌아가기 시작했습니다.

피그마 이거 물건이네!!

 

웹기획자는 보통 대부분을 PPT작업에 시간을 많이 소요합니다.

PPT 문서로 와이어프레임도 만들고, 제안서, 스토리보드, UX등

모든 커뮤니케이션을

PPT로 작성하여 업무를 진행 합니다.

보통은 PPT로 문서를 작성해서 컨펌 보내면 수정사항을 받아서

다시 수정하느라 라인 도형 간격등을 한땀한땀 수 작업이 필요합니다.

어떤 날은 탭을 5개로 늘렸다가 3개로 줄이고 다시 늘렸다가 줄이고

이런 노가다성 수정 작업도 많은게 웹기획자의 현실인대요 

 

그렇다면 피그마는 PPT보다 쉽고 빠르게 작업 할 수 있는가?

YES

피그마 넌 어떤 강점이 있는거야?

이제는 피그마 하나로 UX기획, 와이어프레임, 프로토타이핑, 현업과의 커뮤니케이션 까지 해결 가능!

 

1. 와이어프레임 & UX 기획을 쉽게 제작 가능

    • 피그마는 빠르게 와이어프레임을 제작할 수 있는 툴이에요.
    • 드래그앤드롭 방식으로 손쉽게 화면 레이아웃을 구성할 수 있어요.
      피그마의 오토 레이아웃, 컴포넌트 기능을 활용하여 쉽게 수정 가능
    • 다양한 플러그인을 활용할 수 있어 기본 구성 요소를 빠르게 배치하고 작업 할수 있어요
      (예: Wireframe, unsplash, iconify, graph generator, 한들 더미, Design DOC, Autoflow, Figmap 등등)
    • 활용 예시
      홈페이지 메인화면 레아아웃 구성, 회원가입, 로그인 페이지 설계, 대시보드 UI 구조 정리
      새로운 페이지 기획시 기존 컴포넌트를 불러와 빠르게 구성
      다양한 디바이스에서 일관된 UI 유지

2. 디자인, 개발 팀과 실시간 협업 가능

    • 실시간 공동 작업이 가능해서 디자이너, 개발자와 빠르게 피드백을 주고받을 수 있어요.
    • 기존의 PPT, Excel 같은 문서보다 직관적인 화면 기획이 가능해요.
    • 히스토리 관리가 자동으로 되어 버전 관리 걱정이 없음
    • 활용 예시
      클릭 가능한 메뉴 버튼과 페이지 이동 구현에 대한 정의
      마우스 오버, 드롭다운 메뉴의 인터랙션 추가
      버튼, 폼 입력창 등 UI 요소의 크기, 간격, 생상 정의


3. 프로토타이핑으로 화면 흐름을 테스트할 수 있음

  • 클릭, 슬라이드 등 기본적인 인터랙션을 설정할 수 있어요.
  • 실제 앱/웹처럼 동작하는 프로토타입을 만들어 클라이언트나 팀원에게 공유할 수 있어요.
  • 개발 전에 **사용성 테스트(UX 테스트)**를 진행할 수 있어 기획 수정이 용이함.
  • 활용 예시
    화면에서 특정 버튼 클릭시 화면 이동하는 경로 시뮬레이션
    결제 프로세스 (장바구니 → 결제페이지 → 주문 완료) 플로우 설계

4. 디자인 가이드 작성 및 전달이 쉬움

  • 개발자를 위한 **스타일 가이드(Spec)**를 피그마에서 바로 확인 가능해요.
  • 색상 코드, 폰트, 여백 값 등을 명확하게 정의해서 개발자가 혼동하지 않도록 정리할 수 있어요.
  • 컴포넌트 기능을 활용하면 디자인 시스템 구축도 가능.
  • 활용 예시
    모바일, 태블릿, 테스크톱별 반응형 디자인 가이드 제공
    폰트, 아이콘, 이미지 등으 사용 규칙 정의
    브랜드 컬러, 버튼 스타일, 폰트 설정을 한곳에서 관리

5. 다양한 플러그인 및 위젯 활용 가능

    • 아이콘(Feather Icons, Material Icons), 이미지(Unsplash, Pexels), 더미 텍스트(Lorem Ipsum) 등
    • UX 리서치, 사용자 흐름도, 마인드맵 등을 쉽게 만들 수 있는 FigJam도 유용함.

💡 결론: 웹기획자가 피그마를 잘 다루면?

✅ 기획 → 디자인 → 개발 협업이 매끄러워짐
✅ 와이어프레임, UX 플로우, 프로토타입 제작이 빠르고 정확해짐
✅ 개발 전 UX 문제를 미리 발견해서 수정 가능

'피그마' 카테고리의 다른 글

피그마 초보들의 사용팁 단축키 정보  (0) 2025.03.28

+ Recent posts

티스토리툴바