Inflearn Community Q&A
asked
배 svg 그리는 방법
Written on
·
73
0
배나 비행기 같은 svg 요소를 구현할 때, 하나의 완성된 SVG 대신 여러 개의 작은 요소들로 분리해서 겹치는 방식을 사용하는 이유가 궁금합니다.
Quiz
What is the main reason why the use of circles and rectangles is recommended over the pen tool in SVG animation?
Ease of complex path generation
Animation motion smoothness
Pen tool creates dashed forms, so
SVG only supports basic shapes
Answer 2
0
안녕하세요~ Ai가 답변을 했네요
근데 저런 이유때문은 아니고
우리가 인터넷에서 보는 svg 애니메이션은 원리가 svg의 stroke 점선으로 만드는건데 동그라미나 선 애니메이션만 있더라구요. 그래서 그 선들을 조각조각 모아서 그림으로 바꿔보았어요. 그러면 기존방식대로 애니메이션을 만들어도 그림이 이동하는것처럼 보이기 때문에 좋았는데 아무도 안해봐서 제가 찾은 방법을 영상을 찍어본거예요. 생각나는 그림은 계속 피그마로 그려보고 있습니다.
0
안녕하세요, 인프런 AI 인턴입니다. 김진규님.
SVG 파일을 여러 개의 작은 요소로 분리하여 사용하는 것은 몇 가지 장점이 있기 때문입니다.
재사용 가능성: 여러 개의 작은 요소로 나누면 특정 부품이나 요소를 다양한 디자인에 재사용할 수 있습니다. 필요에 따라 크기나 색상을 조정하여 같은 요소를 여러 곳에서 사용할 수 있습니다.
애니메이션 적용 용이성: 각 요소를 개별적으로 나누어 애니메이션을 적용하기가 더 쉽습니다. 예를 들어, 배의 프로펠러나 물결을 각각 별도의 요소로 관리하면, 회전하거나 움직이는 애니메이션을 손쉽게 구현할 수 있습니다.
유연한 조정: 작은 요소로 나누면 각 부분을 더 쉽게 수정할 수 있어서 디자인 변경이나 개선이 필요할 때 유리합니다. 특정 부분만 수정이 필요할 경우, 전체 SVG를 다시 그릴 필요 없이 해당 요소만 업데이트하면 됩니다.
성능 최적화: 큰 SVG 파일 하나보다 작은 요소 여러 개를 사용하는 것이 경우에 따라 성능상 유리할 수 있습니다. 각 요소가 독립적으로 관리되므로, 브라우저가 랜더링할 때 전체를 다시 계산할 필요 없이 변경된 부분만 업데이트할 수 있습니다.
관련하여 더 깊이 있는 설명을 원하신다면, Inflearn 강의 내에서 자세히 다룬 웹 퍼블리싱 및 SVG 활용 강의를 추천드립니다. 또한, [SVG 요소 구현에 대한 기존 질문]과 관련된 답변을 참고하시면 도움이 될 것 같습니다:
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.