본문 바로가기

유튜브관련/유튜브-영상목차및소스다운

[유튜브] 피그마 AI 강좌 목차

728x90
반응형

 

안녕하세요. 오쌤입니다.

 

공부의 효과적인 전달을 위해 유튜브를 개설해보았습니다.

블로그와 함께 사용할 예정입니다.

웹프론트엔드의 모든 것을 담아볼 유튜브 계정입니다.

 

주소 : https://www.youtube.com/channel/UCAi3huK5H9VOtB_J5tYk4qg?view_as=subscriber

 

오쌤의 니가스터디

📢 비즈니스관련문의 : ossamstudy@gmail.com 웹퍼블리셔와 웹프론트엔드, 그리고 웹디자인기능사까지 강의합니다. 웹 프론트엔드 개발을 쉽게 배우고 습득하세요. ✨협업, 외부강의, 기업강의 대환

www.youtube.com

 

 

 

 

★ 오쌤의 니가스터디 - 피그마 AI강좌 목차

Chapter 01.   Figma First Draft - 가구 인테리어 만들기 : 

가구 인테리어 앱(furniture interior app)의 모바일 홈 화면을 만들어줘.

포함해야 하는 요소:
1) 상단 헤더(top header) — 앱 로고 또는 텍스트 타이틀
2) 메인 이미지 캐러셀(main image carousel) — 이미지 대신 image placeholders로 구성, 3개의 swipe-style card
3) 카테고리 아이콘(category icons: Sofa, Table, Chair, Lighting)
4) 인기 상품 리스트(popular products section)
   - product cards: image placeholder + name + price
5) 하단 네비게이션 바(bottom navigation bar)

전체 스타일은 warm & modern interior UI로 부탁해.

 

 

 

Chapter 02.   피그마 AI 프롬프트 작성 비법 : 

** 실무자 프롬프트 템플릿

[앱/웹 타입] 화면을 만들어줘. (예: 모바일 앱 홈 화면)
주제: [서비스 설명]

포함해야 하는 요소:
- [요소1 (영문 키워드)]
- [요소2 (영문 키워드)]
- [요소3 (영문 키워드)]
- [요소4 (영문 키워드)]

스타일:
[modern / clean / minimalist / bold / interior-like 등]

플랫폼:
[web / mobile / iOS / Android]

 

 

Chapter 03.   피그마 AI - Make Changes 200% 활용법 : 

Make_Changes_Source.fig
13.47MB

더보기
01. 깔끔 & 모던 스타일 (Clean & Modern)
가장 기본적이면서도 실무에서 활용도가 높은 스타일입니다.

1. Minimalist (미니멀리즘)

"Redesign in a minimalist style with plenty of whitespace." (여백이 많은 미니멀리즘 스타일로 리디자인해줘)

2. Apple Style (애플 스타일)

"Apply an iOS design language with blur effects and thin fonts." (블러 효과와 얇은 폰트를 사용한 iOS 스타일 적용해줘)

3. Corporate Blue (신뢰감 있는 기업)

"Change to a trustworthy corporate style using deep blue colors." (신뢰감 있는 딥 블루 컬러의 기업 스타일로 바꿔줘)

4. Clean Light (깨끗한 라이트 테마)

"Switch to a clean light theme with grayscale text." (무채색 텍스트를 쓴 깔끔한 라이트 테마로 전환해줘)

5. Flat Design (플랫 디자인)

"Make it flat design with no shadows or gradients." (그림자나 그라데이션 없는 플랫 디자인으로 만들어줘)

02. 트렌디 & 힙 스타일 (Trendy & Hip)
포트폴리오나 영한 타겟의 서비스에 적용하기 좋은 스타일입니다.

6. Gen Z Vibe (젠지 감성)

"Redesign with a trendy Gen Z vibe using acid green and black." (애시드 그린과 블랙을 쓴 트렌디한 젠지 감성으로 리디자인해줘)

7. Retro 90s (90년대 레트로)

"Apply a 90s retro pixel art aesthetic." (90년대 레트로 픽셀 아트 미학을 적용해줘)

8. Glassmorphism (글래스모피즘)

"Apply glassmorphism effect to cards and buttons." (카드와 버튼에 글래스모피즘 효과를 적용해줘)

9. Brutalist (브루탈리즘)

"Redesign in a brutalist style with bold typography and outlines." (볼드한 타이포와 외곽선을 쓴 브루탈리즘 스타일로 리디자인해줘)

10. Dark Neumorphism (다크 뉴모피즘)

"Change to a dark neumorphism style." (다크 뉴모피즘 스타일로 바꿔줘)

03. 색상 및 분위기 변경 (Color & Mood)
레이아웃은 유지하되 전체적인 컬러 톤을 바꾸고 싶을 때 사용하세요.

11. Warm & Cozy (따뜻한 감성)

"Use a warm color palette with beige and orange tones." (베이지와 오렌지 톤의 따뜻한 컬러 팔레트 사용해줘)

12. Eco Friendly (친환경 테마)

"Redesign with an eco-friendly theme using natural greens and browns." (자연스러운 녹색과 갈색을 쓴 친환경 테마로 리디자인해줘)

13. Luxury Gold (럭셔리 골드)

"Make it look luxurious using black and gold colors." (블랙과 골드 컬러를 사용해 고급스럽게 만들어줘)

14. Vibrant Pop (생생한 팝 컬러)

