ADD : 뮤직 비디오 내용 추가 (수정 예정)

This commit is contained in:
KINDNICK 2025-10-10 00:07:39 +09:00
parent bfc3ff9e97
commit c71f4d8f41
5 changed files with 576 additions and 5 deletions

View File

@ -11,9 +11,16 @@
"Bash(python:*)",
"Bash(start http://localhost:8000/gallery.html)",
"WebFetch(domain:naver.me)",
"WebFetch(domain:chzzk.naver.com)"
"WebFetch(domain:chzzk.naver.com)",
"Bash(netsh advfirewall firewall show rule:*)",
"Bash(findstr:*)",
"Bash(curl -s ifconfig.me)",
"Bash(curl:*)",
"Bash(netstat:*)",
"Bash(ipconfig)",
"Bash(ping:*)"
],
"deny": [],
"ask": []
}
}
}

View File

@ -19,7 +19,7 @@
left: 0;
right: 0;
bottom: 0;
background:
background:
radial-gradient(circle at 20% 50%, rgba(255, 136, 0, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(255, 153, 51, 0.1) 0%, transparent 50%);
z-index: 0;

View File

@ -1434,12 +1434,408 @@
.streaming-grid {
grid-template-columns: 1fr;
}
.features-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* ========================================
뮤직비디오 제작 서비스 스타일
======================================== */
/* MV 인트로 */
.mv-intro {
text-align: center;
margin-bottom: var(--spacing-2xl);
}
.mv-intro > p {
font-size: var(--font-lg);
color: var(--text-secondary);
margin-bottom: var(--spacing-lg);
}
.mv-price-summary {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
padding: var(--spacing-lg);
background: linear-gradient(135deg, #fff8f0, #fef3e2);
border-radius: var(--border-radius);
border: 2px solid var(--primary-color);
}
.price-range {
font-size: var(--font-xl);
font-weight: 700;
color: var(--primary-color);
}
.mv-price-summary .price-note {
font-size: var(--font-sm);
color: var(--text-secondary);
}
/* 워크플로우 노트 */
.mv-workflow-note {
margin-top: var(--spacing-lg);
padding: var(--spacing-md) var(--spacing-lg);
background: #f0f9ff;
border-radius: var(--border-radius-sm);
border-left: 4px solid #0284c7;
}
.mv-workflow-note p {
margin: 0 0 var(--spacing-sm) 0;
color: var(--text-primary);
font-size: var(--font-base);
line-height: 1.6;
}
.mv-workflow-note p:last-child {
margin-bottom: 0;
}
.mv-workflow-note .highlight {
font-weight: 700;
color: var(--primary-color);
font-size: var(--font-lg);
}
.workflow-detail {
font-size: var(--font-sm);
color: var(--text-secondary);
}
/* MV 프로세스 */
.mv-process {
margin-bottom: var(--spacing-2xl);
}
.mv-process > h4 {
font-size: var(--font-xl);
color: var(--text-primary);
margin-bottom: var(--spacing-xl);
text-align: center;
padding-bottom: var(--spacing-md);
border-bottom: 2px solid var(--primary-color);
}
/* 워크플로우 페이즈 */
.workflow-phases {
display: flex;
justify-content: center;
gap: var(--spacing-md);
margin-bottom: var(--spacing-2xl);
flex-wrap: wrap;
}
.phase-badge {
background: linear-gradient(135deg, var(--primary-color), #ff9933);
color: var(--text-white);
padding: var(--spacing-sm) var(--spacing-lg);
border-radius: var(--border-radius-full);
font-size: var(--font-sm);
font-weight: 600;
box-shadow: 0 2px 8px rgba(255, 136, 0, 0.3);
}
.process-steps {
display: flex;
flex-direction: column;
gap: var(--spacing-xl);
}
/* 견적 단계 헤더 */
.mv-phase-header {
margin: var(--spacing-2xl) 0 var(--spacing-xl) 0;
padding: var(--spacing-lg) var(--spacing-xl);
background: linear-gradient(135deg, #fff8f0, #fef3e2);
border-left: 5px solid var(--primary-color);
border-radius: var(--border-radius);
}
.mv-phase-header h4 {
margin: 0;
font-size: var(--font-xl);
font-weight: 700;
color: var(--primary-color);
}
.mv-phase-header:first-child {
margin-top: 0;
}
/* MV 스텝 */
.mv-step {
display: flex;
gap: var(--spacing-lg);
background: var(--bg-white);
padding: var(--spacing-xl);
border-radius: var(--border-radius);
border-left: 4px solid var(--primary-color);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
transition: var(--transition);
}
.mv-step:hover {
transform: translateX(5px);
box-shadow: 0 4px 15px rgba(255, 136, 0, 0.15);
}
.step-icon {
font-size: var(--font-3xl);
flex-shrink: 0;
}
.step-details {
flex: 1;
}
/* 스텝 페이즈 라벨 */
.step-phase {
display: inline-block;
background: #e0f2fe;
color: #0c4a6e;
padding: var(--spacing-xs) var(--spacing-md);
border-radius: var(--border-radius-full);
font-size: var(--font-xs);
font-weight: 600;
margin-bottom: var(--spacing-md);
}
.step-details h5 {
font-size: var(--font-xl);
color: var(--text-primary);
margin-bottom: var(--spacing-md);
}
.step-details p {
color: var(--text-secondary);
line-height: 1.6;
margin-bottom: var(--spacing-sm);
}
.detail-note {
font-size: var(--font-sm);
color: var(--text-secondary);
font-style: italic;
opacity: 0.9;
}
/* 배경 가격 옵션 */
.pricing-options {
display: grid;
gap: var(--spacing-md);
margin: var(--spacing-lg) 0;
}
.pricing-option {
display: grid;
grid-template-columns: 1fr auto;
gap: var(--spacing-md);
padding: var(--spacing-md);
background: #f8fafc;
border-radius: var(--border-radius-sm);
border: 1px solid #e2e8f0;
}
.option-type {
font-weight: 600;
color: var(--text-primary);
grid-column: 1 / 2;
}
.option-price {
font-weight: 700;
color: var(--primary-color);
grid-column: 2 / 3;
grid-row: 1 / 2;
text-align: right;
}
.option-note {
font-size: var(--font-sm);
color: var(--text-secondary);
grid-column: 1 / -1;
line-height: 1.4;
}
/* 프로세스 노트 */
.process-note {
margin-top: var(--spacing-lg);
padding: var(--spacing-md);
background: #e0f2fe;
border-radius: var(--border-radius-sm);
border-left: 3px solid #0284c7;
}
.process-note p {
margin: 0;
font-size: var(--font-sm);
color: #0c4a6e;
}
/* 스텝 가격 */
.step-pricing {
display: flex;
align-items: baseline;
gap: var(--spacing-sm);
margin: var(--spacing-md) 0;
padding: var(--spacing-sm) var(--spacing-md);
background: linear-gradient(135deg, #fff8f0, #fef3e2);
border-radius: var(--border-radius-sm);
border: 1px solid #fed7aa;
}
.step-pricing .price-label {
font-size: var(--font-base);
color: var(--text-secondary);
font-weight: 600;
}
.step-pricing .price-amount {
font-size: var(--font-lg);
font-weight: 700;
color: var(--primary-color);
}
.step-pricing .price-note {
font-size: var(--font-sm);
color: var(--text-secondary);
font-style: italic;
}
/* 모션캡처 가격 섹션 */
.mv-mocap-pricing {
margin: var(--spacing-lg) 0;
padding: var(--spacing-md);
background: #fafafa;
border-radius: var(--border-radius-sm);
border: 1px solid #e5e7eb;
}
.mv-mocap-pricing h6 {
font-size: var(--font-base);
color: var(--text-primary);
margin: 0 0 var(--spacing-md) 0;
font-weight: 600;
}
.mv-mocap-pricing .step-pricing {
margin: var(--spacing-sm) 0;
}
/* MV 비용 요약 */
.mv-cost-summary {
margin-top: var(--spacing-2xl);
padding: var(--spacing-xl);
background: #f8fafc;
border-radius: var(--border-radius);
border: 2px solid #e2e8f0;
}
.mv-cost-summary > h4 {
font-size: var(--font-xl);
color: var(--text-primary);
margin-bottom: var(--spacing-lg);
text-align: center;
}
.cost-breakdown {
display: grid;
gap: var(--spacing-md);
}
.cost-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--spacing-md);
background: var(--bg-white);
border-radius: var(--border-radius-sm);
border-left: 3px solid var(--primary-color);
}
.cost-label {
font-size: var(--font-base);
color: var(--text-primary);
font-weight: 600;
}
.cost-value {
font-size: var(--font-base);
color: var(--primary-color);
font-weight: 700;
}
/* MV 프로덕션 패키지 특별 스타일 */
.mv-production {
background: linear-gradient(135deg, #fef9f5 0%, #ffffff 100%);
border: 2px solid var(--primary-color);
}
.mv-production .package-badge {
background: linear-gradient(135deg, #dc2626, #b91c1c);
}
/* 모바일 반응형 - 뮤직비디오 */
@media (max-width: 768px) {
.mv-step {
flex-direction: column;
padding: var(--spacing-lg);
}
.step-icon {
font-size: var(--font-2xl);
}
.workflow-phases {
flex-direction: column;
gap: var(--spacing-sm);
}
.phase-badge {
text-align: center;
}
.pricing-option {
grid-template-columns: 1fr;
gap: var(--spacing-xs);
}
.option-price {
grid-column: 1 / -1;
grid-row: 2 / 3;
text-align: left;
}
.step-pricing {
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-xs);
}
.cost-item {
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-xs);
}
.mv-price-summary {
padding: var(--spacing-md);
}
.price-range {
font-size: var(--font-lg);
}
.mv-workflow-note .highlight {
font-size: var(--font-base);
}
}
/* 정보 리스트 */
.info-list {
list-style: none;

View File

@ -294,7 +294,7 @@
<section class="hero-section">
<div class="hero-bg">
<div class="video-bg">
<iframe
<iframe
id="youtube-bg"
src="https://www.youtube.com/embed/videoseries?list=PL7KThQBBudfi08mUmnrEJRtpMAWHVvMqO&autoplay=1&mute=1&loop=1&controls=0&showinfo=0&rel=0&iv_load_policy=3&modestbranding=1&playsinline=1&enablejsapi=1&playlist=PL7KThQBBudfi08mUmnrEJRtpMAWHVvMqO"
frameborder="0"

View File

@ -290,6 +290,174 @@
</div>
</div>
<!-- 서비스 3: 뮤직비디오 제작 서비스 -->
<div class="service-package mv-production">
<div class="package-header">
<span class="package-icon">🎬</span>
<h3>서비스 3: 뮤직비디오 제작 서비스</h3>
<span class="package-badge">프리미엄</span>
</div>
<div class="mv-intro">
<p>기획부터 납품까지, 전문적인 뮤직비디오 제작의 전 과정을 지원합니다.</p>
<div class="mv-price-summary">
<span class="price-range">총 예상 비용: 2,000,000원 ~ 4,000,000원</span>
<span class="price-note">※ 위 비용은 대략적인 예상 금액이며, 프로젝트 규모와 요구사항에 따라 견적이 변경될 수 있습니다.</span>
<span class="price-note">※ 배경 제작 범위, 스토리보드 작가 비용, 아바타/프랍 개수, 연출 난이도에 따라 변동됩니다.</span>
</div>
<div class="mv-workflow-note">
<p><strong>견적 진행 방식:</strong> 전체 프로세스는 <span class="highlight">1차 견적 → 2차 견적</span>으로 구분되어 순차적으로 진행됩니다.</p>
<p class="workflow-detail">각 단계별로 견적을 확정하고 다음 단계로 넘어가는 방식으로, 예산 관리가 투명하게 이루어집니다.</p>
</div>
</div>
<!-- 제작 프로세스 -->
<div class="mv-process">
<h4>제작 프로세스 (7단계)</h4>
<div class="process-steps">
<div class="mv-step">
<div class="step-icon">1</div>
<div class="step-details">
<h5>기획 상담</h5>
<p>전체적인 콘셉트, 분위기, 아이디어를 정리하여 간단한 기획안을 마련합니다.</p>
<p class="detail-note">※ 이 단계에서 방향성이 확정되면 이후 제작이 훨씬 매끄럽게 진행됩니다.</p>
<p class="detail-note">※ 기획 상담은 무료입니다.</p>
</div>
</div>
<!-- 1차 견적 섹션 -->
<div class="mv-phase-header">
<h4>1차 견적: 배경 제작 및 스토리보드 작성</h4>
</div>
<div class="mv-step">
<div class="step-icon">2</div>
<div class="step-details">
<h5>배경 제작</h5>
<p>뮤직비디오에서 중요한 요소 중 하나인 배경을 제작합니다. 제작 방식과 저작권 귀속 여부에 따라 비용과 권리가 달라집니다.</p>
<div class="pricing-options">
<div class="pricing-option">
<span class="option-type">회사 보유 배경 사용</span>
<span class="option-price">30,000원/개</span>
<span class="option-note">이미 보유한 배경을 사용하는 방식으로, 저작권은 회사에 귀속됩니다.</span>
</div>
<div class="pricing-option">
<span class="option-type">신규 제작 (회사 귀속)</span>
<span class="option-price">100,000원/개</span>
<span class="option-note">요청에 맞춰 새 배경을 제작하지만, 저작권은 회사 소유로 남습니다.<br>※ 너무 특수하거나 대형 규모의 배경은 요청 시 거절될 수 있습니다.</span>
</div>
<div class="pricing-option">
<span class="option-type">신규 제작 (클라이언트 귀속)</span>
<span class="option-price">200,000원 ~ 1,000,000원/개</span>
<span class="option-note">클라이언트가 해당 배경의 저작권을 소유할 수 있는 방식입니다.<br>※ 배경의 규모와 디테일에 따라 금액이 달라집니다.</span>
</div>
</div>
<div class="process-note">
<p>📌 제작된 배경은 Unity 빌드 형태로 전달되어, 고객과 스토리 작가가 자유롭게 카메라 시점으로 확인할 수 있습니다. 이를 기반으로 구체적인 스토리보드 작업이 진행됩니다.</p>
</div>
</div>
</div>
<div class="mv-step">
<div class="step-icon">3</div>
<div class="step-details">
<h5>스토리보드 작성</h5>
<div class="step-pricing">
<span class="price-amount">100,000원 ~ 300,000원</span>
</div>
<p>스토리보드는 뮤직비디오의 흐름을 구체화하는 핵심 단계입니다. 외부 전문 작가를 섭외하여 작업하며, 비용은 10~30만 원 정도로 변동됩니다.</p>
<p class="detail-note">※ 스토리보드는 스토리 작가뿐 아니라 고객에게도 함께 전달되므로, 세밀한 연출과 카메라 컷을 사전에 검토하고 컨펌할 수 있습니다.</p>
<p class="detail-note">※ 이 단계에서 확실히 방향을 잡으면 이후 작업에서 수정이 최소화됩니다.</p>
</div>
</div>
<!-- 2차 견적 섹션 -->
<div class="mv-phase-header">
<h4>2차 견적: 제작, 촬영 및 후반 작업</h4>
</div>
<div class="mv-step">
<div class="step-icon">4</div>
<div class="step-details">
<h5>아바타 세팅 및 프랍 제작</h5>
<div class="step-pricing">
<span class="price-label">아바타 세팅:</span>
<span class="price-amount">50,000원/개</span>
</div>
<div class="step-pricing">
<span class="price-label">스토리 진행용 프랍:</span>
<span class="price-amount">20,000원/개</span>
</div>
<p>기존에 사용 중인 크리에이터의 아바타를 뮤직비디오 환경에서 사용할 수 있도록 최적화합니다.</p>
<p class="detail-note">※ 필요 시 아바타 뚜따(수정 및 최적화) 작업도 진행 가능합니다.</p>
</div>
</div>
<div class="mv-step">
<div class="step-icon">5</div>
<div class="step-details">
<h5>모션 캡처</h5>
<div class="mv-mocap-pricing">
<h6>모션캡처 스튜디오 대관 비용</h6>
<div class="step-pricing">
<span class="price-label">1인 이용:</span>
<span class="price-amount">150,000원/시간</span>
<span class="price-note">(부가세 별도)</span>
</div>
<div class="step-pricing">
<span class="price-label">2인 이용:</span>
<span class="price-amount">200,000원/시간</span>
<span class="price-note">(부가세 별도)</span>
</div>
<div class="step-pricing">
<span class="price-label">추가 인원:</span>
<span class="price-amount">+100,000원/명/시간</span>
<span class="price-note">(최대 4인까지, 부가세 별도)</span>
</div>
</div>
<div class="mv-mocap-pricing">
<h6>액터 섭외 비용</h6>
<div class="step-pricing">
<span class="price-label">액터 섭외:</span>
<span class="price-amount">100,000원/명/시간</span>
<span class="price-note">(부가세 별도)</span>
</div>
</div>
<p>확정된 스토리보드를 기반으로 실제 모션을 녹화합니다.</p>
<p class="detail-note">※ 촬영 기간은 보통 1~2일 정도 소요됩니다.</p>
<p class="detail-note">※ 최소 이용 시간: 2시간</p>
</div>
</div>
<div class="mv-step">
<div class="step-icon">6</div>
<div class="step-details">
<h5>룩 개발 & 연출</h5>
<div class="step-pricing">
<span class="price-amount">500,000원 ~ 1,500,000원</span>
</div>
<p>뮤직비디오의 비주얼 완성도를 높이기 위한 단계입니다.</p>
<p>Unity 환경에서 포스트 프로세싱, 아트워크 확정, 카메라 워킹 등 최종적인 룩 개발을 진행합니다.</p>
<p class="detail-note">※ 비용은 연출의 복잡도와 퀄리티에 따라 50~150만 원 정도가 소요됩니다.</p>
</div>
</div>
<div class="mv-step">
<div class="step-icon">7</div>
<div class="step-details">
<h5>최종 피드백 & 납품</h5>
<p>완성된 영상 결과물을 제출한 후, 고객의 피드백을 반영하여 수정합니다.</p>
<p class="detail-note">※ 최종적으로 완성된 뮤직비디오 영상 파일(mp4/mov 등)을 납품합니다.</p>
</div>
</div>
</div>
</div>
<div class="service-note">
<p><strong>💡 견적 진행:</strong> 1차 견적(기획, 배경 제작, 스토리보드 작성) → 2차 견적(아바타 세팅, 모션 캡처, 룩 개발, 후반작업 및 납품) 순으로 단계별 견적을 확정하며 진행됩니다.</p>
</div>
</div>
</div>
</section>