Figma의 새로운 기능 요 (새 탭에서 열림)
Plugins are coming to Figma Inside Figma Plugins & tooling Figma Design
Figma에 플러그인이 도입 (새 탭에서 열림)
피그마는 디자이너와 개발자 간의 간극을 좁히고 제품 구현의 효율성을 극대화하기 위해 '개발 모드(Dev Mode)'를 중심으로 한 강력한 생태계를 구축하고 있습니다. 이 글은 디자인 사양을 단순히 확인하는 수준을 넘어, 디자인 의도를 코드에 정확히 반영하고 불필요한 소통 비용을 줄이기 위한 구체적인 워크플로우 최적화 전략을 제안합니다. 궁극적으로 피그마를 코드와 긴밀하게 연결된 데이터 소스로 활용하여 전체 제품 개발 주기를 단축하는 것을 목표로 합니다. ### 개발 모드(Dev Mode)를 통한 구현 프로세스 최적화 * 개발 모드를 활성화하면 디자인 객체를 선택하는 것만으로 CSS, 변수, 자산 속성 등의 정보를 즉시 확인할 수 있어 코드로의 변환 속도가 비약적으로 향상됩니다. * '개발 준비 완료(Ready for dev)' 기능을 통해 디자이너가 구현 준비가 된 작업물을 명확히 표시함으로써, 개발자가 미완성 디자인을 참조하는 실수를 방지합니다. * VS Code용 피그마 확장 프로그램을 사용하면 편집기 안에서 직접 디자인을 확인하고 코드를 작성할 수 있어, 툴 사이의 컨텍스트 스위칭 비용이 줄어듭니다. ### 디자인 토큰 및 변수(Variables)를 활용한 일관성 유지 * 색상, 간격, 타이포그래피 등의 스타일을 '변수'로 정의하여 디자인 시스템과 실제 코드 간의 명명 규칙을 일치시킵니다. * 다크 모드나 다국어 대응과 같은 복잡한 UI 상태를 변수 모드(Variable Modes)를 통해 사전에 테스트하고, 이를 코드의 테마 관리 시스템에 직접 매핑할 수 있습니다. * 디자인 토큰을 활용하면 디자인 시스템이 변경될 때 코드 베이스를 수동으로 일일이 수정하지 않고도 전체적인 스타일 업데이트를 효율적으로 관리할 수 있습니다. ### 컴포넌트 문서화 및 협업 기능 강화 * 컴포넌트의 동작 원리나 예외 케이스를 주석(Annotations) 기능을 통해 상세히 기록하여, 디자인 의도를 개발자에게 명확히 전달합니다. * 브랜칭(Branching) 기능을 활용해 현재 배포된 디자인과 작업 중인 디자인을 분리 관리함으로써 협업 중 발생할 수 있는 혼선을 최소화합니다. * 컴포넌트 속성(Properties)을 정의하여 개발자가 해당 컴포넌트에서 변경 가능한 옵션이 무엇인지 직관적으로 파악하고, 코드상의 props와 일치시킬 수 있도록 돕습니다. 개발 생산성을 높이기 위해서는 피그마를 단순한 시각 도구가 아닌 '데이터의 원천(Source of Truth)'으로 활용하는 인식의 전환이 중요합니다. 개발 모드와 디자인 토큰을 적극적으로 도입하고, 디자이너와 협의하여 '개발 준비'에 대한 명확한 규칙을 수립하는 것만으로도 커뮤니케이션 오버헤드를 크게 줄이고 제품의 완성도를 높일 수 있습니다.
Figma 워크플로우 (새 탭에서 열림)
디자인 프로젝트의 규모가 커짐에 따라 피그마 파일의 복잡도를 관리하고 작업 효율을 유지하기 위한 체계적인 정리 방안을 제시합니다. 불필요한 요소를 제거하고 구조를 표준화함으로써 개별 작업자의 생산성뿐만 아니라 팀 전체의 협업 속도와 캔버스 렌더링 성능을 동시에 개선하는 것이 핵심 결론입니다. **파일 식별력 및 페이지 구조 최적화** * **커스텀 썸네일 적용**: 파일의 상태(진행 중, 완료, 검토 필요)와 제목을 포함한 썸네일을 설정하여 대시보드에서 프로젝트를 즉각적으로 식별할 수 있도록 합니다. * **페이지 네이밍 컨벤션**: 이모지와 명확한 텍스트를 조합하여 페이지를 구분하고(예: 🚧 WIP, ✅ Ready for Dev, 📦 Archive), 작업 흐름에 따라 논리적으로 배치합니다. * **섹션(Sections) 활용**: 캔버스 내의 관련 프레임들을 섹션으로 묶어 상태를 표시함으로써, 개발자가 어떤 화면을 참고해야 하는지 명확한 가이드를 제공합니다. **스타일 및 컴포넌트 자산 정돈** * **미사용 스타일 제거**: 파일 내에서 사용되지 않는 로컬 스타일과 변수(Variables)를 찾아 삭제함으로써 라이브러리의 무게를 줄이고 혼선을 방지합니다. * **'Select all with...' 기능 활용**: 동일한 폰트, 색상, 효과를 가진 요소를 한꺼번에 선택하여 일관되지 않은 디자인 요소를 대량으로 수정하거나 최신 스타일로 교체합니다. * **컴포넌트 계층 구조 재정비**: 슬래시(/) 명명 규칙을 점검하여 에셋 패널에서 컴포넌트가 올바른 카테고리에 분류되도록 관리합니다. **플러그인을 통한 자동 청소 및 관리** * **레이어 정리 자동화**: 'Clean Document'와 같은 플러그인을 사용하여 이름 없는 레이어, 빈 그룹, 숨겨진 레이어 등 불필요한 요소를 일괄 삭제하고 레이어 순서를 정렬합니다. * **인스턴스 및 참조 관리**: 'Instance Finder' 등을 통해 특정 컴포넌트가 어디에 사용되고 있는지 추적하고, 구버전 컴포넌트를 최신 버전으로 안전하게 교체합니다. * **접근성 및 누락 요소 점검**: 텍스트 대비(Contrast)나 누락된 폰트를 체크하는 플러그인을 실행하여 디자인 품질의 기술적 결함을 사전에 차단합니다. 성공적인 디자인 시스템 운영을 위해서는 정기적인 '클린업 데이'를 정해 파일을 정리하는 습관이 중요합니다. 특히 복잡한 변수와 오토 레이아웃이 적용된 파일일수록 구조적 단순함을 유지하는 것이 장기적인 유지보수 비용을 낮추는 가장 실무적인 전략입니다.
깃허브, 협업 문화를 (새 탭에서 열림)
Zoom은 급격한 성장 과정에서 발생하는 디자인 파편화와 기술 부채를 해결하기 위해 디자인 도구를 Figma로 통합했습니다. 이를 통해 전 세계에 퍼져 있는 팀원들이 단일 진실 공급원(Single Source of Truth)을 공유하게 되었으며, 디자인과 엔지니어링 간의 협업 효율을 극대화하여 제품 출시 속도를 대폭 개선했습니다. 결과적으로 Zoom은 도구의 통합이 단순한 작업 방식의 변화를 넘어 조직 전체의 디자인 성숙도를 높이는 계기가 되었음을 보여줍니다. **성장통과 파편화된 워크플로우의 한계** * Zoom의 급격한 사용자 증가에 따라 디자인 팀도 빠르게 확장되었으나, Sketch, Abstract, InVision 등 여러 도구가 혼재되어 버전 관리와 파일 공유에 병목 현상이 발생했습니다. * 디자이너마다 서로 다른 라이브러리를 사용하면서 UI 일관성이 깨지고, 최신 디자인 자산을 찾는 데 불필요한 시간이 소모되었습니다. * 글로벌 팀 간의 시차로 인해 실시간 피드백이 어려웠으며, 정적인 디자인 파일은 개발자에게 의도를 전달하기에 한계가 있었습니다. **ZDS(Zoom Design System)를 통한 일관성 확보** * Figma를 기반으로 'ZDS'라는 중앙 집중식 디자인 시스템을 구축하여 웹, 모바일, 데스크톱 등 모든 플랫폼에서 동일한 사용자 경험을 제공할 수 있게 되었습니다. * 컴포넌트 중심의 설계를 통해 디자이너가 매번 처음부터 작업할 필요 없이 표준화된 요소를 재사용함으로써 생산성을 높였습니다. * 디자인 시스템의 변경 사항이 실시간으로 모든 프로젝트에 반영되어, 대규모 UI 업데이트 시 발생하던 수동 작업과 오류를 획기적으로 줄였습니다. **디자인과 개발의 경계 없는 협업** * Figma의 실시간 협업 기능을 통해 기획자, 디자이너, 개발자가 하나의 캔버스에서 동시에 소통하며 의사결정 프로세스를 단축했습니다. * 개발자는 별도의 파일 변환 없이 Figma 내에서 직접 코드 속성과 에셋을 추출할 수 있어 디자인 핸드오프(Handoff) 과정의 마찰이 최소화되었습니다. * 프로토타이핑 기능을 활용해 실제 구현 전 사용자 경험을 정밀하게 테스트하고 검증함으로써, 개발 단계에서의 재작업률을 낮췄습니다. **커스텀 플러그인을 통한 워크플로우 자동화** * Figma API를 활용하여 Zoom의 특수한 요구사항에 맞는 커스텀 플러그인을 제작하고 반복적인 수동 작업을 자동화했습니다. * 아이콘 에셋 관리나 다국어 레이아웃 테스트와 같은 번거로운 작업을 자동화하여 디자이너가 창의적인 문제 해결에 더 집중할 수 있는 환경을 조성했습니다. 대규모 조직에서 디자인 효율을 높이려면 단순히 좋은 도구를 도입하는 것을 넘어, 전사적인 디자인 시스템 구축과 워크플로우의 통합이 필수적입니다. Zoom의 사례처럼 파편화된 도구를 하나로 통합하고 자동화를 도입하는 것은 제품의 일관성을 유지하고 개발 속도를 높이는 가장 강력한 전략이 될 수 있습니다.
DesignSystems.com을 (새 탭에서 열림)
피그마를 활용한 디자인 시스템 구축은 단순한 UI 키트 제작을 넘어, 제품 개발의 일관성과 효율성을 극대화하기 위한 '살아있는 언어'를 만드는 과정입니다. 이 시스템은 디자인 변수(Variables)와 스타일을 통한 토큰화, 유연한 컴포넌트 구조, 그리고 명확한 문서화가 결합될 때 비로소 협업의 강력한 도구로 기능합니다. 체계적인 시스템 구축은 팀의 의사결정 속도를 높이고 기술 부채를 줄이는 핵심 전략이 됩니다. ### 파운데이션 설정과 변수(Variables)의 활용 * 색상, 간격(Spacing), 모서리 곡률(Radius) 등을 정의할 때 피그마의 **Variables** 기능을 활용하여 디자인 토큰을 구축합니다. * 'Primitive(원시)' 토큰과 'Semantic(의미론적)' 토큰을 계층화하여, 단순한 색상 코드 대신 `Action-Primary`와 같이 용도에 맞는 이름을 부여해 의미를 전달합니다. * 다크 모드나 다국어 대응을 위해 **Modes** 기능을 활용함으로써, 버튼 하나로 전체 디자인 테마를 손쉽게 전환할 수 있는 환경을 조성합니다. ### 유연한 컴포넌트와 프로퍼티 설계 * 단일 컴포넌트 내에서 불필요한 레이어 노출을 줄이기 위해 **Component Properties**(Boolean, Text, Instance Swap)를 적극적으로 사용합니다. * **Variants(변형)** 기능을 통해 버튼의 상태(Hover, Active, Disabled)나 크기를 관리하되, 복잡도를 낮추기 위해 프로퍼티 구조를 최대한 단순하게 유지합니다. * **Auto Layout**을 전면적으로 적용하여 콘텐츠 길이에 따라 구성 요소가 유동적으로 반응하도록 설계함으로써 개발자와의 레이아웃 소통 오류를 최소화합니다. ### 문서화 및 협업 프로세스 최적화 * 컴포넌트의 사용 용도, 제약 사항, 개발 코드와의 연결성을 기술하는 **Documentation** 페이지를 별도로 구성하여 라이브러리의 신뢰도를 높입니다. * 피그마의 'Descriptions' 기능을 활용해 개발자가 **Dev Mode**에서 직접 컴포넌트 가이드와 관련 링크를 확인할 수 있도록 지원합니다. * 시스템 업데이트 시 버전 관리(Versioning)와 변경 로그(Changelog) 작성을 정례화하여 팀원들이 최신 구성 요소를 혼선 없이 사용할 수 있는 운영 체계를 마련합니다. 디자인 시스템 구축의 핵심은 완벽한 완성보다는 '확장성'에 있습니다. 초기에는 가장 자주 쓰이는 핵심 요소부터 시작하여 점진적으로 고도화하는 것이 중요하며, 무엇보다 디자인 시스템이 단순한 도구가 아닌 '팀의 약속'으로 자리 잡을 수 있도록 지속적인 피드백 루프를 형성해야 합니다.
Figma UI 개편: (새 탭에서 열림)
피그마(Figma) 디자인 팀은 초기 소규모 조직에서 글로벌 규모로 성장하는 과정에서 제품의 철학을 팀 운영 방식에 그대로 투영하는 전략을 취했습니다. 이들은 단순한 시각적 설계를 넘어 제품 개발 전반에 기여할 수 있는 '제너럴리스트' 중심의 채용과 투명한 협업 문화를 통해 혁신적인 디자인 조직을 구축했습니다. 결과적으로 피그마는 도구의 성능뿐만 아니라, 그 도구를 만드는 팀의 유연성과 전문성을 동시에 확보하며 업계의 표준으로 자리 잡았습니다. **초기 채용 전략: 다재다능한 제너럴리스트 확보** * 초창기에는 특정 분야의 전문가보다는 제품의 전체적인 맥락을 이해하고 코드나 비즈니스 논리까지 아우를 수 있는 '풀스택 디자인' 역량을 가진 제너럴리스트를 우선적으로 채용했습니다. * 디자이너가 단순히 화면을 그리는 것에 그치지 않고, 제품의 비전을 정의하고 엔지니어링 제약 사항을 이해하며 협업할 수 있는 비판적 사고 능력을 중시했습니다. **투명성과 공유: '피그마로 피그마 만들기'** * 자신들이 만드는 도구인 피그마를 직접 활용하여 모든 작업 과정을 팀 전체에 실시간으로 공유하는 '워크-인-프로그레스(Work-in-progress)' 문화를 정착시켰습니다. * 완성된 결과물뿐만 아니라 중간 과정의 고민과 실패한 시안들을 가감 없이 공개함으로써 피드백 루프를 단축하고 팀 전체의 상향 평준화를 도모했습니다. **디자인 시스템과 운영(Design Ops)의 내재화** * 팀 규모가 확장됨에 따라 디자인의 일관성을 유지하기 위해 강력한 디자인 시스템을 구축하고, 이를 관리할 전담 조직을 구성했습니다. * 디자이너들이 반복적인 수작업 대신 고도의 창의적 문제 해결에 집중할 수 있도록 워크플로우를 최적화하고 도구 체계를 정비하는 'Design Ops' 기능을 강화했습니다. **다양성과 포용성을 바탕으로 한 커뮤니티 중심 성장** * 전 세계의 다양한 사용자를 대변하기 위해 팀 구성원의 배경과 경험의 다양성을 확보하는 데 주력하여 제품의 포용성을 높였습니다. * 실제 사용자 커뮤니티의 목소리를 제품 개발 프로세스에 깊숙이 반영하여, 실무자의 니즈를 정확히 파악하고 이를 제품 기능으로 빠르게 전환하는 구조를 만들었습니다. 피그마의 사례는 훌륭한 제품을 만들기 위해 그에 걸맞은 조직 문화와 시스템이 선행되어야 함을 시사합니다. 특히 업무 과정을 투명하게 공개하고 도구의 잠재력을 극한으로 끌어올리는 방식은, 급격히 성장하는 디자인 조직이 기술적 부채를 최소화하면서도 창의성을 유지하기 위해 반드시 참고해야 할 모델입니다.
#FigmaTip 모 (새 탭에서 열림)
#FigmaTip Roundup 10.0 Working Well Tips & inspiration Plugins & tooling
디자인 시스템 전파의 (새 탭에서 열림)
피그마에서 디자인 시스템을 구축하는 것은 단순히 UI 구성 요소를 모으는 작업을 넘어, 디자인과 개발 간의 언어를 통일하고 제품의 일관성을 유지하는 핵심적인 기초를 세우는 과정입니다. 효율적인 시스템은 명확한 기초 토큰 정의에서 시작하여 유연한 컴포넌트 구조를 갖추어야 하며, 지속적인 관리 체계를 통해 팀의 생산성을 극대화해야 합니다. 결과적으로 잘 설계된 디자인 시스템은 단순한 라이브러리가 아닌, 제품의 확장성과 브랜드 가치를 지탱하는 살아있는 문서 역할을 합니다. ### 기초 자산과 변수(Variables) 정의 * 색상, 타이포그래피, 간격, 코너 반경 등 디자인의 가장 작은 단위인 원자적 요소를 정의하고 시스템화합니다. * 피그마의 'Variables' 기능을 활용하여 원시 토큰(Primitive Tokens)과 의미적 토큰(Semantic Tokens)을 계층화함으로써 라이트/다크 모드나 반응형 수치 조절을 유연하게 처리합니다. * 하드코딩된 수치 대신 'Success-500'이나 'Button-Primary-BG'와 같은 시맨틱 이름을 사용하여 디자인 의도를 명확히 전달하고 유지보수 효율을 높입니다. ### 유연한 컴포넌트 구조 설계 * 오토 레이아웃(Auto Layout)을 적극적으로 활용해 콘텐츠의 양이나 화면 크기 변화에 따라 유동적으로 반응하는 컴포넌트를 제작합니다. * 컴포넌트 속성(Properties) 기능을 사용하여 불필요한 배리언트(Variants)의 개수를 줄이고, 부울(Boolean), 인스턴스 스왑(Instance Swap), 텍스트 속성을 통해 사용자가 직관적으로 옵션을 조절할 수 있게 합니다. * 컴포넌트를 원자(Atoms), 분자(Molecules), 유기체(Organisms) 단위로 계층화하여 복잡한 UI에서도 일관된 패턴을 유지하고 재사용성을 극대화합니다. ### 효율적인 라이브러리 관리 및 문서화 * 파일 구조를 기초(Foundations), 구성 요소(Components), 패턴(Patterns) 등으로 명확히 구분하여 팀원들이 필요한 요소를 빠르게 찾을 수 있도록 조직합니다. * 각 컴포넌트의 사용 가이드라인, 상태 변화(Hover, Focus, Disabled 등), 개발 전달 사항(Specs)을 피그마 내부에 상세히 기록하여 소통 비용을 줄입니다. * 버전 관리 시스템을 도입해 변경 사항을 기록하고, '게시(Publish)' 기능을 통해 업데이트된 요소가 제품 전체에 안정적으로 동기화되도록 관리합니다. 디자인 시스템은 한 번에 완성되는 것이 아니라 제품과 함께 성장하는 프로젝트입니다. 초기부터 모든 컴포넌트를 완벽하게 만들기보다는 가장 자주 사용되는 버튼, 입력창, 아이콘부터 시작해 점진적으로 확장하는 방식을 권장합니다. 또한, 정기적인 디자인 시스템 싱크 미팅을 통해 디자이너와 엔지니어의 피드백을 수렴하고, 실제 제품 코드와의 간극을 좁혀나가는 노력이 병행되어야 합니다.
Figma 데스크톱 앱 경험 업데이트 (새 탭에서 열림)
Introducing BrowserView for Electron Inside Figma Product updates
Dribbble이 원격 팀 (새 탭에서 열림)
영국 전력 회사 Bulb는 급격한 성장에 따른 제품의 복잡성을 해결하고 브랜드 일관성을 유지하기 위해 'Solar'라는 디자인 시스템을 구축했습니다. 이들은 Figma를 중심 도구로 도입하여 디자인과 엔지니어링 사이의 물리적, 심리적 장벽을 허물고 제품 개발 속도를 획기적으로 높였습니다. 결과적으로 Solar는 단순한 UI 키트를 넘어, 팀 간의 공통 언어를 형성하고 사용자에게 통일된 경험을 제공하는 핵심 자산으로 자리 잡았습니다. **Solar 디자인 시스템의 구축 배경과 목표** - 제품 라인업이 다양해짐에 따라 발생하는 디자인 파편화 문제를 해결하고, 팀 전체가 공유할 수 있는 '단일 진실 공급원(Single Source of Truth)'이 필요했습니다. - 디자인 시스템 'Solar'는 모든 인터페이스 요소에 일관된 규칙을 부여하여, 디자이너와 개발자가 매번 새로운 요소를 설계할 필요 없이 기존 컴포넌트를 조합해 신속하게 기능을 구현하는 데 집중하도록 설계되었습니다. - 브랜드 정체성인 '친환경'과 '명확함'을 디지털 제품에서도 동일하게 느낄 수 있도록 시각적 가이드라인을 시스템화했습니다. **Figma 전환을 통한 협업 효율 극대화** - 과거 Sketch와 Abstract 등 여러 도구에 분산되어 있던 디자인 환경을 Figma로 통합함으로써 실시간 협업과 피드백 루프를 단순화했습니다. - 개발자가 별도의 추출 도구 없이도 Figma 내에서 직접 코드 속성과 수치를 확인할 수 있게 되어, 디자인 핸드오프(Handoff) 과정에서 발생하는 커뮤니케이션 오류를 최소화했습니다. - 클라우드 기반의 공유 방식을 통해 기획자, 마케터 등 비디자이너 직군도 최신 디자인 사양을 쉽게 확인할 수 있게 되었습니다. **기술적 고도화와 컴포넌트 관리 전략** - Figma의 오토 레이아웃(Auto Layout)과 배리언트(Variants) 기능을 적극 활용하여 다양한 화면 크기와 상태 변화에 유연하게 대응하는 반응형 컴포넌트를 구축했습니다. - 디자인 토큰(Design Tokens) 개념을 도입하여 색상, 타이포그래피, 간격 등의 기초 속성을 코드와 연동함으로써 시스템 수정 시 디자인과 개발 환경에 동시 반영되도록 관리합니다. - 단순한 시각적 구현을 넘어 접근성(Accessibility)을 시스템 차원에서 검토하며, 모든 사용자가 제약 없이 에너지를 관리할 수 있도록 색 대비와 탭 순서 등을 표준화했습니다. **실천적인 제언** 성공적인 디자인 시스템은 단순한 컴포넌트 모음이 아니라, 지속적으로 관리되고 진화하는 '살아있는 제품'이어야 합니다. Bulb의 사례처럼 디자인 시스템이 실질적인 가치를 발휘하려면, 도구의 기능을 숙달하는 것만큼이나 디자인과 엔지니어링 팀 간의 긴밀한 워크플로우를 설계하고 시스템을 지속적으로 업데이트하려는 조직적 문화가 뒷받침되어야 합니다.
노션이 실패의 위기에서 (새 탭에서 열림)
이 글은 무거운 노트북과 복잡한 장비에서 벗어나 아이패드와 원격 데스크톱 환경만으로 이동형 디자인 워크플로우를 구축한 두 디자이너의 실험적 여정을 다룹니다. 이들은 하드웨어의 물리적 제약을 최소화하기 위해 클라우드 기반 도구와 고성능 원격 접속 기술을 결합하여, 장소에 구애받지 않고도 데스크톱 수준의 생산성을 유지하는 방법을 증명했습니다. 결과적으로 하드웨어의 경량화가 단순한 편의를 넘어 창의적 집중력을 극대화하는 중요한 도구가 될 수 있음을 보여줍니다. ### 기존 하드웨어 워크플로우의 한계 * **물리적 부담:** 고성능 노트북(MacBook Pro 등)은 성능은 뛰어나지만, 무게와 부피, 그리고 대형 충전기 등의 부속 장비로 인해 이동 중 작업에 큰 제약을 줍니다. * **환경의 제약:** 강력한 성능이 필요할 때마다 특정 장소(사무실이나 집)에 얽매이게 되어, 여행이나 이동 중에 갑작스러운 고사양 작업이 필요한 상황에 유연하게 대처하기 어렵습니다. * **심리적 비용:** 고가의 장비를 항상 휴대해야 한다는 불안감과 배터리 수명에 대한 걱정은 창의적인 사고를 방해하는 요소로 작용합니다. ### 아이패드와 원격 데스크톱을 결합한 솔루션 * **하이브리드 셋업:** 물리적으로는 아이패드 프로와 매직 키보드만을 휴대하고, 실제 고사양 연산은 집에 있는 Mac Mini나 Mac Studio에서 처리하는 방식을 채택했습니다. * **Jump Desktop 활용:** 원격 데스크톱 소프트웨어인 Jump Desktop을 사용하여 아이패드에서 Mac OS 환경에 지연 시간(Latency) 없이 접속함으로써, 모바일 기기의 한계를 극복했습니다. * **연결성의 진화:** 5G 테더링과 스타링크(Starlink) 같은 차세대 통신 기술을 활용해, 캠핑카나 오지에서도 안정적인 워크스테이션 연결 상태를 유지했습니다. ### 디자인 생산성을 높이는 핵심 도구 * **Figma의 역할:** 웹 기반 도구인 Figma는 브라우저만 있으면 어디서든 동일한 디자인 환경을 제공하므로, 기기 변경에 따른 작업 단절을 없애는 핵심 축이 되었습니다. * **Raycast를 통한 자동화:** 원격 환경에서도 Raycast의 익스텐션과 단축키를 적극 활용하여, 앱 전환, 파일 검색, 스크립트 실행 등을 신속하게 처리하며 워크플로우 효율을 높였습니다. * **클라우드 네이티브 워크플로우:** 모든 에셋과 작업물을 GitHub와 Slack 등 클라우드 기반 협업 도구에 실시간으로 동기화하여, 로컬 저장소에 의존하지 않는 환경을 구축했습니다. ### 이동성이 가져온 업무 방식의 변화 * **장소의 자유:** 카페, 밴(Van), 야외 등 다양한 환경에서 작업하며 새로운 영감을 얻고, "디지털 노마드"로서의 삶의 질을 향상시켰습니다. * **미니멀리즘의 가치:** 꼭 필요한 장비만 남기는 과정에서 업무 프로세스가 단순화되었으며, 이는 작업에 대한 더 깊은 몰입과 빠른 의사결정으로 이어졌습니다. 장소에 구애받지 않는 디자인 환경을 구축하고 싶다면, 기기의 성능 자체를 업그레이드하기보다 **'가벼운 클라이언트(아이패드) + 강력한 호스트(원격 Mac) + 고속 네트워크'** 조합의 환경 설계를 시도해 볼 것을 추천합니다. 특히 Figma나 Raycast와 같이 클라우드와 자동화에 최적화된 도구를 워크플로우의 중심에 두는 것이 성공적인 전환의 핵심입니다.
Bulb, 디자인 시스템 Solar (새 탭에서 열림)
딜리버루(Deliveroo)는 소비자, 라이더, 레스토랑이라는 복잡한 삼각 시장의 사용자 경험을 통합하기 위해 피그마(Figma)를 중심으로 디자인 시스템 'Roos'를 재구축했습니다. 과거 파편화된 도구 체계에서 벗어나 피그마의 실시간 협업 환경으로 전환함으로써 디자인 일관성을 확보하고 개발 핸드오프 효율을 극대화했습니다. 결과적으로 딜리버루는 시스템 기반의 사고를 통해 제품 업데이트의 속도와 정확도를 획기적으로 높였습니다. **디자인 시스템 'Roos'를 통한 단일 진실 공급원 구축** * 기존의 Sketch와 Abstract 기반 워크플로우에서 발생하던 버전 관리와 소통의 비효율을 해결하기 위해 피그마로 전면 이주했습니다. * 'Roos' 디자인 시스템을 통해 웹, iOS, 안드로이드 전반에 걸쳐 공통된 디자인 언어를 적용하고 제품 간의 시각적 파편화를 방지했습니다. * 전역적인 'Core' 라이브러리와 특정 서비스의 요구사항을 반영하는 'Local' 라이브러리로 계층화하여 시스템의 유연성과 통일성을 동시에 확보했습니다. **피그마의 고급 기능을 활용한 디자인 자동화 및 최적화** * 오토 레이아웃(Auto Layout)과 컴포넌트 속성(Component Properties)을 적극 활용하여 다양한 화면 크기와 복잡한 상태 변화에 유연하게 대응하는 반응형 컴포넌트를 제작했습니다. * 디자인 토큰(Design Tokens)을 체계화하고 이를 코드와 동기화하여 브랜드 색상이나 타이포그래피 변경 시 제품 전체에 즉각 반영될 수 있는 구조를 만들었습니다. * 피그마 플러그인과 API를 활용해 반복적인 수동 작업을 자동화함으로써 디자이너가 픽셀 작업보다 사용자 경험 설계에 더 많은 시간을 할애하도록 도왔습니다. **디자인과 엔지니어링의 협업 프로세스 혁신** * 개발자가 디자인 초기 단계부터 피그마 파일에 접속하여 실시간으로 피드백을 주고받음으로써 구현 가능성을 조기에 검토하고 오해를 줄였습니다. * Dev Mode를 통해 디자인 사양을 코드 수준에서 명확하게 전달하며, 스타일 정의와 에셋 추출 과정을 간소화하여 개발 생산성을 높였습니다. * 디자인 시스템의 업데이트가 엔지니어링 팀에 전달되는 과정을 투명하게 관리하여 디자인 변경 사항이 실제 프로덕트에 빠르게 반영되도록 했습니다. 다양한 이해관계자가 얽힌 대규모 플랫폼일수록 디자인 시스템을 단순한 라이브러리가 아닌 하나의 '살아있는 제품'으로 취급해야 합니다. 피그마의 고급 기능을 통해 디자인과 개발의 언어를 일치시키고, 모든 팀원이 실시간으로 협업할 수 있는 환경을 구축하는 것이 빠른 제품 혁신과 높은 품질을 유지하는 핵심 전략입니다.