채널톡 아이콘

디자이너, 프론트엔드 개발자를 위한 AI Readable한 Figma 활용 A to Z

Figma 기본기부터 AI를 활용한 디자인/개발 프로세스를 가속화시켜줄 수 있는 AI Readable한 디자인 시스템을 구축하고 활용하는 프로덕트 빌딩 전체 과정을 A to Z로 다룰 예정입니다.

3명 이 수강하고 있어요.

난이도 중급이상

수강기한 무제한

피그마
피그마
피그마공식파트너
피그마공식파트너
ai디자인
ai디자인
디자인시스템
디자인시스템
핸드오프
핸드오프
피그마
피그마
피그마공식파트너
피그마공식파트너
ai디자인
ai디자인
디자인시스템
디자인시스템
핸드오프
핸드오프

수강 후 이런걸 얻을 수 있어요

  • AI와 개발자가 정확히 해석하는 Figma 디자인 시스템의 네이밍, 계층, 오토 레이아웃, 토큰, 문서화 규칙을 설계할 수 있습니다.

  • GitHub Primer와 shadcn/ui를 Figma로 분석하고, 우리 팀의 디자인 시스템에 적용할 기준을 수립할 수 있습니다.

  • AI가 생성한 화면과 코드를 진단하고, Agent skill과 체크리스트로 반복 오류를 교정할 수 있습니다.

  • Notion, FigJam Agent, Figma Make, Figma Design을 연결해 기획부터 화면 구현까지 미니 스프린트를 수행할 수 있습니다.

  • Dev Mode와 MCP를 활용해 디자인 시스템을 코드 생성 도구에 연결하고 결과물을 리뷰할 수 있습니다.

  • 디자이너와 프론트엔드 개발자가 토큰, 컴포넌트, 핸드오프 기준을 공유하는 협업 프로세스를 구축할 수 있습니다.

AI가 그린 화면이 "우리 것" 같지 않은 이유

대 AI 시대, 프롬프트 한 줄이면 화면 초안이 나옵니다.

그런데 뜯어 보면 버튼 높이가 제각각이고, 색상은 토큰을 무시하고, 개발자는 "이거 어떤 컴포넌트예요?"라고 되묻습니다. 같은 명령을 다섯 번 실행하면 다섯 개의 다른 결과가 나옵니다.

문제는 AI의 실력이 아닙니다. AI가 읽을 수 없는 디자인 시스템이 문제입니다.

사람 눈에는 잘 정돈된 시스템이라도, 데이터의 구조 자체가 기계에게 읽히지 않으면 AI는 매번 추측으로 일합니다. 개발자도 마찬가지입니다.

이 강의는 그 시스템을 AI가 읽을 수 있게 다시 짓는 방법을 다룹니다. 새로 만드는 게 아니라, 이미 있는 시스템을 고치는 방법입니다.


이 강의는 두 직군을 위한 강의입니다

디자인 시스템은 디자이너가 만들고 개발자가 소비하는 것이 아니라, 두 직군이 같은 규칙으로 읽고 쓰는 것이어야 합니다.

실무 디자이너 또는 학생이라면 디자인 시스템을 만들어 봤거나 운영 중인데, AI 결과물이 시스템과 따로 노는 이유를 구조적으로 해결하고 싶은 분.

프론트엔드 개발자라면 디자이너가 넘긴 Figma 파일을 코드로 옮기는 협업 과정에서 토큰과 네이밍이 맞지 않아 되묻는 일이 반복되는 분.

1인 크리에이터라면 기획·디자인·개발을 혼자 다 하면서, AI 에이전트를 실제 워크플로우에 연결해 속도를 내고 싶은 분.


이 강의에 대해서


1. 손으로 먼저, 그다음 AI에게

AI가 만든 결과물이 좋은지 나쁜지는, 직접 만들어 본 사람만 판단할 수 있습니다.
그래서 이 강의는 실습마다 순서가 정해져 있습니다. 버튼 컴포넌트를 직접 만들어 본 다음 AI에게 컴포넌트 세트를 시키고, Variable로 모드를 직접 다뤄 본 다음 AI에게 다크 테마를 맡깁니다.

이번 강의에서는 Figma의 기본기와 AI 활용을 동시에 다룰 예정입니다.


2. 왜 결과가 매번 다른지, 직접 겪어봅니다

