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

420 lines
23 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="zh"><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/zh/about.html">
<!-- Theme Color -->
<meta name="theme-color" content="#ff8800">
<!-- SEO 메타 태그 -->
<meta name="description" content="Mingle Studio是一个融合技术与创意的动作捕捉创作空间。2025年成立位于仁川科技谷。">
<meta name="keywords" content="밍글스튜디오, 회사소개, 모션캡쳐, 창작공간, 버추얼콘텐츠">
<meta name="author" content="밍글 스튜디오">
<!-- Open Graph -->
<meta property="og:title" content="关于我们 - Mingle Studio">
<meta property="og:description" content="2025年成立的仁川唯一动作捕捉专业工作室。融合技术与创意的虚拟内容创作空间。">
<meta property="og:url" content="https://minglestudio.co.kr/about.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="2025년 설립된 인천 유일의 모션캡처 전문 스튜디오. 기술과 창의력이 어우러진 버추얼 콘텐츠 창작 공간입니다">
<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">
<!-- Icons -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">
<!-- CSS -->
<link rel="stylesheet" href="/css/common.css">
<link rel="stylesheet" href="/css/about.css">
<link rel="alternate" hreflang="ko" href="https://minglestudio.co.kr/about.html">
<link rel="alternate" hreflang="en" href="https://minglestudio.co.kr/en/about.html">
<link rel="alternate" hreflang="ja" href="https://minglestudio.co.kr/ja/about.html">
<link rel="alternate" hreflang="zh" href="https://minglestudio.co.kr/zh/about.html">
<link rel="alternate" hreflang="x-default" href="https://minglestudio.co.kr/about.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="/zh/">
<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="/zh/about" class="nav-link" data-i18n="header.nav.about">About</a></li>
<li><a href="/zh/services" class="nav-link" data-i18n="header.nav.services">Services</a></li>
<li><a href="/zh/portfolio" class="nav-link" data-i18n="header.nav.portfolio">Portfolio</a></li>
<li><a href="/zh/gallery" class="nav-link" data-i18n="header.nav.gallery">Gallery</a></li>
<li><a href="/zh/contact" class="nav-link" data-i18n="header.nav.contact">Contact</a></li>
<li><a href="/zh/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 page-header--hero">
<div class="page-header-bg" aria-hidden="true">
<img src="/images/studio/넓은 모션 캡쳐 공간 002.webp" alt="" loading="eager">
</div>
<div class="container">
<h1 data-i18n="about.pageHeader.title">About Us</h1>
<p data-i18n="about.pageHeader.desc">技术与创意、热情交融,创造全新价值的空间</p>
</div>
</section>
<!-- 회사 소개 -->
<section class="section">
<div class="container">
<div class="company-info">
<div class="info-grid reveal">
<div class="info-item">
<h3 data-i18n="about.info.companyName">公司名称</h3>
<p data-i18n="about.info.companyNameValue">Mingle Studio</p>
</div>
<div class="info-item">
<h3 data-i18n="about.info.foundingDate">成立日期</h3>
<p data-i18n="about.info.foundingDateValue">2025年7月15日</p>
</div>
<div class="info-item">
<h3 data-i18n="about.info.slogan">标语</h3>
<p data-i18n="about.info.sloganValue">"人人交融的快乐创作空间"</p>
</div>
<div class="info-item full-width">
<h3 data-i18n="about.info.meaning">含义</h3>
<p data-i18n="about.info.meaningValue">Mingle Studio是一个让技术人员、创作者和观众共同交融的虚拟内容制作空间。利用先进的光学动作捕捉技术捕捉虚拟角色鲜活的情感与动作实现新一代数字表演。</p>
</div>
</div>
</div>
<div class="about-content stagger-children">
<div class="card card--flat reveal" data-reveal="fade">
<h2 data-i18n="about.companyIntro.title">公司介绍</h2>
<p data-i18n="about.companyIntro.desc1">Mingle Studio是一个以动作捕捉为基础的创作空间通过创作者与技术、人与人之间的“交融”创造全新内容。</p>
<p data-i18n="about.companyIntro.desc2">自成立以来,以人人都能便捷使用的场地租赁服务为核心,提供虚拟内容制作环境。</p>
</div>
<div class="card card--flat reveal" data-reveal="fade">
<h2 data-i18n="about.visionMission.title">愿景与使命</h2>
<div class="vision-mission">
<div class="vm-item">
<h3><i class="fa-solid fa-bullseye" aria-hidden="true"></i> <span data-i18n="about.visionMission.visionTitle">愿景</span></h3>
<p data-i18n="about.visionMission.visionDesc">构建让所有创作者不受技术限制,将想象变为现实的创作生态系统</p>
</div>
<div class="vm-item">
<h3><i class="fa-solid fa-rocket" aria-hidden="true"></i> <span data-i18n="about.visionMission.missionTitle">使命</span></h3>
<p data-i18n="about.visionMission.missionDesc">通过先进的动作捕捉技术,将创作者的创意转化为生动的内容,提供全新的数字体验</p>
</div>
</div>
</div>
<div class="card card--flat reveal" data-reveal="fade">
<h2 data-i18n="about.history.title">发展历程</h2>
<div class="timeline">
<div class="timeline-item">
<div class="timeline-date" data-i18n="about.history.date1">2025年7月15日</div>
<div class="timeline-content">
<h4 data-i18n="about.history.event1Title">Mingle Studio 成立</h4>
<p data-i18n="about.history.event1Desc">Mingle Studio 公司注册成立</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-date" data-i18n="about.history.date2">2025年8月1日</div>
<div class="timeline-content">
<h4 data-i18n="about.history.event2Title">工作室正式开放</h4>
<p data-i18n="about.history.event2Desc">OptiTrack系统搭建完成场地租赁服务正式启动</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 팀 소개 -->
<section class="team-section section bg-light">
<div class="container">
<div class="section-header">
<h2 data-i18n="about.team.title">Our Team</h2>
<p data-i18n="about.team.desc">各领域专家协同合作,全力支持内容制作</p>
</div>
<div class="team-grid stagger-children">
<div class="team-card reveal" data-reveal="zoom">
<div class="team-avatar">
<img src="/images/profile/제이제이.png" alt="김희진 프로필">
</div>
<h3 data-i18n="about.team.member1Name">김희진</h3>
<p class="team-nickname">JAYJAY</p>
<p class="team-role" data-i18n="about.team.member1Role">CEO / 3D美术师</p>
<p class="team-desc" data-i18n="about.team.member1Desc">场景/资源制作,人事及项目管理</p>
</div>
<div class="team-card reveal" data-reveal="zoom">
<div class="team-avatar">
<img src="/images/profile/카닉.png" alt="김광진 프로필">
</div>
<h3 data-i18n="about.team.member2Name">김광진</h3>
<p class="team-nickname">KINDNICK</p>
<p class="team-role" data-i18n="about.team.member2Role">CTO / 技术总监</p>
<p class="team-desc" data-i18n="about.team.member2Desc">工作室整体技术运营,动作捕捉设备管理,音响系统,引擎编程</p>
</div>
<div class="team-card reveal" data-reveal="zoom">
<div class="team-avatar">
<img src="/images/profile/야모.png" alt="이승민 프로필">
</div>
<h3 data-i18n="about.team.member3Name">이승민</h3>
<p class="team-nickname">YAMO</p>
<p class="team-role" data-i18n="about.team.member3Role">CCO / 内容总监</p>
<p class="team-desc" data-i18n="about.team.member3Desc">捕捉指导,演员动作清理,摄像机运动,表演导演</p>
</div>
</div>
</div>
</section>
<!-- 파트너 스트리머 -->
<section class="partner-streamer-section section">
<div class="container">
<div class="section-header">
<h2 data-i18n="about.partner.title">Partner Streamer</h2>
<p data-i18n="about.partner.desc">与Mingle Studio合作创作内容的创作者</p>
</div>
<div class="streamer-grid stagger-children">
<div class="streamer-card reveal" data-reveal="zoom">
<div class="streamer-avatar">
<img src="/images/partners streamer/밍글 파트너 스트리머 구슬요.webp" alt="구슬요 프로필" loading="lazy">
</div>
<h3>구슬요</h3>
<p class="streamer-handle">@beadyo97</p>
<p class="streamer-desc" data-i18n="about.partner.streamer1Desc">以互动、歌唱、游戏、VRChat等丰富多样的内容亮相的虚拟主播。主要在SOOP平台活跃与Mingle Studio的动作捕捉技术携手打造全新的虚拟内容。</p>
<div class="streamer-tags">
<span class="streamer-tag">VTuber</span>
<span class="streamer-tag">노래</span>
<span class="streamer-tag">게임</span>
<span class="streamer-tag">VRChat</span>
<span class="streamer-tag">소통</span>
</div>
<div class="streamer-links">
<a href="https://ch.sooplive.co.kr/beadyo97" target="_blank" rel="noopener">SOOP</a>
<a href="https://www.youtube.com/@beadyo97" target="_blank" rel="noopener">YouTube</a>
<a href="https://www.instagram.com/bead.yo" target="_blank" rel="noopener">Instagram</a>
<a href="https://x.com/beadyo97" target="_blank" rel="noopener">X</a>
</div>
</div>
</div>
</div>
</section>
<!-- 핵심 가치 -->
<section class="values-section section">
<div class="container">
<div class="section-header">
<h2 data-i18n="about.values.title">Core Values</h2>
<p data-i18n="about.values.desc">Mingle Studio所追求的核心价值</p>
</div>
<div class="values-grid stagger-children">
<div class="value-item reveal" data-reveal="up">
<div class="value-icon"><i class="fa-solid fa-handshake" aria-hidden="true"></i></div>
<h3 data-i18n="about.values.collaboration">协作</h3>
<p data-i18n="about.values.collaborationDesc">技术人员与创作者携手共创的协同效应</p>
</div>
<div class="value-item reveal" data-reveal="up">
<div class="value-icon"><i class="fa-solid fa-lightbulb" aria-hidden="true"></i></div>
<h3 data-i18n="about.values.innovation">创新</h3>
<p data-i18n="about.values.innovationDesc">以前沿技术开拓创作新可能</p>
</div>
<div class="value-item reveal" data-reveal="up">
<div class="value-icon"><i class="fa-solid fa-palette" aria-hidden="true"></i></div>
<h3 data-i18n="about.values.creativity">创意</h3>
<p data-i18n="about.values.creativityDesc">将想象变为现实的创意解决方案</p>
</div>
<div class="value-item reveal" data-reveal="up">
<div class="value-icon"><i class="fa-solid fa-star" aria-hidden="true"></i></div>
<h3 data-i18n="about.values.quality">品质</h3>
<p data-i18n="about.values.qualityDesc">追求最高水准的动作捕捉质量</p>
</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>
<!-- JavaScript -->
<script src="/js/i18n.js"></script>
<script src="/js/common.js"></script>
</body></html>