리μ‘νΈμμμ SVG λ° μμ΄μ½ μ»΄ν¬λνΈ λ³ν
νλ μΉ μ ν리μΌμ΄μ μμλ ν΄μλμ ꡬμ λ°μ§ μκ³ μ λͺ ν κ·Έλν½μ μ 곡νλ λ²‘ν° μ΄λ―Έμ§, νΉν SVG(Scalable Vector Graphics)μ μμ΄μ½μ νμ©μ΄ μ μ λ μ€μν΄μ§κ³ μμ΅λλ€. SVGλ ν½μ κΈ°λ°μ΄ μλ μνμ μ’νλ‘ κ·Έλ¦Όμ νννκΈ° λλ¬Έμ, μ΄λ€ λλ°μ΄μ€μμλ κΉ¨μ§μ§ μκ³ μ λͺ νκ² λ λλ§λ©λλ€. μ΄λ¬ν νΉμ±μ λ°μν μΉ λμμΈκ³Ό κ³ ν΄μλ λμ€νλ μ΄μμ λ§€μ° μ μ©νλ©°, 리μ‘νΈμ κ²°ν©νλ©΄ νμ₯μ±κ³Ό μ¬μ¬μ©μ±μ λμ¬ UI/UXλ₯Ό κ·Ήλνν μ μμ΅λλ€.
μ΄λ² ν¬μ€ν μμλ SVG μ΄λ―Έμ§μ μμ΄μ½μ 리μ‘νΈ μ»΄ν¬λνΈλ‘ λ³ννλ λ°©λ², μ΄λ₯Ό ν΅ν΄ μ½λμ μ¬μ¬μ©μ±κ³Ό μ μ§λ³΄μμ±μ ν₯μμν€λ λ°©λ², κ·Έλ¦¬κ³ λ²‘ν° κΈ°λ° κ·Έλν½μ μ₯μ μ νμ©νμ¬ μ¬μ©μ κ²½νμ κ°μ νλ μ λ΅μ λν΄ κ΅¬μ²΄μ μΌλ‘ μ΄ν΄λ³΄κ² μ΅λλ€.
SVGμ μμ΄μ½μ μ₯μ
SVGλ λ€μκ³Ό κ°μ μ¬λ¬ κ°μ§ μ₯μ μ μ 곡ν©λλ€.
- ν΄μλ λ 립μ±: SVGλ λ²‘ν° κΈ°λ°μΌλ‘ κ·Έλ €μ§λ―λ‘, νλνκ±°λ μΆμν΄λ νμ§μ΄ μ νλμ§ μμ΅λλ€. μ΄λ λ€μν νλ©΄ ν¬κΈ°μ ν΄μλμ λμν λ λ§€μ° μ μ©ν©λλ€.
- νμΌ ν¬κΈ° μ΅μ ν: 볡μ‘ν μ΄λ―Έμ§κ° μλ λ¨μν λνκ³Ό κ²½λ‘λ‘ μ΄λ£¨μ΄μ§ κ²½μ°, SVG νμΌμ μ©λμ΄ λ§€μ° μμ λ‘λ© μλλ₯Ό κ°μ ν μ μμ΅λλ€.
- μ€νμΌ λ° μ λλ©μ΄μ μ μ΄ μ©μ΄: CSSλ μλ°μ€ν¬λ¦½νΈλ₯Ό ν΅ν΄ SVG λ΄λΆμ κ°λ³ μμλ₯Ό μ½κ² μ‘°μν μ μμΌλ©°, μ λλ©μ΄μ ν¨κ³Όλ₯Ό μ μ©νλ κ²λ λΉκ΅μ κ°λ¨ν©λλ€.
- SEOμ μ κ·Όμ± ν₯μ: SVGλ XML κΈ°λ°μ ν¬λ§·μ΄κΈ° λλ¬Έμ, κ²μ μμ§μ΄ λ΄μ©μ μ½κ² μΈμν μ μκ³ , ARIA μμ±μ νμ©νμ¬ μ κ·Όμ±μ κ°νν μ μμ΅λλ€.
리μ‘νΈ μ»΄ν¬λνΈλ‘ SVG λ³νμ νμμ±
리μ‘νΈ νλ‘μ νΈμμ SVGλ₯Ό λ¨μ μ΄λ―Έμ§ νμΌλ‘ μ¬μ©νκ² λλ©΄, μ½λμ μ¬μ¬μ©μ±μ΄ λ¨μ΄μ§κ³ μ€νμΌμ λμ μΌλ‘ μ μ©νκΈ° μ΄λ ΅μ΅λλ€. λ°λ©΄, SVGλ₯Ό 리μ‘νΈ μ»΄ν¬λνΈλ‘ λ³ννλ©΄ λ€μκ³Ό κ°μ μ₯μ μ΄ μμ΅λλ€.
- μ¬μ¬μ©μ±: SVG μ»΄ν¬λνΈλ₯Ό λ³λμ λͺ¨λλ‘ λΆλ¦¬νμ¬ μ¬λ¬ κ³³μμ μ½κ² μ¬μ¬μ©ν μ μμΌλ©°, νμν κ²½μ° propsλ₯Ό ν΅ν΄ μμ, ν¬κΈ°, μ λλ©μ΄μ λ±μ λμ μΌλ‘ μ‘°μ ν μ μμ΅λλ€.
- μ μ§λ³΄μ μ©μ΄μ±: SVG μ»΄ν¬λνΈ λ΄λΆμ μ½λλ₯Ό λΆλ¦¬νμ¬ κ΄λ¦¬νλ©΄, λμμΈ λ³κ²½ μ ν΄λΉ μ»΄ν¬λνΈλ§ μμ νλ©΄ λμ΄ μ 체 μ ν리μΌμ΄μ μ λ―ΈμΉλ μν₯μ μ΅μνν μ μμ΅λλ€.
- ν΅ν©λ μ€νμΌλ§: 리μ‘νΈμ μ€νμΌλ§ λꡬ(Styled Components, Emotion, CSS Modules λ±)μ ν¨κ» μ¬μ©νλ©΄, SVGμ μΌκ΄λ ν λ§μ μ€νμΌμ μ μ©ν μ μμ΄, UI/UX ν΅μΌμ±μ΄ ν₯μλ©λλ€.
SVG μ»΄ν¬λνΈ λ³ν λ°©λ²
1. SVGR μ¬μ©νκΈ°
SVGRμ SVG νμΌμ 리μ‘νΈ μ»΄ν¬λνΈλ‘ λ³νν΄μ£Όλ λꡬμ λλ€. CLI λꡬ λλ μ¨λΌμΈ λ³νκΈ°λ₯Ό μ¬μ©νλ©΄, κΈ°μ‘΄μ SVG νμΌμ μμ½κ² μ»΄ν¬λνΈλ‘ λ³νν μ μμ΅λλ€. μλ₯Ό λ€μ΄, μλμ κ°μ΄ SVG νμΌμ λ³νν μ μμ΅λλ€.
npx @svgr/cli --icon --replace-attr-values "#000=currentColor" icon.svg --out-dir src/icons
μ λͺ λ Ήμ΄λ₯Ό ν΅ν΄ μμ±λ μ»΄ν¬λνΈλ, λ€μκ³Ό κ°μ΄ μ¬μ©ν μ μμ΅λλ€.
// Icon.jsx
import React from 'react';
import { ReactComponent as IconSVG } from './icon.svg';
const Icon = ({ color = 'currentColor', width = 24, height = 24, ...props }) => {
return <IconSVG fill={color} width={width} height={height} {...props} />;
};
export default Icon;
μ΄λ κ² λ³νλ μ»΄ν¬λνΈλ propsλ₯Ό ν΅ν΄ λμ μΌλ‘ μμμ΄λ ν¬κΈ°λ₯Ό λ³κ²½ν μ μμ΄, λ€μν μν©μμ μ¬μ¬μ©νκΈ° μ©μ΄ν©λλ€.
2. μΈλΌμΈ SVG μμ±νκΈ°
μ§μ JSX λ΄μμ SVG μ½λλ₯Ό μμ±νλ λ°©λ²λ μμ΅λλ€. μ΄ λ°©μμ SVG νμΌμ μ§μ μμ νκ³ , 리μ‘νΈ μ»΄ν¬λνΈ λ΄μ μ½μ ν μ μμ΄, μΈλΆ νμΌμ λΆλ¬μ¬ νμ μμ΄ μ½λ μμμ λ°λ‘ μ μ΄ν μ μμ΅λλ€.
// InlineIcon.jsx
import React from 'react';
const InlineIcon = ({ color = '#1976d2', width = 24, height = 24 }) => (
<svg width={width} height={height} viewBox="0 0 24 24" fill={color} xmlns="http://www.w3.org/2000/svg">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>
</svg>
);
export default InlineIcon;
μ΄ μμ μμλ JSX λ΄μμ μ§μ SVG νκ·Έλ₯Ό μμ±νμ¬ μμ΄μ½μ ꡬμ±νμ΅λλ€. μ΄ λ°©μμ κ°λ¨ν μμ΄μ½μ΄λ λ‘κ³ μ μ ν©νλ©°, CSSλ‘ μ€νμΌμ μ½κ² μ‘°μ ν μ μμ΅λλ€.
리μ‘νΈμμ SVG λ° μμ΄μ½ μ»΄ν¬λνΈ νμ© μ λ΅
1. μ€νμΌλ§ λ° ν λ§ μ μ©
SVG μ»΄ν¬λνΈλ₯Ό νμ©ν λ Styled Componentsλ Emotion κ°μ CSS-in-JS λꡬλ₯Ό μ¬μ©νλ©΄, SVGμ μμ, ν¬κΈ°, μ λλ©μ΄μ λ±μ λμ μΌλ‘ μ μ΄ν μ μμ΅λλ€. μλ₯Ό λ€μ΄, λ€ν¬ λͺ¨λμ λΌμ΄νΈ λͺ¨λλ₯Ό μ§μνλ λμμΈμμλ μμ΄μ½μ μμμ ν λ§μ λ°λΌ λ³κ²½ν μ μμ΅λλ€.
// ThemedIcon.jsx
import React from 'react';
import styled, { useTheme } from 'styled-components';
import { ReactComponent as SampleIcon } from './sample.svg';
const StyledIcon = styled(SampleIcon)`
width: ${props => props.width || '24px'};
height: ${props => props.height || '24px'};
fill: ${props => props.fill};
transition: fill 0.3s ease;
`;
const ThemedIcon = ({ width, height }) => {
const theme = useTheme();
return <StyledIcon width={width} height={height} fill={theme.iconColor} />;
};
export default ThemedIcon;
μ μμ λ ν λ§ κ°μ μ¬μ©νμ¬ μμ΄μ½μ μμμ λμ μΌλ‘ λ³κ²½ν©λλ€. μ΄λ₯Ό ν΅ν΄ μΌκ΄λ λμμΈ μμ€ν μ μ μ§νλ©΄μ μ¬μ©μ κ²½νμ κ°μ ν μ μμ΅λλ€.
2. μ κ·Όμ±κ³Ό SEO κ³ λ €
SVGλ XML κΈ°λ°μ΄λ―λ‘, μ μ ν ARIA μμ±μ μΆκ°νλ©΄ μ€ν¬λ¦° 리λμ κ°μ 보쑰 κΈ°μ μ΄ μμ΄μ½μ μλ―Έλ₯Ό μΈμν μ μμ΅λλ€. μλ₯Ό λ€μ΄, aria-labelμ΄λ role="img" μμ±μ μΆκ°νμ¬ μμ΄μ½μ μν μ λͺ νν ν μ μμ΅λλ€.
// AccessibleIcon.jsx
import React from 'react';
import { ReactComponent as InfoIcon } from './info.svg';
const AccessibleIcon = ({ label = 'μ 보 μμ΄μ½', width = 24, height = 24 }) => (
<InfoIcon width={width} height={height} role="img" aria-label={label} />
);
export default AccessibleIcon;
μ΄μ κ°μ΄ μ κ·Όμ± μμ±μ μΆκ°νλ©΄, λͺ¨λ μ¬μ©μμκ² μΉνμ μΈ UIλ₯Ό ꡬνν μ μμ΅λλ€.
3. μ±λ₯ μ΅μ ν
SVGλ λ²‘ν° κ·Έλν½μ΄κΈ° λλ¬Έμ, ν½μ κΈ°λ° μ΄λ―Έμ§μ λΉν΄ νμΌ ν¬κΈ°κ° μκ³ , λΈλΌμ°μ μμ λΉ λ₯΄κ² λ λλ§λ©λλ€. κ·Έλ¬λ 볡μ‘ν SVGλ₯Ό μ¬μ©ν κ²½μ°, λΆνμν DOM μμκ° λ§μμ§ μ μμΌλ―λ‘, μ½λ μ€ν리ν μ΄λ μΈλΌμΈ μ΅μ νλ₯Ό ν΅ν΄ μ±λ₯μ κ°μ ν μ μμ΅λλ€. μλ₯Ό λ€μ΄, λΆνμν λ©νλ°μ΄ν°λ₯Ό μ κ±°νκ±°λ, μ΅μ νλ SVG μ½λλ‘ λ³ννλ μμ μ΄ νμν©λλ€.
λ²‘ν° κΈ°λ° κ·Έλν½μ UI/UX κ°μ ν¨κ³Ό
λ²‘ν° κΈ°λ° κ·Έλν½μ κ°μ₯ ν° μ₯μ μ ν΄μλμ λ 립μ μ΄λΌλ μ μ λλ€. μ΄λ λ€μκ³Ό κ°μ UI/UX κ°μ ν¨κ³Όλ₯Ό κ°μ Έμ΅λλ€.
- λ°μν λμμΈ: SVG μμ΄μ½μ νλ©΄ ν¬κΈ°μ μκ΄μμ΄ μ λͺ νκ² λ λλ§λλ―λ‘, λͺ¨λ°μΌ, νλΈλ¦Ώ, λ°μ€ν¬ν λ± λ€μν λλ°μ΄μ€μμ μΌκ΄λ κ²½νμ μ 곡ν©λλ€.
- μ λλ©μ΄μ λ° μΈν°λμ : SVG λ΄λΆμ κ° μμλ₯Ό κ°λ³μ μΌλ‘ μ μ΄ν μ μκΈ° λλ¬Έμ, μΈλ°ν μ λλ©μ΄μ ν¨κ³Όλ μΈν°λμ μ ꡬνν μ μμ΅λλ€. μ΄λ₯Ό ν΅ν΄ μ¬μ©μμκ² λμ μΈ νΌλλ°±μ μ 곡νκ³ , μΈν°λμ μ μ¦κ±°μμ λν μ μμ΅λλ€.
- λΈλλ μΌκ΄μ± μ μ§: SVGλ₯Ό νμ©νλ©΄, λ‘κ³ λ μμ΄μ½μ λμμΈμ μ€μμμ κ΄λ¦¬ν μ μμ΄, λΈλλ μμ΄λ΄ν°ν°λ₯Ό μΌκ΄λκ² μ μ§ν μ μμ΅λλ€.
κ²°λ‘
리μ‘νΈμμ SVGμ μμ΄μ½ μ»΄ν¬λνΈλ₯Ό νμ©νλ κ²μ νμ₯μ±κ³Ό μ¬μ¬μ©μ±μ κ·Ήλννλ λμμ, ν΄μλ λ 립μ μΈ UIλ₯Ό ꡬννλ λ° λ§€μ° ν¨κ³Όμ μΈ μ λ΅μ λλ€. SVGRμ μ¬μ©ν μλ λ³ν, μΈλΌμΈ SVG μμ±, κ·Έλ¦¬κ³ Styled Componentsλ Emotionκ³Ό κ²°ν©νμ¬ λμ ν λ§ μ μ©, μ κ·Όμ± κ°ν, μ±λ₯ μ΅μ ν λ±μ λ€μν μ΄μ μ μ»μ μ μμ΅λλ€. μ΄λ¬ν μ κ·Ό λ°©μμ μ¬μ©μ κ²½ν(UX) κ°μ κ³Ό ν¨κ», μ μ§λ³΄μμ±μ΄ λ°μ΄λ μ½λλ² μ΄μ€λ₯Ό ꡬμΆνλ λ° ν¬κ² κΈ°μ¬ν©λλ€.
μ€μ νλ‘μ νΈμμλ λμμΈ μμ€ν κ³Ό μ°κ³νμ¬, μμ΄μ½ λ° SVG μ»΄ν¬λνΈλ₯Ό μ€μμμ κ΄λ¦¬νκ³ μΌκ΄λ μ€νμΌμ μ μ©νλ κ²μ΄ μ€μν©λλ€. λν, μ¬μ©μ νΌλλ°±κ³Ό μ κ·Όμ± ν μ€νΈλ₯Ό ν΅ν΄ μ§μμ μΌλ‘ κ°μ ν΄ λκ°λ©΄, λͺ¨λ λλ°μ΄μ€μμ μ°μν νμ§μ UIλ₯Ό μ 곡ν μ μμ κ²μ λλ€.
리μ‘νΈ μ ν리μΌμ΄μ κ°λ° μ, SVGμ μμ΄μ½ μ»΄ν¬λνΈ νμ©λ²μ μ κ·Ή λμ νμ¬, λ²‘ν° κΈ°λ° κ·Έλν½μ μ₯μ μ μ΅λν νμ©νμκΈΈ λ°λλλ€. μ΄λ₯Ό ν΅ν΄ κ³ ν΄μλ λμ€νλ μ΄μμλ μ λͺ ν UIλ₯Ό μ μ§νκ³ , μ¬μ©μμμ μΈν°λμ μ λμ± νλΆνκ² λ§λ€μ΄ 보μΈμ.
λκΈ