SVG Path로 구현한 곡선형 차트 모션
기술정보 25.12.23 조회 7SVG Path로 구현한 곡선형 차트 모션
SVG Path를 이용해 곡선형 차트를 구현하고, 선이 그려지면서 포인트와 텍스트가 함께 노출되는 인터랙션 모션을 소개합니다.
✅ 모션 설명
곡선이 진행됨에 따라 점과 설명이 일정 간격으로 자연스럽게 노출됩니다.
단순한 그래프가 아니라, 시간의 흐름과 성장 스토리를 보여주는 차트입니다.
디자인키트 템플릿에서는 정보를 한 번에 보여주지 않고 스크롤에 맞춰 읽히듯 흐르도록 설계했습니다.
연혁, 성장 지표, 기술 스토리를 콘텐츠 흐름으로 표현할 수 있습니다.
✅ 이런 화면에 잘 어울려요!
· 기업 연혁 페이지
· 기술 성장 소개
· 성과 지표 시각화
· 스토리형 데이터 콘텐츠
➰➰➰
✏️ SVG Path 코드 구현
· SVG Path는 보통 디자인 툴에서 그린 뒤 → 코드로 가져와 → 미세 조정합니다.
· SVG Path 예시 :
· M : 시작 위치
· L : 직선 연결
· C : 부드러운 곡선 생성
✨ SVG Path를 빠르게 만들고 싶다면, SVGOMG 같은 도구를 활용하면 편리합니다.
✏️ 곡선 위에 점과 텍스트 노출시키기
1. 포인트 데이터 정의 + 포인트 위치 생성
· 포인트 위치는 전체 path 길이 대비 비율(pos)로 관리합니다.
· 텍스트, 강조 여부도 함께 정의해 디자인 수정 시 데이터 변경이 용이합니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | const points = [ { pos: 0.15, year: "2009", desc: "스마트 자동화 연구소 설립" }, { pos: 0.32, year: "2014", desc: "산업용 협동로봇 첫 출시" }, { pos: 0.47, year: "2016", desc: "AI 기반 제어시스템 상용화", emphasize: true }, { pos: 0.62, year: "2018", desc: "주요 제조사 납품 계약 체결" }, { pos: 0.77, year: "2022", desc: "글로벌 시장 진출" }, { pos: 0.9, year: "로봇 제어 정확도", desc: "99.8%", emphasize: true, large: true } ]; //코드 중략 circle.setAttribute("cx", pt.x); circle.setAttribute("cy", pt.y); circle.setAttribute("r", p.large ? 9 : 6); circle.setAttribute("fill", p.emphasize ? "var(--primary)" : "#fff"); svg.appendChild(circle); | cs |
2. 강조 효과 설정 (선택)
· 강조 여부에 따라 크기, 색상을 스크립트로 직접 제어합니다.
· CSS 분기를 줄여 관리 효율을 높였습니다.
3. 텍스트 배치
· SVG 전용 텍스트 요소인 tspan을 사용해 연도와 설명을 배치합니다.
· SVG 내부 좌표계를 그대로 사용해 곡선과 자연스럽게 정렬할 수 있습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | text.setAttribute("x", pt.x); text.setAttribute("y", pt.y - 54); text.setAttribute("text-anchor", "middle"); year.textContent = p.year; desc.setAttribute("dy", "1.2em"); desc.textContent = p.desc; text.appendChild(year); text.appendChild(desc); svg.appendChild(text); | cs |
➰➰➰
SVG Path 기반 차트는 단순한 시각화가 아니라 이야기를 전달하는 인터랙션이 됩니다.
디자인키트에서는 이 모션을 재사용 가능한 템플릿으로 구성했습니다.
곧 출시될 SVG Path 기반 기업 템플릿도 기대해주세요!
✨관련 링크✨
GSAP ScrollTrigger로 구현하는 원형 선 그리기 & 교차 모션 구현하기
