본 강의 자료는 '2025 경북소프트웨어마이스터고등학교 Figma/HTML/CSS' 수업을 위해 제작하였습니다.
- 01. 웹의 이해
- 02. 웹 1.0과 2.0
- 03. 프론트엔드, 백엔드, 풀스택
- 04. 디자인 트렌드의 역사
- 05. UI와 UX
- 06. 피그마란?
- 07. 피그마 시작하기
- 08. 도형과 텍스트
- 09. 프레임과 그룹
- 10. 실습 1: 명함 만들기
- 11. 실습 2: 배너 만들기
- 01. 폰트
- 02. 여백의 미
- 03. 컬러 팔레트
- 04. 시각적 계층 구조
- 05. 반응형 디자인
- 06. 앵커 포인트 (제약 조건)
- 07. 오토 레이아웃
- 08. 피그마 플러그인
- 09. 디자인에 유용한 웹사이트
- 10. 실습 1: 블로그 UI 디자인
- 11. 실습 2: 회원가입 폼 디자인
- 01. 웹 접근성
- 02. 와이어프레임
- 03. 벡터와 비트맵
- 04. SVG란?
- 05. 마스크, 유니온, 아웃라인 스트로크
- 06. 아이콘 만들기
- 07. 재사용 가능한 디자인
- 08. 전역 스타일 (컬러, 폰트)
- 09. 자주 사용되는 UI 컴포넌트
- 10. 컴포넌트 (Component)
- 11. 컴포넌트 세트 (Component Set)
- 12. 실습 1: 리스트 컴포넌트 만들기
- 13. 실습 2: 대시보드 UI 디자인
- 01. HTML이란?
- 02. CSS란?
- 03. Visual Studio Code
- 04. 개발자 도구
- 05. 프로토타입과 플로우
- 06. 실습 1: 프로토타입에 화면 전환과 애니메이션 넣기
- 07. 실습 2: 프로토타입에 화면 전환과 애니메이션 넣기
- 08. 실습 3: 컴포넌트 상태와 인터랙션 추가하기
- 09. 실습 4: Modal 창 띄우기
- 10. 실습 5: 쇼핑 페이지 따라 만들기
- 01. Figma 학생 인증으로 유료 기능 활성화하기
- 02. 다양한 상황에서의 시각적 밸런스
- 03. 접근성이 나쁜 UI/UX와 해결 방안
- 04. 시각적 계층 구조 잡기
- 05. Auto Layout을 적용해야하는 이유
- 06. 실습 1: Auto Layout 연습
- 07. Figma 변수(Variables) 활용하기
- 08. Figma 변수 타입(Generics) 활용하기
- 09. 실습 2: 다크/라이트 테마 디자인
- 10. 실습 3: 사진 뷰어 웹앱 디자인
- 1. Max/Min 설정
- 2. 복습 1: Smart Animate로 부드러운 애니메이션 만들기
- 3. 복습 2: 다양한 아이콘 디자인과 제작 규칙들
- 4. 실습 1: 아이콘팩 만들기
- 5. 디자인 시스템의 개념과 구축 방법
- 6. 효율적인 디자인 기획
- 7. 라이브러리란?
- 8. 실습 2: 라이브러리 만들기
- 9. 실습 3: 장바구니 페이지 만들기
- Etc. ChatGPT를 활용한 학습 가이드
- 1. Vibe-Coding이란?
- 2. MCP란?
- 3. Figma MCP
- 4. Copilot 설치 및 사용하기
- 5. Figma MCP 설치 및 사용하기
- 6. AI가 구현을 잘하게 유도하기
- 7. Git과 GitHub
- 8. GitHub에 내 코드 올리기
- 9. 실습 1: 랜딩 페이지 만들기
- 10. 실습 2: 계산기 만들기 1
- 11. 실습 2: 계산기 만들기 2
