개강일 지남
피그마(Figma)와 AI로 쉽게 배우는 UI 디자인
코드잇 · 41회차 · 서울 강남구
디자인K-디지털기초
프로그램 요약
- 수업일정
- 2026.08.04 ~ 2026.09.01약 1개월
- 모집정원
- 100명
- 총 시간
- 미표기
- 학습장소
- 서울서울특별시 강남구 역삼로 552 (대치동 KM 빌딩)온라인
- 강의장
- 7층 703호 중 일부(대치동)
- 수강료
- 미공개 상담 시 확인
출처 · 고용24 등록값 · 기관 표기분은 별도 표시
어떤 분이 수강하면 좋을지
- ✓전공·학력 무관 — K-디지털 기초역량은 제도상 전공을 보지 않습니다
- ✓▶ UI 디자인 도구(Figma)와 생성형 AI를 활용한 실무형 디자인 역량을 갖춘 인재를 선호하는 기업에 취업을 희망하는 청년 구직자를 주요 대상으로 함. 특히 다음과 같은 특성을 지닌 청년층을 훈련대상자로 설정함: 1. Figma를 처음 접하거나, 도구 활용 역량을 높이고 싶은 청년 입문자 : 디자인 툴이 낯선 상태에서도 기본 기능부터 실전 활용까지 체계적으로 익히며, 디지털 제품 디자인 실무에 필요한 도구 활용 능력을 기르고자 하는 청년 2. 디자인 경험이 없지만, 생성형 AI와 협업하여 UI 디자인 역량을 갖추고자 하는 비전공 청년 : 인공지능 도구의 보조를 받아 비전공자도 사용자 인터페이스(UI)를 기획하고 구성할 수 있는 실질적 역량을 확보하고자 하는 청년 3. 서비스 기획, 퍼블리싱, 마케팅 등 직무에서 UI 시안을 직접 구성할 수 있는 실무형 인재가 되고 싶은 청년 : 협업 과정에서 디자이너와 원활히 소통하고, 실무 요구에 맞는 화면 설계나 시안을 스스로 구성할 수 있는 기획·디자인 연계 능력을 키우고자 하는 청년 ※ 위 청년 구직자 외에도, 동일한 디지털 실무 역량을 강화하여 현업에 적용하거나 경력 개발 및 전환을 희망하는 재직자와 중장년층도 훈련 대상에 포함될 수 있음. ※ 노동시장 참여자가 디지털 역량 부족으로 노동시장 진입 및 적응에 어려움을 겪지 않도록 디지털 기초역량 개발을 지원하는 훈련으로, 훈련 수강을 위해 특별한 선수학습/기취득자격/경력사항이 요구되지 않음
출처 · 기관 랜딩페이지 · 제도 요건
커리큘럼
고용24 등록 교과목 14개 보기
- 교과목단원명
- 2. Figma 핵심 기능2-1. 토픽 소개 2-2. codebnb: 프로젝트 소개 2-3. 베리어블과 스타일 (Variables and Styles) 2-4. 베리어블 실습 2-5. 셀렉션 컬러 (Selection Colors) 2-6. 셀렉션 컬러 실습 2-7. codebnb: 랜딩 페이지 2-8. 컴포넌트 (Components) 2-9. 컴포넌트 실습 2-10. codebnb: 숙박 목록 페이지 I 2-11. 컴포넌트 심화: 네스팅 2-12. 컴포넌트 네스팅 실습 2-13. 스마트 셀렉션 (Smart Selection) 2-14. 스마트 셀렉션 실습 2-15. 오토 레이아웃 (Auto Layout) I 2-16. 오토 레이아웃 (Auto Layout) II 2-17. 오토 레이아웃 실습 2-18. codebnb: 숙박 목록 페이지 II 2-19. 컨스트레인트 (Constraints) 2-20. 컨스트레인트 실습 2-21. codebnb: 숙박 상세 페이지 2-22. 플러그인 (Plugins) 2-23. codebnb: 콘텐츠 채우기 2-24. 커뮤니티 소개 2-25. 그라디언트 (Gradient) 2-26. 그라디언트 실습 2-27. 이펙트 (Effects) 2-28. 이펙트 실습 2-29. codebnb: SNS 광고 이미지 2-30. 프로토타입 (Prototype) 2-31. 프로토타입 실습 2-32. codebnb: 완성하기
- 3. 디자인을 위한 챗GPT 기초3-1. 토픽 소개 3-2. 챗GPT, 새로운 시대 3-3. AI의 발전, 그리고 챗GPT 3-4. 챗GPT 가입하고 대화 나눠보기 3-5. 거짓말을 할 수 있는 챗GPT 3-6. 중요한 정보 안전하게 지키기 3-7. 챗GPT 사용법 퀴즈 3-8. 말을 잘하기 위해서는 3-9. 챗GPT에게 원하는 답을 얻는 방법 3-10. 대화 기술 퀴즈 3-11. 챗GPT 활용 방법
- 4. 컬러4-1. 토픽 소개 4-2. 수강 가이드 4-3. 컬러의 표현 방식 4-4. HSB와 HEX값 4-5. 컬러 간의 대비 4-6. 컬러 팔레트 소개 4-7. 뉴트럴 컬러 4-8. 뉴트럴 컬러 적용하기 4-9. 알람 설정 UI 4-10. 프라이머리 컬러 4-11. 프라이머리 컬러 Cheatsheet 4-12. 프라이머리 컬러 고르기 4-13. AI로 컬러 고르기 4-14. 프라이머리 컬러 적용하기 4-15. 랜딩/구독 페이지 UI 4-16. 프로젝트: 쇼핑몰 UI 4-17. 컬러 베리에이션 4-18. 컬러 베리에이션 Cheatsheet 4-19. 컬러 베리에이션 적용하기 4-20. 숙소 선택 UI 4-21. 세컨더리 컬러 4-22. 세컨더리 컬러 Cheatsheet 4-23. 세컨더리 컬러 적용하기: 의미 전달 4-24. 유저 UI 4-25. 세컨더리 컬러 적용하기: 정보 구분 4-26. 캘린더 UI 4-27. 컬러 사용 시 주의점 4-28. 최종 프로젝트: 대시보드 UI 4-29. AI로 컬러 팔레트 만들어보기
- 5. 폰트와 아이콘5-1. 토픽 소개 5-2. 수강 가이드 5-3. 폰트 이해하기 5-4. 폰트 선택하기(한 개의 폰트) 5-5. 폰트 선택하기(폰트 체크리스트) 5-6. 텍스트의 속성과 스타일링 원리 (크기, 두께, 컬러) 5-7. 텍스트의 속성과 스타일링 원리(행간, 자간) 5-8. 텍스트 스타일링하기 5-9. 블로그 목록 UI 텍스트 스타일링하기 5-10. 폰트 Cheatsheet 5-11. Cheatsheet로 텍스트 스타일링하기 5-12. 블로그 상세 UI 개선하기 5-13. 아이콘 이해하기 5-14. 좋은 아이콘의 조건: 단순함과 직관성 5-15. 좋은 아이콘 판별하기 5-16. 좋은 아이콘의 조건: 일관성 5-17. 아이콘 라이브러리 5-18. 아이콘 라이브러리 사용하기 5-19. 메일 서비스 UI 아이콘 채우기 5-20. 아이콘 라이브러리 목록 5-21. 쇼핑몰 UI 만들기 5-22. 메신저 어플리케이션 UI 5-23. 최종 프로젝트: 음악 플레이어 UI 디자인하기
- 6. 레이아웃6-1. 토픽 소개 6-2. 수강 가이드 6-3. 영역 중심으로 바라보기 6-4. 영역 시각적으로 드러내기 6-5. 기술 1: 여백 6-6. 여백을 주는 방법 6-7. UI에 여백 적용하기 6-8. 여백 실습 I 6-9. 여백 실습 II 6-10. 기술 2: 정렬 6-11. 요소 간의 정렬 6-12. 영역에서의 정렬 6-13. 정렬 실습 I 6-14. 정렬 실습 II 6-15. 기술 3: 크기 6-16. 요소들의 최적의 크기 6-17. 크기 Cheatsheet 6-18. 영역의 크기 6-19. 크기 실습 I 6-20. 크기 실습 II 6-21. 웹페이지의 레이아웃 6-22. 최종 프로젝트: 랜딩 페이지 구성하기
- 7. (프로젝트) 랜딩 페이지 클론 디자인하기7-1. 프로젝트 소개 7-2. 수강 가이드 7-3. Calendly 클론 디자인 7-4. 작업 계획하기 7-5. 컬러 준비하기 7-6. 폰트 준비하기 7-7. 레이아웃 준비하기 7-8. 히어로 섹션 만들기 7-9. 섹션 만들기 I 7-10. 섹션 만들기 II 7-11. 섹션 만들기 III 7-12. 프로토타입 만들기
- 8. 챗GPT의 다양한 기능들8-1. 토픽 소개 8-2. 파일로 정보 제공하기 8-3. 이미지로 대화 나누기 8-4. 디자인 피드백 받아보기 8-5. 이미지 생성하기 8-6. 토픽 마무리
- 9. AI로 이미지 만들기9-1. 토픽 소개 9-2. 인터페이스 익히기 9-3. 이미지 생성하기 I: Text to Image 9-4. 나의 첫 AI 이미지 만들기 9-5. 이미지 생성하기 II: Image to Image 9-6. 나만의 아바타 만들기 9-7. AI로 이미지 수정하기: Inpainting, Outpainting 9-8. 내 아바타의 배경 이미지 만들기 9-9. Negative Prompt 활용법 9-10. Prompt 작성법 9-11. Prompt Elements 가이드 9-12. 알아 두면 좋은 레오나르도 AI 기능 9-13. Text to Image 활용하기 9-14. 소설 속 장면을 이미지로 만들기 9-15. Image to Image 활용하기 9-16. 원본 이미지 수정하기
- 10. Photoshop과 AI로 이미지 다루기10-1. 포토샵 소개 10-2. 포토샵 설치 및 언어 설정 10-3. 포토샵 초기 설정 10-4. 작업 환경 이해하기 10-5. 레이어의 기본 개념 10-6. 선택 툴 활용 및 마스크 10-7. 스마트 오브젝트 10-8. 목업 이미지 만들기 10-9. 포토샵 AI 10-10. AI로 사진 편집하기
- 11. UI 컴포넌트 사용하기11-1. 토픽 소개 11-2. UI 컴포넌트와 디자인 패턴 11-3. UI 컴포넌트의 특징 11-4. UI 컴포넌트의 상태 11-5. UI 컴포넌트 퀴즈 11-6. 사용자의 행동 유도하기 11-7. 퀴즈: 버튼 11-8. 사용자로부터 정보 받기 I 11-9. 퀴즈: 체크박스, 라디오 버튼, 토글 스위치 11-10. 사용자로부터 정보 받기 II 11-11. 퀴즈: 텍스트 필드 11-12. 퀴즈: 로그인 페이지 11-13. 사용자에게 정보를 전달하기 I 11-14. 퀴즈: 다이얼로그, 배너, 스낵바 11-15. 사용자에게 정보를 전달하기 II 11-16. 퀴즈: 캐러셀, 페이지네이션 11-17. 사용자에게 정보를 전달하기 III 11-18. 퀴즈: 아코디언, 드롭다운 11-19. 사용자가 탐색하게 하기 11-20. 퀴즈: 탭, 브레드크럼, 내비게이션 바 11-21. UI 컴포넌트 Cheat Sheet 11-22. AI로 컴포넌트 추천받기
- 12. (프로젝트) Figma와 AI로 여행 서비스 리디자인하기12-1. 토픽 소개하기 12-2. 수강 가이드 12-3. 프로젝트의 시작: 디자인 요청서 12-4. 기존 웹사이트 디자인 확인하기 12-5. 기존 웹사이트 디자인 분석하기 12-6. AI로 디자인 분석하기 12-7. 레퍼런스 조사하기 12-8. 두 가지 디자인 시안 제작하기 12-9. 첫 번째 디자인 시안 모범 답안 12-10. 두 번째 디자인 시안 모범 답안 12-11. AI로 시안 확정받기 12-12. AI로 피드백 받고 디자인 디벨롭하기 12-13. 확정된 디자인 시안으로 모바일 디자인 만들기 12-14. 프로젝트 마무리: 최종 산출물 제출
- 1. UI 디자인 기초1-1. 토픽 소개 1-2. UI란? 1-3. Figma 소개 1-4. 디자인 환경 구성하기 1-5. 기본 기능 I 1-6. 기본 기능 II 1-7. 기본 기능 III 1-8. Figma 단축키 1-9. 디지털 명함 만들기 1-10. 레이어 1-11. 그룹과 프레임 1-12. 안내선 1-13. 스킬 UI 만들기 1-14. 나만의 이력서 만들기 1-15. 이력서 내보내기 1-16. 좋은 UI 디자인 1-17. UI 디자인 원칙들 1-18. 일관성 1-19. 일관성: 회원가입 페이지 1-20. 일관성: 구독 페이지 1-21. 위계 1-22. 위계: 회원가입 페이지 1-23. 위계: 구독 페이지 1-24. 이후 예고
- 총 훈련시간70 시간
출처 · 고용24
지원 혜택
기관이 공개한 혜택 정보가 없습니다. 상담에서 확인하세요.
출처 · 기관 랜딩페이지 · 훈련장려금은 제도
지원 절차
기관이 공개한 절차 정보가 없습니다. 지원하면 상담에서 안내받습니다.
출처 · 기관 랜딩페이지 · 기관마다 다릅니다
자주 묻는 질문
비전공자도 지원할 수 있나요?
K-디지털 기초역량은 제도상 전공·학력을 보지 않습니다. 다만 기관이 밝힌 훈련 대상이 있어 위 「어떤 분이 수강하면 좋을지」를 함께 확인하세요.
내일배움카드가 꼭 있어야 하나요?
지원 시점에 없어도 됩니다. 상담 단계에서 발급을 진행합니다. 다만 수강신청은 카드가 있어야 마칠 수 있습니다.
선발 절차가 있나요?
기관이 공개한 절차에서 별도 시험·전형은 확인되지 않았습니다. 상담 후 수강신청으로 이어집니다.
예전에 국비 교육을 들었는데 또 되나요?
중복수강 제한이 있을 수 있습니다. 최근 수료 이력이 있으면 상담 단계에서 먼저 확인해야 합니다.
출처 · 제도 요건 · 과정 데이터로 답이 채워지는 질문만
기관 랜딩페이지가 확인되지 않았습니다. 아래 정보는 고용24 등록값입니다.
고용24 2026-08-14 기준 · 매일 갱신
