diff --git a/css/popup.css b/css/popup.css new file mode 100644 index 0000000..3a0aa53 --- /dev/null +++ b/css/popup.css @@ -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%; + } +} diff --git a/css/services.css b/css/services.css index 4ae8924..fb8088b 100644 --- a/css/services.css +++ b/css/services.css @@ -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; diff --git a/index.html b/index.html index dbd1124..3117a87 100644 --- a/index.html +++ b/index.html @@ -179,6 +179,7 @@ + + + +
@@ -565,5 +636,6 @@ + \ No newline at end of file diff --git a/js/popup.js b/js/popup.js new file mode 100644 index 0000000..824cf0e --- /dev/null +++ b/js/popup.js @@ -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'; + }); + } +}); diff --git a/services.html b/services.html index b279826..c427f4c 100644 --- a/services.html +++ b/services.html @@ -101,9 +101,11 @@
👤

1인 이용

+ 🎉 20% 할인
- 150,000원 + 150,000원 + 120,000원 /시간 (부가세 별도)
@@ -121,9 +123,11 @@ 👥

2인 이용

인기 + 🎉 20% 할인
- 200,000원 + 200,000원 + 160,000원 /시간 (부가세 별도)
@@ -140,9 +144,11 @@
👨‍👩‍👧‍👦

추가 인원

+ 🎉 20% 할인
- +100,000원 + +100,000원 + +80,000원 /명/시간 (부가세 별도)
@@ -247,7 +253,9 @@
- 2,000,000원 + 🎉 20% 할인 + 2,000,000원 + 1,600,000원 / 1~4인 사용 (부가세 별도)
@@ -305,10 +313,6 @@ ※ 위 비용은 대략적인 예상 금액이며, 프로젝트 규모와 요구사항에 따라 견적이 변경될 수 있습니다. ※ 배경 제작 범위, 스토리보드 작가 비용, 아바타/프랍 개수, 연출 난이도에 따라 변동됩니다.
-
-

견적 진행 방식: 전체 프로세스는 1차 견적 → 2차 견적으로 구분되어 순차적으로 진행됩니다.

-

각 단계별로 견적을 확정하고 다음 단계로 넘어가는 방식으로, 예산 관리가 투명하게 이루어집니다.

-
@@ -318,42 +322,36 @@
1️⃣
-
기획 상담
-

전체적인 콘셉트, 분위기, 아이디어를 정리하여 간단한 기획안을 마련합니다.

-

※ 이 단계에서 방향성이 확정되면 이후 제작이 훨씬 매끄럽게 진행됩니다.

-

※ 기획 상담은 무료입니다.

+
기획 상담 (무료)
+

뮤직비디오 제작의 시작 단계로, 콘셉트와 분위기를 정리합니다.

+

※ 방향성이 명확해야 이후 제작이 원활하게 진행됩니다.

- -
-

1차 견적: 배경 제작 및 스토리보드 작성

-
-
2️⃣
배경 제작
-

뮤직비디오에서 중요한 요소 중 하나인 배경을 제작합니다. 제작 방식과 저작권 귀속 여부에 따라 비용과 권리가 달라집니다.

+

저작권 귀속 여부에 따라 옵션을 선택할 수 있습니다.

- 회사 보유 배경 사용 + 보유 배경 사용 30,000원/개 - 이미 보유한 배경을 사용하는 방식으로, 저작권은 회사에 귀속됩니다. + 저작권: 회사 귀속
신규 제작 (회사 귀속) 100,000원/개 - 요청에 맞춰 새 배경을 제작하지만, 저작권은 회사 소유로 남습니다.
※ 너무 특수하거나 대형 규모의 배경은 요청 시 거절될 수 있습니다. + 저작권: 회사 귀속 (대형 또는 특수 배경은 제한될 수 있음)
신규 제작 (클라이언트 귀속) 200,000원 ~ 1,000,000원/개 - 클라이언트가 해당 배경의 저작권을 소유할 수 있는 방식입니다.
※ 배경의 규모와 디테일에 따라 금액이 달라집니다. + 저작권: 클라이언트 소유 (규모와 디테일에 따라 변동)
-

