피그마

피그마에서 3D 아이콘 만드는 방법

로

요즘 웹이나 앱 디자인을 보면 살짝 입체감 있는 3D 아이콘들이 눈에 띄잖아요. 저도 그런 스타일을 만들고 싶어서 피그마(Figma)로 3D 느낌의 아이콘을 직접 만들어봤어요. 막상 해보니까 생각보다 어렵지 않았고, 몇 가지 플러그인과 팁을 활용하면 누구나 쉽게 만들 수 있더라고요. 오늘은 제가 직접 해본 방법을 꿀팁까지 다 정리해서 공유할게요.

1. 기본 셰이프(Shape)로 구조 만들기

일단 3D 아이콘도 기본은 2D 도형에서 출발합니다. 피그마 안에서 기본 도형(원, 사각형, 다각형 등)을 활용해서 베이스 형태를 잡아주세요.

팁:

  • 가능한 단순한 형태로 시작하세요. 복잡할수록 나중에 3D 느낌 살리기가 어려워요.
  • 테두리(Stroke)를 두껍게 하고, 둥근 모서리(Radius)를 넣으면 더 부드럽고 귀여운 느낌이 납니다.

2. Layer Blur를 활용한 입체감 주기

피그마에서는 3D처럼 보이게 할 때 ‘Layer Blur’ 효과를 활용할 수 있어요. 그림자나 하이라이트를 직접 그리는 대신, 흐림 효과를 주면 훨씬 자연스럽게 입체감이 살아나요.

주요 설정:

  • 그림자는 아래쪽으로 Layer를 복제하고, 어둡게 칠한 다음 Layer Blur 적용
  • 하이라이트는 위쪽에 밝은 색으로 작은 Layer Blur 적용

링크: Layer Blur 공식 설명 보기

3. 플러그인 활용: Vectary 3D Elements

조금 더 본격적으로 3D 느낌을 내고 싶으면, Vectary 3D Elements라는 플러그인을 써보세요. 피그마 안에서 바로 간단한 3D 오브젝트를 불러오고, 수정할 수 있습니다.

주요 특징:

  • 3D 텍스트, 버튼, 아이콘 생성 가능
  • 색상, 빛 방향 설정 가능
  • 피그마 캔버스 안에 바로 삽입 가능

링크: Vectary 3D Elements 설치하기

4. 플러그인 활용: Spline Integration

Spline은 원래 독립된 3D 디자인 툴인데, 피그마랑 연동할 수 있어요. 복잡한 3D 오브젝트를 Spline에서 만들고, Figma에 바로 가져올 수 있습니다.

주요 특징:

  • 복잡한 3D 오브젝트 제작 가능
  • 인터랙티브 효과까지 지원
  • Figma 플러그인으로 연동 가능

링크: Spline 플러그인 설치하기

5. 색감과 조명 느낌 살리기

3D 아이콘은 색감과 조명 느낌이 엄청 중요해요. 기본적인 팁을 정리하면:

  • 밝은 톤과 어두운 톤을 대비시켜 입체감을 표현하기
  • 광원(빛의 방향)을 하나 정해서, 그림자와 하이라이트 방향을 일관성 있게 맞추기
  • 과도하게 그라데이션을 쓰기보다는, 단순하지만 톤 차이를 명확하게 주기

이렇게 하면 손맛나는 3D 느낌을 훨씬 자연스럽게 낼 수 있어요.

6. 실전 예시: 간단한 3D 버튼 만들기

실제로 제가 최근에 작업했던 간단한 예시를 공유할게요.

  1. 원형 버튼 기본 도형 만들기
  2. 동일한 크기로 하나 복제해서 약간 아래로 이동, 색상 어둡게, Layer Blur 적용
  3. 원본 위에 텍스트 얹고, 텍스트에도 약간의 Drop Shadow 추가
  4. 버튼 위쪽에 살짝 밝은 원을 덧대서 하이라이트 느낌 만들기

이렇게 하니까 5분 만에 나름 괜찮은 3D 버튼이 완성됐어요. 이런 식으로 차근차근 쌓아가면 됩니다.

7. 주의할 점: 너무 과하지 않게

