Code Connect의 잠재력 활용 (새 탭에서 열림)

디자인과 개발의 간극을 줄이려면 두 팀이 공유할 수 있는 언어와 단일한 작업 흐름이 필요하다. Figma의 Code Connect는 디자인 시스템의 컴포넌트 구현 정보와 문서를 Dev Mode에서 직접 제공해 개발자가 맥락을 바꾸지 않고 올바른 코드를 사용할 수 있도록 돕는다. 패널 참가자들은 작은 컴포넌트부터 시작해 점진적으로 도입하고, 디자이너와 개발자의 전문성을 서로 존중해야 한다고 강조한다.

디자인과 개발이 함께 쓰는 언어 만들기

• 디자이너와 개발자는 컴포넌트 이름, 속성, 구현 방식에 대해 서로 다른 용어와 기대를 가질 수 있다.
• 이 차이는 다음과 같은 문제로 이어진다.
  • 일관되지 않은 네이밍
  • 디자인과 코드의 속성 불일치
  • 팀 간 요구사항과 구현 결과의 불일치
• 디자인 시스템은 공통 컴포넌트, 패턴, 용어를 정의해 두 분야를 연결하는 “제3의 언어” 역할을 한다.
• 단순히 규칙을 문서화하는 것뿐 아니라, 구성원이 쉽게 찾고 실제로 적용할 수 있게 만드는 것도 중요하다.

단일한 기준과 개발자 워크플로 연결

• Bumble의 Raul Menezes는 디자인과 코드에서 서로 다른 기준 문서가 사용되는 것이 일관성 저하의 주요 원인이라고 설명한다.
• 같은 UI 패턴을 반복해서 직접 구현하면 다음 문제가 발생한다.
  • 중복 코드 증가
  • 커스텀 구현 확산
  • 유지보수 어려움
  • 디자인 시스템과 실제 제품 간의 불일치
• 디자이너는 디자인 시스템 문서를 참고하지만, 개발자는 별도의 코드 저장소나 문서를 기준으로 삼는 경우가 많다.
• Code Connect는 디자인 시스템의 코드 예시와 구현 정보를 Dev Mode 안에서 제공해 개발자가 기존 코드 편집 및 개발 흐름에서 바로 참고하도록 설계됐다.

도입 장벽을 낮추고 작은 규모로 시작하기

• 디자인 시스템을 구축했다고 해서 자동으로 팀 전체가 사용하는 것은 아니다. 개발자가 기존 작업 방식을 크게 바꿔야 한다면 adoption이 느려질 수 있다.
• 기존에는 개발자가 디자인 구현 방식을 확인하기 위해 별도의 디자인 시스템 웹사이트로 이동해야 했다.
• Code Connect를 사용하면 Dev Mode에서 특정 디자인이 코드로 구현되어 있는지, 어떤 방식으로 구현하는지 확인할 수 있어 컨텍스트 전환을 줄인다.
• 처음부터 모든 컴포넌트를 연결하기보다 영향도가 높고 구조가 단순한 컴포넌트부터 시작하는 것이 권장된다.
  • 예: 토글 같은 작은 컴포넌트
  • 디자인 속성과 코드 속성을 어떻게 매핑하는지 먼저 검증
  • 팀이 도구의 효과와 운영 방식을 익힌 뒤 범위 확대
• Code Connect는 완성된 최종 해법이라기보다 더 큰 디자인-코드 통합을 위한 첫 단계로 제시된다.

서로의 전문성 존중하기

• 디자인과 개발의 간극을 줄인다는 것은 한쪽의 방식을 다른 쪽에 강요하는 것이 아니다.
• 디자이너는 사용자 경험, 시각적 일관성, 패턴 설계에 강점을 가진다.
• 개발자는 컴포넌트 구조, 재사용성, 기술적 제약, 유지보수성에 전문성이 있다.
• 효과적인 디자인 시스템 운영을 위해서는 두 팀이 각자의 전문성을 인정하고, 공통 언어와 도구를 통해 협업해야 한다.
• Code Connect는 디자인 시스템의 의도와 실제 코드 구현을 연결해 양쪽의 지식을 공유하는 매개 역할을 한다.

실용적인 적용 방법

• 디자인 시스템에서 자주 사용되고 영향도가 큰 컴포넌트를 우선 선정한다.
• 디자인의 컴포넌트 속성과 코드의 props·API가 어떻게 대응하는지 정의한다.
• Dev Mode에서 개발자가 별도 문서 검색 없이 구현 예시를 확인할 수 있도록 연결한다.
• 초기 도입 후 다음을 점검한다.
  • 개발자가 실제로 재사용 컴포넌트를 선택하는지
  • 중복·커스텀 구현이 줄었는지
  • 디자인과 코드의 명명 및 속성이 일치하는지
• 검증된 운영 방식을 바탕으로 점차 복잡한 컴포넌트와 더 넓은 제품 영역으로 확대하는 것이 바람직하다.