좋은 디자인은 디테일에서 완성됩니다. 그 디테일을 책임지는 게 바로 아이콘입니다. 오늘은 10년차 실무 디자이너가 알려주는, 실전에서 통하는 벡터 아이콘 제작의 기본기를 확실하게 잡아드리겠습니다.
1. 왜 벡터(Vector) 아이콘인가?
- 확대/축소에 강함 - 픽셀 깨짐 없이 모든 해상도에 대응
- 파일 용량이 작음 - 앱, 웹 퍼포먼스 향상
- 수정과 재활용이 쉬움 - 빠른 유지보수 가능
👉 결론: 실무에서는 벡터 아이콘이 기본입니다. PNG? JPG? 이제는 구시대 이야기입니다.
2. 벡터 아이콘의 기본 구조 이해하기
- 패스(Path) - 점과 선으로 구성된 경로
- 앵커 포인트(Anchor Point) - 패스의 꺾이는 지점
- 핸들(Handle) - 곡선을 부드럽게 조정하는 도구
👉 실전 Tip:
곡선 하나를 만들 때도 핸들을 정확히 다루는 연습을 해야 퀄리티가 달라집니다.
3. Figma로 벡터 아이콘 만들기 기본 실습
3.1 Pen Tool로 기본 도형 만들기
- Figma를 열고 Pen Tool(P)을 선택합니다.
- Shift 키를 누른 채 클릭하여 직선을 그리고, 앵커 포인트를 추가합니다.
- 곡선을 만들 때는 드래그해서 핸들을 조정합니다.
3.2 도형 툴 활용하기
- Rectangle, Ellipse, Polygon 도구를 사용해 기본 도형을 만들고, Boolean Operations(Combine, Union, Subtract 등)를 이용해 복합 아이콘을 만듭니다.
3.3 Path 편집하기
- 도형을 더블 클릭해 Path를 활성화한 뒤, 앵커 포인트를 추가/삭제하거나 이동해 모양을 다듬습니다.
👉 실전 Tip:
아이콘은 24x24, 32x32, 48x48 사이즈 그리드 안에서 작업하는 걸 기본으로 하세요.
4. 좋은 아이콘의 기준
4.1 일관성
- Stroke(선 두께)는 모든 아이콘에 동일하게 유지합니다.
- 코너 스타일(Sharp, Rounded 등)을 통일합니다.
4.2 단순성
- 복잡한 디테일은 최대한 줄입니다.
- 빠르게 알아볼 수 있는 형태가 최우선입니다.
4.3 가독성
- 48px 이하 작은 사이즈에서도 선명하게 보여야 합니다.
👉 실전 Tip:
아이콘 하나 그릴 때마다 50% 줄여서 미리보기 하세요. 작은 사이즈에서도 선명해야 진짜 제대로 만든 겁니다.
5. 실습: 간단한 '홈(Home)' 아이콘 제작
5.1 기본 도형 배치
- 24x24 Frame 생성
- Pen Tool로 삼각형(지붕) 그리기
- Rectangle로 네모(집 본체) 추가
5.2 Path 정리
- 두 도형을 Union(Boolean Operation)으로 합칩니다.
- 불필요한 앵커 포인트 정리
5.3 Stroke 설정
- 선 두께 2px 설정
- Stroke Alignment는 Center로 고정
5.4 미세 조정
- 크기 조정 → Frame 중앙 정렬
- 작은 화면에서도 깔끔하게 보이는지 체크
6. SVG로 아이콘 저장하기
6.1 SVG Export 방법
- 완성된 아이콘을 선택합니다.
- 오른쪽 Export 섹션에서 Format을 SVG로 선택합니다.
- Export 버튼 클릭!
6.2 SVG 파일 관리 꿀팁
- 폴더를 구분해 아이콘 카테고리별로 정리합니다.
- 파일명은 짧고 직관적으로: ex) home.svg, search.svg
👉 실전 Tip:
SVG 최적화 툴(SVGO 등)을 사용해 코드 크기를 줄이면 퍼포먼스가 훨씬 좋아집니다.
7. 벡터 아이콘 제작 시 주의사항
- Stroke(선 두께) 대신 Fill(채움) 방식으로 만드는 경우, 스케일링 시 품질 저하를 주의해야 합니다.
- 복잡한 경로(Path)는 단순화해서 관리합니다.
- 레이어 이름을 정리해두면 나중에 SVG 최적화할 때 편합니다.
결론
벡터 아이콘 제작은 디자이너의 기본기입니다. 오늘 배운 내용을 기반으로 연습하고, 반복하고, '작은 디테일이 명작을 만든다'는 걸 몸으로 체득하세요.
아이콘 하나를 대충 만들지 마세요. 이 작은 요소 하나가 전체 디자인의 완성도를 좌우합니다.
다음 시간에는, 완성한 SVG 아이콘을 프로젝트에 어떻게 적용하고 활용하는지 심화편으로 이어가겠습니다.