요즘 트렌드는 “살짝” 입체감을 주는 정도지, 옛날 플래시 스타일처럼 무겁고 번쩍이는 3D를 원하는 건 아니에요. 적당히 부드럽고, 깔끔한 입체감만 주는 게 훨씬 세련되어 보여요.

그래서 만들 때 항상 한 발짝 물러나서, “너무 과하지 않나?” 점검하는 게 중요합니다.

최종 정리

  • 피그마 기본 도형으로 시작하되, Blur와 그림자 활용으로 입체감을 살리자.
  • 필요한 경우 Vectary나 Spline 같은 플러그인으로 한 단계 더 3D 느낌을 강화할 수 있다.
  • 색감과 조명 방향을 일관되게 잡는 게 완성도를 좌우한다.

처음에는 조심스럽게 따라 하다가, 점점 익숙해지면 자기 스타일로 변형해서 더 멋진 결과물도 만들 수 있어요. 저도 처음엔 시행착오 많았는데, 계속 해보니까 손에 익더라고요. 피그마에서도 충분히 3D 감성 살릴 수 있으니까 꼭 도전해보세요.

AI로 피그마에서 디자인 아이디어 브레인스토밍하는 꿀팁

로

디자인할 때 아이디어가 막혀서 진짜 멍하게 화면만 바라볼 때 많지 않나요? 저도 그런 순간이 많았어요. 특히 빠르게 무드보드나 와이어프레임 초안을 잡아야 할 때는 시간이 촉박해서 더 막막하죠. 그런데 요즘은 피그마(Figma)에서 AI 플러그인을 활용해서 브레인스토밍을 훨씬 수월하게 하고 있어요. 직접 써보고 정리한 실전 꿀팁들을 오늘 공유해볼게요.

1. Magician으로 빠르게 아이디어 스케치하기

Magician 플러그인은 디자인 아이디어 초안을 정말 빠르게 그려낼 수 있어요. 원하는 화면이나 기능을 설명하는 짧은 문장을 입력하면, 기본적인 레이아웃이나 버튼 구성 같은 걸 바로 제안해줘요.

예를 들면 “스터디 그룹 앱 메인 화면”이라고 치면, 버튼, 카드, 리스트 구성까지 자동으로 생성해줘서 아이디어를 구체화하는 데 큰 도움이 됩니다.

주요 특징:

  • 기본 레이아웃 생성
  • 텍스트, 버튼 등 구성 요소 제안
  • 초안 단계에 최적화

링크: Magician 설치하러 가기

2. Galileo AI로 다양한 화면 구조 제안받기

Galileo AI는 Magician보다 조금 더 본격적으로 “전체 페이지” 느낌을 만들어줘요. 원하는 앱 종류나 웹사이트 유형을 입력하면, 홈화면, 로그인 화면, 대시보드 등 다양한 화면을 설계해줍니다.

특히 처음 기획할 때 페이지 구성에 대한 아이디어가 부족할 때 정말 강력합니다. 여러 버전을 비교하면서, 어떤 흐름이 좋은지 결정할 수 있었어요.

주요 특징:

  • 다양한 페이지 유형 생성
  • 대시보드, 마이페이지 같은 복잡한 구조도 제안 가능
  • 빠른 초기 스케치에 최적

링크: Galileo AI 둘러보기

3. FigJam AI로 무드보드/아이디어 맵 만들기

피그마 안에 있는 FigJam에도 AI 기능이 들어왔다는 거 알고 있었나요? FigJam AI를 활용하면 브레인스토밍 맵, 무드보드, 사용자 흐름도 같은 걸 AI가 제안해줍니다.

특히 혼자서 브레인스토밍할 때 막연한 생각을 구체적인 흐름으로 정리할 수 있어서 큰 도움이 됐어요. “어떤 사용자 플로우를 잡을까” 고민할 때 추천합니다.

주요 특징:

  • 무드보드 자동 생성
  • 사용자 흐름(UX 플로우) 맵핑 지원
  • 팀 브레인스토밍 세션에도 유용

링크: FigJam AI 알아보기

4. Ando로 컴포넌트 베이스 아이디어 확장하기

브레인스토밍은 큰 그림만 잡는 게 아니라, 실제 UI 구성 요소(버튼, 카드 등) 아이디어도 필요하잖아요. 그럴 때 Ando 플러그인을 쓰면 스타일을 선택해서 컴포넌트를 자동 생성할 수 있어요.

