Pixso에서 SVG 아이콘 만들기: 프레임부터 내보내기까지

벡터 그래픽은 현대적인 인터페이스 디자인에서 널리 쓰이는 방식입니다. 수학적으로 도형을 표현하므로 고해상도 디스플레이나 Retina 화면에서도 래스터 이미지처럼 픽셀이 깨지지 않고 깔끔하게 확대할 수 있습니다. UI 디자이너와 프런트엔드 개발자는 벡터 자산을 사용해 여러 해상도의 파일을 전달하는 일을 줄이고, 기하학적인 인터페이스 그래픽의 파일 용량도 낮출 수 있습니다.

웹 애플리케이션, 모바일 인터페이스, 디자인 시스템 중 무엇을 만들든 SVG 아이콘 제작 방법을 알아 두면 유용합니다. 이 가이드에서는 SVG 형식의 기본을 살펴보고, Pixso에서 SVG 아이콘을 만드는 과정을 단계별로 진행합니다.

1. SVG란 무엇인가요?

SVG는 Scalable Vector Graphics의 약자로, 확장 가능한 벡터 그래픽을 뜻합니다. 월드 와이드 웹 컨소시엄(W3C)이 관리하는 개방형 XML 기반 벡터 이미지 형식입니다. SVG는 텍스트로 된 마크업 코드로 도형을 표현하므로, 벡터 도형을 다른 화면 크기에 맞게 확대해도 그 때문에 파일 용량이 늘거나 선명도가 떨어지지 않습니다.

PNG나 JPEG 같은 래스터 이미지와 달리, 인라인 SVG는 DOM 및 CSS와 직접 연결해 사용할 수 있습니다. 개발자와 디자이너는 SVG 경로를 확인하고, 코드로 선 색상을 동적으로 바꾸거나 요소에 애니메이션을 적용해 상호작용 상태를 표현할 수 있습니다.

2. UI 디자인에 SVG 아이콘을 사용하는 이유

제품 팀이 일반적인 래스터 이미지 대신 벡터 아이콘을 선택하는 데는 크게 세 가지 이유가 있습니다.

1. 유지보수와 개발 비용 절감: SVG를 인라인으로 삽입하거나 currentColor를 활용하도록 설정하면, 동일한 자산을 CSS 변수로 라이트·다크 테마에 맞출 수 있습니다. 테마마다 별도의 파일을 복제할 필요가 없습니다. 디자이너도 여러 크기의 래스터 이미지를 내보내는 대신 하나의 벡터 자산을 제작할 수 있어 개발 전달 부담이 줄어듭니다.
2. 동적인 맞춤 설정: SVG 경로는 CSS와 JavaScript로 제어할 수 있으므로, 웹 애플리케이션에서 아이콘의 색상과 선 굵기를 바꾸거나 포인터를 올렸을 때의 애니메이션을 동적으로 조정할 수 있습니다.
3. 작은 파일과 빠른 로딩: 단순한 아이콘이나 기하학적 기호는 SVG로 만들었을 때 래스터 형식보다 파일 크기가 작은 경우가 많습니다. 적절하게 압축하고 삽입하면 반응형 웹 인터페이스에서 불필요한 네트워크 전송량을 줄이는 데 도움이 됩니다.

3. Pixso에서 SVG 아이콘 만드는 방법

Pixso의 벡터 편집 캔버스와 정밀한 도형 도구를 이용하면 기본 SVG 아이콘을 빠르게 만들 수 있습니다. 아래에서는 균형 잡힌 추가 아이콘, 즉 원 안의 더하기 기호를 만드는 순서를 설명합니다.

1단계: Pixso에서 새 파일 만들기

Pixso 계정에 로그인한 다음 작업 공간에서 New File을 클릭해 빈 공동 작업 캔버스를 엽니다.

2단계: 아이콘 프레임 그리기

상단 도구 모음에서 프레임 도구를 선택하거나 F 키를 누릅니다. 작은 인터페이스 아이콘의 기준 크기로 자주 쓰이는 16×16px 정사각형 프레임을 만듭니다.

3단계: 바깥쪽 원 추가하기

타원 도구(O)를 선택합니다. 프레임 안에서 왼쪽 위 좌표가 (1, 1)이 되도록 14×14px 원을 그리세요. 이때 원의 중심은 (8, 8)입니다. 오른쪽 속성 패널에서 채우기를 없애고, #000000 색상의 1px 선을 지정합니다. 프레임 경계에서 도형까지 1px의 여유를 두고 실제 선의 바깥쪽이 잘리지 않는지 확인하세요.

4단계: 더하기 기호 만들기

사각형 도구(R)를 선택합니다. 1×8px 크기의 세로 막대를 만들고 모서리 반경을 1px로 설정합니다. Command+C 또는 Ctrl+C로 복사한 뒤 Command+V 또는 Ctrl+V로 붙여 넣고, 복제한 막대를 90도 회전합니다. 두 막대의 중심을 원의 중심 (8, 8)에 정확히 맞추세요. 아래 스크린샷은 같은 도형 도구로 원 안에 T 모양을 만든 예시입니다. 이 튜토리얼의 더하기 기호를 만들 때는 가로·세로 사각형이 중심에서 교차하도록 배치해야 합니다.

5단계: SVG로 내보내기

