디자인 협업 툴 피그마는 웹 및 앱 인터페이스 디자인에 최적화된 도구다. 실시간 협업 기능으로 팀 프로젝트 효율성을 극대화하며, 다양한 플러그인과 강력한 벡터 편집 기능을 제공한다. 피그마를 처음 접하는 초보자도 쉽게 접근할 수 있는 기본 기능과 활용법을 소개한다.
피그마- 디자인 협업의 새로운 표준
피그마는 2016년 출시된 클라우드 기반 디자인 툴이다. 어도비 XD, 스케치 등 기존 디자인 도구와 달리 웹 브라우저에서 직접 작업이 가능해 별도 설치 과정이 필요 없다. 이러한 접근성은 팀원 간 실시간 협업을 용이하게 만들었다. 동시 편집, 댓글 기능, 버전 기록 등을 통해 디자인 프로세스를 투명하게 관리한다.
피그마는 와이어프레임부터 프로토타이핑까지 UI-UX 디자인 전반을 아우르는 기능을 제공한다. 2022년 9월 어도비가 피그마를 200억 달러에 인수한다고 발표하며, 디자인 업계의 지형 변화를 예고했다. 이는 피그마의 시장 가치와 기술력을 입증하는 사례다. 어도비 보도자료에서 관련 내용을 확인할 수 있다.
피그마 시작하기- 계정 생성과 파일 관리
피그마 사용을 위해서는 먼저 계정 생성이 필요하다. 피그마 공식 웹사이트에 접속하여 이메일 주소 또는 구글 계정으로 간편하게 가입할 수 있다. 무료 플랜인 ‘Starter’는 개인 프로젝트와 소규모 팀에 적합한 기능을 제공한다. 무제한 파일 생성, 3개까지의 피그마 디자인 파일 및 3개까지의 FigJam 파일을 지원한다.
핵심 포인트
피그마는 웹 기반으로 설치 없이 브라우저에서 바로 사용 가능하다. 무료 Starter 플랜으로도 충분히 기능을 익힐 수 있다.
로그인 후 대시보드에서 새로운 디자인 파일을 생성하거나 기존 파일을 열람한다. 파일은 ‘Drafts’ 폴더에 저장되며, 팀 프로젝트는 ‘Teams’ 섹션에서 관리한다. 파일 이름은 직관적으로 설정하고, 작업 중간중간 저장을 습관화해야 한다. 피그마는 자동 저장 기능을 제공하지만, 중요한 변경 사항은 수동 저장하는 것이 안전하다.
기본 도구 사용법- 프레임, 도형, 텍스트
피그마 작업의 첫걸음은 프레임 생성이다. 프레임은 디자인 작업의 캔버스 역할을 하며, 데스크톱, 스마트폰, 태블릿 등 다양한 기기 화면 크기를 미리 설정할 수 있다. 오른쪽 사이드바의 ‘Design’ 패널에서 프레임 프리셋을 선택하거나, 직접 크기를 입력하여 생성한다.
기본 도형 도구는 사각형, 원, 선 등을 포함한다. 왼쪽 상단의 도구 모음에서 도형을 선택하고 캔버스에 드래그하여 그린다. ▲ Shift 키를 누른 채 드래그하면 정비율 도형을 그릴 수 있다. 도형의 색상, 테두리, 그림자 등은 오른쪽 ‘Design’ 패널에서 상세 설정한다.
텍스트 도구는 ‘T’ 아이콘으로 접근한다. 캔버스에 클릭하여 단일 텍스트 상자를 만들거나, 드래그하여 고정된 크기의 텍스트 박스를 생성한다. 텍스트의 글꼴, 크기, 색상, 정렬 등은 오른쪽 ‘Design’ 패널에서 조절한다. 웹폰트를 포함한 다양한 글꼴을 지원한다.
프레임
디자인의 캔버스- 특정 기기 화면 크기 설정.
도형
사각형, 원, 선 등 기본 요소- 색상, 테두리 조정.
텍스트
정보 전달의 핵심- 글꼴, 크기, 색상, 정렬 설정.
컴포넌트와 스타일- 효율적인 디자인 관리
컴포넌트는 재사용 가능한 디자인 요소를 말한다. 버튼, 아이콘, 내비게이션 바 등 반복적으로 사용되는 요소를 컴포넌트로 만들면 디자인 일관성을 유지하고 작업 시간을 단축할 수 있다. 컴포넌트는 메인 컴포넌트와 인스턴스로 구성된다. 메인 컴포넌트를 수정하면 연결된 모든 인스턴스에 변경 사항이 자동 적용된다.
컴포넌트 생성은 요소를 선택한 후 상단 도구 모음의 ‘Create Component’ 아이콘을 클릭하면 된다. 생성된 컴포넌트는 왼쪽 사이드바의 ‘Assets’ 패널에서 관리한다. 인스턴스는 ‘Assets’ 패널에서 드래그하여 캔버스에 배치한다. 인스턴스별로 특정 속성을 오버라이드하여 개별적인 변화를 줄 수 있다.
스타일은 색상, 텍스트, 이펙트 등 디자인 속성을 미리 정의하여 재사용하는 기능이다. 예를 들어, 특정 브랜드의 메인 색상을 ‘Primary Color’라는 이름으로 스타일로 등록해두면, 모든 객체에 해당 색상을 일관되게 적용할 수 있다. 스타일은 오른쪽 ‘Design’ 패널의 각 속성 옆에 있는 4개의 점 아이콘을 클릭하여 생성 및 적용한다.
핵심 포인트 3가지
컴포넌트
재사용 가능한 디자인 요소로 일관성 유지.
스타일
색상, 텍스트 속성 등 미리 정의하여 효율성 증대.
자동 업데이트
메인 컴포넌트-스타일 변경 시 연결된 요소 자동 적용.
프로토타이핑과 공유- 디자인의 상호작용성 구현
피그마의 프로토타이핑 기능은 정적인 디자인에 동적인 움직임을 부여한다. 사용자가 실제로 앱이나 웹사이트를 사용하는 것처럼 인터랙션을 미리 경험할 수 있게 만든다. 이는 개발 전 사용자 경험을 검증하고 개선하는 데 필수적이다. 오른쪽 사이드바의 ‘Prototype’ 탭에서 프로토타입 설정을 시작한다.
프레임 간 연결은 ‘Flows’ 패널에서 드래그 앤 드롭으로 간단히 수행한다. 특정 요소 클릭 시 다른 프레임으로 이동하거나, 오버레이를 표시하는 등의 인터랙션을 설정할 수 있다. 스마트 애니메이트 기능은 유사한 두 프레임 간의 자연스러운 전환 효과를 자동으로 생성해준다.
디자인 공유는 피그마의 강력한 협업 기능을 대표한다. 파일 우측 상단의 ‘Share’ 버튼을 클릭하면 링크 공유, 초대 기능 등을 활용할 수 있다. 특정 팀원에게 편집 권한 또는 보기 권한만 부여하여 효율적인 협업 환경을 구축한다. 클라이언트나 이해관계자에게 디자인을 선보일 때 유용하다. ▲ 삼성전자 디자인 팀도 피그마를 적극적으로 활용하며 협업 효율을 높이고 있다. 삼성전자 뉴스룸에서 관련 정보를 확인할 수 있다.
자주 묻는 질문 FAQ
| 질문 | 답변 |
|---|---|
| 피그마는 무료인가요? | Starter 플랜은 무료로 제공된다. 개인 및 소규모 프로젝트에 적합하며, 핵심 기능들을 사용할 수 있다. |
| 피그마 파일은 어떻게 저장하나요? | 피그마는 클라우드 기반으로 자동 저장된다. 특정 시점으로 되돌아가려면 ‘Version History’ 기능을 활용한다. |
| 어도비 프로그램과 호환되나요? | 직접적인 파일 호환은 어렵지만, 이미지를 JPG-PNG-SVG 등으로 내보내 다른 프로그램에서 활용할 수 있다. |
피그마를 통해 디자인 워크플로우를 혁신할 수 있다. 프레임, 도형, 텍스트 등 기본 도구들을 숙달하고, 컴포넌트와 스타일로 효율성을 높이는 연습이 필요하다. 프로토타이핑으로 인터랙션을 구현하고, 공유 기능을 활용하여 팀원들과 소통하는 것이 중요하다. 지금 바로 피그마를 시작하여 자신만의 디자인을 만들어 보라.