📅 2026.06.18(목) - 44일차
- 디자인 팀의 규모가 커지고 제품이 고도화될수록 일관성 있는 디자인 시스템 유지는 필수: 각자 작업 시 발생하는 폰트 크기, 여백, 스타일 파편화 문제를 해결하기 위해 DesignOps 한명 선정하여 팀 컴포넌트 병합 및 라이브러리 발행 실습.
- Figma Make AI와 3D/시각화 라이브러리를 연계한 차세대 PoC(개념 검증) 파이프라인 실험까지 완료함.
1. 전날 피드백 반영: Scroll Spacer 추가
본격적인 컴포넌트 병합에 앞서 전날 디자인 시스템 리뷰에서 도출된 핵심 레이아웃 팁을 화면에 적용함.
- 문제점: 화면 스크롤 시 화면 하단 여백 부족으로 콘텐츠가 잘림.
- 해결: 하단 마진을 위해 패딩을 키워보니 적용 안됨, 아무런 요소도 들어있지 않은 빈 컴포넌트인 'Spacer'를 제작해서 하단에 삽입하면 레이아웃 구조를 해치지 않으면서 스크롤 시 하단 여백을 확보됨.
2. DesignOps 마스터 중심의 컴포넌트 병합
4인 1조 협업 세션으로 진행되었으며, 디자인 운영을 총괄하는 DesignOps 마스터 1명을 지정하여 워크플로우를 구조화해봄. 3명의 팀원이 각자 담당 컴포넌트를 불러와서, DesignOps 마스터의 작업 파일(Single Source of Truth)로 모든 결과물을 모음. 병합 과정에서 시스템 붕괴를 막기 위해 아래 3가지 검증 절차를 거침.
- 네이밍 컨벤션(Naming Convention) 통일
- 에셋 패널 내 자동 카테고리 분류를 위해 슬래시(/) 구조 적용.
- *ex) Button/Primary/Default, Input/Text/Active*의 대소문자 및 슬래시 규칙 엄격 통일.
- 레이어 구조와 이름 싱크 매칭
- 인스턴스 교체 시 텍스트 및 스타일 오버라이드 유실을 방지하기 위해 내부 레이어 이름과 구조의 일관성 확인.
- 로컬 스타일 연결 전환
- 팀원 개인 파일의 로컬 스타일을 끊고 마스터 파일의 '공통 폰트 및 컬러 스타일'로 전면 재연결하여 중앙 제어 기반 마련.
3. 라이브러리 발행(Publish) 및 초고속 PoC 화면 제작
병합 완료 후 DesignOps 마스터가 팀 라이브러리를 최초 발행(Publish)함. 팀원들은 해당 라이브러리를 활성화하여 가상의 신규 서비스 아이디어를 검증할 PoC(Proof of Concept) 화면 제작에 착수함.
- 생산성 및 일관성 확인: 에셋 패널 드래그 앤 드롭만으로 5분 만에 화면 빌드 완료. 서로 다른 디자이너가 그렸음에도 곡률(Rounding), 폰트, 마진이 완벽히 일치함.
- 라이브러리 업데이트 알림 체감: 실습 중 발생한 수정 사항을 마스터가 재배포하자 팀원 화면 우측 하단에 [Component updates available] 알림이 팝업됨. 클릭 한 번으로 일괄 싱크가 완료되는 효율성을 경험함.
4. Figma Make 에이전트 활용 Handoff 실습
오후 세션에는 PoC 화면 내에 들어갈 시각적 요소를 단순 이미지 캡처로 끝내지 않고, 피그마 AI 기능인 Figma Make를 활용하여 개발 코드로 변환하는 테크 체인 실험을 설계함.
- 실험 시나리오: 참고용 그래프 스크린샷을 Figma Make 에이전트에 입력 후, 데이터 시각화 라이브러리인 D3.js 또는 웹 3D 라이브러리인 Three.js(3js) 기반의 독립형 인터랙티브 웹페이지(index.html) 코드로 추출 요청.
- 디자인옵스 문서화 자동화: 코드 스니펫 추출에 그치지 않고, 팀원들이 해당 에셋을 활용 및 확장할 수 있도록 핵심 기술 스택과 가이드라인이 정리된 skill.md 기술 문서 동시 생성을 에이전트에 제안함.
5. 글로벌 테크 트렌드와 3D 그래픽 인프라 확장
실험의 고도화를 위해 글로벌 빅테크 생태계(Tencent 등)의 인프라와 3D 모델링 툴을 파이프라인에 추가 연계함.
- Tencent 생태계 벤치마킹: 대규모 데이터 시각화 및 디자인 시스템 거버넌스의 교과서인 텐센트의 AntV 차트 엔진 및 TDesign 프레임워크 구조 분석 및 연계 가능성 검토.
- Blender ── Three.js 파이프라인: 수학적 코딩 대신 오픈소스 3D 소프트웨어인 블렌더(Blender)에서 입체 오브젝트를 시각적으로 디자인한 후, 웹 표준 3D 포맷(.gltf / .微b)으로 익스포트하여 Three.js 코드와 결합하는 실무 워크플로우 정립.
6. Midjourney 기반 비주얼 폭격 및 가상 파이프라인 완성
PoC 웹페이지의 시각적 몰입감을 극대화하고 디자인 시스템의 톤앤매너를 확립하기 위해 초고화질 AI 이미지 생성 툴인 미드저니(Midjourney)를 전면에 배치함. 사이버펑크 서버룸 배경, 데이터 흐름 추상화 이미지 등을 1분 만에 생성하여 웹 테마 및 D3.js 컬러 팔레트 추출 소스로 활용함.
🔗 최종 정립된 '무적의 DesignOps 3D 웹 파이프라인'
- Visuals (Midjourney): 고화질 배경 및 톤앤매너 이미지 생성.
- UI System (Figma): 비주얼 가이드 기반 컴포넌트 라이브러리 구축 및 발행.
- 3D Assets (Blender): 웹 최적화 3D 오브젝트 제작 후 .glb 형태로 추출.
- Code Delivery (Figma Make): D3.js 차트 및 Three.js 3D 모듈이 포함된 라이브 웹페이지 자동 코딩.
- Docs (AI Agent): 기술 가이드라인 문서(skill.md) 추출 및 GitHub 배포 자동화.
🏁 최종 회고
디자인 시스템은 단순한 컴포넌트 모음집이 아닌 '팀의 일하는 방식을 효율화하는 인프라'임을 재확인함. 체계적인 시스템 인프라 덕분에 디자인 리소스를 절약하고 비즈니스 논리 및 기획에 온전히 집중할 수 있었음. 나아가 AI 에이전트(Figma Make)를 활용해 디자인을 즉시 3D/데이터 시각화 웹 코드로 전환하고 skill.md 문서화까지 자동화하는 흐름을 통해, 미래 DesignOps 마스터가 지향해야 할 기술적 비전과 무한한 확장성을 체감한 유의미한 실습이었음.