ADD : 뮤직비디오 관련 서비스 내용 업데이트 및 할인 관련 내용 팝업 추가
This commit is contained in:
KINDNICK
parent
c71f4d8f41
commit
27a97212d8
356
css/popup.css
Normal file
356
css/popup.css
Normal file
@ -0,0 +1,356 @@
|
||||
/* ========================================
|
||||
메인 페이지 팝업 스타일
|
||||
======================================== */
|
||||
|
||||
/* 팝업 오버레이 */
|
||||
.popup-overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
z-index: 9998;
|
||||
animation: fadeIn 0.3s ease;
|
||||
}
|
||||
|
||||
.popup-overlay.active {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* 팝업 컨테이너 */
|
||||
.popup-container {
|
||||
position: relative;
|
||||
background: linear-gradient(135deg, #fff 0%, #fff8f0 100%);
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 20px 60px rgba(255, 136, 0, 0.3);
|
||||
max-width: 500px;
|
||||
width: 90%;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
animation: popupSlideIn 0.4s ease;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
@keyframes popupSlideIn {
|
||||
from {
|
||||
transform: scale(0.8) translateY(-20px);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: scale(1) translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* 팝업 헤더 */
|
||||
.popup-header {
|
||||
background: linear-gradient(135deg, #ff8800 0%, #ff9933 100%);
|
||||
padding: 25px 20px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.popup-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 800;
|
||||
color: white;
|
||||
margin: 0;
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.popup-subtitle {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
margin: 8px 0 0 0;
|
||||
}
|
||||
|
||||
.popup-badge {
|
||||
display: inline-block;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
backdrop-filter: blur(10px);
|
||||
color: white;
|
||||
padding: 6px 16px;
|
||||
border-radius: 50px;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
margin-top: 8px;
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* 팝업 바디 */
|
||||
.popup-body {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.popup-section {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.popup-section-title {
|
||||
font-size: 0.95rem;
|
||||
font-weight: 700;
|
||||
color: #ff8800;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
/* 할인 카드 */
|
||||
.discount-card {
|
||||
background: white;
|
||||
border-radius: 10px;
|
||||
padding: 15px;
|
||||
margin-bottom: 10px;
|
||||
border: 2px solid #ffd9a3;
|
||||
box-shadow: 0 2px 8px rgba(255, 136, 0, 0.1);
|
||||
}
|
||||
|
||||
.discount-card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.discount-card-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.discount-badge {
|
||||
background: linear-gradient(135deg, #ff8800, #ff9933);
|
||||
color: white;
|
||||
padding: 4px 10px;
|
||||
border-radius: 20px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.discount-price {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.original-price {
|
||||
color: #999;
|
||||
text-decoration: line-through;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.sale-price {
|
||||
color: #ff8800;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.price-note {
|
||||
font-size: 0.8rem;
|
||||
color: #666;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* 공지사항 */
|
||||
.popup-notice {
|
||||
background: #fff8f0;
|
||||
border-left: 3px solid #ff8800;
|
||||
padding: 10px;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.popup-notice p {
|
||||
margin: 0;
|
||||
font-size: 0.85rem;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* 이벤트 정보 */
|
||||
.popup-info {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 10px;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
text-align: center;
|
||||
border: 2px solid #ffe8cc;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: 0.8rem;
|
||||
color: #666;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
color: #ff8800;
|
||||
}
|
||||
|
||||
/* CTA 버튼 */
|
||||
.popup-cta {
|
||||
background: linear-gradient(135deg, #ff8800 0%, #ff9933 100%);
|
||||
color: white;
|
||||
text-align: center;
|
||||
padding: 14px;
|
||||
border-radius: 10px;
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
border: none;
|
||||
width: 100%;
|
||||
box-shadow: 0 4px 15px rgba(255, 136, 0, 0.3);
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.popup-cta:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(255, 136, 0, 0.4);
|
||||
}
|
||||
|
||||
/* 팝업 푸터 */
|
||||
.popup-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12px 20px;
|
||||
background: #f8f9fa;
|
||||
border-top: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
.popup-checkbox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.popup-checkbox input[type="checkbox"] {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
cursor: pointer;
|
||||
accent-color: #ff8800;
|
||||
}
|
||||
|
||||
.popup-checkbox label {
|
||||
font-size: 0.85rem;
|
||||
color: #666;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.popup-close-btn {
|
||||
background: #6c757d;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 6px 16px;
|
||||
border-radius: 6px;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s ease;
|
||||
}
|
||||
|
||||
.popup-close-btn:hover {
|
||||
background: #5a6268;
|
||||
}
|
||||
|
||||
/* X 닫기 버튼 */
|
||||
.popup-close-x {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
backdrop-filter: blur(10px);
|
||||
border: none;
|
||||
color: white;
|
||||
font-size: 1.3rem;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s ease;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.popup-close-x:hover {
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
/* 모바일 반응형 */
|
||||
@media (max-width: 768px) {
|
||||
.popup-container {
|
||||
max-width: 95%;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.popup-header {
|
||||
padding: 20px 15px;
|
||||
}
|
||||
|
||||
.popup-title {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.popup-subtitle {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.popup-badge {
|
||||
font-size: 1rem;
|
||||
padding: 5px 14px;
|
||||
}
|
||||
|
||||
.popup-body {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.discount-card {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.popup-info {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.popup-footer {
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
padding: 12px 15px;
|
||||
}
|
||||
|
||||
.popup-checkbox {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.popup-close-btn {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@ -574,6 +574,41 @@
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.promo-badge-large {
|
||||
display: inline-block;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
backdrop-filter: blur(10px);
|
||||
color: var(--text-white);
|
||||
padding: var(--spacing-xs) var(--spacing-md);
|
||||
border-radius: 4px;
|
||||
font-size: var(--font-sm);
|
||||
font-weight: 700;
|
||||
margin-bottom: var(--spacing-sm);
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.promo-badge-package {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
background: #ff0000;
|
||||
color: var(--text-white);
|
||||
padding: var(--spacing-xs) var(--spacing-md);
|
||||
border-radius: 4px;
|
||||
font-size: var(--font-sm);
|
||||
font-weight: 700;
|
||||
box-shadow: 0 2px 8px rgba(255, 0, 0, 0.3);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.original-price-large {
|
||||
display: block;
|
||||
font-size: var(--font-2xl);
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
text-decoration: line-through;
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.package-duration h4 {
|
||||
font-size: var(--font-2xl);
|
||||
margin-bottom: var(--spacing-sm);
|
||||
@ -892,6 +927,19 @@
|
||||
right: -10px;
|
||||
}
|
||||
|
||||
.promo-badge {
|
||||
background: #ff0000;
|
||||
color: var(--text-white);
|
||||
padding: var(--spacing-xs) var(--spacing-sm);
|
||||
border-radius: 4px;
|
||||
font-size: var(--font-xs);
|
||||
font-weight: 700;
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
right: -10px;
|
||||
box-shadow: 0 2px 8px rgba(255, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* 가격 표시 */
|
||||
.price-display {
|
||||
text-align: center;
|
||||
@ -923,6 +971,14 @@
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.original-price {
|
||||
display: block;
|
||||
font-size: var(--font-lg);
|
||||
color: #999;
|
||||
text-decoration: line-through;
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
/* 부가세 안내 */
|
||||
.vat-notice {
|
||||
text-align: right;
|
||||
|
||||
72
index.html
72
index.html
@ -179,6 +179,7 @@
|
||||
<!-- CSS -->
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<link rel="stylesheet" href="css/main.css">
|
||||
<link rel="stylesheet" href="css/popup.css">
|
||||
|
||||
<!-- 구조화된 데이터 (Schema.org) -->
|
||||
<script type="application/ld+json">
|
||||
@ -287,6 +288,76 @@
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 오픈 기념 팝업 -->
|
||||
<div class="popup-overlay" id="mainPopup">
|
||||
<div class="popup-container">
|
||||
<button class="popup-close-x" id="popupCloseX">×</button>
|
||||
|
||||
<div class="popup-header">
|
||||
<h2 class="popup-title">🎉 밍글 스튜디오 오픈 기념 🎉</h2>
|
||||
<p class="popup-subtitle">특별 할인 이벤트</p>
|
||||
<div class="popup-badge">최대 20% 할인</div>
|
||||
</div>
|
||||
|
||||
<div class="popup-body">
|
||||
<div class="popup-section">
|
||||
<h3 class="popup-section-title">할인 서비스</h3>
|
||||
|
||||
<div class="discount-card">
|
||||
<div class="discount-card-header">
|
||||
<span class="discount-card-title">모션캡쳐 스튜디오 대관</span>
|
||||
<span class="discount-badge">20% 할인</span>
|
||||
</div>
|
||||
<div class="discount-price">
|
||||
<span class="original-price">200,000원/시간</span>
|
||||
<span class="sale-price">160,000원/시간</span>
|
||||
</div>
|
||||
<p class="price-note">VAT 별도</p>
|
||||
</div>
|
||||
|
||||
<div class="discount-card">
|
||||
<div class="discount-card-header">
|
||||
<span class="discount-card-title">스트리밍글 서비스</span>
|
||||
<span class="discount-badge">20% 할인</span>
|
||||
</div>
|
||||
<div class="discount-price">
|
||||
<span class="original-price">2,000,000원</span>
|
||||
<span class="sale-price">1,600,000원</span>
|
||||
</div>
|
||||
<p class="price-note">1~4인 사용 / 8시간 패키지 / VAT 별도</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="popup-notice">
|
||||
<p>※ 뮤직비디오 제작 서비스는 할인이 미적용 됩니다</p>
|
||||
</div>
|
||||
|
||||
<div class="popup-info">
|
||||
<div class="info-item">
|
||||
<div class="info-label">이벤트 기간</div>
|
||||
<div class="info-value">~ 12/31</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-label">문의 메일</div>
|
||||
<div class="info-value">minglestudio.mocap@gmail.com</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="popup-cta" id="popupCtaBtn">
|
||||
지금 바로 예약하기 →
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="popup-footer">
|
||||
<div class="popup-checkbox">
|
||||
<input type="checkbox" id="dontShowToday">
|
||||
<label for="dontShowToday">하루동안 보지 않기</label>
|
||||
</div>
|
||||
<button class="popup-close-btn" id="popupCloseBtn">닫기</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 헤더 -->
|
||||
<div id="header-placeholder"></div>
|
||||
|
||||
@ -565,5 +636,6 @@
|
||||
<!-- JavaScript -->
|
||||
<script src="js/common.js"></script>
|
||||
<script src="js/main.js"></script>
|
||||
<script src="js/popup.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
96
js/popup.js
Normal file
96
js/popup.js
Normal file
@ -0,0 +1,96 @@
|
||||
/**
|
||||
* 밍글 스튜디오 메인 팝업 관리
|
||||
*/
|
||||
|
||||
// 쿠키 관련 함수
|
||||
function setCookie(name, value, days) {
|
||||
const date = new Date();
|
||||
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
|
||||
const expires = "expires=" + date.toUTCString();
|
||||
document.cookie = name + "=" + value + ";" + expires + ";path=/";
|
||||
}
|
||||
|
||||
function getCookie(name) {
|
||||
const nameEQ = name + "=";
|
||||
const ca = document.cookie.split(';');
|
||||
for(let i = 0; i < ca.length; i++) {
|
||||
let c = ca[i];
|
||||
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
|
||||
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
// 팝업 표시 함수
|
||||
function showPopup() {
|
||||
const popup = document.getElementById('mainPopup');
|
||||
if (popup) {
|
||||
popup.classList.add('active');
|
||||
document.body.style.overflow = 'hidden'; // 스크롤 방지
|
||||
}
|
||||
}
|
||||
|
||||
// 팝업 닫기 함수
|
||||
function closePopup() {
|
||||
const popup = document.getElementById('mainPopup');
|
||||
const dontShowToday = document.getElementById('dontShowToday');
|
||||
|
||||
if (popup) {
|
||||
popup.classList.remove('active');
|
||||
document.body.style.overflow = ''; // 스크롤 복원
|
||||
|
||||
// "하루동안 보지 않기" 체크된 경우
|
||||
if (dontShowToday && dontShowToday.checked) {
|
||||
setCookie('hideMainPopup', 'true', 1); // 1일간 쿠키 저장
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 페이지 로드 시 실행
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// 쿠키 확인
|
||||
const hidePopup = getCookie('hideMainPopup');
|
||||
|
||||
// 쿠키가 없으면 팝업 표시 (1초 후)
|
||||
if (!hidePopup) {
|
||||
setTimeout(showPopup, 1000);
|
||||
}
|
||||
|
||||
// 닫기 버튼 이벤트
|
||||
const closeBtn = document.getElementById('popupCloseBtn');
|
||||
if (closeBtn) {
|
||||
closeBtn.addEventListener('click', closePopup);
|
||||
}
|
||||
|
||||
// X 버튼 이벤트
|
||||
const closeX = document.getElementById('popupCloseX');
|
||||
if (closeX) {
|
||||
closeX.addEventListener('click', closePopup);
|
||||
}
|
||||
|
||||
// 오버레이 클릭 시 닫기
|
||||
const overlay = document.getElementById('mainPopup');
|
||||
if (overlay) {
|
||||
overlay.addEventListener('click', function(e) {
|
||||
if (e.target === overlay) {
|
||||
closePopup();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// ESC 키로 닫기
|
||||
document.addEventListener('keydown', function(e) {
|
||||
if (e.key === 'Escape') {
|
||||
closePopup();
|
||||
}
|
||||
});
|
||||
|
||||
// CTA 버튼 클릭 시 연락처 페이지로 이동
|
||||
const ctaBtn = document.getElementById('popupCtaBtn');
|
||||
if (ctaBtn) {
|
||||
ctaBtn.addEventListener('click', function() {
|
||||
closePopup();
|
||||
window.location.href = '/contact';
|
||||
});
|
||||
}
|
||||
});
|
||||
@ -101,9 +101,11 @@
|
||||
<div class="card-header">
|
||||
<span class="person-icon">👤</span>
|
||||
<h4>1인 이용</h4>
|
||||
<span class="promo-badge">🎉 20% 할인</span>
|
||||
</div>
|
||||
<div class="price-display">
|
||||
<span class="price-amount">150,000원</span>
|
||||
<span class="original-price">150,000원</span>
|
||||
<span class="price-amount">120,000원</span>
|
||||
<span class="price-unit">/시간</span>
|
||||
<span class="price-vat">(부가세 별도)</span>
|
||||
</div>
|
||||
@ -121,9 +123,11 @@
|
||||
<span class="person-icon">👥</span>
|
||||
<h4>2인 이용</h4>
|
||||
<span class="popular-badge">인기</span>
|
||||
<span class="promo-badge">🎉 20% 할인</span>
|
||||
</div>
|
||||
<div class="price-display">
|
||||
<span class="price-amount">200,000원</span>
|
||||
<span class="original-price">200,000원</span>
|
||||
<span class="price-amount">160,000원</span>
|
||||
<span class="price-unit">/시간</span>
|
||||
<span class="price-vat">(부가세 별도)</span>
|
||||
</div>
|
||||
@ -140,9 +144,11 @@
|
||||
<div class="card-header">
|
||||
<span class="person-icon">👨👩👧👦</span>
|
||||
<h4>추가 인원</h4>
|
||||
<span class="promo-badge">🎉 20% 할인</span>
|
||||
</div>
|
||||
<div class="price-display">
|
||||
<span class="price-amount">+100,000원</span>
|
||||
<span class="original-price">+100,000원</span>
|
||||
<span class="price-amount">+80,000원</span>
|
||||
<span class="price-unit">/명/시간</span>
|
||||
<span class="price-vat">(부가세 별도)</span>
|
||||
</div>
|
||||
@ -247,7 +253,9 @@
|
||||
<div class="streaming-package">
|
||||
<div class="package-overview">
|
||||
<div class="package-price">
|
||||
<span class="price-amount">2,000,000원</span>
|
||||
<span class="promo-badge-large">🎉 20% 할인</span>
|
||||
<span class="original-price-large">2,000,000원</span>
|
||||
<span class="price-amount">1,600,000원</span>
|
||||
<span class="price-unit">/ 1~4인 사용</span>
|
||||
<span class="price-vat">(부가세 별도)</span>
|
||||
</div>
|
||||
@ -305,10 +313,6 @@
|
||||
<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>
|
||||
|
||||
<!-- 제작 프로세스 -->
|
||||
@ -318,42 +322,36 @@
|
||||
<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>
|
||||
<h5>기획 상담 (무료)</h5>
|
||||
<p>뮤직비디오 제작의 시작 단계로, 콘셉트와 분위기를 정리합니다.</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>
|
||||
<p>저작권 귀속 여부에 따라 옵션을 선택할 수 있습니다.</p>
|
||||
<div class="pricing-options">
|
||||
<div class="pricing-option">
|
||||
<span class="option-type">회사 보유 배경 사용</span>
|
||||
<span class="option-type">보유 배경 사용</span>
|
||||
<span class="option-price">30,000원/개</span>
|
||||
<span class="option-note">이미 보유한 배경을 사용하는 방식으로, 저작권은 회사에 귀속됩니다.</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>
|
||||
<span class="option-note">저작권: 회사 귀속 (대형 또는 특수 배경은 제한될 수 있음)</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>
|
||||
<span class="option-note">저작권: 클라이언트 소유 (규모와 디테일에 따라 변동)</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="process-note">
|
||||
<p>📌 제작된 배경은 Unity 빌드 형태로 전달되어, 고객과 스토리 작가가 자유롭게 카메라 시점으로 확인할 수 있습니다. 이를 기반으로 구체적인 스토리보드 작업이 진행됩니다.</p>
|
||||
<p>📌 Unity 빌드로 전달되어 카메라 시점 확인 가능</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -363,19 +361,13 @@
|
||||
<div class="step-details">
|
||||
<h5>스토리보드 작성</h5>
|
||||
<div class="step-pricing">
|
||||
<span class="price-amount">100,000원 ~ 300,000원</span>
|
||||
<span class="price-amount">100,000원~</span>
|
||||
</div>
|
||||
<p>스토리보드는 뮤직비디오의 흐름을 구체화하는 핵심 단계입니다. 외부 전문 작가를 섭외하여 작업하며, 비용은 10~30만 원 정도로 변동됩니다.</p>
|
||||
<p class="detail-note">※ 스토리보드는 스토리 작가뿐 아니라 고객에게도 함께 전달되므로, 세밀한 연출과 카메라 컷을 사전에 검토하고 컨펌할 수 있습니다.</p>
|
||||
<p class="detail-note">※ 이 단계에서 확실히 방향을 잡으면 이후 작업에서 수정이 최소화됩니다.</p>
|
||||
<p>외부 전문 작가가 뮤직비디오의 흐름을 구체화합니다.</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">
|
||||
@ -388,8 +380,8 @@
|
||||
<span class="price-label">스토리 진행용 프랍:</span>
|
||||
<span class="price-amount">20,000원/개</span>
|
||||
</div>
|
||||
<p>기존에 사용 중인 크리에이터의 아바타를 뮤직비디오 환경에서 사용할 수 있도록 최적화합니다.</p>
|
||||
<p class="detail-note">※ 필요 시 아바타 뚜따(수정 및 최적화) 작업도 진행 가능합니다.</p>
|
||||
<p>아바타를 뮤직비디오 환경에 맞게 최적화합니다.</p>
|
||||
<p class="detail-note">※ 아바타 수정 및 최적화 작업 가능</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -423,9 +415,9 @@
|
||||
<span class="price-note">(부가세 별도)</span>
|
||||
</div>
|
||||
</div>
|
||||
<p>확정된 스토리보드를 기반으로 실제 모션을 녹화합니다.</p>
|
||||
<p class="detail-note">※ 촬영 기간은 보통 1~2일 정도 소요됩니다.</p>
|
||||
<p class="detail-note">※ 최소 이용 시간: 2시간</p>
|
||||
<p>스토리보드를 기반으로 모션을 녹화합니다.</p>
|
||||
<p class="detail-note">※ 촬영 기간: 1~2일 소요</p>
|
||||
<p class="detail-note">※ 최소 이용: 2시간</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -434,11 +426,10 @@
|
||||
<div class="step-details">
|
||||
<h5>룩 개발 & 연출</h5>
|
||||
<div class="step-pricing">
|
||||
<span class="price-amount">500,000원 ~ 1,500,000원</span>
|
||||
<span class="price-amount">500,000원~</span>
|
||||
</div>
|
||||
<p>뮤직비디오의 비주얼 완성도를 높이기 위한 단계입니다.</p>
|
||||
<p>Unity 환경에서 포스트 프로세싱, 아트워크 확정, 카메라 워킹 등 최종적인 룩 개발을 진행합니다.</p>
|
||||
<p class="detail-note">※ 비용은 연출의 복잡도와 퀄리티에 따라 50~150만 원 정도가 소요됩니다.</p>
|
||||
<p>Unity에서 포스트 프로세싱, 아트워크, 카메라 워킹 등을 진행합니다.</p>
|
||||
<p class="detail-note">※ 연출 복잡도와 퀄리티에 따라 변동</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -446,15 +437,15 @@
|
||||
<div class="step-icon">7️⃣</div>
|
||||
<div class="step-details">
|
||||
<h5>최종 피드백 & 납품</h5>
|
||||
<p>완성된 영상 결과물을 제출한 후, 고객의 피드백을 반영하여 수정합니다.</p>
|
||||
<p class="detail-note">※ 최종적으로 완성된 뮤직비디오 영상 파일(mp4/mov 등)을 납품합니다.</p>
|
||||
<p>완성된 영상을 고객 피드백 반영 후 수정하여 최종 납품합니다.</p>
|
||||
<p class="detail-note">※ 납품 형식: mp4/mov 등</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="service-note">
|
||||
<p><strong>💡 견적 진행:</strong> 1차 견적(기획, 배경 제작, 스토리보드 작성) → 2차 견적(아바타 세팅, 모션 캡처, 룩 개발, 후반작업 및 납품) 순으로 단계별 견적을 확정하며 진행됩니다.</p>
|
||||
<p><strong>💡 제작 프로세스:</strong> 기획 상담(무료) → 전체 견적 제시 → 견적 승인 후 제작 시작 (2단계~7단계 순차 진행)</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user