실무에서 바로 쓰는 피그마 9 - 공유 및 협업 : 팀 프로젝트와 버전 컨트롤

지금까지 Figma의 핵심 디자인 및 프로토타이핑 기능을 깊이 있게 다루었습니다. 이제 디자인 프로세스의 가장 중요한 부분 중 하나이자 Figma가 빛을 발하는 영역인 공유 및 협업 기능에 대해 알아볼 차례입니다. 현대 디자인은 더 이상 고립된 작업이 아닙니다. 여러 디자이너, 개발자, PM, 마케터 등 다양한 이해관계자들이 함께 작업하고 피드백을 주고 받으면 하나의 결과물을 만들어 나갑니다. Figma의 강력한 공유 및 협업, 그리고 버전 컨트롤 기능은 이러한 복잡한 팀 프로젝트를 효율적으로 관리하고, 디자인 일관성을 유지하며, 궁극적으로 더 나은 제품을 만드는 데 필수적인 역할을 합니다.

 

9.1 Figma 협업의 기본 : 실시간 동시 편집과 공유

Figma는 클라우드 기반 도구로서 처음부터 협업을 염두에 두고 설계되었습니다. 여러 명이 같은 파일에 동시에 접속하여 실시간으로 디자인을 편집하고 피드백을 주고받는 것이 가능합니다.

 

9.1.1 실시간 동시 편집 (Real-time Collaboration)

• 동시성 : Figma 파일은 여러 사용자가 동시에 열어보고 편집할 수 있습니다. 각 사용자의 아바타와 커서가 캔버스에 표시되어 누가 어디서 작업하고 있는지 실시간으로 확인할 수 있습니다.
• 투명성 : 모든 변경 사항은 실시간으로 반영되므로, 팀원들은 항상 최신 버전의 디자인을 보며 작업할 수 있습니다. 이는 내 컴퓨터에 있는 파일이 최신 버전이 아니었어와 같은 문제를 근본적으로 해결합니다.
• 원활한 워크플로우 : 디자이너는 UI를 수정하고, 개발자는 해당 UI의 스펙을 확인하며, PM은 기획 의도에 맞는지 검토하는 작업을 동시에 진행할 수 있어 불필요한 대기 시간을 없애줍니다.

9.1.2 파일 공유(Sharing Files)

Figma 파일 공유는 매우 유연하며, 다양한 수준의 접근 권한을 설정할 수 있습니다.

1. 공유 버튼 : Figma 파일 우측 상단의 Share 버튼을 클릭하여 공유 대화 상자를 엽니다.

2. 초대 방식 :

• 이메일 초대 : 특정 팀원의 이메일 주소를 입력하여 초대합니다. 
• 링크 공유 : Copy link버튼을 클릭하여 공유 링크를 얻습니다.

3. 접근 권한 설정 : 공유 대상에 따라 다음과 같은 권한을 부여할 수 있습니다.

• Can view(보기 기능) : 파일 내용을 볼 수만 있습니다. 편집 권한은 없습니다.(개발자, PM, 클라이언트 등에게 주로 부여)
• Can view prototypes only : 프로토타입만 볼 수 있도록 제한할 수 있습니다.
• Can deit(편집 가능) : 파일 내용을 보고 편집할 수 있습니다. (디자이너 등에게 부여)
• 팀 멤버 여부 : Figma 팀 플랜을 사용하는 경우, 팀 멤버(Team Member)에게는 자동으로 편집 권한이 부여되거나 특정 프로젝트 권한에 따릅니다.

 

4. 링크 설정 :
Anyone with the link : 링크를 아는 모든 사람이 접근할 수 있습니다. (Public Link)
Only people invited to this file : 초대된 사람만 링크로 접근할 수 있습니다.
Only people in (Team Name] : 해당 팀의 멤버만 접근할 수 있습니다.
Only people in this organization: 조직 플랜을 사용하는 경우, 조직 내의 모든 사람이 접근 가능합니다.

 