특히 디자인 시스템 기반 작업할 때, 다양한 스타일을 미리 비교해보고 결정할 수 있어서 아주 유용했습니다.

주요 특징:

  • 다양한 스타일 옵션 지원
  • 실무용 컴포넌트 빠른 생성
  • 초기 아이디어 확장에 적합

링크: Ando 공식 페이지

5. 실전 브레인스토밍 플로우 추천

제가 요즘 실제로 사용하는 브레인스토밍 플로우를 정리하면 이렇게 됩니다.

  1. FigJam AI로 전체 흐름, 무드보드 뼈대 잡기
  2. Galileo AI로 각 화면(홈, 로그인 등) 초안 뽑기
  3. Magician으로 디테일한 버튼, 문구, 레이아웃 추가
  4. Ando로 스타일링 가능한 컴포넌트 테스트

이렇게 AI를 단계별로 활용하면, 아이디어가 막힐 틈이 없습니다. 속도도 빨라지고, 다양한 시도를 해볼 수 있어서 결과물 퀄리티도 높아지더라고요.

6. 주의할 점: AI는 초안일 뿐, 최종은 내 손으로

AI가 제안해주는 아이디어는 정말 다양하고 신선하지만, 그대로 쓰기엔 부족한 부분도 있어요. 결국 최종 디자인은 사람이 직접 다듬어야 완성도가 높아집니다.

AI는 어디까지나 “브레인스토밍 보조도구”라고 생각하고, 직접 터치해서 디테일을 살리는 걸 잊지 말아야 해요.

최종 정리

  • 아이디어가 막혔을 때, 혼자 고민하지 말고 AI 플러그인 도움 받아보세요.
  • 다양한 플러그인을 조합하면 더 풍성한 결과를 얻을 수 있어요.
  • 최종 완성도는 여전히 디자이너의 손끝에서 결정됩니다.

저도 처음에는 AI가 진짜 쓸모 있을까 의심했지만, 직접 해보니까 오히려 창의력을 더 키워주는 느낌이었어요. 디자인 초반 브레인스토밍이 고민인 분들께 꼭 추천합니다.

Figma Automator로 반복 작업을 AI처럼 자동화하는 방법

로

디자인하다 보면 진짜 별거 아닌 반복 작업에 시간이 어마어마하게 쏟아질 때가 있어요. 버튼 하나 수정하는 것도 한두 개가 아니고, 텍스트 하나 바꾸려 해도 프레임 수십 개를 뒤져야 하죠. 그래서 저는 아예 이런 스트레스를 줄이려고 Figma Automator 플러그인을 본격적으로 써보기로 했어요. 오늘은 제가 직접 사용하면서 얻은 노하우를 정리해서 공유할게요.

1. Figma Automator란 무엇인가?

Figma Automator는 피그마(Figma) 안에서 반복적인 수작업을 자동화해주는 플러그인이에요. 디자이너가 직접 플로우를 세팅하면, 그다음부터는 버튼 한 번 클릭으로 프레임 복사, 텍스트 변경, 스타일 적용 같은 작업을 쭉 이어서 해줍니다.

주요 특징:

  • 반복 작업을 플로우로 구성 가능
  • 다양한 액션(텍스트 변경, 레이어 복사 등) 지원
  • 복잡한 작업도 조건문(if/else)으로 설정 가능

링크: Figma Automator 설치하기

2. Automator 기본 사용법: 플로우 만들기

처음 Automator를 열면 플로우를 새로 만들 수 있어요. 플로우는 쉽게 말하면, “어떤 작업을 어떤 순서로 진행할지”를 정하는 거예요. 예를 들어, 버튼의 텍스트를 모두 바꾸고 싶다면:

  1. ‘Find and Replace Text’ 액션 추가
  2. 바꾸고 싶은 텍스트 입력
  3. 변경할 새로운 텍스트 입력

이런 식으로 단계별로 세팅하면 됩니다.

팁:

  • 플로우 이름을 명확하게 적어야 나중에 헷갈리지 않아요
  • 자주 쓰는 플로우는 템플릿처럼 저장해두면 진짜 편합니다