📌 제작된 배경은 Unity 빌드 형태로 전달되어, 고객과 스토리 작가가 자유롭게 카메라 시점으로 확인할 수 있습니다. 이를 기반으로 구체적인 스토리보드 작업이 진행됩니다.

+

📌 Unity 빌드로 전달되어 카메라 시점 확인 가능

@@ -363,19 +361,13 @@
스토리보드 작성
- 100,000원 ~ 300,000원 + 100,000원~
-

스토리보드는 뮤직비디오의 흐름을 구체화하는 핵심 단계입니다. 외부 전문 작가를 섭외하여 작업하며, 비용은 10~30만 원 정도로 변동됩니다.

-

※ 스토리보드는 스토리 작가뿐 아니라 고객에게도 함께 전달되므로, 세밀한 연출과 카메라 컷을 사전에 검토하고 컨펌할 수 있습니다.

-

※ 이 단계에서 확실히 방향을 잡으면 이후 작업에서 수정이 최소화됩니다.

+

외부 전문 작가가 뮤직비디오의 흐름을 구체화합니다.

+

※ 고객과 공유하여 연출과 카메라 컷을 사전 확인 및 컨펌

- -
-

2차 견적: 제작, 촬영 및 후반 작업

-
-
4️⃣
@@ -388,8 +380,8 @@ 스토리 진행용 프랍: 20,000원/개
-

기존에 사용 중인 크리에이터의 아바타를 뮤직비디오 환경에서 사용할 수 있도록 최적화합니다.

-

※ 필요 시 아바타 뚜따(수정 및 최적화) 작업도 진행 가능합니다.

+

아바타를 뮤직비디오 환경에 맞게 최적화합니다.

+

※ 아바타 수정 및 최적화 작업 가능

@@ -423,9 +415,9 @@ (부가세 별도) -

확정된 스토리보드를 기반으로 실제 모션을 녹화합니다.

-

※ 촬영 기간은 보통 1~2일 정도 소요됩니다.

-

※ 최소 이용 시간: 2시간

+

스토리보드를 기반으로 모션을 녹화합니다.

+

※ 촬영 기간: 1~2일 소요

+

※ 최소 이용: 2시간

@@ -434,11 +426,10 @@
룩 개발 & 연출
- 500,000원 ~ 1,500,000원 + 500,000원~
-

뮤직비디오의 비주얼 완성도를 높이기 위한 단계입니다.

-

Unity 환경에서 포스트 프로세싱, 아트워크 확정, 카메라 워킹 등 최종적인 룩 개발을 진행합니다.

-

※ 비용은 연출의 복잡도와 퀄리티에 따라 50~150만 원 정도가 소요됩니다.

+

Unity에서 포스트 프로세싱, 아트워크, 카메라 워킹 등을 진행합니다.

+

※ 연출 복잡도와 퀄리티에 따라 변동

@@ -446,15 +437,15 @@
7️⃣
최종 피드백 & 납품
-

완성된 영상 결과물을 제출한 후, 고객의 피드백을 반영하여 수정합니다.

-

※ 최종적으로 완성된 뮤직비디오 영상 파일(mp4/mov 등)을 납품합니다.

+

완성된 영상을 고객 피드백 반영 후 수정하여 최종 납품합니다.

+

※ 납품 형식: mp4/mov 등

-

💡 견적 진행: 1차 견적(기획, 배경 제작, 스토리보드 작성) → 2차 견적(아바타 세팅, 모션 캡처, 룩 개발, 후반작업 및 납품) 순으로 단계별 견적을 확정하며 진행됩니다.

+

💡 제작 프로세스: 기획 상담(무료) → 전체 견적 제시 → 견적 승인 후 제작 시작 (2단계~7단계 순차 진행)