5. 링크 포함 옵션 : Link to selected frame을 체크하면, 현재 선택된 특정 프레임으로 바로 이동하는 링크를 생성할 수 있습니다. 이는 특정 화면에 대한 피드백을 요청할 때 유용합니다.

 

9.2 댓글(Comments) : 효과적인 피드백과 소통

Figma의 댓글 기능은 디자인에 대한 피드백을 명확하고 효율적으로 주고받을 수 있는 핵심 도구입니다. 특정 요소나 영역에 직접 댓글을 달 수 있어, 그 버튼 말이야... 같은 모호한 소통을 방지합니다.

 

9.2.1 댓글 추가하기

1. 댓글 도구 선택 : 상단 툴바의 Comment 아이콘 (말풍선 모양)을 클릭하거나 단축키 C를 누릅니다.

2. 댓글 위치 지정 : 캔버스에서 댓글을 달고 싶은 위치를 클릭합니다.

3. 댓글 입력 : 댓글창에 내용을 입력하고 Post버튼을 클릭합니다. @를 사용하여 특정 팀원을 멘션하여 알림을 보낼 수도 있습니다.

 

9.2.2 댓글 관리 및 확인

• 댓글 표시/숨기기 : 캔버스에서 모든 댓글 아이콘을 표시하거나 숨길 수 있습니다.(댓글 도구 선택 후 토글)
• 댓글 목록 : 우측 패널에서 Comments 탭을 클릭하면 파일 내의 모든 댓글 목록을 확인할 수 있습니다.
• 댓글 필터링 : All comments, Resolved comments, My comments 등으로 필터링하여 필요한 댓글만 볼 수 있습니다.
• 댓글 상태 변경 : 
  Resolve (해결됨) : 댓글에 대한 작업이 완료되었을 때 Resolve 버튼을 클릭하여 해결됨으로 표시할 수 있습니다. 해결된 댓글은 기본적으로 숨겨집니다.
  Unresolve (해결 취소) : 해결된 댓글을 다시 활성화할 수 있습니다.
• 댓글 스레드 : 특정 댓글에 Reply하여 스레드를 만들 수 있으므로, 관련 논의를 한 곳에 모아 관리할 수 있습니다.

팁 : 프로토타입 Present모드에서도 댓글을 달 수 있습니다. 이는 사용자 테스트나 클라이언트에게 프로토타입을 보여주고 피드백을 받을 때 매우 유용합니다.

 

9.3 버전 히스토리(Version History) : 디자인 변경 이력 관리

Figma의 버전 히스토리는 디자인 파일의 모든 변경 사항을 자동으로 기록하고, 필요할 때 언제든지 이전 버전으로 돌아갈 수 있게 해주는 강력한 기능입니다. 이는 디자인의 안정성을 보장하고, 실수로 인한 데이터 손실을 방지하며, 특정 시점의 디자인을 확인하는데 필수적입니다.

 

9.3.1 버전 히스토리 접근 및 확인

1. 접근 방법 : 상단 메인 메뉴(Figma 아이콘) > File > Show version history를 클릭합니다.

2. 히스토리 패널 : 우측에 Version History 패널이 열리며, 파일이 생성된 시점부터 모든 자동 저장된 버전과 수동저장된 버전 목록이 시간 순서대로 표시됩니다.

3. 버전 탐색 : 각 버전을 클릭하면 해당 시점의 디자인 상태를 미리 볼 수 있습니다.

9.3.2 버전 저장 및 복원

1. 수동 저장 (Save to version History) : 

• 사용법 : 상단 메인 메뉴(Figma아이콘) > File > Save to version History를 클릭합니다.
• 용도 : 특정 마일스톤(예 : 1차 디자인 시안 완료, 특정 기능 개발 완료)에 도달했을 때, 중요한 변경 사항을 저장할 때 사용합니다. 버전 이름과 간단한 설명을 추가할 수 있어 나중에 쉽게 찾아볼 수 있습니다.

2. 자동 저장(Auto-save) : Figma는 일정 시간 간격으로 모든 변경 사항을 자동으로 저장합니다. 별도로 저장 버튼을 누를 필요가 없습니다.

 

