SVG 마스터
SVG 마스터
수강정보
(22개의 수강평)
426명의 수강생
스킬태그 #SVG, #HTML/CSS

이 강의는

웹 벡터 그래픽 SVG를 기초부터 제대로 익히고, 재미있고 다양한 예제들을 통해 원하는 방향으로 응용할 수 있는 기술을 습득합니다.

이런 걸 배워요

  • 웹페이지에서 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월 17일 (마지막 업데이트 일자 : 2019년 7월 28일)

수강 후기

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

1분코딩 2019.10.01
와- 감사합니다. 써주신 수강평을 읽으니 힘이 막 납니다 ^^

default_profile.png
개발자 27일 전
html,css 기본기를 독학으로 2달간 깊숙히 익히고, java script도 어느정도 기본기를 익혔을때쯤, front 기술에 더 욕심이나서 svg강의를 신청하고 완강하는데 3일가량 걸렸습니다. 초반에는 html,css랑 비슷하면서도 뭔가 다른 느낌에 조금 어려울꺼 같다는 생각을 했었는데, 생각보다 어렵다는 느낌보다는 선수과정을 열심히 복습(?)해서 그런지 ㅎㅎ 어렵지 않고 재밌게 했습니다. 도중 도중 나오는 실습과제들도 혼자 계속 만들어보고 생각해보고 하다보니 어느새 3일만에 완강을 했네요 ㅎㅎ ( 개인적으로 정말 재밌게 했습니다. ㅎㅎ ) 인제는 java script를 확실하게 공부하러 갈 생각입니다 ! 모두다 화이팅입니다~~!
1분코딩

1분코딩 25일 전
다른 강의들 통해서 열심히 공부하셔서 기본기가 많이 좋아지셔서 아마 쉽게 느껴지셨을거에요! 학습 효과가 나타나는~^^ 항상 화이팅입니다! 좋은 수강평도 감사드려요.

default_profile.png
TaeHyun Lim 1달 전
1분코딩 인프런 강좌를 사두고 시간날때 틈틈히 하나씩 정복해가고 있습니다. 물론 한번이 아닌 여러번 듣고 있어서 제 것으로 만드려고 노력하고 있습니다 ㅎㅎ 좋은 강의를 만들어주셔서 감사합니다! 대표님! 진로에 대해 질문이 있습니다. 그래서 1분코딩 페이스북 메세지로 질문을 드리고 싶은데 시간되실 때 답변해주실 수 있나요...?
1분코딩

1분코딩 1달 전
네 태현님~ 페이스북 1분코딩으로 메시지 보내주시면, 가능할 때 확인하고 답 드릴게요^^ 복습하고 잘 익히셔서, 멋진 작품 만드시길 바랍니다! 감사합니다^^

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