Designa11y Annotation 플러그인 사용해보기

사용한 코드 편집기는 Antigravity이다. 테스트를 위한 Next.js 프로젝트 생성을 제일 먼저 했다.

플러그인 테스트용 파일은 iM뱅크 시안으로 제작한 디자인 파일이다.

DesignA11y Annotator는 선택한 파일에 원하는 주제의 주석을 달아주는 플러그인이다. 피그마 내부의 주석 기능을 활용해 내용을 채워넣어주는 방식이라고 이해하면 쉽다. 당연히 자동으로 달린 주석을 수정하는 것도 가능하다.

Alt text(이미지 alt값)와 Button 주석을 선택 생성해보았다. 보이는 페이지 내부에 있는 모든 디자인 파일에 주석을 달 수도 있고, 선택한 파일에만 주석을 달 수도 있다.

Figma Dev Mode MCP를 Antigravity에 연결해 디자인 구현을 시도해보았다. 제법 정확한 디자인이 생성되었다.

해당 디자인을 구현하면서 플러그인으로 생성한 주석 정보도 함께 들어간 것을 확인할 수 있었다. data-annotations 부분에 플러그인으로 만든 주석 정보가 들어가 있다.

추출된 정보는 주석 종류(ALT TEXT IMAGE), 파일명(Name), 이미지의 경우 웹접근성용 alt값(alt)이 포함된다.

Antigravity 사용량이 초과해 Github Copliot으로 옮겼다. 모델은 동일하게 Gemini 3.0 Pro를 사용했다.

해당 주석을 별도 마크다운 파일로 정리도 가능했다.

다음 페이지는 구현하는 동시에 주석 정보를 별도 마크다운 파일로 생성해달라고 요청했다.

마크다운으로 정리된 파일이 동시에 생성되는 것을 확인할 수 있었다.

정리한 주석 내용을 스토리북 문서로도 생성이 가능했다.

md 파일 내용을 스토리북 문서파일로 만들어달라 요청했고, 해당 내용이 page.stories.tsx 파일로 생성되는 것까지 확인할 수 있었다.

스토리북 문서는 아래 URL에서 확인할 수 있다.