AI와 함께 완성하는 UI·UX 실무

처음 시작하는
피그마 with AI

생성형 AI로 기획과 콘텐츠를 정리하고,
피그마로 웹·앱 UI와 프로토타입을 제작하는 실습 중심 교육

훈련과정처음 시작하는 피그마 with AI
훈련시간09:00 ~ 17:401일 7~8시간
모집정원20명재직자·실업자 대상
COURSE INFO

과정 기본 정보

과정명

처음 시작하는 피그마 with AI

활용도구

Figma, ChatGPT, Gemini

교육방향

AI를 활용해 기획과 콘텐츠를 정리하고, 피그마로 웹·앱 UI와 프로토타입을 제작하는 실습 중심 교육

훈련대상

피그마 입문자, 웹·앱 디자인에 관심 있는 재직자 및 실업자

KEY POINT

교육과정 핵심포인트

01

입문자도 완성할 수 있는 단계별 실습

디자인 기초부터 웹·앱 화면과 프로토타입까지 직접 제작하며 피그마의 기본 흐름을 익힙니다.

02

AI로 기획하고 피그마로 구현하는 방식

ChatGPT와 Gemini로 서비스 아이디어, 화면 구성, UX 문구와 콘텐츠를 정리한 뒤 피그마에서 구현합니다.

03

실무 핵심 기능과 최종 프로젝트 완성

Auto Layout, 컴포넌트, 반응형 디자인, 프로토타입을 단계별로 익히고 개인 최종 프로젝트를 완성합니다.

TARGET

교육과정 대상

피그마를 처음 배우는 분
웹사이트나 모바일 앱 화면을 직접 만들어보고 싶은 분
UI·UX 디자인을 어디서부터 시작해야 할지 막막한 분
ChatGPT와 Gemini를 디자인 기획과 콘텐츠 작성에 활용하고 싶은 분
개발자·기획자·마케터로서 디자인 협업 흐름을 경험하고 싶은 분
FEATURE

교육특징

01

입문자를 위한 실습형 과정

버튼, 카드, 입력창, 웹페이지 화면을 직접 만들며 피그마의 기본 사용법을 익힙니다.

02

AI와 함께하는 디자인 기획

서비스 아이디어와 사용자, 화면 구성을 구체화하고 UX 문구와 콘텐츠를 작성합니다.

03

매 회차 결과물 제작

기본 UI, 웹페이지 섹션, 반응형 화면, 프로토타입, 디자인 시스템을 결과물로 완성합니다.

04

최종 프로젝트·포트폴리오

Desktop·Tablet·Mobile 화면과 프로토타입을 하나의 프로젝트로 정리합니다.

TOOLS

주요 활용도구

기획·콘텐츠·디자인 제작 단계에 맞춰 피그마와 생성형 AI 도구를 함께 활용합니다.

ChatGPT

서비스 주제와 사용자 요구, 메뉴 구조, UX 문구와 프로젝트 소개문 작성

Gemini

디자인 아이디어 확장, 콘텐츠 구성과 사용자 흐름 검토, 개선 방향 정리

Figma

Frame, Auto Layout, Component, Variants, Prototype을 활용한 웹·앱 UI 제작

CURRICULUM

5일 완성 커리큘럼

피그마 기초부터 반응형 UI·UX 프로젝트 완성까지 단계별로 학습합니다.

DAY01
Figma 기초 이해 & Auto Layout

피그마 기본 기능과 오토 레이아웃

  • Figma 인터페이스 구조
  • Frame / Section 개념
  • 기본 도형 및 텍스트 활용 실습
  • Auto Layout 개념 및 구조
  • Padding / Spacing 설정
  • 카드 및 버튼 UI 제작
RESULT 카드·버튼 UI

피그마 기본 화면 구성

DAY02
컬러·타이포 시스템 & 컴포넌트

스타일 시스템과 재사용 UI 제작

  • 웹 타이포그래피 이해
  • 컬러 시스템 구성
  • 스타일 등록
  • Component 개념 이해
  • Instance 활용
  • 버튼 및 입력창 UI 제작
  • Hero 영역 제작
  • 카드 섹션 및 CTA 영역 구성
RESULT UI 컴포넌트

컬러·타이포 시스템

DAY03
프로토타입 제작 & UX 구조 설계

사용자 흐름과 반응형 화면 설계

  • Prototype 기능 활용
  • Smart Animate 적용
  • 인터랙션 구현
  • 정보구조(IA) 이해
  • 사용자 흐름 설계
  • 해상도별 설계 기준과 Grid 시스템
  • Desktop → Mobile 반응형 변환 실습
RESULT 프로토타입

반응형 웹 화면

DAY04
디자인 시스템 구축 & 협업

재사용 가능한 UI 시스템 구축

  • Atomic Design 이해
  • 컴포넌트 시스템 정리
  • UI 재사용 구조 설계
  • Inspect 기능 활용
  • Export 설정
RESULT 디자인 시스템

개발 협업용 파일

DAY05
최종 프로젝트 제작

웹·앱 UI 프로젝트 완성

  • 주제 선정 및 기획 정리
  • 와이어프레임 설계
  • Desktop 디자인 제작
  • Tablet / Mobile 반응형 적용
  • 컴포넌트 정리
  • 프로토타입 연결
  • 최종 파일 정리
RESULT 최종 프로젝트

포트폴리오 활용

※ 커리큘럼의 세부 주제와 결과물은 수업 진행 상황, 수강생 수준, 활용 도구 업데이트 등에 따라 일부 조정될 수 있습니다.

OUTCOME

수강 후 기대효과

01피그마 인터페이스와 기본 UI 제작 흐름 이해
02Auto Layout과 컴포넌트를 활용한 재사용 구조 설계
03Desktop·Tablet·Mobile 반응형 화면 제작
04클릭과 화면 전환이 가능한 프로토타입 제작
05ChatGPT·Gemini 기반 기획·UX 문구·디자인 개선
06최종 프로젝트 정리 및 포트폴리오 활용
NOTICE

안내사항

※ 수업 진행 중 피그마 및 AI 도구의 무료 서비스 가입이 필요할 수 있습니다.

※ 무료 가입으로도 실습이 가능하도록 안내하나, 서비스 정책이나 기능 업데이트에 따라 사용 범위가 달라질 수 있습니다.