질문사항
벡터 아이콘을 사용할 때, 크기 조절 시 아웃라인(스트로크)이 고정되어 원하는 디자인이 나오지 않는 문제가 있습니다. PNG로 변환하면 색상 변경이 어려운데, 이런 경우 스트로크가 있는 벡터 아이콘의 크기를 효율적으로 조절하는 방법은 무엇인가요?
답변
벡터 아이콘의 스트로크(아웃라인)가 크기 조절 시 고정되어 발생하는 문제는 피그마에서 흔히 겪는 상황입니다. 이를 해결하고 효율적으로 작업하는 방법은 다음과 같습니다.
1. `Scale` 툴 (단축키 `K`) 사용:
가장 간단하고 효과적인 방법입니다. 아이콘을 선택한 후 키보드에서 `K`를 누르면 `Scale` 툴이 활성화됩니다. `Scale` 툴을 사용하여 아이콘의 크기를 조절하면, 스트로크 두께, 코너 라디우스, 텍스트 크기 등 모든 속성이 비율에 맞춰 함께 스케일됩니다. 일반적인 `Move` 툴 (`V`)로 크기를 조절하면 스트로크 두께는 고정된 채로 크기만 변하지만, `Scale` 툴은 전체를 비례적으로 조절해 줍니다.2. `Outline Stroke` (스트로크 아웃라인) 변환:
아이콘의 스트로크를 더 이상 편집할 필요가 없고, 도형의 일부로 만들고 싶을 때 사용합니다. 아이콘을 선택한 후 `Ctrl/Cmd + Shift + O` (또는 `Object > Outline Stroke`)를 실행합니다. 이렇게 하면 스트로크가 일반적인 `Fill`을 가진 도형으로 변환됩니다. 이후에는 `Scale` 툴이 아닌 `Move` 툴 (`V`)로 크기를 조절해도 스트로크가 함께 스케일됩니다. 단점: 스트로크 속성(두께, 색상 등)을 개별적으로 편집할 수 없게 됩니다. 원본 스트로크를 유지해야 한다면 이 방법은 적합하지 않습니다.3. 컴포넌트 및 인스턴스 관리:
아이콘을 컴포넌트로 만들고, 인스턴스를 사용할 때 `Scale` 툴 (`K`)을 활용하는 것이 좋습니다. 만약 다양한 크기의 아이콘이 필요하다면, 여러 크기의 메인 컴포넌트를 미리 만들어두거나, `Scale` 툴을 사용하여 인스턴스의 크기를 조절하는 워크플로우를 따릅니다.4. `Vector Network` 편집:
매우 복잡한 아이콘의 경우, `Vector Network` 편집 모드(아이콘 더블 클릭)에서 직접 스트로크의 각 포인트를 조절하여 원하는 모양을 만들 수도 있지만, 이는 시간이 많이 소요됩니다.결론:
대부분의 경우, `Scale` 툴 (`K`)을 사용하여 아이콘의 크기를 조절하는 것이 가장 빠르고 효율적입니다. 스트로크를 더 이상 편집할 필요가 없다면 `Outline Stroke`를 사용하여 도형으로 변환하는 것도 좋은 방법입니다.