"Use high contrast and vibrant pop colors." (높은 대비와 생생한 팝 컬러를 사용해줘)

15. Pastel Tone (파스텔 톤)

"Change to a soft pastel color scheme." (부드러운 파스텔 색조로 바꿔줘)

04. UI 디테일 요소 수정 (UI Elements)
특정 부분(버튼, 폰트, 모서리 등)만 디테일하게 수정할 때 유용합니다.

16. Round Everything (둥근 모서리)

"Make all corners fully rounded." (모든 모서리를 완전히 둥글게 만들어줘)

17. Sharp Edges (직각 모서리)

"Make all buttons and cards sharp-edged (0px radius)." (모든 버튼과 카드의 모서리를 직각으로 만들어줘)

18. Stroke Style (아웃라인 버튼)

"Change all filled buttons to outline style." (모든 채워진 버튼을 아웃라인 스타일로 바꿔줘)

19. Serif Fonts (세리프 폰트)

"Change all headings to a Serif font for a classic look." (클래식한 느낌을 위해 모든 제목을 세리프 폰트로 바꿔줘)

20. Large Text (가독성 향상)

"Increase overall font size for better readability (Accessibility mode)." (가독성을 위해 전체 폰트 사이즈를 키워줘)

 

 

더보기

🎨 Figma Make Changes — 리디자인 프롬프트 20종

1) 모던 + 미니멀 스타일
레이아웃은 유지하고(keep the layout),  
전체 UI를 modern하고 minimal한 스타일로 변경해줘.  
neutral colors와 clean typography 사용.

2) 화이트톤 초미니멀 UI
레이아웃 유지(keep the layout).  
white-based minimal UI로 바꿔줘.  
flat components와 thin typography 사용.

3) 프리미엄 럭셔리 스타일
레이아웃 유지.  
더 premium하고 sophisticated한 느낌으로 바꿔줘.  
dark neutral palette + refined typography 사용.

4) 브랜드 컬러 적용 버전
레이아웃 유지.  
브랜드 컬러 중심의 modern UI로 변환해줘.  
primary color = [#컬러], secondary = neutral gray 사용.

5) 애플 스타일(iOS 스타일)
레이아웃 유지.  
전체 UI를 Apple-like clean, minimal, subtle shadow 스타일로 변경.
SF Pro 느낌의 typography 사용.

6) 구글 머터리얼 3 스타일
레이아웃 유지.  
Material Design 3 스타일로 변경해줘.  
rounded corners, dynamic color palette, bold icons 사용.

7) 다크 모드 변환
레이아웃 유지.  
전체 UI를 dark mode로 변경하고  
neutral-dark palette와 high-contrast text 사용.

8) 라이트 모드 변환
레이아웃 유지.  
전체 스타일을 light mode 중심의 bright palette로 변경.
subtle shadow 사용.

9) 에디터픽/매거진 UI 스타일
레이아웃 유지.  
magazine-like editorial style로 변경해서  
large typography와 bold imagery 스타일 적용.

10) 카드 기반 UI 강화
레이아웃 유지.  
전체 UI를 card-based layout처럼 보이도록  
rounded cards + soft shadow 스타일 적용.

11) 네오브루탈리즘 스타일
레이아웃 유지.  
neobrutalism 스타일로 바꿔줘.  
bold colors, strong outlines, chunky components 사용.

12) 글래스모피즘 스타일
레이아웃 유지.  
glassmorphism 스타일로 변경.  
blurred background + translucent cards 적용.

13) 뉴모피즘 스타일
레이아웃 유지.  
neumorphism 스타일 적용.  
soft shadows + soft highlights 사용.

14) 대시보드 느낌의 프로 UI
레이아웃 유지.  
전체 UI를 dashboard-like professional 스타일로 바꿔줘.  
strong grid + clear typography 사용.

15) 아이콘 중심 UI 스타일 변경
레이아웃 유지.  
전체 UI를 icon-driven 디자인으로 변경.  
minimal labels + bold icons 중심으로.

16) 젠(Zen) 스타일 미니멀 UI
레이아웃 유지.  
Zen minimal UI로 변경.  
soft neutral palette + calm typography 사용.

17) 고급스러운 블랙 & 골드 스타일
레이아웃 유지.  
black & gold premium UI 스타일로 변경해줘.  
high contrast + luxurious typography 사용.

18) 에너지 넘치는 비비드 스타일
레이아웃 유지.  
vivid color palette를 사용한 energetic UI로 변경.  
bold buttons + saturated highlights 적용.

19) 레트로/빈티지 스타일
레이아웃 유지.  
retro/vintage palette와 rounded typography로 변경.
grain effect 느낌 살려줘.

20) 핀터레스트/갤러리 스타일
레이아웃 유지.  
image-first gallery/pinterest-like UI로 바꿔줘.  
clean grid + minimal text 사용.

 

 

 

 

Chapter 04.   피그마 AI - Make Changes 안될 때 위조 족보하기

ch04_피그마AI강제소환술_Source.fig
7.63MB

 

 

 

 

 

Chapter 05.   피그마 AI - Add Interactions 

https://drive.google.com/file/d/1ZKbsUsjrxS9iGFHDBb1R4zLPXzxw1tk-/view?usp=sharing

 

AddInteractions_Source.fig

 

drive.google.com

 

 

 

Chapter 07.   피그마 AI - Image Editor

Image_Editor_Source.fig
0.96MB

 

 

 

728x90
반응형