어도비 파이어플라이를 활용하여 전문적인 아이콘을 쉽고 빠르게 만드는 방법을 공유합니다. 무료 아이콘의 한계를 넘어서는 실무적 접근법으로 디자이너의 아이콘 제작에 대한 고민을 해결합니다.
디자이너의 고민
우리는 종종 무료 아이콘의 한계에 부딪힙니다. 특히 실무에서 다양한 분야의 서비스를 제작할 때, 무료 자원만으로는 모든 필요를 충족시키기 어렵죠. 그래서 일부 아이콘은 직접 제작해야 합니다. 하지만 아이콘 디자인은 생각보다 복잡합니다. 단순해 보이는 라인 아이콘 조차도 미세한 선의 두께나 라운드 값에 따라 전체적인 느낌이 달라집니다.
실무에서는 이 아이콘 제작에 적지 않은 시간을 할애합니다. 사실 일반인이 보았을때 큰 차이가 느껴지지 않지만 디자이너는 장인 정신으로 무장하고 0.1픽셀과 싸우며 아이콘을 제작합니다.
저는 근래 생성형 AI가 등장하며 여러가지 툴을 사용해 보고 있습니다. 여러가지 실험 끝에 이 작업을 하는데 최적화 된 툴을 발견했습니다. 제가 상상한 것은 토스의 ‘토스트’ 같은 기능 이었습니다. (토스의 toast가 궁금하다면 블로그 하단의 링크를 참고해주세요.) 어느정도 스타일이 정의되어있고, 간단한 단어 정도의 프롬프트를 입력하면 아이콘이 생성되는 상상이었습니다. 하지만 저는 기업이 아닌 혼자였기에 대량의 학습도 진행할 수 없었고 다른 방법을 고민하게 되었습니다.
어도비 파이어플라이로 쉽고 빠르게 해결
이러한 문제를 해결하기 위해 우리는 어도비 파이어플라이의 ‘스타일 참조’ 기능을 활용할 수 있습니다. 이 기능은 원래 제가 생각한 작업을 위해 개발된 것은 아니지만, 아이콘 제작에 매우 유용합니다. 제가 실제 테스트 했던 과정을 통해 알아보겠습니다.
어도비 파이어플라이 스타일 참조 기능
실제 아이콘 제작을 시작하기에 앞서 우리가 활용할 어도비 파이어플라이의 ‘스타일 참조’ 기능에 대해서 알아야 할 필요가 있습니다. 어도비 파이어플라이(Adobe Firefly)의 스타일 참조 기능은 사용자가 다양한 디자인 요소를 창의적으로 활용할 수 있도록 돕는 도구입니다.
사용자가 특정 이미지나 디자인 스타일을 선택하면 해당 스타일의 이미지로 생성해 주는 기능입니다. 이 기능을 활용하여 아이콘 세트를 만들어 보도록 하겠습니다.
아이콘 생성 하기
먼저 기존에 제작한 대시보드 메뉴입니다. 이 메뉴에 사용된 아이콘들은 자주 사용되기 떄문에 쉽게 구할 수 있는 무료 아이콘 입니다. 하지만 때때로 아이콘 세트의 범주안에 없는 것들이 필요합니다. 이 작업에서는 ‘소’ 형태의 아이콘이 필요했습니다. 사실 이런 독특한 아이콘은 소스를 구하기 어려워 보통 직접 그려야합니다.
1. 어도비 파이어플라이 접속
어도비 파이어플라이 웹사이트에 접속하여 ‘텍스트를 이미지로’의 생성하기를 클릭합니다. 제가 필요한 ‘송아지 얼굴 아이콘’을 프롬프트로 입력해 보겠습니다. 이렇게 제가 생각한 아이콘과는 매우 다른 형태의 이미지를 생성해줍니다.
물론 프롬프트 고수는 매우 디테일하게 프롬프팅을 하여 원하는 스타일을 뽑아낼 것 입니다. 하지만 원하는 목적이 이미 정해진 스타일의 추가 아이콘을 제작하는 것이라면 스타일 참조 기능으로 간단히 해결할 수 있습니다.
2. 스타일 참조 기능 활용하여 아이콘 이미지 생성하기
좌측 패널에 ‘스타일’을 보면 이미지 업로드 버튼이 있습니다. 이곳에 기존에 사용한 아이콘 이미지를 업로드 합니다. 저는 첫번째 홈 아이콘 모양을 업로드 하였고 프롬프트는 수정하지 않았습니다.
몇 초만에 다양한 형태의 아이콘이 생성되었습니다. 세번째 컷이 제가 원하던 형태였고 나머지는 소라고 보기에는 조금 애매한 형태가 나왔네요. 혹시 원하는 이미지를 얻지 못했다면 실망하지 말고 새로 고침을 눌러 원하는 형태가 나올때까지 시도해 봅니다.
때로는 이렇게 프롬프트 단어 하나 차이로 엉뚱한 이미지를 생성하기도 합니다. ‘어린’이라는 단어를 추가해 보았더니 스타일이 복잡해졌습니다.
3. SVG 형태로 변환하기
이렇게 생성된 이미지를 조금 더 원하는 형태로 가공하거나 피그마에서 사용하기 쉽도록 SVG로 변환합니다. SVG 변환도 어도비 사이트에서 바로 무료로 진행하실 수 있습니다. 혹시 사용법을 모른다면 블로그 하단의 링크에서 제가 예전에 업로드한 글을 참고 하시길 바랍니다.
4. 피그마에서 편집하기
피그마에서 열어보니 깔끔하게 SVG 형태로 변환이 되었습니다. 기존 사용된 아이콘과 더 가까운 느낌을 내기 위해 뿔의 색상을 화이트로 변경했습니다.
5. 실제 디자인에 적용
저는 위 과정을 테스트한 후 실제 디자인에 적용해보니 다른 아이콘과 밸러스가 약간 어긋나는 느낌이 들었습니다. 그래서 소의 몸통까지 있는 아이콘을 다시 생성하여 최종 메뉴에 적용하였습니다.
결론
어도비 파이어플라이의 스타일 참조 기능은 아이콘 디자인의 과정을 간소화하고, 전문적인 결과물을 만들 수 있게 해줍니다. 이를 통해 아이콘 디자인에 대한 어려움을 극복하고, 프로젝트에 적합한 맞춤형 아이콘을 손쉽게 제작할 수 있게 됩니다. 이 글을 통해 디자이너들이 실무에서 직면하는 고민을 해결하는 데 도움이 되길 바랍니다.