변수에 관한 모든 궁금증 해결 (새 탭에서 열림)

Figma의 Config 2023에서 발표된 이번 업데이트는 디자인과 개발 사이의 간극을 좁히고, 팀이 하나의 제품을 완성해 나가는 과정을 근본적으로 재정의하는 데 초점을 맞추고 있습니다. 단순히 디자인 도구의 기능을 확장하는 것을 넘어, 제품 개발의 전체 워크플로우를 아우르는 '데브 모드(Dev Mode)'와 디자인 시스템의 효율성을 극대화하는 '변수(Variables)' 기능을 도입했습니다. 이를 통해 디자인에서 코드로 전환되는 과정을 더욱 빠르고 정확하게 만들어 협업의 효율을 극대화한다는 것이 핵심 결론입니다.

개발자를 위한 새로운 작업 공간, 데브 모드(Dev Mode)

  • 개발자 특화 인터페이스: 피그마 내에 개발자에게 필요한 정보만을 전문적으로 제공하는 '데브 모드'가 추가되었습니다. 디자인 요소의 치수, 사양, 디자인 시스템 정보를 한눈에 확인할 수 있으며, 검사(Inspect) 기능이 대폭 강화되었습니다.
  • VS Code 통합: 'Figma for VS Code' 익스텐션을 통해 개발자는 코드 에디터를 떠나지 않고도 디자인 파일을 확인하고 코드 제안을 받을 수 있어 문맥 전환에 드는 비용을 최소화했습니다.
  • 개발 상태 추적: 섹션에 'Ready for dev' 상태를 표시할 수 있어, 개발자가 어떤 부분이 구현 준비가 되었는지 명확히 인지하고 작업을 시작할 수 있도록 돕습니다.

디자인 토큰의 진화, 변수(Variables)

  • 다차원적 데이터 관리: 색상, 숫자, 문자열, 불리언(Boolean) 값을 변수로 정의하여 디자인 시스템의 일관성을 유지할 수 있습니다. 이는 개발 환경에서의 디자인 토큰(Design Tokens) 개념과 긴밀하게 연결됩니다.
  • 모드(Modes) 전환: 하나의 디자인에서 '라이트/다크 모드'나 '모바일/데스크톱 레이아웃' 등 다양한 환경을 변수를 통해 쉽게 전환하며 테스트할 수 있습니다.
  • 워크플로우 자동화: 변수 기능을 활용하면 수동으로 수정해야 했던 반복적인 디자인 작업을 시스템화하여 관리할 수 있어 유지보수 효율이 비약적으로 향상됩니다.

논리와 표현력을 더한 고급 프로토타이핑

  • 조건부 논리 및 표현식: 프로토타입 제작 시 'if/else' 조건문과 수학적 표현식을 사용할 수 있게 되었습니다. 이를 통해 기존에는 수십 개의 프레임이 필요했던 복잡한 인터랙션을 단 몇 개의 프레임만으로 구현할 수 있습니다.
  • 인라인 프레임 편집: 캔버스 안에서 직접 프로토타입 연결을 관리하고 미리 보기를 실행할 수 있어, 수정과 확인 과정이 훨씬 더 직관적이고 빨라졌습니다.

Config 2023의 업데이트는 디자인 도구가 생산 도구를 넘어 개발 실행 단계와 얼마나 긴밀하게 결합될 수 있는지를 보여줍니다. 실무 팀은 단순히 새로운 기능을 익히는 것을 넘어, '변수' 기능을 활용해 디자인 시스템을 코드와 동기화하고 '데브 모드'를 통해 핸드오프(Handoff) 프로세스를 자동화함으로써 불필요한 커뮤니케이션 비용을 획기적으로 줄일 것을 추천합니다.