mingle-website/index.html

569 lines
24 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="icon" type="image/x-icon" href="/mingle-logo.ico">
<link rel="shortcut icon" href="/mingle-logo.ico">
<link rel="icon" type="image/webp" href="/mingle-logo.webp">
<link rel="apple-touch-icon" href="/mingle-logo.webp">
<link rel="apple-touch-icon-precomposed" href="/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대 카메라 시스템으로 전신/페이셜 모션캡쳐 가능. 시간당 22만원(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/mingle-logo.webp">
<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/mingle-logo.webp">
<meta name="twitter:site" content="@mingle_studio">
<meta name="twitter:creator" content="@mingle_studio">
<!-- LinkedIn -->
<meta property="linkedin:owner" content="">
<!-- Pinterest -->
<meta name="pinterest-rich-pin" content="true">
<meta property="article:author" content="밍글 스튜디오">
<!-- Slack -->
<meta name="slack-app-id" content="">
<!-- WhatsApp -->
<meta property="og:image:alt" content="밍글 스튜디오 로고 - 인천 모션캡쳐 전문 스튜디오">
<!-- Telegram -->
<meta property="telegram:channel" content="">
<!-- Microsoft Teams -->
<meta name="msapplication-TileImage" content="https://minglestudio.co.kr/mingle-logo.webp">
<meta name="msapplication-TileColor" content="#ff8800">
<!-- Apple Touch Icon (iOS Safari, LINE 등) -->
<link rel="apple-touch-icon" href="https://minglestudio.co.kr/mingle-logo.webp">
<link rel="apple-touch-icon-precomposed" href="https://minglestudio.co.kr/mingle-logo.webp">
<!-- Kakao (카카오톡) -->
<meta property="kakao:title" content="밍글 스튜디오 - 모션캡쳐 창작 스튜디오">
<meta property="kakao:description" content="최첨단 OptiTrack 시스템과 전문 장비를 갖춘 모션캡쳐 스튜디오">
<meta property="kakao:image" content="https://minglestudio.co.kr/mingle-logo.webp">
<!-- 네이버 검색 최적화 -->
<meta name="naver-site-verification" content="">
<meta name="description" content="인천 모션캡쳐 스튜디오 밍글 스튜디오 - OptiTrack 28대 카메라, 전신/페이셜 캡쳐, 버튜버 방송, 게임 개발, 시간당 22만원, 인천테크노밸리 위치">
<meta name="keywords" content="모션캡쳐, 모션캡쳐 스튜디오, 인천 모션캡쳐, OptiTrack, 버튜버, VTuber, 게임 개발, 3D 애니메이션, 밍글스튜디오, MINGLE STUDIO, 인천테크노밸리">
<meta name="subject" content="모션캡쳐 스튜디오 대관 서비스">
<meta name="title" content="인천 모션캡쳐 전문 스튜디오 밍글 - OptiTrack 전신 페이셜 캡쳐 대관">
<link rel="canonical" href="https://minglestudio.co.kr/">
<!-- 구조화된 데이터 (검색 최적화) -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "LocalBusiness",
"name": "밍글 스튜디오",
"alternateName": "MINGLE STUDIO",
"description": "인천 모션캡쳐 전문 스튜디오 - OptiTrack 28대 카메라 시스템",
"url": "https://minglestudio.co.kr",
"telephone": "010-9288-9190",
"email": "minglestudio.mocap@gmail.com",
"address": {
"@type": "PostalAddress",
"streetAddress": "주부토로 236, 인천테크노밸리 A동 B105호",
"addressLocality": "부평구",
"addressRegion": "인천광역시",
"postalCode": "21330",
"addressCountry": "KR"
},
"geo": {
"@type": "GeoCoordinates",
"latitude": 37.4979,
"longitude": 126.7334
},
"openingHours": "Mo-Su 09:00-22:00",
"priceRange": "$$",
"hasOfferCatalog": {
"@type": "OfferCatalog",
"name": "모션캡쳐 서비스",
"itemListElement": [
{
"@type": "Offer",
"itemOffered": {
"@type": "Service",
"name": "모션캡쳐 스튜디오 대관",
"description": "OptiTrack 28대 카메라 시스템을 활용한 전신/페이셜 모션캡쳐"
},
"price": "220000",
"priceCurrency": "KRW",
"priceSpecification": {
"@type": "UnitPriceSpecification",
"price": "220000",
"priceCurrency": "KRW",
"unitText": "시간"
}
}
]
},
"areaServed": {
"@type": "State",
"name": "인천광역시"
},
"serviceArea": {
"@type": "GeoCircle",
"geoMidpoint": {
"@type": "GeoCoordinates",
"latitude": 37.4979,
"longitude": 126.7334
},
"geoRadius": "50000"
},
"knowsAbout": [
"모션캡쳐",
"OptiTrack",
"버튜버",
"3D 애니메이션",
"실시간 스트리밍",
"페이셜 캡쳐"
],
"sameAs": [
"https://www.youtube.com/@mingle_studio"
]
}
</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&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">
<!-- 구조화된 데이터 (Schema.org) -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "LocalBusiness",
"name": "밍글 스튜디오",
"alternateName": "MINGLE STUDIO",
"description": "OptiTrack 기반 28대 카메라 시스템으로 전신/페이셜 모션캡쳐 가능. 시간당 22만원(VAT 포함). 인천테크노밸리 위치.",
"url": "https://minglestudio.co.kr",
"telephone": "010-9288-9190",
"email": "minglestudio.mocap@gmail.com",
"address": {
"@type": "PostalAddress",
"streetAddress": "주부토로 236, 인천테크노밸리 A동 B105호",
"addressLocality": "부평구",
"addressRegion": "인천광역시",
"postalCode": "21330",
"addressCountry": "KR"
},
"geo": {
"@type": "GeoCoordinates",
"latitude": "37.5073",
"longitude": "126.7450"
},
"openingHours": "Mo-Su 09:00-21:00",
"priceRange": "₩₩₩",
"serviceType": "모션캡쳐 스튜디오 대관",
"areaServed": {
"@type": "Country",
"name": "대한민국"
},
"hasOfferCatalog": {
"@type": "OfferCatalog",
"name": "모션캡쳐 서비스",
"itemListElement": [
{
"@type": "Offer",
"itemOffered": {
"@type": "Service",
"name": "모션캡쳐 스튜디오 대관",
"description": "OptiTrack 28대 카메라 시스템, 8m x 7m x 2.6m 공간"
},
"price": "220000",
"priceCurrency": "KRW",
"priceSpecification": {
"@type": "UnitPriceSpecification",
"price": "220000",
"priceCurrency": "KRW",
"unitCode": "HUR",
"unitText": "시간"
}
}
]
},
"sameAs": [
"https://www.youtube.com/@mingle_studio"
],
"knowsAbout": [
"모션캡쳐",
"OptiTrack",
"버튜버 방송",
"3D 애니메이션",
"게임 개발",
"버추얼 콘텐츠"
]
}
</script>
<!-- 네이버 지역정보 JSON-LD -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "TechCompany",
"name": "밍글 스튜디오",
"alternateName": ["MINGLE STUDIO", "밍글스튜디오"],
"description": "인천 소재 모션캡쳐 전문 스튜디오, OptiTrack 시스템 기반 전신/페이셜 모션캡쳐 서비스 제공",
"foundingDate": "2025",
"foundingLocation": "인천광역시 부평구",
"address": {
"@type": "PostalAddress",
"addressCountry": "KR",
"addressRegion": "인천광역시",
"addressLocality": "부평구",
"streetAddress": "주부토로 236, 인천테크노밸리 A동 B105호",
"postalCode": "21330"
},
"contactPoint": {
"@type": "ContactPoint",
"telephone": "+82-10-9288-9190",
"email": "minglestudio.mocap@gmail.com",
"contactType": "customer service",
"availableLanguage": "Korean"
},
"makesOffer": {
"@type": "Offer",
"itemOffered": {
"@type": "Service",
"name": "모션캡쳐 스튜디오 대관",
"description": "OptiTrack 28대 카메라 시스템을 활용한 전문 모션캡쳐 서비스"
},
"price": "220000",
"priceCurrency": "KRW"
}
}
</script>
</head>
<body>
<!-- 헤더 -->
<div id="header-placeholder"></div>
<!-- Hero 섹션 -->
<section class="hero-section">
<div class="hero-bg">
<div class="video-bg">
<iframe
id="youtube-bg"
src="https://www.youtube.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="container">
<div class="hero-content">
<div class="hero-text">
<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-icon">📹</span>
<span class="spec-text">28대 OptiTrack</span>
</div>
<div class="spec-item">
<span class="spec-icon">📐</span>
<span class="spec-text">8m x 7m x 2.6m</span>
</div>
<div class="spec-item">
<span class="spec-icon">💰</span>
<span class="spec-text">시간당 22만원</span>
</div>
</div>
</div>
<div class="hero-image">
<div class="logo-wrapper">
<img src="/mingle-logo.webp" alt="밍글 스튜디오 - 인천 모션캡쳐 전문 스튜디오 로고" class="hero-logo">
<div class="logo-glow"></div>
</div>
</div>
</div>
</div>
</section>
<!-- 핵심 기능 섹션 -->
<section class="features-section section">
<div class="container">
<div class="section-header">
<h2>최첨단 모션캡쳐 솔루션</h2>
<p>버추얼 콘텐츠 제작을 위한 완벽한 환경</p>
</div>
<div class="features-grid">
<div class="feature-card">
<div class="feature-icon-wrapper">
<div class="feature-icon">🎬</div>
</div>
<h3>OptiTrack 카메라 시스템</h3>
<p>28대의 고성능 광학식 카메라로 정밀한 모션 트래킹</p>
</div>
<div class="feature-card">
<div class="feature-icon-wrapper">
<div class="feature-icon">👤</div>
</div>
<h3>전신 & 페이셜 캡쳐</h3>
<p>몸 전체 움직임과 얼굴 표정까지 실시간 캡쳐</p>
</div>
<div class="feature-card">
<div class="feature-icon-wrapper">
<div class="feature-icon">🎮</div>
</div>
<h3>실시간 스트리밍</h3>
<p>서비스 준비중 (곧 출시 예정)</p>
</div>
<div class="feature-card">
<div class="feature-icon-wrapper">
<div class="feature-icon">🛠️</div>
</div>
<h3>전문 기술 지원</h3>
<p>숙련된 오퍼레이터의 실시간 서포트</p>
</div>
</div>
</div>
</section>
<!-- 서비스 미리보기 -->
<section class="services-preview section bg-gradient">
<div class="container">
<div class="section-header">
<h2>주요 활용 분야</h2>
<p>다양한 크리에이티브 프로젝트를 지원합니다</p>
</div>
<div class="services-carousel">
<div class="service-item">
<div class="service-icon">🎭</div>
<h3>버추얼 콘텐츠</h3>
<p>VTuber, 버추얼 아이돌 방송</p>
</div>
<div class="service-item">
<div class="service-icon">🎮</div>
<h3>게임 개발</h3>
<p>캐릭터 애니메이션 제작</p>
</div>
<div class="service-item">
<div class="service-icon">🎬</div>
<h3>영상 제작</h3>
<p>VFX, 버추얼 프로덕션</p>
</div>
<div class="service-item">
<div class="service-icon">📱</div>
<h3>메타버스</h3>
<p>3D 아바타 콘텐츠</p>
</div>
</div>
<div class="text-center mt-4">
<a href="/services" class="btn btn-secondary">전체 서비스 보기</a>
</div>
</div>
</section>
<!-- 스튜디오 미리보기 갤러리 -->
<section class="studio-preview section">
<div class="container">
<div class="section-header">
<h2>스튜디오 공간</h2>
<p>최적의 모션캡쳐 환경을 제공합니다</p>
</div>
<div class="preview-grid">
<div class="preview-main">
<img src="Studio_Image/넓은 모션 캡쳐 공간 002.webp" alt="밍글 스튜디오 메인 모션캡쳐 공간 - 8m x 7m x 2.6m 규모의 OptiTrack 카메라 28대 설치" class="preview-img">
<div class="preview-overlay">
<h3>메인 캡쳐 공간</h3>
<p>8m x 7m x 2.6m 볼륨</p>
</div>
</div>
<div class="preview-side">
<div class="preview-item">
<img src="Studio_Image/오퍼레이팅 공간 강조.webp" alt="밍글 스튜디오 컨트롤룸 - 전문 오퍼레이터가 실시간 모니터링하는 공간" class="preview-img">
<div class="preview-overlay">
<p>컨트롤룸</p>
</div>
</div>
<div class="preview-item">
<img src="Studio_Image/프라이핏한 모션 캡쳐 공간.webp" alt="밍글 스튜디오 프라이빗 모션캡쳐 공간 - 개인 및 소규모 촬영 전용 공간" class="preview-img">
<div class="preview-overlay">
<p>프라이빗 공간</p>
</div>
</div>
</div>
</div>
<div class="text-center mt-4">
<a href="/gallery" class="btn btn-primary">갤러리 보기</a>
</div>
</div>
</section>
<!-- 포트폴리오 미리보기 -->
<section class="portfolio-preview section bg-light">
<div class="container">
<div class="section-header">
<h2>포트폴리오</h2>
<p>밍글 스튜디오에서 제작된 콘텐츠</p>
</div>
<div class="portfolio-grid">
<div class="portfolio-item">
<div class="portfolio-video">
<iframe data-src="https://www.youtube.com/embed/jQTi8adbvaM" title="머쉬베놈 (MUSHVENOM) - 돌림판 (feat. 신빠람 이박사) 🍓 CROA COVER" allowfullscreen loading="lazy"></iframe>
</div>
<h3>모션캡쳐 포트폴리오</h3>
</div>
<div class="portfolio-item">
<div class="portfolio-video">
<iframe data-src="https://www.youtube.com/embed/OmpqKhMrb-U" title="Shorts 영상" allowfullscreen loading="lazy"></iframe>
</div>
<h3>Shorts 콘텐츠</h3>
</div>
</div>
<div class="text-center mt-4">
<a href="/portfolio" class="btn btn-secondary">전체 포트폴리오</a>
</div>
</div>
</section>
<!-- 기업 클라이언트 섹션 -->
<section class="partners-section section">
<div class="container">
<div class="section-header">
<h2>클라이언트</h2>
<p>다양한 분야의 기업들과 함께 혁신적인 모션캡쳐 콘텐츠를 제작합니다</p>
</div>
<!-- 클라이언트 로고 그리드 -->
<div class="partners-grid single-partner">
<div class="partner-logo-item featured-partner">
<img src="Partners/메가메타.jpg" alt="메가메타 - 밍글 스튜디오 클라이언트" class="partner-logo">
</div>
</div>
</div>
</section>
<!-- FAQ 바로가기 -->
<section class="section bg-gradient">
<div class="container">
<div class="section-header">
<h2>궁금한 점이 있으신가요?</h2>
<p>자주 묻는 질문을 확인하시거나 직접 문의해주세요</p>
</div>
<div class="text-center">
<div class="cta-buttons">
<a href="/qna" class="btn btn-primary btn-lg">자주 묻는 질문</a>
<a href="/contact" class="btn btn-outline btn-lg">직접 문의하기</a>
</div>
</div>
</div>
</section>
<!-- CTA 섹션 -->
<section class="cta-section">
<div class="cta-bg"></div>
<div class="container text-center">
<h2 class="cta-title">지금 바로 시작하세요</h2>
<p class="cta-description">
최첨단 모션캡쳐 시스템으로 여러분의 창작 비전을 실현해보세요
</p>
<div class="cta-buttons">
<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">
<span>📧 minglestudio.mocap@gmail.com</span>
<span>📍 인천 부평구 주부토로 236, 인천테크노밸리</span>
</div>
</div>
</section>
<!-- 푸터 -->
<div id="footer-placeholder"></div>
<!-- 백업 푸터 (JavaScript 로드 실패 시) -->
<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>
<!-- JavaScript -->
<script src="js/common.js"></script>
<script src="js/main.js"></script>
</body>
</html>