[#svg, #이미지프레임과 텍스트 싱크] 스크롤 값에 움직이는 svg path, 이미지프레임과 텍스트 싱크 맞추는 것, 2가지 질문이 있습니다.

Question

안녕하세요, 유익하고 좋은 강좌 만들어주셔서 감사드립니다! 덕분에 브라우저 스크롤 애니메이션에 대한 개념이해를 갖게 됐습니다!. 이런 내용을 바탕으로 '미려한' 애니메이션을 만들고 싶은 욕심이 생겼는데요, 해당 강좌를 시청하며 2가지 문의사항이 있습니다. 감사합니다!   #질문1. svg의 path의 생성하는 법, 만들어주신 강좌 중 svg 강의를 보면 아이디어를 얻을 수 있을까요? 보너스로 추가해주신 아이패드 강좌 부분을 보면서, svg의 path를 커스텀으로 만들고 싶은 생각이 들었습니다. 아직 svg 로딩 강좌 섹션은 보지 못했는데, 혹시 인터렉티브 로드맵 중 svg강좌를 들으면, path를 만들 수 있는 힌트를 얻을 수 있을까요? 예를 들어 '안녕하세요 반갑습니다' 라는 svg를 브라우저 스크롤 하면서 하나씩 그려내고 싶습니다. #질문2. 3번째 섹션, 이미지프레임과 fixed된 텍스트들을 서로 싱크를 맞추려면, 어떻게 한땀한땀 해야할까요? 강좌에서 공부한 스크립트와 마크업/스타일을 바탕으로, 새로운 애니메이션을 만들때, 이미지/비디오 프레임과 fixed된 텍스트를 서로 싱크 맞추는 요령? 방법?이 무엇이 있을까요? 혹시 이미지 애니메이션을 완성하고, 수작업으로 텍스트의 fixed위치를 변경하면서, 수치를 정하는건가요?

1분코딩 · Answer

SVG 패스를 코드로 직접 만드는 것 보다는, 툴을 사용하시는게 좋습니다. https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths 이런 문서들의 내용을 바탕으로 코드로 만들 수도 있겠지만, 정말 시간이 오래 걸릴거라서요^^; 저는 어도비 구독을 하고 있어서 일러스트레이터를 이용하는데요, 그 외에도 SVG Path를 만들 수 있는 도구들이 있으니 검색해 보시고 적절한걸 선택하시면 될 것 같습니다. "svg path generator"라고 검색해보니 이것저것 나오네요~

인프런 AI 인턴 · Answer

안녕하세요 프린이님, 인프런 AI 인턴이에요. 질문1에 대해서는 저희 인프런의 로드맵에서 svg 강의를 수강하시면, path를 만들 수 있는 힌트와 아이디어를 얻을 수 있습니다. 언급하신대로 로드맵 중 인터렉티브 로드맵에서 svg 강의를 찾아보시면 도움이 될 것입니다. 브라우저 스크롤을 이용하여 &lsquo;안녕하세요 반갑습니다&rsquo;라는 svg를 하나씩 그려내는 것도 가능합니다. 질문2에 대해서는 이미지 프레임과 fixed된 텍스트를 서로 싱크 맞추려면 스크립트와 마크업/스타일을 이용해 조정해야 합니다. 이미지 애니메이션을 완성한 후, 텍스트의 fixed 위치를 변경하며 수치를 조정하는 방법으로 원하는 싱크를 맞출 수 있습니다. 수작업으로 조정하는 것이 가장 일반적인 방법 중 하나입니다. 이 점들을 참고하시면 미려한 애니메이션을 구현하는 데 도움이 되실 것입니다. 감사합니다!