Intro.
며칠 전에 스레드를 시작했다.
보통 정보성 게시물을 많이 올리는 것 같던데 난 그러진 않았다.
나는 엄청난 인사이트를 가진 사업가나 전문가도 아니고,
석사 박사를 한 것도 아니니까...
그냥 "열심히 AI 엔지니어 준비하는 대학생이에요"
"요즘 학생은 이런 생각 하고 요런거 공부한답니다"
같은 걸 보여주는 소소한 계정으로 키우려고 한다.
그래도 AI 엔지니어를 준비한다고 소개글에 걸어놔서
처음엔 AI에 관한 이야기만 하려고 했다.
그런데 며칠 동안 본인을 드러내고 다양한 의견을 나누는 분들을 보니
나도 진솔하게 내 여러 모습을 보여주고 싶었다.
공대생이 피그마를 쓸 줄 알면?
내 모습을 어떤 포스트로 보여줄까 고민을 좀 했는데,
김대현 하면 PPT니까? 가벼운 스타트로 내가 만들었던 장표를 올려봤다.
올릴 땐 별 생각 없었는데 감사하게도 좋아해주시는 분들이 있었다.
반응도 좋고 칭찬을 받아서 기분이 좋았는지
노하우를 공유해주겠다고 했다.
또 기다려주신다고까지 말씀하니까!!
늦은 시간이였지만, 생각난 김에 바로 실행했다.
피그마 프레젠테이션 디자인 규칙 뽑아내기
디테일한 노하우까지 하나하나 공유하면 좋겠지만,
일단은 피그마에서 내 장표에서 보이는 패턴먼저 분석해서
테스트도 할 겸 디자인 시스템용 프롬프트로 만들어봤다.
figma에 있는 프레임을 선택하면, 클로드에게 그 프레임을 분석시킬 수 있다.
그렇게 각 프레임이 만들어진 패턴을 모아서 디자인 규칙으로 만들어봤다.
내가 만든 작업물 중 괜찮은거 두어개를 골라서 추출했고,
각각 분석 결과를 합쳐서 하나의 마크다운 문서로 정리했다.
그렇게 여유롭게 패턴 추출하면서 스레드를 구경하던 중,
claude code to Figma 소개 영상을 보게 됐다.
왓?????
Claude Code에서 만들고 있는 것을 Figma로 직접 밀어 넣을 수 있습니다?
클로드에서 뭐 피그마 MCP 새로 나왔다고 해서
레이아웃 더 잘 읽어주는 정도의 수준인줄 알았다.
그래서 방금 피그마에서 프레임 누르면 클로드 데스크톱이 자동으로 읽어서 분석하는거 보고
음 확실히 작년보단 잘 인식하네 생각한거였는데...
코드로 작동하는 프로토타입을 구축한 다음 Figma 캔버스에 옮길 수 있다고???
정확한 확인을 위해 Figma에서 공식 문서를 읽어봤다.
Claude Code에서 Figma까지: 실제 운영 환경의 코드를 편집 가능한 Figma 디자인으로 변환하기
Claude Code 워크플로우를Figma에 직접 통합하면 개발자, 디자이너는 물론 취미로 코딩하는 사람까지도 실제 작동하는 UI를 브라우저에서 프로덕션, 스테이징 또는 로컬 환경 등 어떤 환경에서든 캡처하여 Figma 캔버스에서 편집 가능한 프레임으로 변환할 수 있습니다.
...
Figma Make를 사용하면 프롬프트를 작동 가능한 프로토타입으로 만들 수 있고, Copy design을 사용하면 디자인 작업을 더욱 효율적으로 수행할 수 있습니다. Claude Code to Figma는 Make에서 생성한 미리보기 이미지를 디자인 캔버스에 바로 가져와 추가적인 수정 작업을 진행할 수 있도록 지원합니다. 코드 우선 워크플로우에도 동일한 아이디어를 적용하여, 구축된 인터페이스를 편집 가능한 디자인 결과물로 변환합니다.
오호... 코드를 캔버스로 가져갈 수 있단 말이지?
물론, 코드로 프레젠테이션 만들기를 시도해보지 않았던 건 아니다.
(프레젠테이션처럼 보이게 1920px x 1080px 비율의 화면을 개발한다는 관점!)
공식 문서에 나와있는 것 처럼 figma make에서도 코드를 치고 캔버스로 보낼 순 있었지만,
모두가 경험했다시피 별로 좋은 결과를 얻기 힘들다.
로컬에 있는 파일을 올리는 방법이나, html.to.design 플러그인을 쓰는 방법도
항상 마음에 안드는 결과만 나왔었다.
그런데 클로드 코드에서 바로 디자인 캔버스를 편집할 수 있으면,
"코드로 프레젠테이션 만들기"를 다시 시도해 볼 수 있지 않겠는가?
GenSpark나 Gemini는 편집이 불편해요 ㅠㅠ
디자인 시스템을 프롬프트로 만든다면
GenSpark나 Gemini에서도 비슷한 결과를 뽑을 수는 있겠지만, 결정적인 문제가 있다!
도형을 선택했는데 이미지 바꾸기라고 뜨는 걸 보면 알 수 있듯,
요소들이 전부 비트맵으로 만들어져서 비율만 조정해도 도형이 깨진다.
(심지어 google slide는 사용성이 좋지 않다. powerpoint보다도 편집이 불편하다.)
font, color, round, margin, padding 같은 수치를
디자인 시스템으로 정리해봤자, 편집 자체가 막혀 있으면 의미가 없다.
애초에 생성 단계에서도 이미지 기반으로 요소를 만들어내니까
이 가이드라인을 높은 품질로 재현해 낼 수 없다는 점은 당연하고.
데일리 리포트라면 모를까, 발표나 보고서처럼 퀄리티가 중요한 자리에선
초안을 AI로 뽑더라도 다듬을 수 있어야 하는데
지금의 PPT 자동생성 AI들은 그게 구조적으로 안 된다.
(ppt 생성이 마음에 안든다는 뜻이지, Gemini 자체는 다양한 용도로 잘 쓰고 있다.)
AI로 자동 생성된 프레젠테이션이 편집까지 가능하다면?
그런데 클로드 코드를 활용해서 figma에 직접 프레임을 만들 수 있다면,
상기한 단점들이 모두 해결된다!
-
기본적으로 웹 개발을 하는 것 처럼 장표를 생성하니까,
여러 속성값들이 일관되게 적용된다. -
또, 캔버스로 옮길 때 그냥 사진으로 붙여넣기 하는 것이 아니라
Figma 캔버스에서 편집 가능한 프레임으로 변환할 수 있으니
추가적인 편집이 용이해지는 것은 당연하다.
그럼 더 이상 논의는 그만 하고!
바로 다음 글에서 내가 어떻게 이 아이디어를 구현했는지 적어보겠다.
"클로드 코드가 피그마에서 PPT를 만듭니다" 프로젝트 시작!
