Figma를 기준으로 UI 디자인툴 사용법을 다룬다.

Figma 계층 구조

Figma, Framer 등 UI 디자인툴은 Team/Project/File/Page와 같은 계층의 구성을 가지고 있습니다. 이러한 계층 구성은 실제 업무 환경 및 웹/앱 개발 구조를 반영하고 있습니다. 그렇기 때문에 기본적으로 이런 구조에 맞춰 UI 디자인 툴을 활용하는 것이 바람직합니다.

Step 1. 팀

Figma - 팀(Team)

가장 먼저 팀(Team)은 쉽게 ‘회사’ 또는 ‘서비스’라고 생각하면 쉽습니다. 팀의 오너가 PO(Product Owner)가 되며, 실제 현업에서 여러 회사가 함께 컨소시엄을 구성해 협업하거나 같은 회사 내에서도 TF팀을 구성하여 프로젝트를 진행하는 경우 별개의 팀을 생성하기도 합니다.

예를 들어, 호학당은 ‘UXUI’라는 팀에서 여러 프로젝트의 기획/디자인을 진행하고 있습니다.

Step 2. 프로젝트

Figma - 프로젝트(Project)

팀이 세팅되었다면, 팀에서 진행하는 프로젝트가 말 그대로 프로젝트(Project)입니다. 프로젝트의 책임자는 PM(Project Manager)이며, 프로젝트의 규모나 상황에 따라 상이하게 구성됩니다. 예를 들어 음식 배달 서비스를 진행한다고 할 경우 ‘사용자 서비스’, ‘식당 서비스’, ‘배달기사 서비스’처럼 사용자 유형별로 프로젝트를 구성하기도 하고, 백오피스 서비스를 만드는 경우 ‘PC 웹’, ‘모바일 웹앱’ 처럼 디바이스별로 프로젝트를 구성하기도 합니다.

일반적으로는 서비스의 주버전(Major)이 바뀔 때, 새로운 프로젝트가 생성됩니다. 자체 서비스를 운영중이라고 한다면, ‘서비스명 v1’, ‘서비스명 v2’, ‘서비스명 v3’처럼 주버전을 기준으로 프로젝트가 관리됩니다.

<aside> 💡

앱 서비스는 일반적으로 Semantic Versioning이라 불리는 세 가지 숫자로 구성된 표기법으로 버전이 관리됩니다(예: v3.1.2).

각 버전의 숫자와 의미는 다음과 같습니다.

• 주버전(Major): 리브랜딩, 주요 기능 추가/변경 등 기존에서 호환되지 않는 큰 변화가 있을 때 업데이트(예: 1.x.x → 2.0.0)
• 부버전(Minor): 스타일 업데이트, 일부 기능 추가/확장 등 기존에서 확장된 변화가 있을 때 업데이트(예: 1.2.x → 1.3.0)
• 패치(Patch): 기존 요소 업데이트/수정, 작은 성능 개선 등 하위 호환성을 유지하는 변화가 있을 때 업데이트(예: 1.2.3 → 1.2.4) </aside>

이번 예시에서 호학당의 경우 ‘UXUI’라는 팀 내에서 호학당 자체 브랜드 웹을 만드는 프로젝트를 진행한다고 가정하고, ‘BrandWeb’이라는 프로젝트를 만들었습니다.

Step 3. 파일

Figma - 파일(File)