
웹디자인기능사 실기 B-3 유형 html+css
두노피
무료
초급 / HTML/CSS
5.0
(4)
자격증 시험이 아니더라도 연습하기 좋은 예제입니다. 웹디자인 기능사 실기 B-3 유형을 천천~~히 따라해보아요
초급
HTML/CSS








카카오
에 관심있는 사람들도 듣는 중!





카카오
에 관심있는 사람들도 듣는 중!
svg 애니메이션
스크롤 애니메이션
이번 강의에서는 SVG와 CSS를 활용해 배가 강물 경로를 따라 자연스럽게 이동하는 애니메이션을 만드는 방법을 배웁니다. 기술적으로는 path의 전체 길이를 계산하고, stroke-dasharray, stroke-dashoffset 속성을 이용해 움직임을 제어하는 간단한 원리를 사용합니다. 핵심은 이 과정을 통해 단순한 이미지가 아닌, 디자인과 인터랙션이 결합된 고급 웹 콘텐츠를 구현하는 데 있습니다.
여기서 중요한 포인트는, 이런 SVG 애니메이션을 활용하면 여러분의 포트폴리오 퀄리티가 눈에 띄게 상승한다는 점입니다. 특히, 최근 기업이나 클라이언트는 단순한 정적인 디자인보다 사용자의 시선을 끌 수 있는 동적인 화면 구성, 그리고 웹 기술을 디자인적으로 해석할 수 있는 능력을 높게 평가합니다.
이번 실습을 통해 배경 디자인, 인터랙션 요소, 캐릭터 움직임까지 모두 본인이 직접 제어하는 경험을 쌓을 수 있고, 이 결과물을 포트폴리오에 넣으면 다음과 같은 효과를 기대할 수 있습니다
✔ 단순 정적 웹 디자인과 차별화
대부분의 지원자들은 정적인 이미지, 피그마 시안, HTML 구조 위주로 포트폴리오를 구성합니다. 하지만 이번 애니메이션처럼 SVG와 CSS를 접목한 실시간 인터랙션을 보여주면, 본인의 디자인이 실제로 어떻게 '살아 움직이는지'를 강조할 수 있습니다.
✔ 코딩 가능성과 디자인 감각 동시 어필
단순히 예쁜 디자인을 넘어, 본인이 직접 코드를 작성해 인터랙션을 구현했다는 점을 강조하면 '코드에 능숙한 디자이너'라는 이미지를 줄 수 있습니다. 이는 프론트엔드 직군이나 웹디자인 포지션 모두에서 강력한 경쟁력이 됩니다.
✔ 프로젝트에 활용 가능한 실무 감각 증명
강을 따라 움직이는 배, 다양한 아이콘을 조합한 연출은 기업 웹사이트, 제품 홍보, 이벤트 페이지, 게임 디자인 등 실무에 바로 적용 가능한 스킬입니다. 단순한 포트폴리오 작품이 아니라, 실질적으로 활용 가능한 결과물을 제시하면 실무 적응력도 어필할 수 있습니다.
✔ 개성 있고 기억에 남는 포트폴리오 연출
많은 지원자들의 포트폴리오가 비슷비슷한 정형화된 구성을 갖는 반면, 본인만의 애니메이션 요소를 삽입하면 면접관에게 강한 인상을 남길 수 있습니다. 특히, 배가 자연스럽게 강을 따라 이동하는 장면은 심플하면서도 시각적으로 매우 임팩트 있는 연출입니다.
이번 강의를 통해, 단순한 기술 구현을 넘어 실질적인 포트폴리오 완성도를 높이고, 경쟁력을 갖춘 차별화된 결과물을 직접 제작해 보세요. 🌊🚤
여러가지 svg 그림을 그려서 애니메이션에 적용해 보는 강의입니다.
HTML/CSS, JavaScript를 이용합니다.
학습 대상은
누구일까요?
svg 애니메이션 처음이거나 해보신분
포트폴리오에 적용하고 싶으신 분
실무에 바로 적용하고 싶으신 분
선수 지식,
필요할까요?
html 기초, 자바스크립트 or 제이쿼리 기초
전체
11개 ∙ (2시간 7분)
해당 강의에서 제공:
1. svg 애니메이션 소개영상
00:21
지식공유자님의 다른 강의를 만나보세요!
같은 분야의 다른 강의를 만나보세요!
신규가입 25% 할인
₩12,370
25%
₩16,500