3. 자주 쓰는 Automator 액션 모음

제가 개인적으로 많이 쓰는 액션들을 소개할게요.

  • Find and Replace Text: 텍스트 일괄 변경할 때 필수
  • Duplicate Node: 프레임이나 레이어 복사해서 새로운 작업 시작할 때
  • Rename Node: 레이어 네이밍 규칙 통일할 때 사용
  • Set Fill Color: 버튼이나 카드 색깔 일괄 변경할 때 아주 유용
  • Change Font: 전체 폰트 스타일 통일할 때 한 번에 처리 가능

4. Automator 고급 사용법: 조건문 활용하기

반복 작업에서도 조건이 필요한 경우가 많아요. 예를 들어, 텍스트가 ‘Submit’인 버튼만 색상을 변경하고 싶을 때. 이럴 때 조건문을 쓰면 됩니다.

  1. ‘If Text Equals’ 조건 추가
  2. 조건에 맞으면 ‘Set Fill Color’ 실행

이렇게 플로우를 짜면, 필요한 부분만 정확하게 작업할 수 있어요. 복잡한 페이지 작업할 때 이 기능 덕분에 시간을 엄청 아꼈습니다.

5. Automator 실제 사용 예시

최근에 진행한 모바일 앱 디자인에서, 버튼 100개 이상을 전부 새로운 브랜드 컬러로 변경해야 했어요.

예전 같으면 하나하나 들어가서 색 바꾸고, 텍스트 수정하고 난리였겠죠. 그런데 Automator로 플로우 한 번 설정해두고 클릭 한 번 하니까, 진짜 10초 만에 끝났어요. 이런 거 한두 번 경험하면 다시 수작업으로 돌아가기 힘들어집니다.

간단한 예시 플로우:

  • ‘Find and Replace Text’로 버튼 문구 변경
  • ‘Set Fill Color’로 버튼 배경색 일괄 변경
  • ‘Change Font’로 버튼 텍스트 폰트 통일

6. Automator 사용 시 주의할 점

  • 플로우 실행 전에 꼭 파일 백업하세요. 한 번에 여러 작업을 하다 보면 실수했을 때 되돌리기 힘들 수 있어요.
  • 플로우 복잡하게 짜기 전에, 먼저 간단한 테스트 플로우로 검증하는 게 좋아요.
  • 아주 세밀한 제어가 필요한 작업(특정 프레임 내 특정 텍스트만 변경 등)은 아직 수작업이 더 빠를 수도 있어요.

7. 최종 정리: Figma Automator는 이런 사람에게 강력 추천

  • 대규모 디자인 시스템 다루는 디자이너
  • 화면 수십~수백 개를 한꺼번에 수정해야 하는 상황
  • 텍스트, 컬러, 폰트 등 반복되는 수정을 줄이고 싶은 사람

처음에는 플로우 짜는 게 귀찮게 느껴질 수도 있는데, 한두 번 성공 경험을 하면 그다음부터는 손이 먼저 Automator를 켜게 될 거예요. 제 경우도, 지금은 무조건 기본 플로우를 만들어두고 시작합니다.

자동화는 귀찮음을 없애주는 게 아니라, 진짜 필요한 곳에 에너지를 몰아주기 위한 거라는 걸 직접 느꼈어요. Figma Automator 덕분에 디자인 작업이 훨씬 전략적이고 효율적으로 변했습니다.

AI로 UX Writing까지 끝내는 피그마 플로우 만들기

로

요즘 디자인하면서 제일 시간을 많이 잡아먹는 게 뭘까 생각해보면, 저는 늘 텍스트 작업이었어요. 특히 UX Writing은 간단해 보여도 진짜 고민되는 부분이 많잖아요. 그런데 최근에 피그마(Figma) 플러그인 몇 개를 활용하면서, 거의 AI로 처음부터 끝까지 UX Writing 플로우를 다 세팅해버리는 방법을 찾았어요. 오늘은 제가 직접 해본 과정을 그대로 공유할게요.

1. Magician으로 기본 텍스트 자동 생성하기