AI에게 10번 명령하면, 결과는 10번 모두 매번 다르게 나옵니다.
그 편차가 왜 발생하는지, 주로 어디에서 발생하는지 찾아내는 것이 AI 전환의 출발점입니다. 원인을 손으로 짚어 본 다음에야 "AI Readable"이 무슨 뜻인지 이해됩니다.


3. 만드는 것보다 판단하는 법을 배웁니다

이 강의는 프로덕트디자인 분야에서 지속적으로 디자인 시스템과 화면 디자인을 고도화하기 위한 방법을 함께 다루고 있습니다.

진단 체크리스트를 만들고, 검증 루프를 스킬로 등록해 돌리고, 같은 명령을 다섯 번 실행해 편차를 측정합니다. 편차가 큰 지점이 곧 내 시스템의 구멍입니다. 그 구멍을 메우고 다시 돌립니다.

체크리스트는 스프린트를 거치며 계속 고도화됩니다. 강의가 끝나면 내가 만든 시스템에 그대로 쓸 수 있는 진단 도구가 손에 남습니다.


4. 디자인 시스템이 코드가 되는 순간

Dev Mode에서 핸드오프 구조를 만들고, Dev Mode MCP로 AI가 Figma 파일을 직접 읽게 합니다.

Code syntax를 심어둔 토큰과 그렇지 않은 토큰이 어떻게 다른 코드를 만드는지 눈으로 비교합니다. 내가 정한 규칙을 AI가 실제로 읽는다는 것을 확인하는 지점입니다.

기업 실무 팀에서 실제로 핸드오프에 활용하는 Code Connect에 대해서도 짧게 알아볼 예정입니다.


5. 마지막 파트에서는 여러가지 AI를 실무에서 어떻게 쓰고 있는지 시뮬레이션해봅니다.

섹션 6은 미니 스프린트입니다. GitHub 오픈소스를 Figma로 가져오고, FigJam Agent로 기획하고, 디자인 시스템으로 화면을 만들고, Figma Make로 프로토타입을 뽑고, 핸드오프를 작성해 코드로 옮깁니다.

개별 기능을 배우는 게 아니라, AI 조직이 실제로 어떤 식으로 일하는지를 마지막 파트에서 직접 경험합니다.



강의를 마치면

  • 내 팀의 디자인 시스템을 진단 체크리스트로 점검하고, 무엇부터 고칠지 우선순위를 정할 수 있습니다

  • Foundation부터 Component까지 토큰 구조를 원칙에 따라 설계하고, 에이전트로 구축할 수 있습니다

  • AI 결과물의 편차를 측정해 원인을 시스템 결손으로 역추적하고, 규칙을 보강할 수 있습니다

  • Dev Mode와 MCP로 디자인에서 코드로 이어지는 핸드오프를 주도할 수 있습니다

  • 기획부터 프로토타입, 코드화까지 하나의 워크플로우로 완주할 수 있습니다

  • 강의가 끝난 뒤에도 스스로 학습을 이어가는 루틴을 갖게 됩니다


이렇게 진행됩니다

미션
4~5개 수업마다 미션이 있습니다. 결과물이나 생각을 댓글로 남기면 같은 실습을 하는 다른 수강생과 피드백을 주고받을 수 있습니다. 네이밍 규칙처럼 정답이 하나가 아닌 주제, AI가 잘못한 지점처럼 실패를 나누는 주제를 중심으로 구성했습니다.

실습 자료
Notion 워크스페이스와 GitHub 리포지토리로 제공합니다. 모든 실습에 시작 파일이 있어 중간에 놓쳐도 이어서 따라올 수 있습니다.

제공 자료
AI Readable 진단 체크리스트, 실습용 디자인 시스템 파일, 자가 학습 루틴 운영표

커뮤니티
네이버 카페와 오픈 채팅에서 질문하고 결과물을 공유할 수 있습니다.


수강 전 확인해 주세요

선수 지식

  • Figma에서 프레임·오토 레이아웃·컴포넌트를 직접 만들어 본 경험.
    섹션 1로 기초 지식을 학습할 수는 있지만, Figma 이해도에 따라 이번 강의로 기초를 익히기에 충분하지 않을 수 있습니다.

  • 코드를 직접 작성하지 않아도 됩니다. 코드 변환은 AI가 하고, 우리는 읽고 판단합니다.

