mingle-website/ja/gallery.html
68893236+KINDNICK@users.noreply.github.com 30cd06e9d6 feat: setup i18n build script and SEO optimizations
2026-03-01 14:56:52 +09:00

327 lines
20 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="ja"><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-PPTNN6WD');</script>
<!-- End Google Tag Manager -->
<!-- Google tag (gtag.js) -->
<script async="" src="https://www.googletagmanager.com/gtag/js?id=G-R0PBYHVQBS"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-R0PBYHVQBS');
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>スタジオギャラリー - Mingle Studio</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">
<!-- Canonical URL -->
<link rel="canonical" href="https://minglestudio.co.kr/ja/gallery.html">
<!-- Theme Color -->
<meta name="theme-color" content="#ff8800">
<!-- SEO 메타 태그 -->
<meta name="description" content="Mingle Studioギャラリー - モーションキャプチャースタジオの実際の空間と施設を写真でご確認ください">
<meta name="keywords" content="모션캡쳐 스튜디오, 갤러리, 시설 사진, OptiTrack 카메라, 인천테크노밸리">
<meta name="author" content="밍글 스튜디오">
<!-- Open Graph -->
<meta property="og:title" content="スタジオギャラリー - Mingle Studio">
<meta property="og:description" content="30台のOptiTrackカメラシステムと8×7m大型撮影空間。仁川唯一のモーションキャプチャースタジオの実際の施設と機材をご覧ください">
<meta property="og:url" content="https://minglestudio.co.kr/gallery.html">
<meta property="og:type" content="website">
<meta property="og:image" content="https://minglestudio.co.kr/images/logo/mingle-OG.png">
<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="밍글 스튜디오">
<meta property="og:image:alt" content="밍글 스튜디오 - 모션캡처 스튜디오 갤러리">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="스튜디오 갤러리 - 밍글 스튜디오">
<meta name="twitter:description" content="30대 OptiTrack 카메라 시스템과 8×7m 대형 촬영 공간. 인천 유일 모션캡처 스튜디오의 실제 시설과 장비를 확인해보세요">
<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">
<!-- 폰트 -->
<link href="https://hangeul.pstatic.net/hangeul_static/css/nanum-square.css" rel="stylesheet">
<!-- 아이콘 폰트 (이모지 대체용) -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">
<link rel="stylesheet" href="/css/common.css">
<link rel="stylesheet" href="/css/gallery.css">
<link rel="alternate" hreflang="ko" href="https://minglestudio.co.kr/gallery.html">
<link rel="alternate" hreflang="en" href="https://minglestudio.co.kr/en/gallery.html">
<link rel="alternate" hreflang="ja" href="https://minglestudio.co.kr/ja/gallery.html">
<link rel="alternate" hreflang="zh" href="https://minglestudio.co.kr/zh/gallery.html">
<link rel="alternate" hreflang="x-default" href="https://minglestudio.co.kr/gallery.html">
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PPTNN6WD"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<a href="#main-content" class="skip-to-content" data-i18n="common.skipToContent">本文へスキップ</a>
<div id="header-placeholder">
<!-- 공통 헤더 컴포넌트 -->
<nav class="navbar" aria-label="메인 내비게이션">
<div class="nav-container">
<div class="nav-logo">
<a href="/ja/">
<img src="/images/logo/mingle-logo.webp" alt="밍글 스튜디오 로고">
<span data-i18n="header.studioName">Mingle Studio</span>
</a>
</div>
<ul id="nav-menu" class="nav-menu">
<li><a href="/ja/about" class="nav-link" data-i18n="header.nav.about">About</a></li>
<li><a href="/ja/services" class="nav-link" data-i18n="header.nav.services">Services</a></li>
<li><a href="/ja/portfolio" class="nav-link" data-i18n="header.nav.portfolio">Portfolio</a></li>
<li><a href="/ja/gallery" class="nav-link" data-i18n="header.nav.gallery">Gallery</a></li>
<li><a href="/ja/contact" class="nav-link" data-i18n="header.nav.contact">Contact</a></li>
<li><a href="/ja/qna" class="nav-link" data-i18n="header.nav.qna">Q&amp;A</a></li>
</ul>
<div class="nav-actions">
<div class="lang-switcher">
<button class="lang-btn" aria-label="言語選択" data-i18n-aria="header.langSelect">
<span class="lang-current">KO</span>
<svg class="lang-chevron" viewBox="0 0 10 6" width="10" height="6" aria-hidden="true">
<path d="M1 1l4 4 4-4" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</button>
<ul class="lang-dropdown">
<li><button data-lang="ko">🇰🇷 한국어</button></li>
<li><button data-lang="en">🇺🇸 English</button></li>
<li><button data-lang="zh">🇨🇳 中文</button></li>
<li><button data-lang="ja">🇯🇵 日本語</button></li>
</ul>
</div>
<button class="theme-toggle" id="themeToggle" aria-label="다크 모드 전환" title="다크/라이트 모드 전환">
<div class="theme-toggle-thumb">
<svg class="theme-toggle-icon theme-toggle-icon--sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<circle cx="12" cy="12" r="5"></circle>
<line x1="12" y1="1" x2="12" y2="3"></line>
<line x1="12" y1="21" x2="12" y2="23"></line>
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
<line x1="1" y1="12" x2="3" y2="12"></line>
<line x1="21" y1="12" x2="23" y2="12"></line>
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
</svg>
<svg class="theme-toggle-icon theme-toggle-icon--moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
</svg>
</div>
</button>
</div>
<button class="hamburger" aria-label="메뉴 열기" aria-expanded="false" aria-controls="nav-menu">
<span></span>
<span></span>
<span></span>
</button>
</div>
</nav>
</div>
<main id="main-content">
<section class="page-header">
<div class="container">
<h1 data-i18n="gallery.pageHeader.title">Studio Gallery</h1>
<p data-i18n="gallery.pageHeader.desc">Mingle Studioの実際の空間を写真でご覧ください</p>
</div>
</section>
<section class="section">
<div class="container">
<div class="gallery-grid">
<div class="gallery-item">
<img src="/images/studio/넓은 모션 캡쳐 공간 002.webp" alt="밍글 스튜디오 메인 모션캡쳐 공간 - OptiTrack 카메라 30대와 넓은 8x7m 캡쳐 공간" class="gallery-img" loading="lazy">
<div class="gallery-caption" data-i18n="gallery.captions.exterior_open">外観 カーテン開放</div>
</div>
<div class="gallery-item">
<img src="/images/studio/커튼을 친 외부 전경.webp" alt="밍글 스튜디오 모션캡쳐 공간 커튼 닫은 모습 - 프라이버시 보호" class="gallery-img" loading="lazy">
<div class="gallery-caption" data-i18n="gallery.captions.exterior_closed">外観 カーテン閉鎖</div>
</div>
<div class="gallery-item">
<img src="/images/studio/오퍼레이팅 공간 강조.webp" alt="밍글 스튜디오 오퍼레이팅 컨트롤룸 - 전문 장비와 대형 모니터로 실시간 모니터링" class="gallery-img" loading="lazy">
<div class="gallery-caption" data-i18n="gallery.captions.control_room">オペレーティング/コントロールルーム</div>
</div>
<div class="gallery-item">
<img src="/images/studio/스튜디오와 연결된 파우더룸.webp" alt="밍글 스튜디오 파우더룸 - 스튜디오와 직접 연결된 메이크업 및 준비 공간" class="gallery-img" loading="lazy">
<div class="gallery-caption" data-i18n="gallery.captions.powder_room">パウダールーム(スタジオ連結)</div>
</div>
<div class="gallery-item">
<img src="/images/studio/탈의실 내부 공간.webp" alt="밍글 스튜디오 탈의실 내부 - 편리한 의상 보관 및 착용 공간" class="gallery-img" loading="lazy">
<div class="gallery-caption" data-i18n="gallery.captions.changing_room_in">更衣室(内部)</div>
</div>
<div class="gallery-item">
<img src="/images/studio/탈의실 외부 공간.webp" alt="밍글 스튜디오 탈의실 대기 공간 - 탈의실 전 준비 및 대기 공간" class="gallery-img" loading="lazy">
<div class="gallery-caption" data-i18n="gallery.captions.changing_room_out">更衣室(外部)</div>
</div>
<div class="gallery-item">
<img src="/images/studio/고품질 녹음을 위한 음향 시스템.webp" alt="밍글 스튜디오 고품질 녹음 음향 시스템 - 전문적인 오디오 녹음 장비" class="gallery-img" loading="lazy">
<div class="gallery-caption" data-i18n="gallery.captions.audio_system">高品質オーディオシステム</div>
</div>
<div class="gallery-item">
<img src="/images/studio/모션캡쳐 공간 001.webp" alt="밍글 스튜디오 모션캡쳐 공간 전체 전경 001 - OptiTrack 카메라와 넓은 캡쳐 에리어" class="gallery-img" loading="lazy">
<div class="gallery-caption" data-i18n="gallery.captions.mocap_space_1">モーションキャプチャー空間 001</div>
</div>
<div class="gallery-item">
<img src="/images/studio/모션캡쳐 공간 002.webp" alt="밍글 스튜디오 모션캡쳐 공간 전체 전경 002 - 다양한 각도에서 본 캡쳐 공간" class="gallery-img" loading="lazy">
<div class="gallery-caption" data-i18n="gallery.captions.mocap_space_2">モーションキャプチャー空間 002</div>
</div>
<div class="gallery-item">
<img src="/images/studio/모션캡쳐 공간 003.webp" alt="밍글 스튜디오 모션캡쳐 공간 전체 전경 003 - 조명과 카메라 시스템 배치" class="gallery-img" loading="lazy">
<div class="gallery-caption" data-i18n="gallery.captions.mocap_space_3">モーションキャプチャー空間 003</div>
</div>
<div class="gallery-item">
<img src="/images/studio/모션캡쳐 공간 004.webp" alt="밍글 스튜디오 모션캡쳐 공간 전체 전경 004 - 완성된 모션캡쳐 스튜디오 전경" class="gallery-img" loading="lazy">
<div class="gallery-caption" data-i18n="gallery.captions.mocap_space_4">モーションキャプチャー空間 004</div>
</div>
</div>
</div>
</section>
<!-- 360도 이미지 섹션 -->
<section class="panorama-section">
<div class="container">
<h2 data-i18n="gallery.panorama.title">360° Studio View</h2>
<p class="section-subtitle" data-i18n="gallery.panorama.desc">ドラッグしてスタジオを360度見渡してください</p>
<div class="panorama-grid">
<div class="panorama-viewer" data-panorama="curtain-open">
<div class="panorama-container panorama-clickable" data-image="images/studio/커튼 걷은 360 이미지.webp" data-title="스튜디오 전경 (커튼 열림)">
<img src="/images/studio/커튼 걷은 360 이미지.webp" alt="밍글 스튜디오 360도 전경 - 커튼을 걷은 모습" class="panorama-preview-image" loading="lazy">
<div class="panorama-help" data-i18n="gallery.panorama.clickToView">クリックして360° VRで体験する</div>
<div class="panorama-indicator">360° VR</div>
<div class="panorama-play-button" role="button" tabindex="0" aria-label="360도 VR 체험하기">
<i class="fas fa-play"></i>
</div>
</div>
<div class="panorama-controls">
<div class="panorama-title" data-i18n="gallery.panorama.curtainOpen">スタジオ全景(カーテン開放)</div>
</div>
</div>
<div class="panorama-viewer" data-panorama="curtain-closed">
<div class="panorama-container panorama-clickable" data-image="images/studio/커튼친 360 이미지.webp" data-title="스튜디오 전경 (커튼 닫힘)">
<img src="/images/studio/커튼친 360 이미지.webp" alt="밍글 스튜디오 360도 전경 - 커튼을 친 모습" class="panorama-preview-image" loading="lazy">
<div class="panorama-help" data-i18n="gallery.panorama.clickToView">クリックして360° VRで体験する</div>
<div class="panorama-indicator">360° VR</div>
<div class="panorama-play-button" role="button" tabindex="0" aria-label="360도 VR 체험하기">
<i class="fas fa-play"></i>
</div>
</div>
<div class="panorama-controls">
<div class="panorama-title" data-i18n="gallery.panorama.curtainClosed">スタジオ全景(カーテン閉鎖)</div>
</div>
</div>
</div>
</div>
</section>
</main>
<div id="footer-placeholder">
<!-- 공통 푸터 컴포넌트 -->
<footer class="site-footer">
<div class="container">
<div class="footer-grid">
<div class="footer-section">
<h3 class="footer-heading" data-i18n="footer.companyInfo">会社情報</h3>
<ul class="footer-list">
<li><strong data-i18n="footer.companyName">Mingle Studio</strong></li>
<li data-i18n="footer.ceo">代表: 김희진</li>
<li data-i18n="footer.businessNumber">事業者登録番号: 208-12-73755</li>
</ul>
</div>
<div class="footer-section">
<h3 class="footer-heading" data-i18n="footer.contact">お問い合わせ</h3>
<ul class="footer-list">
<li><a href="tel:+82-10-9288-9190"><i class="fa-solid fa-phone" aria-hidden="true"></i> 010-9288-9190</a></li>
<li><a href="mailto:minglestudio@minglestudio.co.kr"><i class="fa-solid fa-briefcase" aria-hidden="true"></i> <span data-i18n="footer.businessInquiry">ビジネスお問い合わせ</span></a></li>
<li><a href="mailto:help@minglestudio.co.kr"><i class="fa-solid fa-envelope" aria-hidden="true"></i> <span data-i18n="footer.reservationInquiry">ご予約お問い合わせ</span></a></li>
</ul>
</div>
<div class="footer-section">
<h3 class="footer-heading" data-i18n="footer.directions">アクセス</h3>
<ul class="footer-list">
<li><i class="fa-solid fa-location-dot" aria-hidden="true"></i> <span data-i18n="footer.address">仁川広域市富平区主夫吐路236</span></li>
<li data-i18n="footer.addressDetail">仁川テクバレーU1センター A棟 B105号</li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p data-i18n="footer.copyright">© 2025 Mingle Studio. All rights reserved.</p>
</div>
</div>
</footer>
</div>
<!-- 백업 푸터 (JavaScript 로드 실패 시) -->
<footer class="site-footer" id="backupFooter">
<div class="container">
<div class="footer-grid">
<div class="footer-section">
<h3 class="footer-heading">회사 정보</h3>
<ul class="footer-list">
<li><strong>밍글 스튜디오</strong></li>
<li>대표: 김희진</li>
<li>사업자등록번호: 208-12-73755</li>
</ul>
</div>
<div class="footer-section">
<h3 class="footer-heading">연락처</h3>
<ul class="footer-list">
<li><a href="tel:+82-10-9288-9190"><i class="fa-solid fa-phone" aria-hidden="true"></i> 010-9288-9190</a></li>
<li><a href="mailto:minglestudio@minglestudio.co.kr"><i class="fa-solid fa-briefcase" aria-hidden="true"></i> 비즈니스 문의</a></li>
<li><a href="mailto:help@minglestudio.co.kr"><i class="fa-solid fa-envelope" aria-hidden="true"></i> 예약 문의</a></li>
</ul>
</div>
<div class="footer-section">
<h3 class="footer-heading">오시는 길</h3>
<ul class="footer-list">
<li><i class="fa-solid fa-location-dot" aria-hidden="true"></i> 인천광역시 부평구 주부토로 236</li>
<li>인천테크노밸리 U1센터 A동 B105호</li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>© 2025 밍글 스튜디오. All rights reserved.</p>
</div>
</div>
</footer>
<script src="/js/i18n.js"></script>
<script src="/js/common.js"></script>
<script src="/js/gallery.js"></script>
</body></html>