0b55235d4f
- CSS 변수 시스템 확장 (4단계 그림자, 다크모드 텍스트 불투명도, 틸 악센트, 스태거 딜레이) - btn-secondary 오렌지→틸 아웃라인으로 차별화 - 카드 변형 클래스 추가 (card--flat/elevated/interactive) - 6개 페이지 CSS 중복 제거 및 그림자/다크모드 표준화 - 다크모드 텍스트 가시성 수정 (QnA, services 등) - reveal 애니메이션 변형 (fade, zoom) 및 stagger-children 적용 - 태블릿 브레이크포인트 (769px~1024px) 추가 - 공통 page-header 스타일 통합 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
739 lines
40 KiB
HTML
739 lines
40 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ko">
|
||
<head>
|
||
<!-- Google Tag Manager -->
|
||
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
|
||
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
|
||
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
|
||
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
|
||
})(window,document,'script','dataLayer','GTM-KZKV535P');</script>
|
||
<!-- End Google Tag Manager -->
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>밍글 스튜디오 - 모션캡쳐 창작 스튜디오</title>
|
||
|
||
<!-- 파비콘 -->
|
||
<link rel="icon" type="image/x-icon" href="/images/logo/mingle-logo.ico">
|
||
<link rel="shortcut icon" href="/images/logo/mingle-logo.ico">
|
||
<link rel="icon" type="image/webp" href="/images/logo/mingle-logo.webp">
|
||
<link rel="apple-touch-icon" href="/images/logo/mingle-logo.webp">
|
||
<link rel="apple-touch-icon-precomposed" href="/images/logo/mingle-logo.webp">
|
||
|
||
<!-- Canonical URL -->
|
||
<link rel="canonical" href="https://minglestudio.co.kr/">
|
||
|
||
<!-- Theme Color -->
|
||
<meta name="theme-color" content="#ff8800">
|
||
<meta name="msapplication-TileColor" content="#ff8800">
|
||
|
||
<!-- DNS Prefetch (성능 최적화) -->
|
||
<link rel="dns-prefetch" href="//fonts.googleapis.com">
|
||
<link rel="dns-prefetch" href="//cdn.jsdelivr.net">
|
||
<link rel="dns-prefetch" href="//www.youtube.com">
|
||
|
||
<!-- Preload 중요 리소스 -->
|
||
<link rel="preload" href="css/common.css" as="style">
|
||
<link rel="preload" href="css/main.css" as="style">
|
||
|
||
<!-- Security Headers (기본 설정) -->
|
||
<meta http-equiv="X-Content-Type-Options" content="nosniff">
|
||
<meta http-equiv="X-Frame-Options" content="DENY">
|
||
<meta http-equiv="Referrer-Policy" content="strict-origin-when-cross-origin">
|
||
|
||
<!-- SEO 메타 태그 -->
|
||
<meta name="description" content="밍글 스튜디오 - 모션캡쳐 스튜디오 대관 서비스. OptiTrack 기반 28대 카메라 시스템으로 전신/페이셜 모션캡쳐 가능. 시간당 20만원(VAT 포함). 인천테크노밸리 위치.">
|
||
<meta name="keywords" content="모션캡쳐, 스튜디오 대관, OptiTrack, 모션캡처, 3D 애니메이션, 버추얼 콘텐츠, 인천 스튜디오, 모션캡쳐 대관, 3D 캐릭터 애니메이션, 버튜버, VTuber">
|
||
<meta name="author" content="밍글 스튜디오">
|
||
<meta name="robots" content="index, follow">
|
||
|
||
<!-- Open Graph -->
|
||
<meta property="og:title" content="밍글 스튜디오 - 모션캡쳐 창작 스튜디오">
|
||
<meta property="og:description" content="최첨단 OptiTrack 시스템과 전문 장비를 갖춘 모션캡쳐 스튜디오">
|
||
<meta property="og:image" content="https://minglestudio.co.kr/images/logo/mingle-OG.png">
|
||
<meta property="og:url" content="https://minglestudio.co.kr">
|
||
<meta property="og:type" content="website">
|
||
<meta property="og:image:width" content="1200">
|
||
<meta property="og:image:height" content="630">
|
||
<meta property="og:locale" content="ko_KR">
|
||
<meta property="og:site_name" content="밍글 스튜디오">
|
||
|
||
<!-- Twitter Card -->
|
||
<meta name="twitter:card" content="summary_large_image">
|
||
<meta name="twitter:title" content="밍글 스튜디오 - 모션캡쳐 창작 스튜디오">
|
||
<meta name="twitter:description" content="최첨단 OptiTrack 시스템과 전문 장비를 갖춘 모션캡쳐 스튜디오">
|
||
<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">
|
||
|
||
<!-- Pinterest -->
|
||
<meta name="pinterest-rich-pin" content="true">
|
||
<meta property="article:author" content="밍글 스튜디오">
|
||
|
||
<!-- WhatsApp / OG 이미지 대체 텍스트 -->
|
||
<meta property="og:image:alt" content="밍글 스튜디오 로고 - 인천 모션캡쳐 전문 스튜디오">
|
||
|
||
<!-- Microsoft Teams -->
|
||
<meta name="msapplication-TileImage" content="https://minglestudio.co.kr/images/logo/mingle-OG.png">
|
||
|
||
<!-- Kakao (카카오톡) -->
|
||
<meta property="kakao:title" content="밍글 스튜디오 - 모션캡쳐 창작 스튜디오">
|
||
<meta property="kakao:description" content="최첨단 OptiTrack 시스템과 전문 장비를 갖춘 모션캡쳐 스튜디오">
|
||
<meta property="kakao:image" content="https://minglestudio.co.kr/images/logo/mingle-OG.png">
|
||
|
||
<!-- 네이버 검색 최적화 -->
|
||
<meta name="subject" content="모션캡쳐 스튜디오 대관 서비스">
|
||
<meta name="title" content="인천 모션캡쳐 전문 스튜디오 밍글 - OptiTrack 전신 페이셜 캡쳐 대관">
|
||
|
||
<!-- 구조화된 데이터 (통합) -->
|
||
<script type="application/ld+json">
|
||
{
|
||
"@context": "https://schema.org",
|
||
"@type": "LocalBusiness",
|
||
"name": "밍글 스튜디오",
|
||
"alternateName": ["MINGLE STUDIO", "밍글스튜디오"],
|
||
"description": "인천 모션캡쳐 전문 스튜디오 - OptiTrack 28대 카메라 시스템, 전신/페이셜 모션캡쳐 서비스",
|
||
"url": "https://minglestudio.co.kr",
|
||
"telephone": "+82-10-9288-9190",
|
||
"email": "help@minglestudio.co.kr",
|
||
"foundingDate": "2025-07",
|
||
"address": {
|
||
"@type": "PostalAddress",
|
||
"streetAddress": "주부토로 236, 인천테크노밸리 U1센터 A동 B105호",
|
||
"addressLocality": "부평구",
|
||
"addressRegion": "인천광역시",
|
||
"postalCode": "21330",
|
||
"addressCountry": "KR"
|
||
},
|
||
"geo": {
|
||
"@type": "GeoCoordinates",
|
||
"latitude": 37.5073,
|
||
"longitude": 126.7450
|
||
},
|
||
"openingHours": "Mo-Su 09:00-22:00",
|
||
"priceRange": "₩₩₩",
|
||
"contactPoint": {
|
||
"@type": "ContactPoint",
|
||
"telephone": "+82-10-9288-9190",
|
||
"email": "help@minglestudio.co.kr",
|
||
"contactType": "customer service",
|
||
"availableLanguage": "Korean"
|
||
},
|
||
"hasOfferCatalog": {
|
||
"@type": "OfferCatalog",
|
||
"name": "모션캡쳐 서비스",
|
||
"itemListElement": [
|
||
{
|
||
"@type": "Offer",
|
||
"itemOffered": {
|
||
"@type": "Service",
|
||
"name": "모션캡쳐 스튜디오 대관",
|
||
"description": "OptiTrack 28대 카메라 시스템, 8m x 7m x 2.6m 공간"
|
||
},
|
||
"price": "200000",
|
||
"priceCurrency": "KRW",
|
||
"priceSpecification": {
|
||
"@type": "UnitPriceSpecification",
|
||
"price": "200000",
|
||
"priceCurrency": "KRW",
|
||
"unitCode": "HUR",
|
||
"unitText": "시간"
|
||
}
|
||
}
|
||
]
|
||
},
|
||
"areaServed": {
|
||
"@type": "Country",
|
||
"name": "대한민국"
|
||
},
|
||
"knowsAbout": [
|
||
"모션캡쳐",
|
||
"OptiTrack",
|
||
"버튜버",
|
||
"VTuber",
|
||
"3D 애니메이션",
|
||
"실시간 스트리밍",
|
||
"페이셜 캡쳐",
|
||
"게임 개발",
|
||
"버추얼 콘텐츠"
|
||
],
|
||
"sameAs": [
|
||
"https://www.youtube.com/@mingle_studio",
|
||
"https://x.com/minglestudio"
|
||
]
|
||
}
|
||
</script>
|
||
|
||
<!-- 폰트 -->
|
||
<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&family=Space+Grotesk:wght@500;700&display=swap" rel="stylesheet">
|
||
<link href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css" rel="stylesheet">
|
||
|
||
<!-- CSS -->
|
||
<link rel="stylesheet" href="css/common.css">
|
||
<link rel="stylesheet" href="css/main.css">
|
||
<link rel="stylesheet" href="css/popup.css">
|
||
|
||
</head>
|
||
<body>
|
||
<a href="#main-content" class="skip-to-content">본문 바로가기</a>
|
||
<!-- Google Tag Manager (noscript) -->
|
||
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KZKV535P"
|
||
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-container">
|
||
<button class="popup-close-x" id="popupCloseX" aria-label="팝업 닫기">×</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인 사용 / 6시간 패키지 / 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">~ 2026/2/28</div>
|
||
</div>
|
||
<div class="info-item">
|
||
<div class="info-label">문의 메일</div>
|
||
<div class="info-value">help@minglestudio.co.kr</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>
|
||
|
||
<main id="main-content">
|
||
<!-- Hero 섹션 -->
|
||
<section class="hero-section">
|
||
<div class="hero-bg">
|
||
<div class="video-bg">
|
||
<iframe
|
||
id="youtube-bg"
|
||
src="https://www.youtube-nocookie.com/embed/videoseries?list=PL7KThQBBudfi08mUmnrEJRtpMAWHVvMqO&autoplay=1&mute=1&loop=1&controls=0&showinfo=0&rel=0&iv_load_policy=3&modestbranding=1&playsinline=1&enablejsapi=1&playlist=PL7KThQBBudfi08mUmnrEJRtpMAWHVvMqO"
|
||
frameborder="0"
|
||
allow="autoplay; encrypted-media"
|
||
allowfullscreen>
|
||
</iframe>
|
||
</div>
|
||
</div>
|
||
<div class="hero-content-centered">
|
||
<div class="hero-logo-area">
|
||
<div class="hero-floating-elements" aria-hidden="true">
|
||
<!-- 모캡 마커 (빛나는 점) -->
|
||
<span class="float-marker" style="--x:-90px;--y:-70px;--delay:0s;--dur:4s"></span>
|
||
<span class="float-marker" style="--x:85px;--y:-55px;--delay:0.6s;--dur:3.5s"></span>
|
||
<span class="float-marker" style="--x:-60px;--y:65px;--delay:1.2s;--dur:4.5s"></span>
|
||
<span class="float-marker" style="--x:75px;--y:50px;--delay:0.3s;--dur:3.8s"></span>
|
||
<span class="float-marker small" style="--x:-110px;--y:10px;--delay:0.8s;--dur:5s"></span>
|
||
<span class="float-marker small" style="--x:105px;--y:-15px;--delay:1.5s;--dur:4.2s"></span>
|
||
<!-- 카메라 아이콘 -->
|
||
<span class="float-camera" style="--x:-120px;--y:-40px;--delay:0.4s;--dur:5s">📷</span>
|
||
<span class="float-camera" style="--x:115px;--y:30px;--delay:1s;--dur:4.5s">🎥</span>
|
||
<span class="float-camera" style="--x:-30px;--y:80px;--delay:1.8s;--dur:5.5s">📹</span>
|
||
</div>
|
||
<img src="/images/logo/mingle-logo.webp" alt="밍글 스튜디오 로고" class="hero-logo">
|
||
<div class="logo-glow"></div>
|
||
</div>
|
||
<h1 class="hero-title">
|
||
밍글스튜디오<br>
|
||
<span class="hero-subtitle gradient-text">MINGLE STUDIO</span>
|
||
</h1>
|
||
<p class="hero-description">
|
||
기술과 창의력 열정이 한데 섞여<br>
|
||
새로운 가치가 만들어지는 공간
|
||
</p>
|
||
<div class="hero-buttons">
|
||
<a href="/about" class="btn btn-primary">회사 소개 보기</a>
|
||
<a href="/contact" class="btn btn-outline">예약 문의하기</a>
|
||
</div>
|
||
|
||
<!-- 스펙 카운터 -->
|
||
<div class="hero-specs">
|
||
<div class="spec-item">
|
||
<span class="spec-number"><span class="counter" data-target="28">0</span><span class="spec-unit">대</span></span>
|
||
<span class="spec-label">OptiTrack 카메라</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-number">8<span class="spec-unit">m</span> × 7<span class="spec-unit">m</span></span>
|
||
<span class="spec-label">캡쳐 공간</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-number"><span class="counter" data-target="20">0</span><span class="spec-unit">만원</span></span>
|
||
<span class="spec-label">시간당 대관료</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="hero-scroll-indicator">
|
||
<span>Scroll</span>
|
||
<div class="scroll-arrow"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 통합 스티키 섹션: Features + Services + Studio -->
|
||
<section class="sticky-showcase">
|
||
<div class="sticky-showcase-container">
|
||
<!-- 왼쪽: 고정 이미지 패널 -->
|
||
<div class="showcase-sticky">
|
||
<div class="showcase-image-wrapper">
|
||
<!-- Step 1: YouTube 영상 -->
|
||
<div class="showcase-media active" data-step="1">
|
||
<iframe src="https://www.youtube-nocookie.com/embed/rM9GEe0tb_I?autoplay=1&mute=1&loop=1&playlist=rM9GEe0tb_I&controls=0&showinfo=0&rel=0&iv_load_policy=3&modestbranding=1&playsinline=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen class="showcase-video"></iframe>
|
||
</div>
|
||
<!-- Step 2: 이미지 페이드 루프 -->
|
||
<div class="showcase-media" data-step="2">
|
||
<div class="showcase-fade-loop" data-interval="3000">
|
||
<img src="images/studio/넓은 모션 캡쳐 공간 002.webp" alt="넓은 모션캡쳐 공간" class="fade-loop-img active">
|
||
<img src="images/studio/모션캡쳐 공간 001.webp" alt="모션캡쳐 공간 1" class="fade-loop-img">
|
||
<img src="images/studio/모션캡쳐 공간 002.webp" alt="모션캡쳐 공간 2" class="fade-loop-img">
|
||
<img src="images/studio/모션캡쳐 공간 003.webp" alt="모션캡쳐 공간 3" class="fade-loop-img">
|
||
<img src="images/studio/모션캡쳐 공간 004.webp" alt="모션캡쳐 공간 4" class="fade-loop-img">
|
||
</div>
|
||
</div>
|
||
<!-- Step 3: YouTube 영상 -->
|
||
<div class="showcase-media" data-step="3">
|
||
<iframe src="https://www.youtube-nocookie.com/embed/YO7-z_JxSjY?autoplay=1&mute=1&loop=1&playlist=YO7-z_JxSjY&controls=0&showinfo=0&rel=0&iv_load_policy=3&modestbranding=1&playsinline=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen class="showcase-video"></iframe>
|
||
</div>
|
||
<!-- Step 4: 이미지 페이드 루프 -->
|
||
<div class="showcase-media" data-step="4">
|
||
<div class="showcase-fade-loop" data-interval="3000">
|
||
<img src="images/studio/오퍼레이팅 공간 강조.webp" alt="오퍼레이팅 공간" class="fade-loop-img active">
|
||
<img src="images/studio/스튜디오와 연결된 파우더룸.webp" alt="스튜디오와 연결된 파우더룸" class="fade-loop-img">
|
||
<img src="images/studio/탈의실 내부 공간.webp" alt="탈의실 내부 공간" class="fade-loop-img">
|
||
</div>
|
||
</div>
|
||
<div class="showcase-image-overlay"></div>
|
||
<div class="showcase-dots">
|
||
<span class="showcase-dot active" data-step="1"></span>
|
||
<span class="showcase-dot" data-step="2"></span>
|
||
<span class="showcase-dot" data-step="3"></span>
|
||
<span class="showcase-dot" data-step="4"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 오른쪽: 스크롤 콘텐츠 -->
|
||
<div class="showcase-scroll">
|
||
<!-- Step 1: 핵심 장비 -->
|
||
<div class="showcase-step active" data-step="1">
|
||
<div class="showcase-mobile-media">
|
||
<iframe src="https://www.youtube-nocookie.com/embed/rM9GEe0tb_I?autoplay=1&mute=1&loop=1&playlist=rM9GEe0tb_I&controls=0&playsinline=1" allow="autoplay; encrypted-media" allowfullscreen loading="lazy"></iframe>
|
||
</div>
|
||
<div class="showcase-step-label">Equipment</div>
|
||
<h2 class="showcase-step-title">최첨단 모션캡쳐 시스템</h2>
|
||
<p class="showcase-step-desc">OptiTrack 광학식 카메라, Rokoko 글러브, ARKit 페이셜 캡쳐까지 — 전신부터 손끝, 표정까지 정밀하게 트래킹합니다.</p>
|
||
<div class="showcase-features">
|
||
<div class="showcase-feature-item">
|
||
<span class="showcase-feature-icon">🎬</span>
|
||
<div>
|
||
<strong>OptiTrack 카메라 28대</strong>
|
||
<span>서브밀리미터 수준 광학식 모션 트래킹</span>
|
||
</div>
|
||
</div>
|
||
<div class="showcase-feature-item">
|
||
<span class="showcase-feature-icon">🧤</span>
|
||
<div>
|
||
<strong>Rokoko 글러브 5대</strong>
|
||
<span>손가락 관절까지 정밀한 핸드 캡쳐</span>
|
||
</div>
|
||
</div>
|
||
<div class="showcase-feature-item">
|
||
<span class="showcase-feature-icon">📱</span>
|
||
<div>
|
||
<strong>ARKit 페이셜 캡쳐 (iPhone 5대)</strong>
|
||
<span>iPhone 기반 고정밀 표정 캡쳐</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Step 2: 공간 -->
|
||
<div class="showcase-step" data-step="2">
|
||
<div class="showcase-mobile-media">
|
||
<img src="images/studio/넓은 모션 캡쳐 공간 002.webp" alt="넓은 모션캡쳐 공간" loading="lazy">
|
||
</div>
|
||
<div class="showcase-step-label">Space</div>
|
||
<h2 class="showcase-step-title">넓고 최적화된 캡쳐 공간</h2>
|
||
<p class="showcase-step-desc">8m x 7m x 2.6m 규모의 전용 캡쳐 볼륨으로 자유로운 움직임이 가능합니다.</p>
|
||
<div class="showcase-features">
|
||
<div class="showcase-feature-item">
|
||
<span class="showcase-feature-icon">📐</span>
|
||
<div>
|
||
<strong>8m × 7m × 2.6m</strong>
|
||
<span>넓은 전용 캡쳐 볼륨</span>
|
||
</div>
|
||
</div>
|
||
<div class="showcase-feature-item">
|
||
<span class="showcase-feature-icon">🎮</span>
|
||
<div>
|
||
<strong>실시간 스트리밍</strong>
|
||
<span>스트리밍글 서비스로 라이브 방송</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Step 3: 서비스 -->
|
||
<div class="showcase-step" data-step="3">
|
||
<div class="showcase-mobile-media">
|
||
<iframe src="https://www.youtube-nocookie.com/embed/YO7-z_JxSjY?autoplay=1&mute=1&loop=1&playlist=YO7-z_JxSjY&controls=0&playsinline=1" allow="autoplay; encrypted-media" allowfullscreen loading="lazy"></iframe>
|
||
</div>
|
||
<div class="showcase-step-label">Services</div>
|
||
<h2 class="showcase-step-title">주요 활용 분야</h2>
|
||
<p class="showcase-step-desc">다양한 크리에이티브 프로젝트를 전문 오퍼레이터가 지원합니다.</p>
|
||
<div class="showcase-services-grid">
|
||
<div class="showcase-service">
|
||
<span>🎭</span>
|
||
<strong>버추얼 콘텐츠</strong>
|
||
<span class="showcase-service-sub">VTuber, 버추얼 아이돌</span>
|
||
</div>
|
||
<div class="showcase-service">
|
||
<span>🎮</span>
|
||
<strong>게임 개발</strong>
|
||
<span class="showcase-service-sub">캐릭터 애니메이션</span>
|
||
</div>
|
||
<div class="showcase-service">
|
||
<span>🎬</span>
|
||
<strong>영상 제작</strong>
|
||
<span class="showcase-service-sub">VFX, 버추얼 프로덕션</span>
|
||
</div>
|
||
<div class="showcase-service">
|
||
<span>📱</span>
|
||
<strong>메타버스</strong>
|
||
<span class="showcase-service-sub">3D 아바타 콘텐츠</span>
|
||
</div>
|
||
</div>
|
||
<a href="/services" class="btn btn-secondary showcase-btn">전체 서비스 보기</a>
|
||
</div>
|
||
|
||
<!-- Step 4: 스튜디오 -->
|
||
<div class="showcase-step" data-step="4">
|
||
<div class="showcase-mobile-media">
|
||
<img src="images/studio/오퍼레이팅 공간 강조.webp" alt="오퍼레이팅 공간" loading="lazy">
|
||
</div>
|
||
<div class="showcase-step-label">Studio</div>
|
||
<h2 class="showcase-step-title">스튜디오 공간</h2>
|
||
<p class="showcase-step-desc">메인 캡쳐 공간부터 컨트롤룸, 프라이빗 룸까지 모든 환경이 갖춰져 있습니다. 전문 기술 지원과 함께 최적의 캡쳐 경험을 제공합니다.</p>
|
||
<div class="showcase-features">
|
||
<div class="showcase-feature-item">
|
||
<span class="showcase-feature-icon">🛠️</span>
|
||
<div>
|
||
<strong>전문 기술 지원</strong>
|
||
<span>숙련된 오퍼레이터의 실시간 서포트</span>
|
||
</div>
|
||
</div>
|
||
<div class="showcase-feature-item">
|
||
<span class="showcase-feature-icon">🔒</span>
|
||
<div>
|
||
<strong>프라이빗 환경</strong>
|
||
<span>독립된 공간에서 집중 작업</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<a href="/gallery" class="btn btn-primary showcase-btn">갤러리 보기</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 포트폴리오 미리보기 -->
|
||
<section class="portfolio-preview section bg-light">
|
||
<div class="container">
|
||
<div class="section-header reveal" data-reveal="up">
|
||
<h2>포트폴리오</h2>
|
||
<p>밍글 스튜디오에서 제작하고 협업한 모션캡쳐 콘텐츠</p>
|
||
</div>
|
||
|
||
<!-- 탭 버튼 -->
|
||
<div class="portfolio-tab-nav reveal" data-reveal="up" data-delay="100">
|
||
<button class="portfolio-tab-btn active" data-portfolio-tab="creator">개인 크리에이터</button>
|
||
<button class="portfolio-tab-btn" data-portfolio-tab="corporate">기업 프로젝트</button>
|
||
<button class="portfolio-tab-btn" data-portfolio-tab="shorts">Shorts</button>
|
||
</div>
|
||
|
||
<!-- 개인 크리에이터 탭 -->
|
||
<div class="portfolio-tab-panel active" id="portfolio-creator">
|
||
<div class="portfolio-grid-v2 stagger-children">
|
||
<div class="portfolio-card reveal" data-reveal="up">
|
||
<div class="portfolio-video">
|
||
<iframe data-src="https://www.youtube.com/embed/jQTi8adbvaM" title="머쉬베놈 - 돌림판 CROA COVER" allowfullscreen loading="lazy"></iframe>
|
||
</div>
|
||
<div class="portfolio-card-info">
|
||
<h3>머쉬베놈 - 돌림판 🍓 CROA COVER</h3>
|
||
<div class="portfolio-tags">
|
||
<span class="portfolio-tag">커버</span>
|
||
<span class="portfolio-tag">CROA</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="portfolio-card reveal" data-reveal="up">
|
||
<div class="portfolio-video">
|
||
<iframe data-src="https://www.youtube.com/embed/FecqTyUU6y0" title="QWER - 가짜아이돌 COVER BY VENY" allowfullscreen loading="lazy"></iframe>
|
||
</div>
|
||
<div class="portfolio-card-info">
|
||
<h3>QWER - 가짜아이돌 COVER BY VENY</h3>
|
||
<div class="portfolio-tags">
|
||
<span class="portfolio-tag">커버</span>
|
||
<span class="portfolio-tag">VENY</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="portfolio-card reveal" data-reveal="up">
|
||
<div class="portfolio-video">
|
||
<iframe data-src="https://www.youtube.com/embed/ryliwrc0Yms" title="aesoopa 에숲파 Black Mamba MV" allowfullscreen loading="lazy"></iframe>
|
||
</div>
|
||
<div class="portfolio-card-info">
|
||
<h3>에숲파 'Black Mamba' MV</h3>
|
||
<div class="portfolio-tags">
|
||
<span class="portfolio-tag">MV</span>
|
||
<span class="portfolio-tag">에숲파</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 기업 프로젝트 탭 -->
|
||
<div class="portfolio-tab-panel" id="portfolio-corporate">
|
||
<div class="portfolio-grid-v2">
|
||
<div class="portfolio-card">
|
||
<div class="portfolio-video">
|
||
<iframe data-src="https://www.youtube.com/embed/OUdsyxPzS14" title="아이시아(IXIA) 꼭꼭 숨어라 MV" allowfullscreen loading="lazy"></iframe>
|
||
</div>
|
||
<div class="portfolio-card-info">
|
||
<h3>아이시아(IXIA) '꼭꼭 숨어라' MV</h3>
|
||
<div class="portfolio-tags">
|
||
<span class="portfolio-tag accent">기업</span>
|
||
<span class="portfolio-tag">뮤직비디오</span>
|
||
<span class="portfolio-tag">IXIA</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="portfolio-card">
|
||
<div class="portfolio-video">
|
||
<iframe data-src="https://www.youtube.com/embed/KNABwaYmuA8" title="IXIA 데뷔 라이브 쇼케이스" allowfullscreen loading="lazy"></iframe>
|
||
</div>
|
||
<div class="portfolio-card-info">
|
||
<h3>IXIA 데뷔 라이브 쇼케이스</h3>
|
||
<div class="portfolio-tags">
|
||
<span class="portfolio-tag accent">기업</span>
|
||
<span class="portfolio-tag">라이브</span>
|
||
<span class="portfolio-tag">쇼케이스</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="portfolio-card">
|
||
<div class="portfolio-video">
|
||
<iframe data-src="https://www.youtube.com/embed/FXnH-43NpFM?start=1725" title="IXIA 라이브룸" allowfullscreen loading="lazy"></iframe>
|
||
</div>
|
||
<div class="portfolio-card-info">
|
||
<h3>IXIA 라이브룸</h3>
|
||
<div class="portfolio-tags">
|
||
<span class="portfolio-tag accent">기업</span>
|
||
<span class="portfolio-tag">라이브</span>
|
||
<span class="portfolio-tag">IXIA</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Shorts 탭 -->
|
||
<div class="portfolio-tab-panel" id="portfolio-shorts">
|
||
<div class="portfolio-shorts-grid">
|
||
<div class="portfolio-card shorts">
|
||
<div class="portfolio-video shorts-video">
|
||
<iframe data-src="https://www.youtube.com/embed/OmpqKhMrb-U" title="STARGAZERS CHALLENGE" allowfullscreen loading="lazy"></iframe>
|
||
</div>
|
||
<div class="portfolio-card-info">
|
||
<h3>💕 STARGAZERS CHALLENGE</h3>
|
||
</div>
|
||
</div>
|
||
<div class="portfolio-card shorts">
|
||
<div class="portfolio-video shorts-video">
|
||
<iframe data-src="https://www.youtube.com/embed/hKwGjPfULFI" title="ELEVATE 챌린지" allowfullscreen loading="lazy"></iframe>
|
||
</div>
|
||
<div class="portfolio-card-info">
|
||
<h3>🤎 ELEVATE 챌린지</h3>
|
||
</div>
|
||
</div>
|
||
<div class="portfolio-card shorts">
|
||
<div class="portfolio-video shorts-video">
|
||
<iframe data-src="https://www.youtube.com/embed/ZWftEFNlvVc" title="일본 유행 챌린지" allowfullscreen loading="lazy"></iframe>
|
||
</div>
|
||
<div class="portfolio-card-info">
|
||
<h3>🍓 일본 유행 챌린지</h3>
|
||
</div>
|
||
</div>
|
||
<div class="portfolio-card shorts">
|
||
<div class="portfolio-video shorts-video">
|
||
<iframe data-src="https://www.youtube.com/embed/6tsYJ0z2q4s" title="바라밤 챌린지" allowfullscreen loading="lazy"></iframe>
|
||
</div>
|
||
<div class="portfolio-card-info">
|
||
<h3>💙 바라밤 챌린지</h3>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="text-center mt-4 reveal" data-reveal="up">
|
||
<a href="/portfolio" class="btn btn-secondary">전체 포트폴리오 보기 →</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 기업 클라이언트 섹션 -->
|
||
<section class="partners-section section">
|
||
<div class="container">
|
||
<div class="section-header reveal" data-reveal="up">
|
||
<h2>클라이언트</h2>
|
||
<p>다양한 분야의 기업들과 함께 혁신적인 모션캡쳐 콘텐츠를 제작합니다</p>
|
||
</div>
|
||
|
||
<!-- 클라이언트 로고 마키 -->
|
||
<div class="partners-marquee">
|
||
<div class="partners-marquee-track">
|
||
<div class="partner-logo-item"><img src="images/partners/메가메타.jpg" alt="메가메타 - 밍글 스튜디오 클라이언트" class="partner-logo"></div>
|
||
<div class="partner-logo-item"><img src="images/partners/(주)세광종합기술단.png" alt="(주)세광종합기술단 - 밍글 스튜디오 클라이언트" class="partner-logo"></div>
|
||
<!-- 무한 루프용 복제 -->
|
||
<div class="partner-logo-item"><img src="images/partners/메가메타.jpg" alt="메가메타" class="partner-logo"></div>
|
||
<div class="partner-logo-item"><img src="images/partners/(주)세광종합기술단.png" alt="(주)세광종합기술단" class="partner-logo"></div>
|
||
<div class="partner-logo-item"><img src="images/partners/메가메타.jpg" alt="메가메타" class="partner-logo"></div>
|
||
<div class="partner-logo-item"><img src="images/partners/(주)세광종합기술단.png" alt="(주)세광종합기술단" class="partner-logo"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<!-- FAQ 바로가기 -->
|
||
<section class="faq-shortcut section">
|
||
<div class="container">
|
||
<div class="faq-shortcut-inner reveal" data-reveal="up">
|
||
<div class="faq-shortcut-content">
|
||
<span class="faq-shortcut-label">FAQ</span>
|
||
<h2 class="faq-shortcut-title">처음이라 막막하신가요?</h2>
|
||
<p class="faq-shortcut-desc">모션캡쳐가 처음이어도 괜찮습니다. 예약부터 촬영까지 자주 묻는 질문을 정리했어요.</p>
|
||
</div>
|
||
<div class="faq-shortcut-actions">
|
||
<a href="/qna" class="btn btn-primary btn-lg">자주 묻는 질문 보기</a>
|
||
<a href="/contact" class="btn btn-ghost btn-lg">1:1 문의하기</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- CTA 섹션 -->
|
||
<section class="cta-section">
|
||
<div class="cta-bg"></div>
|
||
<div class="container text-center">
|
||
<div class="cta-label reveal" data-reveal="fade">Get Started</div>
|
||
<h2 class="cta-title reveal" data-reveal="fade" data-delay="100">당신의 아이디어,<br>움직임으로 만들어 드립니다</h2>
|
||
<p class="cta-description reveal" data-reveal="up" data-delay="200">
|
||
전문 모션캡쳐 스튜디오에서 크리에이티브의 새로운 가능성을 경험하세요
|
||
</p>
|
||
<div class="cta-buttons reveal" data-reveal="up" data-delay="300">
|
||
<a href="/contact" class="btn btn-primary btn-lg">예약 문의하기</a>
|
||
<a href="https://m.booking.naver.com/booking/10/bizes/1468174/items/6949481" target="_blank" class="btn btn-outline btn-lg">네이버 예약</a>
|
||
</div>
|
||
|
||
<div class="contact-info-quick reveal" data-reveal="up" data-delay="400">
|
||
<div class="info-quick-item">
|
||
<span class="info-quick-icon">📧</span>
|
||
<div>
|
||
<span class="info-quick-label">예약 문의</span>
|
||
<span class="info-quick-value">help@minglestudio.co.kr</span>
|
||
</div>
|
||
</div>
|
||
<div class="info-quick-item">
|
||
<span class="info-quick-icon">💼</span>
|
||
<div>
|
||
<span class="info-quick-label">비즈니스</span>
|
||
<span class="info-quick-value">minglestudio@minglestudio.co.kr</span>
|
||
</div>
|
||
</div>
|
||
<div class="info-quick-item">
|
||
<span class="info-quick-icon">📍</span>
|
||
<div>
|
||
<span class="info-quick-label">오시는 길</span>
|
||
<span class="info-quick-value">인천 부평구 주부토로 236, 인천테크노밸리</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
</main>
|
||
|
||
<!-- 푸터 -->
|
||
<div id="footer-placeholder"></div>
|
||
|
||
<!-- 백업 푸터 (JavaScript 로드 실패 시) -->
|
||
<footer class="site-footer">
|
||
<div class="container">
|
||
<div class="footer-company">회사명: 밍글 스튜디오 | 대표: 김희진</div>
|
||
<div class="footer-address">주소: (21330) 인천광역시 부평구 주부토로 236, 인천테크노밸리 U1센터 A동 B105호</div>
|
||
<div class="footer-contact">전화: 010-9288-9190 | 비즈니스 문의: minglestudio@minglestudio.co.kr | 예약 문의: help@minglestudio.co.kr</div>
|
||
<div class="footer-biz">사업자등록번호: 208-12-73755</div>
|
||
<div class="footer-copyright">© 2025 밍글 스튜디오. All rights reserved.</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- JavaScript -->
|
||
<script src="js/common.js"></script>
|
||
<script src="js/main.js"></script>
|
||
<script src="js/popup.js"></script>
|
||
</body>
|
||
</html> |