469 lines
31 KiB
HTML
469 lines
31 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ko">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>밍글 스튜디오 - 모션캡쳐 창작 스튜디오</title>
|
||
<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; } }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<nav class="navbar">
|
||
<div class="nav-container">
|
||
<div class="nav-logo" style="display:flex;align-items:center;gap:0.7rem;">
|
||
<img src="mingle logo.png" alt="밍글 스튜디오 로고" style="height:38px;width:auto;display:inline-block;vertical-align:middle;">
|
||
<span style="font-size:1.3rem;font-weight:700;color:#ff8800;letter-spacing:0.01em;">밍글 스튜디오</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;">다양한 창작자와 기술이 섞여 새로운 가치를 만들어내는 공간<br><span style="color:#ff8800;font-weight:600;">2025년 7월 1일 설립</span></p>
|
||
<a href="#about" class="btn btn-primary">회사 소개 보기</a>
|
||
</div>
|
||
<div style="flex:1;min-width:220px;text-align:center;">
|
||
<img src="mingle logo.png" 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>
|
||
<p><b>회사명:</b> 밍글 스튜디오 (mingle studio) | <b>설립일:</b> 2025년 7월 1일<br><b>슬로건:</b> “섞임 속에서 피어나는 창조 – mingle studio”<br><span style="font-size:0.95em;color:#888;">(의미: 다양한 창작자와 기술이 섞여 새로운 가치를 만들어내는 공간)</span></p>
|
||
</div>
|
||
<div class="card">
|
||
<h3 style="margin-bottom:0.7rem;">회사 소개</h3>
|
||
<p>밍글 스튜디오는 창작자와 기술, 사람과 사람 사이의 '어우러짐'을 통해 새로운 콘텐츠를 만들어가는 모션 캡쳐 기반의 창작 공간입니다.<br>2025년 설립 이후, 누구나 편하게 사용 가능한 스튜디오 대관 서비스를 중심으로 버추얼 콘텐츠 제작 환경을 제공합니다.</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월 1일</td><td>밍글 스튜디오 설립</td></tr>
|
||
<tr><td>(예정)</td><td>첫 상업 프로젝트 진행</td></tr>
|
||
<tr><td>(예정)</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>김광진 (카닉)</h4>
|
||
<div class="role">TD / 테크니컬 디렉터</div>
|
||
<div class="desc">스튜디오 전체 기술 운영, 모션캡쳐 장비 관리, 음향 시스템, 엔진 프로그래밍 등</div>
|
||
</div>
|
||
<div class="team-card">
|
||
<h4>이승민 (야모)</h4>
|
||
<div class="role">모션캡쳐 디렉터</div>
|
||
<div class="desc">캡쳐 디렉팅, 배우 모션 클린업, 카메라 무빙, 퍼포먼스 연출 등</div>
|
||
</div>
|
||
<div class="team-card">
|
||
<h4>김희진 (제이제이)</h4>
|
||
<div class="role">3D 아티스트 / 운영 PM</div>
|
||
<div class="desc">배경/리소스 제작, 일정 조율, 인사 및 프로젝트 관리</div>
|
||
</div>
|
||
</div>
|
||
<div style="color:#888;font-size:0.98rem;margin-top:1.2rem;">💬 팀 소개는 추후 프로필 이미지나 SNS 링크를 추가해 확장 가능합니다.</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">
|
||
<table class="table">
|
||
<thead><tr><th>서비스 항목</th><th>설명</th><th>비고</th></tr></thead>
|
||
<tbody>
|
||
<tr><td><b>모션캡쳐 스튜디오 대관</b></td><td>OptiTrack 기반, 실내 전신 캡쳐 가능 / 시간당 20만원</td><td>실시간 모니터링 가능</td></tr>
|
||
<tr><td><b>리타겟팅 서비스</b></td><td>캡쳐 데이터의 3D 모델 애니메이션 적용 지원</td><td>별도 문의 가능</td></tr>
|
||
<tr><td><b>실시간 스트리밍</b></td><td>현재 준비 중이며, 사전 문의 시 진행 가능</td><td>OBS, Unity 연동 지원 예정</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</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><b>이용 요금</b></td><td>시간당 <b>200,000원 (VAT 별도)</b></td></tr>
|
||
<tr><td><b>촬영 장비</b></td><td>OptiTrack (옵티트랙) 시스템, Rokoko Glove (로코코 장갑) 지원</td></tr>
|
||
<tr><td><b>공간 크기</b></td><td>8m x 7m</td></tr>
|
||
<tr><td><b>리타겟팅 서비스</b></td><td>모션 데이터의 3D 모델 적용 가능 (문의 필요)</td></tr>
|
||
<tr><td><b>영상 촬영</b></td><td>뮤직비디오/퍼포먼스 등 별도 견적 (사전 협의 필수)</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<div style="margin-top:1.2rem;">
|
||
<b>예약 및 문의</b><br>
|
||
대관/견적 문의 및 협업 요청은 아래 이메일로 연락 주세요.<br>
|
||
문의 시 사용 목적(게임/공연/영상 등)과 희망 일정, 장비 필요 여부를 함께 적어주시면 빠른 응답이 가능합니다.<br>
|
||
<span style="color:#ff8800;font-weight:600;">이메일: minglestudio.mocap@gmail.com</span><br>
|
||
<span style="color:#888;">예약 폼: (추후 추가 예정)</span>
|
||
</div>
|
||
<div style="margin-top:1.2rem;">
|
||
<b>안내 사항</b>
|
||
<ul style="margin:0.5rem 0 0 1.2rem; color:#666;">
|
||
<li>공간 내에서 녹음/음성 녹취는 별도 장비 필요 시 사전 협의 바랍니다.</li>
|
||
<li>로코코 글러브는 손가락까지 세밀한 모션 수집이 가능합니다.</li>
|
||
<li>실시간 스트리밍 연동은 현재 준비 중이며 사전 테스트 가능 여부는 별도 협의합니다.</li>
|
||
</ul>
|
||
</div>
|
||
</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 style="margin-top:1.2rem;color:#888;">
|
||
🎬 업로드 예정 콘텐츠 예시:<br>
|
||
- 리타겟팅 예시 영상<br>
|
||
- 로코코 장갑 활용 시범 영상<br>
|
||
- 퍼포먼스 기반 뮤직비디오 촬영 사례<br>
|
||
- 실시간 스트리밍 테스트 영상 등
|
||
</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/넓은 모션 캡쳐 공간 001.jpg" alt="메인 모션캡쳐 존(전경)" class="studio-img-thumb">
|
||
<div class="studio-img-caption">메인 모션캡쳐 존(전경)</div>
|
||
</div>
|
||
<div class="studio-img-card">
|
||
<img src="Studio_Image/넓은 모션 캡쳐 공간 002.jpg" alt="메인 모션캡쳐 존(측면)" class="studio-img-thumb">
|
||
<div class="studio-img-caption">메인 모션캡쳐 존(측면)</div>
|
||
</div>
|
||
<div class="studio-img-card">
|
||
<img src="Studio_Image/프라이핏한 모션 캡쳐 공간.jpg" alt="프라이빗 모션캡쳐 존" class="studio-img-thumb">
|
||
<div class="studio-img-caption">프라이빗 모션캡쳐 존</div>
|
||
</div>
|
||
<div class="studio-img-card">
|
||
<img src="Studio_Image/오퍼레이팅 공간 강조.jpg" alt="오퍼레이팅/컨트롤룸" class="studio-img-thumb">
|
||
<div class="studio-img-caption">오퍼레이팅/컨트롤룸</div>
|
||
</div>
|
||
<div class="studio-img-card">
|
||
<img src="Studio_Image/커튼을 친 외부 전경.jpg" alt="외부 전경(커튼 오픈)" class="studio-img-thumb">
|
||
<div class="studio-img-caption">외부 전경(커튼 오픈)</div>
|
||
</div>
|
||
<div class="studio-img-card">
|
||
<img src="Studio_Image/스튜디오와 연결된 파우더룸.jpg" alt="파우더룸(스튜디오 연결)" class="studio-img-thumb">
|
||
<div class="studio-img-caption">파우더룸(스튜디오 연결)</div>
|
||
</div>
|
||
<div class="studio-img-card">
|
||
<img src="Studio_Image/탈의실 내부 공간.jpg" alt="탈의실(내부)" class="studio-img-thumb">
|
||
<div class="studio-img-caption">탈의실(내부)</div>
|
||
</div>
|
||
<div class="studio-img-card">
|
||
<img src="Studio_Image/탈의실 외부 공간.jpg" 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'>×</span>
|
||
<button class='lightbox-arrow lightbox-prev'>❮</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'>❯</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();
|
||
}
|
||
}
|
||
});
|
||
</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</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. 최소 3~4일 전에 연락주시면 원활하게 준비가 가능합니다.</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. 예약 시 총 대여 금액의 20%를 선결제하셔야 예약이 확정됩니다.<br><br>아래는 예시 환불 규정입니다 (법적 관점에서도 일반적인 수준):<br><table class="table"><thead><tr><th>취소 시점</th><th>환불 비율</th></tr></thead><tbody><tr><td>이용일 5일 전까지</td><td>100% 환불</td></tr><tr><td>이용일 3~4일 전</td><td>50% 환불</td></tr><tr><td>이용일 2일 이내</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> |