GPT+Figma로 3D 아이콘 제작하는 초간단 가이드
현직 디자이너가 알려주는 3D 아이콘 제작 실전 가이드
안녕하세요, 비니예요.
저는 요즘 UI/UX 디자이너로 일하면서
"아이콘을 좀 더 특별하게 만들 수 없을까?”라는 고민을 자주 하고 있어요.
그러다 눈여겨본 게 바로 AI를 활용한 3D 아이콘 제작이에요~!
"3D라니 너무 어렵지 않을까?"라고 생각할 수도 있는데요,
요즘은 GPT와 Figma 플러그인, 그리고 몇 가지 툴만 알면 생각보다 쉽게 시도할 수 있어요.
제가 직접 사용하고있는 과정을 단계별로 정리해 드릴게요!!ㅎㅎ
STEP 1. GPT로 스타일 가이드 만들기
먼저 GPT에게 브랜드에 맞는 3D 스타일 가이드를 요청해 보세요!
예를 들어:
우리 브랜드 컬러는 파랑(#2E6FFF), 포인트 컬러는 민트(#00C2A8)이에요.
아이콘은 단순하고 귀엽게, 매트 플라스틱 질감으로 해주세요.
빛은 스튜디오 느낌의 3포인트 조명으로 부탁해요.
이렇게 하면 이후 툴에서 작업할 때 일관성을 유지할 수 있어요.
STEP 2. Figma + Magician 플러그인으로 2D 아이콘 제작하기
Figma에서 Magician 플러그인을 실행하고
원하는 키워드를 입력하면 아이콘을 자동으로 만들어줘요.
원하는 아이콘 버전을 고르세요
불필요한 선을 정리하세요
브랜드 컬러로 다시 색상을 통일하세요
이 과정을 거치면 기본적인 2D 아이콘 시안이 완성돼요!
STEP 3. 2D 아이콘을 3D로 변환하기
방법 1. Vectary
Figma에서 만든 SVG를 Vectary에 업로드하세요
두께를 주고 질감과 빛을 배치하세요
PNG나 GLB 파일로 내보내세요
Vectary는 로고나 단순한 아이콘을 3D로 올릴 때 특히 편리해요~!
방법 2. Spline AI
텍스트 입력: matte plastic lock icon, cyan accent, soft light
이미지 입력: 앞에서 만든 2D 아이콘 PNG 업로드
결과물을 선택하고 카메라와 라이팅을 조정하세요
Spline은 텍스트나 이미지를 바로 3D 오브젝트로 바꿔주고, 장면 편집까지 가능하다는 점이 강점이에요!!
STEP 4. 다시 Figma에 적용하기
정적인 아이콘은 PNG/WebP로 저장해서 Figma에 배치하세요
인터랙션까지 보여주고 싶다면 Anima 플러그인으로 Spline 씬을 프로토타입에 임베드하세요
이렇게 하면 팀원이나 클라이언트에게 결과물을 더 설득력 있게 보여줄 수 있어요.
3D 아이콘 제작 시 주의할 점
빛은 최소한으로: Key, Fill, Rim 정도만 사용하세요
질감 조절: 너무 반짝이면 장난감처럼 보일 수 있으니 러프니스 값을 조절하세요
용량 관리: GLB 파일 압축을 활용해 웹 성능을 고려하세요
실패했을 때는
엣지가 깨져 보일 때 → Figma에서 벡터 패스를 다시 정리하세요
아이콘이 지나치게 반짝일 때 → 메탈니스 값을 낮추고 러프니스를 높이세요
결과물이 어색할 때 → 다른 툴(Vectary/Spline)로 다시 시도해 보세요
AI 툴은 빠르고 재미있지만 아직 완전하진 않아요.
그래서 시안 제작이나 아이디어 확장용으로는 정말 유용하지만,
실제 서비스에 적용할 때는 디자이너가 반드시 다듬는 게 필요해요.
또한 서비스에 반영할 때는 퍼포먼스나 접근성 문제가 생길 수 있어요.
이럴 때는 디자인뿐만 아니라 운영까지 함께 보는 팀과 협업하면 더 안정적이에요.
서비스에 반영할 때는 퍼포먼스나 접근성 문제가 뒤따를 수 있어요.
이럴 때는 단순히 화면 디자인만 다루는 게 아니라,
3D 에셋 제작부터 서비스 적용까지 전 과정을 함께 볼 수 있는 팀과 협업하는 게 훨씬 안정적이에요.
3D 에셋 제작 포트폴리오 출처: 똑똑한개발자예전에 똑똑한개발자 팀과 프로젝트를 진행한 적이 있는데,
인상적이었던 점은 비주얼 퀄리티와 기술적 완성도를 동시에 챙겼다는 것인데요!
3D 에셋도 높은 퀄리티로 제작과 수정을 도와주셨고
실제 서비스 환경에서 성능과 신뢰성을 유지할 수 있도록 UX 설계, 개발 반영,
운영까지 이어지는 전체 흐름을 설계해 주었어요!
그 결과 3D 그래픽이 서비스에 자연스럽게 녹아들었고,
디자인과 기능이 따로 놀지 않는 안정적인 UX를 만들 수 있었어요~
3D 아이콘 제작은 생각보다 어렵지 않게 시작할 수 있고,
작은 시도만으로도 화면에 새로운 활기를 불어넣을 수 있어요.
아직은 실험적인 영역일 수 있지만,
작업 과정에서 얻는 통찰이 분명히 쌓여서 앞으로의 디자인 선택에 도움이 될 거예요.
오늘 소개한 흐름을 토대로, 각자만의 방식으로 확장해 보시면 좋겠습니닷!!!
감사합니다~~~
또 궁금한 주제가 있으시면 댓글 남겨주세요!!
