이런 분께 추천합니다

디자인과 개발 사이의 번역 비용을 줄이고 싶은 분을 위한 실무 과정입니다.

• 시안을 전달할 때마다 설명이 길어지는 디자이너
• 디자인 시스템은 있지만 코드와 자꾸 어긋나는 팀
• 시안을 직접 코드로 옮겨 보고 싶은 프런트엔드 입문자
• 디자인 핸드오프를 자동화하고 싶은 분

이 강의에서 배우는 것

오토 레이아웃, 컴포넌트, 베리언트로 구조가 탄탄한 디자인 시스템을 만들고, MCP로 AI 코딩 도구에 연결해 코드로 옮깁니다.

• 오토 레이아웃으로 반응형 시안 만들기
• 컴포넌트와 베리언트로 재사용 가능한 UI 구성하기
• 변수로 색·간격·글자 크기를 한곳에서 관리하기
• Figma MCP를 연결해 AI가 시안을 읽게 하기
• 시안을 코드로 변환하고 결과 다듬기

수업은 이렇게 진행됩니다

작은 디자인 시스템을 하나 만들고, 그 시스템으로 실제 화면 두세 개를 코드까지 완성하는 흐름입니다.

• 수업마다 따라 만드는 피그마 파일 제공
• 연결 설정을 단계별 화면과 함께 안내
• AI가 틀리게 옮긴 부분을 찾는 점검표
• 시안과 결과 화면을 나란히 비교하는 리뷰

수강 전에 알아 두세요

피그마 계정과 코드 편집기가 필요합니다. 일부 기능은 요금제에 따라 사용할 수 있는 범위가 다릅니다.

• 피그마 기본 도구를 다뤄 본 경험을 권장합니다
• HTML·CSS를 몰라도 따라올 수 있도록 구성했습니다
• 도구 화면은 업데이트로 조금씩 달라질 수 있습니다

수강 후에는 이렇게 달라집니다

시안이 곧 코드의 출발점이 되는 작업 방식을 익힙니다.

• 핸드오프 설명 문서를 쓰는 시간이 줄어듭니다
• 디자인과 코드의 색·간격 기준이 하나로 맞춰집니다
• 팀에 디자인 시스템 운영 방식을 제안할 수 있습니다

이 강의만의 특징

디자이너와 개발자가 같은 기준을 보도록, 시안과 코드를 잇는 방식에 집중합니다.

• 변수로 색·간격 기준을 한곳에서 관리
• 시안 구조가 코드 구조로 이어지는 과정을 나란히 비교
• MCP 연결 오류가 났을 때 점검할 항목 정리
• 팀에 도입할 때 쓰는 체크리스트 제공

자주 묻는 질문

수강 전에 자주 받는 질문을 모았습니다.

Q. 개발 지식이 필요한가요?

아니요, 코드는 결과를 확인하는 정도로만 다룹니다.

Q. 어떤 AI 코딩 도구를 쓰나요?

MCP 연결을 지원하는 도구를 기준으로 안내합니다.

Q. 무료 피그마 계정으로도 가능한가요?

일부 기능은 요금제에 따라 제한이 있을 수 있습니다.