mingle-website/index.html

879 lines
52 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>밍글 스튜디오 - 모션캡쳐 창작 스튜디오</title>
<!-- SEO 메타 태그 -->
<meta name="description" content="밍글 스튜디오 - 모션캡쳐 스튜디오 대관 서비스. OptiTrack 기반 28대 카메라 시스템으로 전신/페이셜 모션캡쳐 가능. 시간당 20만원. 인천테크노밸리 위치.">
<meta name="keywords" content="모션캡쳐, 스튜디오 대관, OptiTrack, 모션캡처, 3D 애니메이션, 버추얼 콘텐츠, 인천 스튜디오, 모션캡쳐 대관, 3D 캐릭터 애니메이션">
<meta name="author" content="밍글 스튜디오">
<meta name="robots" content="index, follow">
<meta name="language" content="ko">
<!-- Open Graph 태그 (소셜 미디어 공유용) -->
<meta property="og:title" content="밍글 스튜디오 - 모션캡쳐 창작 스튜디오">
<meta property="og:description" content="최첨단 모션캡쳐 기술로 버추얼 캐릭터의 살아 숨쉬는 감정과 움직임을 담아 새로운 세대의 디지털 퍼포먼스를 실현합니다">
<meta property="og:type" content="website">
<meta property="og:url" content="https://minglestudio.co.kr/">
<meta property="og:image" content="https://minglestudio.co.kr/mingle%20logo.webp">
<meta property="og:site_name" content="밍글 스튜디오">
<meta property="og:locale" content="ko_KR">
<!-- Twitter Card 태그 -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="밍글 스튜디오 - 모션캡쳐 창작 스튜디오">
<meta name="twitter:description" content="최첨단 모션캡쳐 기술로 버추얼 캐릭터의 살아 숨쉬는 감정과 움직임을 담아 새로운 세대의 디지털 퍼포먼스를 실현합니다">
<meta name="twitter:image" content="https://minglestudio.co.kr/mingle%20logo.webp">
<!-- 파비콘 -->
<link rel="icon" type="image/webp" href="mingle logo.webp">
<link rel="apple-touch-icon" href="mingle logo.webp">
<!-- 구조화된 데이터 (JSON-LD) -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "LocalBusiness",
"name": "밍글 스튜디오",
"alternateName": "MINGLE STUDIO",
"description": "모션캡쳐 스튜디오 대관 서비스. OptiTrack 기반 28대 카메라 시스템으로 전신/페이셜 모션캡쳐 가능",
"url": "https://minglestudio.co.kr/",
"logo": "https://minglestudio.co.kr/mingle%20logo.webp",
"image": "https://minglestudio.co.kr/mingle%20logo.webp",
"address": {
"@type": "PostalAddress",
"addressLocality": "인천",
"addressRegion": "부평구",
"streetAddress": "주부토로 236, 인천테크노밸리 A동 B105호",
"postalCode": "21330",
"addressCountry": "KR"
},
"telephone": "010-9288-9190",
"email": "minglestudio.mocap@gmail.com",
"openingHours": "Mo-Su 09:00-18:00",
"priceRange": "$$",
"currenciesAccepted": "KRW",
"paymentAccepted": "Cash, Credit Card",
"founder": {
"@type": "Person",
"name": "김희진"
},
"serviceArea": {
"@type": "GeoCircle",
"geoMidpoint": {
"@type": "GeoCoordinates",
"latitude": 37.5665,
"longitude": 126.9780
},
"geoRadius": "50000"
},
"hasOfferCatalog": {
"@type": "OfferCatalog",
"name": "스튜디오 대관 서비스",
"itemListElement": [
{
"@type": "Offer",
"itemOffered": {
"@type": "Service",
"name": "모션캡쳐 스튜디오 대관",
"description": "OptiTrack 기반 28대 카메라 시스템으로 전신/페이셜 모션캡쳐 가능"
},
"price": "200000",
"priceCurrency": "KRW",
"priceSpecification": {
"@type": "UnitPriceSpecification",
"price": "200000",
"priceCurrency": "KRW",
"unitText": "시간당"
}
}
]
}
}
</script>
<!-- 동영상 구조화된 데이터 -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "VideoObject",
"name": "밍글 스튜디오 모션캡쳐 포트폴리오",
"description": "밍글 스튜디오에서 제작한 모션캡쳐 영상 콘텐츠 모음",
"thumbnailUrl": "https://minglestudio.co.kr/mingle%20logo.webp",
"duration": "PT5M",
"contentUrl": "https://www.youtube.com/embed/FecqTyUU6y0",
"embedUrl": "https://www.youtube.com/embed/FecqTyUU6y0",
"publisher": {
"@type": "Organization",
"name": "밍글 스튜디오",
"logo": {
"@type": "ImageObject",
"url": "https://minglestudio.co.kr/mingle%20logo.webp"
}
},
"creator": {
"@type": "Person",
"name": "김희진"
}
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "VideoObject",
"name": "밍글 스튜디오 모션캡쳐 Shorts",
"description": "밍글 스튜디오 모션캡쳐 Shorts 영상",
"thumbnailUrl": "https://minglestudio.co.kr/mingle%20logo.webp",
"duration": "PT1M",
"contentUrl": "https://www.youtube.com/embed/OmpqKhMrb-U",
"embedUrl": "https://www.youtube.com/embed/OmpqKhMrb-U",
"publisher": {
"@type": "Organization",
"name": "밍글 스튜디오",
"logo": {
"@type": "ImageObject",
"url": "https://minglestudio.co.kr/mingle%20logo.webp"
}
},
"creator": {
"@type": "Person",
"name": "김희진"
}
}
</script>
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
body { font-family: 'Pretendard', 'Noto Sans KR', sans-serif; background: #f8fafc; color: #222; }
.section { padding: 5rem 0; }
.container { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; }
.section-header { text-align: center; margin-bottom: 3rem; }
.section-header h2 { font-size: 2.5rem; font-weight: 700; color: #222; }
.section-header p { color: #666; font-size: 1.1rem; }
.card { background: #fff; border-radius: 18px; box-shadow: 0 4px 24px rgba(0,0,0,0.06); padding: 2rem; margin-bottom: 2rem; }
.btn { display: inline-block; padding: 0.7rem 1.7rem; border-radius: 30px; font-weight: 600; text-decoration: none; transition: 0.2s; }
.btn-primary { background: #ff8800; color: #fff; }
.btn-primary:hover { background: #ff6600; }
.btn-secondary { background: #fff; color: #ff8800; border: 2px solid #ff8800; }
.btn-secondary:hover { background: #ff8800; color: #fff; }
.highlight { color: #ff8800; font-weight: 700; }
.table { width: 100%; border-collapse: collapse; background: #fff; margin-bottom: 1.5rem; }
.table th, .table td { border: 1px solid #e5e7eb; padding: 0.9rem 0.7rem; text-align: left; }
.table th { background: #f3f4f6; font-weight: 600; }
.table tr:nth-child(even) { background: #fafafa; }
.flex { display: flex; gap: 2rem; flex-wrap: wrap; }
.flex-col { flex-direction: column; }
.team-card { flex: 1 1 250px; min-width: 220px; background: #fff; border-radius: 14px; box-shadow: 0 2px 12px rgba(0,0,0,0.04); padding: 1.5rem; margin-bottom: 1.5rem; }
.team-card h4 { margin: 0.5rem 0 0.2rem; font-size: 1.1rem; }
.team-card .role { color: #ff8800; font-weight: 600; font-size: 1rem; }
.team-card .desc { color: #555; font-size: 0.98rem; }
.faq-list { margin: 0; padding: 0; list-style: none; }
.faq-list li { margin-bottom: 1.5rem; background: #fff; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.04); padding: 1.2rem 1.5rem; }
.faq-q { font-weight: 600; color: #222; }
.faq-a { color: #666; margin-top: 0.3rem; }
.portfolio-links a { display: block; margin-bottom: 0.5rem; color: #2563eb; text-decoration: underline; }
/* 네비게이션 메뉴 스타일 개선 */
.navbar { background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,0.03); }
.nav-menu { display: flex; gap: 2.2rem; list-style: none; margin: 0; padding: 0; }
.nav-menu li { display: flex; align-items: center; }
.nav-menu a {
color: #ff8800;
font-weight: 600;
font-size: 1.08rem;
text-decoration: none;
padding: 0.4rem 0.7rem;
border-radius: 8px;
transition: background 0.18s, color 0.18s;
}
.nav-menu a:hover, .nav-menu a:focus {
background: #fff3e0;
color: #d35400;
}
/* 포트폴리오 유튜브 임베드 그리드 개선 */
.youtube-embed-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
margin-top: 2.5rem;
}
.youtube-embed-card {
background: #fff;
border-radius: 16px;
box-shadow: 0 2px 16px rgba(0,0,0,0.07);
padding: 1.2rem 1.2rem 1.5rem 1.2rem;
display: flex;
flex-direction: column;
align-items: center;
}
.youtube-embed-card .youtube-embed {
width: 100%;
max-width: 420px;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}
.youtube-embed-card .yt-title {
font-weight: 600;
margin-bottom: 0.7rem;
color: #222;
font-size: 1.08rem;
}
@media (max-width: 900px) {
.youtube-embed-grid { grid-template-columns: 1fr; }
}
@media (max-width: 800px) { .flex { flex-direction: column; } }
/* 모바일 대응 스타일 */
@media (max-width: 768px) {
.container { padding: 0 1rem; }
.section { padding: 3rem 0; }
.section-header h2 { font-size: 2rem; }
.card { padding: 1.5rem; }
/* 모바일 이메일 양식 최적화 */
#inlineEmailForm, #inlineEmailForm2 {
padding: 0.8rem !important;
margin-top: 1rem !important;
}
#inlineEmailForm .btn, #inlineEmailForm2 .btn {
width: 100%;
max-width: 280px;
margin: 0 auto;
display: block;
font-size: 0.9rem !important;
padding: 0.7rem 1.2rem !important;
}
/* 모바일에서 긴 텍스트 줄바꿈 */
.faq-a {
word-break: keep-all;
line-height: 1.5;
font-size: 0.95rem;
}
/* 모바일 테이블 최적화 */
.table {
font-size: 0.85rem;
}
.table th, .table td {
padding: 0.5rem 0.3rem;
}
/* 모바일 네비게이션 */
.nav-menu {
gap: 1rem;
}
.nav-menu a {
font-size: 1rem;
padding: 0.3rem 0.5rem;
}
/* 모바일 버튼 크기 조정 */
.btn {
padding: 0.6rem 1.2rem;
font-size: 0.9rem;
}
}
@media (max-width: 480px) {
.nav-logo {
flex-direction: column;
gap: 0.3rem;
}
.nav-logo img {
height: 32px;
}
.nav-logo span {
font-size: 1.1rem;
}
.hero-title {
font-size: 2rem;
}
.section-header h2 {
font-size: 1.8rem;
}
.btn {
padding: 0.8rem 1.5rem;
font-size: 0.95rem;
}
.gallery-grid {
grid-template-columns: 1fr;
}
/* 모바일 이메일 양식 추가 최적화 */
#inlineEmailForm, #inlineEmailForm2 {
padding: 0.6rem !important;
}
#inlineEmailForm .btn, #inlineEmailForm2 .btn {
font-size: 0.85rem !important;
padding: 0.6rem 1rem !important;
}
/* 모바일에서 테이블 스크롤 */
.table {
overflow-x: auto;
display: block;
white-space: nowrap;
}
.table th, .table td {
min-width: 120px;
}
}
</style>
</head>
<body>
<nav class="navbar">
<div class="nav-container">
<div class="nav-logo" style="display:flex;align-items:center;gap:0.7rem;flex-shrink:0;">
<img src="mingle logo.webp" alt="밍글 스튜디오 로고" style="height:38px;width:auto;display:inline-block;vertical-align:middle;object-fit:contain;">
<span style="font-size:1.3rem;font-weight:700;color:#ff8800;letter-spacing:0.01em;white-space:nowrap;">밍글 스튜디오</span>
</div>
<ul class="nav-menu">
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#studio-gallery">Gallery</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#faq">FAQ</a></li>
</ul>
</div>
</nav>
<!-- Hero -->
<section class="section" style="background:linear-gradient(120deg,#fff7ed 60%,#ffe0b2 100%);padding-top:7rem;">
<div class="container flex" style="align-items:center;">
<div style="flex:1;min-width:260px;">
<h1 style="font-size:2.7rem;font-weight:800;line-height:1.2;">밍글스튜디오<br><span class="highlight">MINGLE STUDIO</span></h1>
<p style="margin:1.2rem 0 2rem;color:#555;font-size:1.15rem;">기술과 창의력 열정이 한데 섞여 새로운 가치가 만들어지는 공간</p>
<a href="#about" class="btn btn-primary">회사 소개 보기</a>
</div>
<div style="flex:1;min-width:220px;text-align:center;">
<img src="mingle logo.webp" alt="밍글 스튜디오 로고" style="max-width:260px;width:90%;">
</div>
</div>
</section>
<!-- About (팀 포함) -->
<section id="about" class="section">
<div class="container">
<div class="section-header">
<h2>About</h2>
<div style="max-width:800px;margin:0 auto;text-align:left;">
<p style="margin-bottom:0.8rem;"><b>회사명:</b> 밍글 스튜디오 (mingle studio) &nbsp;|&nbsp; <b>설립일:</b> 2025년 7월 15일</p>
<p style="margin-bottom:0.8rem;"><b>슬로건:</b> "모두가 어우러진 즐거운 창작공간"</p>
<p style="margin-bottom:0.8rem;color:#666;line-height:1.5;"><b>의미:</b> Mingle Studio는 기술자와 크리에이터 그리고 시청자가 함께 어우러지는 버추얼 콘텐츠 제작 공간입니다. 최첨단 광학식 모션캡처 기술로 버추얼 캐릭터의 살아 숨쉬는 감정과 움직임을 담아 새로운 세대의 디지털 퍼포먼스를 실현합니다.</p>
</div>
</div>
<div class="card">
<h3 style="margin-bottom:0.7rem;">회사 소개</h3>
<p>밍글 스튜디오는 창작자와 기술, 사람과 사람 사이의 '어우러짐'을 통해 새로운 콘텐츠를 만들어가는 모션 캡쳐 기반의 창작 공간입니다.<br>2024년 설립 이후, 누구나 편하게 사용 가능한 스튜디오 대관 서비스를 중심으로 버추얼 콘텐츠 제작 환경을 제공합니다.</p>
</div>
<div class="card">
<h3 style="margin-bottom:0.7rem;">연혁 / 타임라인</h3>
<table class="table">
<thead><tr><th>날짜</th><th>이벤트</th></tr></thead>
<tbody>
<tr><td>2025년 7월 15일</td><td>밍글 스튜디오 회사 설립</td></tr>
<tr><td>2025년 8월 1일</td><td>밍글 스튜디오 오픈</td></tr>
</tbody>
</table>
</div>
<div class="section-header" style="margin-top:3rem;">
<h2>Team</h2>
<p>각 분야의 전문가들이 함께 협업하며 콘텐츠 제작을 지원합니다.</p>
</div>
<div class="flex">
<div class="team-card">
<h4>김희진 (JAYJAY)</h4>
<div class="role">대표 / 3D 아티스트</div>
<div class="desc">배경/리소스 제작, 인사 및 프로젝트 관리</div>
</div>
<div class="team-card">
<h4>김광진 (KINDNICK)</h4>
<div class="role">TD / 테크니컬 디렉터</div>
<div class="desc">스튜디오 전체 기술 운영, 모션캡쳐 장비 관리, 음향 시스템, 엔진 프로그래밍 등</div>
</div>
<div class="team-card">
<h4>이승민 (YAMO)</h4>
<div class="role">콘텐츠 디렉터</div>
<div class="desc">캡쳐 디렉팅, 배우 모션 클린업, 카메라 무빙, 퍼포먼스 연출 등</div>
</div>
</div>
</div>
</section>
<!-- Services -->
<section id="services" class="section" style="background:#fff;">
<div class="container">
<div class="section-header">
<h2>주요 서비스 소개</h2>
</div>
<!-- 서비스 항목 테이블 -->
<div class="card">
<h3 style="margin-bottom:1.5rem;">서비스 항목 및 요금</h3>
<table class="table" style="text-align:center;">
<thead>
<tr>
<th style="text-align:center;">서비스 항목</th>
<th style="text-align:center;">설명</th>
<th style="text-align:center;">요금</th>
</tr>
</thead>
<tbody>
<tr>
<td><b>모션캡쳐 스튜디오 대관</b></td>
<td>
• 28대의 광학식 카메라 시스템 (OptiTrack)<br>
• 모션캡쳐 수트 및 장갑 지원 (Rokoko Glove)<br>
• 스튜디오 면적: 8m(가로) x 7m(세로) x 2.6m(높이)<br>
• 실시간 모니터링 장비 보유<br>
• 전신 및 페이셜 모션캡쳐 가능<br>
• 동시 이용가능 인원: 최대 4인<br>
• 모션 녹화 파일 제공<br>
• 실시간 오퍼레이팅 지원
</td>
<td>
<b>시간당 200,000원</b><br>
(VAT 별도)<br>
<b>최소 이용: 2시간</b><br><br>
<b>인원 요금:</b><br>
• 기본 인원: 2인<br>
• 추가 인원: +100,000원/시간당
</td>
</tr>
<tr>
<td><b>모션 리타겟팅</b></td>
<td>모션 데이터의 리타겟팅 지원</td>
<td>별도 문의<br>(프로젝트별 견적)</td>
</tr>
<tr>
<td><b>실시간 스트리밍</b></td>
<td>실시간 스트리밍 서비스</td>
<td>준비중</td>
</tr>
</tbody>
</table>
</div>
<!-- 서비스 이용 안내 -->
<div class="card">
<h3 style="margin-bottom:1.5rem;">서비스 이용 안내</h3>
<h4 style="color:#ff8800;margin-bottom:1rem;">1) 스튜디오 대관 절차</h4>
<div style="background:#f8f9fa;padding:1.5rem;border-radius:10px;margin-bottom:2rem;">
<div style="display:flex;align-items:center;gap:1rem;flex-wrap:wrap;justify-content:center;">
<span style="background:#ff8800;color:#fff;padding:0.5rem 1rem;border-radius:20px;font-weight:600;">이메일 문의</span>
<span style="font-size:1.5rem;"></span>
<span style="background:#ff8800;color:#fff;padding:0.5rem 1rem;border-radius:20px;font-weight:600;">담당자 확인 및 세부사항 협의</span>
<span style="font-size:1.5rem;"></span>
<span style="background:#ff8800;color:#fff;padding:0.5rem 1rem;border-radius:20px;font-weight:600;">전액 결제</span>
<span style="font-size:1.5rem;"></span>
<span style="background:#ff8800;color:#fff;padding:0.5rem 1rem;border-radius:20px;font-weight:600;">예약 확정</span>
</div>
<div style="margin-top:1.5rem;text-align:center;">
<button id="showEmailForm" class="btn btn-primary" style="margin:0 0.5rem;">📧 이메일 문의하기</button>
<p style="margin-top:0.5rem;color:#666;font-size:0.9rem;">※ 네이버 플레이스를 통한 예약도 가능합니다</p>
</div>
<!-- 인라인 이메일 양식 -->
<div id="inlineEmailForm" style="display:none;margin-top:1.5rem;background:#f8f9fa;padding:1rem;border-radius:10px;">
<p style="margin-bottom:1rem;font-weight:600;font-size:1rem;">아래 양식을 복사하여 이메일로 문의해주세요:</p>
<div style="background:#fff;padding:1rem;border-radius:8px;border:1px solid #e5e7eb;font-size:0.95rem;">
<p style="margin-bottom:0.8rem;word-break:break-all;"><strong>제목:</strong> [스튜디오 대관 문의]</p>
<p style="margin-bottom:0.8rem;word-break:break-all;"><strong>받는 사람:</strong> minglestudio.mocap@gmail.com</p>
<div style="margin-top:1.5rem;">
<p style="margin-bottom:0.8rem;"><strong>1. 성함 및 소속</strong></p>
<p style="margin-bottom:0.8rem;color:#666;font-size:0.9rem;line-height:1.4;">(개인의 경우 성함만, 기업인 경우 이용자분 성함과 소속을 함께 적어주세요)</p>
<p style="margin-bottom:1.5rem;">[여기에 작성해주세요]</p>
<p style="margin-bottom:0.8rem;"><strong>2. 연락처</strong></p>
<p style="margin-bottom:0.8rem;color:#666;font-size:0.9rem;">(전화번호, 이메일, 디스코드 중 택1)</p>
<p style="margin-bottom:1.5rem;">[여기에 작성해주세요]</p>
<p style="margin-bottom:0.8rem;"><strong>3. 이용 인원</strong></p>
<p style="margin-bottom:0.8rem;color:#666;font-size:0.9rem;">(1~2인 권장, 최대 4인까지 가능)</p>
<p style="margin-bottom:1.5rem;">□ 1명 □ 2명 □ 3명 □ 4명</p>
<p style="margin-bottom:0.8rem;"><strong>4. 스튜디오 사용 용도</strong></p>
<p style="margin-bottom:1.5rem;">□ 녹화 □ 기타: [여기에 작성해주세요]</p>
<p style="margin-bottom:0.8rem;"><strong>5. 희망 대관 날짜</strong></p>
<p style="margin-bottom:0.8rem;color:#666;font-size:0.9rem;">※ 최소 2주 전 예약을 권장합니다</p>
<p style="margin-bottom:1.5rem;">[여기에 작성해주세요]</p>
<p style="margin-bottom:0.8rem;"><strong>6. 희망 이용 시간</strong></p>
<p style="margin-bottom:0.8rem;color:#666;font-size:0.9rem;line-height:1.4;">※ 응답 예시) 오전 10시~ 오후 3시(5시간)</p>
<p style="margin-bottom:0.8rem;color:#666;font-size:0.9rem;line-height:1.4;">※ 새벽 대관(밤 10시~익일 8시) 이용 시 내부 규정에 따른 별도 요율이 적용됩니다</p>
<p style="margin-bottom:1.5rem;">[여기에 작성해주세요]</p>
</div>
</div>
<div style="margin-top:1.5rem;text-align:center;">
<a href="mailto:minglestudio.mocap@gmail.com?subject=[스튜디오 대관 문의]" class="btn btn-primary" style="font-size:0.95rem;padding:0.8rem 1.5rem;">📧 이메일 바로 보내기</a>
</div>
</div>
</div>
<h4 style="color:#ff8800;margin-bottom:1rem;">2) 예약 안내</h4>
<ul style="margin-bottom:2rem;padding-left:1.5rem;">
<li style="margin-bottom:0.5rem;">스튜디오 예약은 이용 희망일로부터 최소 2주 전에 신청하시는 것을 권장합니다.</li>
<li style="margin-bottom:0.5rem;">예약 확정 후 고객의 사정으로 인한 예약 취소 시 일정 기준에 따른 위약금이 발생합니다.</li>
</ul>
<h4 style="color:#ff8800;margin-bottom:1rem;">3) 취소 환불 규정</h4>
<table class="table" style="margin-bottom:2rem;">
<thead>
<tr>
<th style="text-align:center;">취소 시점</th>
<th style="text-align:center;">환불 비율</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:center;">예약일로부터 7일 전</td>
<td style="text-align:center;">100% 환불</td>
</tr>
<tr>
<td style="text-align:center;">예약일로부터 3일 전</td>
<td style="text-align:center;">70% 환불</td>
</tr>
<tr>
<td style="text-align:center;">예약일로부터 1일 전</td>
<td style="text-align:center;">50% 환불</td>
</tr>
<tr>
<td style="text-align:center;">당일 취소</td>
<td style="text-align:center;">환불 불가</td>
</tr>
</tbody>
</table>
<h4 style="color:#ff8800;margin-bottom:1rem;">4) 방문 안내</h4>
<ul style="margin-bottom:2rem;padding-left:1.5rem;">
<li style="margin-bottom:0.5rem;">본 촬영 전 모션캡쳐 수트 착용 등의 준비시간이 소요되므로 촬영예정 시간 최소 30분 전에 방문 부탁드립니다. (준비시간은 이용시간에 포함되지 않습니다)</li>
<li style="margin-bottom:0.5rem;">안경, 귀걸이 등 반사가 잘 되는 재질의 악세사리는 촬영 시 가급적 착용을 자제하여 주시기 바랍니다.</li>
</ul>
</div>
<!-- 스튜디오 이용 시 유의사항 -->
<div class="card">
<h3 style="margin-bottom:1.5rem;">스튜디오 이용 시 유의사항</h3>
<ul style="padding-left:1.5rem;">
<li style="margin-bottom:1rem;">스튜디오 내 모든 장비 및 설비는 소중히 다루어 주시기를 부탁드립니다.</li>
<li style="margin-bottom:1rem;">모션캡쳐 장비이용이 익숙하지 않으신 경우 사전에 운영진의 안내를 받으시거나 도움을 요청해 주세요. 정성껏 도와드리겠습니다.</li>
<li style="margin-bottom:1rem;">쾌적한 촬영환경과 장비 보호를 위해 촬영공간 내 음식물 반입 및 섭취를 지양해 주시기 바랍니다.</li>
<li style="margin-bottom:1rem;">대여 중 고객님의 고의 또는 과실로 인한 장비의 훼손 또는 분실이 발생한 경우, 수리 또는 교체에 필요한 비용이 청구될 수 있습니다.</li>
</ul>
</div>
</div>
</section>
<!-- Portfolio -->
<section id="portfolio" class="section" style="background:#fff;">
<div class="container">
<div class="section-header">
<h2>Portfolio</h2>
<p>밍글 스튜디오에서 제작하거나 협업한 영상 콘텐츠는 YouTube 링크를 통해 확인하실 수 있습니다.</p>
</div>
<div class="card portfolio-links">
<b>📺 YouTube 채널 보기</b><br>
<a href="https://www.youtube.com/@mingle_studio" target="_blank">밍글 스튜디오 유튜브 바로가기</a>
<div style="margin-top:2.2rem;"></div>
<div class="section-header" style="margin-bottom:1.2rem;"><h3 style="color:#ff8800;">Long-Form</h3></div>
<div class="youtube-embed-grid">
<div class="youtube-embed-card">
<div class="youtube-embed"><iframe width="100%" height="220" src="https://www.youtube.com/embed/FecqTyUU6y0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></div>
</div>
</div>
<div class="section-header" style="margin:2.5rem 0 1.2rem 0;"><h3 style="color:#ff8800;">Shorts</h3></div>
<div class="youtube-embed-grid">
<div class="youtube-embed-card">
<div class="youtube-embed"><iframe width="100%" height="400" src="https://www.youtube.com/embed/OmpqKhMrb-U" title="YouTube Shorts" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></div>
</div>
<div class="youtube-embed-card">
<div class="youtube-embed"><iframe width="100%" height="400" src="https://www.youtube.com/embed/hKwGjPfULFI" title="YouTube Shorts" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></div>
</div>
<div class="youtube-embed-card">
<div class="youtube-embed"><iframe width="100%" height="400" src="https://www.youtube.com/embed/_blWj7UQtRc" title="YouTube Shorts" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></div>
</div>
</div>
<div class="section-header" style="margin:2.5rem 0 1.2rem 0;"><h3 style="color:#ff8800;">실시간 방송 예시</h3></div>
<div class="youtube-embed-grid">
<div class="youtube-embed-card">
<div class="youtube-embed"><iframe width="100%" height="220" src="https://vod.sooplive.co.kr/player/159808721" title="미르 첫 모캡 방송" frameborder="0" allowfullscreen></iframe></div>
</div>
<div class="youtube-embed-card">
<div class="youtube-embed"><iframe width="100%" height="220" src="https://vod.sooplive.co.kr/player/159683673" title="250510 춤짱자매즈 모캡 합방 (w. 호발)" frameborder="0" allowfullscreen></iframe></div>
</div>
<div class="youtube-embed-card">
<div class="youtube-embed"><iframe width="100%" height="220" src="https://vod.sooplive.co.kr/player/159205533" title="크로아) 치요 X 마늘 3D 모션 캡쳐 합방" frameborder="0" allowfullscreen></iframe></div>
</div>
<div class="youtube-embed-card">
<div class="youtube-embed"><iframe width="100%" height="220" src="https://vod.sooplive.co.kr/player/159299033" title="뉴걸의 첫 모캡방송! 춤 못 추면 댄스방송 하면 안 되나요?" frameborder="0" allowfullscreen></iframe></div>
</div>
</div>
</div>
</div>
</section>
<!-- Studio Gallery -->
<section id="studio-gallery" class="section" style="background:#fff;">
<div class="container">
<div class="section-header">
<h2>스튜디오 공간 갤러리</h2>
<p>밍글 스튜디오의 실제 공간을 사진으로 확인해보세요. 이미지를 클릭하면 크게 볼 수 있습니다.</p>
</div>
<div class="gallery-grid">
<div class="studio-img-card">
<img src="Studio_Image/넓은 모션 캡쳐 공간 002.webp" alt="외부전경 커튼 열림" class="studio-img-thumb">
<div class="studio-img-caption">외부전경 커튼 열림</div>
</div>
<div class="studio-img-card">
<img src="Studio_Image/커튼을 친 외부 전경.webp" alt="외부 전경 닫힘" class="studio-img-thumb">
<div class="studio-img-caption">외부 전경 닫힘</div>
</div>
<div class="studio-img-card">
<img src="Studio_Image/프라이핏한 모션 캡쳐 공간.webp" alt="프라이빗 모션캡쳐 존" class="studio-img-thumb">
<div class="studio-img-caption">프라이빗 모션캡쳐 존</div>
</div>
<div class="studio-img-card">
<img src="Studio_Image/오퍼레이팅 공간 강조.webp" alt="오퍼레이팅/컨트롤룸" class="studio-img-thumb">
<div class="studio-img-caption">오퍼레이팅/컨트롤룸</div>
</div>
<div class="studio-img-card">
<img src="Studio_Image/스튜디오와 연결된 파우더룸.webp" alt="파우더룸(스튜디오 연결)" class="studio-img-thumb">
<div class="studio-img-caption">파우더룸(스튜디오 연결)</div>
</div>
<div class="studio-img-card">
<img src="Studio_Image/탈의실 내부 공간.webp" alt="탈의실(내부)" class="studio-img-thumb">
<div class="studio-img-caption">탈의실(내부)</div>
</div>
<div class="studio-img-card">
<img src="Studio_Image/탈의실 외부 공간.webp" alt="탈의실(외부)" class="studio-img-thumb">
<div class="studio-img-caption">탈의실(외부)</div>
</div>
</div>
</div>
</section>
<style>
.studio-img-card {
background:#fff;border-radius:14px;box-shadow:0 2px 12px rgba(0,0,0,0.06);padding:1rem;display:flex;flex-direction:column;align-items:center;
}
.studio-img-thumb {
width:100%;border-radius:10px;object-fit:cover;max-height:220px;cursor:pointer;transition:box-shadow 0.2s;
}
.studio-img-thumb:hover {
box-shadow:0 4px 24px rgba(0,0,0,0.18);
}
.studio-img-caption {
margin-top:0.7rem;font-weight:600;color:#222;font-size:1.05rem;text-align:center;
}
/* 라이트박스 스타일 */
.lightbox-bg {
position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,0.7);z-index:9999;display:flex;align-items:center;justify-content:center;animation:fadeIn 0.2s;
}
.lightbox-img {
max-width:90vw;max-height:80vh;border-radius:14px;box-shadow:0 8px 32px rgba(0,0,0,0.25);
}
.lightbox-close {
position:absolute;top:3vh;right:5vw;font-size:2.5rem;color:#fff;cursor:pointer;font-weight:700;z-index:10000;
}
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
</style>
<script>
// 라이트박스 기능 (이미지 넘기기 지원)
document.addEventListener('DOMContentLoaded', function() {
// 갤러리 이미지 정보 배열 생성
const galleryImages = Array.from(document.querySelectorAll('.studio-img-thumb')).map(img => ({
src: img.getAttribute('src'),
alt: img.getAttribute('alt'),
caption: img.parentElement.querySelector('.studio-img-caption')?.textContent || ''
}));
document.querySelectorAll('.studio-img-thumb').forEach(function(img, idx) {
img.addEventListener('click', function() {
openLightbox(idx);
});
});
function openLightbox(startIdx) {
let currentIdx = startIdx;
const lightboxBg = document.createElement('div');
lightboxBg.className = 'lightbox-bg';
renderLightboxContent();
document.body.appendChild(lightboxBg);
function renderLightboxContent() {
lightboxBg.innerHTML = `
<span class='lightbox-close'>&times;</span>
<button class='lightbox-arrow lightbox-prev'>&#10094;</button>
<div class='lightbox-img-wrap'>
<img src='${galleryImages[currentIdx].src}' alt='${galleryImages[currentIdx].alt}' class='lightbox-img'>
<div class='lightbox-caption'>${galleryImages[currentIdx].caption}</div>
</div>
<button class='lightbox-arrow lightbox-next'>&#10095;</button>
`;
lightboxBg.querySelector('.lightbox-close').onclick = closeLightbox;
lightboxBg.querySelector('.lightbox-prev').onclick = showPrev;
lightboxBg.querySelector('.lightbox-next').onclick = showNext;
lightboxBg.onclick = (e) => { if(e.target === lightboxBg) closeLightbox(); };
document.addEventListener('keydown', keyHandler);
}
function showPrev(e) {
e && e.stopPropagation();
currentIdx = (currentIdx - 1 + galleryImages.length) % galleryImages.length;
renderLightboxContent();
}
function showNext(e) {
e && e.stopPropagation();
currentIdx = (currentIdx + 1) % galleryImages.length;
renderLightboxContent();
}
function closeLightbox() {
document.removeEventListener('keydown', keyHandler);
lightboxBg.remove();
}
function keyHandler(e) {
if (e.key === 'ArrowLeft') showPrev();
if (e.key === 'ArrowRight') showNext();
if (e.key === 'Escape') closeLightbox();
}
}
// 인라인 이메일 문의 양식 토글 기능
const showEmailFormButtons = document.querySelectorAll('#showEmailForm, #showEmailForm2');
const inlineEmailForm1 = document.getElementById('inlineEmailForm');
const inlineEmailForm2 = document.getElementById('inlineEmailForm2');
showEmailFormButtons.forEach((button, index) => {
button.addEventListener('click', function() {
const targetForm = index === 0 ? inlineEmailForm1 : inlineEmailForm2;
if (targetForm.style.display === 'none' || targetForm.style.display === '') {
targetForm.style.display = 'block';
this.textContent = '📧 이메일 문의 양식 숨기기';
} else {
targetForm.style.display = 'none';
this.textContent = '📧 이메일 문의하기';
}
});
});
});
</script>
<!-- Contact -->
<section id="contact" class="section">
<div class="container">
<div class="section-header">
<h2>Contact</h2>
<p>예약 문의 또는 협업 제안은 언제든지 이메일로 연락주세요.</p>
</div>
<div class="card">
<b>이메일</b>: minglestudio.mocap@gmail.com<br>
<b>연락처</b>: 010-9288-9190<br>
<b>주소</b>: (21330) 인천광역시 부평구 주부토로 236<br>
<b>인천테크노밸리 A동 B105호</b><br>
<div style="margin-top:1.2rem;">
<b>오시는 길</b><br>
- 인천 7호선 <b>갈산역</b> 하차 → 도보 약 7분 거리<br>
- 건물 내 지하 주차 가능 (※ 2시간 무료)
</div>
</div>
</div>
</section>
<!-- FAQ -->
<section id="faq" class="section" style="background:#fff;">
<div class="container">
<div class="section-header">
<h2>FAQ 자주 묻는 질문</h2>
</div>
<ul class="faq-list">
<li><div class="faq-q">Q1. 스튜디오 대관은 어떻게 예약하나요?</div><div class="faq-a">A. 이메일 문의를 통해 예약하실 수 있습니다.<br>📧 minglestudio.mocap@gmail.com<br><br><button id="showEmailForm2" class="btn btn-primary" style="margin:0.5rem 0;">📧 이메일 문의하기</button>
<!-- 인라인 이메일 양식 (FAQ) -->
<div id="inlineEmailForm2" style="display:none;margin-top:1rem;background:#f8f9fa;padding:1rem;border-radius:10px;">
<p style="margin-bottom:1rem;font-weight:600;font-size:1rem;">아래 양식을 복사하여 이메일로 문의해주세요:</p>
<div style="background:#fff;padding:1rem;border-radius:8px;border:1px solid #e5e7eb;font-size:0.95rem;">
<p style="margin-bottom:0.8rem;word-break:break-all;"><strong>제목:</strong> [스튜디오 대관 문의]</p>
<p style="margin-bottom:0.8rem;word-break:break-all;"><strong>받는 사람:</strong> minglestudio.mocap@gmail.com</p>
<div style="margin-top:1.5rem;">
<p style="margin-bottom:0.8rem;"><strong>1. 성함 및 소속</strong></p>
<p style="margin-bottom:0.8rem;color:#666;font-size:0.9rem;line-height:1.4;">(개인의 경우 성함만, 기업인 경우 이용자분 성함과 소속을 함께 적어주세요)</p>
<p style="margin-bottom:1.5rem;">[여기에 작성해주세요]</p>
<p style="margin-bottom:0.8rem;"><strong>2. 연락처</strong></p>
<p style="margin-bottom:0.8rem;color:#666;font-size:0.9rem;">(전화번호, 이메일, 디스코드 중 택1)</p>
<p style="margin-bottom:1.5rem;">[여기에 작성해주세요]</p>
<p style="margin-bottom:0.8rem;"><strong>3. 이용 인원</strong></p>
<p style="margin-bottom:0.8rem;color:#666;font-size:0.9rem;">(1~2인 권장, 최대 4인까지 가능)</p>
<p style="margin-bottom:1.5rem;">□ 1명 □ 2명 □ 3명 □ 4명</p>
<p style="margin-bottom:0.8rem;"><strong>4. 스튜디오 사용 용도</strong></p>
<p style="margin-bottom:1.5rem;">□ 녹화 □ 기타: [여기에 작성해주세요]</p>
<p style="margin-bottom:0.8rem;"><strong>5. 희망 대관 날짜</strong></p>
<p style="margin-bottom:0.8rem;color:#666;font-size:0.9rem;">※ 최소 2주 전 예약을 권장합니다</p>
<p style="margin-bottom:1.5rem;">[여기에 작성해주세요]</p>
<p style="margin-bottom:0.8rem;"><strong>6. 희망 이용 시간</strong></p>
<p style="margin-bottom:0.8rem;color:#666;font-size:0.9rem;line-height:1.4;">※ 응답 예시) 오전 10시~ 오후 3시(5시간)</p>
<p style="margin-bottom:0.8rem;color:#666;font-size:0.9rem;line-height:1.4;">※ 새벽 대관(밤 10시~익일 8시) 이용 시 내부 규정에 따른 별도 요율이 적용됩니다</p>
<p style="margin-bottom:1.5rem;">[여기에 작성해주세요]</p>
</div>
</div>
<div style="margin-top:1.5rem;text-align:center;">
<a href="mailto:minglestudio.mocap@gmail.com?subject=[스튜디오 대관 문의]" class="btn btn-primary" style="font-size:0.95rem;padding:0.8rem 1.5rem;">📧 이메일 바로 보내기</a>
</div>
</div>
</div></li>
<li><div class="faq-q">Q2. 최소 대관 시간은 어떻게 되나요?</div><div class="faq-a">A. 최소 대관은 2시간부터 가능합니다.</div></li>
<li><div class="faq-q">Q3. 대관은 얼마나 전에 예약해야 하나요?</div><div class="faq-a">A. 최소 2주 전에 연락주시면 원활하게 준비가 가능합니다.</div></li>
<li><div class="faq-q">Q4. 현장 결제가 가능한가요?</div><div class="faq-a">A. 네, 가능합니다.</div></li>
<li><div class="faq-q">Q5. 세금계산서 발행이 가능한가요?</div><div class="faq-a">A. 네, 사업자용 세금계산서 발행 가능합니다.</div></li>
<li><div class="faq-q">Q6. 예약금 제도와 환불 규정이 있나요?</div><div class="faq-a">A. 아래는 환불 규정입니다:<br><table class="table"><thead><tr><th>취소 시점</th><th>환불 비율</th></tr></thead><tbody><tr><td>예약일로부터 7일 전</td><td>100% 환불</td></tr><tr><td>예약일로부터 3일 전</td><td>70% 환불</td></tr><tr><td>예약일로부터 1일 전</td><td>50% 환불</td></tr><tr><td>당일 취소</td><td>환불 불가</td></tr></tbody></table></div></li>
<li><div class="faq-q">Q7. 모션 캡쳐 데이터는 어떤 형식으로 제공되나요?</div><div class="faq-a">A. FBX, ANIM 포맷으로 제공되며, 문의 시 세부사항 안내해드립니다.</div></li>
<li><div class="faq-q">Q8. 리타겟팅도 함께 제공되나요?</div><div class="faq-a">A. 기본 리타겟팅이 포함되어 있으며, 추가적인 클린업/후처리는 별도 견적 협의 후 제공됩니다.</div></li>
<li><div class="faq-q">Q9. 실시간 미리보기나 스트리밍이 가능한가요?</div><div class="faq-a">A. 실시간 미리보기는 가능하며, 실시간 스트리밍은 지원 예정입니다.</div></li>
<li><div class="faq-q">Q10. 장비 사용이 익숙하지 않아도 괜찮을까요?</div><div class="faq-a">A. 스튜디오에는 담당 인력이 배치되어 있어 장비 세팅 및 사용을 지원해드립니다.</div></li>
<li><div class="faq-q">Q11. 얼굴 캡쳐나 음성 녹음도 가능한가요?</div><div class="faq-a">A. 가능합니다. 다만 예약 시 미리 요청해주셔야 하며, 별도 요금이 발생할 수 있습니다.</div></li>
<li><div class="faq-q">Q12. 촬영한 데이터는 언제 받을 수 있나요?</div><div class="faq-a">A. 영업일 기준 1~2일 이내 전달드립니다.</div></li>
<li><div class="faq-q">Q13. 녹화 시간에 제한이 있나요?</div><div class="faq-a">A. 녹화 시간 제한은 없으며, 대관 시간 내 자유롭게 녹화하실 수 있습니다.</div></li>
<li><div class="faq-q">Q14. 추가 리타겟팅이나 수정 요청이 가능한가요?</div><div class="faq-a">A. 가능합니다. 다만 추가 비용이 발생할 수 있습니다.</div></li>
<li><div class="faq-q">Q15. 탈의실이나 휴게 공간이 있나요?</div><div class="faq-a">A. 네, 탈의실과 간단한 휴게 공간이 마련되어 있습니다. 빵, 햄버거, 커피 등의 간단한 취식이 가능합니다.</div></li>
<li><div class="faq-q">Q16. 몇 명까지 이용 가능한가요?</div><div class="faq-a">A. 촬영 인원 최대 4명, 대기 인원 포함 최대 8명까지 수용 가능합니다.</div></li>
<li><div class="faq-q">Q17. 촬영 시 필요한 복장이나 준비물이 있나요?</div><div class="faq-a">A. 기본적으로 준비물은 없지만, 안경은 반사로 인해 캡쳐에 오류가 발생할 수 있어 렌즈 착용을 권장드립니다.</div></li>
<li><div class="faq-q">Q18. 외부 팀이 장비만 사용할 수도 있나요?</div><div class="faq-a">A. 장비만 사용하는 경우에도 사전 협의가 필요합니다. 기술 지원 여부에 따라 사용 조건이 달라질 수 있으므로 문의 바랍니다.</div></li>
<li><div class="faq-q">Q19. 주차는 가능한가요?</div><div class="faq-a">A. 네, 가능합니다.<br>기본 2시간 무료이며, 건물 내 시설(카페 등) 이용 시 추가 2시간, <b>최대 4시간 무료</b> 주차가 가능합니다.</div></li>
<li><div class="faq-q">Q20. 동물이나 아동도 촬영이 가능한가요?</div><div class="faq-a">A. 안전 및 장비 보호를 위해 동물 및 아동 출연은 현재 불가합니다.</div></li>
<li><div class="faq-q">Q21. 스튜디오 내부에서 자체 촬영을 해도 되나요?</div><div class="faq-a">A. 사전 문의 시 내부 촬영은 일시적으로 허용될 수 있습니다. 촬영 목적에 따라 협의가 필요합니다.</div></li>
</ul>
</div>
</section>
<footer class="section" style="background:#222;color:#fff;padding:2.5rem 0 1.2rem;">
<div class="container" style="text-align:center;">
<div style="font-size:1.15rem;font-weight:700;letter-spacing:0.02em;">회사명: 밍글 스튜디오 | 대표: 김희진</div>
<div style="margin:0.3rem 0 0.2rem;">주소: (21330) 인천광역시 부평구 주부토로 236, 인천테크노밸리 A동 B105호</div>
<div style="margin:0.3rem 0 0.2rem;">전화: 010-9288-9190 | 이메일: minglestudio.mocap@gmail.com</div>
<div style="margin:0.3rem 0 0.2rem;">사업자등록번호: 208-12-73755</div>
<div style="color:#bbb;font-size:0.98rem;margin-top:0.7rem;">© 2025 밍글 스튜디오. All rights reserved.</div>
</div>
</footer>
</body>
</html>