1Figma 핵심 기능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: 완성하기
2디자인을 위한 챗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 활용 방법
3컬러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로 컬러 팔레트 만들어보기
4폰트와 아이콘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 디자인하기
5레이아웃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. 최종 프로젝트: 랜딩 페이지 구성하기
6(프로젝트) 랜딩 페이지 클론 디자인하기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. 프로토타입 만들기
7챗GPT의 다양한 기능들8-1. 토픽 소개 8-2. 파일로 정보 제공하기 8-3. 이미지로 대화 나누기 8-4. 디자인 피드백 받아보기 8-5. 이미지 생성하기 8-6. 토픽 마무리
8AI로 이미지 만들기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. 원본 이미지 수정하기
9Photoshop과 AI로 이미지 다루기10-1. 포토샵 소개 10-2. 포토샵 설치 및 언어 설정 10-3. 포토샵 초기 설정 10-4. 작업 환경 이해하기 10-5. 레이어의 기본 개념 10-6. 선택 툴 활용 및 마스크 10-7. 스마트 오브젝트 10-8. 목업 이미지 만들기 10-9. 포토샵 AI 10-10. AI로 사진 편집하기
10UI 컴포넌트 사용하기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로 컴포넌트 추천받기
11(프로젝트) 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. 프로젝트 마무리: 최종 산출물 제출
12UI 디자인 기초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. 이후 예고
수강 대상
내배픽 요약
K-디지털 기초역량훈련은 제도상 전공과 학력을 보지 않습니다. 아래는 기관이 덧붙인 조건입니다.
디자인 경험이 없지만, 생성형 AI와 협업하여 UI 디자인 역량을 갖추고자 하는 비전공 청년
: 인공지능 도구의 보조를 받아 비전공자도 사용자 인터페이스(UI)를 기획하고 구성할 수 있는 실질적 역량을 확보하고자 하는 청년
UI 디자인 도구(Figma)와 생성형 AI를 활용한 실무형 디자인 역량을 갖춘 인재를 선호하는 기업에 취업을 희망하는 청년 구직자를 주요 대상으로 함. 특히 다음과 같은 특성을 지닌 청년층을 훈련대상자로 설정함:우대
조건 5개 더 보기
Figma를 처음 접하거나, 도구 활용 역량을 높이고 싶은 청년 입문자
: 디자인 툴이 낯선 상태에서도 기본 기능부터 실전 활용까지 체계적으로 익히며, 디지털 제품 디자인 실무에 필요한 도구 활용 능력을 기르고자 하는 청년
서비스 기획, 퍼블리싱, 마케팅 등 직무에서 UI 시안을 직접 구성할 수 있는 실무형 인재가 되고 싶은 청년
: 협업 과정에서 디자이너와 원활히 소통하고, 실무 요구에 맞는 화면 설계나 시안을 스스로 구성할 수 있는 기획·디자인 연계 능력을 키우고자 하는 청년
위 청년 구직자 외에도, 동일한 디지털 실무 역량을 강화하여 현업에 적용하거나 경력 개발 및 전환을 희망하는 재직자와 중장년층도 훈련 대상에 포함될 수 있음.
수강생 후기
피그마 프로그램의 사용방법과 폰트, 레이아웃,컬러등 디자인의 기초적인 전반에 대한 이론이 좋았고 프로젝트들을 직접 실시간으로 바로 적용해 볼수있어서 너무 좋았던 것 같아요~실무 디자인에 꼭 필요했던 내용이어서 유익했습니다.
코드잇이 다른 곳보다 강의 퀄리티가 좋다고 느꼈습니다. 뱃지 지급 등 강의를 듣는 도중에 소소한 재미를 주어 좋았습니다. 훈련 도중 전화 주셔서 어려움이 없냐고 물어봐주시고 잘 관리해 주셨습니다. 감사합니다.
피그마 피그마 하는 이유가 있음을 이 과정을 수강하며 배웠고 내용도 충실하고 학습진행도 원만하고 좋았습니다.