3. 이전 버전으로 복원 (Restore this version) : 

• 사용법 : Version History 패널에서 복원하고자 하는 버전을 선택한 후, 우측 상단의 ...아이콘을 클릭하고 Restore this version을 선택합니다.
• 결과 : 선택된 버전이 현재 파일의 최신 버전으로 복원됩니다. 기존의 최신 버전은 버전 히스토리에 기록되므로 언제든지 다시 돌아갈 수 있습니다.

4. 버전 복사 (Duplicate as new file) : 

• 특정 버전을 선택하고 ...아이콘을 클릭한 후 Duplicate as new file을 선택하면, 해당 버전의 디자인을 새로운 파일로 복사하여 저장할 수 있습니다. 이는 이전 버전을 참조하거나, 특정 기능을 분리하여 작업할 때 유용합니다.

팁 : 중요한 변경 사항이 있을 때마다 Save to version history 를 사용하여 명확한 마일스톤을 기록하는 습관을 들이는 것이 좋습니다. 이는 나중에 변경 이력을 추적하거나 특정 시점으로 돌아갈 때 큰 도움이 됩니다.

 

9.4 팀 라이브러리(Team Library) : 디자인 시스템의 핵심

팀 라이브러리는 컴포넌트, 텍스트 스타일, 컬러 스타일, 이펙트 스타일 등 재사용 가능한 디자인 요소를 팀 전체가 공유하고 관리할 수 있게 해주는 Figma의 가장 강력한 협업 기능입니다. 이는 디자인 시스템을 실제로 구축하고 유지하는 핵심 도구입니다.

1. 라이브러리 패널 : 좌측 Layers 탭 옆의 Assets탭을 클릭하고, 상단 Team libary아이콘(책 모양)을 클릭합니다.

2. 라이브러리 활성화/비활성화 : 프로젝트 파일에서 사용할 라이브러리를 켜거나 끌 수 있습니다.

3. 라이브러리 게시 (Publish) : 

• 사용법 : 마스터 컴포넌트나 스타일을 정의한 파일에서 Team library아이콘을 클릭하고 Publish changes 버튼을 클릭합니다.
• 설명 : 어떤 컴포넌트나 스타일이 변경되었는지 미리보기와 함께 확인할 수 있습니다. 변경 내역을 명확하게 기록하여 팀원들에게 전달하는 것이 중요합니다.
• 결과 : 게시된 컴포넌트와 스타일은 해당 라이브러리를 사용하는 모든 파일에서 Assets패널을 통해 접근할 수 있게 됩니다.

4. 라이브러리 업데이트 : 라이브러리에서 컴포넌트나 스타일이 업데이트되면, 해당 라이브러리를 사용하는 다른 파일들에서 알림이 나타납니다. Review changes를 클릭하여 변경 내용을 확인하고 Update all 버튼을 클릭하여 로컬 파일의 인스턴스를 최신 버전으로 업데이트할 수 있습니다.

 

9.4.2 팀 라이브러리의 장점 

• 진정한 디자인 시스템 구축 : 팀 라이브러리는 모든 디자인 쇼오의 단일 정보 출처(Single Source of Truth)역할을 합니다. 모든 디자이너가 동일한 컴포넌트와 스타일을 사용함으로써 디자인 일관성을 극대화합니다.
• 재사용 극대화 : 한 번 만든 컴포넌트는 팀 라이브러리를 통해 모든 팀 프로젝트에서 쉽게 재사용할 수 있습니다.
• 효율적인 유지보수 : 핵심 컴포넌트나 스타일이 변경될 경우, 라이브러리 파일에서 한 번만 수정하고 게시하면 모든 종속 파일에 업데이트 알림이 가고 일괄적으로 변경이 가능합니다.
• 온보딩 간소화 : 새로운 팀원이 합류했을 때, 미리 구축된 팀 라이브러리를 통해 빠르게 디자인 시스템에 익숙해질 수 있습니다.

