피그마, 코드 레이어·Specs 공개…제품 설계와 구현의 경계 좁힌다

오늘의 핵심

피그마가 실제 코드 기반 프로토타입을 캔버스에서 다루는 코드 레이어와 제품 요구사항을 공유하는 Specs를 공개했다. 웹·앱 운영사는 빠른 제작보다 디자인 규칙, 검수 책임, 코드 반출 기준을 먼저 정비해야 한다.

확인된 사실

• 피그마는 팀과 AI 에이전트가 제품 요구사항과 디자인 규칙을 함께 참조할 수 있는 마크다운 기반 기능 ‘Specs’를 공개했다. 근거 [1] [2]
• 실제 실행 코드를 디자인 캔버스에 배치해 인터랙티브 프로토타입을 만들고 수정하는 코드 레이어가 공개 베타로 확대됐다. 근거 [1] [2]
• Specs에서는 문서와 디자인 프레임, 다이어그램 등 시각 자료를 같은 작업 공간에서 연결하고 공동 검토할 수 있다. 근거 [1] [2]
• 피그마는 Payload CMS 연동과 20개 이상의 MCP 연동 확대를 통해 디자인부터 콘텐츠·개발 도구까지 이어지는 작업 흐름을 강화했다. 근거 [1]

왜 중요한가

• 기획 문서, 화면 설계와 실행 가능한 프로토타입의 간격이 줄어들어 발주사도 개발 착수 전에 상호작용을 더 구체적으로 검증할 수 있다.
• AI가 디자인 시스템과 제품 명세를 직접 참조하게 되면서 문서의 정확성과 컴포넌트 관리 수준이 결과물 품질에 더 큰 영향을 미친다.
• 프로토타입에 실제 코드와 외부 저장소가 연결되면 접근 권한, 데이터 반입, 산출물 소유권을 계약과 운영 정책에 명시해야 한다.

inxight의 관점

• 핵심 변화는 화면을 더 빨리 만드는 기능보다 ‘왜 이렇게 설계했는지’를 사람과 에이전트가 함께 읽을 수 있는 구조가 생긴 점이다.
• 코드 기반 프로토타입은 시연 품질을 높이지만 곧바로 운영 환경에 배포할 수 있는 제품을 뜻하지 않는다. 접근성, 보안, 성능과 유지보수성 검증은 별도 관문으로 유지해야 한다.
• 발주 문서는 정적인 화면 목록보다 사용자 상태, 예외 흐름, 콘텐츠 구조와 승인 기준을 연결한 살아 있는 명세로 전환할 필요가 있다.

실무 체크리스트

• 진행 중인 프로젝트 하나를 선정해 요구사항, 디자인 토큰, 주요 화면과 예외 상태를 Specs 형태로 연결하는 소규모 실험을 수행한다.
• 코드 레이어에서 생성하거나 불러온 코드는 운영 코드와 분리하고 보안·접근성·성능 검토를 통과해야 병합할 수 있도록 승인 절차를 정한다.
• 외부 저장소와 MCP 도구를 연결하기 전에 계정 권한, 고객 데이터 반입 금지 범위, 로그 보존과 산출물 반출 기준을 문서화한다.
• 프로토타입 승인 기준에 빈 상태, 오류 상태, 반응형 화면, 키보드 조작과 실제 콘텐츠 길이 검증을 포함한다.