SamProject/sam-manage
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: [rd] 사운드 로고 생성기 도움말 모달 추가

Browse Source 
- 툴바에 ? 아이콘 추가 → 클릭 시 사용법 모달 표시
- 4개 탭(수동/프리셋/AI생성/AI배경음악) 상세 사용법 안내
- 음성 오버레이, 재생/내보내기, 3중 합성 구조 설명 포함
- ESC 키/외부 클릭으로 모달 닫기 지원
This commit is contained in:
김보곤
2026-03-08 13:43:42 +09:00
parent 37b40c8513
commit 904cde62cf
1 changed files with 249 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

249
resources/views/rd/sound-logo/index.blade.php
View File

@@ -202,12 +202,69 @@
}
@keyframes spin { to { transform: rotate(360deg); } }
/* Help Modal */
.sl-modal-overlay {
position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 9000;
display: flex; align-items: center; justify-content: center;
backdrop-filter: blur(4px);
}
.sl-modal {
background: var(--sl-card); border: 1px solid var(--sl-border); border-radius: 14px;
width: 90%; max-width: 760px; max-height: 85vh; display: flex; flex-direction: column;
box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.sl-modal-header {
display: flex; align-items: center; gap: 10px; padding: 16px 20px;
border-bottom: 1px solid var(--sl-border); flex-shrink: 0;
}
.sl-modal-header h2 { font-size: 16px; font-weight: 700; margin: 0; flex: 1; }
.sl-modal-body {
overflow-y: auto; padding: 20px; flex: 1;
font-size: 13px; line-height: 1.8; color: var(--sl-text2);
}
.sl-modal-body h3 {
font-size: 14px; font-weight: 700; color: var(--sl-text); margin: 20px 0 8px;
display: flex; align-items: center; gap: 6px;
}
.sl-modal-body h3:first-child { margin-top: 0; }
.sl-modal-body strong { color: var(--sl-text); }
.sl-modal-body .help-badge {
display: inline-flex; align-items: center; gap: 4px;
padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600;
}
.sl-modal-body .help-table {
width: 100%; border-collapse: collapse; margin: 8px 0 12px; font-size: 12px;
}
.sl-modal-body .help-table th,
.sl-modal-body .help-table td {
padding: 6px 10px; border: 1px solid var(--sl-border); text-align: left;
}
.sl-modal-body .help-table th {
background: var(--sl-bg); color: var(--sl-text); font-weight: 600; white-space: nowrap;
}
.sl-modal-body .help-step {
display: flex; gap: 10px; margin-bottom: 10px;
}
.sl-modal-body .help-step-num {
width: 24px; height: 24px; border-radius: 50%; background: var(--sl-indigo); color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 700; flex-shrink: 0; margin-top: 1px;
}
.sl-modal-body .help-step-text { flex: 1; }
.sl-modal-body .help-divider {
border: none; border-top: 1px solid var(--sl-border); margin: 16px 0;
}
</style>
<div x-data="soundLogo()" x-init="init()" class="sl-wrap">
<!-- Toolbar -->
<div class="sl-toolbar">
<h1><i class="ri-music-2-line"></i> 사운드 로고 생성기</h1>
<button class="sl-btn sm" @click="showHelp = true" title="사용법 안내"
style="padding: 4px 8px; border-radius: 50%; width: 28px; height: 28px; justify-content: center;">
<i class="ri-question-line" style="font-size: 14px;"></i>
</button>
<div style="flex:1;"></div>
<div class="sl-tabs">
@@ -729,6 +786,197 @@
</button>
</div>
<!-- Help Modal -->
<template x-if="showHelp">
<div class="sl-modal-overlay" @click.self="showHelp = false" @keydown.escape.window="showHelp = false">
<div class="sl-modal">
<div class="sl-modal-header">
<i class="ri-book-open-line" style="font-size: 20px; color: var(--sl-indigo);"></i>
<h2>사운드 로고 생성기 사용법</h2>
<button class="sl-btn sm" @click="showHelp = false" style="border-radius: 50%; width: 28px; height: 28px; padding: 0; justify-content: center;">
<i class="ri-close-line"></i>
</button>
</div>
<div class="sl-modal-body">
<h3><i class="ri-information-line" style="color: var(--sl-indigo);"></i> 개요</h3>
<p>사운드 로고 생성기는 <strong>브랜드 시그니처 사운드</strong>를 만드는 도구입니다.<br>
3개의 레이어를 조합하여 하나의 완성된 사운드 로고를 제작할 수 있습니다.</p>
<table class="help-table">
<tr>
<th><i class="ri-piano-line"></i> 시퀀서</th>
<td>음표를 배치하여 멜로디/효과음 제작 (Web Audio API 신스사이저)</td>
</tr>
<tr>
<th><i class="ri-mic-line"></i> 음성 (TTS)</th>
<td>"쌤!", "SAM" 등 음성 오버레이 추가 (Google Gemini TTS)</td>
</tr>
<tr>
<th><i class="ri-music-ai-line"></i> 배경음악</th>
<td>다중 악기 배경음악 생성 (Google Lyria RealTime AI)</td>
</tr>
</table>
<hr class="help-divider">
<h3><i class="ri-piano-line" style="color: var(--sl-blue);"></i> 탭 1 — 수동 모드</h3>
<p>음표를 하나씩 배치하여 직접 사운드를 디자인합니다.</p>
<div class="help-step">
<div class="help-step-num">1</div>
<div class="help-step-text"><strong>좌측 사이드바</strong>에서 음색(Sine/Square/Triangle/Sawtooth)을 선택합니다.</div>
</div>
<div class="help-step">
<div class="help-step-num">2</div>
<div class="help-step-text">시퀀서 영역의 <strong>+ 버튼</strong>을 클릭하여 음표/화음/쉼표를 추가합니다.</div>
</div>
<div class="help-step">
<div class="help-step-num">3</div>
<div class="help-step-text">음표를 클릭하면 <strong>음 높이 선택 피커</strong>가 열립니다. 음표 위 <strong>x 버튼</strong>으로 삭제합니다.</div>
</div>
<div class="help-step">
<div class="help-step-num">4</div>
<div class="help-step-text">하단 파라미터(ADSR, 볼륨, 리버브)로 음색을 미세 조정합니다.</div>
</div>
<table class="help-table">
<tr><th>Attack</th><td>소리가 최대 볼륨에 도달하는 시간 (ms)</td></tr>
<tr><th>Decay</th><td>최대 볼륨에서 지속 레벨로 감쇄하는 시간 (ms)</td></tr>
<tr><th>Sustain</th><td>음이 유지되는 동안의 볼륨 비율 (0~1)</td></tr>
<tr><th>Release</th><td>건반에서 손을 뗀 후 소리가 사라지는 시간 (ms)</td></tr>
</table>
<hr class="help-divider">
<h3><i class="ri-magic-line" style="color: var(--sl-purple);"></i> 탭 2 — 프리셋</h3>
<p><strong>50종의 프리셋 템플릿</strong>을 8개 카테고리에서 선택할 수 있습니다.</p>
<table class="help-table">
<tr><th>기업 시그널</th><td>스타트업 로고, 이메일 송신 등</td></tr>
<tr><th>알림/메시지</th><td>카카오톡, 알람 등 알림음</td></tr>
<tr><th>상태/피드백</th><td>성공, 에러, 경고 효과음</td></tr>
<tr><th>전환 효과</th><td>화면 전환, 팝업 등</td></tr>
<tr><th>게임 효과</th><td>코인, 레벨업, 게임오버</td></tr>
<tr><th>UI 인터랙션</th><td>클릭, 호버, 토글</td></tr>
<tr><th>브랜드 징글</th><td>광고, 라디오 CM 징글</td></tr>
<tr><th>방송/미디어</th><td>뉴스 속보, 시보 등</td></tr>
</table>
<p>프리셋을 클릭하면 시퀀서에 자동 로드되며, <strong>수동 모드에서 추가 편집</strong>이 가능합니다.</p>
<hr class="help-divider">
<h3><i class="ri-sparkling-line" style="color: var(--sl-amber);"></i> 탭 3 — AI 생성</h3>
<p>텍스트 프롬프트를 입력하면 <strong>Gemini AI가 음표 시퀀스를 자동 설계</strong>합니다.</p>
<div class="help-step">
<div class="help-step-num">1</div>
<div class="help-step-text">원하는 사운드를 자연어로 설명합니다. (예: "밝고 미래적인 IT 기업 로고")</div>
</div>
<div class="help-step">
<div class="help-step-num">2</div>
<div class="help-step-text">카테고리와 목표 길이를 설정하고 <strong>"AI로 생성하기"</strong>를 클릭합니다.</div>
</div>
<div class="help-step">
<div class="help-step-num">3</div>
<div class="help-step-text">결과 미리보기에서 <strong>미리듣기</strong> 후, 마음에 들면 <strong>"시퀀서에 로드"</strong>합니다.</div>
</div>
<p><strong>빠른 프롬프트</strong> 버튼을 클릭하면 예시 문장이 자동 입력됩니다.</p>
<hr class="help-divider">
<h3><i class="ri-music-ai-line" style="color: var(--sl-green);"></i> 탭 4 — AI 배경음악 (Lyria)</h3>
<p>Google Lyria RealTime AI로 <strong>다중 악기 배경음악</strong>을 실시간 생성합니다.</p>
<div class="help-step">
<div class="help-step-num">1</div>
<div class="help-step-text">음악 프롬프트를 입력합니다. (예: "밝고 희망적인 어쿠스틱 기타와 피아노")</div>
</div>
<div class="help-step">
<div class="help-step-num">2</div>
<div class="help-step-text">BPM, 밀도, 밝기, 스케일(조)을 조정합니다.</div>
</div>
<div class="help-step">
<div class="help-step-num">3</div>
<div class="help-step-text">녹음 길이(3~30초)를 설정하고 <strong>"배경음악 생성"</strong>을 클릭합니다.</div>
</div>
<div class="help-step">
<div class="help-step-num">4</div>
<div class="help-step-text">생성 완료 후 <strong>볼륨을 조절</strong>하고 시퀀서/음성과 합성합니다.</div>
</div>
<table class="help-table">
<tr><th>BPM</th><td>분당 비트 수 (60=느림, 120=보통, 200=빠름)</td></tr>
<tr><th>밀도</th><td>악기/음의 밀집도 (0=sparse, 1=dense)</td></tr>
<tr><th>밝기</th><td>음색의 밝기 (0=어두움, 1=밝음)</td></tr>
<tr><th>스케일</th><td>음악의 조성 (예: C Major, A Minor)</td></tr>
</table>
<hr class="help-divider">
<h3><i class="ri-mic-line" style="color: var(--sl-green);"></i> 음성 오버레이 (TTS)</h3>
<p>좌측 사이드바 하단의 <strong>음성 오버레이</strong> 영역에서 텍스트를 입력하고 음성을 생성합니다.</p>
<div class="help-step">
<div class="help-step-num">1</div>
<div class="help-step-text">텍스트 입력 (예: "쌤!", "SAM", "코드브릿지엑스").</div>
</div>
<div class="help-step">
<div class="help-step-num">2</div>
<div class="help-step-text"><strong>"음성 생성"</strong> 클릭 → AI가 자연스러운 한국어 음성을 생성합니다.</div>
</div>
<div class="help-step">
<div class="help-step-num">3</div>
<div class="help-step-text"><strong>시작 시점</strong>(지연 시간)과 <strong>볼륨</strong>을 조절합니다.</div>
</div>
<hr class="help-divider">
<h3><i class="ri-play-circle-line" style="color: var(--sl-green);"></i> 재생 및 내보내기</h3>
<table class="help-table">
<tr>
<th style="white-space: nowrap;"><span class="help-badge" style="background: var(--sl-green); color: #fff;">▶ 전체 재생</span></th>
<td>시퀀서 + 음성 + 배경음악을 <strong>동시에 합성 재생</strong>합니다.</td>
</tr>
<tr>
<th style="white-space: nowrap;"><span class="help-badge" style="background: var(--sl-red); color: #fff;">■ 정지</span></th>
<td>재생을 즉시 멈춥니다.</td>
</tr>
<tr>
<th style="white-space: nowrap;"><span class="help-badge" style="background: var(--sl-card2); color: var(--sl-text);">WAV</span></th>
<td>3개 레이어가 합쳐진 <strong>WAV 파일을 다운로드</strong>합니다.</td>
</tr>
<tr>
<th style="white-space: nowrap;"><span class="help-badge" style="background: var(--sl-card2); color: var(--sl-text);">JSON</span></th>
<td>시퀀서 설정을 JSON으로 <strong>내보내기/불러오기</strong> 합니다.</td>
</tr>
<tr>
<th style="white-space: nowrap;"><span class="help-badge" style="background: var(--sl-card2); color: var(--sl-text);">저장</span></th>
<td>현재 시퀀서 설정을 브라우저 로컬 저장소에 저장합니다.</td>
</tr>
</table>
<hr class="help-divider">
<h3><i class="ri-stack-line" style="color: var(--sl-indigo);"></i> 3중 합성 구조</h3>
<p>최종 사운드 로고는 아래 3개의 레이어가 믹싱되어 출력됩니다.</p>
<div style="background: var(--sl-bg); border-radius: 8px; padding: 14px; font-family: monospace; font-size: 12px; line-height: 1.8; margin: 8px 0;">
<span style="color: var(--sl-blue);">Layer 1</span> 시퀀서 (수동/프리셋/AI) ──┐<br>
<span style="color: var(--sl-green);">Layer 2</span> 음성 TTS (Gemini) ────┼──→ <strong style="color: var(--sl-text);">합성 재생 / WAV 내보내기</strong><br>
<span style="color: var(--sl-amber);">Layer 3</span> 배경음악 (Lyria) ────┘
</div>
<p style="margin-top: 12px; font-size: 11px; color: var(--sl-text2);">
각 레이어는 독립적으로 사용 가능합니다. 시퀀서만, 음성만, 배경음악만 사용해도 됩니다.
</p>
</div>
</div>
</div>
</template>
<!-- Toast -->
<div class="sl-toast" x-show="toastMsg" x-text="toastMsg"
x-transition.opacity.duration.300ms x-cloak></div>
@@ -741,6 +989,7 @@
function soundLogo() {
return {
mode: 'manual',
showHelp: false,
synth: 'sine',
adsr: { attack: 10, decay: 100, sustain: 0.7, release: 500 },
volume: 0.8,