읽을거리 · AI 디자인
피그마 Specs, 마크다운 한 장으로 팀과 AI에게 맥락을 건네는 방법
피그마가 캔버스 위에 마크다운 문서를 놓는 기능 Specs를 유료 플랜에 오픈 베타로 냈다. 무엇이 되고 무엇이 아직 확인되지 않았는지, 앞서 다룬 DESIGN.md와는 어떻게 다른지 피그마 공식 글과 릴리스 노트로 확인해 정리했다.
피그마가 캔버스 위에 마크다운 문서를 올려 두는 기능 'Specs'를 냈다. 인도에서 열린 첫 Config 행사에서 나온 소식이고, 피그마 공식 글의 날짜는 10월 15일이다.
디자인 파일을 열면 프레임은 있는데 "왜 이렇게 했는지"는 어디에도 없을 때가 많다. 결정은 메신저에, 요구 사항은 문서에, 시안은 피그마에 흩어져 있다. 이제는 여기에 AI 에이전트까지 읽어야 한다. 피그마는 이 흩어진 맥락을 캔버스 위 한 곳에 모으겠다고 했다.
그래서 이번 글은 발표 문구보다 피그마 공식 블로그 글과 릴리스 노트를 따라갔다. 무엇이 되는지, 누가 쓸 수 있는지, 아직 확인되지 않은 것은 무엇인지를 나눠서 적는다.
먼저 밝혀 둘 것. 나는 이 기능을 직접 써 보지 못했다. 아래 내용은 모두 피그마가 공개한 글과 노트, 그리고 기사에 적힌 것이다. 요금제별 세부 제한이나 마크다운 문법의 지원 범위는 공개된 글에서 찾지 못했다.
Specs는 무엇인가
피그마는 Specs를 캔버스 위에 놓이는 '맥락을 담는 컨테이너'로 소개한다. 원문 표현으로는 "a multiplayer container that allows context to fully express itself"다. 여럿이 함께 편집하는 문서이고, 마크다운으로 쓴다.
특징은 문서 안에 디자인이 들어간다는 점이다. 스펙 안에 FigJam 파일, 프레임, 캔버스의 노드를 직접 끼워 넣을 수 있다. 글과 시안이 나란히 놓이니, 설명 문서를 따로 열어 보는 수고가 줄어든다. 독립된 파일로 둘 수도 있고, 캔버스 안에 같이 둘 수도 있다.
만드는 방법은 두 가지다.
- 이미 있는
.md파일을 캔버스에 끌어다 놓으면 스펙이 된다. - 피그마나 FigJam에서 키보드
D를 누르거나 툴바의 Specs 아이콘을 누르면 새 스펙이 열린다.
스펙을 복제해서 팀원이 각자 버전을 동시에 써 보고, 나중에 방향을 맞추는 것도 된다고 한다.
왜 하필 마크다운인가
마크다운은 사람도 읽기 쉽고, AI도 잘 읽는 형식이다. 지난 2일 글에서 다룬 DESIGN.md도 같은 이유로 마크다운을 쓴다. 색과 글자 크기 같은 값은 위쪽에 정확히 적고, 그 값을 왜 어떻게 쓰는지는 아래쪽에 글로 적는 파일이었다.
Specs는 그 생각이 피그마 안으로 들어온 모습에 가깝다. 다만 같은 것은 아니다. DESIGN.md는 구글 랩스가 공개한 파일 형식이고, Specs는 피그마 캔버스 안의 문서다. 하나는 규칙을 담은 파일, 다른 하나는 작업 맥락을 담는 자리라고 나눠 보면 된다. 둘 중 하나를 고를 문제가 아니라, 규칙은 규칙대로 쓰고 작업의 배경은 스펙에 쓰는 식으로 나눠 쓸 수 있다. 이 부분은 내 해석이다.
나도 이 사이트를 만들며 회색 글자의 명도 대비를 검사기로 확인하고 고친 적이 있다. 기준을 숫자로 적어 두면 눈으로 놓친 곳을 도구가 짚어 준다. 맥락을 문서로 남기는 일도 비슷한 쓸모가 있다.
에이전트가 스펙을 읽고, 댓글도 단다
피그마 글에 따르면 피그마 에이전트는 스펙의 댓글을 읽고 답글을 달 수 있다. 사람과 일하듯 에이전트에게도 댓글로 일을 시킬 수 있다는 뜻이다. 에이전트와의 여러 대화는 각각 별도 스레드로 나뉘어 병렬로 진행된다.
연결된 도구도 소개됐다.
- GitHub 커넥터: 코드베이스를 참고해 기술 스펙 초안을 쓰게 할 수 있다.
- Hex 커넥터: 제품 사용 데이터를 분석하고 결과를 스펙에 댓글로 남기게 할 수 있다.
코딩 에이전트와의 연결은 MCP로 한다. 스펙 링크를 복사해 코딩 에이전트의 프롬프트에 붙이면, 마크다운과 프레임 참조, 다이어그램, 코드 레이어, Code Connect 스니펫이 함께 넘어간다고 한다. 개발자에게 "피그마 링크랑 이 문서 보세요"라고 따로 말하던 일을 링크 하나로 줄이겠다는 얘기다.
피그마 공식 글에는 사례도 있다. Intuit의 Mark Harvey는 아이콘 세트의 파일 이름, 분류, 태그, 설명을 스펙으로 정리했다. 피그마 리서처는 브레인스토밍 결과와 아직 풀리지 않은 질문을 스펙에 모아 둔다. 디자이너에게 가까운 쓰임은 이쪽이다.
같이 나온 것들
10월 15일 릴리스 노트와 TechCrunch 기사를 합쳐 상태를 표로 정리했다.
| 기능 | 상태 | 제공 범위 |
|---|---|---|
| Specs | 오픈 베타 | 유료 플랜 |
| 가이드라인 | 출시(단계 명시 없음) | 요금제 명시 없음 |
| 통합 디자인 시스템(디자인 라이브러리 + 코드 라이브러리 + 가이드라인) | 프리뷰 | 명시 없음 |
| 코드 레이어 | 공개 베타(6월 비공개 베타에서 전환) | 명시 없음 |
| 피그마 에이전트 | 10월 6일 정식 출시 | AI 크레딧 사용 |
출처: Figma 릴리스 노트 (10월 16일 확인), TechCrunch
눈여겨볼 것은 가이드라인이다. 릴리스 노트에 따르면 게시된 디자인 라이브러리에 규칙, 모범 사례, 하지 말아야 할 것을 마크다운 파일로 붙여 둘 수 있고, 라이브러리를 켜고 프롬프트를 쓸 때마다 에이전트가 이 파일을 읽는다. 앞서 AI가 화면을 직접 그리기 시작한 주에 던진 질문, 곧 디자인 규칙을 누가 쥐고 있느냐에 대한 피그마의 답이 이쪽이다. 규칙을 사람이 글로 적어 두면 에이전트가 따른다는 구조다.
피그마는 AI의 결과가 매번 다르다는 점도 의식하고 있다. TechCrunch는 이번 발표가 AI 결과를 더 예측할 수 있게 하려는 도구라고 전했다. 다만 얼마나 예측 가능해지는지는 숫자로 공개된 것이 없다.
에이전트는 10월 6일부터 AI 크레딧을 쓴다. 맥락을 많이 붙이고 여러 번 시킬수록 크레딧이 들 수 있으니, 팀에서 쓴다면 이 부분을 확인해 두자. 커스텀 스킬은 Starter 플랜에서도 쓸 수 있다고 릴리스 노트에 적혀 있다.
아직 확인되지 않은 것
- Specs의 가격과 베타 종료 일정. 공식 글에는 유료 플랜 오픈 베타라는 말만 있다.
- 파일 크기나 스펙 개수 같은 제한.
- 마크다운 문법의 지원 범위. 표나 체크리스트가 어디까지 되는지는 직접 열어 봐야 한다.
- 한국어 문서에서의 동작. 한글로 쓴 스펙을 에이전트가 얼마나 잘 따르는지는 따로 공개된 시험이 없다.
- 통합 디자인 시스템과 가이드라인이 어느 요금제에서 되는지.
그래서 지금은
기존 문서 하나를 스펙으로 끌어다 놓아 보자. 프로젝트 소개나 회의 정리처럼 이미 있는 .md 파일 하나면 된다. 새로 쓰기 전에, 있는 글이 캔버스 위에서 어떻게 보이는지부터 확인하는 게 가장 빠르다. 유료 플랜이 아니라면 아직 쓸 수 없으니 베타가 열릴 때를 기다리자.
"왜 이렇게 했는지"를 세 줄만 적어 두자. 시안 옆에 결정 이유, 버린 안, 아직 모르는 것을 적는다. 에이전트가 읽든 사람이 읽든 이 세 줄이 가장 쓸모 있다. 아직 풀리지 않은 질문을 따로 적는 습관은 피그마 리서처의 사례에서 가져왔다.
규칙은 규칙대로, 맥락은 맥락대로 나눠 쓰자. 색과 글자 같은 규칙은 DESIGN.md나 가이드라인에, 이번 작업의 배경은 스펙에 쓰면 섞이지 않는다. 에이전트에게 시킬 때도 어느 글을 읽혀야 하는지가 분명해진다.
쓰임별 AI 디자인 도구는 AI 디자인 툴에 모아 두었다.
출처: Introducing Specs: Markdown as a medium (Figma 블로그), Figma 릴리스 노트 (10월 16일 확인), TechCrunch.