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 파일을 생성하는 것이 일반적인지 궁금함.