레이어 패널에서 16×16px 상위 프레임을 선택합니다. 내보내기 패널로 이동해 SVG를 선택하고 아이콘 자산을 내보내세요. 이제 개발 전달 전에 검토할 수 있는 SVG 벡터 파일이 준비됩니다.

4. 벡터 아이콘 디자인의 기본 원칙

여러 운영체제에서도 아이콘이 선명하게 보이도록 다음 원칙을 확인하세요.

• 외곽 프레임 크기를 통일하세요: 16×16px, 20×20px, 24×24px처럼 일정한 정사각형 프레임을 기준으로 아이콘을 만듭니다. 외곽 영역이 일정하면 프런트엔드에서 차지할 공간을 예측하기 쉽고, 텍스트 라벨 옆에 정렬하기도 편해집니다.
• 안쪽 안전 여백을 유지하세요: 그리드 크기와 선 두께에 따라 보통 1~2px 정도의 적절한 안쪽 여백을 둡니다. 프레임 내부에 공간을 남겨 두면 선의 바깥쪽 경계나 서브픽셀 안티앨리어싱 영역이 viewBox 가장자리에서 잘리는 일을 줄일 수 있습니다.
• 지정한 상위 프레임을 내보내세요: 이 벡터 작업 흐름에서는 상위 프레임을 내보내야 출력 SVG의 viewBox와 기준 위치를 의도한 프레임에 맞게 유지할 수 있습니다.

5. SVG 요소와 CSS 속성

다음은 SVG에 정의된 기본 도형 요소와 각 요소의 의미를 간단히 정리한 자료입니다.

아래 코드 스크린샷은 원 안에 T 모양을 넣은 예시의 SVG 구조를 보여 줍니다. SVG 영역의 너비와 높이는 각각 16이며, 채우기 없는 원과 내부 도형이 포함되어 있습니다. 이 이미지는 더하기 아이콘의 최종 경로를 보여 주는 자료가 아니므로, 직접 만든 추가 아이콘의 정확한 경로는 자신이 내보낸 SVG 파일에서 확인하세요.

자주 묻는 질문

Q1. SVG 아이콘을 내보내기 전에 선을 윤곽선으로 바꿔야 하나요?

선을 채워진 벡터 경로인 윤곽선으로 바꾸면 선 두께도 도형과 함께 비례해 확대되며, CSS의 선 속성 상속에 따른 시각적 차이를 줄일 수 있습니다. 반대로 선을 그대로 유지하면 개발자가 CSS에서 stroke-width와 stroke-linecap을 조정할 수 있습니다. 동적인 스타일 변경이 필요한지, 도형의 형태를 고정해 보존해야 하는지에 따라 팀에서 방식을 결정하세요.

Q2. 웹 개발에서 아이콘 폰트보다 SVG 아이콘을 사용하는 이유는 무엇인가요?

현대적인 컬러 폰트도 여러 색상의 글리프를 지원하지만, 인라인 SVG는 별도의 폰트 자산 요청 없이 사용할 수 있고 DOM 스타일 및 애니메이션과 직접 연결됩니다. 브라우저 간 렌더링과 접근성 마크업도 더 명확하게 제어할 수 있어 널리 사용됩니다.

Q3. 스크린 리더 사용자가 SVG 아이콘을 이해하도록 하려면 어떻게 해야 하나요?

의미가 없는 장식용 SVG에는 aria-hidden="true"를 지정해 보조 기술이 불필요한 내용을 읽지 않도록 합니다. 검색이나 탐색처럼 아이콘으로 표시하는 버튼에는 부모 button 요소의 aria-label 등으로 명확한 접근 가능한 이름을 제공하세요. 버튼 안의 SVG가 같은 의미를 반복할 뿐이라면 장식 요소로 숨겨 중복 낭독을 피합니다. SVG가 그 자체로 독립적인 의미를 전달하는 이미지일 때만 role="img"와 간결한 title 또는 적절한 이름 연결 방식을 사용하세요.

Q4. 내보낸 SVG 코드에 불필요한 메타데이터가 많으면 어떻게 정리하나요?

벡터 디자인 도구는 편집기 전용 메타데이터, 비어 있거나 기본으로 생성된 그룹, 불필요하게 정밀한 소수점 좌표를 포함할 수 있습니다. 제품 팀은 SVGO 같은 후처리 도구로 내보낸 자산을 정리해 중복 XML 노드를 제거하고 경로 좌표를 단순화합니다. 이렇게 코드를 정리한 뒤 실제 서비스에 적용할 수 있습니다.

마무리

기본 도형 도구와 외곽 프레임 정렬을 익히면 깔끔하고 크기 변경에 유연한 벡터 자산을 만들 수 있습니다.

Pixso는 정밀한 벡터 펜 도구와 아이콘 플러그인을 갖춘 아이콘 디자인 환경을 제공합니다. 플러그인을 통해 바로 활용할 수 있는 수천 개의 컴포넌트에도 접근할 수 있습니다.

또한 Pixso 리소스 커뮤니티에서는 무료 SVG 아이콘과 UI 키트를 찾아보고, 필요에 맞게 수정하거나 다운로드할 수 있습니다.

Pixso에서 직접 시작해 벡터 아이콘 제작과 인터페이스 디자인 작업을 연결해 보세요.