피그마의(Figma) 피그잼(FigJam) 기본 기능 정리

피그잼 FigJam 주요 기능 가이드

FigJam은 팀원들과 실시간으로 아이디어를 나누고 워크플로우를 설계할 수 있는 협업 화이트보드 도구입니다.

스티키 노트 (Stickies)

스티키 노트는 생각을 공유하는 가장 빠른 방법입니다.

• 새 노트 만들기: 키보드의 S를 누르면 즉시 새로운 스티키 노트를 생성할 수 있습니다.
• 연속 생성: 노트를 선택한 상태에서 Mac은 Command + Enter, Windows는 Control + Enter를 누르면 바로 다음 노트를 이어서 만들 수 있습니다.

커넥터 기능

커넥터는 서로 관련된 요소들을 연결하는 데 완벽한 도구입니다. 이 마법 같은 화살표는 개체를 이동하더라도 연결 상태를 그대로 유지하는 특징이 있습니다. 사용법은 간단합니다. X 키를 누른 상태에서 드래그하여 커넥터를 그릴 수 있으며, 커넥터가 선택된 상태에서 Enter를 누르면 연결선 위에 바로 텍스트를 추가할 수 있습니다. 예시 화면에서는 아이스크림 유무에 따라 구매하거나 파티를 여는 플로우차트 제작 과정을 보여줍니다.

커서 채팅

다른 사람과 함께 작업할 때 생각을 즉시 공유할 수 있는 커서 채팅 기능을 설명합니다. / 키를 누르면 커서 채팅이 활성화되며, 내가 입력하는 내용을 다른 사람들이 실시간으로 볼 수 있습니다. Enter를 누르면 기존 메시지를 지우고 새 메시지를 시작할 수 있고, 채팅을 종료하고 싶을 때는 esc 키를 누르면 됩니다.

감정 표현 및 스탬프

그림을 통해 팀원들과 소통하는 방법을 다룹니다. 감정 표현(Emotes)은 단축키 E를 사용하며, 잠시 나타났다가 사라지는 특징이 있어 실시간 리액션에 적합합니다. 반면 스탬프(Stamps)는 Shift + E를 사용하며 화면에 영구적으로 남아 투표나 피드백 용도로 쓰입니다. 스탬프를 찍을 때 마우스 버튼을 길게 누르면 더 큰 크기의 스탬프를 찍을 수 있다는 꿀팁이 포함되어 있습니다.

위젯, 스티커 및 템플릿

FigJam 캔버스에 즉시 드래그해서 사용할 수 있는 다양한 구성 요소들을 소개합니다. 특정 기능을 수행하는 인터랙티브 도구인 위젯, 감정 공유용 스티커, 그리고 미리 짜여진 작업 양식인 템플릿이 미리 준비되어 있습니다. 또한 팀 라이브러리를 활용하면 우리 팀만의 커스텀 스티커를 만들어 사용할 수도 있습니다. 하단 툴바에는 선택 도구, 펜, 도형, 포스트잇, 텍스트, 커넥터, 라이브러리 메뉴가 배치되어 빠른 조작을 돕습니다.

Figma 디자인 연동

Figma 디자인 파일과 FigJam 사이의 원활한 협업 방법을 설명합니다. Figma에서 작업한 디자인 요소를 복사하여 FigJam에 붙여넣으면, 팀원들과 빠르게 피드백을 주고받거나 텍스트 문구를 직접 수정하며 기획을 다듬을 수 있습니다.

왜 이런 기능을 만들었을까?

제가 현업에 있었을 때 같은 회사지만, 개발자와 디자이너는 부서나 파티션이 달랐습니다. 그래서 기획 문서 전달이나 내용을 전달할 때는 이런 툴이 없었기 때문에 PPT를 보내고 직접 디자이너 자리에 찾아가서 설명을 해주거나, 바쁘면 PPT 문서를 전달해 주고 모르는 건 채팅으로 답변해주곤 했습니다. 피그잼을 보면 4가지의 특징이 보입니다.

소통의 즉각성과 마찰감소

여러 사람이 동시 작업을 할 때 병목이 생기는 부분이 있기 마련인데요. 채팅을 하려면 채팅창을 따로 열어야 한다고 생각하지만, 실시간 채팅을 어떻게 이 화면에 넣을 생각을 할 수 있었을까요? 정말 대단하다는 생각이 들었습니다. 디자인 툴에 채팅 기능이 들어있다는 건 직접 써보지 않았다면 이게 필요할까? 라는 생각을 전혀 할 수 없는 신박함인데요. 이게 소통의 즉각성과 생각의 흐름의 마찰을 감소시키는 노력이라고 보였습니다.

감정 표현과 의견의 분리

디자이너는 대부분 여성으로 리액션 및 의견과 감정이 있는데요. 이 부분을 반영한 것으로 보입니다. 특히 감정은 바로 사라지는데요, 스탬프의 경우 사라지지 않는 기능이라고 합니다. 이건 서로 간의 약속으로 정해서 쓰면 빠른 피드백이 될 거라 보입니다. 예를 들어 수정을 한 부분은 표시를 해두면, 확인했을 때 표시를 해두면 넘어갈 수 있게 하면 됩니다.

직관적인 시각화와 연결성

과거 채팅창의 텍스트 위주가 아니라 직접 같은 화면을 보면서 대화를 할 수 있기 때문에, 서로 다른 상상 속의 이미지가 아닙니다. 기획자의 생각이 그대로 반영된 시각화를 볼 수 있어서 좋습니다.

도구 간 경계 허물기

여기 예시는 복사 붙여넣기로 간단하게 설명이 되어 있는데요. 웹사이트 코딩으로 만들고 나서 피그마에서 지엽적인 수정을 하는 예를 많이 보았습니다. 과거에는 디자이너가 건네주는 시안이 PNG 파일 초안이었는데요. 그건 제가 수정을 할 수도 없고 해서 반복 작업의 수정을 거쳐야 합니다. 그런데 피그마는 이미 수정이나 오브젝트 이동이 가능하더라고요.