$$config title: 220809, 웹 4 수업 자료 keywords: - 웹4 - 피그마 $$ # 페이지 정보 - 주소 : [to2.kr/dXK](https://to2.kr/dXK) - 클래스 : 웹 4 ## 강사 정보 - 강사 : 김민지 - 카카오톡 : [1:1 오픈채팅방, https://open.kakao.com/o/sfXHdiVd](https://open.kakao.com/o/sfXHdiVd) - 이름 설정 : 수업명/이름 --- ## 일정 ## 클론코딩 학생 위키 주소 - [김민지 님, 9499](https://slog.gg/p/9499) - [김범규 님, 9218](https://slog.gg/p/9218) - [김은비 님, 9188](https://slog.gg/p/9188) - [박선아 님, 9193](https://slog.gg/p/9193) - [방한솔 님, 9201](https://slog.gg/p/9201) - [신은경 님, 9497](https://slog.gg/p/9497) - [오세영 님, 9178](https://slog.gg/p/9178) - [이영지 님, 9498](https://slog.gg/p/9498) - [이혜빈 님, 9298](https://slog.gg/p/9298) - [이호원 님, 9214](https://slog.gg/p/9214) - [한태훈 님, 9215](https://slog.gg/p/9215) - [홍서우 님, 9212](https://slog.gg/p/9212) - [홍선기 님, 9217](https://slog.gg/p/9217) ## 1일차 ### FIGMA - [FIGMA](https://www.figma.com/) - 설치 및 회원가입 진행 - 단축키 - `V` : 이동 툴 - `F` : 프레임 툴 - `T` : 텍스트 툴 - `R` : 사각형 툴 - `Shift + G` : 그리드 보임/숨김 - `Space + drag` : 핸드 툴 - `Ctrl + +` : 확대 - `Ctrl + -` : 축소 - `Shift + 2` : 선택한 레이어 확대 - `esc` : 선택 취소 - `tab` : 다음 레이어 선택 - `Ctrl + G` : 그룹화 - `Ctrl + Shift + G` : 그룹/프레임 해제 - `Ctrl + Alt + G` : 프레임화 - `Alt` : 간격 확인 - `Alt + 레이어 드래그` : 레이어 복제 --- ## 2일차 ### FIGMA Community - figma 오픈소스, 플러그인, 위젯 등 다양한 파일을 공유하거나 설치할 수 있는 공간 - Plugin 추천 - `Iconify` : 아이콘 - `Material Design Icons` : 아이콘 - `Unsplash` : 무료 고화질 이미지 - `Blush` : 무료 일러스트 (커스텀 가능) - `Icons8 Background Remover` : 자동 누끼 - `Contrast` : 웹 접근성 기준에 적합한 색상 대비도 검사 --- ## 3일차 ### Style - 개념 - [링크](https://to2.kr/dDy) - 실습 - [링크](https://to2.kr/dXL) ### Material Design 타이포 가이드 - [Material Deisign Type scale generator](https://material.io/design/typography/the-type-system.html#type-scale) --- ## 4일차 ### Layout Grid - 레이아웃 그리드가 안 보일 때 - `Shift + G` : 레이아웃 그리드 보이기/숨기기 - 개념 - [링크](https://to2.kr/dDp) - 실습 - [링크](https://to2.kr/dXM) --- ## 5일차 ### 컴포넌트 - 개념 - [링크](https://to2.kr/dDI) - 실습 - [링크](https://to2.kr/dXN) --- ## 6일차 ### Variants - 개념 및 실습 - [링크](https://www.figma.com/file/ZnqEedGTdtqN7RkfgOG2Cg/FIGMA-Variants?node-id=0%3A1) --- ## 7일차 ### Auto Layout - 개념 - [링크](https://to2.kr/dDP) - 실습 - [링크](https://to2.kr/dYh) --- ## 8일차 - 1 ~ 7일차 복습 --- ## 9일차 - FIGJAM - 웹 디자인 모작 - [갓차워시몰 모작, FIGMA](https://to2.kr/dY3) --- ## 10일차 - 웹 디자인 모작 --- ## 11일차 - 웹 디자인 모작 --- ## 12일차 - 웹 디자인 모작 --- ## 13일차 - 웹 디자인 모작 --- ## 13일차 ### Prototype - 개념 - [링크](https://to2.kr/dDP) --- ## 14일차 ### Prototype --- ## 15일차 - 앱 디자인 모작 - [Gate26 모작, FIGMA](https://to2.kr/d1z) --- ## 16일차 - 앱 디자인 모작 --- ## 17일차 - 앱 디자인 모작 --- ## 18일차 - 앱 디자인 모작 --- ## 19일차 - 앱 디자인 모작