배 svg 그리는 방법
131
4 asked
배나 비행기 같은 svg 요소를 구현할 때, 하나의 완성된 SVG 대신 여러 개의 작은 요소들로 분리해서 겹치는 방식을 사용하는 이유가 궁금합니다.
Answer 2
0
안녕하세요~ Ai가 답변을 했네요
근데 저런 이유때문은 아니고
우리가 인터넷에서 보는 svg 애니메이션은 원리가 svg의 stroke 점선으로 만드는건데 동그라미나 선 애니메이션만 있더라구요. 그래서 그 선들을 조각조각 모아서 그림으로 바꿔보았어요. 그러면 기존방식대로 애니메이션을 만들어도 그림이 이동하는것처럼 보이기 때문에 좋았는데 아무도 안해봐서 제가 찾은 방법을 영상을 찍어본거예요. 생각나는 그림은 계속 피그마로 그려보고 있습니다.
0
안녕하세요, 인프런 AI 인턴입니다. 김진규님.
SVG 파일을 여러 개의 작은 요소로 분리하여 사용하는 것은 몇 가지 장점이 있기 때문입니다.
재사용 가능성: 여러 개의 작은 요소로 나누면 특정 부품이나 요소를 다양한 디자인에 재사용할 수 있습니다. 필요에 따라 크기나 색상을 조정하여 같은 요소를 여러 곳에서 사용할 수 있습니다.
애니메이션 적용 용이성: 각 요소를 개별적으로 나누어 애니메이션을 적용하기가 더 쉽습니다. 예를 들어, 배의 프로펠러나 물결을 각각 별도의 요소로 관리하면, 회전하거나 움직이는 애니메이션을 손쉽게 구현할 수 있습니다.
유연한 조정: 작은 요소로 나누면 각 부분을 더 쉽게 수정할 수 있어서 디자인 변경이나 개선이 필요할 때 유리합니다. 특정 부분만 수정이 필요할 경우, 전체 SVG를 다시 그릴 필요 없이 해당 요소만 업데이트하면 됩니다.
성능 최적화: 큰 SVG 파일 하나보다 작은 요소 여러 개를 사용하는 것이 경우에 따라 성능상 유리할 수 있습니다. 각 요소가 독립적으로 관리되므로, 브라우저가 랜더링할 때 전체를 다시 계산할 필요 없이 변경된 부분만 업데이트할 수 있습니다.
관련하여 더 깊이 있는 설명을 원하신다면, Inflearn 강의 내에서 자세히 다룬 웹 퍼블리싱 및 SVG 활용 강의를 추천드립니다. 또한, [SVG 요소 구현에 대한 기존 질문]과 관련된 답변을 참고하시면 도움이 될 것 같습니다:
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
강의가 중복됐어요
0
14
0
결제가 이루어지는 방식에 대한 문의
0
24
0
강의제목에 10/15일 삭제라고 나와있는데,
0
44
1
선생님 강의자료를 받을수 없어요! 메일보냈어요.
0
53
2
스크립트 영상 미일치
0
70
3
감정일기장 다이어리 필터 적용할때 컨텍스트를 Home에서 가져오는 특별한 이유가 궁금합니다.
0
53
2
강의 설명 중에 헷갈리는 것이 있네요
0
49
1
수업자료 관련 문의
0
65
3
1강 동영상 재생 오류
1
65
2
헤더에서 empty column이 삭제가 안되고, 헤더 레이아웃을 동영상처럼 선택하는 옵션이 안나오는데 어떻게 하나요?
0
37
1
Composition단계에서 `Layer`는 누가 만드는지
0
41
1
Strict Mode 예시 질문!
0
58
2
수업이 안보여요
0
62
1
저자 블로그에 있는 강의는 어떤 강의인가요?
1
60
1
해당 플러그인을 설치했는데 추가 지원 안될 수 있다고 다른 플러그인을 깔아보라는데 어떻게 해야하나여?
0
54
2
[해결됨]윈도우즈 환경에서 타입 스크립트 파일이 실행이 안됩니다.
1
83
5
4강 카드뉴스 자동화 자료가 안보입니다!!
0
101
2
윈도우즈 환경에서 진행중입니다.
0
59
2
4강 카드뉴스 자동화 자료
6
124
1
라이브 강의 영상 녹화본이 있을까요?
0
100
1
인증이 늦었습니다ㅜㅜ 확인부탁드립니다
0
89
1
스웨거 접속이 안되는데 확인 부탁드립니다.
0
62
1
만일 실물을 택배로 배송해야 할 경우 주소지 입력하는 방법이 궁금해서요.
1
87
4
영상이 안보여요
0
106
1