SVG 마스터

SVG 마스터

(8개의 수강평)

156명의 수강생

이런 걸 배울 수 있어요

  • 웹페이지에서 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월 17일)

수강 후기

4.9
8개의 수강평
moonjulu 25일 전
svg 궁금했는데 많은 도움이 되었어요 더 많은 강의가 추가되었으면 좋겠어요
스튜디오밀 프로필

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

김성은 1달 전
안녕하세요. 항상 공부하면서 라이브러리나 SVG 효과가 들어간 홈페이지를 보면서 저건 어떻게 만드는지 너무너무 궁금해서 혼자 코드를 분석해보기도 했었는데요. 혼자 코드 분석했을 때, 이해가 잘 가지 않아 제자리 걸음만 했었습니다. 그렇던 와중에 유튜브로 스튜디오 밀님의 영상을 보게 되었고, 강의를 알게 되어 결제를 진행했습니다. SVG 효과 뿐만 아니라, 인터렉티브 웹도 엄청 관심있는 부분이어서 바로 결제 했고, 강의 또한 너무너무 만족스럽게 잘 보고 있습니다. 아직 제대로 다 학습하진 못했지만, 이런 강의를 만들어주셔서 너무 감사한 마음에 평가 남깁니다. 감사합니다.
스튜디오밀 프로필

스튜디오밀 1달 전
와- 감사합니다. 써주신 수강평을 읽으니 힘이 막 납니다 ^^

지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강좌들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스