수강 환경

  • Professional 또는 Edu 이상의 Figma 유료 계정 Full seat가 필요합니다.

  • 기업 플랜(Organization 이상) 전용 기능은 강사 시연으로만 진행합니다.

  • GitHub 계정 (무료), Notion 계정 (무료 플랜)

  • Claude 등 AI 코딩 도구 (섹션 5~6 실습)

  • 데스크톱 환경 (Windows / macOS)

Figma 계정은 필수입니다. 기타 준비물들은 무료로 공개된 준비물 안내를 먼저 확인해 주세요.


누가 만들었나요

단군소프트는 Figma 공식 채널파트너로, 기업 디자인·개발 조직의 Figma 도입과 Figma 온보딩, 디자인 시스템 컨설팅을 지원해 왔습니다.

강의를 진행하는 이주한 매니저는 단군소프트에서 UX/UI 디자인 어드보케이트로 업무를 수행하고 있습니다.
현장에서 같은 디자인 시스템을 두고 디자이너와 개발자가 서로 다르게 읽는 문제를 반복해서 마주했고, 그 해법을 이 강의의 순서와 실습으로 옮겼습니다.

이런 분들께
추천드려요

학습 대상은
누구일까요?

  • 디자인 시스템을 운영 중이며 AI가 생성한 결과물의 품질과 일관성을 높이고 싶은 3년 차 이상 디자이너

  • Figma 파일을 코드로 옮길 때 토큰, 컴포넌트, 네이밍 불일치를 반복적으로 수정하는 프론트엔드 개발자

  • 기초 Figma 사용을 넘어 오픈소스 디자인 시스템을 분석하고 실무 수준으로 개선하고 싶은 중급 학습자

  • Figma Make, FigJam Agent, Dev Mode MCP를 실제 프로젝트에 연결해 생산성을 높이고 싶은 디자이너·개발자

  • 기획·디자인·개발을 혼자 수행하며 AI 기반 디자인 시스템과 코드 변환 워크플로를 구축하려는 1인 크리에이터

선수 지식,
필요할까요?

  • Figma의 기본기를 가지고 계신 분 (섹션 1은 실습을 따라오기 위한 워밍업 수준이며, 기초 입문 강의 수준으로 자세하게 구성되지 않습니다.)

  • AI 툴에 대한 기본 지식이 있으신 분

  • 수업 진행 시 ChatGPT, Figma 유료 계정을 사용합니다.

안녕하세요
단군소프트입니다.

안녕하세요, 단군소프트입니다.

단군소프트는 2002년부터 국내 IT 기업과 함께해 온 소프트웨어 솔루션 파트너입니다.

고객에게 어떤 도구가 필요한지 함께 고민하는 컨설팅부터 솔루션 구축과 기술지원, 그리고 조직 전체가 실제로 쓸 수 있게 만드는 B2B 교육까지 소프트웨어와 관련된 모든 일을 고객과 함께 하고 있습니다.

Figma, Protopie, JetBrains, GitHub, Microsoft, Adobe, Autodesk, Docker를 비롯한 거의 모든 분야의 소프트웨어 다루고 있습니다. 특정된 몇 가지 제품에만 특화된 회사가 아닌, 기업의 작업 환경 전체를 놓고 어떤 조합이 맞는지 설계해 왔고, 각 개발사로부터 최상위 등급 파트너십을 인정받아 지금은 APAC 지역 총판 비즈니스를 통해 글로벌 기업으로 도약하고 있습니다.

국내 대부분의 대기업에 솔루션을 제공하고 소통하면서 현장에서 반복해서 마주친 문제들과 해법을 이제 더 많은 분들과 나누려 합니다.

단군소프트 공식 유튜브: https://www.youtube.com/@tangunsoft
단군소프트 공식 인스타그램: https://www.instagram.com/tangunsoft/
단군소프트 공식 링크드인: https://www.linkedin.com/company/tangunsoft/posts/?feedView=all

더보기

공동 지식공유자

수강평

아직 충분한 평가를 받지 못한 강의입니다.
모두에게 도움이 되는 수강평의 주인공이 되어주세요!

비슷한 강의

같은 분야의 다른 강의를 만나보세요!

얼리버드 할인 중

월 ₩33,880

5개월 할부 시

30%

₩242,000

₩169,400

평생교육이용권 지원 강의