9.5 개발자 핸드오프 (Developer Handoff) : 디자인을 코드로

Figma는 디자이너와 개발자 간의 원활한 협업을 위한 강력한 개발자 핸드오프 기능을 제공합니다. 개발자는 Figma 내에서 디자인된 요소들의 코드 스펙(CSS, iOS, Android)을 직접 확인하고 복사할 수 있습니다.

 

9.5.1 개발자 모드(Dev Mode)

2023년 Figma Config에서 발표된 개발자 모드(Dev Mode)는 개발자에게 최적화된 인터페이스를 제공하여 디자인 스펙 확인 및 코드 추출을 더욱 효율적으로 만듭니다.

 

1. 활성화 : Figma 파일 우측 상단의 Toggle Dev Mode아이콘(<>꺾쇠 괄호 모양)을 클릭하여 개발자 모드를 활성화합니다.

2. 주요기능 :

• 스펙 확인 : 캔버스에서 요소를 클릭하면 우측 패널에 해당 요소의 크기, 위치, 색상, 폰트, 간격, 효과 등 모든 디자인 스펙이 표시됩니다.
• 코드 추출 : 표시된 스펙은 CSS, iOS(SwiftUI), Android(Compose) 등 다양한 언어 형식으로 자동 변환되어 나타나며, 쉽게 복사할 수 있습니다.
• 측정 도구 : 두 요소 사이에 마우스를 올리면 자동으로 간격, 패딩, 마진 등이 표시되어 정확한 측정이 가능합니다.
• 컴포넌트 인스턴스 정보 : 컴포넌트 인스턴스를 클릭하면 해당 컴포넌트의 마스터 위치, 사용 예시, 베리언트 속성 등 개발에 필요한 정보를 한눈에 볼 수 있습니다.
• 개발자 전용 주석 : 개발자 모드에서만 보이는 주석을 남길 수 있습니다.
• Jira/GitHub 연결 : 관련 플러그인을 통해 Jira티켓이나 GitHub 이슈와 디자인 요소를 직접 연결할 수 있어, 개발 워크플로우를 더욱 통합합니다.

 

9.5.2 슬라이스 도구 (Slice Tool, S)

특정 영역만 이미지로 내보내야 할 때 사용하는 도구입니다.

• 사용법 : 상단 툴바에서 Slice Tool (S)을 선택하고 내보낼 영역을 드래그하여 지정합니다.
• 활용 : 지정된 슬라이스 영역은 Export패널에서 PNG, JPG, SVG 등으로 내보낼 수 있습니다. 이는 개발자가 필요한 에셋만 효율적으로 추출할 때 유용합니다.

9.6 마치며 : 연결과 소통의 힘

이번 글에서는 Figma의 강력한 공유 및 협업 기능과 버전 컨트롤, 그리고 팀 라이브러리를 통한 디자인 시스템 구축 방법을 깊이 있게 다루었습니다. 또한, 디자이너와 개발자 간의 효율적인 워크플로우를 위한 개발자 핸드오프 기능(특히 개발자 모드)까지 살펴보았습니다.

 

Figma는 단순히 디자인 도구를 넘어, 팀 자체가 협력하여 복잡한 프로젝트를 효율적으로 관리하고 최상의 결과물을 만들어 낼 수 있게 돕는 플랫폼입니다. 실시간 동시 편집, 명확한 피드백을 위한 댓글, 안전한 이력관리를 위한 버전 히스토리, 그리고 일관된 디자인 시스템을 위한 팀 라이브러리는 현대 디자인 팀에게 없어서는 안 될 필수 기능들입니다.

 

다음 글에서는 플러그인과 위젯 : Figma 기능 확장하기라는 주제로, Figma의 기본 기능을 넘어 외부 플러그인과 위젯을 활용하여 작업 효율성을 더욱 높이고 새로운 기능을 추가하는 방법에 대해 알아보겠습니다. Figma의 무한한 확장성을 경험할 준비가 되셨나요? 계속해서 Figma 마스터의 여정을 함께 하시죠!