본문 바로가기

HTML, CSS/SVG3

Figma를 활용한 인터랙티브 SVG 제작 가이드 Figma를 활용한 인터랙티브 SVG 제작 가이드파트 I: Figma의 기본 원칙: 인터랙션을 위한 디자인성공적인 인터랙티브 SVG 제작의 여정은 코드를 작성하기 훨씬 전, Figma 캔버스에서 시작됩니다. 이 첫 번째 파트에서는 인터랙션을 염두에 둔 디자인의 근본적인 원칙을 다룹니다. Figma를 단순한 시각적 디자인 도구가 아닌, 최종 웹 결과물의 구조적 청사진을 만드는 강력한 저작 도구로 바라보는 인식의 전환이 필요합니다. 모든 레이어, 그룹, 벡터 경로는 잠재적인 인터랙티브 요소가 되며, 이러한 관점은 디자인 프로세스 전반을 이끌어야 합니다.1.1. 사고의 전환: 정적 목업에서 인터랙티브 설계도로인터랙티브 SVG를 제작하는 과정은 단순히 보기 좋은 이미지를 그리는 것을 넘어섭니다. 이는 최종 제품.. 2025. 9. 5.
SVG 가이드 SVG 가이드I. SVG의 본질: 벡터 그래픽의 이해Scalable Vector Graphics (SVG)는 현대 웹 그래픽의 초석을 이루는 기술입니다. SVG의 진정한 힘을 이해하기 위해서는 단순히 '이미지 포맷'이라는 개념을 넘어, 그것이 작동하는 근본적인 원리와 래스터(Raster) 이미지와의 본질적인 차이를 파악하는 것이 중요합니다. 이 장에서는 SVG의 핵심 정체성을 분석하고, 웹 개발 및 디자인 워크플로우에 혁신을 가져온 이유를 탐구합니다.1.1. SVG란 무엇인가?: XML 기반 벡터 이미지 포맷SVG는 확장 가능한 벡터 그래픽(Scalable Vector Graphics)의 약자로, 이름에서 알 수 있듯이 크기 조절이 자유로운 벡터 기반의 이미지 포맷입니다. SVG의 가장 핵심적인 특징은 .. 2025. 9. 5.
SVG 이해하기 SVG 로드맵1단계. 기본 이해SVG 정의, 래스터와 벡터 차이 태그 기본 속성 (width, height, viewBox)좌표계와 단위기본 도형(, 등)2단계. Path 문법 (핵심)M, L, H/V, C, Q, A, Z절대/상대 좌표다양한 도형/하트/곡선 예제3단계. 스타일링fill, stroke, stroke-widthstroke-linecap, stroke-linejoin, stroke-dasharrayCSS 적용 방식, opacity와 레이어 개념4단계. 좌표 변환과 레이아웃transform="translate/rotate/scale" 그룹 태그viewBox, preserveAspectRatio (반응형 핵심)5단계. 텍스트와 심화 요소, , + (재사용 구조)Gradient, Patter.. 2025. 8. 16.

티스토리툴바