제품 아이콘의 제작 과정 (새 탭에서 열림)
Figma의 제품 아이콘은 단순한 장식이 아니라 각 제품의 정체성과 기능을 작은 공간에 압축한 상징이다. 디자이너 Tim Van Damme는 일관된 제작 규칙을 바탕으로 제품의 본질을 탐구하고, 수십~수백 개의 시안을 반복 실험해 최종 아이콘을 완성한다. 정해진 공식은 창의성을 제한하는 것이 아니라, 다양한 아이디어를 하나의 제품군으로 묶는 기반이 된다. ## 일관성을 만드는 아이콘 제작 가이드라인 - Figma에 공식적인 아이콘 시스템이 없던 상황에서 Tim이 직접 제작 원칙을 수립했다. - 주요 규칙은 다음과 같다. - 선 두께는 1픽셀로 통일한다. - 내부 컷아웃도 1픽셀 두께를 유지한다. - 선의 끝부분은 둥글게 처리한다. - 아이콘이 주어진 공간을 최대한 균형 있게 채우도록 구성한다. - 다양한 사용 환경을 고려해 세 가지 크기로 제작한다. - 아이콘은 툴바뿐 아니라 대형 광고판과 마케팅 자료에도 사용되므로, 확대·축소했을 때도 형태가 명확해야 한다. - 축소했을 때 선이 뭉개지거나 요소 간 구분이 어려우면 초기 단계에서 해당 시안을 폐기한다. ## 제품의 본질에서 출발하기 - 아이콘은 브랜드 전체의 규칙뿐 아니라 개별 제품의 시각적 정체성도 표현해야 한다. - 작은 공간에 많은 의미를 담기 위해 디자인·제품 팀이 제품과 관련된 핵심 개념과 단어를 먼저 브레인스토밍한다. - Figma Community의 경우 다음과 같은 개념에서 출발했다. - 커뮤니티를 통한 연결 - 동료 간 지식 교환 - 함께 배우는 경험 - 이러한 키워드에서 사람, 나무, 책 같은 상징을 도출하고 다양한 형태로 발전시켰다. - Figma Buzz는 마법, 창작, AI 이미지 생성 같은 주제를 바탕으로 유리 구슬, 별, 마법을 연상시키는 형태를 탐색했다. ## 수십~수백 개의 시안으로 아이디어 발전시키기 - 초기 개념을 정한 뒤에는 하나의 아이디어를 빠르게 확정하지 않고, 아이콘 가족 전체를 반복적으로 변형한다. - 나무가 얼굴이 되고, 얼굴이 만다라가 되며, 추상적인 형태가 회전하고 얽히는 식으로 자유롭게 시각적 연상을 확장한다. - Tim은 창의적 감각을 유지하기 위해 의도적인 “창의적 방황”을 즐긴다고 설명한다. - Figma Make 아이콘을 만들 때는 움직임과 변형을 표현하기 위해 바퀴, 나비, 나침반, 피젯 스피너 등을 실험했다. - Figma Buzz에서는 날개 모양, 선, 더듬이 길이가 다른 벌 아이콘을 하루 동안 수백 개 제작했다. - 반복 작업은 Figma의 가변 폭 선(variable width stroke)과 여러 벡터 레이어 동시 편집 기능을 활용해 효율화했다. ## 규칙과 실험의 균형 - 아이콘 제작에는 선 두께, 크기, 균형 같은 명확한 제약이 있지만, 그 안에서 상징과 형태를 자유롭게 탐험한다. - 따라서 일관된 시스템은 결과를 획일적으로 만드는 공식이 아니라, 창의적인 실험이 브랜드 전체와 조화를 이루도록 돕는 틀이다. - 기존 제품 아이콘을 재설계하고 신규 제품 아이콘을 추가하면서도 전체 제품군이 하나의 시각적 체계로 보이도록 조정했다. 제품 아이콘을 설계할 때는 먼저 일관된 시각 규칙을 정하고, 제품의 핵심 가치를 키워드로 구체화한 뒤, 충분한 수의 변형을 실험하는 접근이 효과적이다. 최종 결과보다 탐색 과정에서 많은 가능성을 비교하고, 실제 사용 크기에서 명확성과 균형을 검증하는 것이 중요하다.
