GN⁺: SVG 튜토리얼
(svg-tutorial.com)SVG 튜토리얼 요약
- Hunor Márton Borbély가 만든 SVG 튜토리얼로, 기본적인 도형부터 시작하여 복잡한 애니메이션까지 SVG 이미지 코딩 방법을 단계별로 배울 수 있음.
- 기본 도형 그리기, 크리스마스 트리, 생강 쿠키 인형, 집 만들기 등 다양한 주제를 다루며, 클립 패스, 그라데이션, 베지어 곡선, 텍스트 경로 따라 그리기 등 SVG의 다양한 기능을 소개함.
- 또한, 자바스크립트를 이용한 시계 그리기, SVG 요소에 인터랙션 추가하기, 자바스크립트로 SVG 다이어그램 생성하기 등 SVG와 다른 기술들을 결합하는 방법도 포함됨.
GN⁺의 의견
- 이 튜토리얼은 초급 소프트웨어 엔지니어들이 SVG 이미지를 코딩하는 기초부터 고급 기술까지 체계적으로 배울 수 있는 좋은 자료임.
- 특히, 실제 시간을 표시하는 시계를 만드는 방법이나 SVG 요소에 인터랙션을 추가하는 등 실용적인 예제들이 포함되어 있어, 학습자들에게 매우 유익하고 흥미로운 경험을 제공할 것으로 보임.
- SVG를 배우고자 하는 사람들에게 이 튜토리얼은 그래픽 웹 디자인의 이해를 넓히고, 웹 페이지에 독창적인 시각적 요소를 추가하는 능력을 향상시킬 수 있는 매력적인 학습 자료가 될 것임.
Hacker News 의견
- SVG와 React의 조합은 과소평가되고 있음. React의 모든 기능과 추상화를 활용할 수 있으며, DOM 대신 임의의 그래픽을 렌더링할 수 있음. 그래프와 차트 렌더링에 사용해보니, 특정 상황에서는 Canvas를 압도함. 예를 들어, 간단한 상호작용이 필요하지만 픽셀 단위 조작 같은 복잡한 그래픽은 필요하지 않을 때 유용함.
- SVG는 유연한 포맷으로, 관련 튜토리얼을 통해 배우는 데 시간을 할애할 가치가 있음. React 컴포넌트와 결합하여 SVG를 이용하면 HTML만으로는 어려운 멋진 UI를 구현할 수 있음.
- React로 구현한 인터랙티브한 "Circle of Fifths" 컴포넌트를 음악 이론 사이드 프로젝트에 사용함. 해당 컴포넌트는 사용 가능한 상태이며, SVG를 이용해 Circle of Fifths를 구축하는 과정에 대한 블로그 포스트가 도움이 됨.
- SVG의
<clip-path>사용 예시에서, 큰 원을 두 번 정의하는 것은 비효율적임. 크기를 변경할 때 두 곳 모두 수정해야 하므로,defs를 이미 사용하고 있다면 원을 한 번만 정의하고 재사용하는 것이 더 나음. - SVG와 React를 이용한 인라인 SVG 코딩은 재미있으며,
<foreignObject>태그를 사용하면 HTML 내에서 SVG를 활용할 수 있어 HTML이 더 잘하는 작업(링크, 이미지, 기본 플렉스박스 스타일링 등)에 유용함. - 몇 년 전, 인터페이스 작업 중 SVG를 사용했을 때, 두 가지 색상 스킴을 위해 단순히 SVG 파일 내의 색상 코드를 찾아 바꾸는 것으로 디자이너를 놀라게 함.
- 튜토리얼에 대한 긍정적인 피드백에 감사함을 표시하며, 발견된 오류를 수정함. 아직 미세 조정 중이며, 예를 들어 Twitter에서 썸네일 미리보기가 작동하지 않는 이유를 아는 사람이 있는지 궁금함.
- SVG "태그"라는 용어에 대한 작은 불만이 있음. HTML을 처음 시작했을 때는 모든 것을 "태그"라고 불렀지만, XHTML이 등장한 후 "요소"라고 부르기 시작함. 여전히 "태그"라고 생각하지만, 이제는 "요소"라고 말함.
- 곡선과 클리핑에 대한 예시가 특히 마음에 듦.
path를 선호하는데, 거의 모든 것을 할 수 있고 다른 방법보다 덜 장황함. 그림 그리기에 서툴고 이미지를 싫어해서, 성능과 편의를 위해 사이드 프로젝트 전체를 SVG로 구축함. 이 튜토리얼을 통해 리팩토링할 부분이 많다는 것을 깨달음. - 텍스트와 이미지를 함께 사용한 예시를 보고 싶음. 현재 이 문제로 고군분투 중이며, 정렬은 까다로운 문제임. Inkscape를 사용해 본 경험이 있지만, 필요한 것을 생성하기 위해 XML 작성 쪽에 속함.
- SVG를 직접 코딩하는 것이 일반적인 관행인지, 아니면 예를 들어 Figma에서 그림을 그리고 SVG 파일을 생성하는 것이 일반적인지 궁금함.