728x90
반응형
SMALL
본 기획에서는, 기획자(본인)이 직접 기획한 피그마의 협업 관리 시스템의 내용을 바탕으로 기획의 구조화를 다룹니다.
🙋🏽♂️ 안녕하세요!!
지난주 제가 작성한 " 🎨 피그마를 통한 협업관리시스템"에 대한 내용을 기획했습니다.
혹시, 안 보신 분들을 위해서 저의 지난주 기획안 링크를 아래에 걸어 두었습니다.
https://view964.tistory.com/41
디자인을 넘어 개발, 협업의 패러다임을 바꾼 "피그마"
[실무 기획] 레퍼런스 분석 : 이 세상에는 어떤 기획들이 있는가?커리큘럼 코드명 : PXE - 105혹시 이 로고를 한 번 보신적이 있으신가요? IT업계 혹은 디자인 하시는 분들은 어디선가 한 번쯤 들
view964.tistory.com
궁금하신 분들은 한 번씩 보고 오시면 이번 주차 기획안의 내용이 더 잘 이해되실 겁니다 ㅎㅎ 😎
오늘은, 지난 저의 피그마를 통한 협업시스템 기획에 이어서 국내 IT 계열 기업들에서 프로젝트를 진행하면 반드시 쓰는 툴인 이 피그마와 GIT 관리 시스템을 연결하여 다뤄보겠습니다.
그럼 바로, Git과 피그마의 연결을 통한 👥 협업 시스템 구축의 기획을 시작하겠습니다.
STEP 01 . 내 기획 내용을 디테일하게 설정하자 ! : 블록트리 세부 '전술' 채우기 (Towarding)
우선적으로, Git이라는 협업 툴을 모르시는 분들을 위해서 잠깐이나마 짧게 설명하고 들어가보겠습니다!
Git 이란?
Git은 분산 버전 관리 시스템으로, 소프트웨어 개발 프로젝트에서 소스 코드의 변경 사항을 추적하고 관리하는 데 사용되는 일종의 📎 코드 저장 관리 시스템 입니다.
🗣️ 디자이너들의 어떤 기획안을 디자인하고 협업 하는 툴로는 주로 피그마를 사용한다고 하면
개발자들은 코드를 만드는 일을 하다 보니 그 코드를 저장 및 관리하는 협업 시스템으로 깃을 사용한다고 생각하면 쉽습니다.
📌 만약, 어떤 화면의 메인 페이지를 만든다고 하면 메인 페이지에 있는 '로그인 버튼' , '이미지 및 미디
어 노출 게시물' , '광고 홍보 시스템' 등등 여러 가지 다양한 기능을 개발해야 되는데 이때, 그 메인
페이지의 기능별로 각자 "브랜치"를 파고 자신의 브랜치에서 코드를 올리고 나서 추후 각자 개발한
코드를 합치게 되면 하나의 메인 페이지가 완성 되는 흐름인 거죠~~
저번주차에 필수형 유닛 4를 진행하지 않은 관계로 ... 이제 본격적으로 피그마와 깃을 통한 협업 관리 시스템 구축환경을 개발하기 위해서
블록 내용을 제외한 과정들을 3가지 항목에 집중적으로 세부 전술을 📍 토워딩 하겠습니다
현재 프론트엔드 개발 분야에서는 주로 HTML + CSS + JAVASCRIPT를 이용하여 프론트 단을 구축하는 작업을 하고 있습니다.
이러한 프론트 단을 개발하기 위해서는 작업 환경의 효율을 올려주는 라이브러리나 프레임워크를 사용하고 있죠
프론트 엔드 개발자가 가장 많이 사용하는 라이브러리 및 프레임 워크는 REACT와 Vue를 대표적으로 들 수 있습니다.
이 점을 활용하여 디자이너 들의 작성한 Figma 시안을 Git으로 가져와서 작성하는 코드를 만드는 것입니다!
📌 아래는 관련 블록트리 입니다! 📌
디자이너-개발자 협업 시스템
│
├─ 1. 통합 워크플로우 플랫폼
│ ├─ Figma-Git API 양방향 동기화
│ │ ├─ Figma 변경사항 실시간 감지
│ │ ├─ Git 저장소 자동 업데이트
│ │ └─ 충돌 해결 메커니즘
│ │
│ ├─ 디자인 변경 자동 Git 커밋 변환
│ │ ├─ 의미있는 커밋 메시지 생성
│ │ ├─ 변경사항 카테고리화
│ │ └─ 관련 이슈/티켓 연동
│ │
│ ├─ WebSocket 실시간 협업 기능
│ │ ├─ 실시간 편집 상태 공유
│ │ ├─ 동시 편집 충돌 방지
│ │ └─ 변경사항 라이브 프리뷰
│ │
│ └─ 통합 알림 시스템
│ ├─ 슬랙/팀즈 연동
│ ├─ 이메일 알림
│ └─ 인앱 노티피케이션
│
├─ 2. 컴포넌트 기반 설계
│ ├─ Figma-React 컴포넌트 1:1 매핑
│ │ ├─ 자동 컴포넌트 생성
│ │ ├─ 속성 동기화
│ │ └─ 컴포넌트 라이브러리 관리
│ │
│ ├─ Figma 변형 → React props 자동 변환
│ │ ├─ 변형 규칙 정의
│ │ ├─ props 타입 추론
│ │ └─ 기본값 설정
│ │
│ ├─ Storybook-Figma 통합 UI 키트
│ │ ├─ 컴포넌트 문서화
│ │ ├─ 인터랙티브 예제
│ │ └─ 디자인 시스템 가이드라인
│ │
│ └─ 디자인 토큰 자동 코드 변환
│ ├─ 색상, 타이포그래피 변환
│ ├─ 스페이싱, 레이아웃 규칙
│ └─ 테마 변수 생성
│
└─ 3. 버전 관리 및 변경 추적
├─ Figma-Git 버전 히스토리 연동
│ ├─ 버전 간 매핑
│ ├─ 변경 이력 통합 뷰
│ └─ 시간별 변경사항 탐색
│
├─ 시각적 diff 도구
│ ├─ 레이어별 비교
│ ├─ 속성 변경 하이라이트
│ └─ 인터랙티브 diff 뷰어
│
├─ 디자인-개발 브랜치 전략
│ ├─ 피처 브랜치 연동
│ ├─ 디자인 리뷰 프로세스
│ └─ 자동 머지 규칙
│
└─ 통합 롤백 및 복원 기능
├─ 디자인-코드 동시 롤백
├─ 부분 변경사항 복원
└─ 버전 간 cherry-pick
🖊️ 관련 내용 설명:
- 통합 워크플로우 플랫폼
- Figma와 Git의 API를 활용하여 디자인 변경사항을 자동으로 코드 저장소에 반영합니다.
- 실시간 협업을 위한 WebSocket 기반의 동시 편집 기능을 제공합니다.
- 변경사항에 대한 알림을 다양한 채널(슬랙, 팀즈, 이메일)을 통해 전달합니다.
- 컴포넌트 기반 설계
- Figma의 컴포넌트를 React 컴포넌트로 자동 변환하여 1:1 매핑을 구현합니다.
- Figma의 변형(Variants)을 React의 props로 자동 변환하여 컴포넌트의 유연성을 높입니다.
- Storybook과 Figma를 통합하여 일관된 UI 키트를 구축하고 문서화합니다.
- 디자인 토큰(색상, 타이포그래피 등)을 자동으로 코드로 변환하여 일관성을 유지합니다.
- 버전 관리 및 변경 추적
- Figma의 버전 히스토리와 Git의 커밋 히스토리를 연동하여 통합된 변경 이력을 제공합니다.
- 시각적 diff 도구를 통해 디자인 변경사항을 직관적으로 비교할 수 있게 합니다.
- 디자인 작업과 개발 작업의 브랜치 전략을 연계하여 일관된 워크플로우를 구축합니다.
- 디자인과 코드를 동시에 롤백하거나 특정 변경사항만 복원할 수 있는 기능을 제공합니다.
⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓ ⚓
STEP 02 . 내 기획 내용 중 무엇이 '더' 중요한가? : 블록트리 우선순위 정하기 (Prioritizing)
이제 💫토워딩💫을 통해, 각 블록에 대한 전술과 세부 내용을 확정지었다면,
이제부터는 그 구체화된 블록들 간의 🚨우선순위를 정해야 합니다.
🗝️ 나의 기획 내용 중 메인 포인트 우선순위 🗝️
[고객 제안용 기준] 고객의 관점에서 가장 매력적으로 보이는 블록과 포인트
1순위, 통합 워크플로우 플랫폼 / Figma-Git 연동 미들웨어 개발:
- Figma API와 Git API를 활용하여 양방향 동기화 시스템 구현
- Node.js를 사용하여 서버리스 함수 개발
2순위, 버전 관리 및 변경 추적 시스템 구축:
- a. Figma-Git 버전 연동:
- Figma 버전 히스토리 API를 활용한 버전 정보 추출
- Git 커밋과 Figma 버전 간 매핑 알고리즘 개발
- 통합 타임라인 뷰 구현을 위한 프론트엔드 개발
- Canvas 또는 WebGL을 활용한 레이어 비교 시각화
- 픽셀 단위 diff 알고리즘 구현
- 인터랙티브한 UI로 변경사항 탐색 기능 제공
- Git-flow 또는 GitHub-flow 기반의 브랜치 전략 수립
- Figma 파일 구조와 Git 브랜치 구조 연동
- 자동 머지 및 충돌 해결 가이드 시스템 개발
- Figma 버전과 Git 커밋을 동시에 롤백하는 스크립트 개발
- 부분적 변경사항 복원을 위한 cherry-pick 기능 구현
- 롤백 및 복원 작업의 로그 기록 및 모니터링 시스템 구축
3순위, 협업의 효율성 향상 :
디자이너와 개발자 간의 협업 프로젝트를 진행하는 데 가장 필수적으로 갖추어야 하는 것은, 디자인 시안 과 코드의 일치성 입니다. 각각의 디자인과 코드가 아닌 디자인 시안에 맞는 정확한 코드를 짜도록 환경을 구성하여 실시간으로 피드백이 가능한 환경을 만드는 것이 핵심 전술입니다.
[실제 진행용 기준] 실무 기획자인 내 관점에서 가장 '유의해야 하는' 블록과 포인트
1순위: Figma-Git 연동 미들웨어 개발
중요한 이유: Figma와 Git의 통합은 전체 워크플로우의 기반이 되며, 안정성과 신뢰성이 높아야 합니다. 이 부분이 잘 구축되지 않으면 나머지 기능들이 제대로 동작하지 않을 수 있습니다.
유의 포인트:
- API 활용 및 인증: Figma API와 Git API의 정확한 활용과 안정적인 인증 방식 구현이 필수입니다. 잘못된 인증이나 API 호출 실패 시 시스템 전체의 신뢰도가 떨어질 수 있습니다.
- 자동 커밋 생성 로직: Figma에서 변경 사항이 발생할 때마다 자동으로 Git 저장소에 커밋을 생성하는 로직이 안정적이어야 합니다. 빈번한 커밋 생성으로 인한 불필요한 커밋이 생기지 않도록 설정합니다.
- 서버리스 함수 구현: AWS Lambda와 같은 서버리스 함수를 이용한 변경 사항 감지 및 커밋 생성 로직이 효율적으로 작동해야 합니다. 함수의 실행 시간, 비용 최적화, 그리고 장애 발생 시의 대응 방안을 미리 준비해야 합니다.
2순위: 실시간 협업 기능 구현
중요한 이유: 실시간 협업 기능은 사용자 경험에 큰 영향을 미치며, 동시 편집 시 충돌 방지와 안정적인 실시간 데이터 동기화가 필요합니다.
유의 포인트:
- WebSocket 안정성: WebSocket 연결이 끊어지거나 불안정해지지 않도록 지속적인 연결 유지와 재연결 로직이 필요합니다.
- 충돌 방지 알고리즘: 동시 편집 시 발생할 수 있는 충돌을 방지하는 알고리즘이 필요합니다. 이 알고리즘은 사용자 경험을 크게 좌우하므로 신중하게 설계되어야 합니다.
- Socket.io 라이브러리 활용: 실시간 통신을 위한 Socket.io 라이브러리를 적절하게 활용하여 실시간 데이터 전송이 빠르고 안정적이어야 합니다. 성능 테스트를 통해 다양한 시나리오에서의 반응 시간을 검증합니다.
3순위: 컴포넌트 기반 설계 구현
중요한 이유: Figma와 React 간의 컴포넌트 변환은 재사용성과 유지보수성을 높이는 핵심 요소입니다. 이를 통해 디자인과 코드의 일관성을 유지할 수 있습니다.
유의 포인트:
- AST 생성 및 타입 안정성: Figma의 컴포넌트를 React 컴포넌트로 변환하는 과정에서 AST(Abstract Syntax Tree) 생성이 정확하고, TypeScript를 활용한 타입 안정성이 확보되어야 합니다. 이는 코드의 품질과 유지보수성을 높이는 데 중요합니다.
- 프롭스 자동 변환 시스템: Figma의 변형(Variants)을 분석하여 React props 구조로 자동 변환하는 시스템이 정확하게 작동해야 합니다. PropTypes 또는 TypeScript 인터페이스 자동 생성 로직이 잘못되면 이후 개발 과정에서 많은 문제가 발생할 수 있습니다.
- Storybook 통합: Storybook 설정 자동화와 Figma 메타데이터를 활용한 Story 자동 생성 시스템이 원활히 작동해야 합니다. 이는 컴포넌트의 테스트와 문서화를 효율적으로 만드는 데 매우 중요합니다.
🚩 + React란?
🗣️ 페이스북에서 개발하고 관리하는 오픈 소스 자바스크립트 라이브러리로, 사용자 인터페이스(UI)를 구축하는 데 사용됩니다. 주로 싱글 페이지 애플리케이션(SPA)과 모바일 애플리케이션 개발에 사용되며, 컴포넌트 기반 아키텍처를 통해 재사용 가능한 UI 구성 요소를 쉽게 만들 수 있습니다.
🔔 주요 특징 🔔
컴포넌트 기반 구조: 리액트는 UI를 작은 독립된 컴포넌트로 나누어 개발할 수 있습니다. 각 컴포넌트는 자체 상태와 생명 주기 메서드를 가지며, 이를 통해 복잡한 UI를 효율적으로 관리할 수 있습니다.
JSX(JavaScript XML): JSX는 자바스크립트 코드 안에서 HTML과 같은 구문을 사용할 수 있게 해주는 문법 확장입니다. JSX를 사용하면 UI 구조를 더 직관적이고 읽기 쉽게 작성할 수 있습니다.
가상 DOM(Virtual DOM): 리액트는 가상 DOM을 사용하여 실제 DOM 조작을 최소화합니다. 상태가 변경되면 가상 DOM이 변경 사항을 반영하고, 이를 실제 DOM과 비교하여 필요한 부분만 업데이트합니다. 이를 통해 성능을 크게 향상시킬 수 있습니다.
단방향 데이터 흐름: 리액트는 데이터가 부모에서 자식으로 흐르는 단방향 데이터 흐름을 채택하고 있습니다. 이는 데이터의 흐름을 예측 가능하게 만들어 디버깅과 유지보수를 쉽게 합니다.
훅(Hooks): 리액트 훅은 함수형 컴포넌트에서 상태와 생명 주기 기능을 사용할 수 있게 해줍니다.
STEP 03 . 내 기획 내용은 이렇게 완성된다! : 블록트리 완료(Conclusion)
🧭 디자이너와 개발자 간의 새로운 협업 시스템을 구축 하는 "FigGit Flow"
✨ 프로젝트 진행 간 불필요한 시간 낭비와 에너지 소비를 절약하고 디자인 시안의 일치와 개발의 완성도를 높일 수 있는 새로운 협업 시스템 환경을 구축하기 위한 기능의 핵심 전략으로서
기존의 소통의 부재와 프로젝트의 지연성을 벗어나 실시간 피드백 및 완성도 높은 효율적인 협업 환경 시스템을 구축할 것입니다.
🏷️ 개발자 및 디자인 모두 서로의 직군에 대한 이해도와 소통의 부재는 다르지만 FigGit Flow를 통해서 디자인 시안을 짤 때, 실제 구현가능 여부를 판단하고 더욱 완성도 있고 현실적인 요소를 고려하여 다채로운 디자인을 짤 수 있도록 하는 환경을 조성하여 더이상 끊임 없는 회의와 피로 누적을 막고 서로의 니즈를 파악하여 소통을 원활하게 이끄는 형태로 분위기를 전환할 수 있습니다.
💫 FigGit Flow에서는 디자이너와 개발자 간의 서로의 니즈를 파악하고, 실시간으로 피드백을 주고 받으며 각자가 작성한 디자인 시안 및 코드들을 서로의 시안과 코드에 알맞게 통합하여 저장가능토록 하는 환경을 구축하여 프로젝트의 진행 속도에 박차를 가하여 완성도 높은 개발을 할 수 있는 새로운 협업 시스템을 구축합니다.
Git과 Figma를 통한 디자이너와 개발자 간의 협업 네트워크 형성
끝.
728x90
반응형
LIST