# πŸͺ„ Prompt Studio (ν”„λ‘¬ν”„νŠΈ 메이컀) > **AI Video & Image Prompt Studio**λŠ” 크리에이터와 λ§ˆμΌ€ν„°λ₯Ό μœ„ν•œ κ³ ν’ˆμ§ˆ AI λΉ„λ””μ˜€ 및 이미지 ν”„λ‘¬ν”„νŠΈ 생성 λ„κ΅¬μž…λ‹ˆλ‹€. λ³΅μž‘ν•˜κ³  좔상적인 ν”„λ‘¬ν”„νŠΈ μž‘μ„± 과정을 논리적이고 μ„ΈλΆ„ν™”λœ 단계별(Step-by-Step) μž…λ ₯ 폼으둜 λ³€ν™˜ν•˜μ—¬, μ‚¬μš©μžκ°€ μ›ν•˜λŠ” AI λΉ„μ£Όμ–Ό 결과물을 μ†μ‰½κ²Œ 섀계할 수 μžˆλ„λ‘ μ§€μ›ν•©λ‹ˆλ‹€. --- ## πŸš€ μ£Όμš” κΈ°λŠ₯ (Key Features) ### 1. 🎬 λΉ„λ””μ˜€ & 이미지 λ©€ν‹° λͺ¨λ“œ 지원 - **λΉ„λ””μ˜€ λͺ¨λ“œ (9단계 μž…λ ₯ + μ΅œμ’… 쑰립 = 총 10단계)** - μƒν’ˆ μ—°μΆœ κ΄‘κ³ , νšŒμ‚¬ 홍보 μ˜μƒ, 감성 일상 브이둜그 λ“± 싀무 λΉ„λ””μ˜€ μ œμž‘ λͺ©μ μ— λ§žμΆ€ν™”λœ κ°€μ΄λ“œ 제곡. - **이미지 λͺ¨λ“œ (7단계 μž…λ ₯ + μ΅œμ’… 쑰립 = 총 8단계)** - 방솑 & λ―Έλ””μ–΄ ν¬μŠ€ν„°/썸넀일, μ†Œμ…œ λ―Έλ””μ–΄ λ§ˆμΌ€νŒ… κ·Έλž˜ν”½, λΈŒλžœλ“œ ν‚€ λΉ„μ£Όμ–Ό & μ œν’ˆ κ΄‘κ³  λ“± λ§ˆμΌ€νŒ…/λ””μžμΈ μš©λ„μ— μ΅œμ ν™”λœ κ°€μ΄λ“œ 제곡. ### 2. πŸ“ 체계적인 단계별 μ„ΈλΆ€ μ„€μ • (Step-by-Step UI) - **κΈ°νšλΆ€ν„° μ—°μΆœ(카메라, 렌즈, μ‘°λͺ…, ꡬ도), μ˜€λ””μ˜€, κΈˆμ§€ μš”μ†Œ(Negative) μ„€μ •κΉŒμ§€**: μ˜μƒ 길이, λΉ„μœ¨, μž₯λ₯΄, 인물(λ‚˜μ΄, μ™Έλͺ¨, ν”ΌλΆ€, 메이크업 λ“±), μ˜μƒ, μ œν’ˆ/μ†Œν’ˆ 정보, μž₯μ†Œ 및 μ‘°λͺ…, 촬영 기법, νƒ€μž„λΌμΈ(λΉ„λ””μ˜€ μ „μš©), μ˜€λ””μ˜€, λΆ€μ • ν”„λ‘¬ν”„νŠΈ λ“± AI 생성 엔진에 ν•„μš”ν•œ λͺ¨λ“  ν•„μˆ˜ λ³€μˆ˜λ₯Ό μ„ΈλΆ„ν™”ν•˜μ—¬ μž…λ ₯ν•  수 μžˆμŠ΅λ‹ˆλ‹€. - **동적 νƒ€μž„λΌμΈ λΉŒλ”**: λΉ„λ””μ˜€ λͺ¨λ“œμ˜ Step 07(νƒ€μž„λΌμΈ)μ—μ„œλŠ” Step 01μ—μ„œ μ„€μ •ν•œ 전체 μ˜μƒ 길이λ₯Ό 기반으둜 μž₯면듀을 λ™μ μœΌλ‘œ μΆ”κ°€, μ‚­μ œ 및 μ‘°μ ˆν•  수 μžˆμŠ΅λ‹ˆλ‹€. 각 μž₯면의 μ‹œκ°„μ€ 전체 μ˜ˆμ‚° λ²”μœ„ λ‚΄μ—μ„œ μžλ™μœΌλ‘œ 계산 및 μ œν•œλ˜μ–΄ μž…λ ₯ 였λ₯˜λ₯Ό λ°©μ§€ν•©λ‹ˆλ‹€. - **μ„€μ • μ œμ–΄ μ΅œμ ν™”**: μ œμž‘ λͺ©μ (ν…œν”Œλ¦Ώ), 프리셋 뢈러였기, μž‘κ°€ μŠ€νƒ€μΌ 레퍼런슀 선택 κΈ°λŠ₯은 μž…λ ₯ ν˜Όμ„ μ„ 쀄이기 μœ„ν•΄ **Step 01(κΈ°λ³Έ 정보) λ‹¨κ³„μ—μ„œλ§Œ λ…ΈμΆœ 및 μ„€μ • κ°€λŠ₯**ν•˜λ„λ‘ μ„€κ³„λ˜μ–΄ μžˆμŠ΅λ‹ˆλ‹€. - **ν•„μˆ˜ ν•­λͺ© ν‘œμ‹œ 및 λ””ν΄νŠΈ 처리**: ν•„μˆ˜ μž…λ ₯ ν•­λͺ© μ™Έμ˜ 빈 칸은 μ΅œμ’… 쑰립 μ‹œ μžλ™μœΌλ‘œ `'μ—†μŒ'`으둜 μ²˜λ¦¬λ˜μ–΄ κΉ”λ”ν•œ ν”„λ‘¬ν”„νŠΈλ₯Ό μœ μ§€ν•©λ‹ˆλ‹€. ### 3. πŸ” μ‹€μ‹œκ°„ ν”„λ‘¬ν”„νŠΈ 프리뷰 (Live Preview) - μ‚¬μš©μžκ°€ ν•„λ“œλ₯Ό μž…λ ₯ν•˜κ±°λ‚˜ νƒœκ·Έλ₯Ό 선택할 λ•Œλ§ˆλ‹€ 우츑 μ˜μ—­μ—μ„œ 쑰립 과정을 μ‹€μ‹œκ°„μœΌλ‘œ 확인할 수 μžˆμ–΄, μ΅œμ’… 결과물이 μ–΄λ–»κ²Œ λΉŒλ“œλ˜λŠ”μ§€ 즉각 νŒŒμ•… κ°€λŠ₯ν•©λ‹ˆλ‹€. ### 4. πŸ’‘ μ „λ¬Έ μš©μ–΄ 툴팁 사전 (Professional Tooltips) - 촬영 기법(광각, ν‘œμ€€, 망원 렌즈, 아웃포컀싱, 보케 λ“±), λΌμ΄νŒ…(백라이트, μ†Œν”„νŠΈλ°•μŠ€, 림라이트 λ“±), μ˜€λ””μ˜€(ASMR, 둜파이 λ“±)의 전문적인 μš©μ–΄λ₯Ό 마우슀 μ˜€λ²„(Hover) μ‹œ μ„€λͺ…ν•΄μ£ΌλŠ” 상세 툴팁 κΈ°λŠ₯이 λ‚΄μž₯λ˜μ–΄ μžˆμŠ΅λ‹ˆλ‹€. ### 5. ⚑ 원클릭 프리셋 및 μ˜ˆμ‹œ μžλ™ μ™„μ„± (Presets & Autofill) - **전체 μ˜ˆμ‹œ μ±„μš°κΈ° / ν˜„μž¬ 단계 μ˜ˆμ‹œ μ±„μš°κΈ°**: μž‘μ„±μ— 어렀움을 λŠλΌλŠ” μ‚¬μš©μžλ₯Ό μœ„ν•΄ 단 ν•œ 번의 클릭으둜 전체 λ˜λŠ” ν˜„μž¬ λ‹¨κ³„μ˜ μž…λ ₯ ν•„λ“œλ₯Ό μ „λ¬Έκ°€ μˆ˜μ€€μ˜ μ˜ˆμ‹œ λ°μ΄ν„°λ‘œ μ¦‰μ‹œ μ±„μšΈ 수 μžˆμŠ΅λ‹ˆλ‹€. - **λͺ©μ λ³„ μ™„μ„±ν˜• 프리셋**: 각 λͺ¨λ“œ 및 λͺ©μ λ³„λ‘œ μ„ΈλΆ„ν™”λœ 30μ’… μ΄μƒμ˜ μ™„μ„±ν˜• 프리셋 데이터λ₯Ό νƒ‘μž¬ν•˜μ—¬, μ›ν•˜λŠ” 레퍼런슀λ₯Ό μ¦‰μ‹œ λΆˆλŸ¬μ™€ μˆ˜μ •ν•  수 μžˆμŠ΅λ‹ˆλ‹€. ### 6. 🎨 μž‘κ°€ μŠ€νƒ€μΌ 레퍼런슀 (Artist Style Database) - μ›¨μŠ€ μ•€λ”μŠ¨(Wes Anderson), 리듀리 슀콧(Ridley Scott), μ™•κ°€μœ„(Wong Kar-wai) λ“± μ˜ν™” 및 λ””μžμΈ κ±°μž₯ 20인의 μŠ€νƒ€μΌ 라이브러리λ₯Ό λ‚΄μž₯ν–ˆμŠ΅λ‹ˆλ‹€. 선택 μ‹œ ν•΄λ‹Ή μž‘κ°€μ˜ νŠΉμ§• ν‚€μ›Œλ“œμ™€ μ•ˆμ „ν•œ ν”„λ‘¬ν”„νŠΈ ν‘œν˜„λ²•μ„ ν•„λ“œμ— μžλ™μœΌλ‘œ μœ΅ν•©ν•˜λ©°, μ‚¬μ΄λ“œλ°”μ— 레퍼런슀 μΉ΄λ“œλ₯Ό μ‹œκ°ν™”ν•©λ‹ˆλ‹€. ### 7. πŸŒ— 닀크/라이트 ν…Œλ§ˆ ν† κΈ€ (Dark/Light Theme) - μ‚¬μš©μžμ˜ 눈 ν”Όλ‘œλ₯Ό λœμ–΄μ£ΌκΈ° μœ„ν•΄ λ―Έλ €ν•œ 닀크 λͺ¨λ“œμ™€ 라이트 λͺ¨λ“œ μ „ν™˜ μΈν„°νŽ˜μ΄μŠ€λ₯Ό μ œκ³΅ν•©λ‹ˆλ‹€. --- ## πŸ“‚ ν”„λ‘œμ νŠΈ ꡬ쑰 (Project Structure) - [index.html](file:///C:/Users/HRDPRO/Documents/promptmaker/index.html): 메인 μ›Ή νŽ˜μ΄μ§€ μΈν„°νŽ˜μ΄μŠ€ ꡬ쑰 및 UI λ ˆμ΄μ•„μ›ƒ - [style.css](file:///C:/Users/HRDPRO/Documents/promptmaker/style.css): λͺ¨λ˜ 닀크 λͺ¨λ“œ/라이트 λͺ¨λ“œ, κ·Έλž˜λ””μ–ΈνŠΈ μ• λ‹ˆλ©”μ΄μ…˜ μŠ€νƒ€μΌμ‹œνŠΈ - [app.js](file:///C:/Users/HRDPRO/Documents/promptmaker/app.js): 양식 동적 λ Œλ”λ§, 툴팁, 프리셋 λ‘œλ“œ, μ‹€μ‹œκ°„ 프리뷰 λ“± 핡심 ν”„λ‘ νŠΈ 둜직 - [configs.js](file:///C:/Users/HRDPRO/Documents/promptmaker/configs.js): λΉ„λ””μ˜€/이미지 단계별 ν•„λ“œ μ„€μ •, μž‘κ°€ μŠ€νƒ€μΌ 정보 및 쑰립 ν…œν”Œλ¦Ώ - [presets.js](file:///C:/Users/HRDPRO/Documents/promptmaker/presets.js): λΉ„λ””μ˜€/이미지 λͺ©μ λ³„ 30μ’… μ΄μƒμ˜ ν’λΆ€ν•œ κ³ ν™”μ§ˆ ν…œν”Œλ¦Ώ 프리셋 데이터 - [package.json](file:///C:/Users/HRDPRO/Documents/promptmaker/package.json): ν”„λ‘œμ νŠΈ 메타데이터 및 둜컬 개발 μ„œλ²„ 슀크립트 - [process.txt](file:///C:/Users/HRDPRO/Documents/promptmaker/process.txt): λΉ„λ””μ˜€ ν”„λ‘¬ν”„νŠΈ 섀계 ν”„λ‘œμ„ΈμŠ€ μ°Έκ³  ν…μŠ€νŠΈ - [image_prompt_analysis.txt](file:///C:/Users/HRDPRO/Documents/promptmaker/image_prompt_analysis.txt): 이미지 ν”„λ‘¬ν”„νŠΈ 섀계 κ·œμΉ™ 뢄석 리포트 --- ## πŸ› οΈ 기술 μŠ€νƒ (Tech Stack) - **Frontend Core**: Vanilla JavaScript (ES6+), HTML5, CSS3 - **Design & Icons**: FontAwesome 6.4.0 (Vector Icons) - **Typography**: Google Fonts (Outfit, Noto Sans KR, JetBrains Mono) - **Local Dev Server**: `lite-server` (Node.js 기반 개발용 정적 μ„œλ²„) --- ## πŸ“œ 기획 λ°°κ²½ 및 뢄석 자료 μ„œλΉ„μŠ€ 섀계에 ν™œμš©λœ μ„ΈλΆ€ ꡬ쑰와 κ·œμΉ™ 뢄석은 μ•„λž˜ λ¬Έμ„œλ₯Ό μ°Έμ‘°ν•˜μ‹­μ‹œμ˜€. - [λΉ„λ””μ˜€ ν”„λ‘¬ν”„νŠΈ μ œμž‘ ν”„λ‘œμ„ΈμŠ€ κ°€μ΄λ“œ](file:///C:/Users/HRDPRO/Documents/promptmaker/process.txt) - [이미지 생성 ν”„λ‘¬ν”„νŠΈ ꡬ쑰 뢄석 리포트](file:///C:/Users/HRDPRO/Documents/promptmaker/image_prompt_analysis.txt)