인프런 업데이트 소식 🔨👷🏼‍♂️
SVG 마스터

SVG 마스터

(5개의 수강평)

127명의 수강생

27,500원

평생
초급, 중급
수료증
37회 수업, 총 4시간 21분
위시리스트 추가

이런 걸 배울 수 있어요

  • 웹페이지에서 SVG 그래픽 제대로 사용하기
  • 자바스크립트를 이용해 인터랙션이 있는 SVG 만들기
  • Font Awesome같은 아이콘폰트 만들기

현대의 웹페이지 그래픽 표현에 널리 쓰이는 벡터 그래픽 포맷인 SVG를 처음부터 파헤쳐보는 수업입니다.

기본적인 SVG의 개념과 사용법부터 애니메이션, 여러가지 효과들, 스크립트 인터랙션까지 다루어 봅니다.

SVG 공부해 보려다가 너무 방대하고 산발적인 자료에 손 놓으셨던 분들은 이 수업으로 싹 정리해 보세요.

👍SVG 조작에는 몇몇 기본적인 CSS와 자바스크립트 개념들이 필요합니다. 익숙하지 않은 분들을 위해 "보너스 강의" 섹션에는 학습을 원활하게 진행하기 위한 개념정리 영상을 넣어 두었습니다.

👍처음부터 자바스크립트 개념정리가 필요하신 분은, 제 유튜브 채널의 자바스크립트 기초 영상들을 함께 공부하셔도 좋습니다.

https://www.youtube.com/playlist?list=PLe9WXHRkq9p0k7eF0TrIHgL5Cy9khHWnX

👍모든 예제의 소스코드를 다운로드 받아 편하게 공부하실 수 있습니다 (각 섹션의 첫번째 강의마다 다운로드할 수 있는 버튼이 있습니다).

이런 강좌도 있어요 💁🏻‍♂️

[인터랙티브 웹 개발 제대로 시작하기] 바로가기
화려한 웹사이트들 처럼 창의적인 UI 인터랙션을 구현하는 과정을 직접 보며 학습해보세요 :D

수강 대상

  • 웹페이지의 아이콘, 일러스트 등에 SVG를 이용하고 싶은 분들
  • SVG를 이용해 동적이고 멋진 인터랙티브 애니메이션 그래픽을 만들고 싶은 분들
  • SVG를 이용해 창의력 넘치는 작업을 하고 싶은 디자이너들
  • SVG가 뭔지는 대강 알겠는데 정보가 많고 혼란스러워 정리가 필요한 분들
  • 웹페이지에 살아있는 내 작품을 표현하고 싶은 일러스트레이터

선수 지식

  • CSS와 자바스크립트 기초

지식공유자 소개

스튜디오밀

서울에서 웹 디자이너이자 웹 개발자로 일했고

지금은 제주에서 웹사이트 만드는 일, 강의, 영상 만드는 일, 캐릭터 만드는 일 등

해보고 싶은거 이것저것 해보며 살고 있습니다.

비주얼 임팩트가 있는 인터랙티브 웹 개발에 특히 관심이 많고

관련 기술들을 공유하는 페이스북 "1분코딩"과 유튜브 "스튜디오밀"을 운영하고 있어요.

교육과정

모두 펼치기 37 강의 4시간 21분
섹션 0. 시작하기
1 강의 08 : 35
준비하기
08 : 35
섹션 2. CSS와 자바스크립트 적용하기
4 강의 18 : 17
CSS 적용하기 1
10 : 12
CSS 적용하기 2
02 : 49
자바스크립트 적용하기 1
03 : 51
자바스크립트 적용하기 2
01 : 25
섹션 3. 그리기
5 강의 29 : 29
기본도형 그리기
10 : 00
직선 그리기
04 : 08
Path로 그리기
08 : 30
Stroke 모양 조정하기
05 : 12
그룹 만들기
01 : 39
섹션 4. 텍스트
3 강의 09 : 08
기본 글자 쓰기
01 : 57
곡선을 따라 글자 쓰기
05 : 04
텍스트 부분 스타일링 적용하기
02 : 07
섹션 5. 효과
5 강의 44 : 42
그라디언트
06 : 50
패턴 1 - 패턴의 기본적인 사용법
08 : 35
패턴 2 - 애니메이션이 적용된 일러스트 패턴
03 : 44
마스크 1 - 마스크의 기본적인 사용법
07 : 08
마스크 2 - 자바스크립트를 이용해 돋보기 효과 만들기
18 : 25
섹션 6. Stroke 애니메이션
2 강의 16 : 38
Stroke 애니메이션 기본
06 : 55
그래픽 로고가 그려지는 애니메이션 만들기
09 : 43
섹션 7. SMIL 애니메이션
4 강의 22 : 20
SMIL 애니메이션의 기본적인 사용법
05 : 11
애니메이션 조작하기
03 : 09
Morphing 효과 만들기
09 : 53
CSS 애니메이션의 alternate를 SMIL로 구현하기
04 : 07
섹션 8. 아이콘 폰트 만들기
1 강의 07 : 52
아이콘 폰트 세트 만들기
07 : 52
섹션 9. 인터랙티브 SVG: 마우스를 부드럽게 따라다니는 귀여운 몬스터 애니메이션 만들기
4 강의 36 : 52
React Mon 만들기 1
10 : 41
React Mon 만들기 2
08 : 01
React Mon 만들기 3
05 : 55
React Mon 만들기 4
12 : 15
섹션 10. 보너스 강의
4 강의 38 : 33
CSS - Transform
13 : 20
CSS - Transition
10 : 01
CSS - Animation 1
09 : 42
CSS - Animation 2
05 : 30

공개 일자

2019년 7월 16일 (마지막 업데이트 일자 : 2019년 7월 31일)

수강 후기

4.8
5개의 수강평
파인 25일 전
aquerytool 같이 선을 잇고 하는 부분도 설명해주셨으면 정말 좋았겠지만, 강의 자체는 짜임새있고 좋았습니다.
스튜디오밀 프로필

스튜디오밀 25일 전
좋은 말씀 감사합니다 :)

정민경 1달 전
ㅡㅡb
스튜디오밀 프로필

스튜디오밀 25일 전
감사합니다 ^^