디자인 시스템 2.0, 코드가 공동의 기준이 될 때
1. 기준이 여러 곳에 있으면 불일치는 반복됩니다
Figma 파일, 문서, 코드에 같은 규칙을 따로 관리하면 변경할 때마다 서로 맞추는 작업이 필요합니다.
- 디자인에서 바꾼 값이 구현에 빠지거나, 코드에서 수정한 동작이 문서에 남지 않습니다.
- 이 구조에 AI를 추가해도 여러 사본을 동기화하는 부담은 그대로입니다. 서로 다른 기준을 참조하면 불일치가 더 커질 수 있습니다.
2. 디자이너와 개발자가 같은 코드를 다룹니다
실제로 실행되는 코드를 단일 기준으로 삼고, 시각 편집과 코드 편집을 연결합니다.
- 디자이너는 브라우저의 시각적 캔버스에서 AI와 함께 화면을 다듬고, 개발자는 그 코드를 검토하고 수정합니다.
- 두 작업의 변경 사항이 같은 소스에 반영되어 탐색부터 구현까지 이어집니다.
- AI도 실제 컴포넌트와 규칙을 읽고 수정하므로, 디자인 파일과 구현 사이의 차이를 추측할 필요가 줄어듭니다.
3. 원칙 정의부터 지속적인 운영까지, 네 단계로 연결합니다
코드 중심의 협업이 작동하려면 디자인 원칙과 기술 기반을 함께 마련해야 합니다.
- ① AI와 시스템 정의하기
- 제품 맥락, 브랜드 방향, 정보 밀도, 모션, 접근성 기준을 구체화합니다. AI는 모순과 대안을 찾는 데 도움을 주고, 최종 판단은 팀이 맡습니다.
- ② 엔지니어링 기반 만들기
- 토큰·테마·버전 관리·배포 체계를 구축합니다. 문서도 배포 코드와 같은 소스에서 생성해 AI가 최신 규칙을 읽을 수 있게 합니다.
- ③ 기반 위에서 디자인하기
- 디자이너는 정해진 규칙 안에서 AI와 컴포넌트·패턴·예외 상태를 탐색합니다. 시각적 수정은 개발자가 검토하고 테스트할 코드로 이어집니다.
- ④ 같은 소스에서 계속 개선하기
- 제품의 변화에 맞춰 코드·문서·가이드라인을 함께 갱신합니다. 이를 연결하는 도구 체계와 운영 방식이 뒷받침되어야 합니다.