처음 UX Writing을 시작할 때는 화면마다 버튼, 문구 같은 기본 텍스트부터 잡아야 하잖아요. 이때 Magician 플러그인이 진짜 유용했어요. 프롬프트 창에 “쇼핑몰 회원가입 화면”이라고 입력하면, 버튼 문구, 설명문까지 한꺼번에 생성해줍니다.

주요 특징:

  • 버튼 텍스트 자동 제안
  • 짧은 설명문, 안내 문구까지 지원
  • 생각보다 자연스러운 영어 결과물

링크: Magician 설치하러 가기

2. Content Reel로 더미 데이터 채우기

기본 문구가 준비됐으면, 화면에 더미 텍스트나 사용자 이름 같은 걸 채워야 하잖아요. 그럴 때 Content Reel 플러그인을 같이 썼어요. 이름, 이메일, 주소 같은 걸 원하는 만큼 랜덤으로 채워줘서 프로토타입이 훨씬 실제 같아져요.

주요 특징:

  • 이름, 이메일, 주소 데이터 자동 입력
  • 다국어 데이터 지원
  • 커스텀 데이터 업로드 가능

링크: Content Reel 설치하러 가기

3. CopyDoc으로 텍스트 버전 관리하기

버튼이나 설명문 같은 걸 한번 뽑아놨다고 끝나는 게 아니죠. 수정하고, 버전 바꾸고, 최종 확정까지 관리하는 게 은근 복잡합니다. 이때 CopyDoc 플러그인을 쓰면 버전 관리가 엄청 편해져요. 화면별로 어떤 문구를 썼는지, 수정 내역까지 정리할 수 있습니다.

주요 특징:

  • 텍스트 버전 관리 기능
  • 페이지별 텍스트 내보내기/불러오기 가능
  • 수정 히스토리 확인 가능

링크: CopyDoc 사용해보기

4. Wized와 연결해서 진짜 데이터 반영하기

프로토타입을 진짜 제품처럼 만들고 싶을 때는 Wized를 사용했습니다. Figma 디자인과 실제 데이터베이스를 연결할 수 있어서, 가상의 사용자 데이터를 연결해서 테스트할 수 있어요. 이걸 쓰니까 프로토타입이 거의 완제품 수준으로 리얼하게 보이더라고요.

주요 특징:

  • 피그마와 데이터베이스 연동
  • 실시간 데이터 반영 가능
  • 노코드 기반이라 개발 없이 연결 가능

링크: Wized 공식 페이지

5. 최종 정리: AI 플로우로 UX Writing 완성하는 방법

전체 플로우를 정리하면 이렇게 됩니다.

  • Magician으로 화면별 기본 텍스트 초안 생성
  • Content Reel로 더미 데이터 채워서 실감나게 구성
  • CopyDoc으로 텍스트 버전 관리하고 히스토리 남기기
  • Wized로 진짜 데이터 연결해서 리얼한 프로토타입 만들기

처음에는 “진짜 이렇게까지 자동화가 될까?” 반신반의했는데, 몇 번 반복하다 보니까 정말 손에 익더라고요. 물론 모든 문구를 AI가 완벽하게 써주진 않아요. 대신 초안을 뽑고 다듬는 데 드는 시간을 엄청나게 줄여줍니다.

덕분에 요즘은 디자인보다 UX Writing 준비하는 시간이 훨씬 짧아졌고, 그만큼 더 많은 테스트와 수정을 여유 있게 할 수 있게 됐어요. AI는 결국 시간을 벌어주는 도구라는 걸 다시 느꼈습니다.

UX Writing 때문에 작업 속도가 막히고 있다면, 꼭 한번 이 플로우로 적용해보세요. 진짜 세상이 달라집니다.

피그마 AI 플러그인 TOP 5 비교 분석

로

디자인할 때 AI를 쓰는 게 진짜 당연해진 요즘, 특히 피그마(Figma)에서는 AI 플러그인들이 빠르게 발전하고 있어요. 저도 처음에는 “설마 AI가 디자인을 대신해줄까?” 반신반의했는데, 직접 써보니까 속도도 확 오르고, 결과물 퀄리티까지 꽤 괜찮더라고요. 그래서 오늘은 제가 실제로 써본 피그마 AI 플러그인 중에서 제일 유용했던 것들을 골라서 비교 분석해볼게요.

