mingle/mingle-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update: 서비스 페이지 논리 오류 수정 및 3월 요금제 변경 팝업 추가

Browse Source 
- 서비스1 명칭 '모션캡처 녹화 서비스'로 통일
- 가격 카드 설명을 모션 녹화 중심으로 수정 (방송 표현 제거)
- SEO 메타/OG/Twitter 가격 및 용어 오류 수정
- mailto 템플릿 가격·용어 현행화
- 메인 팝업: 3월 요금제 변경 안내로 교체
  - 할인 이벤트 종료, 스트리밍글 4시간 신설, 추천인 제도 오픈
- 팝업 스크롤바 숨김 처리 및 변경사항 카드 스타일 추가

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
68893236+KINDNICK@users.noreply.github.com 2026-02-27 20:50:02 +09:00
parent ba99cbe0ae
commit d4a3a9afa5
4 changed files with 174 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

121
css/popup.css
View File

@ -46,6 +46,11 @@
overflow-x: hidden;
animation: popupSlideIn 0.5s cubic-bezier(0.16, 1, 0.3, 1);
z-index: 9999;
scrollbar-width: none;
}
.popup-container::-webkit-scrollbar {
display: none;
}
@keyframes popupSlideIn {
@ -195,6 +200,96 @@
margin-top: 4px;
}
/* 변경사항 카드 */
.change-card {
background: linear-gradient(135deg, #fffbf5 0%, #fff8f0 100%);
border-radius: 14px;
padding: 1rem 1.25rem;
margin-bottom: 0.75rem;
border: 1px solid rgba(255, 136, 0, 0.12);
transition: all 0.3s ease;
}
.change-card:hover {
border-color: rgba(255, 136, 0, 0.3);
box-shadow: 0 4px 16px rgba(255, 136, 0, 0.08);
transform: translateY(-2px);
}
.change-card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
}
.change-card-title {
font-size: 0.95rem;
font-weight: 700;
color: #1a1a2e;
display: flex;
align-items: center;
gap: 6px;
}
.change-card-title i {
color: var(--primary-color, #ff8800);
font-size: 0.85rem;
}
.change-badge {
padding: 3px 10px;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 700;
color: white;
letter-spacing: 0.02em;
flex-shrink: 0;
}
.badge-end {
background: linear-gradient(135deg, #6b7280, #4b5563);
}
.badge-new {
background: linear-gradient(135deg, #22c55e, #16a34a);
}
.badge-change {
background: linear-gradient(135deg, #f59e0b, #d97706);
}
.change-description {
font-size: 0.85rem;
color: #555;
line-height: 1.6;
margin: 0;
}
.change-description strong {
color: var(--primary-color, #ff8800);
font-weight: 700;
}
.change-price {
display: flex;
align-items: baseline;
gap: 6px;
margin-bottom: 0.5rem;
}
.change-price-amount {
font-size: 1.15rem;
font-weight: 800;
color: #ff6600;
}
.change-price-unit {
font-size: 0.8rem;
color: #888;
font-weight: 500;
}
/* 공지사항 */
.popup-notice {
background: rgba(255, 136, 0, 0.06);
@ -445,6 +540,32 @@
color: rgba(255, 255, 255, 0.8);
}
[data-theme="dark"] .change-card {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .change-card:hover {
border-color: rgba(255, 136, 0, 0.3);
box-shadow: 0 4px 16px rgba(255, 136, 0, 0.1);
}
[data-theme="dark"] .change-card-title {
color: rgba(255, 255, 255, 0.9);
}
[data-theme="dark"] .change-description {
color: rgba(255, 255, 255, 0.55);
}
[data-theme="dark"] .change-price-amount {
color: #ff9933;
}
[data-theme="dark"] .change-price-unit {
color: rgba(255, 255, 255, 0.4);
}
/* ========================================
모바일 반응형
======================================== */

59
index.html
View File

@ -190,54 +190,59 @@
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<!-- 할인 이벤트 팝업 -->
<div class="popup-overlay" id="mainPopup" role="dialog" aria-label="이벤트 팝업">
<!-- 요금제 변경 안내 팝업 -->
<div class="popup-overlay" id="mainPopup" role="dialog" aria-label="요금제 변경 안내 팝업">
<div class="popup-container">
<button class="popup-close-x" id="popupCloseX" aria-label="팝업 닫기">×</button>
<div class="popup-header">
<h2 class="popup-title"><i class="fa-solid fa-gift" aria-hidden="true"></i> 밍글 스튜디오 오픈 기념 <i class="fa-solid fa-gift" aria-hidden="true"></i></h2>
<p class="popup-subtitle">특별 할인 이벤트</p>
<div class="popup-badge">최대 20% 할인</div>
<h2 class="popup-title"><i class="fa-solid fa-bullhorn" aria-hidden="true"></i> 요금제 변경 안내</h2>
<p class="popup-subtitle">2026년 3월부터 적용됩니다</p>
<div class="popup-badge">3월 시행</div>
</div>
<div class="popup-body">
<div class="popup-section">
<h3 class="popup-section-title">할인 서비스</h3>
<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 class="change-card">
<div class="change-card-header">
<span class="change-card-title"><i class="fa-solid fa-clock-rotate-left" aria-hidden="true"></i> 할인 이벤트 종료</span>
<span class="change-badge badge-end">종료</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>
<p class="change-description">오픈 기념 20% 할인 이벤트가 <strong>2월 28일</strong>로 종료되며, 3월부터 정상가가 적용됩니다.</p>
</div>
<div class="discount-card">
<div class="discount-card-header">
<span class="discount-card-title">스트리밍글 서비스</span>
<span class="discount-badge">20% 할인</span>
<div class="change-card">
<div class="change-card-header">
<span class="change-card-title"><i class="fa-solid fa-plus-circle" aria-hidden="true"></i> 스트리밍글 4시간 서비스 신설</span>
<span class="change-badge badge-new">NEW</span>
</div>
<div class="discount-price">
<span class="original-price">2,000,000원</span>
<span class="sale-price">1,600,000원</span>
<div class="change-price">
<span class="change-price-amount">1,400,000원</span>
<span class="change-price-unit">/ 4시간 패키지</span>
</div>
<p class="price-note">1~4인 사용 / 6시간 패키지 / VAT 별도</p>
<p class="change-description">기존 스트리밍글 서비스(6시간)와 동일한 혜택을 4시간 패키지로 이용할 수 있습니다.</p>
</div>
<div class="change-card">
<div class="change-card-header">
<span class="change-card-title"><i class="fa-solid fa-user-plus" aria-hidden="true"></i> 추천인 제도 오픈</span>
<span class="change-badge badge-new">NEW</span>
</div>
<p class="change-description">친구를 소개하면 소개한 분, 소개받은 분 모두에게 <strong>20% 할인권</strong>을 드립니다. (1회 사용, 중복 적용 불가)</p>
</div>
</div>
<div class="popup-notice">
<p>※ 뮤직비디오 제작 서비스는 할인이 미적용 됩니다</p>
<p>※ 변경된 요금은 3월 초 서비스 페이지에 반영 예정입니다</p>
</div>
<div class="popup-info">
<div class="info-item">
<div class="info-label">이벤트 기간</div>
<div class="info-value">~ 2026/2/28</div>
<div class="info-label">적용 시기</div>
<div class="info-value">2026년 3월~</div>
</div>
<div class="info-item">
<div class="info-label">문의 메일</div>
@ -246,7 +251,7 @@
</div>
<button class="popup-cta" id="popupCtaBtn">
지금 바로 예약하기 →
현재 서비스 요금 보기 →
</button>
</div>

6
js/popup.js
View File

@ -41,7 +41,7 @@ function closePopup() {
// "하루동안 보지 않기" 체크된 경우
if (dontShowToday && dontShowToday.checked) {
setCookie('hideMainPopup', 'true', 1); // 1일간 쿠키 저장
setCookie('hidePriceChangePopup', 'true', 1); // 1일간 쿠키 저장
}
}
}
@ -49,7 +49,7 @@ function closePopup() {
// 페이지 로드 시 실행
document.addEventListener('DOMContentLoaded', function() {
// 쿠키 확인
const hidePopup = getCookie('hideMainPopup');
const hidePopup = getCookie('hidePriceChangePopup');
// 쿠키가 없으면 팝업 표시 (1초 후)
if (!hidePopup) {
@ -90,7 +90,7 @@ document.addEventListener('DOMContentLoaded', function() {
if (ctaBtn) {
ctaBtn.addEventListener('click', function() {
closePopup();
window.location.href = '/contact';
window.location.href = '/services';
});
}
});

36
services.html
View File

@ -32,13 +32,13 @@
<meta name="theme-color" content="#ff8800">
<!-- SEO 메타 태그 -->
<meta name="description" content="밍글 스튜디오 서비스 소개 - OptiTrack 모션캡쳐 스튜디오 대관, 시간당 22만원, 전신/페이셜 캡쳐, 실시간 스트리밍 지원">
<meta name="keywords" content="모션캡쳐 대관, OptiTrack, 스튜디오 요금, 버튜버 방송, 실시간 스트리밍">
<meta name="description" content="밍글 스튜디오 서비스 소개 - OptiTrack 모션캡쳐 스튜디오 대관, 1인 120,000원~/시간, 전신/페이셜 캡쳐, 모션 녹화 전문">
<meta name="keywords" content="모션캡쳐 대관, OptiTrack, 스튜디오 요금, 모션 녹화, 모션캡쳐 스튜디오">
<meta name="author" content="밍글 스튜디오">
<!-- Open Graph -->
<meta property="og:title" content="서비스 소개 - 밍글 스튜디오">
<meta property="og:description" content="30대 OptiTrack 카메라로 전신/페이셜 모션캡처, 1인 150,000원, 2인 200,000원. 스트리밍글 서비스 2,000,000원으로 6시간 풀패키지 제공">
<meta property="og:description" content="30대 OptiTrack 카메라로 전신/페이셜 모션캡처, 1인 120,000원~/시간, 2인 160,000원~/시간. 스트리밍글 서비스 1,600,000원으로 6시간 풀패키지 제공">
<meta property="og:url" content="https://minglestudio.co.kr/services.html">
<meta property="og:type" content="website">
<meta property="og:image" content="https://minglestudio.co.kr/images/logo/mingle-OG.png">
@ -46,12 +46,12 @@
<meta property="og:image:height" content="630">
<meta property="og:locale" content="ko_KR">
<meta property="og:site_name" content="밍글 스튜디오">
<meta property="og:image:alt" content="밍글 스튜디오 - 모션캡처 서비스 요금안내">
<meta property="og:image:alt" content="밍글 스튜디오 - 모션캡처 녹화 서비스 요금안내">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="서비스 소개 - 밍글 스튜디오">
<meta name="twitter:description" content="30대 OptiTrack 카메라로 전신/페이셜 모션캡처, 1인 150,000원, 2인 200,000원. 스트리밍글 서비스 2,000,000원으로 6시간 풀패키지 제공">
<meta name="twitter:description" content="30대 OptiTrack 카메라로 전신/페이셜 모션캡처, 1인 120,000원~/시간, 2인 160,000원~/시간. 스트리밍글 서비스 1,600,000원으로 6시간 풀패키지 제공">
<meta name="twitter:image" content="https://minglestudio.co.kr/images/logo/mingle-OG.png">
<meta name="twitter:site" content="@mingle_studio">
<meta name="twitter:creator" content="@mingle_studio">
@ -90,15 +90,15 @@
<div class="container">
<div class="section-header">
<h2>서비스 패키지</h2>
<p>용도와 규모에 맞는 최적의 모션캡처 서비스를 제공합니다</p>
<p>용도와 규모에 맞는 최적의 모션캡처 녹화 서비스를 제공합니다</p>
<p class="vat-notice-inline">※ 모든 가격은 부가세 별도입니다</p>
</div>
<!-- 서비스 1: 모션캡처 서비스 -->
<!-- 서비스 1: 모션캡처 녹화 서비스 -->
<div class="service-package">
<div class="package-header">
<span class="package-icon"><i class="fa-solid fa-bullseye" aria-hidden="true"></i></span>
<h3>서비스 1: 모션캡처 서비스</h3>
<h3>서비스 1: 모션캡처 녹화 서비스</h3>
<span class="package-badge">기본형</span>
</div>
@ -118,9 +118,9 @@
</div>
<div class="card-features">
<ul>
<li>1인 모션 녹화</li>
<li>개인 프로젝트 최적화</li>
<li>VTuber 방송 준비</li>
<li>1인 콘텐츠 제작</li>
<li>단독 캐릭터 모션 수록</li>
</ul>
</div>
</div>
@ -139,9 +139,9 @@
</div>
<div class="card-features">
<ul>
<li>합방 콘텐츠 제작</li>
<li>상호작용 연출</li>
<li>팀 프로젝트</li>
<li>2인 동시 모션 녹화</li>
<li>캐릭터 간 인터랙션 수록</li>
<li>팀 프로젝트 협업</li>
</ul>
</div>
</div>
@ -159,9 +159,9 @@
</div>
<div class="card-features">
<ul>
<li>최대 4인까지</li>
<li>대규모 콘텐츠</li>
<li>그룹 프로젝트</li>
<li>최대 4인 동시 녹화</li>
<li>다인원 모션 캡쳐</li>
<li>그룹 안무·연기 수록</li>
</ul>
</div>
</div>
@ -276,7 +276,7 @@
<li>1인당 1벌 캐릭터 무료 세팅</li>
<li>기존 보유 배경 중 2개 무료 세팅</li>
<li>프랍 무료 세팅 (신규 프랍 최대 6개, 보유 프랍 무제한)</li>
<li>모션캡처 서비스</li>
<li>모션캡처 녹화 서비스</li>
<li>실시간 영상 촬영</li>
<li><strong>라이브 방송 서비스</strong></li>
</ul>
@ -653,7 +653,7 @@
</div>
<div class="email-send">
<a href="mailto:help@minglestudio.co.kr?subject=[스튜디오 예약 문의] 밍글 스튜디오&body=안녕하세요. 밍글 스튜디오 대관 예약 문의 드립니다.%0A%0A■ 기본 정보%0A- 이용 예정일: (예: 2024년 12월 25일)%0A- 이용 시간: (예: 오후 2시 ~ 4시, 2시간)%0A- 참여 인원: 명%0A- 연락처: %0A- 이메일: %0A%0A■ 촬영 정보%0A- 촬영 목적: (예: 버튜버 방송, 게임 제작, 영상 콘텐츠 등)%0A- 예상 촬영 내용: %0A- 필요한 장비: (전신 모션캡쳐 / 페이셜 캡쳐 / 기타)%0A%0A■ 추가 요청사항%0A- 특별한 요구사항: %0A- 문의사항: %0A%0A■ 참고사항%0A- 최소 대관: 2시간 (220,000원, VAT 포함)%0A- 연장: 1시간당 110,000원%0A- 결제방법: 계좌이체 또는 현금 (카드결제 불가)%0A- 현금영수증/세금계산서 발행 가능%0A%0A빠른 시일 내에 답변 드리겠습니다.%0A감사합니다." class="btn btn-primary">
<a href="mailto:help@minglestudio.co.kr?subject=[스튜디오 예약 문의] 밍글 스튜디오&body=안녕하세요. 밍글 스튜디오 대관 예약 문의 드립니다.%0A%0A■ 기본 정보%0A- 이용 예정일: (예: 2024년 12월 25일)%0A- 이용 시간: (예: 오후 2시 ~ 4시, 2시간)%0A- 참여 인원: 명%0A- 연락처: %0A- 이메일: %0A%0A■ 촬영 정보%0A- 촬영 목적: (예: 모션캡처 녹화, 게임 제작, 뮤직비디오 제작 등)%0A- 예상 촬영 내용: %0A- 필요한 장비: (전신 모션캡쳐 / 페이셜 캡쳐 / 기타)%0A%0A■ 추가 요청사항%0A- 특별한 요구사항: %0A- 문의사항: %0A%0A■ 참고사항%0A- 최소 대관: 2시간 (1인 120,000원~/시간, VAT 별도)%0A- 인원 추가: 2인 160,000원~/시간, 추가 인원 +80,000원~/명/시간%0A- 결제방법: 계좌이체 또는 현금 (카드결제 불가)%0A- 현금영수증/세금계산서 발행 가능%0A%0A빠른 시일 내에 답변 드리겠습니다.%0A감사합니다." class="btn btn-primary">
<i class="fa-solid fa-envelope" aria-hidden="true"></i> 이메일 바로 보내기
</a>
</div>