1. Magician – 디자인 마법사를 꿈꾼다면

Magician은 피그마에서 가장 유명한 AI 플러그인 중 하나예요. 버튼 문구 짓기, 아이콘 생성, 심지어 짧은 설명문까지 빠르게 만들어줘요. 특히 디자인 초안 만들 때, 아이디어를 빠르게 시각화할 수 있어서 엄청 유용했습니다.

주요 특징:

  • 버튼, 문구, 아이콘 자동 생성
  • 자연스러운 UX Writing 지원
  • 초기 아이디어 빠른 시각화

링크: Magician 설치하러 가기

2. Galileo AI – 프롬프트만 치면 와이어프레임 완성

Galileo AI는 텍스트로 명령만 주면 와이어프레임을 뚝딱 만들어주는 플러그인이에요. 예를 들면, “쇼핑몰 로그인 페이지”라고 입력하면 기본적인 레이아웃을 바로 만들어줘요. 아이디어 스케치 단계에서 진짜 속도가 다릅니다.

주요 특징:

  • 텍스트 입력만으로 레이아웃 생성
  • 다양한 페이지 유형 지원
  • 스케치 단계에 최적화

링크: Galileo AI 둘러보기

3. Ando – 컴포넌트를 알아서 척척

Ando는 실무용 컴포넌트를 빠르게 만들어주는 AI 플러그인이에요. 버튼, 카드, 리스트 등 기본 UI 요소를 스타일 맞춰 자동으로 만들어줘서 디자인 시스템 만들 때 시간 절약이 엄청 됩니다.

주요 특징:

  • 다양한 스타일 설정 가능
  • 실무 적용 가능한 컴포넌트 생성
  • 대규모 디자인 시스템 초안 작업에 최적화

링크: Ando 공식 페이지

4. Genius – 디자인 영감이 필요할 때

Genius는 조금 다르게 접근해요. 주어진 키워드에 맞춰서 다양한 스타일의 디자인 컨셉을 제안해줘요. 뻔한 스타일이 아니라 가끔은 예상 못한 레이아웃이나 색 조합을 제안해줘서, 영감 받을 때 정말 좋아요.

주요 특징:

  • 다양한 디자인 스타일 추천
  • 영감 확장에 최적화
  • 새로운 접근이 필요할 때 강력함

링크: Genius 사용해보기

5. Automator – 반복 작업 자동화의 끝판왕

Automator는 수십 개 텍스트 변경, 프레임 복사, 컴포넌트 업데이트 같은 지루한 반복 작업을 AI처럼 처리해줘요. 처음 플로우만 세팅해두면 이후에는 진짜 손 안 대고 자동으로 작업할 수 있어서, 특히 페이지 수정 작업할 때 체감이 큽니다.

주요 특징:

  • 반복 작업 완전 자동화
  • 쉬운 플로우 설정
  • 대규모 수정/업데이트에 최적

링크: Automator 다운로드

최종 추천 정리

빠르게 한눈에 정리하면 이래요.

  • 아이디어 초안 ➡ Magician
  • 와이어프레임 뚝딱 ➡ Galileo AI
  • 디자인 시스템 구축 ➡ Ando
  • 영감이 필요할 때 ➡ Genius
  • 지루한 반복작업 끝내기 ➡ Automator

결론은, AI가 디자인을 “완성”해주는 건 아니고, 시간을 줄여주고 방향을 잡아주는 데 정말 강력하다는 겁니다. 저도 초반엔 “AI가 다 해주겠지?” 싶었지만, 결국은 사람 손이 들어가야 퀄리티가 올라가더라고요. 대신 AI 덕분에 더 빠르게 시작하고, 더 창의적인 작업에 에너지를 쏟을 수 있어요.

요즘 제 세팅은 보통 Magician으로 키워드 정리, Galileo로 기본 골격 뽑고, Ando로 컴포넌트 세팅하고, Automator로 반복 작업 정리하는 방식이에요. 이 루틴만 제대로 잡아도 체력 세이브 확실합니다.

앞으로 피그마랑 AI는 더 가까워질 거고, 이 흐름을 타는 게 진짜 중요한 것 같아요. 무조건 직접 써보고 자기 스타일에 맞게 다듬어보세요.