mingle/mingle-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Remove: 다국어(en/ja/zh) 전체 제거, 한국어 전용으로 전환

Browse Source 
- en/, ja/, zh/ 디렉토리 전체 삭제
- i18n/ 번역 JSON + js/i18n.js 삭제
- 전체 HTML에서 언어 스위처, hreflang 태그 제거
- common.css lang-switcher CSS 135줄 제거
- schedule.js 다국어 로직 제거 (한국어 직접 사용)
- build-blog.js, devlog.js 한국어 전용으로 단순화
- sitemap.xml 한국어 URL만 유지
- build_i18n.js + package.json build:i18n 스크립트 제거

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
68893236+KINDNICK@users.noreply.github.com 2026-04-06 01:00:50 +09:00
parent 5a0c6a8f70
commit 65ad313797
118 changed files with 140 additions and 25875 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
404.html
View File

@ -201,10 +201,6 @@
<link rel="alternate" hreflang="ko" href="https://minglestudio.co.kr/404">
<link rel="alternate" hreflang="en" href="https://minglestudio.co.kr/en/404">
<link rel="alternate" hreflang="ja" href="https://minglestudio.co.kr/ja/404">
<link rel="alternate" hreflang="zh" href="https://minglestudio.co.kr/zh/404">
<link rel="alternate" hreflang="x-default" href="https://minglestudio.co.kr/404">
</head>
<body>
<!-- Google Tag Manager (noscript) -->
@ -243,7 +239,6 @@
</div>
</div>
<script src="js/i18n.js"></script>
<script src="js/common.js?v=20260313"></script>
<script>
// 검색 기능

19
about.html
View File

@ -70,10 +70,6 @@
<link rel="alternate" hreflang="ko" href="https://minglestudio.co.kr/about">
<link rel="alternate" hreflang="en" href="https://minglestudio.co.kr/en/about">
<link rel="alternate" hreflang="ja" href="https://minglestudio.co.kr/ja/about">
<link rel="alternate" hreflang="zh" href="https://minglestudio.co.kr/zh/about">
<link rel="alternate" hreflang="x-default" href="https://minglestudio.co.kr/about">
</head>
<body>
<!-- Google Tag Manager (noscript) -->
@ -105,20 +101,6 @@
<li><a href="/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">
@ -412,7 +394,6 @@
</footer>
<!-- JavaScript -->
<script src="js/i18n.js"></script>
<script src="js/common.js?v=20260313"></script>
</body></html>

18
backgrounds.html
View File

@ -44,10 +44,6 @@
<link rel="alternate" hreflang="ko" href="https://minglestudio.co.kr/backgrounds">
<link rel="alternate" hreflang="en" href="https://minglestudio.co.kr/en/backgrounds">
<link rel="alternate" hreflang="ja" href="https://minglestudio.co.kr/ja/backgrounds">
<link rel="alternate" hreflang="zh" href="https://minglestudio.co.kr/zh/backgrounds">
<link rel="alternate" hreflang="x-default" href="https://minglestudio.co.kr/backgrounds">
</head>
<body>
<!-- Google Tag Manager (noscript) -->
@ -78,20 +74,6 @@
<li><a href="/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">

216
build-blog.js
View File

@ -1,21 +1,18 @@
#!/usr/bin/env node
/**
* 밍글 스튜디오 블로그 빌드 스크립트
* 마크다운 파일을 HTML로 변환하여 블로그 페이지 생성
* 밍글 스튜디오 DevLog 빌드 스크립트
* 마크다운 파일을 HTML로 변환하여 DevLog 페이지 생성
*
* 사용법: node build-blog.js
*
* 디렉토리 구조:
* blog/posts/{slug}/
* ko.md, en.md, ja.md, zh.md ← 언어별 마크다운
* images/ ← 글별 이미지
* ko.md ← 마크다운
* images/ ← 글별 이미지
*
* 출력:
* devlog/{slug}.html ← 한국어 글
* en/devlog/{slug}.html ← 영어 글
* ja/devlog/{slug}.html ← 일본어 글
* zh/devlog/{slug}.html ← 중국어 글
* devlog/index.json ← 목록용 메타데이터
* devlog/{slug}.html ← 글 페이지
* devlog/index.json ← 목록용 메타데이터
*/
const fs = require('fs');
@ -24,30 +21,9 @@ const matter = require('gray-matter');
const { marked } = require('marked');
const POSTS_DIR = path.join(__dirname, 'blog', 'posts');
const LANGS = ['ko', 'en', 'ja', 'zh'];
const SITE_URL = 'https://minglestudio.co.kr';
// 언어별 설정
const LANG_CONFIG = {
ko: { outDir: 'devlog', htmlLang: 'ko', locale: 'ko_KR', blogTitle: 'DevLog', studioName: '밍글 스튜디오', prefix: '' },
en: { outDir: 'en/devlog', htmlLang: 'en', locale: 'en_US', blogTitle: 'DevLog', studioName: 'Mingle Studio', prefix: '/en' },
ja: { outDir: 'ja/devlog', htmlLang: 'ja', locale: 'ja_JP', blogTitle: 'DevLog', studioName: 'ミングルスタジオ', prefix: '/ja' },
zh: { outDir: 'zh/devlog', htmlLang: 'zh', locale: 'zh_CN', blogTitle: 'DevLog', studioName: '明格工作室', prefix: '/zh' }
};
const NAV_LABELS = {
ko: { about: 'About', services: 'Services', portfolio: 'Portfolio', gallery: 'Gallery', schedule: 'Schedule', devlog: 'DevLog', contact: 'Contact', qna: 'Q&A' },
en: { about: 'About', services: 'Services', portfolio: 'Portfolio', gallery: 'Gallery', schedule: 'Schedule', devlog: 'DevLog', contact: 'Contact', qna: 'Q&A' },
ja: { about: '紹介', services: 'サービス', portfolio: 'ポートフォリオ', gallery: 'ギャラリー', schedule: 'スケジュール', devlog: 'DevLog', contact: 'お問い合わせ', qna: 'Q&A' },
zh: { about: '关于', services: '服务', portfolio: '作品集', gallery: '画廊', schedule: '日程', devlog: 'DevLog', contact: '联系', qna: 'Q&A' }
};
const BACK_TO_LIST = { ko: '← 목록으로', en: '← Back to list', ja: '← 一覧に戻る', zh: '← 返回列表' };
const SHARE_TEXT = { ko: '공유하기', en: 'Share', ja: 'シェアする', zh: '分享' };
const READ_MORE = { ko: '자세히 보기', en: 'Read more', ja: '続きを読む', zh: '阅读更多' };
const PUBLISHED = { ko: '발행일', en: 'Published', ja: '公開日', zh: '发布日期' };
// marked 설정 — 이미지 경로를 상대 경로로 변환
// marked 설정
marked.use({
renderer: {
image(token) {
@ -61,7 +37,7 @@ marked.use({
function build() {
if (!fs.existsSync(POSTS_DIR)) {
console.log('blog/posts/ 디렉토리가 없습니다. 빌드할 글이 없습니다.');
console.log('blog/posts/ 디렉토리가 없습니다.');
return;
}
@ -74,74 +50,39 @@ function build() {
return;
}
// 글별 메타데이터 수집
const allPosts = [];
for (const slug of slugs) {
const postDir = path.join(POSTS_DIR, slug);
const koFile = path.join(postDir, 'ko.md');
if (!fs.existsSync(koFile)) {
const mdFile = path.join(postDir, 'ko.md');
if (!fs.existsSync(mdFile)) {
console.warn(`[SKIP] ${slug}/ko.md 없음`);
continue;
}
const koMatter = matter(fs.readFileSync(koFile, 'utf-8'));
const meta = koMatter.data;
const { data, content } = matter(fs.readFileSync(mdFile, 'utf-8'));
const title = data.title || slug;
const description = data.description || '';
const date = data.date || '';
const thumbnail = data.thumbnail || '';
const category = data.category || '';
// 이미지 디렉토리 확인 및 복사
// 이미지 복사
const imgSrcDir = path.join(postDir, 'images');
if (fs.existsSync(imgSrcDir)) {
for (const lang of LANGS) {
const cfg = LANG_CONFIG[lang];
const imgDestDir = path.join(__dirname, cfg.outDir, slug, 'images');
copyDirSync(imgSrcDir, imgDestDir);
}
copyDirSync(imgSrcDir, path.join(__dirname, 'devlog', slug, 'images'));
}
// 각 언어별 HTML 생성
for (const lang of LANGS) {
const mdFile = path.join(postDir, `${lang}.md`);
if (!fs.existsSync(mdFile)) continue;
// HTML 생성
const htmlContent = marked(content);
const postHtml = buildPostPage({ slug, title, description, date, thumbnail, category, htmlContent, mdContent: content });
const { data, content } = matter(fs.readFileSync(mdFile, 'utf-8'));
const title = data.title || meta.title || slug;
const description = data.description || meta.description || '';
const date = data.date || meta.date || '';
const thumbnail = data.thumbnail || meta.thumbnail || '';
const category = data.category || meta.category || '';
const outDir = path.join(__dirname, 'devlog');
fs.mkdirSync(path.join(outDir, slug), { recursive: true });
fs.writeFileSync(path.join(outDir, `${slug}.html`), postHtml, 'utf-8');
console.log(`[OK] devlog/${slug}.html`);
// marked가 한글 문맥에서 **bold** 변환을 누락하는 경우 후처리
const htmlContent = marked(content).replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
const cfg = LANG_CONFIG[lang];
// 이미지 경로: 블로그 글 HTML에서 images/... 로 상대 참조
const postHtml = buildPostPage({ lang, cfg, slug, title, description, date, thumbnail, category, htmlContent, mdContent: content });
const outDir = path.join(__dirname, cfg.outDir);
fs.mkdirSync(path.join(outDir, slug), { recursive: true });
fs.writeFileSync(path.join(outDir, `${slug}.html`), postHtml, 'utf-8');
console.log(`[OK] ${cfg.outDir}/${slug}.html`);
}
// 메타데이터 수집 (목록용)
allPosts.push({
slug,
date: meta.date || '',
category: meta.category || '',
thumbnail: meta.thumbnail || '',
titles: {},
descriptions: {},
categories: {}
});
for (const lang of LANGS) {
const mdFile = path.join(postDir, `${lang}.md`);
if (!fs.existsSync(mdFile)) continue;
const { data } = matter(fs.readFileSync(mdFile, 'utf-8'));
allPosts[allPosts.length - 1].titles[lang] = data.title || '';
allPosts[allPosts.length - 1].descriptions[lang] = data.description || '';
allPosts[allPosts.length - 1].categories[lang] = data.category || '';
}
allPosts.push({ slug, date, category, thumbnail, title, description });
}
// 날짜 내림차순 정렬
@ -150,10 +91,10 @@ function build() {
// index.json 생성
const indexPath = path.join(__dirname, 'devlog', 'index.json');
fs.writeFileSync(indexPath, JSON.stringify(allPosts, null, 2), 'utf-8');
console.log(`[OK] blog/index.json (${allPosts.length}건)`);
console.log(`[OK] devlog/index.json (${allPosts.length}건)`);
}
// 마크다운에서 FAQ 추출: **Q. 질문** + 다음 줄(들)이 답변
// FAQ 구조화 데이터 추출
function extractFAQ(mdContent) {
const faq = [];
const lines = mdContent.split('\n');
@ -178,14 +119,16 @@ function extractFAQ(mdContent) {
return faq;
}
function buildPostPage({ lang, cfg, slug, title, description, date, thumbnail, category, htmlContent, mdContent }) {
const pageTitle = `${title} - ${cfg.studioName} ${cfg.blogTitle}`;
const pageUrl = `${SITE_URL}${cfg.prefix}/devlog/${slug}`;
function buildPostPage({ slug, title, description, date, thumbnail, category, htmlContent, mdContent }) {
const pageTitle = `${title} - 밍글 스튜디오 DevLog`;
const pageUrl = `${SITE_URL}/devlog/${slug}`;
const thumbUrl = thumbnail ? `${SITE_URL}/blog/posts/${slug}/${thumbnail}` : `${SITE_URL}/images/logo/mingle-OG.png`;
const dateFormatted = formatDate(date, lang);
const nav = NAV_LABELS[lang];
const y = date ? new Date(date + 'T00:00:00').getFullYear() : '';
const m = date ? new Date(date + 'T00:00:00').getMonth() + 1 : '';
const d = date ? new Date(date + 'T00:00:00').getDate() : '';
const dateFormatted = date ? `${y}년 ${m}월 ${d}일` : '';
return `<!DOCTYPE html><html lang="${cfg.htmlLang}"><head>
return `<!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],
@ -213,15 +156,15 @@ function buildPostPage({ lang, cfg, slug, title, description, date, thumbnail, c
<meta name="theme-color" content="#ff8800">
<meta name="description" content="${escapeHtml(description)}">
<meta name="author" content="${cfg.studioName}">
<meta name="author" content="밍글 스튜디오">
<meta property="og:title" content="${escapeHtml(title)}">
<meta property="og:description" content="${escapeHtml(description)}">
<meta property="og:url" content="${pageUrl}">
<meta property="og:type" content="article">
<meta property="og:image" content="${thumbUrl}">
<meta property="og:locale" content="${cfg.locale}">
<meta property="og:site_name" content="${cfg.studioName}">
<meta property="og:locale" content="ko_KR">
<meta property="og:site_name" content="밍글 스튜디오">
<meta property="article:published_time" content="${date}">
<meta name="twitter:card" content="summary_large_image">
@ -231,14 +174,8 @@ function buildPostPage({ lang, cfg, slug, title, description, date, thumbnail, c
<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?v=20260404">
<link rel="stylesheet" href="/css/devlog.css?v=20260404">
<link rel="alternate" hreflang="ko" href="${SITE_URL}/devlog/${slug}">
<link rel="alternate" hreflang="en" href="${SITE_URL}/en/devlog/${slug}">
<link rel="alternate" hreflang="ja" href="${SITE_URL}/ja/devlog/${slug}">
<link rel="alternate" hreflang="zh" href="${SITE_URL}/zh/devlog/${slug}">
<link rel="alternate" hreflang="x-default" href="${SITE_URL}/devlog/${slug}">
<link rel="stylesheet" href="/css/common.css?v=20260406">
<link rel="stylesheet" href="/css/devlog.css?v=20260406">
<script type="application/ld+json">
{
@ -247,8 +184,8 @@ function buildPostPage({ lang, cfg, slug, title, description, date, thumbnail, c
"headline": ${JSON.stringify(title)},
"description": ${JSON.stringify(description)},
"datePublished": "${date}",
"author": { "@type": "Organization", "name": "${cfg.studioName}" },
"publisher": { "@type": "Organization", "name": "${cfg.studioName}" },
"author": { "@type": "Organization", "name": "밍글 스튜디오" },
"publisher": { "@type": "Organization", "name": "밍글 스튜디오" },
"url": "${pageUrl}"
}
</script>${(() => {
@ -271,43 +208,29 @@ function buildPostPage({ lang, cfg, slug, title, description, date, thumbnail, c
<body>
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PPTNN6WD"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<a href="#main-content" class="skip-to-content">Skip to content</a>
<a href="#main-content" class="skip-to-content">본문 바로가기</a>
<div id="header-placeholder">
<nav class="navbar" aria-label="Navigation">
<nav class="navbar" aria-label="메인 내비게이션">
<div class="nav-container">
<div class="nav-logo">
<a href="${cfg.prefix || '/'}">
<img src="/images/logo/mingle-logo.webp" alt="밍글 스튜디오">
<span data-i18n="header.studioName">밍글 스튜디오</span>
<a href="/">
<img src="/images/logo/mingle-logo.webp" alt="밍글 스튜디오 로고">
<span>밍글 스튜디오</span>
</a>
</div>
<ul id="nav-menu" class="nav-menu">
<li><a href="${cfg.prefix}/about" class="nav-link" data-i18n="header.nav.about">About</a></li>
<li><a href="${cfg.prefix}/services" class="nav-link" data-i18n="header.nav.services">Services</a></li>
<li><a href="${cfg.prefix}/portfolio" class="nav-link" data-i18n="header.nav.portfolio">Portfolio</a></li>
<li><a href="${cfg.prefix}/gallery" class="nav-link" data-i18n="header.nav.gallery">Gallery</a></li>
<li><a href="${cfg.prefix}/schedule" class="nav-link" data-i18n="header.nav.schedule">Schedule</a></li>
<li><a href="${cfg.prefix}/devlog" class="nav-link active" data-i18n="header.nav.devlog">DevLog</a></li>
<li><a href="${cfg.prefix}/contact" class="nav-link" data-i18n="header.nav.contact">Contact</a></li>
<li><a href="${cfg.prefix}/qna" class="nav-link" data-i18n="header.nav.qna">Q&amp;A</a></li>
<li><a href="/about" class="nav-link">About</a></li>
<li><a href="/services" class="nav-link">Services</a></li>
<li><a href="/portfolio" class="nav-link">Portfolio</a></li>
<li><a href="/gallery" class="nav-link">Gallery</a></li>
<li><a href="/schedule" class="nav-link">Schedule</a></li>
<li><a href="/devlog" class="nav-link active">DevLog</a></li>
<li><a href="/contact" class="nav-link">Contact</a></li>
<li><a href="/qna" class="nav-link">Q&amp;A</a></li>
</ul>
<div class="nav-actions">
<div class="lang-switcher">
<button class="lang-btn" aria-label="Language">
<span class="lang-current">${lang.toUpperCase()}</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">\u{1F1F0}\u{1F1F7} 한국어</button></li>
<li><button data-lang="en">\u{1F1FA}\u{1F1F8} English</button></li>
<li><button data-lang="zh">\u{1F1E8}\u{1F1F3} 中文</button></li>
<li><button data-lang="ja">\u{1F1EF}\u{1F1F5} 日本語</button></li>
</ul>
</div>
<button class="theme-toggle" id="themeToggle" aria-label="Toggle dark mode">
<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>
@ -321,10 +244,10 @@ function buildPostPage({ lang, cfg, slug, title, description, date, thumbnail, c
</svg>
</div>
</button>
<button class="hamburger" id="hamburger" aria-label="Menu" aria-expanded="false">
<span class="hamburger-line"></span>
<span class="hamburger-line"></span>
<span class="hamburger-line"></span>
<button class="hamburger" aria-label="메뉴 열기" aria-expanded="false" aria-controls="nav-menu">
<span></span>
<span></span>
<span></span>
</button>
</div>
</div>
@ -335,7 +258,7 @@ function buildPostPage({ lang, cfg, slug, title, description, date, thumbnail, c
<article class="blog-post">
<div class="blog-post-header">
<div class="container">
<a href="${cfg.prefix}/devlog" class="blog-back-link">${BACK_TO_LIST[lang]}</a>
<a href="/devlog" class="blog-back-link">← 목록으로</a>
${category ? `<span class="blog-category">${escapeHtml(category)}</span>` : ''}
<h1 class="blog-post-title">${escapeHtml(title)}</h1>
<div class="blog-post-meta">
@ -350,7 +273,7 @@ function buildPostPage({ lang, cfg, slug, title, description, date, thumbnail, c
</div>
<div class="blog-post-footer">
<div class="container">
<a href="${cfg.prefix}/devlog" class="blog-back-btn"><i class="fas fa-arrow-left"></i> ${BACK_TO_LIST[lang]}</a>
<a href="/devlog" class="blog-back-btn"><i class="fas fa-arrow-left"></i> ← 목록으로</a>
</div>
</div>
</article>
@ -358,24 +281,11 @@ function buildPostPage({ lang, cfg, slug, title, description, date, thumbnail, c
<div id="footer-placeholder"></div>
<script src="/js/i18n.js"></script>
<script src="/js/common.js"></script>
</body>
</html>`;
}
function formatDate(dateStr, lang) {
if (!dateStr) return '';
const d = new Date(dateStr + 'T00:00:00');
if (isNaN(d)) return dateStr;
const y = d.getFullYear(), m = d.getMonth() + 1, day = d.getDate();
if (lang === 'ko') return `${y}년 ${m}월 ${day}일`;
if (lang === 'ja') return `${y}年${m}月${day}日`;
if (lang === 'zh') return `${y}年${m}月${day}日`;
const months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
return `${months[m - 1]} ${day}, ${y}`;
}
function escapeHtml(str) {
return String(str).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
}

203
build_i18n.js
View File

@ -1,203 +0,0 @@
const fs = require('fs');
const path = require('path');
const cheerio = require('cheerio');
const langs = ['ko', 'en', 'ja', 'zh'];
const defaultLang = 'ko';
const siteUrl = 'https://minglestudio.co.kr';
const rootDir = __dirname;
const i18nDir = path.join(rootDir, 'i18n');
const componentsDir = path.join(rootDir, 'components');
// Read all html files
const htmlFiles = fs.readdirSync(rootDir).filter(f => f.endsWith('.html') && f !== 'naver-site-verification.html');
// Load translations
const translations = {};
langs.forEach(lang => {
try {
translations[lang] = JSON.parse(fs.readFileSync(path.join(i18nDir, `${lang}.json`), 'utf-8'));
} catch (e) {
console.error(`Failed to load ${lang}.json`, e);
}
});
// Load components
const headerHtml = fs.readFileSync(path.join(componentsDir, 'header.html'), 'utf-8');
const footerHtml = fs.readFileSync(path.join(componentsDir, 'footer.html'), 'utf-8');
function t(lang, key, fallback = '') {
if (lang === defaultLang) return fallback || key;
const keys = key.split('.');
let val = translations[lang];
if (!val) return fallback || key;
for (const k of keys) {
if (val && typeof val === 'object' && k in val) {
val = val[k];
} else {
return fallback || key;
}
}
return typeof val === 'string' ? val : (fallback || key);
}
console.log('Starting i18n SSG Build...');
langs.forEach(lang => {
const isDefault = lang === defaultLang;
const outDir = isDefault ? rootDir : path.join(rootDir, lang);
if (!fs.existsSync(outDir)) {
fs.mkdirSync(outDir, { recursive: true });
}
htmlFiles.forEach(file => {
const pageName = file.replace('.html', '') || 'index';
const content = fs.readFileSync(path.join(rootDir, file), 'utf-8');
const $ = cheerio.load(content, { decodeEntities: false });
// Change lang attribute
$('html').attr('lang', lang);
// Remove existing hreflang tags if any to prevent duplicates
$('link[rel="alternate"][hreflang]').remove();
// Add hreflang tags
const head = $('head');
langs.forEach(l => {
const href = l === defaultLang
? `${siteUrl}${file === 'index.html' ? '/' : '/' + file}`
: `${siteUrl}/${l}${file === 'index.html' ? '/' : '/' + file}`;
head.append(`\n <link rel="alternate" hreflang="${l}" href="${href}" />`);
});
head.append(`\n <link rel="alternate" hreflang="x-default" href="${siteUrl}${file === 'index.html' ? '/' : '/' + file}" />\n`);
// Change canonical
const canonicalHref = isDefault
? `${siteUrl}${file === 'index.html' ? '/' : '/' + file}`
: `${siteUrl}/${lang}${file === 'index.html' ? '/' : '/' + file}`;
$('link[rel="canonical"]').attr('href', canonicalHref);
// Inject components
if ($('#header-placeholder').html()?.trim() === '') {
$('#header-placeholder').html('\n' + headerHtml + '\n');
}
if ($('#footer-placeholder').html()?.trim() === '') {
$('#footer-placeholder').html('\n' + footerHtml + '\n');
}
// Translate nodes (only if not default language)
if (!isDefault) {
$('[data-i18n]').each((i, el) => {
const key = $(el).attr('data-i18n');
const trans = t(lang, key, $(el).text());
if (trans.includes('<')) $(el).html(trans);
else $(el).text(trans);
});
$('[data-i18n-html]').each((i, el) => {
const key = $(el).attr('data-i18n-html');
const trans = t(lang, key, $(el).html());
$(el).html(trans);
});
$('[data-i18n-placeholder]').each((i, el) => {
const key = $(el).attr('data-i18n-placeholder');
$(el).attr('placeholder', t(lang, key, $(el).attr('placeholder')));
});
$('[data-i18n-aria]').each((i, el) => {
const key = $(el).attr('data-i18n-aria');
$(el).attr('aria-label', t(lang, key, $(el).attr('aria-label') || ''));
});
$('[data-i18n-title]').each((i, el) => {
const key = $(el).attr('data-i18n-title');
$(el).attr('title', t(lang, key, $(el).attr('title') || ''));
});
// Meta tags
const titleKey = `${pageName}.meta.title`;
const tTitle = t(lang, titleKey, null);
if (tTitle) $('title').text(tTitle);
const descKey = `${pageName}.meta.description`;
const tDesc = t(lang, descKey, null);
if (tDesc) $('meta[name="description"]').attr('content', tDesc);
const ogTitleKey = `${pageName}.meta.ogTitle`;
const tOgTitle = t(lang, ogTitleKey, null);
if (tOgTitle) $('meta[property="og:title"]').attr('content', tOgTitle);
const ogDescKey = `${pageName}.meta.ogDescription`;
const tOgDesc = t(lang, ogDescKey, null);
if (tOgDesc) $('meta[property="og:description"]').attr('content', tOgDesc);
}
if (!isDefault) {
// Rewrite asset paths
$('link[href^="css/"]').attr('href', (i, val) => '/' + val);
$('link[href^="components/"]').attr('href', (i, val) => '/' + val);
$('script[src^="js/"]').attr('src', (i, val) => '/' + val);
$('img[src^="images/"]').attr('src', (i, val) => '/' + val);
// Re-map internal links to proper language folder
$('a[href^="/"], a.nav-link').each((i, el) => {
const href = $(el).attr('href');
if (!href) return;
// If it's a root-relative link (e.g., /about, /contact)
if (href.startsWith('/') && href.length > 1 && !href.startsWith('/images') && !href.startsWith('/css') && !href.startsWith('/js') && !href.startsWith('/i18n')) {
const newHref = `/${lang}${href}`;
$(el).attr('href', newHref);
} else if (href === '/') {
$(el).attr('href', `/${lang}/`);
} else if (!href.startsWith('http') && !href.startsWith('#') && !href.startsWith('/') && !href.startsWith('tel:') && !href.startsWith('mailto:')) {
// For links like href="about.html" or href="contact.html", we need to change it
if (href.endsWith('.html')) {
const newHref = `/${lang}/${href.replace('.html', '')}`;
$(el).attr('href', newHref);
}
}
});
}
fs.writeFileSync(path.join(outDir, file), $.html());
console.log(`[${lang}] Processed ${file}`);
});
});
console.log('Generating sitemap.xml...');
let sitemapUrls = '';
langs.forEach(lang => {
htmlFiles.forEach(file => {
const isDefault = lang === defaultLang;
const pageRoute = file === 'index.html' ? '' : file.replace('.html', '');
const loc = isDefault
? `${siteUrl}/${pageRoute}`
: `${siteUrl}/${lang}/${pageRoute}`;
// Remove trailing slash if it's just root, but wait siteUrl + '/' for root
const cleanLoc = loc.endsWith('/') ? loc : (pageRoute === '' && loc === siteUrl ? `${siteUrl}/` : loc);
sitemapUrls += `
<url>
<loc>${cleanLoc}</loc>
<lastmod>${new Date().toISOString().split('T')[0]}</lastmod>
<changefreq>weekly</changefreq>
<priority>${file === 'index.html' ? '1.0' : '0.8'}</priority>
</url>`;
});
});
const sitemapContent = `<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:xhtml="http://www.w3.org/1999/xhtml">
${sitemapUrls}
</urlset>
`;
fs.writeFileSync(path.join(rootDir, 'sitemap.xml'), sitemapContent);
console.log('Sitemap generated!');
console.log('Build completed! Language HTML files have been generated.');

14
components/header.html
View File

@ -19,20 +19,6 @@
<li><a href="/qna" class="nav-link" data-i18n="header.nav.qna">Q&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"/>
</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">

19
contact.html
View File

@ -70,10 +70,6 @@
<link rel="alternate" hreflang="ko" href="https://minglestudio.co.kr/contact">
<link rel="alternate" hreflang="en" href="https://minglestudio.co.kr/en/contact">
<link rel="alternate" hreflang="ja" href="https://minglestudio.co.kr/ja/contact">
<link rel="alternate" hreflang="zh" href="https://minglestudio.co.kr/zh/contact">
<link rel="alternate" hreflang="x-default" href="https://minglestudio.co.kr/contact">
</head>
<body>
<!-- Google Tag Manager (noscript) -->
@ -105,20 +101,6 @@
<li><a href="/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">
@ -517,7 +499,6 @@
</footer>
<!-- JavaScript -->
<script src="js/i18n.js"></script>
<script src="js/common.js?v=20260313"></script>
<script src="js/contact.js"></script>

136
css/common.css
View File

@ -375,142 +375,6 @@ body {
gap: 0.5rem;
}
/* ========================================
언어 스위처
======================================== */
.lang-switcher {
position: relative;
}
.lang-btn {
display: flex;
align-items: center;
gap: 4px;
padding: 6px 10px;
border: 1px solid var(--border-color);
border-radius: 8px;
background: transparent;
cursor: pointer;
font-size: 0.8rem;
font-weight: 700;
color: var(--text-primary);
transition: background 0.2s ease, border-color 0.2s ease;
}
.lang-btn:hover {
background: rgba(0, 0, 0, 0.04);
border-color: var(--primary-color);
}
.lang-btn.open {
border-color: var(--primary-color);
background: rgba(255, 136, 0, 0.06);
}
.lang-chevron {
transition: transform 0.2s ease;
opacity: 0.6;
}
.lang-btn.open .lang-chevron {
transform: rotate(180deg);
}
.lang-dropdown {
display: none;
position: absolute;
top: calc(100% + 6px);
right: 0;
min-width: 140px;
background: var(--bg-white);
border: 1px solid var(--border-color);
border-radius: 10px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
padding: 6px;
list-style: none;
z-index: 1000;
animation: langDropIn 0.15s ease;
}
.lang-dropdown.open {
display: block;
}
@keyframes langDropIn {
from {
opacity: 0;
transform: translateY(-6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.lang-dropdown li {
list-style: none;
}
.lang-dropdown button {
display: block;
width: 100%;
padding: 8px 12px;
border: none;
background: transparent;
cursor: pointer;
font-size: 0.85rem;
font-weight: 500;
color: var(--text-primary);
border-radius: 6px;
text-align: left;
transition: background 0.15s ease;
}
.lang-dropdown button:hover {
background: rgba(255, 136, 0, 0.08);
}
.lang-dropdown button.active {
background: rgba(255, 136, 0, 0.12);
color: var(--primary-color);
font-weight: 700;
}
/* 다크 모드 - 언어 스위처 */
[data-theme="dark"] .lang-btn {
border-color: rgba(255, 255, 255, 0.12);
color: rgba(255, 255, 255, 0.9);
}
[data-theme="dark"] .lang-btn:hover {
background: rgba(255, 255, 255, 0.06);
border-color: var(--primary-color);
}
[data-theme="dark"] .lang-btn.open {
border-color: var(--primary-color);
background: rgba(255, 136, 0, 0.1);
}
[data-theme="dark"] .lang-dropdown {
background: #1a1a2e;
border-color: rgba(255, 255, 255, 0.1);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}
[data-theme="dark"] .lang-dropdown button {
color: rgba(255, 255, 255, 0.85);
}
[data-theme="dark"] .lang-dropdown button:hover {
background: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .lang-dropdown button.active {
background: rgba(255, 136, 0, 0.15);
color: var(--primary-color);
}
/* ========================================
푸터
======================================== */

19
devlog.html
View File

@ -64,10 +64,6 @@
<link rel="stylesheet" href="css/devlog.css?v=20260404">
<link rel="alternate" hreflang="ko" href="https://minglestudio.co.kr/devlog">
<link rel="alternate" hreflang="en" href="https://minglestudio.co.kr/en/devlog">
<link rel="alternate" hreflang="ja" href="https://minglestudio.co.kr/ja/devlog">
<link rel="alternate" hreflang="zh" href="https://minglestudio.co.kr/zh/devlog">
<link rel="alternate" hreflang="x-default" href="https://minglestudio.co.kr/devlog">
<!-- JSON-LD 구조화 데이터 -->
<script type="application/ld+json">
@ -118,20 +114,6 @@
<li><a href="/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">
@ -180,7 +162,6 @@
<div id="footer-placeholder"></div>
<!-- JavaScript -->
<script src="js/i18n.js"></script>
<script src="js/common.js"></script>
<script src="js/devlog.js"></script>

40
devlog/index.json
View File

@ -4,47 +4,15 @@
"date": "2026-04-05",
"category": "모션캡처 기술",
"thumbnail": "images/thumbnail.webp",
"titles": {
"ko": "모션캡처 관성식 vs 광학식, 어떤 차이가 있을까?",
"en": "Inertial vs Optical Motion Capture: What's the Difference?",
"ja": "モーションキャプチャー 慣性式 vs 光学式、どんな違いがある？",
"zh": "动作捕捉惯性式 vs 光学式，有什么区别？"
},
"descriptions": {
"ko": "모션캡처의 두 가지 대표 방식인 관성식(IMU)과 광학식(Optical)의 원리, 장비별 특징, 커뮤니티 평가까지 한눈에 비교합니다.",
"en": "A comprehensive comparison of the two major motion capture methods — inertial (IMU) and optical — covering their principles, key equipment, and community feedback.",
"ja": "モーションキャプチャーの二大方式である慣性式（IMU）と光学式（Optical）の原理、機材ごとの特徴、コミュニティの評価まで一目で比較します。",
"zh": "全面比较动作捕捉两大主流方式——惯性式（IMU）与光学式（Optical）的原理、各类设备特征及社区评价。"
},
"categories": {
"ko": "모션캡처 기술",
"en": "Motion Capture Technology",
"ja": "モーションキャプチャー技術",
"zh": "动作捕捉技术"
}
"title": "모션캡처 관성식 vs 광학식, 어떤 차이가 있을까?",
"description": "모션캡처의 두 가지 대표 방식인 관성식(IMU)과 광학식(Optical)의 원리, 장비별 특징, 커뮤니티 평가까지 한눈에 비교합니다."
},
{
"slug": "optical-mocap-pipeline",
"date": "2026-04-05",
"category": "모션캡처 기술",
"thumbnail": "images/thumbnail.webp",
"titles": {
"ko": "광학식 모션캡처 파이프라인 완전 해부 — 카메라부터 모션 데이터까지",
"en": "Complete Anatomy of the Optical Motion Capture Pipeline — From Cameras to Motion Data",
"ja": "光学式モーションキャプチャーパイプライン完全解剖 ― カメラからモーションデータまで",
"zh": "光学动作捕捉管线完全解析 — 从摄像头到动作数据"
},
"descriptions": {
"ko": "광학식 모션캡처의 전체 기술 파이프라인을 심화 해설합니다. 카메라 설치, PoE 네트워크, 2D 센트로이드, 캘리브레이션, 3D 복원, 스켈레톤 솔빙, 후처리, 현장 실무 이슈까지 10단계로 상세히 다룹니다.",
"en": "An in-depth guide to the entire optical motion capture technical pipeline. We cover camera installation, PoE networking, 2D centroids, calibration, 3D reconstruction, skeleton solving, post-processing, and on-set practical issues in 10 detailed steps.",
"ja": "光学式モーションキャプチャーの技術パイプライン全体を詳しく解説します。カメラ設置、PoEネットワーク、2Dセントロイド、キャリブレーション、3D復元、スケルトンソルビング、後処理、現場の実務課題まで10ステップで詳細に取り上げます。",
"zh": "深入讲解光学动作捕捉的完整技术管线。涵盖摄像头安装、PoE网络、2D质心、标定、3D重建、骨骼解算、后处理以及现场实际问题，共10个详细步骤。"
},
"categories": {
"ko": "모션캡처 기술",
"en": "Motion Capture Technology",
"ja": "モーションキャプチャー技術",
"zh": "动作捕捉技术"
}
"title": "광학식 모션캡처 파이프라인 완전 해부 — 카메라부터 모션 데이터까지",
"description": "광학식 모션캡처의 전체 기술 파이프라인을 심화 해설합니다. 카메라 설치, PoE 네트워크, 2D 센트로이드, 캘리브레이션, 3D 복원, 스켈레톤 솔빙, 후처리, 현장 실무 이슈까지 10단계로 상세히 다룹니다."
}
]

63
devlog/inertial-vs-optical-mocap.html
View File

@ -44,14 +44,8 @@
<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?v=20260404">
<link rel="stylesheet" href="/css/devlog.css?v=20260404">
<link rel="alternate" hreflang="ko" href="https://minglestudio.co.kr/devlog/inertial-vs-optical-mocap">
<link rel="alternate" hreflang="en" href="https://minglestudio.co.kr/en/devlog/inertial-vs-optical-mocap">
<link rel="alternate" hreflang="ja" href="https://minglestudio.co.kr/ja/devlog/inertial-vs-optical-mocap">
<link rel="alternate" hreflang="zh" href="https://minglestudio.co.kr/zh/devlog/inertial-vs-optical-mocap">
<link rel="alternate" hreflang="x-default" href="https://minglestudio.co.kr/devlog/inertial-vs-optical-mocap">
<link rel="stylesheet" href="/css/common.css?v=20260406">
<link rel="stylesheet" href="/css/devlog.css?v=20260406">
<script type="application/ld+json">
{
@ -125,43 +119,29 @@
<body>
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PPTNN6WD"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<a href="#main-content" class="skip-to-content">Skip to content</a>
<a href="#main-content" class="skip-to-content">본문 바로가기</a>
<div id="header-placeholder">
<nav class="navbar" aria-label="Navigation">
<nav class="navbar" aria-label="메인 내비게이션">
<div class="nav-container">
<div class="nav-logo">
<a href="/">
<img src="/images/logo/mingle-logo.webp" alt="밍글 스튜디오">
<span data-i18n="header.studioName">밍글 스튜디오</span>
<img src="/images/logo/mingle-logo.webp" alt="밍글 스튜디오 로고">
<span>밍글 스튜디오</span>
</a>
</div>
<ul id="nav-menu" class="nav-menu">
<li><a href="/about" class="nav-link" data-i18n="header.nav.about">About</a></li>
<li><a href="/services" class="nav-link" data-i18n="header.nav.services">Services</a></li>
<li><a href="/portfolio" class="nav-link" data-i18n="header.nav.portfolio">Portfolio</a></li>
<li><a href="/gallery" class="nav-link" data-i18n="header.nav.gallery">Gallery</a></li>
<li><a href="/schedule" class="nav-link" data-i18n="header.nav.schedule">Schedule</a></li>
<li><a href="/devlog" class="nav-link active" data-i18n="header.nav.devlog">DevLog</a></li>
<li><a href="/contact" class="nav-link" data-i18n="header.nav.contact">Contact</a></li>
<li><a href="/qna" class="nav-link" data-i18n="header.nav.qna">Q&amp;A</a></li>
<li><a href="/about" class="nav-link">About</a></li>
<li><a href="/services" class="nav-link">Services</a></li>
<li><a href="/portfolio" class="nav-link">Portfolio</a></li>
<li><a href="/gallery" class="nav-link">Gallery</a></li>
<li><a href="/schedule" class="nav-link">Schedule</a></li>
<li><a href="/devlog" class="nav-link active">DevLog</a></li>
<li><a href="/contact" class="nav-link">Contact</a></li>
<li><a href="/qna" class="nav-link">Q&amp;A</a></li>
</ul>
<div class="nav-actions">
<div class="lang-switcher">
<button class="lang-btn" aria-label="Language">
<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="Toggle dark mode">
<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>
@ -175,10 +155,10 @@
</svg>
</div>
</button>
<button class="hamburger" id="hamburger" aria-label="Menu" aria-expanded="false">
<span class="hamburger-line"></span>
<span class="hamburger-line"></span>
<span class="hamburger-line"></span>
<button class="hamburger" aria-label="메뉴 열기" aria-expanded="false" aria-controls="nav-menu">
<span></span>
<span></span>
<span></span>
</button>
</div>
</div>
@ -252,7 +232,7 @@
<li><strong>지자기계(Magnetometer)</strong> — 지구 자기장을 기준으로 방향(Heading)을 보정</li>
</ul>
<p>이 세 센서의 데이터를 <strong>센서 퓨전(Sensor Fusion)</strong> 알고리즘으로 결합하면, 해당 센서가 부착된 신체 부위의 3D 방향(Orientation)을 실시간으로 계산할 수 있습니다. 보통 15~17개의 센서를 상체, 하체, 팔, 다리 등 주요 관절에 배치하고, 각 센서 간의 관계를 통해 전신 골격 데이터를 추출합니다.</p>
<p>다만 가속도계를 이중 적분하여 위치를 구하는 과정에서 <strong>오차가 누적(드리프트)</strong>되기 때문에, &quot;공간 어디에 서 있는가&quot;라는 <strong>글로벌 위치</strong>는 시간이 지날수록 부정확해집니다. 이것이 관성식의 근본적인 한계입니다.</p>
<p>다만 가속도계를 이중 적분하여 위치를 구하는 과정에서 **오차가 누적(드리프트)**되기 때문에, &quot;공간 어디에 서 있는가&quot;라는 <strong>글로벌 위치</strong>는 시간이 지날수록 부정확해집니다. 이것이 관성식의 근본적인 한계입니다.</p>
<p><video src="inertial-vs-optical-mocap/images/Sam_ROM_Raw.mp4" autoplay loop muted playsinline style="width:100%;border-radius:12px;margin:1.5rem 0;"></video></p>
<h3>장점</h3>
<ul>
@ -386,7 +366,7 @@
<p>1인 크리에이터나 인디 팀이라면 Rokoko처럼 진입 장벽이 낮은 관성식으로 시작하되, <strong>정밀도가 필요한 프로젝트에서는 광학식 스튜디오를 대관</strong>하는 방식이 가장 현실적이라는 의견이 많습니다.</p>
<hr>
<h2>밍글 스튜디오가 광학식을 선택한 이유</h2>
<p>밍글 스튜디오는 <strong>OptiTrack 카메라 30대 (Prime 17 × 16대 + Prime 13 × 14대)</strong>를 갖춘 광학식 모션캡처 스튜디오입니다. 광학식을 선택한 이유는 명확합니다.</p>
<p>밍글 스튜디오는 **OptiTrack 카메라 30대 (Prime 17 × 16대 + Prime 13 × 14대)**를 갖춘 광학식 모션캡처 스튜디오입니다. 광학식을 선택한 이유는 명확합니다.</p>
<ul>
<li><strong>정확도</strong> — 게임 시네마틱, VTuber 라이브, 방송 콘텐츠 등 최종 결과물에 직결되는 작업에는 서브밀리미터 정확도가 필수적</li>
<li><strong>실시간 스트리밍</strong> — VTuber 라이브 방송처럼 실시간 피드백이 필요한 상황에서 드리프트 없는 안정적 데이터 제공</li>
@ -502,7 +482,6 @@ OptiTrack 30대 카메라 + Rokoko 글러브로 전신과 손가락을 동시에
<div id="footer-placeholder"></div>
<script src="/js/i18n.js"></script>
<script src="/js/common.js"></script>
</body>
</html>

93
devlog/optical-mocap-pipeline.html
View File

@ -44,14 +44,8 @@
<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?v=20260404">
<link rel="stylesheet" href="/css/devlog.css?v=20260404">
<link rel="alternate" hreflang="ko" href="https://minglestudio.co.kr/devlog/optical-mocap-pipeline">
<link rel="alternate" hreflang="en" href="https://minglestudio.co.kr/en/devlog/optical-mocap-pipeline">
<link rel="alternate" hreflang="ja" href="https://minglestudio.co.kr/ja/devlog/optical-mocap-pipeline">
<link rel="alternate" hreflang="zh" href="https://minglestudio.co.kr/zh/devlog/optical-mocap-pipeline">
<link rel="alternate" hreflang="x-default" href="https://minglestudio.co.kr/devlog/optical-mocap-pipeline">
<link rel="stylesheet" href="/css/common.css?v=20260406">
<link rel="stylesheet" href="/css/devlog.css?v=20260406">
<script type="application/ld+json">
{
@ -133,43 +127,29 @@
<body>
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PPTNN6WD"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<a href="#main-content" class="skip-to-content">Skip to content</a>
<a href="#main-content" class="skip-to-content">본문 바로가기</a>
<div id="header-placeholder">
<nav class="navbar" aria-label="Navigation">
<nav class="navbar" aria-label="메인 내비게이션">
<div class="nav-container">
<div class="nav-logo">
<a href="/">
<img src="/images/logo/mingle-logo.webp" alt="밍글 스튜디오">
<span data-i18n="header.studioName">밍글 스튜디오</span>
<img src="/images/logo/mingle-logo.webp" alt="밍글 스튜디오 로고">
<span>밍글 스튜디오</span>
</a>
</div>
<ul id="nav-menu" class="nav-menu">
<li><a href="/about" class="nav-link" data-i18n="header.nav.about">About</a></li>
<li><a href="/services" class="nav-link" data-i18n="header.nav.services">Services</a></li>
<li><a href="/portfolio" class="nav-link" data-i18n="header.nav.portfolio">Portfolio</a></li>
<li><a href="/gallery" class="nav-link" data-i18n="header.nav.gallery">Gallery</a></li>
<li><a href="/schedule" class="nav-link" data-i18n="header.nav.schedule">Schedule</a></li>
<li><a href="/devlog" class="nav-link active" data-i18n="header.nav.devlog">DevLog</a></li>
<li><a href="/contact" class="nav-link" data-i18n="header.nav.contact">Contact</a></li>
<li><a href="/qna" class="nav-link" data-i18n="header.nav.qna">Q&amp;A</a></li>
<li><a href="/about" class="nav-link">About</a></li>
<li><a href="/services" class="nav-link">Services</a></li>
<li><a href="/portfolio" class="nav-link">Portfolio</a></li>
<li><a href="/gallery" class="nav-link">Gallery</a></li>
<li><a href="/schedule" class="nav-link">Schedule</a></li>
<li><a href="/devlog" class="nav-link active">DevLog</a></li>
<li><a href="/contact" class="nav-link">Contact</a></li>
<li><a href="/qna" class="nav-link">Q&amp;A</a></li>
</ul>
<div class="nav-actions">
<div class="lang-switcher">
<button class="lang-btn" aria-label="Language">
<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="Toggle dark mode">
<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>
@ -183,10 +163,10 @@
</svg>
</div>
</button>
<button class="hamburger" id="hamburger" aria-label="Menu" aria-expanded="false">
<span class="hamburger-line"></span>
<span class="hamburger-line"></span>
<span class="hamburger-line"></span>
<button class="hamburger" aria-label="메뉴 열기" aria-expanded="false" aria-controls="nav-menu">
<span></span>
<span></span>
<span></span>
</button>
</div>
</div>
@ -229,11 +209,11 @@
</ul>
<p>밍글 스튜디오의 경우 <strong>OptiTrack Prime 17 × 16대 + Prime 13 × 14대</strong>, 총 30대를 8m × 7m 공간에 배치하여 360도 사각지대를 최소화하고 있습니다.</p>
<h3>IR 패스 필터 — 적외선만 보는 눈</h3>
<p>모션캡처 카메라 렌즈 앞에는 <strong>IR 패스 필터(적외선 통과 필터)</strong>가 장착되어 있습니다. 이 필터는 가시광선을 차단하고 적외선 파장(850nm 부근)만 통과시킵니다. 덕분에 형광등, 햇빛, 모니터 빛 등 일반 조명에 의한 간섭이 원천 차단되고, 카메라는 오직 <strong>IR LED에 반사된 마커 빛만</strong> 감지할 수 있습니다.</p>
<p>모션캡처 카메라 렌즈 앞에는 **IR 패스 필터(적외선 통과 필터)**가 장착되어 있습니다. 이 필터는 가시광선을 차단하고 적외선 파장(850nm 부근)만 통과시킵니다. 덕분에 형광등, 햇빛, 모니터 빛 등 일반 조명에 의한 간섭이 원천 차단되고, 카메라는 오직 <strong>IR LED에 반사된 마커 빛만</strong> 감지할 수 있습니다.</p>
<p>촬영 공간의 조명을 완전히 끌 필요가 없는 이유도 이 필터 덕분입니다. 다만 직사광선이나 강한 IR 성분을 포함한 조명은 간섭을 일으킬 수 있어, 스튜디오 환경에서는 IR 간섭이 적은 조명을 사용합니다.</p>
<h3>프레임 동기화 — 30대 카메라가 동시에 찍는 법</h3>
<p>삼각측량이 정확하려면 모든 카메라가 <strong>정확히 같은 순간</strong>에 셔터를 눌러야 합니다. 카메라마다 제각각 다른 타이밍에 촬영하면 빠르게 움직이는 마커의 위치가 카메라별로 달라져 3D 복원이 부정확해집니다.</p>
<p>OptiTrack은 <strong>하드웨어 동기화(Hardware Sync)</strong> 방식을 사용합니다. 한 대의 카메라가 <strong>Sync Master(동기 마스터)</strong>로 지정되어 타이밍 신호를 생성하고, 나머지 카메라들이 이 신호에 맞춰 동시에 노출합니다.</p>
<p>OptiTrack은 <strong>하드웨어 동기화(Hardware Sync)</strong> 방식을 사용합니다. 한 대의 카메라가 **Sync Master(동기 마스터)**로 지정되어 타이밍 신호를 생성하고, 나머지 카메라들이 이 신호에 맞춰 동시에 노출합니다.</p>
<ul>
<li><strong>Ethernet 카메라(Prime 시리즈)</strong>: 동기 신호가 이더넷 연결 자체에 내장되어 있거나, OptiTrack의 eSync 허브를 통해 전달됩니다. 별도 동기 케이블이 필요 없습니다.</li>
<li><strong>USB 카메라(Flex 시리즈)</strong>: 카메라 간에 전용 동기 케이블을 데이지 체인으로 연결합니다.</li>
@ -308,7 +288,7 @@
<p><strong>2. 블롭 검출(Blob Detection)</strong>
밝은 픽셀들이 모여 있는 영역(블롭)을 하나의 마커 후보로 인식합니다.</p>
<p><strong>3. 2D 센트로이드 계산</strong>
각 블롭의 <strong>정확한 중심점(센트로이드)</strong>을 서브픽셀 정밀도(약 0.1픽셀)로 계산합니다. 블롭 내 각 픽셀의 밝기를 가중치로 사용하는 가중 평균 방식입니다.</p>
각 블롭의 **정확한 중심점(센트로이드)**을 서브픽셀 정밀도(약 0.1픽셀)로 계산합니다. 블롭 내 각 픽셀의 밝기를 가중치로 사용하는 가중 평균 방식입니다.</p>
<h3>PC로 전송되는 데이터</h3>
<p>기본 트래킹 모드에서 카메라가 PC로 보내는 것은 <strong>2D 센트로이드 데이터</strong>입니다:</p>
<ul>
@ -317,22 +297,22 @@
</ul>
<p>이렇게 작은 데이터량 덕분에 <strong>40대 이상의 카메라가 기가비트 이더넷 하나로도 충분</strong>합니다. 원시 그레이스케일 이미지를 전송할 수도 있지만(디버깅/시각화용), 이 경우 카메라당 수 MB/s가 필요하므로 일반 트래킹에서는 사용하지 않습니다.</p>
<blockquote>
<p>즉, 카메라는 &quot;영상을 찍어서 보내는 장치&quot;가 아니라 <strong>&quot;마커 위치를 계산해서 좌표만 보내는 센서&quot;</strong>에 가깝습니다.</p>
<p>즉, 카메라는 &quot;영상을 찍어서 보내는 장치&quot;가 아니라 **&quot;마커 위치를 계산해서 좌표만 보내는 센서&quot;**에 가깝습니다.</p>
</blockquote>
<p>여기서 한 가지 의문이 들 수 있습니다 — 왜 모션캡처 카메라는 일반 카메라에 비해 그렇게 비쌀까? 이유는 위에서 설명한 과정에 있습니다. 일반 카메라는 찍은 영상을 그대로 보내면 끝이지만, 모션캡처 카메라는 <strong>내부에 전용 프로세서를 탑재</strong>하고 있어서 스레시홀딩, 블롭 검출, 서브픽셀 센트로이드 계산까지 초당 240~360프레임으로 실시간 처리합니다. 카메라 한 대가 사실상 <strong>영상 처리 전용 소형 컴퓨터</strong>를 품고 있는 셈이죠.</p>
<hr>
<h2>4단계: 캘리브레이션 — 카메라의 눈을 정렬하다</h2>
<p>3D 복원을 하기 전에 반드시 거쳐야 하는 과정이 있습니다. 소프트웨어가 각 카메라의 <strong>정확한 위치, 방향, 렌즈 특성</strong>을 파악하는 <strong>캘리브레이션(Calibration)</strong>입니다.</p>
<p>3D 복원을 하기 전에 반드시 거쳐야 하는 과정이 있습니다. 소프트웨어가 각 카메라의 <strong>정확한 위치, 방향, 렌즈 특성</strong>을 파악하는 **캘리브레이션(Calibration)**입니다.</p>
<p><figure class="blog-figure"><img src="optical-mocap-pipeline/images/calibration-tools.webp" alt="캘리브레이션 완드(왼쪽)와 그라운드 플레인 프레임(오른쪽)" loading="lazy"><figcaption>캘리브레이션 완드(왼쪽)와 그라운드 플레인 프레임(오른쪽)</figcaption></figure></p>
<h3>완딩(Wanding) — 공간을 스캔하다</h3>
<p>오퍼레이터가 LED 또는 마커가 부착된 <strong>캘리브레이션 완드(Wand, 막대)</strong>를 들고 캡처 볼륨 전체를 걸어다니며 휘두릅니다. 완드의 마커 간 거리는 정확히 알려져 있기 때문에, 각 카메라가 완드를 수천 프레임 동안 촬영하면 소프트웨어가 다음을 계산할 수 있습니다:</p>
<p>오퍼레이터가 LED 또는 마커가 부착된 **캘리브레이션 완드(Wand, 막대)**를 들고 캡처 볼륨 전체를 걸어다니며 휘두릅니다. 완드의 마커 간 거리는 정확히 알려져 있기 때문에, 각 카메라가 완드를 수천 프레임 동안 촬영하면 소프트웨어가 다음을 계산할 수 있습니다:</p>
<ul>
<li><strong>내부 파라미터(Intrinsic Parameters)</strong> — 초점 거리, 렌즈 왜곡 계수 등 카메라 렌즈 고유의 특성</li>
<li><strong>외부 파라미터(Extrinsic Parameters)</strong> — 3D 공간에서 카메라의 정확한 위치와 방향</li>
</ul>
<p>이 계산에는 <strong>번들 조정(Bundle Adjustment)</strong>이라는 최적화 알고리즘이 사용됩니다. 수천 개의 2D 관측 데이터를 기반으로 모든 카메라의 파라미터를 동시에 최적화하는 과정입니다.</p>
<p>이 계산에는 **번들 조정(Bundle Adjustment)**이라는 최적화 알고리즘이 사용됩니다. 수천 개의 2D 관측 데이터를 기반으로 모든 카메라의 파라미터를 동시에 최적화하는 과정입니다.</p>
<h3>그라운드 플레인 설정</h3>
<p>완딩이 끝나면 바닥에 <strong>L자형 캘리브레이션 프레임(Ground Plane)</strong>을 놓습니다. 이 프레임의 마커 3개 이상이 바닥면과 좌표 원점을 정의합니다:</p>
<p>완딩이 끝나면 바닥에 **L자형 캘리브레이션 프레임(Ground Plane)**을 놓습니다. 이 프레임의 마커 3개 이상이 바닥면과 좌표 원점을 정의합니다:</p>
<ul>
<li>어디가 (0, 0, 0)인지 (원점)</li>
<li>어느 방향이 X, Y, Z 축인지</li>
@ -340,22 +320,22 @@
</ul>
<p>이렇게 캘리브레이션이 완료되면, 소프트웨어는 어떤 카메라의 2D 좌표든 정확한 3D 광선으로 변환할 수 있게 됩니다.</p>
<h3>캘리브레이션 품질</h3>
<p>Motive 소프트웨어는 캘리브레이션 후 각 카메라의 <strong>재투영 오차(Reprojection Error)</strong>를 표시합니다. 이 값이 작을수록(보통 0.5px 이하) 캘리브레이션이 정확하다는 의미입니다. 오차가 큰 카메라는 위치를 조정하거나 재캘리브레이션합니다.</p>
<p>Motive 소프트웨어는 캘리브레이션 후 각 카메라의 **재투영 오차(Reprojection Error)**를 표시합니다. 이 값이 작을수록(보통 0.5px 이하) 캘리브레이션이 정확하다는 의미입니다. 오차가 큰 카메라는 위치를 조정하거나 재캘리브레이션합니다.</p>
<hr>
<h2>5단계: 2D → 3D 복원 (삼각측량)</h2>
<p>PC에 도착한 2D 센트로이드들이 어떻게 3D 좌표로 변환되는지 살펴봅니다.</p>
<h3>삼각측량(Triangulation) 원리</h3>
<ol>
<li>캘리브레이션으로 확보한 각 카메라의 <strong>정확한 3D 위치, 방향, 렌즈 특성</strong>을 활용합니다</li>
<li>카메라의 2D 센트로이드 좌표에서 <strong>광선(Ray)</strong>을 쏩니다 — 카메라 위치에서 센트로이드 방향으로 3D 공간을 향해 뻗어나가는 직선</li>
<li>카메라의 2D 센트로이드 좌표에서 **광선(Ray)**을 쏩니다 — 카메라 위치에서 센트로이드 방향으로 3D 공간을 향해 뻗어나가는 직선</li>
<li>같은 마커를 본 <strong>2대 이상의 카메라에서 쏜 광선들이 교차하는 점</strong>이 곧 마커의 3D 좌표입니다</li>
</ol>
<p><video src="optical-mocap-pipeline/images/continuous-calibration-web.mp4" autoplay loop muted playsinline style="width:100%;border-radius:12px;margin:1.5rem 0;"></video></p>
<h3>실제로는 완벽히 교차하지 않는다</h3>
<p>노이즈, 렌즈 왜곡, 캘리브레이션 오차 등으로 인해 광선들이 정확히 한 점에서 만나는 경우는 거의 없습니다. 그래서 <strong>최소자승법(Least Squares Optimization)</strong>을 사용합니다:</p>
<p>노이즈, 렌즈 왜곡, 캘리브레이션 오차 등으로 인해 광선들이 정확히 한 점에서 만나는 경우는 거의 없습니다. 그래서 **최소자승법(Least Squares Optimization)**을 사용합니다:</p>
<ul>
<li>모든 광선까지의 거리 합이 최소가 되는 3D 좌표를 계산</li>
<li>이때 각 광선과 복원된 3D 점 사이의 거리를 <strong>잔차(Residual)</strong>라고 합니다</li>
<li>이때 각 광선과 복원된 3D 점 사이의 거리를 **잔차(Residual)**라고 합니다</li>
<li>잔차가 작을수록 복원 품질이 좋다는 의미 — 잘 캘리브레이션된 OptiTrack 시스템에서는 <strong>서브밀리미터(0.5mm 이하) 수준의 잔차</strong>를 기대할 수 있습니다</li>
</ul>
<h3>카메라 수의 영향</h3>
@ -397,7 +377,7 @@
<li><strong>Helen Hayes (~15-19 마커)</strong> — 의료/보행 분석 표준. 하체 중심의 최소 마커셋</li>
</ul>
<p>마커는 <strong>뼈가 튀어나온 해부학적 랜드마크</strong>(견봉, 외측 상과, 전상장골극 등)에 부착합니다. 이런 위치는 피부 위에서 뼈의 움직임을 가장 정확히 반영하고, 피부 미끄러짐(Skin Artifact)이 최소화되는 지점입니다.</p>
<p>3D 복원이 끝나면 매 프레임마다 <strong>이름 없는 3D 점들의 구름(Point Cloud)</strong>이 생성됩니다. &quot;이 점이 왼쪽 무릎 마커인지, 오른쪽 어깨 마커인지&quot;를 판별하는 과정이 <strong>라벨링(Labeling)</strong>입니다.</p>
<p>3D 복원이 끝나면 매 프레임마다 **이름 없는 3D 점들의 구름(Point Cloud)**이 생성됩니다. &quot;이 점이 왼쪽 무릎 마커인지, 오른쪽 어깨 마커인지&quot;를 판별하는 과정이 **라벨링(Labeling)**입니다.</p>
<p><figure class="blog-figure"><img src="optical-mocap-pipeline/images/marker-labeling.png" alt="Motive에서 마커가 라벨링된 모습" loading="lazy"><figcaption>Motive에서 마커가 라벨링된 모습</figcaption></figure></p>
<h3>라벨링 알고리즘</h3>
<p><strong>템플릿 매칭(Template Matching)</strong>
@ -455,7 +435,7 @@
<p>촬영 중에는 매 프레임마다:</p>
<ol>
<li>라벨링된 3D 마커 좌표를 받아옴</li>
<li>마커 위치를 기반으로 각 관절의 <strong>3D 위치와 회전값(Rotation)</strong>을 계산</li>
<li>마커 위치를 기반으로 각 관절의 **3D 위치와 회전값(Rotation)**을 계산</li>
<li><strong>역운동학(Inverse Kinematics)</strong> 등의 알고리즘으로 자연스러운 골격 포즈를 산출</li>
<li>결과: 시간축 위의 모든 관절에 대한 <strong>위치(Translation) + 회전(Rotation)</strong> 데이터</li>
</ol>
@ -497,7 +477,7 @@
<p><figure class="blog-figure"><img src="optical-mocap-pipeline/images/post-processing.png" alt="후처리 작업 — Motive에서 모션 데이터를 정리하는 과정" loading="lazy"><figcaption>후처리 작업 — Motive에서 모션 데이터를 정리하는 과정</figcaption></figure></p>
<p>실시간 캡처에서 얻은 데이터는 바로 최종 결과물로 쓸 수 있는 경우도 있지만, 대부분의 프로 작업에서는 <strong>후처리(Post-Processing)</strong> 과정을 거칩니다.</p>
<h3>갭 필링(Gap Filling)</h3>
<p>오클루전으로 인해 마커가 일시적으로 사라진 구간을 <strong>보간(Interpolation)</strong>으로 채우는 작업입니다.</p>
<p>오클루전으로 인해 마커가 일시적으로 사라진 구간을 **보간(Interpolation)**으로 채우는 작업입니다.</p>
<ul>
<li><strong>선형 보간(Linear)</strong> — 단순히 앞뒤 프레임을 직선으로 이음. 짧은 갭에 적합</li>
<li><strong>스플라인 보간(Spline)</strong> — 곡선으로 부드럽게 채움. 자연스러운 동작 유지에 유리</li>
@ -519,7 +499,7 @@
<h2>10단계: 현장에서 자주 발생하는 문제와 대응</h2>
<p>기술적으로 완벽해 보이는 광학식 모캡에도 실무 현장에서 마주치는 문제들이 있습니다.</p>
<h3>반사 노이즈(Stray Reflections)</h3>
<p>마커가 아닌 물체에서 적외선이 반사되어 <strong>가짜 마커(Ghost Marker)</strong>가 검출되는 현상입니다.</p>
<p>마커가 아닌 물체에서 적외선이 반사되어 **가짜 마커(Ghost Marker)**가 검출되는 현상입니다.</p>
<ul>
<li>원인: 금속 표면, 반짝이는 옷, 안경, 시계, 바닥 반사 등</li>
<li>대응: 반사가 일어나는 표면을 무광 테이프로 가리거나, Motive에서 해당 영역을 <strong>마스킹(Masking)</strong> 처리하여 소프트웨어가 무시하도록 설정</li>
@ -575,7 +555,7 @@
</tbody></table>
<p>360fps에서는 노출 시간이 줄어 <strong>7ms 이하</strong>까지 가능합니다. 이 정도 레이턴시면 사람이 체감하기 어려운 수준이며, VTuber 라이브 방송에서도 자연스러운 실시간 반응이 가능합니다.</p>
<blockquote>
<p>참고: 레이턴시의 대부분은 <strong>카메라 노출 시간(프레임 주기)</strong>이 차지합니다. 프레임레이트가 높을수록 레이턴시가 줄어드는 이유입니다.</p>
<p>참고: 레이턴시의 대부분은 **카메라 노출 시간(프레임 주기)**이 차지합니다. 프레임레이트가 높을수록 레이턴시가 줄어드는 이유입니다.</p>
</blockquote>
<hr>
<h2>전체 파이프라인 요약</h2>
@ -663,7 +643,6 @@
<div id="footer-placeholder"></div>
<script src="/js/i18n.js"></script>
<script src="/js/common.js"></script>
</body>
</html>

264
en/404.html
View File

@ -1,264 +0,0 @@
<!DOCTYPE html><html lang="en"><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>404.meta.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 href="https://hangeul.pstatic.net/hangeul_static/css/nanum-square.css" rel="stylesheet">
<!-- CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" integrity="sha512-Avb2QiuDEEvB4bZJYdft2mNjVShBftLGPg8YJ04IY4YZ7C7BC9XkjsTBdQ1B8TAVxT2BOxqIRkVvNs/FNRs0w==" crossorigin="anonymous" referrerpolicy="no-referrer">
<link rel="stylesheet" href="/css/common.css?v=20260313">
<style>
.error-container {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
background: linear-gradient(135deg, #f8fafc 0%, #fff7ed 100%);
padding: var(--spacing-2xl);
}
.error-code {
font-size: 8rem;
font-weight: 800;
background: var(--gradient-main);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: var(--spacing-lg);
line-height: 1;
}
.error-title {
font-size: var(--font-3xl);
color: var(--text-primary);
margin-bottom: var(--spacing-md);
font-weight: 700;
}
.error-description {
font-size: var(--font-lg);
color: var(--text-secondary);
margin-bottom: var(--spacing-2xl);
max-width: 600px;
}
.error-actions {
display: flex;
gap: var(--spacing-md);
flex-wrap: wrap;
justify-content: center;
margin-bottom: var(--spacing-2xl);
}
.search-container {
margin-top: var(--spacing-xl);
max-width: 400px;
width: 100%;
}
.search-input {
width: 100%;
padding: var(--spacing-md) var(--spacing-lg);
border: 2px solid #e5e7eb;
border-radius: var(--border-radius-full);
font-size: var(--font-base);
transition: var(--transition);
}
.search-input:focus {
outline: none;
border-color: var(--primary-color);
}
.helpful-links {
margin-top: var(--spacing-2xl);
text-align: left;
}
.helpful-links h3 {
color: var(--text-primary);
margin-bottom: var(--spacing-md);
font-size: var(--font-xl);
}
.helpful-links ul {
list-style: none;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--spacing-md);
}
.helpful-links li {
background: var(--bg-white);
padding: var(--spacing-md);
border-radius: var(--border-radius);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
.helpful-links a {
color: var(--primary-color);
text-decoration: none;
font-weight: 500;
display: flex;
align-items: center;
gap: var(--spacing-sm);
}
.helpful-links a:hover {
color: var(--primary-hover);
}
/* 다크모드 */
[data-theme="dark"] .error-container {
background: linear-gradient(135deg, var(--dark-bg) 0%, #1a1520 100%);
}
[data-theme="dark"] .error-title {
color: rgba(255, 255, 255, 0.95);
}
[data-theme="dark"] .error-description {
color: rgba(255, 255, 255, 0.65);
}
[data-theme="dark"] .search-input {
background: rgba(255, 255, 255, 0.05);
border-color: var(--glass-border);
color: rgba(255, 255, 255, 0.9);
}
[data-theme="dark"] .search-input::placeholder {
color: rgba(255, 255, 255, 0.35);
}
[data-theme="dark"] .search-input:focus {
border-color: var(--primary-color);
}
[data-theme="dark"] .helpful-links h3 {
color: rgba(255, 255, 255, 0.95);
}
[data-theme="dark"] .helpful-links li {
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--glass-border);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .helpful-links a {
color: var(--primary-color);
}
@media (max-width: 768px) {
.error-code {
font-size: 6rem;
}
.error-title {
font-size: var(--font-2xl);
}
.error-actions {
flex-direction: column;
align-items: center;
}
.helpful-links ul {
grid-template-columns: 1fr;
}
}
</style>
<link rel="alternate" hreflang="ko" href="https://minglestudio.co.kr/404">
<link rel="alternate" hreflang="en" href="https://minglestudio.co.kr/en/404">
<link rel="alternate" hreflang="ja" href="https://minglestudio.co.kr/ja/404">
<link rel="alternate" hreflang="zh" href="https://minglestudio.co.kr/zh/404">
<link rel="alternate" hreflang="x-default" href="https://minglestudio.co.kr/404">
</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) -->
<div class="error-container">
<div class="error-code">404</div>
<h1 class="error-title" data-i18n="error404.title">Page Not Found</h1>
<p class="error-description" data-i18n-html="error404.desc">Sorry, the page you requested does not exist or may have been moved.<br>Please use the links below to find what you're looking for.</p>
<div class="error-actions">
<a href="index.html" class="btn btn-primary btn-lg"><i class="fa-solid fa-house" aria-hidden="true"></i> <span data-i18n="error404.btnHome">Back to Home</span></a>
<a href="contact.html" class="btn btn-outline btn-lg"><i class="fa-solid fa-phone" aria-hidden="true"></i> <span data-i18n="error404.btnContact">Contact Us</span></a>
</div>
<div class="search-container">
<label for="errorSearch" class="sr-only">검색</label>
<input type="text" class="search-input" placeholder="Search for what you need..." id="errorSearch" data-i18n-placeholder="error404.searchPlaceholder">
</div>
<div class="helpful-links">
<h3 data-i18n="error404.helpfulLinks">Helpful Pages</h3>
<ul>
<li><a href="about.html"><i class="fa-solid fa-building" aria-hidden="true"></i> <span data-i18n="error404.linkAbout">About Us</span></a></li>
<li><a href="services.html"><i class="fa-solid fa-clapperboard" aria-hidden="true"></i> <span data-i18n="error404.linkServices">Services</span></a></li>
<li><a href="portfolio.html"><i class="fa-solid fa-bullseye" aria-hidden="true"></i> <span data-i18n="error404.linkPortfolio">Portfolio</span></a></li>
<li><a href="gallery.html"><i class="fa-solid fa-images" aria-hidden="true"></i> <span data-i18n="error404.linkGallery">Studio Gallery</span></a></li>
<li><a href="qna.html"><i class="fa-solid fa-circle-question" aria-hidden="true"></i> <span data-i18n="error404.linkQna">FAQ</span></a></li>
<li><a href="contact.html"><i class="fa-solid fa-envelope" aria-hidden="true"></i> <span data-i18n="error404.linkContact">Contact &amp; Location</span></a></li>
</ul>
</div>
</div>
<script src="/js/i18n.js"></script>
<script src="/js/common.js?v=20260313"></script>
<script>
// 검색 기능
document.getElementById('errorSearch').addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
const query = this.value.trim();
if (query) {
// Q&A 페이지로 검색어와 함께 이동
window.location.href = `qna.html?search=${encodeURIComponent(query)}`;
}
}
});
</script>
</body></html>

423
en/about.html
View File

@ -1,423 +0,0 @@
<!DOCTYPE html><html lang="en"><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>About Us - 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/en/about">
<!-- Theme Color -->
<meta name="theme-color" content="#ff8800">
<!-- SEO 메타 태그 -->
<meta name="description" content="Mingle Studio is a motion capture creative space where technology and creativity come together. Founded in 2025, located in Incheon Techno Valley.">
<meta name="keywords" content="밍글스튜디오, 회사소개, 모션캡쳐, 창작공간, 버추얼콘텐츠">
<meta name="author" content="밍글 스튜디오">
<!-- Open Graph -->
<meta property="og:title" content="About Us - Mingle Studio">
<meta property="og:description" content="Incheon's only professional motion capture studio, founded in 2025. A virtual content creative space where technology and creativity converge.">
<meta property="og:url" content="https://minglestudio.co.kr/about">
<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?v=20260313">
<link rel="stylesheet" href="/css/about.css">
<link rel="alternate" hreflang="ko" href="https://minglestudio.co.kr/about">
<link rel="alternate" hreflang="en" href="https://minglestudio.co.kr/en/about">
<link rel="alternate" hreflang="ja" href="https://minglestudio.co.kr/ja/about">
<link rel="alternate" hreflang="zh" href="https://minglestudio.co.kr/zh/about">
<link rel="alternate" hreflang="x-default" href="https://minglestudio.co.kr/about">
</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">Skip to content</a>
<!-- 헤더 -->
<div id="header-placeholder">
<!-- 공통 헤더 컴포넌트 -->
<nav class="navbar" aria-label="메인 내비게이션">
<div class="nav-container">
<div class="nav-logo">
<a href="/en/">
<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="/en/about" class="nav-link" data-i18n="header.nav.about">About</a></li>
<li><a href="/en/services" class="nav-link" data-i18n="header.nav.services">Services</a></li>
<li><a href="/en/portfolio" class="nav-link" data-i18n="header.nav.portfolio">Portfolio</a></li>
<li><a href="/en/gallery" class="nav-link" data-i18n="header.nav.gallery">Gallery</a></li>
<li><a href="/schedule" class="nav-link" data-i18n="header.nav.schedule">Schedule</a></li>
<li><a href="/devlog" class="nav-link" data-i18n="header.nav.devlog">DevLog</a></li>
<li><a href="/en/contact" class="nav-link" data-i18n="header.nav.contact">Contact</a></li>
<li><a href="/en/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="Select language" 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">A space where technology, creativity, and passion blend to create new value</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">Company Name</h3>
<p data-i18n="about.info.companyNameValue">Mingle Studio</p>
</div>
<div class="info-item">
<h3 data-i18n="about.info.foundingDate">Founded</h3>
<p data-i18n="about.info.foundingDateValue">July 15, 2025</p>
</div>
<div class="info-item">
<h3 data-i18n="about.info.slogan">Slogan</h3>
<p data-i18n="about.info.sloganValue">"A joyful creative space where everyone comes together"</p>
</div>
<div class="info-item full-width">
<h3 data-i18n="about.info.meaning">Meaning</h3>
<p data-i18n="about.info.meaningValue">Mingle Studio is a virtual content production space where technicians, creators, and audiences come together. Using cutting-edge optical motion capture technology, we bring virtual characters to life with vivid emotions and movement, realizing a new generation of digital performance.</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">Company Introduction</h2>
<p data-i18n="about.companyIntro.desc1">Mingle Studio is a motion capture-based creative space that produces new content through the 'mingling' of creators, technology, and people.</p>
<p data-i18n="about.companyIntro.desc2">Since our founding, we have provided a virtual content production environment centered on an easy-to-use studio rental service that anyone can access.</p>
</div>
<div class="card card--flat reveal" data-reveal="fade">
<h2 data-i18n="about.visionMission.title">Vision &amp; Mission</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">Vision</span></h3>
<p data-i18n="about.visionMission.visionDesc">Building a creative ecosystem where every creator can turn imagination into reality without technical limitations</p>
</div>
<div class="vm-item">
<h3><i class="fa-solid fa-rocket" aria-hidden="true"></i> <span data-i18n="about.visionMission.missionTitle">Mission</span></h3>
<p data-i18n="about.visionMission.missionDesc">Transforming creators' ideas into vivid content through cutting-edge motion capture technology, delivering new digital experiences</p>
</div>
</div>
</div>
<div class="card card--flat reveal" data-reveal="fade">
<h2 data-i18n="about.history.title">History</h2>
<div class="timeline">
<div class="timeline-item">
<div class="timeline-date" data-i18n="about.history.date1">July 15, 2025</div>
<div class="timeline-content">
<h4 data-i18n="about.history.event1Title">Mingle Studio Founded</h4>
<p data-i18n="about.history.event1Desc">Company establishment</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-date" data-i18n="about.history.date2">August 1, 2025</div>
<div class="timeline-content">
<h4 data-i18n="about.history.event2Title">Studio Grand Opening</h4>
<p data-i18n="about.history.event2Desc">OptiTrack system installation completed and studio rental service launched</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">Experts from diverse fields collaborate to support content production</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 Artist</p>
<p class="team-desc" data-i18n="about.team.member1Desc">Environment/resource production, HR and project management</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 / Technical Director</p>
<p class="team-desc" data-i18n="about.team.member2Desc">Studio technical operations, motion capture equipment management, audio systems, engine programming</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 / Content Director</p>
<p class="team-desc" data-i18n="about.team.member3Desc">Capture directing, motion cleanup, camera movement, performance direction</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">Creators who produce content with 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">A virtual streamer showcasing diverse content including chat streams, singing, gaming, and VRChat. Actively broadcasting on SOOP, they create new virtual content powered by Mingle Studio's motion capture technology.</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">The core values that Mingle Studio pursues</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">Collaboration</h3>
<p data-i18n="about.values.collaborationDesc">Synergy created by technicians and creators working together</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">Innovation</h3>
<p data-i18n="about.values.innovationDesc">Pioneering new creative possibilities with the latest technology</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">Creativity</h3>
<p data-i18n="about.values.creativityDesc">Creative solutions that turn imagination into reality</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">Quality</h3>
<p data-i18n="about.values.qualityDesc">Pursuing the highest standard of motion capture quality</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">Company Info</h3>
<ul class="footer-list">
<li><strong data-i18n="footer.companyName">Mingle Studio</strong></li>
<li data-i18n="footer.ceo">CEO: 김희진</li>
<li data-i18n="footer.businessNumber">Business Registration No.: 208-12-73755</li>
</ul>
</div>
<div class="footer-section">
<h3 class="footer-heading" data-i18n="footer.contact">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">Business Inquiry</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">Reservation Inquiry</span></a></li>
</ul>
</div>
<div class="footer-section">
<h3 class="footer-heading" data-i18n="footer.directions">Directions</h3>
<ul class="footer-list">
<li><i class="fa-solid fa-location-dot" aria-hidden="true"></i> <span data-i18n="footer.address">236, Jubuto-ro, Bupyeong-gu, Incheon</span></li>
<li data-i18n="footer.addressDetail">Incheon Techno Valley U1 Center, Bldg. A, Room 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> minglestudio@minglestudio.co.kr</a></li>
<li><a href="mailto:help@minglestudio.co.kr"><i class="fa-solid fa-envelope" aria-hidden="true"></i> help@minglestudio.co.kr</a></li>
<li><a href="https://discord.com/users/1402264505110495354" target="_blank"><i class="fa-brands fa-discord" aria-hidden="true"></i> minglestudio_mocap</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?v=20260313"></script>
</body></html>

257
en/backgrounds.html
View File

@ -1,257 +0,0 @@
<!DOCTYPE html><html lang="en"><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>backgrounds.meta.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">
<!-- Theme Color -->
<meta name="theme-color" content="#ff8800">
<!-- SEO -->
<meta name="description" content="backgrounds.meta.description">
<meta name="robots" content="noindex, nofollow">
<!-- 폰트 -->
<link href="https://hangeul.pstatic.net/hangeul_static/css/nanum-square.css" rel="stylesheet">
<!-- CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" integrity="sha512-Avb2QiuDEEvB4bZJYdft2mNjVShBftLGPg8YJ04IY4YZ7C7BC9XkjsTBdQ1B8TAVxT2BOxqIRkVvNs/FNRs0w==" crossorigin="anonymous" referrerpolicy="no-referrer">
<link rel="stylesheet" href="/css/common.css?v=20260313">
<link rel="stylesheet" href="/css/backgrounds.css">
<link rel="alternate" hreflang="ko" href="https://minglestudio.co.kr/backgrounds">
<link rel="alternate" hreflang="en" href="https://minglestudio.co.kr/en/backgrounds">
<link rel="alternate" hreflang="ja" href="https://minglestudio.co.kr/ja/backgrounds">
<link rel="alternate" hreflang="zh" href="https://minglestudio.co.kr/zh/backgrounds">
<link rel="alternate" hreflang="x-default" href="https://minglestudio.co.kr/backgrounds">
</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) -->
<!-- 헤더 -->
<div id="header-placeholder">
<!-- 공통 헤더 컴포넌트 -->
<nav class="navbar" aria-label="메인 내비게이션">
<div class="nav-container">
<div class="nav-logo">
<a href="/en/">
<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="/en/about" class="nav-link" data-i18n="header.nav.about">About</a></li>
<li><a href="/en/services" class="nav-link" data-i18n="header.nav.services">Services</a></li>
<li><a href="/en/portfolio" class="nav-link" data-i18n="header.nav.portfolio">Portfolio</a></li>
<li><a href="/en/gallery" class="nav-link" data-i18n="header.nav.gallery">Gallery</a></li>
<li><a href="/schedule" class="nav-link" data-i18n="header.nav.schedule">Schedule</a></li>
<li><a href="/devlog" class="nav-link" data-i18n="header.nav.devlog">DevLog</a></li>
<li><a href="/en/contact" class="nav-link" data-i18n="header.nav.contact">Contact</a></li>
<li><a href="/en/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="Select language" 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 class="backgrounds-page">
<div class="container">
<!-- 페이지 헤더 -->
<div class="page-header">
<h1>배경 씬 라이브러리</h1>
<p class="page-description">모션캡처 라이브 방송 서비스에서 사용 가능한 배경 씬 목록입니다</p>
<div class="last-updated" id="lastUpdated"></div>
</div>
<!-- 필터 & 검색 -->
<div class="filter-section">
<div class="search-box">
<input type="text" id="searchInput" placeholder="배경 이름으로 검색..." class="search-input">
<span class="search-icon"><i class="fa-solid fa-magnifying-glass" aria-hidden="true"></i></span>
</div>
<div class="filter-tags" id="filterTags">
<button class="filter-tag active" data-tag="all">전체</button>
<!-- 태그 버튼들이 동적으로 추가됨 -->
</div>
<div class="view-options">
<button class="view-btn active" data-view="grid" title="그리드 보기">
<span>▦</span>
</button>
<button class="view-btn" data-view="list" title="리스트 보기">
<span>☰</span>
</button>
</div>
</div>
<!-- 통계 -->
<div class="stats-bar">
<span class="stat-item">
<strong id="totalCount">0</strong>개 배경
</span>
<span class="stat-item">
<strong id="filteredCount">0</strong>개 표시 중
</span>
</div>
<!-- 배경 그리드 -->
<div class="backgrounds-grid" id="backgroundsGrid">
<!-- 배경 카드들이 동적으로 추가됨 -->
<div class="loading-placeholder">
<div class="loading-spinner"></div>
<p>배경 데이터를 불러오는 중...</p>
</div>
</div>
<!-- 데이터 없음 메시지 -->
<div class="no-data" id="noData" style="display: none;">
<div class="no-data-icon"><i class="fa-solid fa-box-open" aria-hidden="true"></i></div>
<h3>배경 데이터가 없습니다</h3>
<p>Unity에서 배경 데이터를 업로드해 주세요.</p>
</div>
<!-- 검색 결과 없음 -->
<div class="no-results" id="noResults" style="display: none;">
<div class="no-results-icon"><i class="fa-solid fa-magnifying-glass" aria-hidden="true"></i></div>
<h3>검색 결과가 없습니다</h3>
<p>다른 검색어나 필터를 시도해 보세요.</p>
</div>
</div>
</main>
<!-- 이미지 모달 -->
<div class="image-modal" id="imageModal">
<div class="modal-overlay"></div>
<div class="modal-content">
<button class="modal-close" aria-label="닫기">×</button>
<img src="" alt="" class="modal-image" id="modalImage">
<div class="modal-info">
<h3 id="modalTitle"></h3>
<p id="modalCategory"></p>
<div class="modal-tags" id="modalTags"></div>
</div>
</div>
</div>
<!-- 푸터 -->
<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">Company Info</h3>
<ul class="footer-list">
<li><strong data-i18n="footer.companyName">Mingle Studio</strong></li>
<li data-i18n="footer.ceo">CEO: 김희진</li>
<li data-i18n="footer.businessNumber">Business Registration No.: 208-12-73755</li>
</ul>
</div>
<div class="footer-section">
<h3 class="footer-heading" data-i18n="footer.contact">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">Business Inquiry</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">Reservation Inquiry</span></a></li>
</ul>
</div>
<div class="footer-section">
<h3 class="footer-heading" data-i18n="footer.directions">Directions</h3>
<ul class="footer-list">
<li><i class="fa-solid fa-location-dot" aria-hidden="true"></i> <span data-i18n="footer.address">236, Jubuto-ro, Bupyeong-gu, Incheon</span></li>
<li data-i18n="footer.addressDetail">Incheon Techno Valley U1 Center, Bldg. A, Room 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>
<!-- 백업 푸터 -->
<footer class="site-footer">
<div class="container">
<div style="color:#bbb;font-size:0.98rem;">© 2025 밍글 스튜디오. All rights reserved.</div>
</div>
</footer>
<!-- JavaScript -->
<script src="/js/common.js?v=20260313"></script>
<script src="/js/backgrounds.js"></script>
</body></html>

528
en/contact.html
View File

@ -1,528 +0,0 @@
<!DOCTYPE html><html lang="en"><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>Contact Us - 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/en/contact">
<!-- Theme Color -->
<meta name="theme-color" content="#ff8800">
<!-- SEO 메타 태그 -->
<meta name="description" content="Contact Mingle Studio - Inquiries for motion capture studio rental, shooting, production, and consultation">
<meta name="keywords" content="모션캡쳐 문의, 스튜디오 대관, 촬영 문의, 버튜버 제작, 3D 모션 상담">
<meta name="author" content="밍글 스튜디오">
<!-- Open Graph -->
<meta property="og:title" content="Contact Us - Mingle Studio">
<meta property="og:description" content="Inquiries for motion capture studio rental, shooting, and production. OptiTrack professional studio located in Incheon Techno Valley.">
<meta property="og:url" content="https://minglestudio.co.kr/contact">
<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="모션캡처 스튜디오 대관, 촬영, 제작 관련 문의 및 상담. 인천 테크노밸리 소재 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">
<!-- 폰트 -->
<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?v=20260313">
<link rel="stylesheet" href="/css/contact.css">
<link rel="alternate" hreflang="ko" href="https://minglestudio.co.kr/contact">
<link rel="alternate" hreflang="en" href="https://minglestudio.co.kr/en/contact">
<link rel="alternate" hreflang="ja" href="https://minglestudio.co.kr/ja/contact">
<link rel="alternate" hreflang="zh" href="https://minglestudio.co.kr/zh/contact">
<link rel="alternate" hreflang="x-default" href="https://minglestudio.co.kr/contact">
</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">Skip to content</a>
<!-- 헤더 -->
<div id="header-placeholder">
<!-- 공통 헤더 컴포넌트 -->
<nav class="navbar" aria-label="메인 내비게이션">
<div class="nav-container">
<div class="nav-logo">
<a href="/en/">
<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="/en/about" class="nav-link" data-i18n="header.nav.about">About</a></li>
<li><a href="/en/services" class="nav-link" data-i18n="header.nav.services">Services</a></li>
<li><a href="/en/portfolio" class="nav-link" data-i18n="header.nav.portfolio">Portfolio</a></li>
<li><a href="/en/gallery" class="nav-link" data-i18n="header.nav.gallery">Gallery</a></li>
<li><a href="/schedule" class="nav-link" data-i18n="header.nav.schedule">Schedule</a></li>
<li><a href="/devlog" class="nav-link" data-i18n="header.nav.devlog">DevLog</a></li>
<li><a href="/en/contact" class="nav-link" data-i18n="header.nav.contact">Contact</a></li>
<li><a href="/en/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="Select language" 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="contact.pageHeader.title">Contact Us</h1>
<p data-i18n="contact.pageHeader.desc">Start your next project with Mingle Studio</p>
</div>
</section>
<!-- 연락처 정보 -->
<section class="section">
<div class="container">
<div class="contact-info-grid stagger-children">
<div class="contact-card reveal" data-reveal="up">
<div class="contact-icon"><i class="fa-solid fa-phone" aria-hidden="true"></i></div>
<h3 data-i18n="contact.phone.title">Phone</h3>
<p data-i18n="contact.phone.desc">Available 24 hours</p>
<a href="tel:+82-10-9288-9190" class="contact-link">010-9288-9190</a>
</div>
<div class="contact-card reveal" data-reveal="up">
<div class="contact-icon"><i class="fa-solid fa-briefcase" aria-hidden="true"></i></div>
<h3 data-i18n="contact.business.title">Business Inquiry</h3>
<p data-i18n="contact.business.desc">Partnerships and collaboration</p>
<a href="mailto:minglestudio@minglestudio.co.kr" class="contact-link">minglestudio@minglestudio.co.kr</a>
</div>
<div class="contact-card reveal" data-reveal="up">
<div class="contact-icon"><i class="fa-solid fa-envelope" aria-hidden="true"></i></div>
<h3 data-i18n="contact.reservation.title">Reservations &amp; Inquiries</h3>
<p data-i18n="contact.reservation.desc">Accepting inquiries 24 hours</p>
<a href="mailto:help@minglestudio.co.kr" class="contact-link">help@minglestudio.co.kr</a>
</div>
<div class="contact-card reveal" data-reveal="up">
<div class="contact-icon"><i class="fa-brands fa-discord" aria-hidden="true"></i></div>
<h3 data-i18n="contact.discord.title">Discord</h3>
<p data-i18n="contact.discord.desc">Live chat inquiry</p>
<a href="https://discord.com/users/1402264505110495354" target="_blank" class="contact-link">minglestudio_mocap</a>
</div>
<div class="contact-card reveal" data-reveal="up">
<div class="contact-icon"><i class="fa-solid fa-comment" aria-hidden="true" style="color: #FEE500"></i></div>
<h3 data-i18n="contact.kakao.title">KakaoTalk</h3>
<p data-i18n="contact.kakao.desc">Open Chat Consultation</p>
<a href="https://open.kakao.com/o/sXOK0Iji" target="_blank" class="contact-link" data-i18n="contact.kakao.link">KakaoTalk Consultation</a>
</div>
</div>
</div>
</div>
</section>
<!-- 온라인 문의 폼 -->
<section class="section">
<div class="container">
<div class="section-header">
<h2 data-i18n="contact.form.title">Online Inquiry</h2>
<p data-i18n="contact.form.desc">Fill out the form below and we'll get back to you promptly</p>
</div>
<div class="contact-form-wrapper">
<form id="contactForm" class="contact-form" novalidate>
<div class="form-row">
<div class="form-group">
<label for="name" data-i18n="contact.form.name">Name <span class="required">*</span></label>
<input type="text" id="name" name="name" required placeholder="John Doe" data-i18n-placeholder="contact.form.namePlaceholder">
</div>
<div class="form-group">
<label for="email" data-i18n="contact.form.email">Email <span class="required">*</span></label>
<input type="email" id="email" name="email" required placeholder="example@email.com">
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="phone" data-i18n="contact.form.phone">Phone</label>
<input type="tel" id="phone" name="phone" placeholder="010-0000-0000">
</div>
<div class="form-group">
<label for="service" data-i18n="contact.form.service">Inquiry Type <span class="required">*</span></label>
<select id="service" name="service" required>
<option value="" data-i18n="contact.form.serviceDefault">Please select</option>
<option value="studio_rental" data-i18n="contact.form.serviceRental">Studio Rental</option>
<option value="motion_recording" data-i18n="contact.form.serviceMotion">Motion Recording</option>
<option value="music_video" data-i18n="contact.form.serviceMV">Music Video Production</option>
<option value="partnership" data-i18n="contact.form.servicePartner">Partnership</option>
<option value="other" data-i18n="contact.form.serviceOther">Other</option>
</select>
</div>
</div>
<div class="form-group">
<label for="message" data-i18n="contact.form.message">Message <span class="required">*</span></label>
<textarea id="message" name="message" required rows="5" placeholder="Please describe your project, preferred schedule, etc." data-i18n-placeholder="contact.form.messagePlaceholder"></textarea>
<p class="field-hint" data-i18n="contact.form.sensitiveWarning">※ Please do not enter sensitive personal information such as ID numbers or bank account numbers.</p>
</div>
<div class="checkbox-group">
<label class="checkbox-label">
<input type="checkbox" id="privacyConsent" name="privacyConsent" required>
<span class="checkmark"></span>
<span data-i18n="contact.form.privacyAgree">I agree to the collection and use of personal information. (Required)</span>
</label>
<a href="javascript:void(0)" class="privacy-link" onclick="openPrivacyModal()" data-i18n="contact.form.privacyView">View Privacy Policy</a>
</div>
<div class="privacy-summary">
<ul>
<li data-i18n="contact.form.privacyPurpose">Purpose: Inquiry reception and response</li>
<li data-i18n="contact.form.privacyItems">Items: Name, email, phone number, inquiry details</li>
<li data-i18n="contact.form.privacyPeriod">Retention: Auto-deleted after 7 days</li>
</ul>
</div>
<div class="form-submit">
<button type="submit" id="submitBtn" class="btn btn-primary btn-lg btn-submit-disabled" disabled data-i18n="contact.form.submit">Send Inquiry</button>
<button type="reset" class="btn btn-outline btn-lg" data-i18n="contact.form.reset">Reset</button>
</div>
</form>
</div>
</div>
</section>
<!-- 개인정보처리방침 모달 -->
<div id="privacyModal" class="modal" onclick="if(event.target===this)closePrivacyModal()" role="dialog" aria-modal="true" aria-labelledby="privacyModalTitle">
<div class="modal-content">
<div class="modal-header">
<h3 id="privacyModalTitle">Consent to Collection and Use of Personal Information</h3>
<button class="modal-close" onclick="closePrivacyModal()" aria-label="Close">&times;</button>
</div>
<div class="modal-body">
<p>Mingle Studio (hereinafter "the Company") seeks your consent for the collection and use of personal information in accordance with the Personal Information Protection Act (PIPA) of South Korea.</p>
<h4>1. Purpose of Collection and Use</h4>
<p>The Company processes personal information for the following purposes:</p>
<ul>
<li>Receiving and responding to customer inquiries</li>
<li>Service consultation and quotation guidance</li>
<li>Notification of inquiry processing results</li>
</ul>
<h4>2. Items of Personal Information Collected</h4>
<ul>
<li><strong>Required:</strong> Name, email address, inquiry type, message</li>
<li><strong>Optional:</strong> Phone number</li>
</ul>
<p style="color: #ef4444; font-size: 0.85rem;">※ Please do not include sensitive personal information such as national ID numbers or bank account numbers in your inquiry.</p>
<h4>3. Retention and Use Period</h4>
<p>Collected personal information is retained for <strong>7 days from the date of inquiry</strong> and is automatically destroyed after the retention period. However, if there is an obligation to preserve under relevant laws, it will be preserved for the period prescribed by such laws.</p>
<h4>4. Destruction Procedure and Method</h4>
<ul>
<li><strong>Procedure:</strong> Personal information that has exceeded the retention period is destroyed without delay by an automated deletion system.</li>
<li><strong>Method:</strong> Electronic file information is completely deleted so that it cannot be recovered or reproduced.</li>
</ul>
<h4>5. Provision to Third Parties and Overseas Transfer</h4>
<p>The Company does not provide personal information to third parties in principle. However, for inquiry processing, personal information is transferred overseas as follows (pursuant to Article 28-8 of PIPA):</p>
<ul>
<li><strong>Country and recipient:</strong> United States / Discord Inc.</li>
<li><strong>Timing and method:</strong> Real-time transmission via dedicated API (internet network) upon inquiry submission</li>
<li><strong>Items transferred:</strong> Name, email, phone number (optional), inquiry type, message</li>
<li><strong>Purpose:</strong> Prompt inquiry confirmation and response via collaboration tool (Discord)</li>
<li><strong>Retention and use period:</strong> Stored for 7 days after transmission, then automatically destroyed</li>
</ul>
<h4>6. Rights of Data Subjects</h4>
<p>Users may exercise the following rights as data subjects:</p>
<ul>
<li>Request to access personal information</li>
<li>Request correction of errors</li>
<li>Request deletion</li>
<li>Request suspension of processing</li>
</ul>
<p>These rights can be exercised by contacting the Personal Information Protection Officer below, and the Company will take action without delay.</p>
<h4>7. Safety Measures</h4>
<p>The Company takes the following measures to ensure the safety of personal information:</p>
<ul>
<li>Data transmission encryption (HTTPS/TLS)</li>
<li>Access restriction (only designated administrators can view)</li>
<li>Automated deletion system (destroyed after 7 days)</li>
</ul>
<h4>8. Right to Refuse Consent</h4>
<p>Users have the right to refuse consent to the collection and use of personal information. However, refusal of consent for required items will restrict the use of the inquiry service.</p>
<h4>9. Personal Information Protection Officer</h4>
<ul>
<li><strong>Name:</strong> Kim Heejin</li>
<li><strong>Position:</strong> CEO</li>
<li><strong>Email:</strong> minglestudio@minglestudio.co.kr</li>
<li><strong>Phone:</strong> +82-10-9288-9190</li>
</ul>
<h4>10. Changes to This Policy</h4>
<p>This privacy policy is effective from March 4, 2026. Any changes will be announced through this website.</p>
</div>
</div>
</div>
<script>
function openPrivacyModal() {
var m = document.getElementById('privacyModal');
if (!m) return;
m.classList.add('active');
m.style.display = 'flex';
document.body.style.overflow = 'hidden';
}
function closePrivacyModal() {
var m = document.getElementById('privacyModal');
if (!m) return;
m.classList.remove('active');
m.style.display = '';
document.body.style.overflow = '';
}
// 체크박스 → 제출 버튼 활성화
document.addEventListener('DOMContentLoaded', function() {
var cb = document.getElementById('privacyConsent');
var btn = document.getElementById('submitBtn');
if (cb && btn) {
cb.addEventListener('change', function() {
btn.disabled = !cb.checked;
btn.classList.toggle('btn-submit-disabled', !cb.checked);
});
}
});
</script>
<!-- 위치 정보 -->
<section id="location" class="section">
<div class="container">
<div class="section-header">
<h2 data-i18n="contact.location.title">Studio Location</h2>
</div>
<div class="location-wrapper">
<div class="location-info">
<div class="location-details">
<h3><i class="fa-solid fa-location-dot" aria-hidden="true"></i> <span data-i18n="contact.location.address">Address</span></h3>
<p data-i18n-html="contact.location.addressValue">(21330) 236, Jubuto-ro, Bupyeong-gu, Incheon<br>Incheon Techno Valley U1 Center, Bldg. A, Room B105</p>
<h3><i class="fa-solid fa-train-subway" aria-hidden="true"></i> <span data-i18n="contact.location.subway">Subway</span></h3>
<ul>
<li data-i18n="contact.location.subwayDesc">Incheon Line 7, Galsan Station → approx. 7 min walk</li>
</ul>
<h3><i class="fa-solid fa-bus" aria-hidden="true"></i> <span data-i18n="contact.location.bus">Bus</span></h3>
<ul>
<li data-i18n="contact.location.busStop">Galsan Market/Galsan Library bus stop</li>
<li data-i18n="contact.location.busRoutes">Bus No. 4, 526, 555</li>
</ul>
<h3><i class="fa-solid fa-car" aria-hidden="true"></i> <span data-i18n="contact.location.parking">Parking</span></h3>
<p data-i18n="contact.location.parkingDesc">2 hours free, up to 4 hours free when using building facilities</p>
<h3><i class="fa-solid fa-clock" aria-hidden="true"></i> <span data-i18n="contact.location.hours">Operating Hours</span></h3>
<ul>
<li data-i18n="contact.location.hours24">Open 24 Hours</li>
<li data-i18n="contact.location.hoursAllYear">Open Year-Round</li>
</ul>
</div>
<div class="location-map">
<div id="map" class="map-container">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d1012.8014347878724!2d126.6649476!3d37.5078124!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6f4c35884c93c281%3A0x1a65ba0583486105!2z67CN6riAIOyKpO2KnOuUlOyYpA!5e0!3m2!1sko!2skr!4v1759144450469!5m2!1sko!2skr" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade" title="밍글 스튜디오 위치 - 구글 지도">
</iframe>
</div>
<div class="map-buttons">
<a href="https://map.naver.com/p/search/밍글스튜디오" target="_blank" class="btn btn-outline" data-i18n="contact.location.naverMap">Naver Map</a>
<a href="https://maps.app.goo.gl/ioGQR4ZEsuGToRnb9" target="_blank" class="btn btn-outline" data-i18n="contact.location.googleMap">Google Maps</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 예약 및 FAQ -->
<section class="section bg-gradient">
<div class="container text-center">
<h2 data-i18n="contact.cta.title">Reservations &amp; Inquiries</h2>
<p data-i18n="contact.cta.desc">Make an easy online reservation or check our frequently asked questions</p>
<div class="cta-buttons">
<a href="/en/schedule" class="btn btn-outline btn-lg" data-i18n="contact.cta.btnSchedule"><i class="fa-regular fa-calendar-check"></i> Availability</a>
<a href="qna.html" class="btn btn-outline btn-lg" data-i18n="contact.cta.btnFaq">View FAQ</a>
</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">Company Info</h3>
<ul class="footer-list">
<li><strong data-i18n="footer.companyName">Mingle Studio</strong></li>
<li data-i18n="footer.ceo">CEO: 김희진</li>
<li data-i18n="footer.businessNumber">Business Registration No.: 208-12-73755</li>
</ul>
</div>
<div class="footer-section">
<h3 class="footer-heading" data-i18n="footer.contact">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">Business Inquiry</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">Reservation Inquiry</span></a></li>
</ul>
</div>
<div class="footer-section">
<h3 class="footer-heading" data-i18n="footer.directions">Directions</h3>
<ul class="footer-list">
<li><i class="fa-solid fa-location-dot" aria-hidden="true"></i> <span data-i18n="footer.address">236, Jubuto-ro, Bupyeong-gu, Incheon</span></li>
<li data-i18n="footer.addressDetail">Incheon Techno Valley U1 Center, Bldg. A, Room 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> minglestudio@minglestudio.co.kr</a></li>
<li><a href="mailto:help@minglestudio.co.kr"><i class="fa-solid fa-envelope" aria-hidden="true"></i> help@minglestudio.co.kr</a></li>
<li><a href="https://discord.com/users/1402264505110495354" target="_blank"><i class="fa-brands fa-discord" aria-hidden="true"></i> minglestudio_mocap</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?v=20260313"></script>
<script src="/js/contact.js"></script>
</body></html>

187
en/devlog.html
View File

@ -1,187 +0,0 @@
<!DOCTYPE html><html lang="en"><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>DevLog - 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/en/devlog">
<!-- Theme Color -->
<meta name="theme-color" content="#ff8800">
<!-- SEO 메타 태그 -->
<meta name="description" content="Mingle Studio DevLog - Sharing motion capture technology, creative process, and virtual content production stories.">
<meta name="keywords" content="Mingle Studio, devlog, motion capture, virtual content, VTuber, mocap technology">
<meta name="author" content="Mingle Studio">
<!-- Open Graph -->
<meta property="og:title" content="DevLog - Mingle Studio">
<meta property="og:description" content="Sharing motion capture technology and our creative process. Latest news and tech stories from Mingle Studio.">
<meta property="og:url" content="https://minglestudio.co.kr/en/devlog">
<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="en_US">
<meta property="og:site_name" content="Mingle Studio">
<meta property="og:image:alt" content="Mingle Studio - DevLog">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="DevLog - Mingle Studio">
<meta name="twitter:description" content="Sharing motion capture technology and our creative process. Latest news and tech stories from Mingle Studio.">
<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?v=20260404">
<link rel="stylesheet" href="/css/devlog.css?v=20260404">
<link rel="alternate" hreflang="ko" href="https://minglestudio.co.kr/devlog">
<link rel="alternate" hreflang="en" href="https://minglestudio.co.kr/en/devlog">
<link rel="alternate" hreflang="ja" href="https://minglestudio.co.kr/ja/devlog">
<link rel="alternate" hreflang="zh" href="https://minglestudio.co.kr/zh/devlog">
<link rel="alternate" hreflang="x-default" href="https://minglestudio.co.kr/devlog">
<!-- JSON-LD 구조화 데이터 -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Blog",
"name": "Mingle Studio DevLog",
"description": "Sharing motion capture technology and our creative process",
"url": "https://minglestudio.co.kr/en/devlog",
"publisher": {
"@type": "Organization",
"name": "Mingle Studio",
"logo": {
"@type": "ImageObject",
"url": "https://minglestudio.co.kr/images/logo/mingle-logo.webp"
}
},
"inLanguage": "en"
}
</script>
</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">Skip to content</a>
<!-- 헤더 -->
<div id="header-placeholder">
<!-- 공통 헤더 컴포넌트 -->
<nav class="navbar" aria-label="Main navigation">
<div class="nav-container">
<div class="nav-logo">
<a href="/en/">
<img src="/images/logo/mingle-logo.webp" alt="Mingle Studio Logo">
<span data-i18n="header.studioName">Mingle Studio</span>
</a>
</div>
<ul id="nav-menu" class="nav-menu">
<li><a href="/en/about" class="nav-link" data-i18n="header.nav.about">About</a></li>
<li><a href="/en/services" class="nav-link" data-i18n="header.nav.services">Services</a></li>
<li><a href="/en/portfolio" class="nav-link" data-i18n="header.nav.portfolio">Portfolio</a></li>
<li><a href="/en/gallery" class="nav-link" data-i18n="header.nav.gallery">Gallery</a></li>
<li><a href="/schedule" class="nav-link" data-i18n="header.nav.schedule">Schedule</a></li>
<li><a href="/en/devlog" class="nav-link active" data-i18n="header.nav.devlog">DevLog</a></li>
<li><a href="/en/contact" class="nav-link" data-i18n="header.nav.contact">Contact</a></li>
<li><a href="/en/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="Select language" 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="Toggle dark mode" title="Toggle dark/light mode">
<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="Open menu" aria-expanded="false" aria-controls="nav-menu">
<span></span>
<span></span>
<span></span>
</button>
</div>
</nav>
</div>
<main id="main-content">
<section class="blog-hero">
<div class="container">
<h1>DevLog</h1>
<p>Sharing motion capture technology and our creative process</p>
</div>
</section>
<section class="blog-list-section">
<div id="blogFilters" class="blog-filters"></div>
<div id="blogLoading" class="blog-loading">
<div class="loading-spinner"></div>
</div>
<div id="blogGrid" class="blog-grid"></div>
</section>
</main>
<!-- 푸터 -->
<div id="footer-placeholder"></div>
<!-- JavaScript -->
<script src="/js/i18n.js"></script>
<script src="/js/common.js"></script>
<script src="/js/devlog.js"></script>
</body></html>

508
en/devlog/inertial-vs-optical-mocap.html
View File

@ -1,508 +0,0 @@
<!DOCTYPE html><html lang="en"><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 -->
<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>Inertial vs Optical Motion Capture: What's the Difference? - Mingle Studio DevLog</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="canonical" href="https://minglestudio.co.kr/en/devlog/inertial-vs-optical-mocap">
<meta name="theme-color" content="#ff8800">
<meta name="description" content="A comprehensive comparison of the two major motion capture methods — inertial (IMU) and optical — covering their principles, key equipment, and community feedback.">
<meta name="author" content="Mingle Studio">
<meta property="og:title" content="Inertial vs Optical Motion Capture: What's the Difference?">
<meta property="og:description" content="A comprehensive comparison of the two major motion capture methods — inertial (IMU) and optical — covering their principles, key equipment, and community feedback.">
<meta property="og:url" content="https://minglestudio.co.kr/en/devlog/inertial-vs-optical-mocap">
<meta property="og:type" content="article">
<meta property="og:image" content="https://minglestudio.co.kr/blog/posts/inertial-vs-optical-mocap/images/thumbnail.webp">
<meta property="og:locale" content="en_US">
<meta property="og:site_name" content="Mingle Studio">
<meta property="article:published_time" content="2026-04-05">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Inertial vs Optical Motion Capture: What's the Difference?">
<meta name="twitter:description" content="A comprehensive comparison of the two major motion capture methods — inertial (IMU) and optical — covering their principles, key equipment, and community feedback.">
<meta name="twitter:image" content="https://minglestudio.co.kr/blog/posts/inertial-vs-optical-mocap/images/thumbnail.webp">
<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?v=20260404">
<link rel="stylesheet" href="/css/devlog.css?v=20260404">
<link rel="alternate" hreflang="ko" href="https://minglestudio.co.kr/devlog/inertial-vs-optical-mocap">
<link rel="alternate" hreflang="en" href="https://minglestudio.co.kr/en/devlog/inertial-vs-optical-mocap">
<link rel="alternate" hreflang="ja" href="https://minglestudio.co.kr/ja/devlog/inertial-vs-optical-mocap">
<link rel="alternate" hreflang="zh" href="https://minglestudio.co.kr/zh/devlog/inertial-vs-optical-mocap">
<link rel="alternate" hreflang="x-default" href="https://minglestudio.co.kr/devlog/inertial-vs-optical-mocap">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BlogPosting",
"headline": "Inertial vs Optical Motion Capture: What's the Difference?",
"description": "A comprehensive comparison of the two major motion capture methods — inertial (IMU) and optical — covering their principles, key equipment, and community feedback.",
"datePublished": "2026-04-05",
"author": { "@type": "Organization", "name": "Mingle Studio" },
"publisher": { "@type": "Organization", "name": "Mingle Studio" },
"url": "https://minglestudio.co.kr/en/devlog/inertial-vs-optical-mocap"
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "What is the biggest difference between optical and inertial motion capture?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Optical tracks absolute positions using infrared cameras and reflective markers, providing sub-millimeter (0.1mm) accuracy. Inertial uses wearable IMU sensors that allow capture anywhere without spatial constraints, but positional data develops drift (cumulative error) over time."
}
},
{
"@type": "Question",
"name": "Which method is better for VTuber motion capture?",
"acceptedAnswer": {
"@type": "Answer",
"text": "For simple personal content, inertial (Rokoko, Perception Neuron) is sufficient. However, for high-quality live broadcasts or when precise movements are needed, optical — which has no drift — is the better choice."
}
},
{
"@type": "Question",
"name": "What is drift in inertial motion capture?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Drift is the cumulative error that occurs when calculating position through double integration of IMU sensor acceleration data. The longer the capture session, the more the character's position diverges from reality, and this effect worsens in environments with magnetic interference."
}
},
{
"@type": "Question",
"name": "How is the occlusion problem in optical motion capture solved?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Occlusion occurs when markers are blocked from camera view. It's addressed by increasing the number of cameras to reduce blind spots and using software gap-filling functions to interpolate missing segments. Mingle Studio, for example, uses 30 cameras arranged in 360 degrees to minimize occlusion."
}
},
{
"@type": "Question",
"name": "Can both methods be used together?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Yes. In practice, many studios use a hybrid approach — optical for full-body and inertial gloves for fingers. Mingle Studio combines OptiTrack optical capture with Rokoko gloves, achieving high-quality tracking for both full-body and fingers."
}
},
{
"@type": "Question",
"name": "If I rent a motion capture studio, do I not need to buy equipment myself?",
"acceptedAnswer": {
"@type": "Answer",
"text": "That's correct. Since purchasing optical equipment requires a substantial investment, renting a studio only for the projects that need it is the most efficient approach. You get professional-grade results without the burden of equipment purchase, setup, and maintenance."
}
}
]
}
</script>
</head>
<body>
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PPTNN6WD"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<a href="#main-content" class="skip-to-content">Skip to content</a>
<div id="header-placeholder">
<nav class="navbar" aria-label="Navigation">
<div class="nav-container">
<div class="nav-logo">
<a href="/en">
<img src="/images/logo/mingle-logo.webp" alt="밍글 스튜디오">
<span data-i18n="header.studioName">밍글 스튜디오</span>
</a>
</div>
<ul id="nav-menu" class="nav-menu">
<li><a href="/en/about" class="nav-link" data-i18n="header.nav.about">About</a></li>
<li><a href="/en/services" class="nav-link" data-i18n="header.nav.services">Services</a></li>
<li><a href="/en/portfolio" class="nav-link" data-i18n="header.nav.portfolio">Portfolio</a></li>
<li><a href="/en/gallery" class="nav-link" data-i18n="header.nav.gallery">Gallery</a></li>
<li><a href="/en/schedule" class="nav-link" data-i18n="header.nav.schedule">Schedule</a></li>
<li><a href="/en/devlog" class="nav-link active" data-i18n="header.nav.devlog">DevLog</a></li>
<li><a href="/en/contact" class="nav-link" data-i18n="header.nav.contact">Contact</a></li>
<li><a href="/en/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="Language">
<span class="lang-current">EN</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="Toggle dark mode">
<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>
<button class="hamburger" id="hamburger" aria-label="Menu" aria-expanded="false">
<span class="hamburger-line"></span>
<span class="hamburger-line"></span>
<span class="hamburger-line"></span>
</button>
</div>
</div>
</nav>
</div>
<main id="main-content">
<article class="blog-post">
<div class="blog-post-header">
<div class="container">
<a href="/en/devlog" class="blog-back-link">← Back to list</a>
<span class="blog-category">Motion Capture Technology</span>
<h1 class="blog-post-title">Inertial vs Optical Motion Capture: What's the Difference?</h1>
<div class="blog-post-meta">
<time datetime="2026-04-05">Apr 5, 2026</time>
</div>
</div>
</div>
<div class="blog-post-body">
<div class="container">
<p>When you start getting into motion capture, there&#39;s one question you&#39;ll encounter right away.</p>
<p><strong>&quot;What&#39;s the difference between inertial and optical?&quot;</strong></p>
<p>In this article, we&#39;ll cover everything from the underlying principles of each method to the leading equipment and real-world user feedback.</p>
<hr>
<h2>What Is Optical Motion Capture?</h2>
<p>Optical motion capture uses <strong>infrared cameras</strong> and <strong>reflective markers</strong>.</p>
<p>Multiple infrared (IR) cameras are installed around the capture space, and <strong>retro-reflective markers</strong> approximately 10–20mm in diameter are attached to the performer&#39;s joints. Each camera emits infrared LED light and detects the light reflected back from the markers, extracting 2D marker coordinates from the image.</p>
<p>When at least two cameras simultaneously capture the same marker, the precise 3D coordinates of that marker can be calculated using the principle of <strong>triangulation</strong>. The more cameras there are, the higher the accuracy and the fewer blind spots, which is why professional studios typically use <strong>12 to 40 or more</strong> cameras.</p>
<p>Because every marker&#39;s 3D coordinates are recorded as <strong>absolute positions</strong> in every frame, the data remains accurate with zero cumulative drift no matter how much time passes.</p>
<p><video src="inertial-vs-optical-mocap/images/basketball-rigid-body-2x-web.mp4" autoplay loop muted playsinline style="width:100%;border-radius:12px;margin:1.5rem 0;"></video></p>
<h3>Advantages</h3>
<ul>
<li><strong>Sub-millimeter accuracy</strong> — Precise positional tracking at the 0.1mm level</li>
<li><strong>No drift</strong> — Absolute coordinate-based, so data never shifts over time</li>
<li><strong>Simultaneous multi-object tracking</strong> — Capture performers + props + set elements together</li>
<li><strong>Low latency</strong> — Approximately 5–10ms, ideal for real-time feedback</li>
</ul>
<h3>Limitations</h3>
<ul>
<li>Requires a dedicated capture space (camera installation + environment control)</li>
<li>Setup and calibration take 30–90 minutes</li>
<li><strong>Occlusion issues</strong> — Tracking is lost when markers are hidden from cameras</li>
</ul>
<h3>Leading Equipment</h3>
<p><strong>OptiTrack (PrimeX Series)</strong></p>
<ul>
<li>Widely regarded as the <strong>best value for money</strong> among optical systems</li>
<li>Motive software is user-friendly with a strong Unity/Unreal plugin ecosystem</li>
<li>Broadly used by game developers, VTuber productions, and university research labs</li>
<li>Community feedback: <em>&quot;At this price point, OptiTrack is the only option for this level of accuracy&quot;</em> is the prevailing opinion</li>
</ul>
<p><strong>Vicon (Vero / Vantage Series)</strong></p>
<ul>
<li>The <strong>gold standard</strong> in the film VFX industry — the vast majority of Hollywood AAA films are shot with Vicon</li>
<li>Top-tier accuracy and stability, powerful post-processing software (Shogun)</li>
<li>Community feedback: <em>&quot;Accuracy is the best, but it&#39;s overkill for small studios&quot;</em></li>
</ul>
<p><strong>Qualisys</strong></p>
<ul>
<li>Strong in medical/sports biomechanics</li>
<li>Specialized in gait analysis, clinical research, and sports science</li>
<li>Relatively smaller user community in the entertainment sector</li>
</ul>
<hr>
<h2>What Is Inertial (IMU) Motion Capture?</h2>
<p>Inertial motion capture uses <strong>IMU (Inertial Measurement Unit)</strong> sensors attached to the body or embedded in a suit to measure movement.</p>
<p>Each IMU sensor contains three core components:</p>
<ul>
<li><strong>Accelerometer</strong> — Measures linear acceleration to determine direction and speed of movement</li>
<li><strong>Gyroscope</strong> — Measures angular velocity to calculate rotation</li>
<li><strong>Magnetometer</strong> — Uses Earth&#39;s magnetic field as a reference to correct heading</li>
</ul>
<p>By combining data from these three sensors using <strong>sensor fusion</strong> algorithms, the 3D orientation of each body part the sensor is attached to can be calculated in real time. Typically, 15–17 sensors are placed on key joints across the upper body, lower body, arms, and legs, and the relationships between sensors are used to extract full-body skeletal data.</p>
<p>However, because calculating position from accelerometer data requires double integration, <strong>errors accumulate (drift)</strong>, meaning the <strong>global position</strong> — &quot;where exactly am I standing in space?&quot; — becomes increasingly inaccurate over time. This is the fundamental limitation of inertial systems.</p>
<p><video src="inertial-vs-optical-mocap/images/Sam_ROM_Raw.mp4" autoplay loop muted playsinline style="width:100%;border-radius:12px;margin:1.5rem 0;"></video></p>
<h3>Advantages</h3>
<ul>
<li><strong>No spatial constraints</strong> — Works outdoors, in tight spaces, anywhere</li>
<li><strong>Quick setup</strong> — Ready to capture in 5–15 minutes after putting on the suit</li>
<li><strong>No occlusion issues</strong> — Sensors are attached directly to the body, so there&#39;s no line-of-sight problem</li>
</ul>
<h3>Limitations</h3>
<ul>
<li><strong>Drift</strong> — Positional data shifts over time (cumulative error)</li>
<li><strong>Low global position accuracy</strong> — Difficult to determine precisely &quot;where you are standing&quot;</li>
<li><strong>Magnetic interference</strong> — Data distortion near metal structures or electronic equipment</li>
<li>Difficult to track props or environmental interactions</li>
</ul>
<h3>Leading Equipment</h3>
<p><strong>Xsens MVN (now Movella)</strong></p>
<ul>
<li>Considered <strong>#1 in accuracy and reliability</strong> among inertial systems</li>
<li>Widely used in the automotive industry, ergonomics, and game animation</li>
<li>Community feedback: <em>&quot;If you&#39;re going inertial, Xsens is the answer&quot;</em>, though <em>&quot;global position drift is unavoidable&quot;</em></li>
</ul>
<p><strong>Rokoko Smartsuit Pro</strong></p>
<ul>
<li><strong>Price accessibility is the biggest advantage</strong> — Popular with indie developers and solo creators</li>
<li>Rokoko Studio software is intuitive with convenient retargeting features</li>
<li>Community feedback: <em>&quot;For this price, it&#39;s impressive&quot;</em>, but also <em>&quot;drift becomes noticeable in long sessions&quot;</em>, <em>&quot;there are limits for precision work&quot;</em></li>
</ul>
<p><strong>Noitom Perception Neuron</strong></p>
<ul>
<li>Some models support finger tracking, compact form factor</li>
<li>Community feedback: <em>&quot;Neuron 3 is a big improvement&quot;</em>, but <em>&quot;drift issues still exist&quot;</em>, <em>&quot;software (Axis Studio) stability could be better&quot;</em></li>
</ul>
<hr>
<h2>Side-by-Side Comparison</h2>
<table>
<thead>
<tr>
<th>Category</th>
<th>Optical</th>
<th>Inertial (IMU)</th>
</tr>
</thead>
<tbody><tr>
<td><strong>Tracking Principle</strong></td>
<td>IR cameras + reflective marker triangulation</td>
<td>IMU sensors (accelerometer + gyroscope + magnetometer)</td>
</tr>
<tr>
<td><strong>Positional Accuracy</strong></td>
<td><strong>Sub-millimeter (0.1mm)</strong> — absolute coordinates</td>
<td>Drift occurs — cumulative error over time</td>
</tr>
<tr>
<td><strong>Rotational Accuracy</strong></td>
<td>Derived from positional data (very high)</td>
<td>1–3 degrees (depends on sensor fusion algorithm)</td>
</tr>
<tr>
<td><strong>Drift</strong></td>
<td><strong>None</strong> — absolute position measured every frame</td>
<td>Present — error accumulates from double integration of acceleration</td>
</tr>
<tr>
<td><strong>Occlusion</strong></td>
<td>Tracking lost when markers are hidden from cameras</td>
<td><strong>No issue</strong> — sensors are directly attached to the body</td>
</tr>
<tr>
<td><strong>Magnetic Interference</strong></td>
<td>Not affected</td>
<td>Data distortion near metals/electronics</td>
</tr>
<tr>
<td><strong>Latency</strong></td>
<td>~5–10ms</td>
<td>~10–20ms</td>
</tr>
<tr>
<td><strong>Setup Time</strong></td>
<td>30–90 min (camera placement + calibration)</td>
<td>5–15 min (suit on + quick calibration)</td>
</tr>
<tr>
<td><strong>Capture Space</strong></td>
<td>Dedicated studio required (camera setup + environment control)</td>
<td><strong>Anywhere</strong> (outdoors, small spaces OK)</td>
</tr>
<tr>
<td><strong>Multi-person Capture</strong></td>
<td>Simultaneous capture possible with distinct marker sets</td>
<td>Independent per suit, simultaneous possible but interaction is difficult</td>
</tr>
<tr>
<td><strong>Prop/Object Tracking</strong></td>
<td>Trackable by attaching markers</td>
<td>Requires separate sensors, practically difficult</td>
</tr>
<tr>
<td><strong>Finger Tracking</strong></td>
<td>High-precision tracking with dedicated hand marker sets</td>
<td>Only some devices support it, limited precision</td>
</tr>
<tr>
<td><strong>Post-processing Workload</strong></td>
<td>Gap filling needed for occlusion segments</td>
<td>Drift correction + position cleanup needed</td>
</tr>
<tr>
<td><strong>Leading Equipment</strong></td>
<td>OptiTrack, Vicon, Qualisys</td>
<td>Xsens, Rokoko, Noitom</td>
</tr>
<tr>
<td><strong>Primary Use Cases</strong></td>
<td>Game/film final capture, VTuber live, research</td>
<td>Previsualization, outdoor shoots, indie/personal content</td>
</tr>
</tbody></table>
<hr>
<h2>What About Markerless Motion Capture?</h2>
<p>Recently, <strong>markerless motion capture</strong>, where AI extracts motion from camera footage alone, has been gaining attention. Move.ai, Captury, and Plask are notable examples, and the barrier to entry is very low since capture is possible with regular cameras without any markers.</p>
<p>However, at this point, markerless methods <strong>fall significantly short of optical and inertial systems in terms of accuracy and stability.</strong> Joint positions frequently exhibit jitter (jumping or shaking), and tracking becomes unstable during fast movements or occlusion situations. It can be useful for previsualization or reference purposes, but it is <strong>not yet at a level where it can be directly used in final deliverables</strong> for games, broadcast, or film.</p>
<p>This is a rapidly advancing field worth watching, but for now, optical and inertial systems remain the mainstream in professional production.</p>
<hr>
<h2>What Does the Community Think?</h2>
<p>Summarizing the recurring opinions from motion capture communities on Reddit (r/gamedev, r/vfx), CGSociety, and others:</p>
<blockquote>
<p><strong>&quot;Optical for work where final quality matters, inertial for when speed and accessibility are the priority.&quot;</strong></p>
</blockquote>
<p>In practice, many professional studios <strong>use both methods in tandem</strong>. A common workflow is to quickly block out movements or create previz with inertial, then do the final capture with optical.</p>
<p>For solo creators or indie teams, the prevailing advice is to start with an accessible inertial system like Rokoko, but <strong>rent an optical studio for projects that demand precision</strong>.</p>
<hr>
<h2>Why Mingle Studio Chose Optical</h2>
<p>Mingle Studio is an optical motion capture studio equipped with <strong>30 OptiTrack cameras (16x Prime 17 + 14x Prime 13)</strong>. The reasons for choosing optical are clear:</p>
<ul>
<li><strong>Accuracy</strong> — Sub-millimeter accuracy is essential for work that directly feeds into final deliverables such as game cinematics, VTuber live streams, and broadcast content</li>
<li><strong>Real-time streaming</strong> — Provides stable, drift-free data for situations requiring real-time feedback, like VTuber live broadcasts</li>
<li><strong>Prop integration</strong> — Precisely tracks interactions with props such as swords, guns, and chairs</li>
<li><strong>Value for money</strong> — OptiTrack delivers professional-grade accuracy at a more reasonable price compared to Vicon</li>
<li><strong>Finger tracking supplement</strong> — Optical&#39;s weakness in finger tracking is complemented by <strong>Rokoko gloves</strong>, combining the precision of optical for full-body with the reliable finger tracking of inertial gloves — the best of both worlds</li>
</ul>
<p>As such, optical and inertial are not necessarily an either-or choice. <strong>Combining the strengths of each method</strong> can achieve a level of quality that would be difficult to reach with a single approach alone.</p>
<p>With 30 cameras covering 360 degrees in an 8m x 7m capture space, occlusion issues are minimized.</p>
<h3>Mingle Studio Capture Workflow</h3>
<p>Here&#39;s how a typical motion capture session works when you book Mingle Studio:</p>
<p><strong>Step 1: Pre-consultation</strong>
We discuss the purpose of the shoot, number of performers needed, and types of motions to capture. For live broadcasts, avatar, background, and prop setup are also coordinated at this stage.</p>
<p><strong>Step 2: Shoot Preparation (Setup)</strong>
When you arrive at the studio, a professional operator handles marker placement, calibration, and avatar mapping. For live broadcast packages, character, background, and prop setup are included — no separate preparation needed.</p>
<p><strong>Step 3: Main Capture / Live Broadcast</strong>
Full-body and finger capture are performed simultaneously using 30 OptiTrack cameras + Rokoko gloves. Real-time monitoring lets you check results on the spot, and remote direction is also supported.</p>
<p><strong>Step 4: Data Delivery / Post-processing</strong>
After the shoot, motion data is delivered promptly. Depending on your needs, data cleanup (noise removal, frame correction) and retargeting optimized for your avatar are also available.</p>
<hr>
<h2>Which Method Should You Choose?</h2>
<table>
<thead>
<tr>
<th>Scenario</th>
<th>Recommended Method</th>
<th>Recommended Equipment</th>
<th>Reason</th>
</tr>
</thead>
<tbody><tr>
<td>Personal YouTube/VTuber content</td>
<td>Inertial</td>
<td>Rokoko, Perception Neuron</td>
<td>Easy setup, no spatial constraints</td>
</tr>
<tr>
<td>Outdoor/location shoots</td>
<td>Inertial</td>
<td>Xsens MVN</td>
<td>No spatial constraints, high reliability</td>
</tr>
<tr>
<td>Previz/motion blocking</td>
<td>Inertial</td>
<td>Rokoko, Xsens</td>
<td>Ideal for fast iterative work</td>
</tr>
<tr>
<td>Game cinematics/final animation</td>
<td>Optical</td>
<td>OptiTrack, Vicon</td>
<td>Sub-millimeter accuracy essential</td>
</tr>
<tr>
<td>High-quality VTuber live streaming</td>
<td>Optical</td>
<td>OptiTrack</td>
<td>Real-time streaming + no drift</td>
</tr>
<tr>
<td>Prop/environment interaction</td>
<td>Optical</td>
<td>OptiTrack, Vicon</td>
<td>Simultaneous tracking via markers on objects</td>
</tr>
<tr>
<td>Medical/sports research</td>
<td>Optical</td>
<td>Vicon, Qualisys</td>
<td>Clinical-grade precision data required</td>
</tr>
<tr>
<td>Automotive/ergonomics analysis</td>
<td>Inertial</td>
<td>Xsens MVN</td>
<td>Measurement possible in real work environments</td>
</tr>
</tbody></table>
<p>If purchasing your own equipment is too costly, <strong>renting an optical studio</strong> is the most efficient choice. You can get professional-grade results without the expense of owning the equipment yourself.</p>
<hr>
<h2>Frequently Asked Questions (FAQ)</h2>
<p><strong>Q. What is the biggest difference between optical and inertial motion capture?</strong></p>
<p>Optical tracks absolute positions using infrared cameras and reflective markers, providing sub-millimeter (0.1mm) accuracy. Inertial uses wearable IMU sensors that allow capture anywhere without spatial constraints, but positional data develops drift (cumulative error) over time.</p>
<p><strong>Q. Which method is better for VTuber motion capture?</strong></p>
<p>For simple personal content, inertial (Rokoko, Perception Neuron) is sufficient. However, for high-quality live broadcasts or when precise movements are needed, optical — which has no drift — is the better choice.</p>
<p><strong>Q. What is drift in inertial motion capture?</strong></p>
<p>Drift is the cumulative error that occurs when calculating position through double integration of IMU sensor acceleration data. The longer the capture session, the more the character&#39;s position diverges from reality, and this effect worsens in environments with magnetic interference.</p>
<p><strong>Q. How is the occlusion problem in optical motion capture solved?</strong></p>
<p>Occlusion occurs when markers are blocked from camera view. It&#39;s addressed by increasing the number of cameras to reduce blind spots and using software gap-filling functions to interpolate missing segments. Mingle Studio, for example, uses 30 cameras arranged in 360 degrees to minimize occlusion.</p>
<p><strong>Q. Can both methods be used together?</strong></p>
<p>Yes. In practice, many studios use a hybrid approach — optical for full-body and inertial gloves for fingers. Mingle Studio combines OptiTrack optical capture with Rokoko gloves, achieving high-quality tracking for both full-body and fingers.</p>
<p><strong>Q. If I rent a motion capture studio, do I not need to buy equipment myself?</strong></p>
<p>That&#39;s correct. Since purchasing optical equipment requires a substantial investment, renting a studio only for the projects that need it is the most efficient approach. You get professional-grade results without the burden of equipment purchase, setup, and maintenance.</p>
<hr>
<h2>Experience Optical Motion Capture for Yourself</h2>
<p>You don&#39;t need to buy the equipment yourself. At Mingle Studio, you can use a <strong>full setup of 30 OptiTrack cameras + Rokoko gloves</strong> on an hourly basis.</p>
<ul>
<li><strong>Motion Capture Recording</strong> — Full-body/facial capture + real-time monitoring + motion data delivery</li>
<li><strong>Live Broadcast Full Package</strong> — Avatar, background, and prop setup + real-time streaming, all-in-one</li>
</ul>
<p>For detailed service information and pricing, visit our <a href="/services">Services page</a>. To check available session times, see our <a href="/schedule">Schedule page</a>. If you have any questions, feel free to reach out via our <a href="/contact">Contact page</a>.</p>
</div>
</div>
<div class="blog-post-footer">
<div class="container">
<a href="/en/devlog" class="blog-back-btn"><i class="fas fa-arrow-left"></i> ← Back to list</a>
</div>
</div>
</article>
</main>
<div id="footer-placeholder"></div>
<script src="/js/i18n.js"></script>
<script src="/js/common.js"></script>
</body>
</html>

BIN
en/devlog/inertial-vs-optical-mocap/images/Sam_ROM_Raw.mp4
View File

Binary file not shown.

BIN
en/devlog/inertial-vs-optical-mocap/images/basketball-rigid-body-2x-web.mp4
View File

Binary file not shown.

BIN
en/devlog/inertial-vs-optical-mocap/images/thumbnail.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 50 KiB

669
en/devlog/optical-mocap-pipeline.html
View File

@ -1,669 +0,0 @@
<!DOCTYPE html><html lang="en"><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 -->
<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>Complete Anatomy of the Optical Motion Capture Pipeline — From Cameras to Motion Data - Mingle Studio DevLog</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="canonical" href="https://minglestudio.co.kr/en/devlog/optical-mocap-pipeline">
<meta name="theme-color" content="#ff8800">
<meta name="description" content="An in-depth guide to the entire optical motion capture technical pipeline. We cover camera installation, PoE networking, 2D centroids, calibration, 3D reconstruction, skeleton solving, post-processing, and on-set practical issues in 10 detailed steps.">
<meta name="author" content="Mingle Studio">
<meta property="og:title" content="Complete Anatomy of the Optical Motion Capture Pipeline — From Cameras to Motion Data">
<meta property="og:description" content="An in-depth guide to the entire optical motion capture technical pipeline. We cover camera installation, PoE networking, 2D centroids, calibration, 3D reconstruction, skeleton solving, post-processing, and on-set practical issues in 10 detailed steps.">
<meta property="og:url" content="https://minglestudio.co.kr/en/devlog/optical-mocap-pipeline">
<meta property="og:type" content="article">
<meta property="og:image" content="https://minglestudio.co.kr/blog/posts/optical-mocap-pipeline/images/thumbnail.webp">
<meta property="og:locale" content="en_US">
<meta property="og:site_name" content="Mingle Studio">
<meta property="article:published_time" content="2026-04-05">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Complete Anatomy of the Optical Motion Capture Pipeline — From Cameras to Motion Data">
<meta name="twitter:description" content="An in-depth guide to the entire optical motion capture technical pipeline. We cover camera installation, PoE networking, 2D centroids, calibration, 3D reconstruction, skeleton solving, post-processing, and on-set practical issues in 10 detailed steps.">
<meta name="twitter:image" content="https://minglestudio.co.kr/blog/posts/optical-mocap-pipeline/images/thumbnail.webp">
<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?v=20260404">
<link rel="stylesheet" href="/css/devlog.css?v=20260404">
<link rel="alternate" hreflang="ko" href="https://minglestudio.co.kr/devlog/optical-mocap-pipeline">
<link rel="alternate" hreflang="en" href="https://minglestudio.co.kr/en/devlog/optical-mocap-pipeline">
<link rel="alternate" hreflang="ja" href="https://minglestudio.co.kr/ja/devlog/optical-mocap-pipeline">
<link rel="alternate" hreflang="zh" href="https://minglestudio.co.kr/zh/devlog/optical-mocap-pipeline">
<link rel="alternate" hreflang="x-default" href="https://minglestudio.co.kr/devlog/optical-mocap-pipeline">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BlogPosting",
"headline": "Complete Anatomy of the Optical Motion Capture Pipeline — From Cameras to Motion Data",
"description": "An in-depth guide to the entire optical motion capture technical pipeline. We cover camera installation, PoE networking, 2D centroids, calibration, 3D reconstruction, skeleton solving, post-processing, and on-set practical issues in 10 detailed steps.",
"datePublished": "2026-04-05",
"author": { "@type": "Organization", "name": "Mingle Studio" },
"publisher": { "@type": "Organization", "name": "Mingle Studio" },
"url": "https://minglestudio.co.kr/en/devlog/optical-mocap-pipeline"
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "How is an optical motion capture camera different from a regular camera?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Regular cameras capture full-color video, but motion capture cameras are specialized for the infrared (IR) spectrum. They illuminate markers with IR LEDs, detect only reflected light, and internally calculate the markers' 2D coordinates, transmitting only coordinate data to the PC."
}
},
{
"@type": "Question",
"name": "Is there a length limit for PoE cables?",
"acceptedAnswer": {
"@type": "Answer",
"text": "According to the Ethernet standard, PoE cables support a **maximum of 100m**. Most motion capture studios easily fall within this range."
}
},
{
"@type": "Question",
"name": "Is a higher camera frame rate always better?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Higher frame rates are advantageous for fast motion tracking and lower latency, but they increase data throughput and may reduce camera resolution. Generally, 120–240fps is sufficient for VTuber live and game motion capture, while 360fps or higher is used for ultra-high-speed motion analysis in sports science and similar fields."
}
},
{
"@type": "Question",
"name": "How often do marker swaps occur?",
"acceptedAnswer": {
"@type": "Answer",
"text": "If the markerset is well-designed and there are enough cameras, swaps during real-time capture are rare. However, the probability increases during fast movements or when markers are close together (such as hand clasping), and these sections are corrected in post-processing."
}
},
{
"@type": "Question",
"name": "If 2 cameras are enough for triangulation, why install 30?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Two cameras is merely the theoretical minimum. In practice, you must account for occlusion (marker obstruction), accuracy variations based on camera angle, and redundancy. With 30 cameras deployed, every marker is always seen by multiple cameras, enabling stable and accurate tracking."
}
},
{
"@type": "Question",
"name": "How often does calibration need to be done?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Typically, calibration is performed once at the start of each shooting day. However, during extended sessions, calibration can drift due to temperature changes or minor camera movement, so recalibration is recommended during 4–6 hour continuous shoots. Using OptiTrack Motive's Continuous Calibration feature allows real-time correction even during capture."
}
},
{
"@type": "Question",
"name": "Is it not allowed to wear shiny clothing?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Because motion capture cameras detect infrared reflections, shiny materials (metal decorations, sequins, glossy synthetic fabrics, etc.) can reflect infrared light and create ghost markers. Wearing a dedicated mocap suit or comfortable clothing made of matte materials is best."
}
}
]
}
</script>
</head>
<body>
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PPTNN6WD"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<a href="#main-content" class="skip-to-content">Skip to content</a>
<div id="header-placeholder">
<nav class="navbar" aria-label="Navigation">
<div class="nav-container">
<div class="nav-logo">
<a href="/en">
<img src="/images/logo/mingle-logo.webp" alt="밍글 스튜디오">
<span data-i18n="header.studioName">밍글 스튜디오</span>
</a>
</div>
<ul id="nav-menu" class="nav-menu">
<li><a href="/en/about" class="nav-link" data-i18n="header.nav.about">About</a></li>
<li><a href="/en/services" class="nav-link" data-i18n="header.nav.services">Services</a></li>
<li><a href="/en/portfolio" class="nav-link" data-i18n="header.nav.portfolio">Portfolio</a></li>
<li><a href="/en/gallery" class="nav-link" data-i18n="header.nav.gallery">Gallery</a></li>
<li><a href="/en/schedule" class="nav-link" data-i18n="header.nav.schedule">Schedule</a></li>
<li><a href="/en/devlog" class="nav-link active" data-i18n="header.nav.devlog">DevLog</a></li>
<li><a href="/en/contact" class="nav-link" data-i18n="header.nav.contact">Contact</a></li>
<li><a href="/en/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="Language">
<span class="lang-current">EN</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="Toggle dark mode">
<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>
<button class="hamburger" id="hamburger" aria-label="Menu" aria-expanded="false">
<span class="hamburger-line"></span>
<span class="hamburger-line"></span>
<span class="hamburger-line"></span>
</button>
</div>
</div>
</nav>
</div>
<main id="main-content">
<article class="blog-post">
<div class="blog-post-header">
<div class="container">
<a href="/en/devlog" class="blog-back-link">← Back to list</a>
<span class="blog-category">Motion Capture Technology</span>
<h1 class="blog-post-title">Complete Anatomy of the Optical Motion Capture Pipeline — From Cameras to Motion Data</h1>
<div class="blog-post-meta">
<time datetime="2026-04-05">Apr 5, 2026</time>
</div>
</div>
</div>
<div class="blog-post-body">
<div class="container">
<p>When an actor wearing a suit moves in a motion capture studio, the on-screen character follows in real time. It looks simple, but behind the scenes runs a precise technical pipeline: <strong>camera hardware → network transmission → 2D image processing → 3D reconstruction → skeleton solving → real-time streaming</strong>.</p>
<p>In this article, we dissect the entire pipeline of optical motion capture (based on OptiTrack) step by step.</p>
<hr>
<h2>Step 1: Camera Installation and Placement Strategy</h2>
<p>The first step in optical motion capture is deciding <strong>where and how to place the cameras</strong>.</p>
<p><figure class="blog-figure"><img src="/images/studio/모션캡쳐%20공간%20001.webp" alt="Mingle Studio motion capture space" loading="lazy"><figcaption>Mingle Studio motion capture space</figcaption></figure></p>
<h3>Placement Principles</h3>
<ul>
<li><strong>Height</strong>: Cameras are typically mounted at 2–3m height, angled about 30 degrees downward</li>
<li><strong>Layout</strong>: Arranged in a ring formation surrounding the capture volume (shooting space)</li>
<li><strong>Two-tier placement</strong>: Alternating cameras at high and low positions improves vertical coverage</li>
<li><strong>Overlap</strong>: Every point within the capture volume must be visible to <strong>at least 3 cameras</strong> simultaneously. Triangulation requires a minimum of 2, but 3 or more significantly improves accuracy and occlusion resilience</li>
</ul>
<h3>Relationship Between Camera Count and Accuracy</h3>
<p>More cameras means:</p>
<ul>
<li>Fewer blind spots → reduced probability of occlusion</li>
<li>More cameras seeing the same marker → improved triangulation accuracy</li>
<li>Other cameras compensate if some have issues (redundancy)</li>
</ul>
<p>At Mingle Studio, we use <strong>OptiTrack Prime 17 × 16 units + Prime 13 × 14 units</strong>, a total of 30 cameras arranged in an 8m × 7m space to minimize 360-degree blind spots.</p>
<h3>IR Pass Filter — Eyes That See Only Infrared</h3>
<p>An <strong>IR pass filter (infrared pass filter)</strong> is mounted in front of each motion capture camera lens. This filter blocks visible light and allows only infrared wavelengths (around 850nm) to pass through. This eliminates interference from fluorescent lights, sunlight, monitor glow, and other ambient lighting, allowing the camera to detect only <strong>marker light reflected from IR LEDs</strong>.</p>
<p>This filter is also the reason the studio lighting doesn&#39;t need to be completely turned off. However, direct sunlight or lighting with strong IR components can still cause interference, so studios use lighting with minimal IR emission.</p>
<h3>Frame Synchronization — How 30 Cameras Shoot Simultaneously</h3>
<p>For accurate triangulation, all cameras must trigger their shutters at <strong>exactly the same moment</strong>. If each camera captures at different timings, the position of fast-moving markers would vary between cameras, making 3D reconstruction inaccurate.</p>
<p>OptiTrack uses a <strong>hardware synchronization (Hardware Sync)</strong> method. One camera is designated as the <strong>Sync Master</strong>, generating timing signals, while the remaining cameras expose simultaneously in sync with this signal.</p>
<ul>
<li><strong>Ethernet cameras (Prime series)</strong>: The sync signal is embedded in the Ethernet connection itself or delivered through OptiTrack&#39;s eSync hub. No separate sync cable is needed.</li>
<li><strong>USB cameras (Flex series)</strong>: Cameras are connected via dedicated sync cables in a daisy chain.</li>
</ul>
<p>The precision of this synchronization is at the <strong>microsecond (μs) level</strong>, meaning all 30 cameras capture at virtually the exact same moment.</p>
<hr>
<h2>Step 2: PoE — Power and Data Through a Single Cable</h2>
<h3>What Is PoE (Power over Ethernet)?</h3>
<p>OptiTrack Prime series cameras connect via <strong>PoE (Power over Ethernet)</strong>. This technology delivers <strong>both power and data simultaneously</strong> through a single standard Ethernet cable (Cat5e/Cat6).</p>
<p><figure class="blog-figure"><img src="optical-mocap-pipeline/images/poe-switch.png" alt="PoE switch and camera connection" loading="lazy"><figcaption>PoE switch and camera connection</figcaption></figure></p>
<h3>Technical Standards</h3>
<table>
<thead>
<tr>
<th>Standard</th>
<th>Max Power</th>
<th>Notes</th>
</tr>
</thead>
<tbody><tr>
<td><strong>IEEE 802.3af (PoE)</strong></td>
<td>15.4W per port</td>
<td>Sufficient for standard motion capture cameras</td>
</tr>
<tr>
<td><strong>IEEE 802.3at (PoE+)</strong></td>
<td>25.5W per port</td>
<td>For high-frame-rate cameras or those with high IR LED output</td>
</tr>
</tbody></table>
<p>OptiTrack cameras typically consume around <strong>5–12W</strong>, well within the PoE standard range.</p>
<h3>Network Topology</h3>
<p>Cameras are connected in a <strong>star topology</strong>. Each camera connects 1:1 to an individual port on the PoE switch. Daisy chaining (serial connection) is not used.</p>
<div class="network-diagram">
<div class="network-cameras">
<div class="network-cam"><div class="network-cam-icon">CAM 1</div></div>
<div class="network-cam"><div class="network-cam-icon">CAM 2</div></div>
<div class="network-cam"><div class="network-cam-icon">CAM 3</div></div>
<div class="network-cam"><div class="network-cam-icon">···</div></div>
<div class="network-cam"><div class="network-cam-icon">CAM N</div></div>
</div>
<svg class="network-lines" viewBox="0 0 100 200" preserveAspectRatio="none">
<line x1="0" y1="20" x2="100" y2="45" />
<line x1="0" y1="55" x2="100" y2="45" />
<line x1="0" y1="90" x2="100" y2="45" />
<line x1="0" y1="125" x2="100" y2="45" />
<line x1="0" y1="160" x2="100" y2="45" />
</svg>
<div class="network-center">
<div class="network-switch">PoE Switch</div>
<div class="network-link"></div>
<div class="network-pc">Host PC</div>
</div>
</div>
<p>For 30 cameras, you would combine a 24-port + 8-port PoE+ switch or use a 48-port switch. When selecting a switch, you must verify the <strong>total PoE power budget</strong> (e.g., 30 cameras × 12W = 360W).</p>
<h3>Advantages of PoE</h3>
<ul>
<li><strong>One cable does it all</strong> — no need for separate power adapters for each ceiling-mounted camera</li>
<li><strong>Clean installation</strong> — cable count is cut in half, simplifying installation and management</li>
<li><strong>Centralized power management</strong> — cameras can be collectively powered ON/OFF from the switch</li>
</ul>
<hr>
<h2>Step 3: What the Camera Sends — 2D Centroids</h2>
<p>Understanding what data is transmitted from cameras to the PC is the key to the pipeline.</p>
<p><figure class="blog-figure"><img src="optical-mocap-pipeline/images/motive-2d-centroid.png" alt="Motive camera 2D view — markers displayed as bright dots" loading="lazy"><figcaption>Motive camera 2D view — markers displayed as bright dots</figcaption></figure></p>
<h3>Camera Internal Processing</h3>
<p>Each OptiTrack camera has an <strong>infrared (IR) LED ring</strong> mounted around the camera lens. These LEDs emit infrared light, which is reflected back toward the camera by <strong>retroreflective markers</strong> attached to the actor&#39;s body. The camera sensor captures this reflected light as a grayscale IR image.</p>
<p>The important point here is that the camera <strong>does not send this raw image directly to the PC</strong>. The camera&#39;s internal processor handles it first:</p>
<p><strong>1. Thresholding</strong>
Only pixels above a certain brightness threshold are kept; the rest are discarded. Since only markers reflecting infrared light appear bright, this process separates markers from the background.</p>
<p><strong>2. Blob Detection</strong>
Clusters of bright pixels (blobs) are recognized as individual marker candidates.</p>
<p><strong>3. 2D Centroid Calculation</strong>
The <strong>precise center point (centroid)</strong> of each blob is calculated with sub-pixel precision (approximately 0.1 pixels). This uses a weighted average method where the brightness of each pixel within the blob serves as the weight.</p>
<h3>Data Transmitted to the PC</h3>
<p>In the default tracking mode, what the camera sends to the PC is <strong>2D centroid data</strong>:</p>
<ul>
<li><strong>(x, y) coordinates</strong> + size information for each marker candidate</li>
<li>Extremely small data — only a few hundred bytes per frame per camera</li>
</ul>
<p>Thanks to this small data volume, <strong>40+ cameras can operate on a single Gigabit Ethernet connection</strong>. Raw grayscale images can also be transmitted (for debugging/visualization), but this requires several MB/s per camera and is not used during normal tracking.</p>
<blockquote>
<p>In other words, the camera is not &quot;a device that captures and sends video&quot; but rather closer to <strong>&quot;a sensor that calculates marker positions and sends only coordinates.&quot;</strong></p>
</blockquote>
<p>You might wonder — why are motion capture cameras so expensive compared to regular cameras? The answer lies in the process described above. Regular cameras simply send the captured footage as-is, but motion capture cameras have <strong>a dedicated onboard processor</strong> that performs thresholding, blob detection, and sub-pixel centroid calculation in real time at 240–360 frames per second. Each camera essentially contains <strong>a small computer dedicated to image processing</strong>.</p>
<hr>
<h2>Step 4: Calibration — Aligning the Camera Eyes</h2>
<p>There is a mandatory process before 3D reconstruction can happen. The software must determine each camera&#39;s <strong>exact position, orientation, and lens characteristics</strong> — this is <strong>calibration</strong>.</p>
<p><figure class="blog-figure"><img src="optical-mocap-pipeline/images/calibration-tools.webp" alt="Calibration wand (left) and ground plane frame (right)" loading="lazy"><figcaption>Calibration wand (left) and ground plane frame (right)</figcaption></figure></p>
<h3>Wanding — Scanning the Space</h3>
<p>An operator walks through the entire capture volume while waving a <strong>calibration wand</strong> — a rod with LEDs or markers attached. Since the distances between the wand&#39;s markers are precisely known, when each camera captures the wand over thousands of frames, the software can calculate:</p>
<ul>
<li><strong>Intrinsic Parameters</strong> — characteristics unique to the camera lens, such as focal length and lens distortion coefficients</li>
<li><strong>Extrinsic Parameters</strong> — the camera&#39;s exact position and orientation in 3D space</li>
</ul>
<p>This calculation uses an optimization algorithm called <strong>Bundle Adjustment</strong>. It simultaneously optimizes all camera parameters based on thousands of 2D observation data points.</p>
<h3>Ground Plane Setup</h3>
<p>After wanding, an <strong>L-shaped calibration frame (Ground Plane)</strong> is placed on the floor. Three or more markers on this frame define the floor plane and coordinate origin:</p>
<ul>
<li>Where (0, 0, 0) is (the origin)</li>
<li>Which directions are the X, Y, Z axes</li>
<li>The height reference of the floor plane</li>
</ul>
<p>Once calibration is complete, the software can convert any camera&#39;s 2D coordinates into an accurate 3D ray.</p>
<h3>Calibration Quality</h3>
<p>Motive software displays the <strong>reprojection error</strong> for each camera after calibration. The smaller this value (typically 0.5px or below), the more accurate the calibration. Cameras with large errors are repositioned or recalibrated.</p>
<hr>
<h2>Step 5: 2D → 3D Reconstruction (Triangulation)</h2>
<p>Let&#39;s examine how the 2D centroids arriving at the PC are converted into 3D coordinates.</p>
<h3>Triangulation Principle</h3>
<ol>
<li>Utilizing each camera&#39;s <strong>exact 3D position, orientation, and lens characteristics</strong> obtained through calibration</li>
<li>Casting a <strong>ray</strong> from the camera&#39;s 2D centroid coordinate — a straight line extending from the camera position through the centroid direction into 3D space</li>
<li>The <strong>point where rays from 2 or more cameras viewing the same marker intersect</strong> is the marker&#39;s 3D coordinate</li>
</ol>
<p><video src="optical-mocap-pipeline/images/continuous-calibration-web.mp4" autoplay loop muted playsinline style="width:100%;border-radius:12px;margin:1.5rem 0;"></video></p>
<h3>In Reality, Rays Don&#39;t Intersect Perfectly</h3>
<p>Due to noise, lens distortion, calibration errors, and other factors, rays almost never meet at a single exact point. That&#39;s why <strong>Least Squares Optimization</strong> is used:</p>
<ul>
<li>Calculates the 3D coordinate where the sum of distances to all rays is minimized</li>
<li>The distance between each ray and the reconstructed 3D point is called the <strong>residual</strong></li>
<li>Smaller residuals mean better reconstruction quality — in a well-calibrated OptiTrack system, <strong>sub-millimeter residuals (below 0.5mm)</strong> can be expected</li>
</ul>
<h3>Impact of Camera Count</h3>
<table>
<thead>
<tr>
<th>Number of cameras seeing the marker</th>
<th>Effect</th>
</tr>
</thead>
<tbody><tr>
<td><strong>2</strong></td>
<td>3D reconstruction possible (minimum requirement)</td>
</tr>
<tr>
<td><strong>3</strong></td>
<td>Improved accuracy + tracking maintained even if 1 camera is occluded</td>
</tr>
<tr>
<td><strong>4 or more</strong></td>
<td>High accuracy + strong occlusion resilience</td>
</tr>
</tbody></table>
<hr>
<h2>Step 6: Marker Identification and Labeling</h2>
<h3>Marker Suit and Marker Placement</h3>
<p>To turn 3D reconstruction into meaningful motion data, markers must be attached at <strong>precise locations</strong> on the body.</p>
<p><strong>Marker Specifications</strong></p>
<ul>
<li>Diameter: Typically <strong>12–19mm</strong> spherical retroreflective markers</li>
<li>Material: Foam/plastic spheres coated with 3M retroreflective tape</li>
<li>Attachment: Velcro, double-sided tape, or pre-mounted on dedicated marker suits</li>
</ul>
<p><strong>Markerset Standards</strong>
The number and placement of markers follow standardized <strong>markerset</strong> specifications:</p>
<ul>
<li><strong>Baseline (37 markers)</strong> — OptiTrack&#39;s default full-body markerset. Covers upper body, lower body, and head; the most commonly used for game/video motion capture</li>
<li><strong>Baseline + Fingers (~57 markers)</strong> — Extended version adding approximately 20 finger markers</li>
<li><strong>Helen Hayes (~15–19 markers)</strong> — Medical/gait analysis standard. A minimal markerset focused on the lower body</li>
</ul>
<p>Markers are placed at <strong>anatomical landmarks where bones protrude</strong> (acromion, lateral epicondyle, anterior superior iliac spine, etc.). These locations most accurately reflect bone movement through the skin and minimize skin artifact.</p>
<p>After 3D reconstruction, each frame produces a <strong>cloud of unnamed 3D points (Point Cloud)</strong>. The process of determining &quot;is this point the left knee marker or the right shoulder marker?&quot; is <strong>labeling</strong>.</p>
<p><figure class="blog-figure"><img src="optical-mocap-pipeline/images/marker-labeling.png" alt="Markers labeled in Motive" loading="lazy"><figcaption>Markers labeled in Motive</figcaption></figure></p>
<h3>Labeling Algorithms</h3>
<p><strong>Template Matching</strong>
Based on the geometric arrangement of the markerset defined during calibration (e.g., the distance between knee and ankle markers), the current frame&#39;s 3D points are compared against the template.</p>
<p><strong>Predictive Tracking</strong>
Based on velocity and acceleration from previous frames, the software predicts where each marker will be in the next frame and matches it to the nearest 3D point.</p>
<h3>Marker Swap Problem</h3>
<p>When two markers pass very close to each other, the software may <strong>swap their labels</strong> — a phenomenon where labels are exchanged. This is one of the most common artifacts in optical mocap.</p>
<p>Solutions:</p>
<ul>
<li>Manually correct labels in post-processing</li>
<li>Design marker placement to be <strong>asymmetric</strong> for easier differentiation</li>
<li>Use <strong>active markers</strong> — each marker emits a unique infrared pattern, enabling hardware-level identification and completely eliminating swaps</li>
</ul>
<h3>Passive vs Active Markers</h3>
<table>
<thead>
<tr>
<th>Category</th>
<th>Passive Markers (Reflective)</th>
<th>Active Markers (Self-emitting)</th>
</tr>
</thead>
<tbody><tr>
<td><strong>Principle</strong></td>
<td>Reflects light from camera IR LEDs</td>
<td>Each marker emits a unique IR pattern</td>
</tr>
<tr>
<td><strong>Identification</strong></td>
<td>Software-based (swap possible)</td>
<td>Hardware-based (no swaps)</td>
</tr>
<tr>
<td><strong>Advantages</strong></td>
<td>Lightweight, inexpensive, easy to attach</td>
<td>Auto-identification, no labeling errors</td>
</tr>
<tr>
<td><strong>Disadvantages</strong></td>
<td>May require post-processing labeling</td>
<td>Heavier, requires battery/power</td>
</tr>
</tbody></table>
<p>In most entertainment/VTuber production environments, <strong>passive markers</strong> are primarily used. They are lightweight and comfortable, and software performance is good enough that automatic labeling works well in most situations.</p>
<hr>
<h2>Step 7: Skeleton Solving — From Points to a Skeletal Structure</h2>
<p>This step maps labeled 3D markers to a human <strong>skeleton</strong> structure.</p>
<h3>Pre-Calibration</h3>
<p>Before shooting, the actor strikes a <strong>T-pose</strong> (arms outstretched), and the software calculates bone lengths (arm length, leg length, etc.) and joint positions based on marker locations.</p>
<p>This is followed by a <strong>ROM (Range of Motion) capture</strong>.</p>
<p><figure class="blog-figure"><img src="optical-mocap-pipeline/images/rom-grid.webp" alt="ROM capture — calibrating joint ranges through various movements" loading="lazy"><figcaption>ROM capture — calibrating joint ranges through various movements</figcaption></figure>
Through various movements such as arm circles, knee bends, and torso twists, the software precisely calibrates <strong>joint center points and rotation axes</strong>.</p>
<h3>Real-Time Solving</h3>
<p>During capture, for every frame:</p>
<ol>
<li>Receives labeled 3D marker coordinates</li>
<li>Calculates the <strong>3D position and rotation</strong> of each joint based on marker positions</li>
<li>Algorithms such as <strong>Inverse Kinematics</strong> compute a natural skeletal pose</li>
<li>Result: <strong>Translation + Rotation</strong> data for all joints across the timeline</li>
</ol>
<h3>Rigid Body Tracking (Prop Tracking)</h3>
<p>By attaching <strong>3 or more markers in an asymmetric pattern</strong> to props like swords, guns, or cameras, the software recognizes the marker cluster as a single rigid body, enabling <strong>6DOF (3 axes of position + 3 axes of rotation)</strong> tracking.</p>
<hr>
<h2>Step 8: Real-Time Streaming and Data Output</h2>
<h3>Real-Time Streaming</h3>
<p><figure class="blog-figure"><img src="optical-mocap-pipeline/images/realtime-streaming.png" alt="Real-time streaming — sending motion data from Motive to a game engine" loading="lazy"><figcaption>Real-time streaming — sending motion data from Motive to a game engine</figcaption></figure></p>
<p>OptiTrack Motive delivers solved data to external software in real time:</p>
<ul>
<li><strong>NatNet SDK</strong> — OptiTrack&#39;s proprietary protocol, UDP-based low-latency transmission</li>
<li><strong>VRPN</strong> — A standard protocol in the VR/mocap field</li>
</ul>
<p>This enables real-time character animation in <strong>Unity, Unreal Engine, MotionBuilder</strong>, and more. VTuber live broadcasts are possible thanks to this real-time streaming.</p>
<h3>Recorded Data Output Formats</h3>
<table>
<thead>
<tr>
<th>Format</th>
<th>Use Case</th>
</tr>
</thead>
<tbody><tr>
<td><strong>FBX</strong></td>
<td>Skeleton + animation data, compatible with game engines/DCC tools</td>
</tr>
<tr>
<td><strong>BVH</strong></td>
<td>Hierarchical motion data, primarily used for retargeting</td>
</tr>
<tr>
<td><strong>C3D</strong></td>
<td>Raw 3D marker data, biomechanics/research standard</td>
</tr>
</tbody></table>
<hr>
<h2>Step 9: Post-Processing — Refining the Data</h2>
<p><figure class="blog-figure"><img src="optical-mocap-pipeline/images/post-processing.png" alt="Post-processing — cleaning up motion data in Motive" loading="lazy"><figcaption>Post-processing — cleaning up motion data in Motive</figcaption></figure></p>
<p>Data from real-time capture can sometimes be used as-is, but most professional work involves a <strong>post-processing</strong> stage.</p>
<h3>Gap Filling</h3>
<p>This fills gaps where markers temporarily disappeared due to occlusion using <strong>interpolation</strong>.</p>
<ul>
<li><strong>Linear interpolation</strong> — Simply connects the frames before and after with a straight line. Suitable for short gaps</li>
<li><strong>Spline interpolation</strong> — Fills with smooth curves. Better for maintaining natural movement</li>
<li><strong>Pattern-based interpolation</strong> — References data from other takes of the same repeated movement</li>
</ul>
<p>The longer the gap, the less accurate the interpolation, which is why minimizing occlusion during shooting is most important.</p>
<h3>Smoothing and Filtering</h3>
<p>Captured data may contain subtle jitter (high-frequency noise). To remove this:</p>
<ul>
<li><strong>Butterworth filter</strong> — A low-pass filter that removes noise above a specified frequency</li>
<li><strong>Gaussian smoothing</strong> — Reduces jitter using a weighted average of surrounding frames</li>
</ul>
<p>However, excessive smoothing can cause loss of <strong>detail and impact</strong> in the motion, so the strength must be set appropriately to avoid blurring sharp movements like sword swings.</p>
<h3>Marker Swap Correction</h3>
<p>This involves finding sections where marker swaps (described in Step 6) occurred and manually correcting the labels. In Motive, you can visually inspect and correct marker trajectories on the timeline.</p>
<h3>Retargeting</h3>
<p>The process of applying captured skeleton data to <strong>a character with different proportions</strong>. For example, to apply motion data from a 170cm actor to a 3m giant character or a 150cm child character, joint rotations must be preserved while bone lengths are recalculated to match the target character. MotionBuilder, Maya, Unreal Engine, and others provide retargeting functionality.</p>
<hr>
<h2>Step 10: Common On-Set Issues and Solutions</h2>
<p>Even seemingly perfect optical mocap encounters real-world challenges on set.</p>
<h3>Stray Reflections</h3>
<p>Infrared light reflecting off objects other than markers creates <strong>ghost markers</strong> — false marker detections.</p>
<ul>
<li>Causes: Metal surfaces, shiny clothing, glasses, watches, floor reflections, etc.</li>
<li>Solution: Cover reflective surfaces with matte tape, or use <strong>masking</strong> in Motive to tell the software to ignore those areas</li>
</ul>
<h3>Marker Detachment</h3>
<p>Markers may fall off the suit or shift position during intense movements.</p>
<ul>
<li>Solution: Carefully check marker attachment before shooting; for vigorous motion capture, combine Velcro + double-sided tape for stronger adhesion</li>
<li>It&#39;s also important to periodically monitor marker condition during sessions</li>
</ul>
<h3>Clothing Restrictions</h3>
<p>Actors should ideally wear <strong>light-colored, matte-material clothing</strong> during capture. Black doesn&#39;t affect marker reflection, but shiny materials or loose clothing can cause unstable marker positions or stray reflections. Wearing a dedicated mocap suit is the most reliable option.</p>
<h3>Calibration Maintenance</h3>
<p>Calibration can gradually drift due to temperature changes within the capture volume, camera vibrations, or minor tripod shifts. For extended shooting sessions, it&#39;s recommended to <strong>recalibrate</strong> midway, or use Motive&#39;s <strong>Continuous Calibration</strong> feature for real-time correction during capture.</p>
<hr>
<h2>Latency — How Long From Movement to Screen?</h2>
<p>Here is the time breakdown for each stage of the pipeline.</p>
<table>
<thead>
<tr>
<th>Stage</th>
<th>Duration</th>
</tr>
</thead>
<tbody><tr>
<td>Camera exposure (at 240fps)</td>
<td>~4.2ms</td>
</tr>
<tr>
<td>Camera internal processing (centroid calculation)</td>
<td>~0.5–1ms</td>
</tr>
<tr>
<td>Network transmission (PoE → PC)</td>
<td>&lt; 1ms</td>
</tr>
<tr>
<td>3D reconstruction + labeling</td>
<td>~1–2ms</td>
</tr>
<tr>
<td>Skeleton solving</td>
<td>~0.5–1ms</td>
</tr>
<tr>
<td>Streaming output (NatNet)</td>
<td>&lt; 1ms</td>
</tr>
<tr>
<td><strong>Total end-to-end latency</strong></td>
<td><strong>Approx. 8–14ms (at 240fps)</strong></td>
</tr>
</tbody></table>
<p>At 360fps, the exposure time decreases, making latencies <strong>below 7ms</strong> achievable. This level of latency is imperceptible to humans, enabling natural real-time response even in VTuber live broadcasts.</p>
<blockquote>
<p>Note: Most of the latency comes from the <strong>camera exposure time (frame period)</strong>. This is why higher frame rates result in lower latency.</p>
</blockquote>
<hr>
<h2>Full Pipeline Summary</h2>
<div class="pipeline-flow">
<div class="pipeline-step">
<div class="pipeline-step-title">1. Camera Installation · IR Filter · Frame Sync</div>
<p class="pipeline-step-desc">30 cameras arranged in a ring, IR pass filters detect infrared only, hardware sync at μs precision</p>
</div>
<div class="pipeline-arrow">↓</div>
<div class="pipeline-step">
<div class="pipeline-step-title">2. PoE Network</div>
<p class="pipeline-step-desc">Single Cat6 cable carries power + data, star topology connection to switch</p>
</div>
<div class="pipeline-arrow">↓</div>
<div class="pipeline-step">
<div class="pipeline-step-title">3. Camera Onboard Processing → 2D Centroids</div>
<p class="pipeline-step-desc">IR LED emission → marker reflection received → thresholding → blob detection → sub-pixel centroid calculation → coordinates transmitted</p>
</div>
<div class="pipeline-arrow">↓</div>
<div class="pipeline-step">
<div class="pipeline-step-title">4. Calibration</div>
<p class="pipeline-step-desc">Wanding to determine camera intrinsic/extrinsic parameters, ground plane to define coordinate system</p>
</div>
<div class="pipeline-arrow">↓</div>
<div class="pipeline-step">
<div class="pipeline-step-title">5. 2D → 3D Triangulation</div>
<p class="pipeline-step-desc">Ray intersection from multiple cameras' 2D coordinates + least squares optimization to reconstruct 3D coordinates</p>
</div>
<div class="pipeline-arrow">↓</div>
<div class="pipeline-step">
<div class="pipeline-step-title">6. Marker Labeling</div>
<p class="pipeline-step-desc">Template matching + predictive tracking to assign marker names to each 3D point</p>
</div>
<div class="pipeline-arrow">↓</div>
<div class="pipeline-step">
<div class="pipeline-step-title">7. Skeleton Solving</div>
<p class="pipeline-step-desc">Based on T-pose + ROM calibration, inverse kinematics to calculate joint positions and rotations</p>
</div>
<div class="pipeline-arrow">↓</div>
<div class="pipeline-step">
<div class="pipeline-step-title">8. Real-Time Streaming · Data Output</div>
<p class="pipeline-step-desc">Real-time transmission to Unity/Unreal/MotionBuilder via NatNet/VRPN, recording in FBX/BVH/C3D</p>
</div>
<div class="pipeline-arrow">↓</div>
<div class="pipeline-step">
<div class="pipeline-step-title">9. Post-Processing</div>
<p class="pipeline-step-desc">Gap filling · smoothing · marker swap correction · retargeting</p>
</div>
<div class="pipeline-arrow">↓</div>
<div class="pipeline-step">
<div class="pipeline-step-title">Final Output</div>
<p class="pipeline-step-desc">Applied to game cinematics · VTuber live · video content (total latency approx. 8–14ms)</p>
</div>
</div>
<p>The camera does not send raw footage to the PC — instead, the camera calculates marker coordinates internally and sends only those, while the PC reconstructs them in 3D and maps them to a skeleton. This is the core principle of optical motion capture.</p>
<hr>
<h2>Frequently Asked Questions (FAQ)</h2>
<p><strong>Q. How is an optical motion capture camera different from a regular camera?</strong></p>
<p>Regular cameras capture full-color video, but motion capture cameras are specialized for the infrared (IR) spectrum. They illuminate markers with IR LEDs, detect only reflected light, and internally calculate the markers&#39; 2D coordinates, transmitting only coordinate data to the PC.</p>
<p><strong>Q. Is there a length limit for PoE cables?</strong></p>
<p>According to the Ethernet standard, PoE cables support a <strong>maximum of 100m</strong>. Most motion capture studios easily fall within this range.</p>
<p><strong>Q. Is a higher camera frame rate always better?</strong></p>
<p>Higher frame rates are advantageous for fast motion tracking and lower latency, but they increase data throughput and may reduce camera resolution. Generally, 120–240fps is sufficient for VTuber live and game motion capture, while 360fps or higher is used for ultra-high-speed motion analysis in sports science and similar fields.</p>
<p><strong>Q. How often do marker swaps occur?</strong></p>
<p>If the markerset is well-designed and there are enough cameras, swaps during real-time capture are rare. However, the probability increases during fast movements or when markers are close together (such as hand clasping), and these sections are corrected in post-processing.</p>
<p><strong>Q. If 2 cameras are enough for triangulation, why install 30?</strong></p>
<p>Two cameras is merely the theoretical minimum. In practice, you must account for occlusion (marker obstruction), accuracy variations based on camera angle, and redundancy. With 30 cameras deployed, every marker is always seen by multiple cameras, enabling stable and accurate tracking.</p>
<p><strong>Q. How often does calibration need to be done?</strong></p>
<p>Typically, calibration is performed once at the start of each shooting day. However, during extended sessions, calibration can drift due to temperature changes or minor camera movement, so recalibration is recommended during 4–6 hour continuous shoots. Using OptiTrack Motive&#39;s Continuous Calibration feature allows real-time correction even during capture.</p>
<p><strong>Q. Is it not allowed to wear shiny clothing?</strong></p>
<p>Because motion capture cameras detect infrared reflections, shiny materials (metal decorations, sequins, glossy synthetic fabrics, etc.) can reflect infrared light and create ghost markers. Wearing a dedicated mocap suit or comfortable clothing made of matte materials is best.</p>
<hr>
<p>If you have further questions about the technical structure of optical motion capture, feel free to ask on our <a href="/contact">contact page</a>. If you&#39;d like to experience it firsthand at Mingle Studio, check out our <a href="/services">services page</a>.</p>
</div>
</div>
<div class="blog-post-footer">
<div class="container">
<a href="/en/devlog" class="blog-back-btn"><i class="fas fa-arrow-left"></i> ← Back to list</a>
</div>
</div>
</article>
</main>
<div id="footer-placeholder"></div>
<script src="/js/i18n.js"></script>
<script src="/js/common.js"></script>
</body>
</html>

BIN
en/devlog/optical-mocap-pipeline/images/calibration-tools.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 27 KiB

BIN
en/devlog/optical-mocap-pipeline/images/continuous-calibration-web.mp4
View File

Binary file not shown.

BIN
en/devlog/optical-mocap-pipeline/images/marker-labeling.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 895 KiB

BIN
en/devlog/optical-mocap-pipeline/images/motive-2d-centroid.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 26 KiB

BIN
en/devlog/optical-mocap-pipeline/images/poe-switch.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 350 KiB

BIN
en/devlog/optical-mocap-pipeline/images/post-processing.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 730 KiB

BIN
en/devlog/optical-mocap-pipeline/images/realtime-streaming.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.9 MiB

BIN
en/devlog/optical-mocap-pipeline/images/rom-1.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 16 KiB

BIN
en/devlog/optical-mocap-pipeline/images/rom-2.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 16 KiB

BIN
en/devlog/optical-mocap-pipeline/images/rom-3.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 15 KiB

BIN
en/devlog/optical-mocap-pipeline/images/rom-4.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 15 KiB

BIN
en/devlog/optical-mocap-pipeline/images/rom-grid.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 60 KiB

BIN
en/devlog/optical-mocap-pipeline/images/thumbnail.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 895 KiB

330
en/gallery.html
View File

@ -1,330 +0,0 @@
<!DOCTYPE html><html lang="en"><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>Studio Gallery - 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/en/gallery">
<!-- Theme Color -->
<meta name="theme-color" content="#ff8800">
<!-- SEO 메타 태그 -->
<meta name="description" content="Mingle Studio Gallery - See our motion capture studio facilities and spaces in photos">
<meta name="keywords" content="모션캡쳐 스튜디오, 갤러리, 시설 사진, OptiTrack 카메라, 인천테크노밸리">
<meta name="author" content="밍글 스튜디오">
<!-- Open Graph -->
<meta property="og:title" content="Studio Gallery - Mingle Studio">
<meta property="og:description" content="30 OptiTrack cameras and an 8×7m large capture space. See the actual facilities and equipment of Incheon's only motion capture studio.">
<meta property="og:url" content="https://minglestudio.co.kr/gallery">
<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?v=20260313">
<link rel="stylesheet" href="/css/gallery.css">
<link rel="alternate" hreflang="ko" href="https://minglestudio.co.kr/gallery">
<link rel="alternate" hreflang="en" href="https://minglestudio.co.kr/en/gallery">
<link rel="alternate" hreflang="ja" href="https://minglestudio.co.kr/ja/gallery">
<link rel="alternate" hreflang="zh" href="https://minglestudio.co.kr/zh/gallery">
<link rel="alternate" hreflang="x-default" href="https://minglestudio.co.kr/gallery">
</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">Skip to content</a>
<div id="header-placeholder">
<!-- 공통 헤더 컴포넌트 -->
<nav class="navbar" aria-label="메인 내비게이션">
<div class="nav-container">
<div class="nav-logo">
<a href="/en/">
<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="/en/about" class="nav-link" data-i18n="header.nav.about">About</a></li>
<li><a href="/en/services" class="nav-link" data-i18n="header.nav.services">Services</a></li>
<li><a href="/en/portfolio" class="nav-link" data-i18n="header.nav.portfolio">Portfolio</a></li>
<li><a href="/en/gallery" class="nav-link" data-i18n="header.nav.gallery">Gallery</a></li>
<li><a href="/schedule" class="nav-link" data-i18n="header.nav.schedule">Schedule</a></li>
<li><a href="/devlog" class="nav-link" data-i18n="header.nav.devlog">DevLog</a></li>
<li><a href="/en/contact" class="nav-link" data-i18n="header.nav.contact">Contact</a></li>
<li><a href="/en/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="Select language" 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">Take a look at Mingle Studio's actual spaces through photos</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">Exterior View (Curtains 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">Exterior View (Curtains 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">Operating/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">Powder Room (Studio Connected)</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">Changing Room (Interior)</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">Changing Room (Exterior)</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">High-Quality 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">Motion Capture Space 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">Motion Capture Space 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">Motion Capture Space 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">Motion Capture Space 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">Drag to explore the studio in 360 degrees</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">Click to experience in 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">Studio Panorama (Curtains Open)</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">Click to experience in 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">Studio Panorama (Curtains Closed)</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">Company Info</h3>
<ul class="footer-list">
<li><strong data-i18n="footer.companyName">Mingle Studio</strong></li>
<li data-i18n="footer.ceo">CEO: 김희진</li>
<li data-i18n="footer.businessNumber">Business Registration No.: 208-12-73755</li>
</ul>
</div>
<div class="footer-section">
<h3 class="footer-heading" data-i18n="footer.contact">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">Business Inquiry</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">Reservation Inquiry</span></a></li>
</ul>
</div>
<div class="footer-section">
<h3 class="footer-heading" data-i18n="footer.directions">Directions</h3>
<ul class="footer-list">
<li><i class="fa-solid fa-location-dot" aria-hidden="true"></i> <span data-i18n="footer.address">236, Jubuto-ro, Bupyeong-gu, Incheon</span></li>
<li data-i18n="footer.addressDetail">Incheon Techno Valley U1 Center, Bldg. A, Room 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> minglestudio@minglestudio.co.kr</a></li>
<li><a href="mailto:help@minglestudio.co.kr"><i class="fa-solid fa-envelope" aria-hidden="true"></i> help@minglestudio.co.kr</a></li>
<li><a href="https://discord.com/users/1402264505110495354" target="_blank"><i class="fa-brands fa-discord" aria-hidden="true"></i> minglestudio_mocap</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?v=20260313"></script>
<script src="/js/gallery.js"></script>
</body></html>

1025
en/index.html
View File

File diff suppressed because it is too large Load Diff

735
en/portfolio.html
View File

@ -1,735 +0,0 @@
<!DOCTYPE html><html lang="en"><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>Portfolio - 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/en/portfolio">
<!-- Theme Color -->
<meta name="theme-color" content="#ff8800">
<!-- SEO 메타 태그 -->
<meta name="description" content="Mingle Studio Portfolio - A collection of YouTube content, VTuber broadcasts, and Shorts videos created with motion capture technology">
<meta name="keywords" content="모션캡쳐 포트폴리오, 버튜버 방송, YouTube 영상, 3D 모션, 실시간 스트리밍">
<meta name="author" content="밍글 스튜디오">
<!-- Open Graph -->
<meta property="og:title" content="Portfolio - Mingle Studio">
<meta property="og:description" content="Music videos, short-form content, VTuber broadcasts, and more produced at our motion capture studio. High-quality motion capture services powered by OptiTrack.">
<meta property="og:url" content="https://minglestudio.co.kr/portfolio">
<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="모션캡처 스튜디오에서 제작된 뮤직비디오, 숏폼, 버튜버 방송 등 다양한 영상 콘텐츠. 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">
<!-- 폰트 -->
<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">
<!-- CSS -->
<link rel="stylesheet" href="/css/common.css?v=20260313">
<link rel="stylesheet" href="/css/portfolio.css">
<!-- SOOP VOD 구조화 데이터 -->
<script type="application/ld+json">
[{
"@context": "https://schema.org",
"@type": "VideoObject",
"name": "250510 춤짱자매즈 모캡 합방 (w. 호발) | SOOP VOD",
"description": "밍글 스튜디오에서 진행된 춤짱자매즈 모션캡쳐 합방 방송",
"thumbnailUrl": "https://minglestudio.co.kr/images/logo/mingle-OG.png",
"uploadDate": "2025-05-10T00:00:00+09:00",
"embedUrl": "https://vod.sooplive.co.kr/player/159683673"
},
{
"@context": "https://schema.org",
"@type": "VideoObject",
"name": "[크로아] 링피트 치요X마늘 3D 모션캡쳐 합방 | SOOP VOD",
"description": "크로아 링피트 치요X마늘 3D 모션캡쳐 합방 방송",
"thumbnailUrl": "https://minglestudio.co.kr/images/logo/mingle-OG.png",
"uploadDate": "2025-09-01T00:00:00+09:00",
"embedUrl": "https://vod.sooplive.co.kr/player/169085307"
},
{
"@context": "https://schema.org",
"@type": "VideoObject",
"name": "[크로아] 크리스마스 치요X마늘 모션캡쳐 합방+커버곡 공개 | SOOP VOD",
"description": "크로아 크리스마스 치요X마늘 모션캡쳐 합방 및 커버곡 공개 방송",
"thumbnailUrl": "https://minglestudio.co.kr/images/logo/mingle-OG.png",
"uploadDate": "2025-12-25T00:00:00+09:00",
"embedUrl": "https://vod.sooplive.co.kr/player/181746237"
},
{
"@context": "https://schema.org",
"@type": "VideoObject",
"name": "뉴걸의 첫 모캡방송! 춤 못 추면 댄스 방송 하면 안 되나요? | SOOP VOD",
"description": "뉴걸의 첫 모션캡쳐 댄스 방송",
"thumbnailUrl": "https://minglestudio.co.kr/images/logo/mingle-OG.png",
"uploadDate": "2025-05-01T00:00:00+09:00",
"embedUrl": "https://vod.sooplive.co.kr/player/159299033"
},
{
"@context": "https://schema.org",
"@type": "VideoObject",
"name": "첫 모캡 방송! | SOOP VOD",
"description": "미르의 첫 모션캡쳐 방송",
"thumbnailUrl": "https://minglestudio.co.kr/images/logo/mingle-OG.png",
"uploadDate": "2025-05-01T00:00:00+09:00",
"embedUrl": "https://vod.sooplive.co.kr/player/159808721"
},
{
"@context": "https://schema.org",
"@type": "VideoObject",
"name": "크로아) 치요 X 마늘 3D 모션 캡쳐 합방 | SOOP VOD",
"description": "치요X마늘 3D 모션캡쳐 합방 방송",
"thumbnailUrl": "https://minglestudio.co.kr/images/logo/mingle-OG.png",
"uploadDate": "2025-05-01T00:00:00+09:00",
"embedUrl": "https://vod.sooplive.co.kr/player/159205533"
}]
</script>
<link rel="alternate" hreflang="ko" href="https://minglestudio.co.kr/portfolio">
<link rel="alternate" hreflang="en" href="https://minglestudio.co.kr/en/portfolio">
<link rel="alternate" hreflang="ja" href="https://minglestudio.co.kr/ja/portfolio">
<link rel="alternate" hreflang="zh" href="https://minglestudio.co.kr/zh/portfolio">
<link rel="alternate" hreflang="x-default" href="https://minglestudio.co.kr/portfolio">
</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">Skip to content</a>
<!-- 헤더 -->
<div id="header-placeholder">
<!-- 공통 헤더 컴포넌트 -->
<nav class="navbar" aria-label="메인 내비게이션">
<div class="nav-container">
<div class="nav-logo">
<a href="/en/">
<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="/en/about" class="nav-link" data-i18n="header.nav.about">About</a></li>
<li><a href="/en/services" class="nav-link" data-i18n="header.nav.services">Services</a></li>
<li><a href="/en/portfolio" class="nav-link" data-i18n="header.nav.portfolio">Portfolio</a></li>
<li><a href="/en/gallery" class="nav-link" data-i18n="header.nav.gallery">Gallery</a></li>
<li><a href="/schedule" class="nav-link" data-i18n="header.nav.schedule">Schedule</a></li>
<li><a href="/devlog" class="nav-link" data-i18n="header.nav.devlog">DevLog</a></li>
<li><a href="/en/contact" class="nav-link" data-i18n="header.nav.contact">Contact</a></li>
<li><a href="/en/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="Select language" 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="portfolio.pageHeader.title">Portfolio</h1>
<p data-i18n="portfolio.pageHeader.desc">Motion capture content produced and collaborated on at Mingle Studio</p>
</div>
</section>
<!-- YouTube 채널 링크 -->
<section class="section">
<div class="container">
<div class="youtube-channel-card">
<div class="channel-info">
<div class="channel-icon">📺</div>
<div class="channel-details">
<h2 data-i18n="portfolio.channel.title">Mingle Studio Official Channel</h2>
<p data-i18n="portfolio.channel.desc">Check out our latest motion capture content and production process on YouTube</p>
</div>
</div>
<a href="https://www.youtube.com/@minglestudio_mocap" target="_blank" class="btn btn-primary" data-i18n="portfolio.channel.btn">Visit YouTube Channel</a>
</div>
</div>
</section>
<!-- 포트폴리오 탭 네비게이션 -->
<section class="section">
<div class="container">
<div class="portfolio-tabs">
<div class="tab-buttons" role="tablist" aria-label="포트폴리오 카테고리">
<button class="tab-btn active" id="tab-individual" data-tab="individual" role="tab" aria-selected="true" aria-controls="individual" data-i18n="portfolio.tabs.individual">Individual Creators</button>
<button class="tab-btn" id="tab-corporate" data-tab="corporate" role="tab" aria-selected="false" aria-controls="corporate" data-i18n="portfolio.tabs.corporate">Corporate Projects</button>
</div>
</div>
</div>
</section>
<!-- 개인 크리에이터 포트폴리오 -->
<div class="tab-content active" id="individual" role="tabpanel" aria-labelledby="tab-individual">
<!-- Long-Form 콘텐츠 - 개인 -->
<section class="section bg-light">
<div class="container">
<div class="section-header">
<h2 data-i18n="portfolio.longform.title">Long-Form Content</h2>
<p data-i18n="portfolio.longform.desc">Motion capture projects by individual creators</p>
</div>
<div class="video-grid longform-grid">
<div class="video-card featured">
<div class="video-wrapper">
<iframe data-src="https://www.youtube.com/embed/jQTi8adbvaM" title="밍글 스튜디오 모션캡쳐 포트폴리오" allowfullscreen="" loading="lazy"></iframe>
</div>
<div class="video-info">
<h3>머쉬베놈 (MUSHVENOM) - 돌림판 (feat. 신빠람 이박사) 🍓 CROA COVER</h3>
<p>CROA가 커버한 머쉬베놈의 돌림판</p>
<div class="video-tags">
<span class="tag">커버</span>
<span class="tag">CROA</span>
<span class="tag">머쉬베놈</span>
</div>
</div>
</div>
<div class="video-card">
<div class="video-wrapper">
<iframe data-src="https://www.youtube.com/embed/FecqTyUU6y0" title="밍글 스튜디오 모션캡쳐 콘텐츠 2" allowfullscreen="" loading="lazy"></iframe>
</div>
<div class="video-info">
<h3>「 QWER - 가짜아이돌 (FAKE IDOL) 」 COVER BY VENY 【CROA】</h3>
<p>VENY가 커버한 QWER의 가짜아이돌</p>
<div class="video-tags">
<span class="tag">커버</span>
<span class="tag">CROA</span>
<span class="tag">VENY</span>
</div>
</div>
</div>
<div class="video-card">
<div class="video-wrapper">
<iframe data-src="https://www.youtube.com/embed/ryliwrc0Yms" title="밍글 스튜디오 모션캡쳐 콘텐츠 3" allowfullscreen="" loading="lazy"></iframe>
</div>
<div class="video-info">
<h3>aesoopa 에숲파 'Black Mamba' MV</h3>
<p>에숲파의 Black Mamba 뮤직비디오</p>
<div class="video-tags">
<span class="tag">MV</span>
<span class="tag">에숲파</span>
<span class="tag">Black Mamba</span>
</div>
</div>
</div>
<div class="video-card">
<div class="video-wrapper">
<iframe data-src="https://www.youtube.com/embed/nH7IdgqhugQ" title="QWER 내 이름 맑음 CROA 커버" allowfullscreen="" loading="lazy"></iframe>
</div>
<div class="video-info">
<h3>【CROA】 QWER - 내 이름 맑음 (feat.치치) 🍓 CROA COVER</h3>
<p>CROA가 커버한 QWER의 내 이름 맑음</p>
<div class="video-tags">
<span class="tag">커버</span>
<span class="tag">CROA</span>
<span class="tag">QWER</span>
</div>
</div>
</div>
<div class="video-card">
<div class="video-wrapper">
<iframe data-src="https://www.youtube.com/embed/YO7-z_JxSjY" title="첫사랑 (백아) | 치요 cover" allowfullscreen="" loading="lazy"></iframe>
</div>
<div class="video-info">
<h3>첫사랑 (백아) | 치요 cover</h3>
<p>치요가 커버한 백아의 첫사랑</p>
<div class="video-tags">
<span class="tag">치요</span>
<span class="tag">cover</span>
<span class="tag">크로아</span>
</div>
</div>
</div>
<div class="video-card">
<div class="video-wrapper">
<iframe data-src="https://www.youtube.com/embed/hRBup9lEyiY" title="Merry &amp; Happy (트와이스) | 치요 x 마늘 Cover" allowfullscreen="" loading="lazy"></iframe>
</div>
<div class="video-info">
<h3>Merry &amp; Happy (트와이스) | 치요 x 마늘 Cover</h3>
<p>치요&amp;마늘이 커버한 트와이스의 Merry &amp; Happy</p>
<div class="video-tags">
<span class="tag">치요</span>
<span class="tag">마늘</span>
<span class="tag">트와이스</span>
<span class="tag">크리스마스</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Shorts 콘텐츠 -->
<section class="section">
<div class="container">
<div class="section-header">
<h2 data-i18n="portfolio.shorts.title">Shorts Content</h2>
<p data-i18n="portfolio.shorts.desc">Short, impactful motion capture moments</p>
</div>
<div class="video-grid shorts-grid">
<div class="video-card shorts">
<div class="video-wrapper shorts-wrapper">
<iframe data-src="https://www.youtube.com/embed/OmpqKhMrb-U" title="모션캡쳐 Shorts 1" allowfullscreen="" loading="lazy"></iframe>
</div>
<div class="video-info">
<h4>스ㅡㅡㅡㅡㅡㅡㅡ게 💕STARGAZERS CHALLENGE</h4>
</div>
</div>
<div class="video-card shorts">
<div class="video-wrapper shorts-wrapper">
<iframe data-src="https://www.youtube.com/embed/hKwGjPfULFI" title="모션캡쳐 Shorts 2" allowfullscreen="" loading="lazy"></iframe>
</div>
<div class="video-info">
<h4>🤎 곰이의 이세계 아이돌 - ELEVATE 챌린지 🤎</h4>
</div>
</div>
<div class="video-card shorts">
<div class="video-wrapper shorts-wrapper">
<iframe data-src="https://www.youtube.com/embed/_blWj7UQtRc" title="모션캡쳐 Shorts 3" allowfullscreen="" loading="lazy"></iframe>
</div>
<div class="video-info">
<h4>Memory 깡담비 #하이라이트 #shorts</h4>
</div>
</div>
<div class="video-card shorts">
<div class="video-wrapper shorts-wrapper">
<iframe data-src="https://www.youtube.com/embed/ZWftEFNlvVc" title="일본 유행 챌린지 Shorts" allowfullscreen="" loading="lazy"></iframe>
</div>
<div class="video-info">
<h4>🍓요즘 일본에서 유행하는 챌린지 #vtuber #shorts</h4>
</div>
</div>
<div class="video-card shorts">
<div class="video-wrapper shorts-wrapper">
<iframe data-src="https://www.youtube.com/embed/xZS1e465wjc" title="Trouble 챌린지 Shorts" allowfullscreen="" loading="lazy"></iframe>
</div>
<div class="video-info">
<h4>🍓trouble 챌린지 #trouble #challenge</h4>
</div>
</div>
<div class="video-card shorts">
<div class="video-wrapper shorts-wrapper">
<iframe data-src="https://www.youtube.com/embed/X3a_4GWU3V8" title="그르르 챌린지 Shorts" allowfullscreen="" loading="lazy"></iframe>
</div>
<div class="video-info">
<h4>🍓그르르 챌린지 grrr#shorts</h4>
</div>
</div>
<div class="video-card shorts">
<div class="video-wrapper shorts-wrapper">
<iframe data-src="https://www.youtube.com/embed/6tsYJ0z2q4s" title="뽀로로도 놀란 귀여움 바라밤챌린지" allowfullscreen="" loading="lazy"></iframe>
</div>
<div class="video-info">
<h4>뽀로로도 놀란 귀여움💙 #바라밤챌린지 #바라밤 #쿠아와친구들</h4>
</div>
</div>
</div>
</div>
</section>
<!-- 실시간 방송 예시 -->
<section class="section bg-gradient">
<div class="container">
<div class="section-header">
<h2 data-i18n="portfolio.broadcast.title">Live Broadcast Examples</h2>
<p data-i18n="portfolio.broadcast.desc">Real-time motion capture broadcasts by VTubers and streamers</p>
</div>
<div class="broadcast-notice">
<div class="notice-icon"><i class="fa-solid fa-circle" aria-hidden="true" style="color: #ef4444;"></i></div>
<div class="notice-content">
<h3 data-i18n="portfolio.broadcast.noticeTitle">Live Motion Capture Broadcasting</h3>
<p data-i18n="portfolio.broadcast.noticeDesc">Experience high-quality virtual content through live motion capture broadcasts at Mingle Studio</p>
</div>
</div>
<div class="video-grid broadcast-grid">
<div class="video-card broadcast">
<div class="video-wrapper">
<iframe src="https://vod.sooplive.co.kr/player/159808721" title="미르 첫 모캡 방송" allowfullscreen=""></iframe>
</div>
<div class="video-info">
<h4>미르 첫 모캡 방송</h4>
<div class="broadcast-info">
<span class="platform">SOOP</span>
<span class="streamer">미르</span>
</div>
</div>
</div>
<div class="video-card broadcast">
<div class="video-wrapper">
<iframe src="https://vod.sooplive.co.kr/player/159683673" title="춤짱자매즈 모캡 합방" allowfullscreen=""></iframe>
</div>
<div class="video-info">
<h4>춤짱자매즈 모캡 합방 (w. 호발)</h4>
<div class="broadcast-info">
<span class="platform">SOOP</span>
<span class="streamer">흰콕 &amp; 호발</span>
</div>
</div>
</div>
<div class="video-card broadcast">
<div class="video-wrapper">
<iframe src="https://vod.sooplive.co.kr/player/159205533" title="치요 X 마늘 3D 모션캡쳐 합방" allowfullscreen=""></iframe>
</div>
<div class="video-info">
<h4>치요 X 마늘 3D 모션캡쳐 합방</h4>
<div class="broadcast-info">
<span class="platform">SOOP</span>
<span class="streamer">치요 &amp; 마늘</span>
</div>
</div>
</div>
<div class="video-card broadcast">
<div class="video-wrapper">
<iframe src="https://vod.sooplive.co.kr/player/159299033" title="뉴걸의 첫 모캡방송" allowfullscreen=""></iframe>
</div>
<div class="video-info">
<h4>뉴걸의 첫 모캡방송!</h4>
<p class="video-desc">춤 못 추면 댄스방송 하면 안 되나요?</p>
<div class="broadcast-info">
<span class="platform">SOOP</span>
<span class="streamer">뉴걸</span>
</div>
</div>
</div>
<div class="video-card broadcast">
<div class="video-wrapper">
<iframe src="https://vod.sooplive.co.kr/player/169085307" title="크로아 링피트 치요X마늘 3D 모션캡쳐 합방" allowfullscreen=""></iframe>
</div>
<div class="video-info">
<h4>[크로아] 링피트 치요X마늘 3D 모션캡쳐 합방</h4>
<div class="broadcast-info">
<span class="platform">SOOP</span>
<span class="streamer">치요 &amp; 마늘</span>
</div>
</div>
</div>
<div class="video-card broadcast">
<div class="video-wrapper">
<iframe src="https://vod.sooplive.co.kr/player/181746237" title="크로아 크리스마스 치요X마늘 모션캡쳐 합방+커버곡 공개" allowfullscreen=""></iframe>
</div>
<div class="video-info">
<h4>[크로아] 크리스마스 치요X마늘 모션캡쳐 합방+커버곡 공개</h4>
<div class="broadcast-info">
<span class="platform">SOOP</span>
<span class="streamer">치요 &amp; 마늘</span>
</div>
</div>
</div>
</div>
</div>
</section></div>
<!-- 개인 크리에이터 포트폴리오 끝 -->
<!-- 기업 프로젝트 포트폴리오 -->
<div class="tab-content" id="corporate" role="tabpanel" aria-labelledby="tab-corporate">
<section class="section bg-light">
<div class="container">
<div class="section-header">
<h2 data-i18n="portfolio.corporate.title">Corporate Projects</h2>
<p data-i18n="portfolio.corporate.desc">Corporate and commercial motion capture projects</p>
</div>
<!-- IXIA 기업 프로젝트 -->
<div class="corporate-project-showcase">
<div class="project-header">
<div class="project-logo">
<h3>아이시아(IXIA)</h3>
<p data-i18n="portfolio.corporate.ixiaDesc">Motion capture production for virtual idol group</p>
</div>
<div class="project-tags">
<span class="tag corporate">기업 프로젝트</span>
<span class="tag">버추얼 아이돌</span>
<span class="tag">엔터테인먼트</span>
</div>
</div>
<!-- Long-Form 콘텐츠 -->
<div class="project-section">
<h4 data-i18n="portfolio.corporate.mvSection">Music Video Production</h4>
<div class="video-grid corporate-longform">
<div class="video-card featured">
<div class="video-wrapper">
<iframe data-src="https://www.youtube.com/embed/OUdsyxPzS14" title="아이시아(IXIA) '꼭꼭 숨어라' Part.2 MV (Performance ver.)" allowfullscreen="" loading="lazy"></iframe>
</div>
<div class="video-info">
<h3>아이시아(IXIA) '꼭꼭 숨어라' Part.2 MV (Performance ver.)</h3>
<p>아이시아의 꼭꼭 숨어라 뮤직비디오 퍼포먼스 버전</p>
<div class="video-tags">
<span class="tag">뮤직비디오</span>
<span class="tag">퍼포먼스</span>
<span class="tag">IXIA</span>
</div>
</div>
</div>
</div>
</div>
<!-- Shorts 콘텐츠 -->
<div class="project-section">
<h4 data-i18n="portfolio.corporate.shortsSection">Short-Form Video Production</h4>
<div class="video-grid corporate-shorts">
<div class="video-card shorts">
<div class="video-wrapper shorts-wrapper">
<iframe data-src="https://www.youtube.com/embed/C_EwalifDGk" title="꼭꼭 숨어라 릴레이 댄스 - 아이시아랑 숨바꼭질 할 사람" allowfullscreen="" loading="lazy"></iframe>
</div>
<div class="video-info">
<h4>✨꼭꼭 숨어라 릴레이 댄스✨</h4>
<p>아이시아랑 숨바꼭질 할 사람 🙋‍♀️🙋‍♀️</p>
</div>
</div>
<div class="video-card shorts">
<div class="video-wrapper shorts-wrapper">
<iframe data-src="https://www.youtube.com/embed/yZPuVDplajo" title="루화가 제일 싫어하는 말은❓착하다는 말… 제일 싫어 💢💢" allowfullscreen="" loading="lazy"></iframe>
</div>
<div class="video-info">
<h4>루화가 제일 싫어하는 말은❓</h4>
<p>착하다는 말... 제일 싫어 💢💢</p>
</div>
</div>
</div>
</div>
<!-- 라이브 방송 -->
<div class="project-section">
<h4 data-i18n="portfolio.corporate.liveSection">Live Broadcasting</h4>
<div class="video-grid corporate-live">
<div class="video-card broadcast">
<div class="video-wrapper">
<iframe data-src="https://www.youtube.com/embed/KNABwaYmuA8" title="IXIA Debut Live Showcase | 아이시아 데뷔 쇼케이스: TIME TO SAY IXIA" allowfullscreen="" loading="lazy"></iframe>
</div>
<div class="video-info">
<h4>✨IXIA 데뷔 라이브 쇼케이스✨</h4>
<p class="video-desc">아이시아 데뷔 쇼케이스: TIME TO SAY IXIA</p>
<div class="broadcast-info">
<span class="platform">YouTube</span>
<span class="streamer">아이시아</span>
</div>
</div>
</div>
<div class="video-card broadcast">
<div class="video-wrapper">
<iframe data-src="https://www.youtube.com/embed/FXnH-43NpFM?start=1725" title="아이시아의 라이브룸 💖 플레이리스트 대공개" allowfullscreen="" loading="lazy"></iframe>
</div>
<div class="video-info">
<h4>🎤 아이시아의 라이브룸</h4>
<p class="video-desc">플레이리스트 대공개 라이브 방송</p>
<div class="broadcast-info">
<span class="platform">YouTube</span>
<span class="streamer">아이시아</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<!-- 기업 프로젝트 포트폴리오 끝 -->
<!-- CTA -->
<section class="cta-section">
<div class="container text-center">
<h2 data-i18n="portfolio.cta.title">Your Content Could Be Here</h2>
<p data-i18n="portfolio.cta.desc">Be the next featured creator with Mingle Studio</p>
<div class="cta-buttons">
<a href="/en/contact" class="btn btn-primary btn-lg" data-i18n="portfolio.cta.btnInquiry">Inquire About Your Project</a>
<a href="/en/services" class="btn btn-outline btn-lg" data-i18n="portfolio.cta.btnServices">Explore Services</a>
</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">Company Info</h3>
<ul class="footer-list">
<li><strong data-i18n="footer.companyName">Mingle Studio</strong></li>
<li data-i18n="footer.ceo">CEO: 김희진</li>
<li data-i18n="footer.businessNumber">Business Registration No.: 208-12-73755</li>
</ul>
</div>
<div class="footer-section">
<h3 class="footer-heading" data-i18n="footer.contact">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">Business Inquiry</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">Reservation Inquiry</span></a></li>
</ul>
</div>
<div class="footer-section">
<h3 class="footer-heading" data-i18n="footer.directions">Directions</h3>
<ul class="footer-list">
<li><i class="fa-solid fa-location-dot" aria-hidden="true"></i> <span data-i18n="footer.address">236, Jubuto-ro, Bupyeong-gu, Incheon</span></li>
<li data-i18n="footer.addressDetail">Incheon Techno Valley U1 Center, Bldg. A, Room 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> minglestudio@minglestudio.co.kr</a></li>
<li><a href="mailto:help@minglestudio.co.kr"><i class="fa-solid fa-envelope" aria-hidden="true"></i> help@minglestudio.co.kr</a></li>
<li><a href="https://discord.com/users/1402264505110495354" target="_blank"><i class="fa-brands fa-discord" aria-hidden="true"></i> minglestudio_mocap</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?v=20260313"></script>
<script src="/js/portfolio.js"></script>
</body></html>

252
en/props.html
View File

@ -1,252 +0,0 @@
<!DOCTYPE html><html lang="en"><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>props.meta.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">
<!-- Theme Color -->
<meta name="theme-color" content="#ff8800">
<!-- SEO -->
<meta name="description" content="props.meta.description">
<meta name="robots" content="noindex, nofollow">
<!-- 폰트 -->
<link href="https://hangeul.pstatic.net/hangeul_static/css/nanum-square.css" rel="stylesheet">
<!-- CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" integrity="sha512-Avb2QiuDEEvB4bZJYdft2mNjVShBftLGPg8YJ04IY4YZ7C7BC9XkjsTBdQ1B8TAVxT2BOxqIRkVvNs/FNRs0w==" crossorigin="anonymous" referrerpolicy="no-referrer">
<link rel="stylesheet" href="/css/common.css?v=20260313">
<link rel="stylesheet" href="/css/props.css">
<link rel="alternate" hreflang="ko" href="https://minglestudio.co.kr/props">
<link rel="alternate" hreflang="en" href="https://minglestudio.co.kr/en/props">
<link rel="alternate" hreflang="ja" href="https://minglestudio.co.kr/ja/props">
<link rel="alternate" hreflang="zh" href="https://minglestudio.co.kr/zh/props">
<link rel="alternate" hreflang="x-default" href="https://minglestudio.co.kr/props">
</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) -->
<!-- 헤더 -->
<div id="header-placeholder">
<!-- 공통 헤더 컴포넌트 -->
<nav class="navbar" aria-label="메인 내비게이션">
<div class="nav-container">
<div class="nav-logo">
<a href="/en/">
<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="/en/about" class="nav-link" data-i18n="header.nav.about">About</a></li>
<li><a href="/en/services" class="nav-link" data-i18n="header.nav.services">Services</a></li>
<li><a href="/en/portfolio" class="nav-link" data-i18n="header.nav.portfolio">Portfolio</a></li>
<li><a href="/en/gallery" class="nav-link" data-i18n="header.nav.gallery">Gallery</a></li>
<li><a href="/schedule" class="nav-link" data-i18n="header.nav.schedule">Schedule</a></li>
<li><a href="/devlog" class="nav-link" data-i18n="header.nav.devlog">DevLog</a></li>
<li><a href="/en/contact" class="nav-link" data-i18n="header.nav.contact">Contact</a></li>
<li><a href="/en/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="Select language" 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 class="props-page">
<div class="container">
<!-- 페이지 헤더 -->
<div class="page-header">
<h1>프랍 라이브러리</h1>
<p class="page-description">모션캡처 라이브 방송 서비스에서 사용 가능한 프랍(소품) 목록입니다</p>
<div class="last-updated" id="lastUpdated"></div>
</div>
<!-- 필터 & 검색 -->
<div class="filter-section">
<div class="search-box">
<input type="text" id="searchInput" placeholder="프랍 이름으로 검색..." class="search-input">
<span class="search-icon"><i class="fa-solid fa-magnifying-glass" aria-hidden="true"></i></span>
</div>
<div class="view-options">
<button class="view-btn active" data-view="grid" title="그리드 보기">
<span>▦</span>
</button>
<button class="view-btn" data-view="list" title="리스트 보기">
<span>☰</span>
</button>
</div>
</div>
<!-- 통계 -->
<div class="stats-bar">
<span class="stat-item">
<strong id="totalCount">0</strong>개 프랍
</span>
<span class="stat-item">
<strong id="filteredCount">0</strong>개 표시 중
</span>
</div>
<!-- 프랍 그리드 -->
<div class="props-grid" id="propsGrid">
<!-- 프랍 카드들이 동적으로 추가됨 -->
<div class="loading-placeholder">
<div class="loading-spinner"></div>
<p>프랍 데이터를 불러오는 중...</p>
</div>
</div>
<!-- 데이터 없음 메시지 -->
<div class="no-data" id="noData" style="display: none;">
<div class="no-data-icon"><i class="fa-solid fa-box-open" aria-hidden="true"></i></div>
<h3>프랍 데이터가 없습니다</h3>
<p>Unity에서 프랍 데이터를 업로드해 주세요.</p>
</div>
<!-- 검색 결과 없음 -->
<div class="no-results" id="noResults" style="display: none;">
<div class="no-results-icon"><i class="fa-solid fa-magnifying-glass" aria-hidden="true"></i></div>
<h3>검색 결과가 없습니다</h3>
<p>다른 검색어를 시도해 보세요.</p>
</div>
</div>
</main>
<!-- 이미지 모달 -->
<div class="image-modal" id="imageModal">
<div class="modal-overlay"></div>
<div class="modal-content">
<button class="modal-close" aria-label="닫기">×</button>
<img src="" alt="" class="modal-image" id="modalImage">
<div class="modal-info">
<h3 id="modalTitle"></h3>
<div class="modal-details" id="modalDetails"></div>
</div>
</div>
</div>
<!-- 푸터 -->
<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">Company Info</h3>
<ul class="footer-list">
<li><strong data-i18n="footer.companyName">Mingle Studio</strong></li>
<li data-i18n="footer.ceo">CEO: 김희진</li>
<li data-i18n="footer.businessNumber">Business Registration No.: 208-12-73755</li>
</ul>
</div>
<div class="footer-section">
<h3 class="footer-heading" data-i18n="footer.contact">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">Business Inquiry</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">Reservation Inquiry</span></a></li>
</ul>
</div>
<div class="footer-section">
<h3 class="footer-heading" data-i18n="footer.directions">Directions</h3>
<ul class="footer-list">
<li><i class="fa-solid fa-location-dot" aria-hidden="true"></i> <span data-i18n="footer.address">236, Jubuto-ro, Bupyeong-gu, Incheon</span></li>
<li data-i18n="footer.addressDetail">Incheon Techno Valley U1 Center, Bldg. A, Room 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>
<!-- 백업 푸터 -->
<footer class="site-footer">
<div class="container">
<div style="color:#bbb;font-size:0.98rem;">© 2025 밍글 스튜디오. All rights reserved.</div>
</div>
</footer>
<!-- JavaScript -->
<script src="/js/common.js?v=20260313"></script>
<script src="/js/props.js"></script>
</body></html>

533
en/qna.html
View File

@ -1,533 +0,0 @@
<!DOCTYPE html><html lang="en"><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>FAQ - 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/en/qna">
<!-- Theme Color -->
<meta name="theme-color" content="#ff8800">
<!-- SEO 메타 태그 -->
<meta name="description" content="Mingle Studio FAQ - Frequently asked questions about motion capture studio rental, shooting, and production">
<meta name="keywords" content="모션캡쳐 FAQ, 스튜디오 대관 질문, 촬영 문의, 버튜버 제작 FAQ">
<meta name="author" content="밍글 스튜디오">
<!-- Open Graph -->
<meta property="og:title" content="FAQ - Mingle Studio">
<meta property="og:description" content="Frequently asked questions about motion capture studio rental, shooting, pricing, and reservations. OptiTrack system usage guide.">
<meta property="og:url" content="https://minglestudio.co.kr/qna">
<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="모션캡처 스튜디오 대관, 촬영, 요금, 예약 등에 관한 자주 묻는 질문과 답변. 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">
<!-- 폰트 -->
<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?v=20260313">
<link rel="stylesheet" href="/css/qna.css">
<link rel="alternate" hreflang="ko" href="https://minglestudio.co.kr/qna">
<link rel="alternate" hreflang="en" href="https://minglestudio.co.kr/en/qna">
<link rel="alternate" hreflang="ja" href="https://minglestudio.co.kr/ja/qna">
<link rel="alternate" hreflang="zh" href="https://minglestudio.co.kr/zh/qna">
<link rel="alternate" hreflang="x-default" href="https://minglestudio.co.kr/qna">
</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">Skip to content</a>
<!-- 헤더 -->
<div id="header-placeholder">
<!-- 공통 헤더 컴포넌트 -->
<nav class="navbar" aria-label="메인 내비게이션">
<div class="nav-container">
<div class="nav-logo">
<a href="/en/">
<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="/en/about" class="nav-link" data-i18n="header.nav.about">About</a></li>
<li><a href="/en/services" class="nav-link" data-i18n="header.nav.services">Services</a></li>
<li><a href="/en/portfolio" class="nav-link" data-i18n="header.nav.portfolio">Portfolio</a></li>
<li><a href="/en/gallery" class="nav-link" data-i18n="header.nav.gallery">Gallery</a></li>
<li><a href="/schedule" class="nav-link" data-i18n="header.nav.schedule">Schedule</a></li>
<li><a href="/devlog" class="nav-link" data-i18n="header.nav.devlog">DevLog</a></li>
<li><a href="/en/contact" class="nav-link" data-i18n="header.nav.contact">Contact</a></li>
<li><a href="/en/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="Select language" 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="qna.pageHeader.title">Frequently Asked Questions</h1>
<p data-i18n="qna.pageHeader.desc">Find answers to common questions about using Mingle Studio</p>
</div>
</section>
<!-- FAQ 검색 -->
<section class="section">
<div class="container">
<div class="faq-search">
<div class="search-box">
<label for="faqSearch" class="sr-only">FAQ 검색</label>
<input type="text" id="faqSearch" placeholder="Search for your question..." data-i18n-placeholder="qna.search.placeholder" autocomplete="off">
<button type="button" class="search-btn" aria-label="Search" data-i18n-aria="qna.search.btnLabel"><i class="fa-solid fa-magnifying-glass" aria-hidden="true"></i></button>
</div>
<div class="search-suggestions" id="searchSuggestions"></div>
</div>
</div>
</section>
<!-- FAQ 카테고리 -->
<section class="faq-category-section bg-light">
<div class="container">
<div class="faq-categories">
<button class="category-btn active" data-category="all" data-i18n="qna.categories.all">All</button>
<button class="category-btn" data-category="booking" data-i18n="qna.categories.booking">Booking/Rental</button>
<button class="category-btn" data-category="equipment" data-i18n="qna.categories.equipment">Equipment/Tech</button>
<button class="category-btn" data-category="pricing" data-i18n="qna.categories.pricing">Pricing/Payment</button>
<button class="category-btn" data-category="production" data-i18n="qna.categories.production">Production/Shooting</button>
<button class="category-btn" data-category="streaming" data-i18n="qna.categories.streaming">Streaming</button>
<button class="category-btn" data-category="etc" data-i18n="qna.categories.etc">Other</button>
</div>
</div>
</section>
<!-- FAQ 리스트 -->
<section class="section">
<div class="container">
<div class="faq-list">
<!-- 예약/대관 관련 -->
<div class="faq-item" data-category="booking">
<div class="faq-question">
<h3 data-i18n="qna.faq.q1">How do I book a studio rental?</h3>
<span class="faq-toggle">+</span>
</div>
<div class="faq-answer" data-i18n-html="qna.faq.a1"><p>You can make a reservation through the following methods:</p>
<ul>
<li><strong><i class="fa-solid fa-envelope" aria-hidden="true"></i> Email:</strong> <a href="mailto:help@minglestudio.co.kr?subject=[Studio Reservation Inquiry] Mingle Studio&amp;body=Hello. I would like to inquire about a studio rental reservation at Mingle Studio.%0A%0A■ Basic Information%0A- Preferred Date: (e.g., December 25, 2024)%0A- Preferred Time: (e.g., 2 PM ~ 4 PM, 2 hours)%0A- Number of Participants: %0A- Contact Number: %0A- Email: %0A%0A■ Shooting Information%0A- Purpose: (e.g., VTuber broadcast, game development, video content, etc.)%0A- Expected Content: %0A- Required Equipment: (full-body motion capture / facial capture / other)%0A%0A■ Additional Requests%0A- Special Requirements: %0A- Questions: %0A%0A■ Notes%0A- Minimum Rental: 2 hours ($165, tax included)%0A- Extension: $83 per hour%0A- Payment: Bank transfer or cash (card payment not available)%0A- Cash receipts/tax invoices available%0A%0AWe will respond as soon as possible.%0AThank you.">help@minglestudio.co.kr</a></li>
<li><strong><i class="fa-solid fa-phone" aria-hidden="true"></i> Phone:</strong> 010-9288-9190</li>
</ul>
<div style="margin-top: var(--spacing-md); text-align: center;">
<button id="showEmailFormFAQ" class="btn btn-primary" style="font-size: 0.9rem; padding: 0.5rem 1rem;"><i class="fa-solid fa-envelope" aria-hidden="true"></i> Email Inquiry</button>
</div>
<div id="emailFormFAQ" class="email-form" style="display:none; margin-top: var(--spacing-lg); padding: var(--spacing-lg); border: 1px solid #ddd; border-radius: var(--border-radius); background: #f9f9f9;">
<h4>Email Inquiry Form</h4>
<p>Please copy the form below and send it via email:</p>
<div class="email-template" style="background: white; padding: var(--spacing-md); border-radius: var(--border-radius); font-family: monospace; font-size: 0.9rem; line-height: 1.6;">
<div><strong>Subject:</strong> [Studio Rental Inquiry]</div>
<div><strong>To:</strong> help@minglestudio.co.kr</div>
<br>
<div><strong>1. Name and Affiliation</strong></div>
<div style="color: #666; font-size: 0.85rem;">(For individuals, name only. For companies, please include your name and organization)</div>
<div style="margin: 0.5rem 0; padding: 0.5rem; background: #f0f0f0; border-radius: 4px;">[Please fill in here]</div>
<div><strong>2. Contact Information</strong></div>
<div style="color: #666; font-size: 0.85rem;">(Choose one: phone number, email, or Discord)</div>
<div style="margin: 0.5rem 0; padding: 0.5rem; background: #f0f0f0; border-radius: 4px;">[Please fill in here]</div>
<div><strong>3. Number of Participants</strong></div>
<div style="color: #666; font-size: 0.85rem;">(1-2 recommended, up to 5 people)</div>
<div style="margin: 0.5rem 0; padding: 0.5rem; background: #f0f0f0; border-radius: 4px;">□ 1 □ 2 □ 3 □ 4 □ 5</div>
<div><strong>4. Purpose of Studio Use</strong></div>
<div style="margin: 0.5rem 0; padding: 0.5rem; background: #f0f0f0; border-radius: 4px;">□ Recording □ Other: [Please fill in here]</div>
<div><strong>5. Preferred Rental Date</strong></div>
<div style="color: #666; font-size: 0.85rem;">※ We recommend booking at least 2 weeks in advance</div>
<div style="margin: 0.5rem 0; padding: 0.5rem; background: #f0f0f0; border-radius: 4px;">[Please fill in here]</div>
<div><strong>6. Preferred Time Slot</strong></div>
<div style="color: #666; font-size: 0.85rem;">※ Example: 10 AM ~ 3 PM (5 hours)</div>
<div style="color: #666; font-size: 0.85rem;">※ Late-night rentals (10 PM ~ 8 AM next day) are subject to special rates per internal policy</div>
<div style="margin: 0.5rem 0; padding: 0.5rem; background: #f0f0f0; border-radius: 4px;">[Please fill in here]</div>
</div>
<div style="margin-top: var(--spacing-md); text-align: center;">
<a href="mailto:help@minglestudio.co.kr?subject=[Studio Rental Inquiry]" class="btn btn-primary"><i class="fa-solid fa-envelope" aria-hidden="true"></i> Send Email Now</a>
</div>
</div>
<p>Please contact us at least 2 weeks in advance for smooth preparation.</p></div>
</div>
<div class="faq-item" data-category="booking">
<div class="faq-question">
<h3 data-i18n="qna.faq.q2">Is there a deposit and refund policy?</h3>
<span class="faq-toggle">+</span>
</div>
<div class="faq-answer" data-i18n-html="qna.faq.a2"><p>Here is our refund policy:</p>
<div class="policy-table">
<div class="policy-row">
<span class="policy-time">7 days before reservation</span>
<span class="policy-desc">100% refund</span>
</div>
<div class="policy-row">
<span class="policy-time">3 days before reservation</span>
<span class="policy-desc">70% refund</span>
</div>
<div class="policy-row">
<span class="policy-time">1 day before reservation</span>
<span class="policy-desc">50% refund</span>
</div>
<div class="policy-row">
<span class="policy-time">Same-day cancellation</span>
<span class="policy-desc">No refund</span>
</div>
</div></div>
</div>
<div class="faq-item" data-category="booking">
<div class="faq-question">
<h3 data-i18n="qna.faq.q3">What is the minimum rental time?</h3>
<span class="faq-toggle">+</span>
</div>
<div class="faq-answer" data-i18n-html="qna.faq.a3"><p>The minimum rental is <strong>2 hours</strong>.</p>
<p>Extensions are available in 1-hour increments.</p></div>
</div>
<div class="faq-item" data-category="booking">
<div class="faq-question">
<h3 data-i18n="qna.faq.q4">How far in advance should I book?</h3>
<span class="faq-toggle">+</span>
</div>
<div class="faq-answer" data-i18n-html="qna.faq.a4"><p>Please contact us at least 2 weeks in advance for smooth preparation.</p></div>
</div>
<div class="faq-item" data-category="pricing">
<div class="faq-question">
<h3 data-i18n="qna.faq.q5">Is on-site payment available?</h3>
<span class="faq-toggle">+</span>
</div>
<div class="faq-answer" data-i18n-html="qna.faq.a5"><p>On-site payment is available via cash or bank transfer.</p>
<p>Please note that card payment is not available on-site.</p>
<p>Cash receipts and tax invoices can be issued.</p></div>
</div>
<div class="faq-item" data-category="pricing">
<div class="faq-question">
<h3 data-i18n="qna.faq.q6">Can you issue a tax invoice?</h3>
<span class="faq-toggle">+</span>
</div>
<div class="faq-answer" data-i18n-html="qna.faq.a6"><p>Yes, tax invoice issuance is available.</p></div>
</div>
<!-- 장비/기술 관련 -->
<div class="faq-item" data-category="equipment">
<div class="faq-question">
<h3 data-i18n="qna.faq.q7">What motion capture equipment do you use?</h3>
<span class="faq-toggle">+</span>
</div>
<div class="faq-answer" data-i18n-html="qna.faq.a7"><p>Mingle Studio is equipped with the following professional equipment:</p>
<ul>
<li><strong>OptiTrack Cameras:</strong> 30 units</li>
<li><strong>Hand Tracking:</strong> Rokoko Smart Gloves in use</li>
</ul></div>
</div>
<div class="faq-item" data-category="equipment">
<div class="faq-question">
<h3 data-i18n="qna.faq.q8">Are motion capture suits provided?</h3>
<span class="faq-toggle">+</span>
</div>
<div class="faq-answer" data-i18n-html="qna.faq.a8"><p>Yes, professional motion capture suits and markers are provided free of charge.</p>
<ul>
<li>Various sizes available (S, M, L, XL)</li>
<li>Hygienically maintained in clean condition</li>
<li>You may also bring your own suit</li>
<li>Gloves, headbands, and other accessories included</li>
</ul></div>
</div>
<div class="faq-item" data-category="equipment">
<div class="faq-question">
<h3 data-i18n="qna.faq.q9">How many people can be captured simultaneously?</h3>
<span class="faq-toggle">+</span>
</div>
<div class="faq-answer" data-i18n-html="qna.faq.a9"><p>Up to <strong>5 people</strong> can be captured simultaneously.</p>
<p>Details by number of participants:</p>
<ul>
<li><strong>1 person:</strong> Highest precision capture</li>
<li><strong>2 people:</strong> Optimal for interaction scenes</li>
<li><strong>3-5 people:</strong> Group performance possible</li>
</ul>
<p>The more participants, the more limitations on capture space and accuracy.</p></div>
</div>
<!-- 요금/결제 관련 -->
<div class="faq-item" data-category="pricing">
<div class="faq-question">
<h3 data-i18n="qna.faq.q10">What are the payment methods?</h3>
<span class="faq-toggle">+</span>
</div>
<div class="faq-answer" data-i18n-html="qna.faq.a10"><p>We support the following payment methods:</p>
<ul>
<li><strong>Bank Transfer:</strong> Within 24 hours after reservation confirmation</li>
<li><strong>Cash Payment:</strong> On-site payment available</li>
<li><strong>Card Payment:</strong> Not available on-site</li>
<li><strong>Tax Invoice:</strong> Available for business customers</li>
<li><strong>Cash Receipt:</strong> Available for individual customers</li>
</ul>
<p>A deposit (30%) is due upon reservation confirmation, and the remaining balance (70%) can be paid on the day of shooting.</p></div>
</div>
<!-- 제작/촬영 관련 -->
<div class="faq-item" data-category="production">
<div class="faq-question">
<h3 data-i18n="qna.faq.q11">What should I prepare for a shoot?</h3>
<span class="faq-toggle">+</span>
</div>
<div class="faq-answer" data-i18n-html="qna.faq.a11"><p>You will need to prepare the following:</p>
<ul>
<li><strong>Footwear:</strong> Socks must be worn</li>
<li><strong>Glasses:</strong> Glasses cannot be worn (contact lenses recommended)</li>
<li><strong>Hair:</strong> Long hair should be tied back</li>
<li><strong>Accessories:</strong> Remove watches, rings, etc.</li>
<li><strong>Makeup:</strong> Please avoid heavy makeup</li>
</ul>
<p>Motion capture suits and markers are provided by the studio.</p></div>
</div>
<div class="faq-item" data-category="production">
<div class="faq-question">
<h3 data-i18n="qna.faq.q12">In what format can I receive the data?</h3>
<span class="faq-toggle">+</span>
</div>
<div class="faq-answer" data-i18n-html="qna.faq.a12"><p>We provide data in the following formats:</p>
<ul>
<li><strong>FBX Files:</strong> Compatible with Unity, Unreal Engine</li>
<li><strong>ANIM Files:</strong> Directly compatible with Unity Animator</li>
<li><strong>MP4 Video:</strong> Reference footage</li>
</ul>
<p>We will provide detailed information upon inquiry, and data is delivered via cloud.</p></div>
</div>
<!-- 스트리밍 관련 -->
<div class="faq-item" data-category="streaming">
<div class="faq-question">
<h3 data-i18n="qna.faq.q13">Is live streaming possible?</h3>
<span class="faq-toggle">+</span>
</div>
<div class="faq-answer" data-i18n-html="qna.faq.a13"><p><strong>Yes, live streaming is available through our Streamingle service.</strong></p>
<p>Motion capture data can be broadcast in real-time for use in live streams.</p>
<p>For more details, please refer to the Streamingle service section on the Services page.</p></div>
</div>
<!-- 기타 -->
<div class="faq-item" data-category="etc">
<div class="faq-question">
<h3 data-i18n="qna.faq.q14">Is parking available?</h3>
<span class="faq-toggle">+</span>
</div>
<div class="faq-answer" data-i18n-html="qna.faq.a14"><p>Yes, parking is available:</p>
<ul>
<li><strong>Basic:</strong> 2 hours free</li>
<li><strong>When using building facilities:</strong> Additional 2 hours, up to 4 hours free</li>
<li><strong>Location:</strong> Incheon Techno Valley building parking lot</li>
</ul></div>
</div>
<div class="faq-item" data-category="etc">
<div class="faq-question">
<h3 data-i18n="qna.faq.q15">Are facility tours or studio visits available?</h3>
<span class="faq-toggle">+</span>
</div>
<div class="faq-answer" data-i18n-html="qna.faq.a15"><p>Facility tours and visits require advance inquiry to confirm availability:</p>
<ul>
<li><strong>Advance Inquiry:</strong> Required (may be declined depending on studio schedule)</li>
<li><strong>Contact:</strong> help@minglestudio.co.kr</li>
<li><strong>Tour Duration:</strong> Approx. 30 minutes (upon approval)</li>
<li><strong>Cost:</strong> Free</li>
</ul>
<p>Please understand that tours may be restricted depending on studio operations.</p></div>
</div>
</div>
</div>
</section>
<!-- 추가 문의 -->
<section class="section bg-gradient">
<div class="container text-center">
<h2 data-i18n="qna.cta.title">Didn't find the answer you're looking for?</h2>
<p data-i18n="qna.cta.desc">If you have any questions, feel free to contact us anytime</p>
<div class="cta-buttons">
<a href="contact.html" class="btn btn-primary btn-lg" data-i18n="qna.cta.btnContact">Contact Us</a>
<a href="tel:010-9288-9190" class="btn btn-outline btn-lg" data-i18n="qna.cta.btnCall">Call Us</a>
</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">Company Info</h3>
<ul class="footer-list">
<li><strong data-i18n="footer.companyName">Mingle Studio</strong></li>
<li data-i18n="footer.ceo">CEO: 김희진</li>
<li data-i18n="footer.businessNumber">Business Registration No.: 208-12-73755</li>
</ul>
</div>
<div class="footer-section">
<h3 class="footer-heading" data-i18n="footer.contact">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">Business Inquiry</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">Reservation Inquiry</span></a></li>
</ul>
</div>
<div class="footer-section">
<h3 class="footer-heading" data-i18n="footer.directions">Directions</h3>
<ul class="footer-list">
<li><i class="fa-solid fa-location-dot" aria-hidden="true"></i> <span data-i18n="footer.address">236, Jubuto-ro, Bupyeong-gu, Incheon</span></li>
<li data-i18n="footer.addressDetail">Incheon Techno Valley U1 Center, Bldg. A, Room 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> minglestudio@minglestudio.co.kr</a></li>
<li><a href="mailto:help@minglestudio.co.kr"><i class="fa-solid fa-envelope" aria-hidden="true"></i> help@minglestudio.co.kr</a></li>
<li><a href="https://discord.com/users/1402264505110495354" target="_blank"><i class="fa-brands fa-discord" aria-hidden="true"></i> minglestudio_mocap</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?v=20260313"></script>
<script src="/js/qna.js"></script>
</body></html>

163
en/schedule.html
View File

@ -1,163 +0,0 @@
<!DOCTYPE html><html lang="en"><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>Availability - 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/en/schedule">
<!-- Theme Color -->
<meta name="theme-color" content="#ff8800">
<!-- SEO 메타 태그 -->
<meta name="description" content="Mingle Studio Availability - Check available dates for motion capture studio booking">
<meta name="keywords" content="motion capture studio, booking, schedule, Mingle Studio, Incheon">
<meta name="author" content="Mingle Studio">
<!-- Open Graph -->
<meta property="og:title" content="Availability - Mingle Studio">
<meta property="og:description" content="Check available dates for Mingle Studio motion capture studio booking">
<meta property="og:url" content="https://minglestudio.co.kr/en/schedule">
<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="en_US">
<meta property="og:site_name" content="Mingle Studio">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Availability - Mingle Studio">
<meta name="twitter:description" content="Check available dates for Mingle Studio motion capture studio booking">
<meta name="twitter:image" content="https://minglestudio.co.kr/images/logo/mingle-OG.png">
<!-- 폰트 -->
<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?v=20260313">
<link rel="stylesheet" href="/css/schedule.css">
<link rel="alternate" hreflang="ko" href="https://minglestudio.co.kr/schedule">
<link rel="alternate" hreflang="en" href="https://minglestudio.co.kr/en/schedule">
<link rel="alternate" hreflang="ja" href="https://minglestudio.co.kr/ja/schedule">
<link rel="alternate" hreflang="zh" href="https://minglestudio.co.kr/zh/schedule">
<link rel="alternate" hreflang="x-default" href="https://minglestudio.co.kr/schedule">
</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">Skip to content</a>
<div id="header-placeholder"></div>
<main id="main-content">
<!-- Page Header -->
<section class="page-header">
<div class="container">
<h1 class="page-title" data-i18n="schedule.title">Availability</h1>
<p class="page-description" data-i18n="schedule.desc">Check available dates for studio booking</p>
</div>
</section>
<!-- Calendar Section -->
<section class="section">
<div class="container">
<div class="schedule-wrapper">
<div class="calendar-card">
<div class="calendar-nav">
<button class="cal-nav-btn" id="prevMonth" aria-label="Previous month">
<i class="fa-solid fa-chevron-left"></i>
</button>
<h2 class="cal-title" id="calTitle"></h2>
<button class="cal-nav-btn" id="nextMonth" aria-label="Next month">
<i class="fa-solid fa-chevron-right"></i>
</button>
</div>
<div class="cal-header">
<span data-i18n="schedule.sun">Sun</span>
<span data-i18n="schedule.mon">Mon</span>
<span data-i18n="schedule.tue">Tue</span>
<span data-i18n="schedule.wed">Wed</span>
<span data-i18n="schedule.thu">Thu</span>
<span data-i18n="schedule.fri">Fri</span>
<span data-i18n="schedule.sat">Sat</span>
</div>
<div class="cal-body" id="calBody"></div>
</div>
<div class="calendar-legend">
<div class="legend-item">
<span class="legend-dot available"></span>
<span data-i18n="schedule.available">Available</span>
</div>
<div class="legend-item">
<span class="legend-dot booked"></span>
<span data-i18n="schedule.booked">Fully Booked</span>
</div>
<div class="legend-item">
<span class="legend-dot past"></span>
<span data-i18n="schedule.past">Past Date</span>
</div>
</div>
<div class="schedule-info-card">
<div class="info-icon">
<i class="fa-solid fa-calendar-check"></i>
</div>
<h3 data-i18n="schedule.infoTitle">Booking Info</h3>
<p data-i18n="schedule.infoDesc">Reservations can be made via email or the contact page.<br>We recommend booking at least 2 weeks in advance.</p>
<div class="schedule-actions">
<a href="/en/contact" class="btn btn-primary" data-i18n="schedule.contactBtn"><i class="fa-solid fa-envelope"></i> Contact Us</a>
</div>
<div class="schedule-details">
<div class="detail-item">
<span class="detail-label" data-i18n="schedule.detailHours">Hours</span>
<span class="detail-value" data-i18n="schedule.detailHoursVal">24H · Year-round</span>
</div>
<div class="detail-item">
<span class="detail-label" data-i18n="schedule.detailMin">Minimum</span>
<span class="detail-value" data-i18n="schedule.detailMinVal">From 2 hours</span>
</div>
<div class="detail-item">
<span class="detail-label" data-i18n="schedule.detailAdvance">Advance</span>
<span class="detail-value" data-i18n="schedule.detailAdvanceVal">2 weeks recommended</span>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<div id="footer-placeholder"></div>
<script src="/js/i18n.js"></script>
<script src="/js/common.js?v=20260313"></script>
<script src="/js/schedule.js"></script>
</body>
</html>

1191
en/services.html
View File

File diff suppressed because it is too large Load Diff

20
gallery.html
View File

@ -71,10 +71,6 @@
<link rel="alternate" hreflang="ko" href="https://minglestudio.co.kr/gallery">
<link rel="alternate" hreflang="en" href="https://minglestudio.co.kr/en/gallery">
<link rel="alternate" hreflang="ja" href="https://minglestudio.co.kr/ja/gallery">
<link rel="alternate" hreflang="zh" href="https://minglestudio.co.kr/zh/gallery">
<link rel="alternate" hreflang="x-default" href="https://minglestudio.co.kr/gallery">
</head>
<body>
<!-- Google Tag Manager (noscript) -->
@ -105,20 +101,6 @@
<li><a href="/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">
@ -317,8 +299,6 @@
</div>
</div>
</footer>
<script src="js/i18n.js"></script>
<script src="js/common.js?v=20260313"></script>
<script src="js/gallery.js"></script>

819
i18n/en.json
View File

@ -1,819 +0,0 @@
{
"header": {
"studioName": "Mingle Studio",
"nav": {
"about": "About",
"services": "Services",
"portfolio": "Portfolio",
"gallery": "Gallery",
"schedule": "Schedule",
"devlog": "DevLog",
"contact": "Contact",
"qna": "Q&A"
},
"menuOpen": "Open menu",
"menuClose": "Close menu",
"darkMode": "Switch to dark mode",
"lightMode": "Switch to light mode",
"langSelect": "Select language"
},
"footer": {
"companyInfo": "Company Info",
"companyName": "Mingle Studio",
"ceo": "CEO: 김희진",
"businessNumber": "Business Registration No.: 208-12-73755",
"contact": "Contact",
"businessInquiry": "Business Inquiry",
"reservationInquiry": "Reservation Inquiry",
"directions": "Directions",
"address": "236, Jubuto-ro, Bupyeong-gu, Incheon",
"addressDetail": "Incheon Techno Valley U1 Center, Bldg. A, Room B105",
"copyright": "© 2025 Mingle Studio. All rights reserved."
},
"common": {
"loading": "Loading page...",
"componentLoading": "Loading...",
"skipToContent": "Skip to content",
"videoLoading": "Loading video...",
"videoError": "Unable to load video",
"imageError": "Unable to load image",
"floatingCTA": "Contact Us",
"floatingKakao": "KakaoTalk Chat",
"floatingPhone": "Call Us",
"floatingContact": "Contact Page"
},
"index": {
"meta": {
"title": "Mingle Studio - Motion Capture Creative Studio",
"description": "A professional motion capture studio equipped with cutting-edge OptiTrack systems and specialized equipment. Experience new possibilities in virtual content creation at Incheon Techno Valley.",
"ogTitle": "Mingle Studio - Motion Capture Creative Studio",
"ogDescription": "A professional motion capture studio equipped with cutting-edge OptiTrack systems and specialized equipment"
},
"hero": {
"title": "Mingle Studio",
"subtitle": "MINGLE STUDIO",
"description": "A space where technology, creativity, and passion blend together<br>to create something new",
"btnAbout": "About Us",
"btnContact": "Book Now",
"specCamera": "OptiTrack Cameras",
"specCameraUnit": "units",
"specSpace": "Capture Space",
"specPrice": "Hourly Rental",
"specPriceUnit": "USD"
},
"showcase": {
"step1": {
"label": "Equipment",
"title": "Cutting-Edge Motion Capture System",
"desc": "From OptiTrack optical cameras and Rokoko gloves to ARKit facial capture — we precisely track full-body movement, fingertips, and facial expressions.",
"feature1Title": "30 OptiTrack Cameras",
"feature1Desc": "Sub-millimeter optical motion tracking",
"feature2Title": "5 Rokoko Gloves",
"feature2Desc": "Precise hand capture down to individual finger joints",
"feature3Title": "ARKit Facial Capture (5 iPhones)",
"feature3Desc": "iPhone-based high-precision facial capture"
},
"step2": {
"label": "Space",
"title": "Spacious, Optimized Capture Area",
"desc": "Our dedicated 8m x 7m x 2.6m capture volume allows for unrestricted movement.",
"feature1Title": "8m × 7m × 2.6m",
"feature1Desc": "Spacious dedicated capture volume",
"feature2Title": "Live Streaming",
"feature2Desc": "Live broadcasting via Streamingle service"
},
"step3": {
"label": "Services",
"title": "Key Application Areas",
"desc": "Our professional operators support a wide range of creative projects.",
"virtual": "Virtual Content",
"virtualSub": "VTuber, Virtual Idols",
"game": "Game Development",
"gameSub": "Character Animation",
"video": "Video Production",
"videoSub": "VFX, Virtual Production",
"metaverse": "Metaverse",
"metaverseSub": "3D Avatar Content",
"btnServices": "View All Services"
},
"step4": {
"label": "Studio",
"title": "Studio Spaces",
"desc": "From the main capture area to the control room and private rooms, everything is fully equipped. We provide the optimal capture experience with professional technical support.",
"feature1Title": "Professional Tech Support",
"feature1Desc": "Real-time assistance from experienced operators",
"feature2Title": "Private Environment",
"feature2Desc": "Focused work in a dedicated private space",
"btnGallery": "View Gallery"
}
},
"portfolio": {
"title": "Portfolio",
"desc": "Motion capture content produced and collaborated on at Mingle Studio",
"tabCreator": "Individual Creators",
"tabCorporate": "Corporate Projects",
"tabShorts": "Shorts",
"btnMore": "View Full Portfolio →"
},
"partner": {
"title": "Partner Streamers",
"desc": "Creators making content with Mingle Studio",
"streamer1": {
"desc": "Guseulyo! A virtual streamer featuring diverse content including chatting, singing, gaming, VRChat, and more",
"tagSong": "Singing",
"tagGame": "Gaming"
}
},
"creatorSigns": {
"title": "Visiting Creators",
"desc": "Signatures from creators who visited Mingle Studio"
},
"clients": {
"title": "Clients",
"desc": "We create innovative motion capture content with companies across various industries"
},
"faqShortcut": {
"label": "FAQ",
"title": "New to Motion Capture?",
"desc": "No worries if it's your first time. We've organized frequently asked questions from booking to filming.",
"btnFaq": "View FAQ",
"btnContact": "1:1 Inquiry",
"btnOnline": "Online Inquiry Page"
},
"cta": {
"label": "Get Started",
"title": "Your Ideas,<br>Brought to Life Through Motion",
"desc": "Experience new creative possibilities at our professional motion capture studio",
"btnReserve": "Book Now",
"btnSchedule": "Check Availability",
"btnNaver": "Naver Booking",
"infoReservation": "Reservations",
"infoBusiness": "Business",
"infoDiscord": "Discord",
"infoKakao": "KakaoTalk",
"infoKakaoDesc": "Open Chat Consultation"
},
"popup": {
"title": "Pricing Update Notice",
"subtitle": "Effective from March 2026",
"badge": "In Effect",
"mainChanges": "Key Changes",
"discountEnd": "Discount Event Ended",
"discountEndDesc": "The grand opening 20% discount event ended on <strong>February 28</strong>, and standard pricing is now in effect.",
"streaming4h": "New Streamingle 4-Hour Package",
"streaming4hDesc": "Enjoy the same benefits as the existing Streamingle service (6 hours) in a 4-hour package.",
"referral": "Referral Program Launched",
"referralDesc": "Refer a friend and both the referrer and the referred receive a <strong>20% discount coupon</strong>. (One-time use, cannot be combined with other offers)",
"notice": "※ Updated pricing has been reflected on the Services page",
"effectiveDate": "Effective Date",
"effectiveDateValue": "March 2026 ~",
"inquiryEmail": "Inquiry Email",
"ctaBtn": "View Current Pricing →",
"dontShowToday": "Don't show again today",
"close": "Close"
}
},
"about": {
"meta": {
"title": "About Us - Mingle Studio",
"description": "Mingle Studio is a motion capture creative space where technology and creativity come together. Founded in 2025, located in Incheon Techno Valley.",
"ogTitle": "About Us - Mingle Studio",
"ogDescription": "Incheon's only professional motion capture studio, founded in 2025. A virtual content creative space where technology and creativity converge."
},
"pageHeader": {
"title": "About Us",
"desc": "A space where technology, creativity, and passion blend to create new value"
},
"info": {
"companyName": "Company Name",
"companyNameValue": "Mingle Studio",
"foundingDate": "Founded",
"foundingDateValue": "July 15, 2025",
"slogan": "Slogan",
"sloganValue": "\"A joyful creative space where everyone comes together\"",
"meaning": "Meaning",
"meaningValue": "Mingle Studio is a virtual content production space where technicians, creators, and audiences come together. Using cutting-edge optical motion capture technology, we bring virtual characters to life with vivid emotions and movement, realizing a new generation of digital performance."
},
"companyIntro": {
"title": "Company Introduction",
"desc1": "Mingle Studio is a motion capture-based creative space that produces new content through the 'mingling' of creators, technology, and people.",
"desc2": "Since our founding, we have provided a virtual content production environment centered on an easy-to-use studio rental service that anyone can access."
},
"visionMission": {
"title": "Vision & Mission",
"visionTitle": "Vision",
"visionDesc": "Building a creative ecosystem where every creator can turn imagination into reality without technical limitations",
"missionTitle": "Mission",
"missionDesc": "Transforming creators' ideas into vivid content through cutting-edge motion capture technology, delivering new digital experiences"
},
"history": {
"title": "History",
"date1": "July 15, 2025",
"event1Title": "Mingle Studio Founded",
"event1Desc": "Company establishment",
"date2": "August 1, 2025",
"event2Title": "Studio Grand Opening",
"event2Desc": "OptiTrack system installation completed and studio rental service launched"
},
"team": {
"title": "Our Team",
"desc": "Experts from diverse fields collaborate to support content production",
"member1Name": "김희진",
"member1Role": "CEO / 3D Artist",
"member1Desc": "Environment/resource production, HR and project management",
"member2Name": "김광진",
"member2Role": "CTO / Technical Director",
"member2Desc": "Studio technical operations, motion capture equipment management, audio systems, engine programming",
"member3Name": "이승민",
"member3Role": "CCO / Content Director",
"member3Desc": "Capture directing, motion cleanup, camera movement, performance direction"
},
"partner": {
"title": "Partner Streamer",
"desc": "Creators who produce content with Mingle Studio",
"streamer1Desc": "A virtual streamer showcasing diverse content including chat streams, singing, gaming, and VRChat. Actively broadcasting on SOOP, they create new virtual content powered by Mingle Studio's motion capture technology."
},
"values": {
"title": "Core Values",
"desc": "The core values that Mingle Studio pursues",
"collaboration": "Collaboration",
"collaborationDesc": "Synergy created by technicians and creators working together",
"innovation": "Innovation",
"innovationDesc": "Pioneering new creative possibilities with the latest technology",
"creativity": "Creativity",
"creativityDesc": "Creative solutions that turn imagination into reality",
"quality": "Quality",
"qualityDesc": "Pursuing the highest standard of motion capture quality"
}
},
"services": {
"meta": {
"title": "Services - Mingle Studio",
"description": "Mingle Studio Services - OptiTrack motion capture studio rental from $150/hour for 2 people, full-body/facial capture, professional motion recording",
"ogTitle": "Services - Mingle Studio",
"ogDescription": "OptiTrack motion capture studio rental services. Full-body and facial capture specialists."
},
"pageHeader": {
"title": "Services",
"desc": "We provide cutting-edge motion capture facilities and professional services"
},
"packages": {
"title": "Service Packages",
"desc": "We offer optimal motion capture recording services tailored to your needs and scale",
"vatNotice": "※ All prices are exclusive of VAT"
},
"compare": {
"recordingTitle": "Motion Capture Recording",
"recordingPrice": "200,000 KRW~/hr (2-person base)",
"recordingDesc": "Recording only · Live streaming not included",
"liveTitle": "Motion Capture Live Broadcast",
"livePrice": "1,400,000 KRW~ / 4-hour package",
"liveDesc": "Recording + Live broadcast + Avatar, background & prop setup included"
},
"service1": {
"title": "Service 1: Motion Capture Recording",
"badge": "Standard",
"team": "2-Person Session",
"teamPopular": "Popular",
"teamPrice": "$150",
"teamUnit": "/hour",
"teamFeature1": "Simultaneous 2-person motion recording",
"teamFeature2": "Character interaction capture",
"teamFeature3": "Team project collaboration",
"additional": "Additional Person",
"additionalPrice": "+$75",
"additionalUnit": "/person/hour",
"additionalFeature1": "Up to 5 simultaneous performers",
"additionalFeature2": "Multi-person motion capture",
"additionalFeature3": "Group choreography & acting capture",
"minPerson": "Minimum participants: 2 people",
"minTime": "Minimum session: 2 hours",
"maxPerson": "Maximum simultaneous performers: 5",
"techTitle": "Included Technology & Services",
"tech1": "30 OptiTrack Cameras",
"tech2": "Real-time avatar recording",
"tech3": "Full-body/facial capture",
"tech4": "Real-time monitoring",
"tech5": "Professional operator",
"tech6": "Motion data delivery",
"note": "Avatar retargeting is not included by default. It can be arranged through a separate consultation for follow-up work.",
"postTitle": "Post-Processing Options",
"cleanupTitle": "Data Cleanup",
"cleanupPrice": "50,000 ~ 100,000 KRW",
"cleanupUnit": "/ per minute",
"cleanupDesc": "Noise removal & frame correction · Retargeting not included",
"retargetTitle": "Retargeting",
"retargetPrice": "300,000 ~ 500,000 KRW",
"retargetUnit": "/ per minute",
"retargetDesc": "Motion retargeting optimized for your avatar",
"postNote": "* Post-processing is arranged via separate consultation after recording",
"typeNotice": "Recording-only service · For live broadcast, please see the separate package below"
},
"combo": {
"title": "Combo Packages",
"badge": "Specialized",
"mvTitle": "Music Video / Short-Form Real-Time Shooting",
"mvPrice": "Same rate as Motion Capture",
"mvReqTitle": "Additional Requirements",
"mvReq1": "Pre-production brief required",
"mvReq2": "Character/background/props must be discussed in advance",
"mvReq3": "Actor casting if needed: $75 (per person per hour)",
"mvPortfolio": "View Portfolio",
"remoteTitle": "Remote Shooting",
"remotePrice": "Same rate as Motion Capture",
"remoteServiceTitle": "Service Details",
"remoteService1": "Remote real-time shooting support",
"remoteService2": "Online direction available",
"remoteService3": "Real-time streaming output",
"remoteExtraTitle": "Additional Fees",
"remoteExtra1": "Actor casting fee: $75 (per person per hour)"
},
"service2": {
"title": "Service 2: Streamingle Service",
"badge": "Flagship",
"typeNotice": "Separate package from recording service · Includes avatar, background & prop setup + live broadcast",
"pkg4h": "4-Hour Package",
"pkg4hBadge": "NEW",
"pkg4hPrice": "$1,100",
"pkg4hUnit": "/ 1–5 people",
"pkg4hFeature1": "4 hours total",
"pkg4hFeature2": "2 hours studio rental + 2 hours shoot prep",
"pkg4hFeature3": "Same benefits as the 6-hour package",
"pkg6h": "6-Hour Package",
"pkg6hPrice": "$1,500",
"pkg6hUnit": "/ 1–5 people",
"pkg6hFeature1": "6 hours total",
"pkg6hFeature2": "4 hours studio rental + 2 hours shoot prep",
"pkg6hFeature3": "Ideal for large-scale projects",
"commonLabel": "The following benefits are included in both the 4-hour and 6-hour packages",
"benefitsTitle": "Included Benefits",
"benefit1": "1 character setup per person (free)",
"benefit2": "2 existing backgrounds setup (free)",
"benefit3": "Props setup (up to 6 new props free, unlimited existing props)",
"benefit4": "Motion capture recording service",
"benefit5": "Real-time video shooting",
"benefit6": "Live broadcasting service",
"featuresTitle": "Service Features",
"feature1": "Large-scale project support",
"feature2": "Comprehensive shooting environment",
"feature3": "Real-time streaming (Streamingle exclusive)",
"feature4": "Full professional staff service",
"feature5": "Flexible for 1–5 participants",
"livePortfolio": "View Live Broadcasting Portfolio"
},
"service3": {
"title": "Service 3: Music Video Production",
"badge": "Premium",
"intro": "We support the entire music video production process, from planning to final delivery.",
"priceRange": "Estimated total cost: $1,500 – $3,000",
"priceNote1": "※ The above cost is an approximate estimate and may vary depending on project scope and requirements.",
"priceNote2": "※ Pricing varies based on background production scope, storyboard artist fees, number of avatars/props, and production complexity.",
"processTitle": "Production Process (7 Steps)",
"step1Title": "Planning Consultation (Free)",
"step1Desc": "The first step of music video production — defining the concept and mood.",
"step1Note": "※ A clear direction is essential for smooth production.",
"step2Title": "Background Production",
"step2Desc": "Options available based on copyright ownership.",
"step2Opt1Type": "Use Existing Background",
"step2Opt1Price": "$25/each",
"step2Opt1Note": "Copyright: Company-owned",
"step2Opt2Type": "New Production (Company-owned)",
"step2Opt2Price": "$80/each",
"step2Opt2Note": "Copyright: Company-owned (large or specialized backgrounds may have limitations)",
"step2Opt3Type": "New Production (Client-owned)",
"step2Opt3Price": "$150 – $700/each",
"step2Opt3Note": "Copyright: Client-owned (varies by scale and detail)",
"step2ProcessNote": "Delivered as a Unity build for camera angle verification",
"step3Title": "Storyboard Creation",
"step3Price": "From $75",
"step3Desc": "An external professional artist visualizes the music video flow.",
"step3Note": "※ Shared with the client for direction and camera cut confirmation",
"step4Title": "Avatar Setup & Props Production",
"step4AvatarLabel": "Avatar Setup:",
"step4AvatarPrice": "$40/each",
"step4PropLabel": "Story Props:",
"step4PropPrice": "$15/each",
"step4Desc": "Avatars are optimized for the music video environment.",
"step4Note": "※ Avatar modification and optimization available",
"step5Title": "Motion Capture",
"step5StudioLabel": "Motion Capture Studio Rental",
"step5Solo": "1 person:",
"step5SoloPrice": "$110/hour",
"step5Duo": "2 people:",
"step5DuoPrice": "$150/hour",
"step5Extra": "Additional person:",
"step5ExtraPrice": "+$75/person/hour",
"step5ExtraNote": "(up to 5 people)",
"step5ActorLabel": "Actor Casting",
"step5Actor": "Actor casting:",
"step5ActorPrice": "$75/person/hour",
"step5Desc": "Motion is recorded based on the storyboard.",
"step5Note1": "※ Shooting duration: 1–2 days",
"step5Note2": "※ Minimum session: 2 hours",
"step6Title": "Look Development & Direction",
"step6Price": "From $360",
"step6Desc": "Post-processing, artwork, and camera work are done in Unity.",
"step6Note": "※ Varies based on production complexity and quality level",
"step7Title": "Final Feedback & Delivery",
"step7Desc": "The finished video is revised based on client feedback and delivered.",
"step7Note": "※ Delivery formats: mp4/mov, etc.",
"processNote": "Planning Consultation (Free) → Full Quote → Production begins after quote approval (Steps 2–7 proceed sequentially)"
},
"options": {
"title": "Additional Option Pricing",
"desc": "Additional options applicable to all service packages",
"vatNote": "*Exclusive of VAT",
"charSetup": "Character Setup",
"charPrice": "From $40",
"charUnit": "/ per character",
"charDesc": "New character setup",
"bgSetup": "Background Setup",
"bgExisting": "Use Existing Background",
"bgExistingPrice": "From $25",
"bgExistingUnit": "/ each",
"bgExistingNote": "Setup fee only",
"bgNew": "New Background Production",
"bgNewPrice": "From $80",
"bgNewUnit": "/ each",
"bgNewNote": "Setup fee + production/purchase fee separate\nOwnership can be assigned to Mingle Studio or the client",
"propSetup": "Props Setup",
"propPrice": "$15",
"propUnit": "/ each",
"propDesc": "Props setup\n(Streamingle Service: up to 6 new props free, unlimited existing props included)"
},
"usage": {
"title": "Usage Guidelines",
"hours": "Operating Hours",
"hoursDesc": "Standard hours: 10:00 AM – 10:00 PM\n1.5x rate applies for after-hours use",
"minTime": "Minimum Session Time",
"minTimeDesc": "All services require a minimum of 2 hours\n(except Streamingle Service)",
"preparation": "Pre-Session Requirements",
"preparationDesc": "For music video/short-form shoots,\na production brief and materials must be discussed in advance",
"followUp": "Follow-Up Services",
"followUpDesc": "Avatar retargeting is only available\nas a follow-up service (separate consultation)"
},
"guide": {
"title": "Service Booking Guide",
"processTitle": "Studio Rental Process",
"step1": "Email Inquiry",
"step1Desc": "Submit a reservation form",
"step2": "Confirmation & Consultation",
"step2Desc": "Finalize details",
"step3": "Full Payment",
"step3Desc": "Complete payment",
"step4": "Reservation Confirmed",
"step4Desc": "Booking finalized",
"btnEmail": "Send Email Inquiry",
"btnNaver": "Book via Naver",
"btnSchedule": "Check Availability",
"naverNote": "※ You can check real-time availability and book via Naver Place"
},
"policy": {
"reservationTitle": "Reservation Info",
"reservation1": "We recommend booking at least 2 weeks before your desired date.",
"reservation2": "Cancellation penalties apply based on the cancellation policy if a confirmed reservation is cancelled due to the customer's circumstances.",
"visitTitle": "Visit Info",
"visit1": "Please arrive at least 30 minutes before your scheduled shoot, as preparation time is needed for wearing motion capture suits and equipment. (Preparation time is not included in the rental hours.)",
"visit2": "Please refrain from wearing accessories made of reflective materials, such as glasses and earrings, during the shoot.",
"refundTitle": "Cancellation & Refund Policy",
"refundColTime": "Cancellation Timing",
"refundColRate": "Refund Rate",
"refund7days": "7 days before reservation",
"refund100": "100% Refund",
"refund3days": "3 days before reservation",
"refund70": "70% Refund",
"refund1day": "1 day before reservation",
"refund50": "50% Refund",
"refundSameDay": "Same-day cancellation",
"refundNone": "No Refund"
}
},
"portfolio": {
"meta": {
"title": "Portfolio - Mingle Studio",
"description": "Mingle Studio Portfolio - A collection of YouTube content, VTuber broadcasts, and Shorts videos created with motion capture technology",
"ogTitle": "Portfolio - Mingle Studio",
"ogDescription": "Music videos, short-form content, VTuber broadcasts, and more produced at our motion capture studio. High-quality motion capture services powered by OptiTrack."
},
"pageHeader": {
"title": "Portfolio",
"desc": "Motion capture content produced and collaborated on at Mingle Studio"
},
"channel": {
"title": "Mingle Studio Official Channel",
"desc": "Check out our latest motion capture content and production process on YouTube",
"btn": "Visit YouTube Channel"
},
"tabs": {
"individual": "Individual Creators",
"corporate": "Corporate Projects"
},
"longform": {
"title": "Long-Form Content",
"desc": "Motion capture projects by individual creators"
},
"shorts": {
"title": "Shorts Content",
"desc": "Short, impactful motion capture moments"
},
"broadcast": {
"title": "Live Broadcast Examples",
"desc": "Real-time motion capture broadcasts by VTubers and streamers",
"noticeTitle": "Live Motion Capture Broadcasting",
"noticeDesc": "Experience high-quality virtual content through live motion capture broadcasts at Mingle Studio"
},
"corporate": {
"title": "Corporate Projects",
"desc": "Corporate and commercial motion capture projects",
"ixiaDesc": "Motion capture production for virtual idol group",
"mvSection": "Music Video Production",
"shortsSection": "Short-Form Video Production",
"liveSection": "Live Broadcasting"
},
"cta": {
"title": "Your Content Could Be Here",
"desc": "Be the next featured creator with Mingle Studio",
"btnInquiry": "Inquire About Your Project",
"btnServices": "Explore Services"
},
"js": {
"checkNetwork": "Please check your network connection",
"shareTitle": "Mingle Studio Portfolio",
"linkCopied": "Video link copied to clipboard.",
"linkCopyFailed": "Failed to copy link."
}
},
"gallery": {
"meta": {
"title": "Studio Gallery - Mingle Studio",
"description": "Mingle Studio Gallery - See our motion capture studio facilities and spaces in photos",
"ogTitle": "Studio Gallery - Mingle Studio",
"ogDescription": "30 OptiTrack cameras and an 8×7m large capture space. See the actual facilities and equipment of Incheon's only motion capture studio."
},
"pageHeader": {
"title": "Studio Gallery",
"desc": "Take a look at Mingle Studio's actual spaces through photos"
},
"captions": {
"exterior_open": "Exterior View (Curtains Open)",
"exterior_closed": "Exterior View (Curtains Closed)",
"control_room": "Operating/Control Room",
"powder_room": "Powder Room (Studio Connected)",
"changing_room_in": "Changing Room (Interior)",
"changing_room_out": "Changing Room (Exterior)",
"audio_system": "High-Quality Audio System",
"mocap_space_1": "Motion Capture Space 001",
"mocap_space_2": "Motion Capture Space 002",
"mocap_space_3": "Motion Capture Space 003",
"mocap_space_4": "Motion Capture Space 004"
},
"panorama": {
"title": "360° Studio View",
"desc": "Drag to explore the studio in 360 degrees",
"clickToView": "Click to experience in 360° VR",
"curtainOpen": "Studio Panorama (Curtains Open)",
"curtainClosed": "Studio Panorama (Curtains Closed)"
},
"js": {
"lightboxLabel": "Image viewer",
"close": "Close",
"prevImage": "Previous image",
"nextImage": "Next image",
"panoramaLoading": "Loading 360° image...",
"reset": "Reset",
"autoRotate": "Auto rotate",
"stop": "Stop",
"zoomIn": "Zoom in",
"zoomOut": "Zoom out",
"help": "Help",
"helpTitle": "360° Controls Guide",
"helpDrag": "Drag with mouse to rotate the view",
"helpTouch": "On touch screens, drag with your finger",
"helpZoom": "Use mouse wheel or pinch to zoom in/out",
"helpAutoRotate": "Use the auto-rotate button to automatically look around",
"helpEsc": "Press ESC to close",
"checkImageFile": "Please check the image file"
}
},
"contact": {
"meta": {
"title": "Contact Us - Mingle Studio",
"description": "Contact Mingle Studio - Inquiries for motion capture studio rental, shooting, production, and consultation",
"ogTitle": "Contact Us - Mingle Studio",
"ogDescription": "Inquiries for motion capture studio rental, shooting, and production. OptiTrack professional studio located in Incheon Techno Valley."
},
"pageHeader": {
"title": "Contact Us",
"desc": "Start your next project with Mingle Studio"
},
"phone": {
"title": "Phone",
"desc": "Available 24 hours"
},
"business": {
"title": "Business Inquiry",
"desc": "Partnerships and collaboration"
},
"reservation": {
"title": "Reservations & Inquiries",
"desc": "Accepting inquiries 24 hours"
},
"discord": {
"title": "Discord",
"desc": "Live chat inquiry"
},
"kakao": {
"title": "KakaoTalk",
"desc": "Open chat consultation",
"link": "Chat on KakaoTalk"
},
"visit": {
"title": "Visit the Studio",
"desc": "Reservation required",
"link": "View Location"
},
"location": {
"title": "Studio Location",
"address": "Address",
"addressValue": "(21330) 236, Jubuto-ro, Bupyeong-gu, Incheon<br>Incheon Techno Valley U1 Center, Bldg. A, Room B105",
"subway": "Subway",
"subwayDesc": "Incheon Line 7, Galsan Station → approx. 7 min walk",
"bus": "Bus",
"busStop": "Galsan Market/Galsan Library bus stop",
"busRoutes": "Bus No. 4, 526, 555",
"parking": "Parking",
"parkingDesc": "2 hours free, up to 4 hours free when using building facilities",
"hours": "Operating Hours",
"hours24": "Open 24 Hours",
"hoursAllYear": "Open Year-Round",
"naverMap": "Naver Map",
"googleMap": "Google Maps"
},
"form": {
"title": "Online Inquiry",
"desc": "Fill out the form below and we'll get back to you promptly",
"name": "Name <span class=\"required\">*</span>",
"namePlaceholder": "John Doe",
"email": "Email <span class=\"required\">*</span>",
"phone": "Phone Number",
"service": "Inquiry Type <span class=\"required\">*</span>",
"serviceDefault": "Please select",
"serviceRental": "Studio Rental",
"serviceMotion": "Motion Recording",
"serviceMV": "Music Video Production",
"servicePartner": "Partnership",
"serviceOther": "Other",
"message": "Message <span class=\"required\">*</span>",
"messagePlaceholder": "Please describe your project, preferred schedule, etc.",
"sensitiveWarning": "※ Please do not include sensitive information such as national ID or bank account numbers.",
"privacyAgree": "I agree to the collection and use of personal information. (Required)",
"privacyView": "View Privacy Policy",
"privacyPurpose": "Purpose: Inquiry processing and response",
"privacyItems": "Items collected: Name, email, phone number, message",
"privacyPeriod": "Retention: Automatically deleted after 7 days",
"submit": "Send Inquiry",
"reset": "Reset",
"privacyModalTitle": "Personal Information Collection & Use Notice",
"privacyM1Title": "1. Purpose of Collection",
"privacyM1Desc": "Processing customer inquiries and providing responses",
"privacyM2Title": "2. Items Collected",
"privacyM2Required": "Required: Name, email, inquiry type, message",
"privacyM2Optional": "Optional: Phone number",
"privacyM3Title": "3. Retention Period",
"privacyM3Desc": "Data is automatically deleted 7 days after the inquiry is received.",
"privacyM4Title": "4. Right to Refuse",
"privacyM4Desc": "You have the right to refuse the collection and use of personal information. However, refusal will prevent inquiry submission.",
"privacyM5Title": "5. Third-Party Provision",
"privacyM5Desc": "Inquiry content is transmitted through a secure channel and may pass through overseas servers. It will not be used for purposes other than inquiry processing."
},
"cta": {
"title": "Reservations & Inquiries",
"desc": "Make an easy online reservation or check our frequently asked questions",
"btnNaver": "Book via Naver",
"btnSchedule": "Availability",
"btnFaq": "View FAQ"
},
"js": {
"checkInput": "Please check your input.",
"sending": "Sending...",
"sendSuccess": "Your inquiry has been sent successfully. We will contact you shortly.",
"sendError": "An error occurred while sending. Please try again.",
"errorTitle": "Failed to send",
"errorDesc": "Your inquiry could not be sent due to a temporary server error. Please contact us directly using the methods below.",
"errorEmail": "Email",
"errorPhone": "Phone",
"errorKakao": "KakaoTalk",
"errorKakaoDesc": "Chat via KakaoTalk",
"errorDiscord": "Contact us on Discord",
"resetConfirm": "All entered data will be deleted. Continue?",
"invalidEmail": "Please enter a valid email address.",
"invalidPhone": "Please enter a valid phone number.",
"required": "This field is required.",
"privacyRequired": "Please agree to the collection and use of personal information."
}
},
"qna": {
"meta": {
"title": "FAQ - Mingle Studio",
"description": "Mingle Studio FAQ - Frequently asked questions about motion capture studio rental, shooting, and production",
"ogTitle": "FAQ - Mingle Studio",
"ogDescription": "Frequently asked questions about motion capture studio rental, shooting, pricing, and reservations. OptiTrack system usage guide."
},
"pageHeader": {
"title": "Frequently Asked Questions",
"desc": "Find answers to common questions about using Mingle Studio"
},
"search": {
"placeholder": "Search for your question...",
"btnLabel": "Search"
},
"categories": {
"all": "All",
"booking": "Booking/Rental",
"equipment": "Equipment/Tech",
"pricing": "Pricing/Payment",
"production": "Production/Shooting",
"streaming": "Streaming",
"etc": "Other"
},
"faq": {
"q1": "How do I book a studio rental?",
"q2": "Is there a deposit and refund policy?",
"q3": "What is the minimum rental time?",
"q4": "How far in advance should I book?",
"q5": "Is on-site payment available?",
"q6": "Can you issue a tax invoice?",
"q7": "What motion capture equipment do you use?",
"q8": "Are motion capture suits provided?",
"q9": "How many people can be captured simultaneously?",
"q10": "What are the payment methods?",
"q11": "What should I prepare for a shoot?",
"q12": "In what format can I receive the data?",
"q13": "Is live streaming possible?",
"q14": "Is parking available?",
"q15": "Are facility tours or studio visits available?",
"a1": "<p>You can make a reservation through the following methods:</p>\n<ul>\n<li><strong><i class=\"fa-solid fa-envelope\" aria-hidden=\"true\"></i> Email:</strong> <a href=\"mailto:help@minglestudio.co.kr?subject=[Studio Reservation Inquiry] Mingle Studio&body=Hello. I would like to inquire about a studio rental reservation at Mingle Studio.%0A%0A■ Basic Information%0A- Preferred Date: (e.g., December 25, 2024)%0A- Preferred Time: (e.g., 2 PM ~ 4 PM, 2 hours)%0A- Number of Participants: %0A- Contact Number: %0A- Email: %0A%0A■ Shooting Information%0A- Purpose: (e.g., VTuber broadcast, game development, video content, etc.)%0A- Expected Content: %0A- Required Equipment: (full-body motion capture / facial capture / other)%0A%0A■ Additional Requests%0A- Special Requirements: %0A- Questions: %0A%0A■ Notes%0A- Minimum Rental: 2 hours ($165, tax included)%0A- Extension: $83 per hour%0A- Payment: Bank transfer or cash (card payment not available)%0A- Cash receipts/tax invoices available%0A%0AWe will respond as soon as possible.%0AThank you.\">help@minglestudio.co.kr</a></li>\n<li><strong><i class=\"fa-solid fa-phone\" aria-hidden=\"true\"></i> Phone:</strong> 010-9288-9190</li>\n</ul>\n<div style=\"margin-top: var(--spacing-md); text-align: center;\">\n<button id=\"showEmailFormFAQ\" class=\"btn btn-primary\" style=\"font-size: 0.9rem; padding: 0.5rem 1rem;\"><i class=\"fa-solid fa-envelope\" aria-hidden=\"true\"></i> Email Inquiry</button>\n</div>\n<div id=\"emailFormFAQ\" class=\"email-form\" style=\"display:none; margin-top: var(--spacing-lg); padding: var(--spacing-lg); border: 1px solid #ddd; border-radius: var(--border-radius); background: #f9f9f9;\">\n<h4>Email Inquiry Form</h4>\n<p>Please copy the form below and send it via email:</p>\n<div class=\"email-template\" style=\"background: white; padding: var(--spacing-md); border-radius: var(--border-radius); font-family: monospace; font-size: 0.9rem; line-height: 1.6;\">\n<div><strong>Subject:</strong> [Studio Rental Inquiry]</div>\n<div><strong>To:</strong> help@minglestudio.co.kr</div>\n<br>\n<div><strong>1. Name and Affiliation</strong></div>\n<div style=\"color: #666; font-size: 0.85rem;\">(For individuals, name only. For companies, please include your name and organization)</div>\n<div style=\"margin: 0.5rem 0; padding: 0.5rem; background: #f0f0f0; border-radius: 4px;\">[Please fill in here]</div>\n<div><strong>2. Contact Information</strong></div>\n<div style=\"color: #666; font-size: 0.85rem;\">(Choose one: phone number, email, or Discord)</div>\n<div style=\"margin: 0.5rem 0; padding: 0.5rem; background: #f0f0f0; border-radius: 4px;\">[Please fill in here]</div>\n<div><strong>3. Number of Participants</strong></div>\n<div style=\"color: #666; font-size: 0.85rem;\">(1-2 recommended, up to 5 people)</div>\n<div style=\"margin: 0.5rem 0; padding: 0.5rem; background: #f0f0f0; border-radius: 4px;\">\u25a1 1 \u25a1 2 \u25a1 3 \u25a1 4 \u25a1 5</div>\n<div><strong>4. Purpose of Studio Use</strong></div>\n<div style=\"margin: 0.5rem 0; padding: 0.5rem; background: #f0f0f0; border-radius: 4px;\">\u25a1 Recording \u25a1 Other: [Please fill in here]</div>\n<div><strong>5. Preferred Rental Date</strong></div>\n<div style=\"color: #666; font-size: 0.85rem;\">※ We recommend booking at least 2 weeks in advance</div>\n<div style=\"margin: 0.5rem 0; padding: 0.5rem; background: #f0f0f0; border-radius: 4px;\">[Please fill in here]</div>\n<div><strong>6. Preferred Time Slot</strong></div>\n<div style=\"color: #666; font-size: 0.85rem;\">※ Example: 10 AM ~ 3 PM (5 hours)</div>\n<div style=\"color: #666; font-size: 0.85rem;\">※ Late-night rentals (10 PM ~ 8 AM next day) are subject to special rates per internal policy</div>\n<div style=\"margin: 0.5rem 0; padding: 0.5rem; background: #f0f0f0; border-radius: 4px;\">[Please fill in here]</div>\n</div>\n<div style=\"margin-top: var(--spacing-md); text-align: center;\">\n<a href=\"mailto:help@minglestudio.co.kr?subject=[Studio Rental Inquiry]\" class=\"btn btn-primary\"><i class=\"fa-solid fa-envelope\" aria-hidden=\"true\"></i> Send Email Now</a>\n</div>\n</div>\n<p>Please contact us at least 2 weeks in advance for smooth preparation.</p>",
"a2": "<p>Here is our refund policy:</p>\n<div class=\"policy-table\">\n<div class=\"policy-row\">\n<span class=\"policy-time\">7 days before reservation</span>\n<span class=\"policy-desc\">100% refund</span>\n</div>\n<div class=\"policy-row\">\n<span class=\"policy-time\">3 days before reservation</span>\n<span class=\"policy-desc\">70% refund</span>\n</div>\n<div class=\"policy-row\">\n<span class=\"policy-time\">1 day before reservation</span>\n<span class=\"policy-desc\">50% refund</span>\n</div>\n<div class=\"policy-row\">\n<span class=\"policy-time\">Same-day cancellation</span>\n<span class=\"policy-desc\">No refund</span>\n</div>\n</div>",
"a3": "<p>The minimum rental is <strong>2 hours</strong>.</p>\n<p>Extensions are available in 1-hour increments.</p>",
"a4": "<p>Please contact us at least 2 weeks in advance for smooth preparation.</p>",
"a5": "<p>On-site payment is available via cash or bank transfer.</p>\n<p>Please note that card payment is not available on-site.</p>\n<p>Cash receipts and tax invoices can be issued.</p>",
"a6": "<p>Yes, tax invoice issuance is available.</p>",
"a7": "<p>Mingle Studio is equipped with the following professional equipment:</p>\n<ul>\n<li><strong>OptiTrack Cameras:</strong> 30 units</li>\n<li><strong>Hand Tracking:</strong> Rokoko Smart Gloves in use</li>\n</ul>",
"a8": "<p>Yes, professional motion capture suits and markers are provided free of charge.</p>\n<ul>\n<li>Various sizes available (S, M, L, XL)</li>\n<li>Hygienically maintained in clean condition</li>\n<li>You may also bring your own suit</li>\n<li>Gloves, headbands, and other accessories included</li>\n</ul>",
"a9": "<p>Up to <strong>5 people</strong> can be captured simultaneously.</p>\n<p>Details by number of participants:</p>\n<ul>\n<li><strong>1 person:</strong> Highest precision capture</li>\n<li><strong>2 people:</strong> Optimal for interaction scenes</li>\n<li><strong>3-5 people:</strong> Group performance possible</li>\n</ul>\n<p>The more participants, the more limitations on capture space and accuracy.</p>",
"a10": "<p>We support the following payment methods:</p>\n<ul>\n<li><strong>Bank Transfer:</strong> Within 24 hours after reservation confirmation</li>\n<li><strong>Cash Payment:</strong> On-site payment available</li>\n<li><strong>Card Payment:</strong> Not available on-site</li>\n<li><strong>Tax Invoice:</strong> Available for business customers</li>\n<li><strong>Cash Receipt:</strong> Available for individual customers</li>\n</ul>\n<p>A deposit (30%) is due upon reservation confirmation, and the remaining balance (70%) can be paid on the day of shooting.</p>",
"a11": "<p>You will need to prepare the following:</p>\n<ul>\n<li><strong>Footwear:</strong> Socks must be worn</li>\n<li><strong>Glasses:</strong> Glasses cannot be worn (contact lenses recommended)</li>\n<li><strong>Hair:</strong> Long hair should be tied back</li>\n<li><strong>Accessories:</strong> Remove watches, rings, etc.</li>\n<li><strong>Makeup:</strong> Please avoid heavy makeup</li>\n</ul>\n<p>Motion capture suits and markers are provided by the studio.</p>",
"a12": "<p>We provide data in the following formats:</p>\n<ul>\n<li><strong>FBX Files:</strong> Compatible with Unity, Unreal Engine</li>\n<li><strong>ANIM Files:</strong> Directly compatible with Unity Animator</li>\n<li><strong>MP4 Video:</strong> Reference footage</li>\n</ul>\n<p>We will provide detailed information upon inquiry, and data is delivered via cloud.</p>",
"a13": "<p><strong>Yes, live streaming is available through our Streamingle service.</strong></p>\n<p>Motion capture data can be broadcast in real-time for use in live streams.</p>\n<p>For more details, please refer to the Streamingle service section on the Services page.</p>",
"a14": "<p>Yes, parking is available:</p>\n<ul>\n<li><strong>Basic:</strong> 2 hours free</li>\n<li><strong>When using building facilities:</strong> Additional 2 hours, up to 4 hours free</li>\n<li><strong>Location:</strong> Incheon Techno Valley building parking lot</li>\n</ul>",
"a15": "<p>Facility tours and visits require advance inquiry to confirm availability:</p>\n<ul>\n<li><strong>Advance Inquiry:</strong> Required (may be declined depending on studio schedule)</li>\n<li><strong>Contact:</strong> help@minglestudio.co.kr</li>\n<li><strong>Tour Duration:</strong> Approx. 30 minutes (upon approval)</li>\n<li><strong>Cost:</strong> Free</li>\n</ul>\n<p>Please understand that tours may be restricted depending on studio operations.</p>"
},
"cta": {
"title": "Didn't find the answer you're looking for?",
"desc": "If you have any questions, feel free to contact us anytime",
"btnContact": "Contact Us",
"btnCall": "Call Us"
}
},
"error404": {
"meta": {
"title": "Page Not Found - Mingle Studio"
},
"title": "Page Not Found",
"desc": "Sorry, the page you requested does not exist or may have been moved.<br>Please use the links below to find what you're looking for.",
"btnHome": "Back to Home",
"btnContact": "Contact Us",
"searchPlaceholder": "Search for what you need...",
"helpfulLinks": "Helpful Pages",
"linkAbout": "About Us",
"linkServices": "Services",
"linkPortfolio": "Portfolio",
"linkGallery": "Studio Gallery",
"linkQna": "FAQ",
"linkContact": "Contact & Location"
},
"schedule": {
"title": "Availability",
"desc": "Check available dates for studio booking",
"sun": "Sun",
"mon": "Mon",
"tue": "Tue",
"wed": "Wed",
"thu": "Thu",
"fri": "Fri",
"sat": "Sat",
"available": "Available",
"booked": "Fully Booked",
"past": "Past Date",
"infoTitle": "Booking Info",
"infoDesc": "Reservations can be made via email or the contact page.<br>We recommend booking at least 2 weeks in advance.",
"contactBtn": "Contact Us",
"naverBtn": "Naver Booking",
"detailHours": "Hours",
"detailHoursVal": "24H · Year-round",
"detailMin": "Minimum",
"detailMinVal": "From 2 hours",
"detailAdvance": "Advance",
"detailAdvanceVal": "2 weeks recommended"
}
}

819
i18n/ja.json
View File

@ -1,819 +0,0 @@
{
"header": {
"studioName": "Mingle Studio",
"nav": {
"about": "About",
"services": "Services",
"portfolio": "Portfolio",
"gallery": "Gallery",
"schedule": "Schedule",
"devlog": "DevLog",
"contact": "Contact",
"qna": "Q&A"
},
"menuOpen": "メニューを開く",
"menuClose": "メニューを閉じる",
"darkMode": "ダークモードに切替",
"lightMode": "ライトモードに切替",
"langSelect": "言語選択"
},
"footer": {
"companyInfo": "会社情報",
"companyName": "Mingle Studio",
"ceo": "代表: 김희진",
"businessNumber": "事業者登録番号: 208-12-73755",
"contact": "お問い合わせ",
"businessInquiry": "ビジネスお問い合わせ",
"reservationInquiry": "ご予約お問い合わせ",
"directions": "アクセス",
"address": "仁川広域市富平区主夫吐路236",
"addressDetail": "仁川テクノバレーU1センター A棟 B105号",
"copyright": "© 2025 Mingle Studio. All rights reserved."
},
"common": {
"loading": "ページを読み込み中...",
"componentLoading": "読み込み中...",
"skipToContent": "本文へスキップ",
"videoLoading": "動画を読み込み中...",
"videoError": "動画を読み込めません",
"imageError": "画像を読み込めません",
"floatingCTA": "お問い合わせ",
"floatingKakao": "KakaoTalkチャット",
"floatingPhone": "電話でお問い合わせ",
"floatingContact": "お問い合わせページ"
},
"index": {
"meta": {
"title": "Mingle Studio - モーションキャプチャー制作スタジオ",
"description": "最先端OptiTrackシステムと専門機材を備えたモーションキャプチャースタジオ。仁川テクノバレーでバーチャルコンテンツの新たな可能性を体験してください。",
"ogTitle": "Mingle Studio - モーションキャプチャー制作スタジオ",
"ogDescription": "最先端OptiTrackシステムと専門機材を備えたモーションキャプチャースタジオ"
},
"hero": {
"title": "Mingle Studio",
"subtitle": "MINGLE STUDIO",
"description": "技術と創造力、情熱が一つに混ざり合い<br>新しい価値が生まれる空間",
"btnAbout": "会社紹介を見る",
"btnContact": "ご予約・お問い合わせ",
"specCamera": "OptiTrack カメラ",
"specCameraUnit": "台",
"specSpace": "キャプチャー空間",
"specPrice": "1時間あたりレンタル料",
"specPriceUnit": "USD"
},
"showcase": {
"step1": {
"label": "Equipment",
"title": "最先端モーションキャプチャーシステム",
"desc": "OptiTrack光学式カメラ、Rokokoグローブ、ARKitフェイシャルキャプチャーまで — 全身から指先、表情まで精密にトラッキングします。",
"feature1Title": "OptiTrack カメラ 30台",
"feature1Desc": "サブミリメートル精度の光学式モーショントラッキング",
"feature2Title": "Rokoko グローブ 5台",
"feature2Desc": "指の関節まで精密なハンドキャプチャー",
"feature3Title": "ARKit フェイシャルキャプチャー (iPhone 5台)",
"feature3Desc": "iPhone基盤の高精度表情キャプチャー"
},
"step2": {
"label": "Space",
"title": "広く最適化されたキャプチャー空間",
"desc": "8m x 7m x 2.6m規模の専用キャプチャーボリュームで自由な動きが可能です。",
"feature1Title": "8m × 7m × 2.6m",
"feature1Desc": "広々とした専用キャプチャーボリューム",
"feature2Title": "リアルタイムストリーミング",
"feature2Desc": "ストリーミングルサービスでライブ配信"
},
"step3": {
"label": "Services",
"title": "主な活用分野",
"desc": "多様なクリエイティブプロジェクトを専門オペレーターがサポートします。",
"virtual": "バーチャルコンテンツ",
"virtualSub": "VTuber、バーチャルアイドル",
"game": "ゲーム開発",
"gameSub": "キャラクターアニメーション",
"video": "映像制作",
"videoSub": "VFX、バーチャルプロダクション",
"metaverse": "メタバース",
"metaverseSub": "3Dアバターコンテンツ",
"btnServices": "全サービスを見る"
},
"step4": {
"label": "Studio",
"title": "スタジオ空間",
"desc": "メインキャプチャー空間からコントロールルーム、プライベートルームまで全ての環境が整っています。専門的な技術サポートと共に最適なキャプチャー体験を提供します。",
"feature1Title": "専門技術サポート",
"feature1Desc": "熟練オペレーターによるリアルタイムサポート",
"feature2Title": "プライベート環境",
"feature2Desc": "独立した空間で集中作業",
"btnGallery": "ギャラリーを見る"
}
},
"portfolio": {
"title": "ポートフォリオ",
"desc": "Mingle Studioで制作・協業したモーションキャプチャーコンテンツ",
"tabCreator": "個人クリエイター",
"tabCorporate": "企業プロジェクト",
"tabShorts": "Shorts",
"btnMore": "全ポートフォリオを見る →"
},
"partner": {
"title": "パートナーストリーマー",
"desc": "Mingle Studioと共にコンテンツを作るクリエイター",
"streamer1": {
"desc": "グスルヨ！おしゃべり、歌、ゲーム、VRChatなど多彩なコンテンツを配信するバーチャルストリーマー",
"tagSong": "歌",
"tagGame": "ゲーム"
}
},
"creatorSigns": {
"title": "来訪クリエイター",
"desc": "Mingle Studioを訪れたクリエイターたちのサイン"
},
"clients": {
"title": "クライアント",
"desc": "様々な分野の企業と共に革新的なモーションキャプチャーコンテンツを制作しています"
},
"faqShortcut": {
"label": "FAQ",
"title": "初めてで不安ですか？",
"desc": "モーションキャプチャーが初めてでも大丈夫です。予約から撮影までよくある質問をまとめました。",
"btnFaq": "よくある質問を見る",
"btnContact": "1:1お問い合わせ",
"btnOnline": "オンラインお問い合わせページ"
},
"cta": {
"label": "Get Started",
"title": "あなたのアイデアを、<br>動きで形にします",
"desc": "プロのモーションキャプチャースタジオで、クリエイティブの新たな可能性を体験してください",
"btnReserve": "ご予約・お問い合わせ",
"btnSchedule": "予約状況を確認",
"btnNaver": "Naver予約",
"infoReservation": "ご予約",
"infoBusiness": "ビジネス",
"infoDiscord": "Discord",
"infoKakao": "KakaoTalk",
"infoKakaoDesc": "オープンチャットで相談"
},
"popup": {
"title": "料金プラン変更のお知らせ",
"subtitle": "2026年3月より適用されました",
"badge": "施行中",
"mainChanges": "主な変更点",
"discountEnd": "割引イベント終了",
"discountEndDesc": "オープン記念20%割引イベントが<strong>2月28日</strong>をもって終了し、現在は通常料金が適用されています。",
"streaming4h": "ストリーミングル4時間サービス新設",
"streaming4hDesc": "既存のストリーミングルサービス（6時間）と同じ特典を4時間パッケージでご利用いただけます。",
"referral": "紹介制度オープン",
"referralDesc": "お友達をご紹介いただくと、紹介した方・紹介された方の両方に<strong>20%割引券</strong>を差し上げます。（1回限り、他割引との併用不可）",
"notice": "※ 変更された料金はサービスページに反映されています",
"effectiveDate": "適用時期",
"effectiveDateValue": "2026年3月〜",
"inquiryEmail": "お問い合わせメール",
"ctaBtn": "現在のサービス料金を見る →",
"dontShowToday": "今日は表示しない",
"close": "閉じる"
}
},
"about": {
"meta": {
"title": "会社紹介 - Mingle Studio",
"description": "Mingle Studioは技術と創造力が融合したモーションキャプチャー制作空間です。2025年設立、仁川テクノバレー所在。",
"ogTitle": "会社紹介 - Mingle Studio",
"ogDescription": "2025年設立の仁川唯一のモーションキャプチャー専門スタジオ。技術と創造力が融合したバーチャルコンテンツ制作空間です"
},
"pageHeader": {
"title": "About Us",
"desc": "技術と創造力、情熱が一つに混ざり合い新しい価値が生まれる空間"
},
"info": {
"companyName": "会社名",
"companyNameValue": "Mingle Studio",
"foundingDate": "設立日",
"foundingDateValue": "2025年7月15日",
"slogan": "スローガン",
"sloganValue": "\"みんなが交わる楽しい創作空間\"",
"meaning": "意味",
"meaningValue": "Mingle Studioは技術者とクリエイター、そして視聴者が共に交わるバーチャルコンテンツ制作空間です。最先端光学式モーションキャプチャー技術でバーチャルキャラクターの生き生きとした感情と動きを捉え、新しい世代のデジタルパフォーマンスを実現します。"
},
"companyIntro": {
"title": "会社紹介",
"desc1": "Mingle Studioは、クリエイターと技術、人と人との「交わり」を通じて新しいコンテンツを作り上げるモーションキャプチャー基盤の創作空間です。",
"desc2": "設立以来、どなたでも気軽にご利用いただけるスタジオレンタルサービスを中心に、バーチャルコンテンツ制作環境を提供しています。"
},
"visionMission": {
"title": "ビジョン & ミッション",
"visionTitle": "ビジョン",
"visionDesc": "全てのクリエイターが技術的な制約なく想像を現実にできる創作エコシステムの構築",
"missionTitle": "ミッション",
"missionDesc": "最先端モーションキャプチャー技術を通じてクリエイターのアイデアを生き生きとしたコンテンツに変換し、新しいデジタル体験を提供"
},
"history": {
"title": "沿革",
"date1": "2025年7月15日",
"event1Title": "Mingle Studio設立",
"event1Desc": "Mingle Studio会社設立",
"date2": "2025年8月1日",
"event2Title": "スタジオオープン",
"event2Desc": "OptiTrackシステム構築完了およびスタジオレンタルサービス開始"
},
"team": {
"title": "Our Team",
"desc": "各分野の専門家が協力してコンテンツ制作をサポートします",
"member1Name": "김희진",
"member1Role": "代表 / 3Dアーティスト",
"member1Desc": "背景・リソース制作、人事およびプロジェクト管理",
"member2Name": "김광진",
"member2Role": "CTO / テクニカルディレクター",
"member2Desc": "スタジオ全体の技術運営、モーションキャプチャー機材管理、音響システム、エンジンプログラミング",
"member3Name": "이승민",
"member3Role": "CCO / コンテンツディレクター",
"member3Desc": "キャプチャーディレクション、アクターモーションクリーンアップ、カメラムービング、パフォーマンス演出"
},
"partner": {
"title": "Partner Streamer",
"desc": "Mingle Studioと共にコンテンツを制作するクリエイター",
"streamer1Desc": "コミュニケーション、歌、ゲーム、VRChatなど多彩なコンテンツを披露するバーチャルストリーマー。SOOPを中心に活発に活動し、Mingle Studioのモーションキャプチャー技術と共に新しいバーチャルコンテンツを制作しています。"
},
"values": {
"title": "Core Values",
"desc": "Mingle Studioが目指すコアバリュー",
"collaboration": "コラボレーション",
"collaborationDesc": "技術者とクリエイターが共に生み出すシナジー",
"innovation": "イノベーション",
"innovationDesc": "最新技術で新しい創作の可能性を提示",
"creativity": "クリエイティビティ",
"creativityDesc": "想像を現実にするクリエイティブソリューション",
"quality": "クオリティ",
"qualityDesc": "最高水準のモーションキャプチャー品質の追求"
}
},
"services": {
"meta": {
"title": "サービス紹介 - Mingle Studio",
"description": "Mingle Studioのサービス紹介 - OptiTrackモーションキャプチャースタジオレンタル、2名$150〜/時間、全身/フェイシャルキャプチャー、モーション録画専門",
"ogTitle": "サービス紹介 - Mingle Studio",
"ogDescription": "OptiTrackモーションキャプチャースタジオレンタルサービス。全身/フェイシャルキャプチャー専門"
},
"pageHeader": {
"title": "Services",
"desc": "最先端モーションキャプチャー施設と専門サービスを提供します"
},
"packages": {
"title": "サービスパッケージ",
"desc": "用途と規模に合った最適なモーションキャプチャー録画サービスを提供します",
"vatNotice": "※ 全ての料金は消費税別です"
},
"compare": {
"recordingTitle": "モーションキャプチャー録画",
"recordingPrice": "200,000ウォン~/時間（2名基準）",
"recordingDesc": "モーションデータ録画専用 · ライブ配信は含まれません",
"liveTitle": "モーションキャプチャー ライブ配信",
"livePrice": "1,400,000ウォン~ / 4時間パッケージ",
"liveDesc": "録画 + ライブ配信 + アバター・背景・プロップセッティング込みフルパッケージ"
},
"service1": {
"title": "サービス1：モーションキャプチャー録画サービス",
"badge": "ベーシック",
"team": "2名利用",
"teamPopular": "人気",
"teamPrice": "$150",
"teamUnit": "/時間",
"teamFeature1": "2名同時モーション録画",
"teamFeature2": "キャラクター間インタラクション収録",
"teamFeature3": "チームプロジェクト協業",
"additional": "追加人数",
"additionalPrice": "+$75",
"additionalUnit": "/名/時間",
"additionalFeature1": "最大5名同時録画",
"additionalFeature2": "多人数モーションキャプチャー",
"additionalFeature3": "グループ振付・演技収録",
"minPerson": "最小利用人数：2名",
"minTime": "最小利用時間：2時間",
"maxPerson": "最大同時利用：5名",
"techTitle": "提供技術およびサービス",
"tech1": "OptiTrack 30台カメラ",
"tech2": "リアルタイムアバター録画",
"tech3": "全身/フェイシャルキャプチャー",
"tech4": "リアルタイムモニタリング",
"tech5": "専門オペレーター",
"tech6": "モーションデータ提供",
"note": "アバターリターゲティングサービスは基本提供に含まれておらず、後続作業連携時に別途ご相談にて提供いたします。",
"postTitle": "後処理オプション",
"cleanupTitle": "データクリーンアップ",
"cleanupPrice": "50,000 ~ 100,000ウォン",
"cleanupUnit": "/ 分あたり",
"cleanupDesc": "ノイズ除去・フレーム補正 · リターゲティング不含",
"retargetTitle": "リターゲティング",
"retargetPrice": "300,000 ~ 500,000ウォン",
"retargetUnit": "/ 分あたり",
"retargetDesc": "お客様のアバターに最適化されたモーションリターゲティング",
"postNote": "* 後処理は録画完了後、別途ご相談にて承ります",
"typeNotice": "録画専用サービスです · ライブ配信は下記の別途パッケージをご利用ください"
},
"combo": {
"title": "セットプラン",
"badge": "特化サービス",
"mvTitle": "ミュージックビデオ/ショートフォーム映像リアルタイム撮影",
"mvPrice": "モーションキャプチャーと同一料金",
"mvReqTitle": "追加要件",
"mvReq1": "企画書の事前協議必須",
"mvReq2": "キャラクター/背景/プロップの事前協議",
"mvReq3": "アクター手配が必要な場合：$75（1名あたり1時間あたり）",
"mvPortfolio": "ポートフォリオを見る",
"remoteTitle": "リモート撮影",
"remotePrice": "モーションキャプチャーと同一料金",
"remoteServiceTitle": "サービス内容",
"remoteService1": "リモートリアルタイム撮影対応",
"remoteService2": "オンラインディレクション可能",
"remoteService3": "リアルタイムストリーミング配信",
"remoteExtraTitle": "追加料金",
"remoteExtra1": "アクター手配費：$75（1名あたり1時間あたり）"
},
"service2": {
"title": "サービス2：ストリーミングルサービス",
"badge": "代表サービス",
"typeNotice": "録画サービスとは別パッケージ · アバター・背景・プロップセッティング + ライブ配信込み",
"pkg4h": "4時間パッケージ",
"pkg4hBadge": "NEW",
"pkg4hPrice": "$1,100",
"pkg4hUnit": "/ 1〜5名利用",
"pkg4hFeature1": "合計4時間利用",
"pkg4hFeature2": "レンタル2時間 + 撮影準備2時間",
"pkg4hFeature3": "6時間パッケージと同じ特典",
"pkg6h": "6時間パッケージ",
"pkg6hPrice": "$1,500",
"pkg6hUnit": "/ 1〜5名利用",
"pkg6hFeature1": "合計6時間利用",
"pkg6hFeature2": "レンタル4時間 + 撮影準備2時間",
"pkg6hFeature3": "大規模プロジェクトに最適",
"commonLabel": "以下の特典は4時間・6時間パッケージ共通です",
"benefitsTitle": "共通特典",
"benefit1": "1名につきキャラクター1体の無料セッティング",
"benefit2": "既存保有背景から2つ無料セッティング",
"benefit3": "プロップ無料セッティング（新規プロップ最大6個、保有プロップ無制限）",
"benefit4": "モーションキャプチャー録画サービス",
"benefit5": "リアルタイム映像撮影",
"benefit6": "ライブ配信サービス",
"featuresTitle": "サービスの特徴",
"feature1": "大規模プロジェクト対応",
"feature2": "複合的な撮影環境の提供",
"feature3": "リアルタイムストリーミング（ストリーミングル専用）",
"feature4": "専門スタッフフルサービス",
"feature5": "1〜5名自由に選択可能",
"livePortfolio": "ライブ配信ポートフォリオを見る"
},
"service3": {
"title": "サービス3：ミュージックビデオ制作サービス",
"badge": "プレミアム",
"intro": "企画から納品まで、プロフェッショナルなミュージックビデオ制作の全工程をサポートします。",
"priceRange": "総予想費用：$1,500〜$3,000",
"priceNote1": "※ 上記費用は概算であり、プロジェクトの規模や要件により見積もりが変更される場合があります。",
"priceNote2": "※ 背景制作の範囲、ストーリーボード作家費用、アバター/プロップの数、演出の難易度により変動します。",
"processTitle": "制作プロセス（7ステップ）",
"step1Title": "企画相談（無料）",
"step1Desc": "ミュージックビデオ制作の開始段階として、コンセプトと雰囲気を整理します。",
"step1Note": "※ 方向性が明確であるほど、その後の制作がスムーズに進みます。",
"step2Title": "背景制作",
"step2Desc": "著作権の帰属先に応じてオプションを選択できます。",
"step2Opt1Type": "保有背景の使用",
"step2Opt1Price": "$25/個",
"step2Opt1Note": "著作権：会社帰属",
"step2Opt2Type": "新規制作（会社帰属）",
"step2Opt2Price": "$80/個",
"step2Opt2Note": "著作権：会社帰属（大型または特殊背景は制限される場合があります）",
"step2Opt3Type": "新規制作（クライアント帰属）",
"step2Opt3Price": "$150〜$700/個",
"step2Opt3Note": "著作権：クライアント所有（規模とディテールにより変動）",
"step2ProcessNote": "Unityビルドで納品され、カメラ視点の確認が可能",
"step3Title": "ストーリーボード作成",
"step3Price": "$75〜",
"step3Desc": "外部の専門ライターがミュージックビデオの流れを具体化します。",
"step3Note": "※ お客様と共有し、演出やカメラカットを事前に確認・承認",
"step4Title": "アバターセッティング及びプロップ制作",
"step4AvatarLabel": "アバターセッティング：",
"step4AvatarPrice": "$40/個",
"step4PropLabel": "ストーリー進行用プロップ：",
"step4PropPrice": "$15/個",
"step4Desc": "アバターをミュージックビデオ環境に合わせて最適化します。",
"step4Note": "※ アバターの修正および最適化作業が可能",
"step5Title": "モーションキャプチャー",
"step5StudioLabel": "モーションキャプチャースタジオレンタル費用",
"step5Solo": "1名利用：",
"step5SoloPrice": "$110/時間",
"step5Duo": "2名利用：",
"step5DuoPrice": "$150/時間",
"step5Extra": "追加人数：",
"step5ExtraPrice": "+$75/名/時間",
"step5ExtraNote": "（最大5名まで）",
"step5ActorLabel": "アクター手配費用",
"step5Actor": "アクター手配：",
"step5ActorPrice": "$75/名/時間",
"step5Desc": "ストーリーボードを基にモーションを録画します。",
"step5Note1": "※ 撮影期間：1〜2日所要",
"step5Note2": "※ 最小利用：2時間",
"step6Title": "ルック開発 & 演出",
"step6Price": "$360〜",
"step6Desc": "Unityでポストプロセシング、アートワーク、カメラワーキングなどを行います。",
"step6Note": "※ 演出の複雑さとクオリティにより変動",
"step7Title": "最終フィードバック & 納品",
"step7Desc": "完成した映像をお客様のフィードバックを反映し修正して最終納品します。",
"step7Note": "※ 納品形式：mp4/mov等",
"processNote": "企画相談（無料）→ 全体見積もり提示 → 見積もり承認後に制作開始（ステップ2〜7を順次進行）"
},
"options": {
"title": "追加オプション料金",
"desc": "全てのサービスパッケージに共通で適用される追加オプションです",
"vatNote": "*消費税別",
"charSetup": "キャラクターセッティング",
"charPrice": "$40〜",
"charUnit": "/ 1名1体",
"charDesc": "新規キャラクターセッティング作業",
"bgSetup": "背景セッティング",
"bgExisting": "既存保有背景の使用",
"bgExistingPrice": "$25〜",
"bgExistingUnit": "/ 1個",
"bgExistingNote": "セッティング費のみ",
"bgNew": "新規背景制作",
"bgNewPrice": "$80〜",
"bgNewUnit": "/ 1個",
"bgNewNote": "セッティング費 + 制作費/購入費別途\nMingle Studioまたは依頼者帰属を選択可能です",
"propSetup": "プロップセッティング",
"propPrice": "$15",
"propUnit": "/ 1個",
"propDesc": "プロップセッティング作業\n（ストリーミングルサービス：新規プロップ最大6個、保有プロップ無制限無料提供）"
},
"usage": {
"title": "ご利用案内",
"hours": "営業時間",
"hoursDesc": "基本営業時間：10:00〜22:00\n夜間利用時は料金1.5倍適用",
"minTime": "最小利用時間",
"minTimeDesc": "全サービス最低2時間\n（ストリーミングルサービスを除く）",
"preparation": "事前準備事項",
"preparationDesc": "ミュージックビデオ/ショートフォーム撮影時\n企画書および準備物の事前協議必須",
"followUp": "後続サービス",
"followUpDesc": "アバターリターゲティングは後続作業連携時にのみ\n提供されます（別途ご相談）"
},
"guide": {
"title": "サービスご利用案内",
"processTitle": "スタジオレンタル手続き",
"step1": "メールお問い合わせ",
"step1Desc": "予約フォームを記入してお問い合わせ",
"step2": "担当者確認および協議",
"step2Desc": "詳細事項の調整",
"step3": "全額お支払い",
"step3Desc": "お支払い完了",
"step4": "予約確定",
"step4Desc": "最終予約完了",
"btnEmail": "メールでお問い合わせ",
"btnNaver": "Naver予約へ",
"btnSchedule": "予約状況を確認",
"naverNote": "※ Naverプレイスでリアルタイムのスケジュール確認および予約が可能です"
},
"policy": {
"reservationTitle": "予約案内",
"reservation1": "スタジオの予約はご利用希望日の少なくとも2週間前までにお申し込みいただくことをお勧めします。",
"reservation2": "予約確定後、お客様のご都合による予約キャンセルの場合、規定に基づくキャンセル料が発生します。",
"visitTitle": "ご来場案内",
"visit1": "撮影前にモーションキャプチャースーツの着用等の準備が必要なため、撮影予定時刻の最低30分前にお越しください。（準備時間は利用時間に含まれません。）",
"visit2": "撮影時はメガネやイヤリングなど反射しやすい素材のアクセサリーの着用はできるだけお控えください。",
"refundTitle": "キャンセル・返金規定",
"refundColTime": "キャンセル時期",
"refundColRate": "返金率",
"refund7days": "予約日の7日前",
"refund100": "100%返金",
"refund3days": "予約日の3日前",
"refund70": "70%返金",
"refund1day": "予約日の1日前",
"refund50": "50%返金",
"refundSameDay": "当日キャンセル",
"refundNone": "返金不可"
}
},
"portfolio": {
"meta": {
"title": "ポートフォリオ - Mingle Studio",
"description": "Mingle Studioのポートフォリオ - モーションキャプチャーで制作されたYouTubeコンテンツ、VTuber配信、ショート映像コレクション",
"ogTitle": "ポートフォリオ - Mingle Studio",
"ogDescription": "モーションキャプチャースタジオで制作されたミュージックビデオ、ショートフォーム、VTuber配信など多彩な映像コンテンツ。OptiTrackで高品質モーションキャプチャーサービスを提供"
},
"pageHeader": {
"title": "Portfolio",
"desc": "Mingle Studioで制作・協業したモーションキャプチャーコンテンツ"
},
"channel": {
"title": "Mingle Studio公式チャンネル",
"desc": "最新のモーションキャプチャーコンテンツと制作過程をYouTubeでご確認ください",
"btn": "YouTubeチャンネルを訪問する"
},
"tabs": {
"individual": "個人クリエイター",
"corporate": "企業プロジェクト"
},
"longform": {
"title": "ロングフォームコンテンツ",
"desc": "個人クリエイターのモーションキャプチャープロジェクト"
},
"shorts": {
"title": "ショートコンテンツ",
"desc": "短くインパクトのあるモーションキャプチャーの瞬間"
},
"broadcast": {
"title": "リアルタイム配信事例",
"desc": "VTuberとストリーマーによるリアルタイムモーションキャプチャー配信",
"noticeTitle": "リアルタイムモーションキャプチャー配信",
"noticeDesc": "Mingle Studioで行われるリアルタイムモーションキャプチャー配信を通じて、高品質バーチャルコンテンツを体験してください"
},
"corporate": {
"title": "企業プロジェクト",
"desc": "企業および商業モーションキャプチャープロジェクト",
"ixiaDesc": "バーチャルアイドルグループのモーションキャプチャー制作",
"mvSection": "ミュージックビデオ制作",
"shortsSection": "ショートフォームビデオ制作",
"liveSection": "ライブ配信"
},
"cta": {
"title": "あなたのコンテンツもここに",
"desc": "Mingle Studioと共に次のポートフォリオの主人公になりましょう",
"btnInquiry": "プロジェクトのお問い合わせ",
"btnServices": "サービスを見る"
},
"js": {
"checkNetwork": "ネットワーク接続をご確認ください",
"shareTitle": "Mingle Studio ポートフォリオ",
"linkCopied": "動画リンクがクリップボードにコピーされました。",
"linkCopyFailed": "リンクのコピーに失敗しました。"
}
},
"gallery": {
"meta": {
"title": "スタジオギャラリー - Mingle Studio",
"description": "Mingle Studioギャラリー - モーションキャプチャースタジオの実際の空間と施設を写真でご確認ください",
"ogTitle": "スタジオギャラリー - Mingle Studio",
"ogDescription": "30台のOptiTrackカメラシステムと8×7m大型撮影空間。仁川唯一のモーションキャプチャースタジオの実際の施設と機材をご覧ください"
},
"pageHeader": {
"title": "Studio Gallery",
"desc": "Mingle Studioの実際の空間を写真でご覧ください"
},
"captions": {
"exterior_open": "外観 カーテン開放",
"exterior_closed": "外観 カーテン閉鎖",
"control_room": "オペレーティング/コントロールルーム",
"powder_room": "パウダールーム（スタジオ連結）",
"changing_room_in": "更衣室（内部）",
"changing_room_out": "更衣室（外部）",
"audio_system": "高品質オーディオシステム",
"mocap_space_1": "モーションキャプチャー空間 001",
"mocap_space_2": "モーションキャプチャー空間 002",
"mocap_space_3": "モーションキャプチャー空間 003",
"mocap_space_4": "モーションキャプチャー空間 004"
},
"panorama": {
"title": "360° Studio View",
"desc": "ドラッグしてスタジオを360度見渡してください",
"clickToView": "クリックして360° VRで体験する",
"curtainOpen": "スタジオ全景（カーテン開放）",
"curtainClosed": "スタジオ全景（カーテン閉鎖）"
},
"js": {
"lightboxLabel": "画像ビューアー",
"close": "閉じる",
"prevImage": "前の画像",
"nextImage": "次の画像",
"panoramaLoading": "360°画像を読み込み中...",
"reset": "リセット",
"autoRotate": "自動回転",
"stop": "停止",
"zoomIn": "拡大",
"zoomOut": "縮小",
"help": "ヘルプ",
"helpTitle": "360° 操作ガイド",
"helpDrag": "マウスドラッグで画面を回転できます",
"helpTouch": "タッチスクリーンでは指でドラッグしてください",
"helpZoom": "マウスホイールやピンチで拡大/縮小できます",
"helpAutoRotate": "自動回転ボタンで自動的に見回すことができます",
"helpEsc": "ESCキーで閉じることができます",
"checkImageFile": "画像ファイルをご確認ください"
}
},
"contact": {
"meta": {
"title": "お問い合わせ - Mingle Studio",
"description": "Mingle Studioへのお問い合わせ - モーションキャプチャースタジオレンタル、撮影、制作に関するお問い合わせとご相談",
"ogTitle": "お問い合わせ - Mingle Studio",
"ogDescription": "モーションキャプチャースタジオレンタル、撮影、制作に関するお問い合わせとご相談。仁川テクノバレー所在のOptiTrack専門スタジオ"
},
"pageHeader": {
"title": "Contact Us",
"desc": "Mingle Studioと一緒に特別なプロジェクトを始めましょう"
},
"phone": {
"title": "お電話でのお問い合わせ",
"desc": "24時間対応可能"
},
"business": {
"title": "ビジネスお問い合わせ",
"desc": "提携・協力に関するお問い合わせ"
},
"reservation": {
"title": "ご予約・お問い合わせ",
"desc": "24時間受付可能"
},
"discord": {
"title": "Discord",
"desc": "リアルタイムチャットお問い合わせ"
},
"kakao": {
"title": "カカオトーク",
"desc": "オープンチャット相談",
"link": "カカオトークで相談"
},
"visit": {
"title": "スタジオご訪問",
"desc": "事前予約必須",
"link": "所在地を見る"
},
"location": {
"title": "スタジオ所在地",
"address": "住所",
"addressValue": "(21330) 仁川広域市富平区主夫吐路236<br>仁川テクノバレーU1センター A棟 B105号",
"subway": "地下鉄",
"subwayDesc": "仁川7号線 カルサン駅下車 → 徒歩約7分",
"bus": "バス",
"busStop": "カルサン市場・カルサン図書館バス停をご利用ください",
"busRoutes": "4番、526番、555番バス",
"parking": "駐車場",
"parkingDesc": "基本2時間無料、建物内施設利用時最大4時間無料",
"hours": "営業時間",
"hours24": "24時間営業",
"hoursAllYear": "年中無休",
"naverMap": "Naver地図",
"googleMap": "Google マップ"
},
"form": {
"title": "オンラインお問い合わせ",
"desc": "以下のフォームにご記入いただければ、迅速にご返答いたします",
"name": "お名前 <span class=\"required\">*</span>",
"namePlaceholder": "山田太郎",
"email": "メールアドレス <span class=\"required\">*</span>",
"phone": "電話番号",
"service": "お問い合わせ種類 <span class=\"required\">*</span>",
"serviceDefault": "選択してください",
"serviceRental": "スタジオレンタル",
"serviceMotion": "モーション録画",
"serviceMV": "ミュージックビデオ制作",
"servicePartner": "提携・協力",
"serviceOther": "その他",
"message": "お問い合わせ内容 <span class=\"required\">*</span>",
"messagePlaceholder": "プロジェクトの内容、ご希望の日程などをご自由にお書きください",
"sensitiveWarning": "※ お問い合わせ内容にマイナンバー、口座番号等の機密個人情報を含めないようご注意ください。",
"privacyAgree": "個人情報の収集及び利用に同意します。（必須）",
"privacyView": "プライバシーポリシーを見る",
"privacyPurpose": "収集目的：お問い合わせ受付及び回答",
"privacyItems": "収集項目：氏名、メール、電話番号、お問い合わせ内容",
"privacyPeriod": "保管期間：7日後に自動削除",
"submit": "お問い合わせを送信",
"reset": "リセット",
"privacyModalTitle": "個人情報の収集及び利用に関するご案内",
"privacyM1Title": "1. 収集目的",
"privacyM1Desc": "お客様のお問い合わせ受付及び回答の提供",
"privacyM2Title": "2. 収集項目",
"privacyM2Required": "必須：氏名、メールアドレス、お問い合わせ種類、お問い合わせ内容",
"privacyM2Optional": "任意：電話番号",
"privacyM3Title": "3. 保管及び利用期間",
"privacyM3Desc": "お問い合わせ受付日から7日間保管後、自動的に削除されます。",
"privacyM4Title": "4. 同意拒否の権利",
"privacyM4Desc": "個人情報の収集及び利用への同意を拒否する権利があります。ただし、同意を拒否された場合、お問い合わせの受付ができません。",
"privacyM5Title": "5. 第三者提供",
"privacyM5Desc": "お問い合わせ内容はセキュアチャネルを通じて送信され、海外サーバーを経由する場合があります。お問い合わせ処理目的以外には使用されません。"
},
"cta": {
"title": "ご予約・お問い合わせ",
"desc": "簡単なオンライン予約またはよくある質問をご確認ください",
"btnNaver": "Naver予約",
"btnSchedule": "予約状況",
"btnFaq": "FAQを見る"
},
"js": {
"checkInput": "入力情報をご確認ください。",
"sending": "送信中...",
"sendSuccess": "お問い合わせが正常に送信されました。まもなくご連絡いたします。",
"sendError": "送信中にエラーが発生しました。もう一度お試しください。",
"errorTitle": "送信に失敗しました",
"errorDesc": "一時的なサーバーエラーによりお問い合わせを送信できませんでした。以下の方法で直接ご連絡ください。",
"errorEmail": "メール",
"errorPhone": "電話",
"errorKakao": "カカオトーク",
"errorKakaoDesc": "オープンチャットで相談",
"errorDiscord": "Discordサーバーでお問い合わせ",
"resetConfirm": "入力内容がすべて削除されます。続行しますか？",
"invalidEmail": "正しいメールアドレスを入力してください。",
"invalidPhone": "正しい電話番号を入力してください。",
"required": "必須入力項目です。",
"privacyRequired": "個人情報の収集及び利用に同意してください。"
}
},
"qna": {
"meta": {
"title": "よくある質問 - Mingle Studio",
"description": "Mingle StudioFAQ - モーションキャプチャースタジオレンタル、撮影、制作に関するよくある質問と回答",
"ogTitle": "よくある質問 - Mingle Studio",
"ogDescription": "モーションキャプチャースタジオレンタル、撮影、料金、予約に関するよくある質問と回答。OptiTrackシステム利用ガイド"
},
"pageHeader": {
"title": "よくある質問",
"desc": "Mingle Studioのご利用に関するよくある質問をご確認ください"
},
"search": {
"placeholder": "気になる内容を検索してください...",
"btnLabel": "検索"
},
"categories": {
"all": "全て",
"booking": "予約/レンタル",
"equipment": "機材/技術",
"pricing": "料金/お支払い",
"production": "制作/撮影",
"streaming": "ストリーミング",
"etc": "その他"
},
"faq": {
"q1": "スタジオレンタルはどのように予約しますか？",
"q2": "予約金制度と返金規定はありますか？",
"q3": "最小レンタル時間はどのくらいですか？",
"q4": "レンタルはどのくらい前に予約する必要がありますか？",
"q5": "現地でのお支払いは可能ですか？",
"q6": "税金計算書の発行は可能ですか？",
"q7": "どのようなモーションキャプチャー機材を使用していますか？",
"q8": "モーションキャプチャースーツは提供されますか？",
"q9": "何名まで同時にモーションキャプチャーが可能ですか？",
"q10": "お支払い方法はどうなっていますか？",
"q11": "撮影の準備物は何が必要ですか？",
"q12": "データはどのような形式で受け取れますか？",
"q13": "リアルタイムストリーミングは可能ですか？",
"q14": "駐車場はありますか？",
"q15": "見学や施設ツアーは可能ですか？",
"a1": "<p>以下の方法でご予約いただけます：</p>\n<ul>\n<li><strong><i class=\"fa-solid fa-envelope\" aria-hidden=\"true\"></i> メール：</strong> <a href=\"mailto:help@minglestudio.co.kr?subject=[スタジオ予約お問い合わせ] Mingle Studio&body=こんにちは。Mingle Studioのレンタル予約についてお問い合わせいたします。%0A%0A■ 基本情報%0A- ご利用予定日：（例：2024年12月25日）%0A- ご利用時間：（例：午後2時〜4時、2時間）%0A- 参加人数：名%0A- ご連絡先：%0A- メール：%0A%0A■ 撮影情報%0A- 撮影目的：（例：VTuber配信、ゲーム制作、映像コンテンツなど）%0A- 撮影予定内容：%0A- 必要な機材：（全身モーションキャプチャー/フェイシャルキャプチャー/その他）%0A%0A■ 追加リクエスト%0A- 特別なご要望：%0A- ご質問：%0A%0A■ 参考情報%0A- 最小レンタル：2時間（$165、税込み）%0A- 延長：1時間あたり$83%0A- お支払い方法：銀行振込または現金（カード決済不可）%0A- 現金領収書/税金計算書発行可能%0A%0A早急にご返答いたします。%0Aよろしくお願いいたします。\">help@minglestudio.co.kr</a></li>\n<li><strong><i class=\"fa-solid fa-phone\" aria-hidden=\"true\"></i> お電話：</strong> 010-9288-9190</li>\n</ul>\n<div style=\"margin-top: var(--spacing-md); text-align: center;\">\n<button id=\"showEmailFormFAQ\" class=\"btn btn-primary\" style=\"font-size: 0.9rem; padding: 0.5rem 1rem;\"><i class=\"fa-solid fa-envelope\" aria-hidden=\"true\"></i> メールでお問い合わせ</button>\n</div>\n<div id=\"emailFormFAQ\" class=\"email-form\" style=\"display:none; margin-top: var(--spacing-lg); padding: var(--spacing-lg); border: 1px solid #ddd; border-radius: var(--border-radius); background: #f9f9f9;\">\n<h4>メールお問い合わせフォーム</h4>\n<p>以下のフォームをコピーしてメールでお問い合わせください：</p>\n<div class=\"email-template\" style=\"background: white; padding: var(--spacing-md); border-radius: var(--border-radius); font-family: monospace; font-size: 0.9rem; line-height: 1.6;\">\n<div><strong>件名：</strong> [スタジオレンタルお問い合わせ]</div>\n<div><strong>宛先：</strong> help@minglestudio.co.kr</div>\n<br>\n<div><strong>1. お名前と所属</strong></div>\n<div style=\"color: #666; font-size: 0.85rem;\">（個人の場合はお名前のみ、企業の場合はご利用者のお名前と所属をご記入ください）</div>\n<div style=\"margin: 0.5rem 0; padding: 0.5rem; background: #f0f0f0; border-radius: 4px;\">[こちらにご記入ください]</div>\n<div><strong>2. ご連絡先</strong></div>\n<div style=\"color: #666; font-size: 0.85rem;\">（電話番号、メール、Discordのいずれか）</div>\n<div style=\"margin: 0.5rem 0; padding: 0.5rem; background: #f0f0f0; border-radius: 4px;\">[こちらにご記入ください]</div>\n<div><strong>3. ご利用人数</strong></div>\n<div style=\"color: #666; font-size: 0.85rem;\">（1〜2名推奨、最大5名まで可能）</div>\n<div style=\"margin: 0.5rem 0; padding: 0.5rem; background: #f0f0f0; border-radius: 4px;\">\u25a1 1名 \u25a1 2名 \u25a1 3名 \u25a1 4名 \u25a1 5名</div>\n<div><strong>4. スタジオ使用目的</strong></div>\n<div style=\"margin: 0.5rem 0; padding: 0.5rem; background: #f0f0f0; border-radius: 4px;\">\u25a1 録画 \u25a1 その他：[こちらにご記入ください]</div>\n<div><strong>5. ご希望レンタル日</strong></div>\n<div style=\"color: #666; font-size: 0.85rem;\">※ 最低2週間前のご予約を推奨します</div>\n<div style=\"margin: 0.5rem 0; padding: 0.5rem; background: #f0f0f0; border-radius: 4px;\">[こちらにご記入ください]</div>\n<div><strong>6. ご希望利用時間</strong></div>\n<div style=\"color: #666; font-size: 0.85rem;\">※ 回答例）午前10時〜午後3時（5時間）</div>\n<div style=\"color: #666; font-size: 0.85rem;\">※ 深夜レンタル（夜10時〜翌朝8時）は内部規定による特別料金が適用されます</div>\n<div style=\"margin: 0.5rem 0; padding: 0.5rem; background: #f0f0f0; border-radius: 4px;\">[こちらにご記入ください]</div>\n</div>\n<div style=\"margin-top: var(--spacing-md); text-align: center;\">\n<a href=\"mailto:help@minglestudio.co.kr?subject=[スタジオレンタルお問い合わせ]\" class=\"btn btn-primary\"><i class=\"fa-solid fa-envelope\" aria-hidden=\"true\"></i> メールを送る</a>\n</div>\n</div>\n<p>最低2週間前にご連絡いただければスムーズに準備が可能です。</p>",
"a2": "<p>以下が返金規定です：</p>\n<div class=\"policy-table\">\n<div class=\"policy-row\">\n<span class=\"policy-time\">予約日の7日前</span>\n<span class=\"policy-desc\">100% 返金</span>\n</div>\n<div class=\"policy-row\">\n<span class=\"policy-time\">予約日の3日前</span>\n<span class=\"policy-desc\">70% 返金</span>\n</div>\n<div class=\"policy-row\">\n<span class=\"policy-time\">予約日の1日前</span>\n<span class=\"policy-desc\">50% 返金</span>\n</div>\n<div class=\"policy-row\">\n<span class=\"policy-time\">当日キャンセル</span>\n<span class=\"policy-desc\">返金不可</span>\n</div>\n</div>",
"a3": "<p>最小レンタルは<strong>2時間</strong>からとなります。</p>\n<p>延長は1時間単位で可能です。</p>",
"a4": "<p>最低2週間前にご連絡いただければスムーズに準備が可能です。</p>",
"a5": "<p>現地では現金またはお振込みでのお支払いが可能です。</p>\n<p>カード決済は現地ではご利用いただけませんのでご了承ください。</p>\n<p>現金領収書および税金計算書の発行が可能です。</p>",
"a6": "<p>はい、発行可能です。</p>",
"a7": "<p>Mingle Studioは以下の専門機材を保有しています：</p>\n<ul>\n<li><strong>OptiTrack カメラ：</strong> 30台</li>\n<li><strong>ハンドトラッキング：</strong> Rokokoスマートグローブ使用中</li>\n</ul>",
"a8": "<p>はい、専門のモーションキャプチャースーツとマーカーを無料で提供しています。</p>\n<ul>\n<li>各種サイズ（S、M、L、XL）を用意</li>\n<li>衛生的な管理で清潔な状態を維持</li>\n<li>個人のスーツの持ち込みも可能</li>\n<li>グローブ、ヘッドバンドなどの付属品を含む</li>\n</ul>",
"a9": "<p>最大<strong>5名</strong>まで同時にモーションキャプチャーが可能です。</p>\n<p>人数別の詳細情報：</p>\n<ul>\n<li><strong>1名：</strong> 最高精度でのキャプチャー</li>\n<li><strong>2名：</strong> インタラクションシーンに最適</li>\n<li><strong>3-5名：</strong> グループパフォーマンス可能</li>\n</ul>\n<p>人数が多いほどキャプチャー空間と精度に制約が生じる場合があります。</p>",
"a10": "<p>以下のお支払い方法をご利用いただけます：</p>\n<ul>\n<li><strong>お振込み：</strong> ご予約確定後24時間以内</li>\n<li><strong>現金決済：</strong> 現地でのお支払い可能</li>\n<li><strong>カード決済：</strong> 現地ではご利用不可</li>\n<li><strong>税金計算書：</strong> 法人のお客様向けに発行可能</li>\n<li><strong>現金領収書：</strong> 個人のお客様向けに発行可能</li>\n</ul>\n<p>予約金（30%）はご予約確定時、残金（70%）は撮影当日にお支払いいただけます。</p>",
"a11": "<p>基本的に以下の準備が必要です：</p>\n<ul>\n<li><strong>靴：</strong> 靴下の着用必須</li>\n<li><strong>メガネ：</strong> メガネ着用不可（コンタクトレンズ推奨）</li>\n<li><strong>髪：</strong> 長い髪はまとめてください</li>\n<li><strong>アクセサリー：</strong> 時計、指輪などは外してください</li>\n<li><strong>メイク：</strong> 濃いメイクはお控えください</li>\n</ul>\n<p>モーションキャプチャースーツとマーカーはスタジオで提供いたします。</p>",
"a12": "<p>以下の形式でデータを提供いたします：</p>\n<ul>\n<li><strong>FBXファイル：</strong> Unity、Unreal Engine対応</li>\n<li><strong>ANIMファイル：</strong> Unity Animatorに直接対応</li>\n<li><strong>MP4映像：</strong> 参考用映像</li>\n</ul>\n<p>お問い合わせ時に詳細をご案内いたします。データはクラウドを通じてお届けします。</p>",
"a13": "<p><strong>はい、ストリーミングルサービスを通じてリアルタイムストリーミングが可能です。</strong></p>\n<p>モーションキャプチャーデータをリアルタイムで配信し、ライブ配信にご活用いただけます。</p>\n<p>詳細はServicesページのストリーミングルサービスの項目をご参照ください。</p>",
"a14": "<p>はい、駐車が可能です：</p>\n<ul>\n<li><strong>基本：</strong> 2時間無料</li>\n<li><strong>建物内施設ご利用時：</strong> 追加2時間、最大4時間無料</li>\n<li><strong>場所：</strong> 仁川テクノバレービル駐車場</li>\n</ul>",
"a15": "<p>見学やツアーは事前のお問い合わせにより可否をご確認いただく必要があります：</p>\n<ul>\n<li><strong>事前お問い合わせ：</strong> 必須（スタジオの事情によりお断りする場合があります）</li>\n<li><strong>お問い合わせ先：</strong> help@minglestudio.co.kr</li>\n<li><strong>見学時間：</strong> 承認時に協議（約30分）</li>\n<li><strong>費用：</strong> 無料</li>\n</ul>\n<p>スタジオの運営状況により見学が制限される場合がありますのでご了承ください。</p>"
},
"cta": {
"title": "お探しの回答が見つかりませんでしたか？",
"desc": "ご不明な点がございましたら、いつでもお問い合わせください",
"btnContact": "お問い合わせ",
"btnCall": "電話相談"
}
},
"error404": {
"meta": {
"title": "ページが見つかりません - Mingle Studio"
},
"title": "ページが見つかりません",
"desc": "申し訳ございません。お探しのページが存在しないか、移動された可能性があります。<br>以下のリンクからお探しの情報を見つけてください。",
"btnHome": "ホームに戻る",
"btnContact": "お問い合わせ",
"searchPlaceholder": "お探しの内容を検索してください...",
"helpfulLinks": "お役に立てるページ",
"linkAbout": "会社紹介",
"linkServices": "サービス案内",
"linkPortfolio": "ポートフォリオ",
"linkGallery": "スタジオギャラリー",
"linkQna": "よくある質問",
"linkContact": "連絡先・所在地"
},
"schedule": {
"title": "予約状況",
"desc": "スタジオの予約可能日程をご確認ください",
"sun": "日",
"mon": "月",
"tue": "火",
"wed": "水",
"thu": "木",
"fri": "金",
"sat": "土",
"available": "予約可能",
"booked": "予約済み",
"past": "過去の日付",
"infoTitle": "ご予約案内",
"infoDesc": "ご予約はメールまたはお問い合わせページから承ります。<br>2週間前までのご予約をお勧めいたします。",
"contactBtn": "予約お問い合わせ",
"naverBtn": "Naver予約",
"detailHours": "営業時間",
"detailHoursVal": "24時間 · 年中無休",
"detailMin": "最低利用",
"detailMinVal": "2時間から",
"detailAdvance": "事前予約",
"detailAdvanceVal": "2週間前推奨"
}
}

819
i18n/ko.json
View File

@ -1,819 +0,0 @@
{
"header": {
"studioName": "밍글 스튜디오",
"nav": {
"about": "About",
"services": "Services",
"portfolio": "Portfolio",
"gallery": "Gallery",
"schedule": "Schedule",
"devlog": "DevLog",
"contact": "Contact",
"qna": "Q&A"
},
"menuOpen": "메뉴 열기",
"menuClose": "메뉴 닫기",
"darkMode": "다크 모드 전환",
"lightMode": "라이트 모드로 전환",
"langSelect": "언어 선택"
},
"footer": {
"companyInfo": "회사 정보",
"companyName": "밍글 스튜디오",
"ceo": "대표: 김희진",
"businessNumber": "사업자등록번호: 208-12-73755",
"contact": "연락처",
"businessInquiry": "비즈니스 문의",
"reservationInquiry": "예약 문의",
"directions": "오시는 길",
"address": "인천광역시 부평구 주부토로 236",
"addressDetail": "인천테크노밸리 U1센터 A동 B105호",
"copyright": "© 2025 밍글 스튜디오. All rights reserved."
},
"common": {
"loading": "페이지를 불러오는 중...",
"componentLoading": "로딩 중...",
"skipToContent": "본문 바로가기",
"videoLoading": "비디오 로딩 중...",
"videoError": "비디오를 로드할 수 없습니다",
"imageError": "이미지를 불러올 수 없습니다",
"floatingCTA": "문의하기",
"floatingKakao": "카카오톡 상담",
"floatingPhone": "전화 문의",
"floatingContact": "문의 페이지"
},
"index": {
"meta": {
"title": "밍글 스튜디오 - 모션캡쳐 창작 스튜디오",
"description": "최첨단 OptiTrack 시스템과 전문 장비를 갖춘 모션캡쳐 스튜디오. 인천 테크노밸리에서 버추얼 콘텐츠의 새로운 가능성을 경험하세요.",
"ogTitle": "밍글 스튜디오 - 모션캡쳐 창작 스튜디오",
"ogDescription": "최첨단 OptiTrack 시스템과 전문 장비를 갖춘 모션캡쳐 스튜디오"
},
"hero": {
"title": "밍글스튜디오",
"subtitle": "MINGLE STUDIO",
"description": "기술과 창의력 열정이 한데 섞여<br>새로운 가치가 만들어지는 공간",
"btnAbout": "회사 소개 보기",
"btnContact": "예약 문의하기",
"specCamera": "OptiTrack 카메라",
"specCameraUnit": "대",
"specSpace": "캡쳐 공간",
"specPrice": "시간당 대관료",
"specPriceUnit": "만원"
},
"showcase": {
"step1": {
"label": "Equipment",
"title": "최첨단 모션캡쳐 시스템",
"desc": "OptiTrack 광학식 카메라, Rokoko 글러브, ARKit 페이셜 캡쳐까지 — 전신부터 손끝, 표정까지 정밀하게 트래킹합니다.",
"feature1Title": "OptiTrack 카메라 30대",
"feature1Desc": "서브밀리미터 수준 광학식 모션 트래킹",
"feature2Title": "Rokoko 글러브 5대",
"feature2Desc": "손가락 관절까지 정밀한 핸드 캡쳐",
"feature3Title": "ARKit 페이셜 캡쳐 (iPhone 5대)",
"feature3Desc": "iPhone 기반 고정밀 표정 캡쳐"
},
"step2": {
"label": "Space",
"title": "넓고 최적화된 캡쳐 공간",
"desc": "8m x 7m x 2.6m 규모의 전용 캡쳐 볼륨으로 자유로운 움직임이 가능합니다.",
"feature1Title": "8m × 7m × 2.6m",
"feature1Desc": "넓은 전용 캡쳐 볼륨",
"feature2Title": "실시간 스트리밍",
"feature2Desc": "모션캡처 라이브 방송 서비스"
},
"step3": {
"label": "Services",
"title": "주요 활용 분야",
"desc": "다양한 크리에이티브 프로젝트를 전문 오퍼레이터가 지원합니다.",
"virtual": "버추얼 콘텐츠",
"virtualSub": "VTuber, 버추얼 아이돌",
"game": "게임 개발",
"gameSub": "캐릭터 애니메이션",
"video": "영상 제작",
"videoSub": "VFX, 버추얼 프로덕션",
"metaverse": "메타버스",
"metaverseSub": "3D 아바타 콘텐츠",
"btnServices": "전체 서비스 보기"
},
"step4": {
"label": "Studio",
"title": "스튜디오 공간",
"desc": "메인 캡쳐 공간부터 컨트롤룸, 프라이빗 룸까지 모든 환경이 갖춰져 있습니다. 전문 기술 지원과 함께 최적의 캡쳐 경험을 제공합니다.",
"feature1Title": "전문 기술 지원",
"feature1Desc": "숙련된 오퍼레이터의 실시간 서포트",
"feature2Title": "프라이빗 환경",
"feature2Desc": "독립된 공간에서 집중 작업",
"btnGallery": "갤러리 보기"
}
},
"portfolio": {
"title": "포트폴리오",
"desc": "밍글 스튜디오에서 제작하고 협업한 모션캡쳐 콘텐츠",
"tabCreator": "개인 크리에이터",
"tabCorporate": "기업 프로젝트",
"tabShorts": "Shorts",
"btnMore": "전체 포트폴리오 보기 →"
},
"partner": {
"title": "파트너 스트리머",
"desc": "밍글 스튜디오와 함께 콘텐츠를 만드는 크리에이터",
"streamer1": {
"desc": "떼굴떼굴 구슬요! 소통, 노래, 게임, VRChat 등 다양한 콘텐츠를 선보이는 버츄얼 스트리머",
"tagSong": "노래",
"tagGame": "게임"
}
},
"creatorSigns": {
"title": "방문 크리에이터",
"desc": "밍글 스튜디오를 방문한 크리에이터들의 사인"
},
"clients": {
"title": "클라이언트",
"desc": "다양한 분야의 기업들과 함께 혁신적인 모션캡쳐 콘텐츠를 제작합니다"
},
"faqShortcut": {
"label": "FAQ",
"title": "처음이라 막막하신가요?",
"desc": "모션캡쳐가 처음이어도 괜찮습니다. 예약부터 촬영까지 자주 묻는 질문을 정리했어요.",
"btnFaq": "자주 묻는 질문 보기",
"btnContact": "1:1 문의하기",
"btnOnline": "온라인 문의하기"
},
"cta": {
"label": "Get Started",
"title": "당신의 아이디어,<br>움직임으로 만들어 드립니다",
"desc": "전문 모션캡쳐 스튜디오에서 크리에이티브의 새로운 가능성을 경험하세요",
"btnReserve": "예약 문의하기",
"btnSchedule": "예약 현황 보기",
"btnNaver": "네이버 예약",
"infoReservation": "예약 문의",
"infoBusiness": "비즈니스",
"infoDiscord": "Discord",
"infoKakao": "카카오톡",
"infoKakaoDesc": "오픈채팅 상담하기"
},
"popup": {
"title": "요금제 변경 안내",
"subtitle": "2026년 3월부터 적용되었습니다",
"badge": "시행 중",
"mainChanges": "주요 변경사항",
"discountEnd": "할인 이벤트 종료",
"discountEndDesc": "오픈 기념 20% 할인 이벤트가 <strong>2월 28일</strong>부로 종료되었으며, 현재 정상가가 적용되고 있습니다.",
"streaming4h": "모션캡처 라이브 방송 4시간 서비스 신설",
"streaming4hDesc": "기존 모션캡처 라이브 방송 서비스(6시간)와 동일한 혜택을 4시간 패키지로 이용할 수 있습니다.",
"referral": "추천인 제도 오픈",
"referralDesc": "친구를 소개하면 소개한 분, 소개받은 분 모두에게 <strong>20% 할인권</strong>을 드립니다. (1회 사용, 중복 적용 불가)",
"notice": "※ 변경된 요금이 서비스 페이지에 반영되었습니다",
"effectiveDate": "적용 시기",
"effectiveDateValue": "2026년 3월~",
"inquiryEmail": "문의 메일",
"ctaBtn": "현재 서비스 요금 보기 →",
"dontShowToday": "하루동안 보지 않기",
"close": "닫기"
}
},
"about": {
"meta": {
"title": "회사소개 - 밍글 스튜디오",
"description": "밍글 스튜디오는 기술과 창의력이 어우러진 모션캡쳐 창작 공간입니다. 2025년 설립, 인천 테크노밸리 위치.",
"ogTitle": "회사소개 - 밍글 스튜디오",
"ogDescription": "2025년 설립된 인천 유일의 모션캡처 전문 스튜디오. 기술과 창의력이 어우러진 버추얼 콘텐츠 창작 공간입니다"
},
"pageHeader": {
"title": "About Us",
"desc": "기술과 창의력, 열정이 한데 섞여 새로운 가치가 만들어지는 공간"
},
"info": {
"companyName": "회사명",
"companyNameValue": "밍글 스튜디오 (Mingle Studio)",
"foundingDate": "설립일",
"foundingDateValue": "2025년 7월 15일",
"slogan": "슬로건",
"sloganValue": "\"모두가 어우러진 즐거운 창작공간\"",
"meaning": "의미",
"meaningValue": "Mingle Studio는 기술자와 크리에이터 그리고 시청자가 함께 어우러지는 버추얼 콘텐츠 제작 공간입니다. 최첨단 광학식 모션캡처 기술로 버추얼 캐릭터의 살아 숨쉬는 감정과 움직임을 담아 새로운 세대의 디지털 퍼포먼스를 실현합니다."
},
"companyIntro": {
"title": "회사 소개",
"desc1": "밍글 스튜디오는 창작자와 기술, 사람과 사람 사이의 '어우러짐'을 통해 새로운 콘텐츠를 만들어가는 모션 캡쳐 기반의 창작 공간입니다.",
"desc2": "설립 이후, 누구나 편하게 사용 가능한 스튜디오 대관 서비스를 중심으로 버추얼 콘텐츠 제작 환경을 제공합니다."
},
"visionMission": {
"title": "비전 & 미션",
"visionTitle": "비전",
"visionDesc": "모든 창작자가 기술적 제약 없이 상상을 현실로 만들 수 있는 창작 생태계 구축",
"missionTitle": "미션",
"missionDesc": "최첨단 모션캡쳐 기술을 통해 창작자들의 아이디어를 생생한 콘텐츠로 변환하고, 새로운 디지털 경험을 제공"
},
"history": {
"title": "연혁",
"date1": "2025년 7월 15일",
"event1Title": "밍글 스튜디오 설립",
"event1Desc": "밍글 스튜디오 회사 설립",
"date2": "2025년 8월 1일",
"event2Title": "스튜디오 오픈",
"event2Desc": "OptiTrack 시스템 구축 완료 및 대관 서비스 시작"
},
"team": {
"title": "Our Team",
"desc": "각 분야의 전문가들이 함께 협업하며 콘텐츠 제작을 지원합니다",
"member1Name": "김희진",
"member1Role": "대표 / 3D 아티스트",
"member1Desc": "배경/리소스 제작, 인사 및 프로젝트 관리",
"member2Name": "김광진",
"member2Role": "CTO / 테크니컬 디렉터",
"member2Desc": "스튜디오 전체 기술 운영, 모션캡쳐 장비 관리, 음향 시스템, 엔진 프로그래밍",
"member3Name": "이승민",
"member3Role": "CCO / 콘텐츠 디렉터",
"member3Desc": "캡쳐 디렉팅, 배우 모션 클린업, 카메라 무빙, 퍼포먼스 연출"
},
"partner": {
"title": "Partner Streamer",
"desc": "밍글 스튜디오와 함께 콘텐츠를 만드는 크리에이터",
"streamer1Desc": "소통, 노래, 게임, VRChat 등 다채로운 콘텐츠를 선보이는 버츄얼 스트리머. SOOP을 중심으로 활발하게 활동하며 밍글 스튜디오의 모션캡처 기술과 함께 새로운 버츄얼 콘텐츠를 만들어갑니다."
},
"values": {
"title": "Core Values",
"desc": "밍글 스튜디오가 추구하는 핵심 가치",
"collaboration": "협업",
"collaborationDesc": "기술자와 창작자가 함께 만드는 시너지",
"innovation": "혁신",
"innovationDesc": "최신 기술로 새로운 창작의 가능성 제시",
"creativity": "창의성",
"creativityDesc": "상상을 현실로 만드는 창의적 솔루션",
"quality": "품질",
"qualityDesc": "최고 수준의 모션캡쳐 퀄리티 추구"
}
},
"services": {
"meta": {
"title": "서비스 소개 - 밍글 스튜디오",
"description": "밍글 스튜디오 서비스 소개 - OptiTrack 모션캡쳐 스튜디오 대관, 2인 200,000원~/시간, 전신/페이셜 캡쳐, 모션 녹화 전문",
"ogTitle": "서비스 소개 - 밍글 스튜디오",
"ogDescription": "OptiTrack 모션캡쳐 스튜디오 대관 서비스. 전신/페이셜 캡쳐 전문"
},
"pageHeader": {
"title": "Services",
"desc": "최첨단 모션캡쳐 시설과 전문 서비스를 제공합니다"
},
"packages": {
"title": "서비스 패키지",
"desc": "용도와 규모에 맞는 최적의 모션캡처 녹화 서비스를 제공합니다",
"vatNotice": "※ 모든 가격은 부가세 별도입니다"
},
"compare": {
"recordingTitle": "모션캡처 녹화",
"recordingPrice": "200,000원~/시간 (2인 기준)",
"recordingDesc": "모션 데이터 녹화 전용 · 라이브 방송 미포함",
"liveTitle": "모션캡처 라이브 방송",
"livePrice": "1,400,000원~ / 4시간 패키지",
"liveDesc": "녹화 + 라이브 방송 + 아바타·배경·프랍 세팅 포함 풀패키지"
},
"service1": {
"title": "서비스 1: 모션캡처 녹화 서비스",
"badge": "기본형",
"team": "2인 이용",
"teamPopular": "인기",
"teamPrice": "200,000원",
"teamUnit": "/시간",
"teamFeature1": "2인 동시 모션 녹화",
"teamFeature2": "캐릭터 간 인터랙션 수록",
"teamFeature3": "팀 프로젝트 협업",
"additional": "추가 인원",
"additionalPrice": "+100,000원",
"additionalUnit": "/명/시간",
"additionalFeature1": "최대 5인 동시 녹화",
"additionalFeature2": "다인원 모션 캡쳐",
"additionalFeature3": "그룹 안무·연기 수록",
"minPerson": "최소 이용 인원: 2인",
"minTime": "최소 이용시간: 2시간",
"maxPerson": "최대 동시 이용: 5인",
"techTitle": "제공 기술 및 서비스",
"tech1": "OptiTrack 30대 카메라",
"tech2": "실시간 아바타 녹화",
"tech3": "전신/페이셜 캡처",
"tech4": "실시간 모니터링",
"tech5": "전문 오퍼레이터",
"tech6": "모션 데이터 제공",
"note": "아바타 리타게팅 서비스는 기본 제공되지 않으며, 후속 작업 연계 시 별도 상담을 통해 제공합니다.",
"postTitle": "후작업 추가 옵션",
"cleanupTitle": "데이터 클린업",
"cleanupPrice": "50,000 ~ 100,000원",
"cleanupUnit": "/ 분당",
"cleanupDesc": "노이즈 제거 및 프레임 보정 · 리타게팅 미포함",
"retargetTitle": "리타게팅",
"retargetPrice": "300,000 ~ 500,000원",
"retargetUnit": "/ 분당",
"retargetDesc": "고객 아바타에 최적화된 모션 리타게팅 적용",
"postNote": "* 후작업은 녹화 완료 후 별도 상담을 통해 진행됩니다",
"typeNotice": "녹화 전용 서비스입니다 · 라이브 방송은 아래 별도 패키지를 이용해주세요"
},
"combo": {
"title": "결합상품",
"badge": "특화서비스",
"mvTitle": "뮤직비디오/숏폼 영상 실시간 촬영",
"mvPrice": "모션캡처와 동일 요금",
"mvReqTitle": "추가 요구사항",
"mvReq1": "기획서 사전 협의 필수",
"mvReq2": "캐릭터/배경/프랍 사전 협의",
"mvReq3": "액터 섭외 필요 시: 100,000원 (1명당 시간당)",
"mvPortfolio": "포트폴리오 보기",
"remoteTitle": "원격 촬영",
"remotePrice": "모션캡처와 동일 요금",
"remoteServiceTitle": "서비스 내용",
"remoteService1": "원격 실시간 촬영 지원",
"remoteService2": "온라인 디렉션 가능",
"remoteService3": "실시간 스트리밍 송출",
"remoteExtraTitle": "추가 요금",
"remoteExtra1": "액터 섭외비: 100,000원 (1명당 시간당)"
},
"service2": {
"title": "서비스 2: 모션캡처 라이브 방송 서비스",
"badge": "대표상품",
"typeNotice": "녹화 서비스와 별도 패키지 · 아바타·배경·프랍 세팅 + 라이브 방송 포함",
"pkg4h": "4시간 패키지",
"pkg4hBadge": "NEW",
"pkg4hPrice": "1,400,000원",
"pkg4hUnit": "/ 1~5인 사용",
"pkg4hFeature1": "총 4시간 이용",
"pkg4hFeature2": "대관 2시간 + 촬영 준비 2시간",
"pkg4hFeature3": "6시간 패키지와 동일한 혜택",
"pkg6h": "6시간 패키지",
"pkg6hPrice": "2,000,000원",
"pkg6hUnit": "/ 1~5인 사용",
"pkg6hFeature1": "총 6시간 이용",
"pkg6hFeature2": "대관 4시간 + 촬영 준비 2시간",
"pkg6hFeature3": "대규모 프로젝트에 적합",
"commonLabel": "아래 혜택은 4시간·6시간 패키지 모두에 포함됩니다",
"benefitsTitle": "공통 포함 혜택",
"benefit1": "1인당 1벌 캐릭터 무료 세팅",
"benefit2": "기존 보유 배경 중 2개 무료 세팅",
"benefit3": "프랍 무료 세팅 (신규 프랍 최대 6개, 보유 프랍 무제한)",
"benefit4": "모션캡처 녹화 서비스",
"benefit5": "실시간 영상 촬영",
"benefit6": "라이브 방송 서비스",
"featuresTitle": "서비스 특징",
"feature1": "대규모 프로젝트 지원",
"feature2": "복합적 촬영 환경 제공",
"feature3": "실시간 스트리밍 (모션캡처 라이브 방송 전용)",
"feature4": "전문 스태프 풀 서비스",
"feature5": "1~5인 자유롭게 선택 가능",
"livePortfolio": "라이브 방송 포트폴리오 보기"
},
"service3": {
"title": "서비스 3: 뮤직비디오 제작 서비스",
"badge": "프리미엄",
"intro": "기획부터 납품까지, 전문적인 뮤직비디오 제작의 전 과정을 지원합니다.",
"priceRange": "총 예상 비용: 2,000,000원 ~ 4,000,000원",
"priceNote1": "※ 위 비용은 대략적인 예상 금액이며, 프로젝트 규모와 요구사항에 따라 견적이 변경될 수 있습니다.",
"priceNote2": "※ 배경 제작 범위, 스토리보드 작가 비용, 아바타/프랍 개수, 연출 난이도에 따라 변동됩니다.",
"processTitle": "제작 프로세스 (7단계)",
"step1Title": "기획 상담 (무료)",
"step1Desc": "뮤직비디오 제작의 시작 단계로, 콘셉트와 분위기를 정리합니다.",
"step1Note": "※ 방향성이 명확해야 이후 제작이 원활하게 진행됩니다.",
"step2Title": "배경 제작",
"step2Desc": "저작권 귀속 여부에 따라 옵션을 선택할 수 있습니다.",
"step2Opt1Type": "보유 배경 사용",
"step2Opt1Price": "30,000원/개",
"step2Opt1Note": "저작권: 회사 귀속",
"step2Opt2Type": "신규 제작 (회사 귀속)",
"step2Opt2Price": "100,000원/개",
"step2Opt2Note": "저작권: 회사 귀속 (대형 또는 특수 배경은 제한될 수 있음)",
"step2Opt3Type": "신규 제작 (클라이언트 귀속)",
"step2Opt3Price": "200,000원 ~ 1,000,000원/개",
"step2Opt3Note": "저작권: 클라이언트 소유 (규모와 디테일에 따라 변동)",
"step2ProcessNote": "Unity 빌드로 전달되어 카메라 시점 확인 가능",
"step3Title": "스토리보드 작성",
"step3Price": "100,000원~",
"step3Desc": "외부 전문 작가가 뮤직비디오의 흐름을 구체화합니다.",
"step3Note": "※ 고객과 공유하여 연출과 카메라 컷을 사전 확인 및 컨펌",
"step4Title": "아바타 세팅 및 프랍 제작",
"step4AvatarLabel": "아바타 세팅:",
"step4AvatarPrice": "50,000원/개",
"step4PropLabel": "스토리 진행용 프랍:",
"step4PropPrice": "20,000원/개",
"step4Desc": "아바타를 뮤직비디오 환경에 맞게 최적화합니다.",
"step4Note": "※ 아바타 수정 및 최적화 작업 가능",
"step5Title": "모션 캡처",
"step5StudioLabel": "모션캡처 스튜디오 대관 비용",
"step5Solo": "1인 이용:",
"step5SoloPrice": "150,000원/시간",
"step5Duo": "2인 이용:",
"step5DuoPrice": "200,000원/시간",
"step5Extra": "추가 인원:",
"step5ExtraPrice": "+100,000원/명/시간",
"step5ExtraNote": "(최대 5인까지)",
"step5ActorLabel": "액터 섭외 비용",
"step5Actor": "액터 섭외:",
"step5ActorPrice": "100,000원/명/시간",
"step5Desc": "스토리보드를 기반으로 모션을 녹화합니다.",
"step5Note1": "※ 촬영 기간: 1~2일 소요",
"step5Note2": "※ 최소 이용: 2시간",
"step6Title": "룩 개발 & 연출",
"step6Price": "500,000원~",
"step6Desc": "Unity에서 포스트 프로세싱, 아트워크, 카메라 워킹 등을 진행합니다.",
"step6Note": "※ 연출 복잡도와 퀄리티에 따라 변동",
"step7Title": "최종 피드백 & 납품",
"step7Desc": "완성된 영상을 고객 피드백 반영 후 수정하여 최종 납품합니다.",
"step7Note": "※ 납품 형식: mp4/mov 등",
"processNote": "기획 상담(무료) → 전체 견적 제시 → 견적 승인 후 제작 시작 (2단계~7단계 순차 진행)"
},
"options": {
"title": "추가 옵션 요금",
"desc": "모든 서비스 패키지에 공통으로 적용되는 추가 옵션입니다",
"vatNote": "*부가세 별도",
"charSetup": "캐릭터 세팅",
"charPrice": "50,000원~",
"charUnit": "/ 1인 1벌",
"charDesc": "신규 캐릭터 세팅 작업",
"bgSetup": "배경 세팅",
"bgExisting": "기존 보유 배경 사용",
"bgExistingPrice": "30,000원~",
"bgExistingUnit": "/ 1개",
"bgExistingNote": "세팅비만 부과",
"bgNew": "신규 배경 제작",
"bgNewPrice": "100,000원~",
"bgNewUnit": "/ 1개",
"bgNewNote": "세팅비 + 제작비/구입비 별도\n밍글스튜디오 또는 의뢰자 귀속 선택 가능합니다",
"propSetup": "프랍 세팅",
"propPrice": "20,000원",
"propUnit": "/ 1개",
"propDesc": "프랍 세팅 작업\n(모션캡처 라이브 방송 서비스: 신규 프랍 최대 6개, 보유 프랍 무제한 무료 제공)"
},
"usage": {
"title": "이용 안내사항",
"hours": "운영 시간",
"hoursDesc": "기본 운영 시간: 10:00 ~ 22:00\n야간 이용 시 요금 1.5배 적용",
"minTime": "최소 이용 시간",
"minTimeDesc": "모든 서비스 최소 2시간\n(모션캡처 라이브 방송 서비스 제외)",
"preparation": "사전 준비 사항",
"preparationDesc": "뮤직비디오/숏폼 촬영 시\n기획서 및 준비물 사전 협의 필수",
"followUp": "후속 서비스",
"followUpDesc": "아바타 리타게팅은 후속 작업 연계 시에만\n제공됩니다 (별도 상담)"
},
"guide": {
"title": "서비스 이용 안내",
"processTitle": "스튜디오 대관 절차",
"step1": "이메일 문의",
"step1Desc": "예약 양식을 작성하여 문의",
"step2": "담당자 확인 및 협의",
"step2Desc": "세부사항 조율",
"step3": "전액 결제",
"step3Desc": "결제 완료",
"step4": "예약 확정",
"step4Desc": "최종 예약 완료",
"btnEmail": "이메일 문의하기",
"btnNaver": "네이버 예약 바로가기",
"btnSchedule": "예약 현황 확인",
"naverNote": "※ 네이버 플레이스를 통해 실시간 일정 확인 및 예약이 가능합니다"
},
"policy": {
"reservationTitle": "예약 안내",
"reservation1": "스튜디오 예약은 이용 희망일로부터 최소 2주 전에 신청하시는 것을 권장합니다.",
"reservation2": "예약 확정 후 고객의 사정으로 인한 예약 취소 시 일정 기준에 따른 위약금이 발생합니다.",
"visitTitle": "방문 안내",
"visit1": "본 촬영 전 모션캡쳐 수트 착용 등의 준비시간이 소요되므로 촬영예정 시간 최소 30분 전에 방문 부탁드립니다. (준비시간은 이용시간에 포함되지 않습니다.)",
"visit2": "안경, 귀걸이 등 반사가 잘 되는 재질의 악세사리는 촬영 시 가급적 착용을 자제하여 주시기 바랍니다.",
"refundTitle": "취소 환불 규정",
"refundColTime": "취소 시점",
"refundColRate": "환불 비율",
"refund7days": "예약일로부터 7일 전",
"refund100": "100% 환불",
"refund3days": "예약일로부터 3일 전",
"refund70": "70% 환불",
"refund1day": "예약일로부터 1일 전",
"refund50": "50% 환불",
"refundSameDay": "당일 취소",
"refundNone": "환불 불가"
}
},
"portfolio": {
"meta": {
"title": "포트폴리오 - 밍글 스튜디오",
"description": "밍글 스튜디오 포트폴리오 - 모션캡쳐로 제작된 YouTube 콘텐츠, 버튜버 방송, Shorts 영상 모음",
"ogTitle": "포트폴리오 - 밍글 스튜디오",
"ogDescription": "모션캡처 스튜디오에서 제작된 뮤직비디오, 숏폼, 버튜버 방송 등 다양한 영상 콘텐츠. OptiTrack으로 고품질 모션캡처 서비스 제공"
},
"pageHeader": {
"title": "Portfolio",
"desc": "밍글 스튜디오에서 제작하고 협업한 모션캡쳐 콘텐츠"
},
"channel": {
"title": "밍글 스튜디오 공식 채널",
"desc": "최신 모션캡쳐 콘텐츠와 제작 과정을 YouTube에서 확인하세요",
"btn": "YouTube 채널 방문하기"
},
"tabs": {
"individual": "개인 크리에이터",
"corporate": "기업 프로젝트"
},
"longform": {
"title": "Long-Form 콘텐츠",
"desc": "개인 크리에이터들의 모션캡쳐 프로젝트"
},
"shorts": {
"title": "Shorts 콘텐츠",
"desc": "짧고 임팩트 있는 모션캡쳐 순간들"
},
"broadcast": {
"title": "실시간 방송 예시",
"desc": "버튜버와 스트리머들의 실시간 모션캡쳐 방송",
"noticeTitle": "실시간 모션캡쳐 방송",
"noticeDesc": "밍글 스튜디오에서 진행되는 실시간 모션캡쳐 방송을 통해 고품질 버추얼 콘텐츠를 경험하세요"
},
"corporate": {
"title": "기업 프로젝트",
"desc": "기업 및 상업적 모션캡쳐 프로젝트",
"ixiaDesc": "버추얼 아이돌 그룹 모션캡쳐 제작",
"mvSection": "뮤직비디오 제작",
"shortsSection": "숏폼비디오 제작",
"liveSection": "라이브 방송 진행"
},
"cta": {
"title": "당신의 콘텐츠도 여기에",
"desc": "밍글 스튜디오와 함께 다음 포트폴리오의 주인공이 되어보세요",
"btnInquiry": "프로젝트 문의하기",
"btnServices": "서비스 알아보기"
},
"js": {
"checkNetwork": "네트워크 연결을 확인해주세요",
"shareTitle": "밍글 스튜디오 포트폴리오",
"linkCopied": "비디오 링크가 클립보드에 복사되었습니다.",
"linkCopyFailed": "링크 복사에 실패했습니다."
}
},
"gallery": {
"meta": {
"title": "스튜디오 갤러리 - 밍글 스튜디오",
"description": "밍글 스튜디오 갤러리 - 모션캡쳐 스튜디오 실제 공간과 시설을 사진으로 확인하세요",
"ogTitle": "스튜디오 갤러리 - 밍글 스튜디오",
"ogDescription": "30대 OptiTrack 카메라 시스템과 8×7m 대형 촬영 공간. 인천 유일 모션캡처 스튜디오의 실제 시설과 장비를 확인해보세요"
},
"pageHeader": {
"title": "Studio Gallery",
"desc": "밍글 스튜디오의 실제 공간을 사진으로 확인해보세요"
},
"captions": {
"exterior_open": "외부전경 커튼 열림",
"exterior_closed": "외부 전경 닫힘",
"control_room": "오퍼레이팅/컨트롤룸",
"powder_room": "파우더룸(스튜디오 연결)",
"changing_room_in": "탈의실(내부)",
"changing_room_out": "탈의실(외부)",
"audio_system": "고품질 음향 시스템",
"mocap_space_1": "모션캡쳐 공간 001",
"mocap_space_2": "모션캡쳐 공간 002",
"mocap_space_3": "모션캡쳐 공간 003",
"mocap_space_4": "모션캡쳐 공간 004"
},
"panorama": {
"title": "360° Studio View",
"desc": "드래그하여 스튜디오를 360도로 둘러보세요",
"clickToView": "클릭하여 360° VR로 체험하기",
"curtainOpen": "스튜디오 전경 (커튼 열림)",
"curtainClosed": "스튜디오 전경 (커튼 닫힘)"
},
"js": {
"lightboxLabel": "이미지 뷰어",
"close": "닫기",
"prevImage": "이전 이미지",
"nextImage": "다음 이미지",
"panoramaLoading": "360° 이미지 로딩중...",
"reset": "초기화",
"autoRotate": "자동회전",
"stop": "정지",
"zoomIn": "확대",
"zoomOut": "축소",
"help": "도움말",
"helpTitle": "360° 조작 가이드",
"helpDrag": "마우스 드래그로 화면을 회전시킬 수 있습니다",
"helpTouch": "터치 스크린에서는 손가락으로 드래그하세요",
"helpZoom": "마우스 휠이나 핀치로 확대/축소할 수 있습니다",
"helpAutoRotate": "자동회전 버튼으로 자동으로 둘러볼 수 있습니다",
"helpEsc": "ESC 키를 눌러 닫을 수 있습니다",
"checkImageFile": "이미지 파일을 확인해주세요"
}
},
"contact": {
"meta": {
"title": "문의하기 - 밍글 스튜디오",
"description": "밍글 스튜디오 문의하기 - 모션캡쳐 스튜디오 대관, 촬영, 제작 문의 및 상담",
"ogTitle": "문의하기 - 밍글 스튜디오",
"ogDescription": "모션캡처 스튜디오 대관, 촬영, 제작 관련 문의 및 상담. 인천 테크노밸리 소재 OptiTrack 전문 스튜디오"
},
"pageHeader": {
"title": "Contact Us",
"desc": "밍글 스튜디오와 함께 특별한 프로젝트를 시작하세요"
},
"phone": {
"title": "전화 문의",
"desc": "24시간 가능"
},
"business": {
"title": "비즈니스 문의",
"desc": "제휴 및 협력 문의"
},
"reservation": {
"title": "예약 및 문의",
"desc": "24시간 접수 가능"
},
"discord": {
"title": "Discord",
"desc": "실시간 채팅 문의"
},
"kakao": {
"title": "카카오톡",
"desc": "오픈채팅 상담",
"link": "카카오톡 상담하기"
},
"visit": {
"title": "스튜디오 방문",
"desc": "사전 예약 필수",
"link": "위치 보기"
},
"location": {
"title": "스튜디오 위치",
"address": "주소",
"addressValue": "(21330) 인천광역시 부평구 주부토로 236<br>인천테크노밸리 U1센터 A동 B105호",
"subway": "지하철",
"subwayDesc": "인천 7호선 갈산역 하차 → 도보 약 7분",
"bus": "버스",
"busStop": "갈산시장·갈산도서관 정류장 이용",
"busRoutes": "4번, 526번, 555번 버스",
"parking": "주차",
"parkingDesc": "기본 2시간 무료, 건물 내 시설 이용시 최대 4시간 무료",
"hours": "운영시간",
"hours24": "24시간 영업",
"hoursAllYear": "연중무휴",
"naverMap": "네이버 지도",
"googleMap": "구글 맵"
},
"form": {
"title": "온라인 문의",
"desc": "아래 양식을 작성하시면 빠르게 답변 드리겠습니다",
"name": "이름 <span class=\"required\">*</span>",
"namePlaceholder": "홍길동",
"email": "이메일 <span class=\"required\">*</span>",
"phone": "전화번호",
"service": "문의 유형 <span class=\"required\">*</span>",
"serviceDefault": "선택해주세요",
"serviceRental": "스튜디오 대관",
"serviceMotion": "모션 녹화",
"serviceMV": "뮤직비디오 제작",
"servicePartner": "제휴/협력",
"serviceOther": "기타",
"message": "문의 내용 <span class=\"required\">*</span>",
"messagePlaceholder": "프로젝트 내용, 희망 일정 등을 자유롭게 작성해주세요",
"sensitiveWarning": "※ 주민등록번호, 계좌번호 등 민감한 개인정보를 입력하지 마세요.",
"privacyAgree": "개인정보 수집 및 이용에 동의합니다. (필수)",
"privacyView": "개인정보 처리방침 보기",
"privacyPurpose": "수집 목적: 문의 접수 및 답변",
"privacyItems": "수집 항목: 이름, 이메일, 전화번호, 문의 내용",
"privacyPeriod": "보유 기간: 7일 후 자동 파기",
"submit": "문의 보내기",
"reset": "초기화",
"privacyModalTitle": "개인정보 수집 및 이용 안내",
"privacyM1Title": "1. 수집 목적",
"privacyM1Desc": "고객 문의 접수 및 답변 제공",
"privacyM2Title": "2. 수집 항목",
"privacyM2Required": "필수: 이름, 이메일, 문의 유형, 문의 내용",
"privacyM2Optional": "선택: 전화번호",
"privacyM3Title": "3. 보유 및 이용 기간",
"privacyM3Desc": "문의 접수일로부터 7일간 보관 후 자동 파기됩니다.",
"privacyM4Title": "4. 동의 거부 권리",
"privacyM4Desc": "개인정보 수집 및 이용에 대한 동의를 거부할 권리가 있습니다. 다만, 동의를 거부하실 경우 문의 접수가 불가합니다.",
"privacyM5Title": "5. 제3자 제공",
"privacyM5Desc": "문의 내용은 보안 채널을 통해 전달되며, 해외 서버를 경유할 수 있습니다. 문의 처리 목적 외에는 사용되지 않습니다."
},
"cta": {
"title": "예약 및 문의",
"desc": "간편한 온라인 예약 또는 자주 묻는 질문을 확인해보세요",
"btnNaver": "네이버 예약",
"btnSchedule": "예약 현황",
"btnFaq": "FAQ 보기"
},
"js": {
"checkInput": "입력 정보를 확인해 주세요.",
"sending": "전송 중...",
"sendSuccess": "문의가 성공적으로 전송되었습니다. 빠른 시일 내에 연락드리겠습니다.",
"sendError": "전송 중 오류가 발생했습니다. 다시 시도해 주세요.",
"errorTitle": "전송에 실패했습니다",
"errorDesc": "일시적인 서버 오류로 문의가 전송되지 않았습니다. 아래 방법으로 직접 연락해 주세요.",
"errorEmail": "이메일",
"errorPhone": "전화",
"errorKakao": "카카오톡",
"errorKakaoDesc": "오픈채팅으로 상담",
"errorDiscord": "디스코드 서버에서 문의",
"resetConfirm": "입력한 내용이 모두 삭제됩니다. 계속하시겠습니까?",
"invalidEmail": "올바른 이메일 형식을 입력해 주세요.",
"invalidPhone": "올바른 전화번호 형식을 입력해 주세요.",
"required": "필수 입력 항목입니다.",
"privacyRequired": "개인정보 수집 및 이용에 동의해 주세요."
}
},
"qna": {
"meta": {
"title": "자주 묻는 질문 - 밍글 스튜디오",
"description": "밍글 스튜디오 FAQ - 모션캡쳐 스튜디오 대관, 촬영, 제작에 관한 자주 묻는 질문과 답변",
"ogTitle": "자주 묻는 질문 - 밍글 스튜디오",
"ogDescription": "모션캡처 스튜디오 대관, 촬영, 요금, 예약 등에 관한 자주 묻는 질문과 답변. OptiTrack 시스템 이용 가이드"
},
"pageHeader": {
"title": "자주하는 질문",
"desc": "밍글 스튜디오 이용에 관한 자주 묻는 질문들을 확인하세요"
},
"search": {
"placeholder": "궁금한 내용을 검색해보세요...",
"btnLabel": "검색"
},
"categories": {
"all": "전체",
"booking": "예약/대관",
"equipment": "장비/기술",
"pricing": "요금/결제",
"production": "제작/촬영",
"streaming": "스트리밍",
"etc": "기타"
},
"faq": {
"q1": "스튜디오 대관은 어떻게 예약하나요?",
"q2": "예약금 제도와 환불 규정이 있나요?",
"q3": "최소 대관 시간은 어떻게 되나요?",
"q4": "대관은 얼마나 전에 예약해야 하나요?",
"q5": "현장 결제가 가능한가요?",
"q6": "세금계산서 발행이 가능한가요?",
"q7": "어떤 모션캡쳐 장비를 사용하나요?",
"q8": "모션캡쳐 슈트는 제공되나요?",
"q9": "몇 명까지 동시에 모션캡쳐가 가능한가요?",
"q10": "결제는 어떻게 하나요?",
"q11": "촬영 준비물은 무엇이 필요한가요?",
"q12": "데이터는 어떤 형태로 받을 수 있나요?",
"q13": "실시간 스트리밍이 가능한가요?",
"q14": "주차는 가능한가요?",
"q15": "견학이나 시설 투어는 가능한가요?",
"a1": "<p>아래 방법으로 예약하실 수 있습니다:</p>\n<ul>\n<li><strong><i class=\"fa-solid fa-envelope\" aria-hidden=\"true\"></i> 이메일:</strong> <a href=\"mailto:help@minglestudio.co.kr?subject=[스튜디오 예약 문의] 밍글 스튜디오&body=안녕하세요. 밍글 스튜디오 대관 예약 문의 드립니다.%0A%0A■ 기본 정보%0A- 이용 예정일: (예: 2024년 12월 25일)%0A- 이용 시간: (예: 오후 2시 ~ 4시, 2시간)%0A- 참여 인원: 명%0A- 연락처: %0A- 이메일: %0A%0A■ 촬영 정보%0A- 촬영 목적: (예: 버튜버 방송, 게임 제작, 영상 콘텐츠 등)%0A- 예상 촬영 내용: %0A- 필요한 장비: (전신 모션캡쳐 / 페이셜 캡쳐 / 기타)%0A%0A■ 추가 요청사항%0A- 특별한 요구사항: %0A- 문의사항: %0A%0A■ 참고사항%0A- 최소 대관: 2시간 (220,000원, VAT 포함)%0A- 연장: 1시간당 110,000원%0A- 결제방법: 계좌이체 또는 현금 (카드결제 불가)%0A- 현금영수증/세금계산서 발행 가능%0A%0A빠른 시일 내에 답변 드리겠습니다.%0A감사합니다.\">help@minglestudio.co.kr</a></li>\n<li><strong><i class=\"fa-solid fa-phone\" aria-hidden=\"true\"></i> 전화:</strong> 010-9288-9190</li>\n</ul>\n<div style=\"margin-top: var(--spacing-md); text-align: center;\">\n<button id=\"showEmailFormFAQ\" class=\"btn btn-primary\" style=\"font-size: 0.9rem; padding: 0.5rem 1rem;\"><i class=\"fa-solid fa-envelope\" aria-hidden=\"true\"></i> 이메일 문의하기</button>\n</div>\n<div id=\"emailFormFAQ\" class=\"email-form\" style=\"display:none; margin-top: var(--spacing-lg); padding: var(--spacing-lg); border: 1px solid #ddd; border-radius: var(--border-radius); background: #f9f9f9;\">\n<h4>이메일 문의 양식</h4>\n<p>아래 양식을 복사하여 이메일로 문의해주세요:</p>\n<div class=\"email-template\" style=\"background: white; padding: var(--spacing-md); border-radius: var(--border-radius); font-family: monospace; font-size: 0.9rem; line-height: 1.6;\">\n<div><strong>제목:</strong> [스튜디오 대관 문의]</div>\n<div><strong>받는 사람:</strong> help@minglestudio.co.kr</div>\n<br>\n<div><strong>1. 성함 및 소속</strong></div>\n<div style=\"color: #666; font-size: 0.85rem;\">(개인의 경우 성함만, 기업인 경우 이용자분 성함과 소속을 함께 적어주세요)</div>\n<div style=\"margin: 0.5rem 0; padding: 0.5rem; background: #f0f0f0; border-radius: 4px;\">[여기에 작성해주세요]</div>\n<div><strong>2. 연락처</strong></div>\n<div style=\"color: #666; font-size: 0.85rem;\">(전화번호, 이메일, 디스코드 중 택1)</div>\n<div style=\"margin: 0.5rem 0; padding: 0.5rem; background: #f0f0f0; border-radius: 4px;\">[여기에 작성해주세요]</div>\n<div><strong>3. 이용 인원</strong></div>\n<div style=\"color: #666; font-size: 0.85rem;\">(1~2인 권장, 최대 5인까지 가능)</div>\n<div style=\"margin: 0.5rem 0; padding: 0.5rem; background: #f0f0f0; border-radius: 4px;\">\u25a1 1명 \u25a1 2명 \u25a1 3명 \u25a1 4명 \u25a1 5명</div>\n<div><strong>4. 스튜디오 사용 용도</strong></div>\n<div style=\"margin: 0.5rem 0; padding: 0.5rem; background: #f0f0f0; border-radius: 4px;\">\u25a1 녹화 \u25a1 기타: [여기에 작성해주세요]</div>\n<div><strong>5. 희망 대관 날짜</strong></div>\n<div style=\"color: #666; font-size: 0.85rem;\">※ 최소 2주 전 예약을 권장합니다</div>\n<div style=\"margin: 0.5rem 0; padding: 0.5rem; background: #f0f0f0; border-radius: 4px;\">[여기에 작성해주세요]</div>\n<div><strong>6. 희망 이용 시간</strong></div>\n<div style=\"color: #666; font-size: 0.85rem;\">※ 응답 예시) 오전 10시~ 오후 3시(5시간)</div>\n<div style=\"color: #666; font-size: 0.85rem;\">※ 새벽 대관(밤 10시~익일 8시) 이용 시 내부 규정에 따른 별도 요율이 적용됩니다</div>\n<div style=\"margin: 0.5rem 0; padding: 0.5rem; background: #f0f0f0; border-radius: 4px;\">[여기에 작성해주세요]</div>\n</div>\n<div style=\"margin-top: var(--spacing-md); text-align: center;\">\n<a href=\"mailto:help@minglestudio.co.kr?subject=[스튜디오 대관 문의]\" class=\"btn btn-primary\"><i class=\"fa-solid fa-envelope\" aria-hidden=\"true\"></i> 이메일 바로 보내기</a>\n</div>\n</div>\n<p>최소 2주 전에 연락주시면 원활하게 준비가 가능합니다.</p>",
"a2": "<p>아래는 환불 규정입니다:</p>\n<div class=\"policy-table\">\n<div class=\"policy-row\">\n<span class=\"policy-time\">예약일로부터 7일 전</span>\n<span class=\"policy-desc\">100% 환불</span>\n</div>\n<div class=\"policy-row\">\n<span class=\"policy-time\">예약일로부터 3일 전</span>\n<span class=\"policy-desc\">70% 환불</span>\n</div>\n<div class=\"policy-row\">\n<span class=\"policy-time\">예약일로부터 1일 전</span>\n<span class=\"policy-desc\">50% 환불</span>\n</div>\n<div class=\"policy-row\">\n<span class=\"policy-time\">당일 취소</span>\n<span class=\"policy-desc\">환불 불가</span>\n</div>\n</div>",
"a3": "<p>최소 대관은 <strong>2시간</strong>부터 가능합니다.</p>\n<p>연장은 1시간 단위로 가능합니다.</p>",
"a4": "<p>최소 2주 전에 연락주시면 원활하게 준비가 가능합니다.</p>",
"a5": "<p>현장에서는 현금 결제 또는 계좌이체가 가능합니다.</p>\n<p>카드 결제는 현장에서 불가능하니 참고해 주세요.</p>\n<p>현금영수증 및 세금계산서 발행 가능합니다.</p>",
"a6": "<p>네 발행 가능합니다</p>",
"a7": "<p>밍글 스튜디오는 다음과 같은 전문 장비를 보유하고 있습니다:</p>\n<ul>\n<li><strong>OptiTrack 카메라:</strong> 30대</li>\n<li><strong>핸드 트래킹:</strong> 로코코 스마트 글러브 사용중</li>\n</ul>",
"a8": "<p>네, 전문 모션캡쳐 슈트와 마커를 무료로 제공합니다.</p>\n<ul>\n<li>다양한 사이즈 (S, M, L, XL) 보유</li>\n<li>위생적인 관리로 깔끔한 상태 유지</li>\n<li>개인 슈트 지참도 가능</li>\n<li>장갑, 헤드밴드 등 부속품 포함</li>\n</ul>",
"a9": "<p>최대 <strong>5명</strong>까지 동시 모션캡쳐가 가능합니다.</p>\n<p>인원별 상세 정보:</p>\n<ul>\n<li><strong>1명:</strong> 최고 정밀도 캡쳐</li>\n<li><strong>2명:</strong> 상호작용 장면 최적</li>\n<li><strong>3-5명:</strong> 그룹 퍼포먼스 가능</li>\n</ul>\n<p>인원이 많을수록 캡쳐 공간과 정확도에 제약이 있을 수 있습니다.</p>",
"a10": "<p>다음과 같은 결제 방법을 지원합니다:</p>\n<ul>\n<li><strong>계좌이체:</strong> 예약 확정 후 24시간 내</li>\n<li><strong>현금결제:</strong> 현장 결제 가능</li>\n<li><strong>카드결제:</strong> 현장에서 불가능</li>\n<li><strong>세금계산서:</strong> 사업자 고객 발행 가능</li>\n<li><strong>현금영수증:</strong> 개인 고객 발행 가능</li>\n</ul>\n<p>예약금(30%)은 예약 확정 시, 잔금(70%)은 촬영 당일 결제 가능합니다.</p>",
"a11": "<p>기본적으로 다음과 같은 준비가 필요합니다:</p>\n<ul>\n<li><strong>신발:</strong> 양말 필수 착용</li>\n<li><strong>안경:</strong> 안경 착용 불가 (렌즈 착용 권장)</li>\n<li><strong>머리:</strong> 긴 머리는 묶어주세요</li>\n<li><strong>액세서리:</strong> 시계, 반지 등 제거</li>\n<li><strong>메이크업:</strong> 진한 메이크업은 피해주세요</li>\n</ul>\n<p>모션캡쳐 슈트와 마커는 스튜디오에서 제공합니다.</p>",
"a12": "<p>다음과 같은 형태의 데이터를 제공합니다:</p>\n<ul>\n<li><strong>FBX 파일:</strong> Unity, Unreal Engine 호환</li>\n<li><strong>ANIM 파일:</strong> Unity Animator 직접 호환</li>\n<li><strong>MP4 영상:</strong> 참고용 영상</li>\n</ul>\n<p>문의 시 세부사항을 안내해드리며, 클라우드를 통해 전달합니다.</p>",
"a13": "<p><strong>네, 모션캡처 라이브 방송 서비스를 통해 실시간 스트리밍이 가능합니다.</strong></p>\n<p>모션캡쳐 데이터를 실시간으로 송출하여 라이브 방송에 활용하실 수 있습니다.</p>\n<p>자세한 내용은 Services 페이지의 모션캡처 라이브 방송 서비스 항목을 참고해주세요.</p>",
"a14": "<p>네, 주차가 가능합니다:</p>\n<ul>\n<li><strong>기본:</strong> 2시간 무료</li>\n<li><strong>건물 내 시설 이용시:</strong> 추가 2시간, 최대 4시간 무료</li>\n<li><strong>위치:</strong> 인천테크노밸리 건물 주차장</li>\n</ul>",
"a15": "<p>견학 및 투어는 미리 문의를 통해 가능 여부를 확인해야 합니다:</p>\n<ul>\n<li><strong>사전 문의:</strong> 필수 (스튜디오 사정에 따라 거절될 수 있음)</li>\n<li><strong>문의처:</strong> help@minglestudio.co.kr</li>\n<li><strong>견학 시간:</strong> 승인 시 협의 (약 30분 소요)</li>\n<li><strong>비용:</strong> 무료</li>\n</ul>\n<p>스튜디오 운영 상황에 따라 견학이 제한될 수 있으니 양해 부탁드립니다.</p>"
},
"cta": {
"title": "원하는 답변을 찾지 못하셨나요?",
"desc": "궁금한 점이 있으시면 언제든지 문의해 주세요",
"btnContact": "문의하기",
"btnCall": "전화 상담"
}
},
"error404": {
"meta": {
"title": "페이지를 찾을 수 없습니다 - 밍글 스튜디오"
},
"title": "페이지를 찾을 수 없습니다",
"desc": "죄송합니다. 요청하신 페이지가 존재하지 않거나 이동되었을 수 있습니다.<br>아래 링크를 통해 원하시는 정보를 찾아보세요.",
"btnHome": "홈으로 돌아가기",
"btnContact": "문의하기",
"searchPlaceholder": "원하는 내용을 검색해보세요...",
"helpfulLinks": "도움이 될 수 있는 페이지",
"linkAbout": "회사 소개",
"linkServices": "서비스 안내",
"linkPortfolio": "포트폴리오",
"linkGallery": "스튜디오 갤러리",
"linkQna": "자주하는 질문",
"linkContact": "연락처 및 위치"
},
"schedule": {
"title": "예약 현황",
"desc": "스튜디오 예약 가능 일정을 확인하세요",
"sun": "일",
"mon": "월",
"tue": "화",
"wed": "수",
"thu": "목",
"fri": "금",
"sat": "토",
"available": "예약 가능",
"booked": "예약 마감",
"past": "지난 날짜",
"infoTitle": "예약 안내",
"infoDesc": "예약은 이메일 또는 문의 페이지를 통해 접수하실 수 있습니다.<br>최소 2주 전 예약을 권장드립니다.",
"contactBtn": "예약 문의하기",
"naverBtn": "네이버 예약",
"detailHours": "운영시간",
"detailHoursVal": "24시간 · 연중무휴",
"detailMin": "최소 이용",
"detailMinVal": "2시간부터",
"detailAdvance": "사전 예약",
"detailAdvanceVal": "2주 전 권장"
}
}

819
i18n/zh.json
View File

@ -1,819 +0,0 @@
{
"header": {
"studioName": "Mingle Studio",
"nav": {
"about": "About",
"services": "Services",
"portfolio": "Portfolio",
"gallery": "Gallery",
"schedule": "Schedule",
"devlog": "DevLog",
"contact": "Contact",
"qna": "Q&A"
},
"menuOpen": "打开菜单",
"menuClose": "关闭菜单",
"darkMode": "切换到深色模式",
"lightMode": "切换到浅色模式",
"langSelect": "选择语言"
},
"footer": {
"companyInfo": "公司信息",
"companyName": "Mingle Studio",
"ceo": "代表: 김희진",
"businessNumber": "营业执照号: 208-12-73755",
"contact": "联系方式",
"businessInquiry": "商务咨询",
"reservationInquiry": "预约咨询",
"directions": "交通指南",
"address": "仁川广域市富平区主夫吐路236",
"addressDetail": "仁川科技谷U1中心 A栋 B105号",
"copyright": "© 2025 Mingle Studio. All rights reserved."
},
"common": {
"loading": "页面加载中...",
"componentLoading": "加载中...",
"skipToContent": "跳转到正文",
"videoLoading": "视频加载中...",
"videoError": "无法加载视频",
"imageError": "无法加载图片",
"floatingCTA": "咨询",
"floatingKakao": "KakaoTalk咨询",
"floatingPhone": "电话咨询",
"floatingContact": "咨询页面"
},
"index": {
"meta": {
"title": "Mingle Studio - 动作捕捉创作工作室",
"description": "配备先进OptiTrack系统和专业设备的动作捕捉工作室。在仁川科技谷体验虚拟内容创作的无限可能。",
"ogTitle": "Mingle Studio - 动作捕捉创作工作室",
"ogDescription": "配备先进OptiTrack系统和专业设备的动作捕捉工作室"
},
"hero": {
"title": "Mingle Studio",
"subtitle": "MINGLE STUDIO",
"description": "技术与创意、热情交融<br>创造全新价值的空间",
"btnAbout": "了解公司",
"btnContact": "预约咨询",
"specCamera": "OptiTrack 摄像头",
"specCameraUnit": "台",
"specSpace": "捕捉空间",
"specPrice": "每小时场地租赁费",
"specPriceUnit": "USD"
},
"showcase": {
"step1": {
"label": "Equipment",
"title": "先进的动作捕捉系统",
"desc": "OptiTrack光学摄像头、Rokoko手套、ARKit面部捕捉 —— 从全身到指尖、表情，实现精准追踪。",
"feature1Title": "OptiTrack 摄像头 30台",
"feature1Desc": "亚毫米级光学动作追踪",
"feature2Title": "Rokoko 手套 5副",
"feature2Desc": "精确到手指关节的手部捕捉",
"feature3Title": "ARKit 面部捕捉 (iPhone 5台)",
"feature3Desc": "基于iPhone的高精度表情捕捉"
},
"step2": {
"label": "Space",
"title": "宽敞且优化的捕捉空间",
"desc": "8m x 7m x 2.6m规格的专用捕捉空间，支持自由运动。",
"feature1Title": "8m × 7m × 2.6m",
"feature1Desc": "宽敞的专用捕捉空间",
"feature2Title": "实时直播",
"feature2Desc": "通过Streamingle服务进行直播"
},
"step3": {
"label": "Services",
"title": "主要应用领域",
"desc": "专业操作员为各类创意项目提供全方位支持。",
"virtual": "虚拟内容",
"virtualSub": "VTuber、虚拟偶像",
"game": "游戏开发",
"gameSub": "角色动画",
"video": "影视制作",
"videoSub": "VFX、虚拟制片",
"metaverse": "元宇宙",
"metaverseSub": "3D虚拟形象内容",
"btnServices": "查看全部服务"
},
"step4": {
"label": "Studio",
"title": "工作室空间",
"desc": "从主捕捉空间到控制室、私人房间，所有设施一应俱全。配合专业技术支持，提供最佳捕捉体验。",
"feature1Title": "专业技术支持",
"feature1Desc": "经验丰富的操作员实时协助",
"feature2Title": "私密环境",
"feature2Desc": "在独立空间中专注工作",
"btnGallery": "查看画廊"
}
},
"portfolio": {
"title": "作品集",
"desc": "在Mingle Studio制作和合作的动作捕捉内容",
"tabCreator": "个人创作者",
"tabCorporate": "企业项目",
"tabShorts": "Shorts",
"btnMore": "查看全部作品 →"
},
"partner": {
"title": "合作主播",
"desc": "与Mingle Studio一起创作内容的创作者",
"streamer1": {
"desc": "Guseulyo！一位展示聊天、唱歌、游戏、VRChat等多样化内容的虚拟主播",
"tagSong": "唱歌",
"tagGame": "游戏"
}
},
"creatorSigns": {
"title": "来访创作者",
"desc": "到访Mingle Studio的创作者签名"
},
"clients": {
"title": "客户",
"desc": "与各领域企业共同制作创新动作捕捉内容"
},
"faqShortcut": {
"label": "FAQ",
"title": "第一次不知道怎么做？",
"desc": "即使是第一次接触动作捕捉也没关系。我们整理了从预约到拍摄的常见问题。",
"btnFaq": "查看常见问题",
"btnContact": "1:1 咨询",
"btnOnline": "在线咨询页面"
},
"cta": {
"label": "Get Started",
"title": "您的创意，<br>用动作来呈现",
"desc": "在专业动作捕捉工作室体验创意的全新可能",
"btnReserve": "预约咨询",
"btnSchedule": "查看预约状态",
"btnNaver": "Naver预约",
"infoReservation": "预约咨询",
"infoBusiness": "商务合作",
"infoDiscord": "Discord",
"infoKakao": "KakaoTalk",
"infoKakaoDesc": "开放聊天咨询"
},
"popup": {
"title": "价格调整通知",
"subtitle": "自2026年3月起已开始实施",
"badge": "实施中",
"mainChanges": "主要变更内容",
"discountEnd": "优惠活动结束",
"discountEndDesc": "开业纪念8折优惠活动已于<strong>2月28日</strong>结束，目前按原价执行。",
"streaming4h": "Streamingle 4小时服务上线",
"streaming4hDesc": "可以4小时套餐享受与现有Streamingle服务（6小时）相同的权益。",
"referral": "推荐人制度上线",
"referralDesc": "推荐朋友后，推荐人和被推荐人均可获得<strong>8折优惠券</strong>。（限使用1次，不可叠加使用）",
"notice": "※ 调整后的价格已更新至服务页面",
"effectiveDate": "实施时间",
"effectiveDateValue": "2026年3月起",
"inquiryEmail": "咨询邮箱",
"ctaBtn": "查看当前服务价格 →",
"dontShowToday": "今日不再显示",
"close": "关闭"
}
},
"about": {
"meta": {
"title": "关于我们 - Mingle Studio",
"description": "Mingle Studio是一个融合技术与创意的动作捕捉创作空间。2025年成立，位于仁川科技谷。",
"ogTitle": "关于我们 - Mingle Studio",
"ogDescription": "2025年成立的仁川唯一动作捕捉专业工作室。融合技术与创意的虚拟内容创作空间。"
},
"pageHeader": {
"title": "About Us",
"desc": "技术与创意、热情交融，创造全新价值的空间"
},
"info": {
"companyName": "公司名称",
"companyNameValue": "Mingle Studio",
"foundingDate": "成立日期",
"foundingDateValue": "2025年7月15日",
"slogan": "标语",
"sloganValue": "\"人人交融的快乐创作空间\"",
"meaning": "含义",
"meaningValue": "Mingle Studio是一个让技术人员、创作者和观众共同交融的虚拟内容制作空间。利用先进的光学动作捕捉技术，捕捉虚拟角色鲜活的情感与动作，实现新一代数字表演。"
},
"companyIntro": {
"title": "公司介绍",
"desc1": "Mingle Studio是一个以动作捕捉为基础的创作空间，通过创作者与技术、人与人之间的\u201c交融\u201d创造全新内容。",
"desc2": "自成立以来，以人人都能便捷使用的场地租赁服务为核心，提供虚拟内容制作环境。"
},
"visionMission": {
"title": "愿景与使命",
"visionTitle": "愿景",
"visionDesc": "构建让所有创作者不受技术限制，将想象变为现实的创作生态系统",
"missionTitle": "使命",
"missionDesc": "通过先进的动作捕捉技术，将创作者的创意转化为生动的内容，提供全新的数字体验"
},
"history": {
"title": "发展历程",
"date1": "2025年7月15日",
"event1Title": "Mingle Studio 成立",
"event1Desc": "Mingle Studio 公司注册成立",
"date2": "2025年8月1日",
"event2Title": "工作室正式开放",
"event2Desc": "OptiTrack系统搭建完成，场地租赁服务正式启动"
},
"team": {
"title": "Our Team",
"desc": "各领域专家协同合作，全力支持内容制作",
"member1Name": "김희진",
"member1Role": "CEO / 3D美术师",
"member1Desc": "场景/资源制作，人事及项目管理",
"member2Name": "김광진",
"member2Role": "CTO / 技术总监",
"member2Desc": "工作室整体技术运营，动作捕捉设备管理，音响系统，引擎编程",
"member3Name": "이승민",
"member3Role": "CCO / 内容总监",
"member3Desc": "捕捉指导，演员动作清理，摄像机运动，表演导演"
},
"partner": {
"title": "Partner Streamer",
"desc": "与Mingle Studio合作创作内容的创作者",
"streamer1Desc": "以互动、歌唱、游戏、VRChat等丰富多样的内容亮相的虚拟主播。主要在SOOP平台活跃，与Mingle Studio的动作捕捉技术携手打造全新的虚拟内容。"
},
"values": {
"title": "Core Values",
"desc": "Mingle Studio所追求的核心价值",
"collaboration": "协作",
"collaborationDesc": "技术人员与创作者携手共创的协同效应",
"innovation": "创新",
"innovationDesc": "以前沿技术开拓创作新可能",
"creativity": "创意",
"creativityDesc": "将想象变为现实的创意解决方案",
"quality": "品质",
"qualityDesc": "追求最高水准的动作捕捉质量"
}
},
"services": {
"meta": {
"title": "服务介绍 - Mingle Studio",
"description": "Mingle Studio服务介绍 - OptiTrack动作捕捉工作室场地租赁，2人$150起/小时，全身/面部捕捉，专业动作录制",
"ogTitle": "服务介绍 - Mingle Studio",
"ogDescription": "OptiTrack动作捕捉工作室场地租赁服务。全身/面部捕捉专业服务"
},
"pageHeader": {
"title": "Services",
"desc": "提供先进的动作捕捉设施和专业服务"
},
"packages": {
"title": "服务套餐",
"desc": "根据用途和规模提供最优动作捕捉录制服务",
"vatNotice": "※ 所有价格均不含增值税"
},
"compare": {
"recordingTitle": "动作捕捉录制",
"recordingPrice": "200,000韩元~/小时（2人基准）",
"recordingDesc": "仅录制动作数据 · 不包含直播",
"liveTitle": "动作捕捉直播",
"livePrice": "1,400,000韩元~ / 4小时套餐",
"liveDesc": "录制 + 直播 + 虚拟形象·背景·道具设置全包套餐"
},
"service1": {
"title": "服务1: 动作捕捉录制服务",
"badge": "基础型",
"team": "2人使用",
"teamPopular": "热门",
"teamPrice": "$150",
"teamUnit": "/小时",
"teamFeature1": "2人同步动作录制",
"teamFeature2": "角色间互动录制",
"teamFeature3": "团队项目协作",
"additional": "额外人员",
"additionalPrice": "+$75",
"additionalUnit": "/人/小时",
"additionalFeature1": "最多5人同步录制",
"additionalFeature2": "多人动作捕捉",
"additionalFeature3": "群体编舞/表演录制",
"minPerson": "最少使用人数: 2人",
"minTime": "最少使用时间: 2小时",
"maxPerson": "最多同时使用: 5人",
"techTitle": "提供的技术与服务",
"tech1": "OptiTrack 30台摄像头",
"tech2": "实时虚拟形象录制",
"tech3": "全身/面部捕捉",
"tech4": "实时监控",
"tech5": "专业操作员",
"tech6": "提供动作数据",
"note": "虚拟形象重定向服务不包含在基础服务中，如需后续对接可通过单独咨询提供。",
"postTitle": "后期处理选项",
"cleanupTitle": "数据清理",
"cleanupPrice": "50,000 ~ 100,000韩元",
"cleanupUnit": "/ 每分钟",
"cleanupDesc": "噪声去除与帧修正 · 不含重定向",
"retargetTitle": "重定向",
"retargetPrice": "300,000 ~ 500,000韩元",
"retargetUnit": "/ 每分钟",
"retargetDesc": "针对客户虚拟形象的动作重定向优化",
"postNote": "* 后期处理在录制完成后通过单独咨询进行",
"typeNotice": "仅限录制服务 · 直播请参阅下方独立套餐"
},
"combo": {
"title": "组合产品",
"badge": "特色服务",
"mvTitle": "音乐视频/短视频实时拍摄",
"mvPrice": "与动作捕捉相同费用",
"mvReqTitle": "额外要求",
"mvReq1": "需提前协商策划方案",
"mvReq2": "角色/背景/道具需提前协商",
"mvReq3": "如需聘请演员: $75 (每人每小时)",
"mvPortfolio": "查看作品集",
"remoteTitle": "远程拍摄",
"remotePrice": "与动作捕捉相同费用",
"remoteServiceTitle": "服务内容",
"remoteService1": "支持远程实时拍摄",
"remoteService2": "可在线指导",
"remoteService3": "实时直播推流",
"remoteExtraTitle": "额外费用",
"remoteExtra1": "演员聘请费: $75 (每人每小时)"
},
"service2": {
"title": "服务2: Streamingle 直播服务",
"badge": "代表产品",
"typeNotice": "与录制服务分开的套餐 · 包含虚拟形象·背景·道具设置 + 直播",
"pkg4h": "4小时套餐",
"pkg4hBadge": "NEW",
"pkg4hPrice": "$1,100",
"pkg4hUnit": "/ 1~5人使用",
"pkg4hFeature1": "共4小时使用",
"pkg4hFeature2": "场地租赁2小时 + 拍摄准备2小时",
"pkg4hFeature3": "享受与6小时套餐相同的权益",
"pkg6h": "6小时套餐",
"pkg6hPrice": "$1,500",
"pkg6hUnit": "/ 1~5人使用",
"pkg6hFeature1": "共6小时使用",
"pkg6hFeature2": "场地租赁4小时 + 拍摄准备2小时",
"pkg6hFeature3": "适合大型项目",
"commonLabel": "以下权益适用于4小时和6小时套餐",
"benefitsTitle": "通用包含权益",
"benefit1": "每人1套角色免费设置",
"benefit2": "现有背景中2个免费设置",
"benefit3": "道具免费设置（新道具最多6个，现有道具不限量）",
"benefit4": "动作捕捉录制服务",
"benefit5": "实时视频拍摄",
"benefit6": "直播服务",
"featuresTitle": "服务特点",
"feature1": "支持大型项目",
"feature2": "提供综合拍摄环境",
"feature3": "实时直播（Streamingle专属）",
"feature4": "专业团队全程服务",
"feature5": "1~5人自由选择",
"livePortfolio": "查看直播作品集"
},
"service3": {
"title": "服务3: 音乐视频制作服务",
"badge": "高级版",
"intro": "从策划到交付，全方位支持专业音乐视频制作的全过程。",
"priceRange": "预计总费用: $1,500 ~ $3,000",
"priceNote1": "※ 以上费用为大致预估金额，具体报价可能根据项目规模和需求有所变动。",
"priceNote2": "※ 费用会根据背景制作范围、分镜师费用、虚拟形象/道具数量、导演难度等因素浮动。",
"processTitle": "制作流程（7个阶段）",
"step1Title": "策划咨询（免费）",
"step1Desc": "音乐视频制作的起始阶段，梳理概念和风格。",
"step1Note": "※ 方向明确后，后续制作才能顺利推进。",
"step2Title": "背景制作",
"step2Desc": "可根据版权归属选择不同方案。",
"step2Opt1Type": "使用现有背景",
"step2Opt1Price": "$25/个",
"step2Opt1Note": "版权: 归公司所有",
"step2Opt2Type": "全新制作（归公司所有）",
"step2Opt2Price": "$80/个",
"step2Opt2Note": "版权: 归公司所有（大型或特殊背景可能受限）",
"step2Opt3Type": "全新制作（归客户所有）",
"step2Opt3Price": "$150 ~ $700/个",
"step2Opt3Note": "版权: 归客户所有（根据规模和细节有所变动）",
"step2ProcessNote": "以Unity构建方式交付，可确认摄像机视角",
"step3Title": "分镜脚本编写",
"step3Price": "$75起",
"step3Desc": "由外部专业编剧将音乐视频的流程具象化。",
"step3Note": "※ 与客户共享，提前确认导演风格和镜头切换",
"step4Title": "虚拟形象设置与道具制作",
"step4AvatarLabel": "虚拟形象设置:",
"step4AvatarPrice": "$40/个",
"step4PropLabel": "剧情用道具:",
"step4PropPrice": "$15/个",
"step4Desc": "根据音乐视频环境优化虚拟形象。",
"step4Note": "※ 可进行虚拟形象修改和优化",
"step5Title": "动作捕捉",
"step5StudioLabel": "动作捕捉工作室场地租赁费用",
"step5Solo": "1人使用:",
"step5SoloPrice": "$110/小时",
"step5Duo": "2人使用:",
"step5DuoPrice": "$150/小时",
"step5Extra": "额外人员:",
"step5ExtraPrice": "+$75/人/小时",
"step5ExtraNote": "（最多5人）",
"step5ActorLabel": "演员聘请费用",
"step5Actor": "演员聘请:",
"step5ActorPrice": "$75/人/小时",
"step5Desc": "根据分镜脚本录制动作。",
"step5Note1": "※ 拍摄周期: 约1~2天",
"step5Note2": "※ 最少使用: 2小时",
"step6Title": "视觉开发与导演",
"step6Price": "$360起",
"step6Desc": "在Unity中进行后期处理、美术设计、摄像机运动等工作。",
"step6Note": "※ 根据导演复杂度和质量要求有所变动",
"step7Title": "最终反馈与交付",
"step7Desc": "完成的视频经客户反馈修改后进行最终交付。",
"step7Note": "※ 交付格式: mp4/mov等",
"processNote": "策划咨询（免费） → 整体报价 → 报价确认后开始制作（第2~7阶段依次推进）"
},
"options": {
"title": "附加选项费用",
"desc": "适用于所有服务套餐的通用附加选项",
"vatNote": "*不含增值税",
"charSetup": "角色设置",
"charPrice": "$40起",
"charUnit": "/ 每人1套",
"charDesc": "新角色设置工作",
"bgSetup": "背景设置",
"bgExisting": "使用现有背景",
"bgExistingPrice": "$25起",
"bgExistingUnit": "/ 1个",
"bgExistingNote": "仅收取设置费",
"bgNew": "全新背景制作",
"bgNewPrice": "$80起",
"bgNewUnit": "/ 1个",
"bgNewNote": "设置费 + 制作费/购买费另计\n可选择归属Mingle Studio或委托方",
"propSetup": "道具设置",
"propPrice": "$15",
"propUnit": "/ 1个",
"propDesc": "道具设置工作\n（Streamingle服务: 新道具最多6个，现有道具不限量免费提供）"
},
"usage": {
"title": "使用须知",
"hours": "营业时间",
"hoursDesc": "基本营业时间: 10:00 ~ 22:00\n夜间使用费用按1.5倍计算",
"minTime": "最少使用时间",
"minTimeDesc": "所有服务最少2小时\n（Streamingle服务除外）",
"preparation": "事前准备事项",
"preparationDesc": "拍摄音乐视频/短视频时\n需提前协商策划方案和准备物品",
"followUp": "后续服务",
"followUpDesc": "虚拟形象重定向仅在后续工作对接时\n提供（需单独咨询）"
},
"guide": {
"title": "服务使用指南",
"processTitle": "场地租赁流程",
"step1": "邮件咨询",
"step1Desc": "填写预约表格发送咨询",
"step2": "负责人确认与协商",
"step2Desc": "协调详细事项",
"step3": "全额支付",
"step3Desc": "完成支付",
"step4": "预约确认",
"step4Desc": "最终完成预约",
"btnEmail": "发送邮件咨询",
"btnNaver": "前往Naver预约",
"btnSchedule": "查看预约状态",
"naverNote": "※ 可通过Naver Place实时查看日程并预约"
},
"policy": {
"reservationTitle": "预约须知",
"reservation1": "建议在您希望使用的日期前至少2周进行预约申请。",
"reservation2": "预约确认后因客户原因取消预约时，将根据取消政策收取违约金。",
"visitTitle": "到访须知",
"visit1": "由于正式拍摄前需要穿戴动作捕捉服等准备工作，请在预定拍摄时间前至少30分钟到达。（准备时间不包含在使用时间内。）",
"visit2": "拍摄时请尽量避免佩戴眼镜、耳环等反光材质的配饰。",
"refundTitle": "取消退款政策",
"refundColTime": "取消时间",
"refundColRate": "退款比例",
"refund7days": "预约日7天前",
"refund100": "100%退款",
"refund3days": "预约日3天前",
"refund70": "70%退款",
"refund1day": "预约日1天前",
"refund50": "50%退款",
"refundSameDay": "当天取消",
"refundNone": "不可退款"
}
},
"portfolio": {
"meta": {
"title": "作品集 - Mingle Studio",
"description": "Mingle Studio作品集 - 动作捕捉制作的YouTube内容、VTuber直播、Shorts视频合集",
"ogTitle": "作品集 - Mingle Studio",
"ogDescription": "在动作捕捉工作室制作的音乐视频、短视频、VTuber直播等多样化视频内容。OptiTrack提供高品质动作捕捉服务"
},
"pageHeader": {
"title": "Portfolio",
"desc": "在Mingle Studio制作和合作的动作捕捉内容"
},
"channel": {
"title": "Mingle Studio 官方频道",
"desc": "在YouTube上查看最新动作捕捉内容和制作过程",
"btn": "访问YouTube频道"
},
"tabs": {
"individual": "个人创作者",
"corporate": "企业项目"
},
"longform": {
"title": "Long-Form 内容",
"desc": "个人创作者的动作捕捉项目"
},
"shorts": {
"title": "Shorts 内容",
"desc": "短小精悍的动作捕捉精彩瞬间"
},
"broadcast": {
"title": "实时直播示例",
"desc": "VTuber和主播的实时动作捕捉直播",
"noticeTitle": "实时动作捕捉直播",
"noticeDesc": "通过Mingle Studio进行的实时动作捕捉直播，体验高品质虚拟内容"
},
"corporate": {
"title": "企业项目",
"desc": "企业及商业动作捕捉项目",
"ixiaDesc": "虚拟偶像团体动作捕捉制作",
"mvSection": "音乐视频制作",
"shortsSection": "短视频制作",
"liveSection": "直播进行"
},
"cta": {
"title": "您的内容也可以在这里",
"desc": "与Mingle Studio一起成为下一个作品集的主角",
"btnInquiry": "项目咨询",
"btnServices": "了解服务"
},
"js": {
"checkNetwork": "请检查网络连接",
"shareTitle": "Mingle Studio 作品集",
"linkCopied": "视频链接已复制到剪贴板。",
"linkCopyFailed": "链接复制失败。"
}
},
"gallery": {
"meta": {
"title": "工作室画廊 - Mingle Studio",
"description": "Mingle Studio画廊 - 通过照片了解动作捕捉工作室的实际空间和设施",
"ogTitle": "工作室画廊 - Mingle Studio",
"ogDescription": "30台OptiTrack摄像头系统和8×7m大型拍摄空间。查看仁川唯一动作捕捉工作室的实际设施和设备"
},
"pageHeader": {
"title": "Studio Gallery",
"desc": "通过照片了解Mingle Studio的实际空间"
},
"captions": {
"exterior_open": "外观全景 窗帘打开",
"exterior_closed": "外观全景 窗帘关闭",
"control_room": "操作/控制室",
"powder_room": "化妆间（连接工作室）",
"changing_room_in": "更衣室（内部）",
"changing_room_out": "更衣室（外部）",
"audio_system": "高品质音响系统",
"mocap_space_1": "动作捕捉空间 001",
"mocap_space_2": "动作捕捉空间 002",
"mocap_space_3": "动作捕捉空间 003",
"mocap_space_4": "动作捕捉空间 004"
},
"panorama": {
"title": "360° Studio View",
"desc": "拖动鼠标360度全方位浏览工作室",
"clickToView": "点击体验360° VR全景",
"curtainOpen": "工作室全景（窗帘打开）",
"curtainClosed": "工作室全景（窗帘关闭）"
},
"js": {
"lightboxLabel": "图片查看器",
"close": "关闭",
"prevImage": "上一张",
"nextImage": "下一张",
"panoramaLoading": "360°图片加载中...",
"reset": "重置",
"autoRotate": "自动旋转",
"stop": "停止",
"zoomIn": "放大",
"zoomOut": "缩小",
"help": "帮助",
"helpTitle": "360° 操作指南",
"helpDrag": "拖动鼠标旋转画面",
"helpTouch": "在触摸屏上用手指拖动",
"helpZoom": "使用鼠标滚轮或捏合手势缩放",
"helpAutoRotate": "点击自动旋转按钮自动浏览",
"helpEsc": "按ESC键关闭",
"checkImageFile": "请检查图片文件"
}
},
"contact": {
"meta": {
"title": "联系我们 - Mingle Studio",
"description": "Mingle Studio联系方式 - 动作捕捉工作室场地租赁、拍摄、制作咨询与洽谈",
"ogTitle": "联系我们 - Mingle Studio",
"ogDescription": "动作捕捉工作室场地租赁、拍摄、制作相关咨询与洽谈。位于仁川科技谷的OptiTrack专业工作室"
},
"pageHeader": {
"title": "Contact Us",
"desc": "与Mingle Studio一起开启您的特别项目"
},
"phone": {
"title": "电话咨询",
"desc": "24小时可用"
},
"business": {
"title": "商务咨询",
"desc": "合作与协作咨询"
},
"reservation": {
"title": "预约与咨询",
"desc": "24小时受理"
},
"discord": {
"title": "Discord",
"desc": "实时聊天咨询"
},
"kakao": {
"title": "KakaoTalk",
"desc": "开放聊天咨询",
"link": "通过KakaoTalk咨询"
},
"visit": {
"title": "到访工作室",
"desc": "需提前预约",
"link": "查看位置"
},
"location": {
"title": "工作室位置",
"address": "地址",
"addressValue": "(21330) 仁川广域市富平区主夫吐路236<br>仁川科技谷U1中心 A栋 B105号",
"subway": "地铁",
"subwayDesc": "仁川7号线葛山站下车 → 步行约7分钟",
"bus": "公交",
"busStop": "갈산시장·갈산도서관 站",
"busRoutes": "4路、526路、555路公交",
"parking": "停车",
"parkingDesc": "基本2小时免费，使用楼内设施最多4小时免费",
"hours": "营业时间",
"hours24": "24小时营业",
"hoursAllYear": "全年无休",
"naverMap": "Naver地图",
"googleMap": "Google地图"
},
"form": {
"title": "在线咨询",
"desc": "请填写以下表单，我们将尽快回复",
"name": "姓名 <span class=\"required\">*</span>",
"namePlaceholder": "张三",
"email": "邮箱 <span class=\"required\">*</span>",
"phone": "电话号码",
"service": "咨询类型 <span class=\"required\">*</span>",
"serviceDefault": "请选择",
"serviceRental": "工作室租赁",
"serviceMotion": "动作录制",
"serviceMV": "MV制作",
"servicePartner": "合作/联盟",
"serviceOther": "其他",
"message": "咨询内容 <span class=\"required\">*</span>",
"messagePlaceholder": "请自由填写项目内容、希望的日程等",
"sensitiveWarning": "※ 请勿在咨询内容中包含身份证号、银行账号等敏感个人信息。",
"privacyAgree": "同意收集和使用个人信息。（必填）",
"privacyView": "查看隐私政策",
"privacyPurpose": "收集目的：咨询受理及回复",
"privacyItems": "收集项目：姓名、邮箱、电话号码、咨询内容",
"privacyPeriod": "保留期限：7天后自动删除",
"submit": "发送咨询",
"reset": "重置",
"privacyModalTitle": "个人信息收集及使用须知",
"privacyM1Title": "1. 收集目的",
"privacyM1Desc": "客户咨询受理及回复",
"privacyM2Title": "2. 收集项目",
"privacyM2Required": "必填：姓名、邮箱、咨询类型、咨询内容",
"privacyM2Optional": "选填：电话号码",
"privacyM3Title": "3. 保留及使用期限",
"privacyM3Desc": "自咨询受理之日起保留7天后自动删除。",
"privacyM4Title": "4. 拒绝同意的权利",
"privacyM4Desc": "您有权拒绝个人信息的收集和使用。但拒绝后将无法提交咨询。",
"privacyM5Title": "5. 第三方提供",
"privacyM5Desc": "咨询内容通过安全渠道传送，可能经由海外服务器。不会用于咨询处理以外的目的。"
},
"cta": {
"title": "预约与咨询",
"desc": "便捷的在线预约或查看常见问题",
"btnNaver": "Naver预约",
"btnSchedule": "预约状态",
"btnFaq": "查看FAQ"
},
"js": {
"checkInput": "请检查输入信息。",
"sending": "发送中...",
"sendSuccess": "咨询已成功发送。我们将尽快与您联系。",
"sendError": "发送过程中出现错误，请重试。",
"errorTitle": "发送失败",
"errorDesc": "由于临时服务器错误，您的咨询未能发送。请通过以下方式直接联系我们。",
"errorEmail": "电子邮箱",
"errorPhone": "电话",
"errorKakao": "KakaoTalk",
"errorKakaoDesc": "通过KakaoTalk咨询",
"errorDiscord": "通过Discord服务器咨询",
"resetConfirm": "所有输入内容将被删除。是否继续？",
"invalidEmail": "请输入正确的邮箱地址。",
"invalidPhone": "请输入正确的电话号码。",
"required": "此为必填项。",
"privacyRequired": "请同意收集和使用个人信息。"
}
},
"qna": {
"meta": {
"title": "常见问题 - Mingle Studio",
"description": "Mingle Studio FAQ - 动作捕捉工作室场地租赁、拍摄、制作相关常见问题及解答",
"ogTitle": "常见问题 - Mingle Studio",
"ogDescription": "动作捕捉工作室场地租赁、拍摄、费用、预约等常见问题及解答。OptiTrack系统使用指南"
},
"pageHeader": {
"title": "常见问题",
"desc": "查看关于Mingle Studio使用的常见问题"
},
"search": {
"placeholder": "搜索您想了解的内容...",
"btnLabel": "搜索"
},
"categories": {
"all": "全部",
"booking": "预约/租赁",
"equipment": "设备/技术",
"pricing": "费用/支付",
"production": "制作/拍摄",
"streaming": "直播",
"etc": "其他"
},
"faq": {
"q1": "如何预约工作室场地租赁？",
"q2": "有预约金制度和退款规定吗？",
"q3": "最少租赁时间是多少？",
"q4": "需要提前多久预约场地？",
"q5": "可以现场支付吗？",
"q6": "可以开具增值税发票吗？",
"q7": "使用什么动作捕捉设备？",
"q8": "提供动作捕捉服装吗？",
"q9": "最多可以同时进行多少人的动作捕捉？",
"q10": "如何进行支付？",
"q11": "拍摄需要准备什么？",
"q12": "数据以什么格式提供？",
"q13": "可以进行实时直播吗？",
"q14": "可以停车吗？",
"q15": "可以参观或设施导览吗？",
"a1": "<p>您可以通过以下方式进行预约：</p>\n<ul>\n<li><strong><i class=\"fa-solid fa-envelope\" aria-hidden=\"true\"></i> 邮件：</strong> <a href=\"mailto:help@minglestudio.co.kr?subject=[工作室预约咨询] Mingle Studio&body=您好，我想咨询Mingle Studio场地租赁预约事宜。%0A%0A■ 基本信息%0A- 预计使用日期：（例：2024年12月25日）%0A- 使用时间：（例：下午2点~4点，2小时）%0A- 参与人数：人%0A- 联系方式：%0A- 邮箱：%0A%0A■ 拍摄信息%0A- 拍摄目的：（例：VTuber直播、游戏制作、视频内容等）%0A- 预计拍摄内容：%0A- 所需设备：（全身动作捕捉/面部捕捉/其他）%0A%0A■ 补充说明%0A- 特殊需求：%0A- 咨询事项：%0A%0A■ 参考信息%0A- 最少租赁：2小时（$165，含税）%0A- 延长：每小时$83%0A- 支付方式：银行转账或现金（不支持刷卡）%0A- 可开具现金收据/增值税发票%0A%0A我们将尽快回复。%0A谢谢。\">help@minglestudio.co.kr</a></li>\n<li><strong><i class=\"fa-solid fa-phone\" aria-hidden=\"true\"></i> 电话：</strong> 010-9288-9190</li>\n</ul>\n<div style=\"margin-top: var(--spacing-md); text-align: center;\">\n<button id=\"showEmailFormFAQ\" class=\"btn btn-primary\" style=\"font-size: 0.9rem; padding: 0.5rem 1rem;\"><i class=\"fa-solid fa-envelope\" aria-hidden=\"true\"></i> 邮件咨询</button>\n</div>\n<div id=\"emailFormFAQ\" class=\"email-form\" style=\"display:none; margin-top: var(--spacing-lg); padding: var(--spacing-lg); border: 1px solid #ddd; border-radius: var(--border-radius); background: #f9f9f9;\">\n<h4>邮件咨询表格</h4>\n<p>请复制以下表格并通过邮件发送咨询：</p>\n<div class=\"email-template\" style=\"background: white; padding: var(--spacing-md); border-radius: var(--border-radius); font-family: monospace; font-size: 0.9rem; line-height: 1.6;\">\n<div><strong>主题：</strong> [工作室租赁咨询]</div>\n<div><strong>收件人：</strong> help@minglestudio.co.kr</div>\n<br>\n<div><strong>1. 姓名及所属单位</strong></div>\n<div style=\"color: #666; font-size: 0.85rem;\">（个人请填写姓名，企业请填写使用者姓名和所属单位）</div>\n<div style=\"margin: 0.5rem 0; padding: 0.5rem; background: #f0f0f0; border-radius: 4px;\">[请在此填写]</div>\n<div><strong>2. 联系方式</strong></div>\n<div style=\"color: #666; font-size: 0.85rem;\">（电话、邮箱、Discord 任选其一）</div>\n<div style=\"margin: 0.5rem 0; padding: 0.5rem; background: #f0f0f0; border-radius: 4px;\">[请在此填写]</div>\n<div><strong>3. 使用人数</strong></div>\n<div style=\"color: #666; font-size: 0.85rem;\">（建议1~2人，最多5人）</div>\n<div style=\"margin: 0.5rem 0; padding: 0.5rem; background: #f0f0f0; border-radius: 4px;\">\u25a1 1人 \u25a1 2人 \u25a1 3人 \u25a1 4人 \u25a1 5人</div>\n<div><strong>4. 工作室使用用途</strong></div>\n<div style=\"margin: 0.5rem 0; padding: 0.5rem; background: #f0f0f0; border-radius: 4px;\">\u25a1 录制 \u25a1 其他：[请在此填写]</div>\n<div><strong>5. 希望租赁日期</strong></div>\n<div style=\"color: #666; font-size: 0.85rem;\">※ 建议至少提前2周预约</div>\n<div style=\"margin: 0.5rem 0; padding: 0.5rem; background: #f0f0f0; border-radius: 4px;\">[请在此填写]</div>\n<div><strong>6. 希望使用时间</strong></div>\n<div style=\"color: #666; font-size: 0.85rem;\">※ 示例：上午10点~下午3点（5小时）</div>\n<div style=\"color: #666; font-size: 0.85rem;\">※ 凌晨租赁（晚10点~次日8点）按内部规定执行特殊费率</div>\n<div style=\"margin: 0.5rem 0; padding: 0.5rem; background: #f0f0f0; border-radius: 4px;\">[请在此填写]</div>\n</div>\n<div style=\"margin-top: var(--spacing-md); text-align: center;\">\n<a href=\"mailto:help@minglestudio.co.kr?subject=[工作室租赁咨询]\" class=\"btn btn-primary\"><i class=\"fa-solid fa-envelope\" aria-hidden=\"true\"></i> 立即发送邮件</a>\n</div>\n</div>\n<p>请至少提前2周联系我们，以便顺利准备。</p>",
"a2": "<p>以下是退款规定：</p>\n<div class=\"policy-table\">\n<div class=\"policy-row\">\n<span class=\"policy-time\">预约日7天前</span>\n<span class=\"policy-desc\">100%退款</span>\n</div>\n<div class=\"policy-row\">\n<span class=\"policy-time\">预约日3天前</span>\n<span class=\"policy-desc\">70%退款</span>\n</div>\n<div class=\"policy-row\">\n<span class=\"policy-time\">预约日1天前</span>\n<span class=\"policy-desc\">50%退款</span>\n</div>\n<div class=\"policy-row\">\n<span class=\"policy-time\">当天取消</span>\n<span class=\"policy-desc\">不可退款</span>\n</div>\n</div>",
"a3": "<p>最少租赁时间为<strong>2小时</strong>起。</p>\n<p>可按1小时为单位延长。</p>",
"a4": "<p>请至少提前2周联系我们，以便顺利准备。</p>",
"a5": "<p>现场可使用现金支付或银行转账。</p>\n<p>请注意，现场不支持刷卡支付。</p>\n<p>可开具现金收据及增值税发票。</p>",
"a6": "<p>是的，可以开具增值税发票。</p>",
"a7": "<p>Mingle Studio配备了以下专业设备：</p>\n<ul>\n<li><strong>OptiTrack 摄像头：</strong> 30台</li>\n<li><strong>手部追踪：</strong> 使用Rokoko智能手套</li>\n</ul>",
"a8": "<p>是的，免费提供专业动作捕捉服装和标记点。</p>\n<ul>\n<li>备有多种尺码（S、M、L、XL）</li>\n<li>卫生管理，保持整洁状态</li>\n<li>也可自带服装</li>\n<li>包含手套、头带等配件</li>\n</ul>",
"a9": "<p>最多可<strong>5人</strong>同时进行动作捕捉。</p>\n<p>各人数详细信息：</p>\n<ul>\n<li><strong>1人：</strong> 最高精度捕捉</li>\n<li><strong>2人：</strong> 最适合互动场景</li>\n<li><strong>3-5人：</strong> 可进行团体表演</li>\n</ul>\n<p>人数越多，捕捉空间和精度可能会受到一定限制。</p>",
"a10": "<p>我们支持以下支付方式：</p>\n<ul>\n<li><strong>银行转账：</strong> 预约确认后24小时内</li>\n<li><strong>现金支付：</strong> 可现场支付</li>\n<li><strong>刷卡支付：</strong> 现场不可用</li>\n<li><strong>增值税发票：</strong> 可为企业客户开具</li>\n<li><strong>现金收据：</strong> 可为个人客户开具</li>\n</ul>\n<p>预约金（30%）在预约确认时支付，尾款（70%）可在拍摄当天支付。</p>",
"a11": "<p>基本上需要做以下准备：</p>\n<ul>\n<li><strong>鞋子：</strong> 必须穿袜子</li>\n<li><strong>眼镜：</strong> 不能戴眼镜（建议戴隐形眼镜）</li>\n<li><strong>头发：</strong> 长发请扎起来</li>\n<li><strong>饰品：</strong> 请取下手表、戒指等</li>\n<li><strong>化妆：</strong> 请避免浓妆</li>\n</ul>\n<p>动作捕捉服装和标记点由工作室提供。</p>",
"a12": "<p>我们提供以下格式的数据：</p>\n<ul>\n<li><strong>FBX文件：</strong> 兼容Unity、Unreal Engine</li>\n<li><strong>ANIM文件：</strong> 直接兼容Unity Animator</li>\n<li><strong>MP4视频：</strong> 参考视频</li>\n</ul>\n<p>咨询时将提供详细信息，数据通过云端传送。</p>",
"a13": "<p><strong>是的，通过我们的Streamingle服务可以进行实时直播。</strong></p>\n<p>动作捕捉数据可以实时推送，用于直播。</p>\n<p>详细信息请参考服务页面的Streamingle服务部分。</p>",
"a14": "<p>是的，可以停车：</p>\n<ul>\n<li><strong>基本：</strong> 2小时免费</li>\n<li><strong>使用楼内设施时：</strong> 额外2小时，最多4小时免费</li>\n<li><strong>位置：</strong> 仁川科技谷大楼停车场</li>\n</ul>",
"a15": "<p>参观和导览需提前咨询确认是否可行：</p>\n<ul>\n<li><strong>提前咨询：</strong> 必须（根据工作室情况可能会被拒绝）</li>\n<li><strong>联系方式：</strong> help@minglestudio.co.kr</li>\n<li><strong>参观时间：</strong> 批准后协商（约30分钟）</li>\n<li><strong>费用：</strong> 免费</li>\n</ul>\n<p>根据工作室运营情况，参观可能会受到限制，敬请谅解。</p>"
},
"cta": {
"title": "没有找到想要的答案？",
"desc": "如有任何疑问，请随时联系我们",
"btnContact": "联系我们",
"btnCall": "电话咨询"
}
},
"error404": {
"meta": {
"title": "页面未找到 - Mingle Studio"
},
"title": "页面未找到",
"desc": "抱歉，您请求的页面不存在或已被移动。<br>请通过以下链接查找您需要的信息。",
"btnHome": "返回首页",
"btnContact": "联系我们",
"searchPlaceholder": "搜索您需要的内容...",
"helpfulLinks": "可能有帮助的页面",
"linkAbout": "关于我们",
"linkServices": "服务介绍",
"linkPortfolio": "作品集",
"linkGallery": "工作室画廊",
"linkQna": "常见问题",
"linkContact": "联系方式与位置"
},
"schedule": {
"title": "预约状态",
"desc": "查看工作室可预约日程",
"sun": "日",
"mon": "一",
"tue": "二",
"wed": "三",
"thu": "四",
"fri": "五",
"sat": "六",
"available": "可预约",
"booked": "已满",
"past": "过去日期",
"infoTitle": "预约指南",
"infoDesc": "可通过邮件或咨询页面进行预约。<br>建议至少提前2周预约。",
"contactBtn": "预约咨询",
"naverBtn": "Naver预约",
"detailHours": "营业时间",
"detailHoursVal": "24小时 · 全年无休",
"detailMin": "最低使用",
"detailMinVal": "2小时起",
"detailAdvance": "提前预约",
"detailAdvanceVal": "建议提前2周"
}
}

19
index.html
View File

@ -189,10 +189,6 @@
<link rel="alternate" hreflang="ko" href="https://minglestudio.co.kr/">
<link rel="alternate" hreflang="en" href="https://minglestudio.co.kr/en/">
<link rel="alternate" hreflang="ja" href="https://minglestudio.co.kr/ja/">
<link rel="alternate" hreflang="zh" href="https://minglestudio.co.kr/zh/">
<link rel="alternate" hreflang="x-default" href="https://minglestudio.co.kr/">
</head>
<body>
<a href="#main-content" class="skip-to-content" data-i18n="common.skipToContent">본문 바로가기</a>
@ -224,20 +220,6 @@
<li><a href="/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">
@ -1023,7 +1005,6 @@
</footer>
<!-- JavaScript -->
<script src="js/i18n.js"></script>
<script src="js/common.js?v=20260313"></script>
<script src="js/contact.js"></script>
<script src="js/main.js"></script>

264
ja/404.html
View File

@ -1,264 +0,0 @@
<!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>404.meta.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 href="https://hangeul.pstatic.net/hangeul_static/css/nanum-square.css" rel="stylesheet">
<!-- CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" integrity="sha512-Avb2QiuDEEvB4bZJYdft2mNjVShBftLGPg8YJ04IY4YZ7C7BC9XkjsTBdQ1B8TAVxT2BOxqIRkVvNs/FNRs0w==" crossorigin="anonymous" referrerpolicy="no-referrer">
<link rel="stylesheet" href="/css/common.css?v=20260313">
<style>
.error-container {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
background: linear-gradient(135deg, #f8fafc 0%, #fff7ed 100%);
padding: var(--spacing-2xl);
}
.error-code {
font-size: 8rem;
font-weight: 800;
background: var(--gradient-main);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: var(--spacing-lg);
line-height: 1;
}
.error-title {
font-size: var(--font-3xl);
color: var(--text-primary);
margin-bottom: var(--spacing-md);
font-weight: 700;
}
.error-description {
font-size: var(--font-lg);
color: var(--text-secondary);
margin-bottom: var(--spacing-2xl);
max-width: 600px;
}
.error-actions {
display: flex;
gap: var(--spacing-md);
flex-wrap: wrap;
justify-content: center;
margin-bottom: var(--spacing-2xl);
}
.search-container {
margin-top: var(--spacing-xl);
max-width: 400px;
width: 100%;
}
.search-input {
width: 100%;
padding: var(--spacing-md) var(--spacing-lg);
border: 2px solid #e5e7eb;
border-radius: var(--border-radius-full);
font-size: var(--font-base);
transition: var(--transition);
}
.search-input:focus {
outline: none;
border-color: var(--primary-color);
}
.helpful-links {
margin-top: var(--spacing-2xl);
text-align: left;
}
.helpful-links h3 {
color: var(--text-primary);
margin-bottom: var(--spacing-md);
font-size: var(--font-xl);
}
.helpful-links ul {
list-style: none;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--spacing-md);
}
.helpful-links li {
background: var(--bg-white);
padding: var(--spacing-md);
border-radius: var(--border-radius);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
.helpful-links a {
color: var(--primary-color);
text-decoration: none;
font-weight: 500;
display: flex;
align-items: center;
gap: var(--spacing-sm);
}
.helpful-links a:hover {
color: var(--primary-hover);
}
/* 다크모드 */
[data-theme="dark"] .error-container {
background: linear-gradient(135deg, var(--dark-bg) 0%, #1a1520 100%);
}
[data-theme="dark"] .error-title {
color: rgba(255, 255, 255, 0.95);
}
[data-theme="dark"] .error-description {
color: rgba(255, 255, 255, 0.65);
}
[data-theme="dark"] .search-input {
background: rgba(255, 255, 255, 0.05);
border-color: var(--glass-border);
color: rgba(255, 255, 255, 0.9);
}
[data-theme="dark"] .search-input::placeholder {
color: rgba(255, 255, 255, 0.35);
}
[data-theme="dark"] .search-input:focus {
border-color: var(--primary-color);
}
[data-theme="dark"] .helpful-links h3 {
color: rgba(255, 255, 255, 0.95);
}
[data-theme="dark"] .helpful-links li {
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--glass-border);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .helpful-links a {
color: var(--primary-color);
}
@media (max-width: 768px) {
.error-code {
font-size: 6rem;
}
.error-title {
font-size: var(--font-2xl);
}
.error-actions {
flex-direction: column;
align-items: center;
}
.helpful-links ul {
grid-template-columns: 1fr;
}
}
</style>
<link rel="alternate" hreflang="ko" href="https://minglestudio.co.kr/404">
<link rel="alternate" hreflang="en" href="https://minglestudio.co.kr/en/404">
<link rel="alternate" hreflang="ja" href="https://minglestudio.co.kr/ja/404">
<link rel="alternate" hreflang="zh" href="https://minglestudio.co.kr/zh/404">
<link rel="alternate" hreflang="x-default" href="https://minglestudio.co.kr/404">
</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) -->
<div class="error-container">
<div class="error-code">404</div>
<h1 class="error-title" data-i18n="error404.title">ページが見つかりません</h1>
<p class="error-description" data-i18n-html="error404.desc">申し訳ございません。お探しのページが存在しないか、移動された可能性があります。<br>以下のリンクからお探しの情報を見つけてください。</p>
<div class="error-actions">
<a href="index.html" class="btn btn-primary btn-lg"><i class="fa-solid fa-house" aria-hidden="true"></i> <span data-i18n="error404.btnHome">ホームに戻る</span></a>
<a href="contact.html" class="btn btn-outline btn-lg"><i class="fa-solid fa-phone" aria-hidden="true"></i> <span data-i18n="error404.btnContact">お問い合わせ</span></a>
</div>
<div class="search-container">
<label for="errorSearch" class="sr-only">검색</label>
<input type="text" class="search-input" placeholder="お探しの内容を検索してください..." id="errorSearch" data-i18n-placeholder="error404.searchPlaceholder">
</div>
<div class="helpful-links">
<h3 data-i18n="error404.helpfulLinks">お役に立てるページ</h3>
<ul>
<li><a href="about.html"><i class="fa-solid fa-building" aria-hidden="true"></i> <span data-i18n="error404.linkAbout">会社紹介</span></a></li>
<li><a href="services.html"><i class="fa-solid fa-clapperboard" aria-hidden="true"></i> <span data-i18n="error404.linkServices">サービス案内</span></a></li>
<li><a href="portfolio.html"><i class="fa-solid fa-bullseye" aria-hidden="true"></i> <span data-i18n="error404.linkPortfolio">ポートフォリオ</span></a></li>
<li><a href="gallery.html"><i class="fa-solid fa-images" aria-hidden="true"></i> <span data-i18n="error404.linkGallery">スタジオギャラリー</span></a></li>
<li><a href="qna.html"><i class="fa-solid fa-circle-question" aria-hidden="true"></i> <span data-i18n="error404.linkQna">よくある質問</span></a></li>
<li><a href="contact.html"><i class="fa-solid fa-envelope" aria-hidden="true"></i> <span data-i18n="error404.linkContact">連絡先・所在地</span></a></li>
</ul>
</div>
</div>
<script src="/js/i18n.js"></script>
<script src="/js/common.js?v=20260313"></script>
<script>
// 검색 기능
document.getElementById('errorSearch').addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
const query = this.value.trim();
if (query) {
// Q&A 페이지로 검색어와 함께 이동
window.location.href = `qna.html?search=${encodeURIComponent(query)}`;
}
}
});
</script>
</body></html>

423
ja/about.html
View File

@ -1,423 +0,0 @@
<!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/about">
<!-- 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">
<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?v=20260313">
<link rel="stylesheet" href="/css/about.css">
<link rel="alternate" hreflang="ko" href="https://minglestudio.co.kr/about">
<link rel="alternate" hreflang="en" href="https://minglestudio.co.kr/en/about">
<link rel="alternate" hreflang="ja" href="https://minglestudio.co.kr/ja/about">
<link rel="alternate" hreflang="zh" href="https://minglestudio.co.kr/zh/about">
<link rel="alternate" hreflang="x-default" href="https://minglestudio.co.kr/about">
</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="/schedule" class="nav-link" data-i18n="header.nav.schedule">Schedule</a></li>
<li><a href="/devlog" class="nav-link" data-i18n="header.nav.devlog">DevLog</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 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">ビジョン &amp; ミッション</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">代表 / 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> minglestudio@minglestudio.co.kr</a></li>
<li><a href="mailto:help@minglestudio.co.kr"><i class="fa-solid fa-envelope" aria-hidden="true"></i> help@minglestudio.co.kr</a></li>
<li><a href="https://discord.com/users/1402264505110495354" target="_blank"><i class="fa-brands fa-discord" aria-hidden="true"></i> minglestudio_mocap</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?v=20260313"></script>
</body></html>

257
ja/backgrounds.html
View File

@ -1,257 +0,0 @@
<!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>backgrounds.meta.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">
<!-- Theme Color -->
<meta name="theme-color" content="#ff8800">
<!-- SEO -->
<meta name="description" content="backgrounds.meta.description">
<meta name="robots" content="noindex, nofollow">
<!-- 폰트 -->
<link href="https://hangeul.pstatic.net/hangeul_static/css/nanum-square.css" rel="stylesheet">
<!-- CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" integrity="sha512-Avb2QiuDEEvB4bZJYdft2mNjVShBftLGPg8YJ04IY4YZ7C7BC9XkjsTBdQ1B8TAVxT2BOxqIRkVvNs/FNRs0w==" crossorigin="anonymous" referrerpolicy="no-referrer">
<link rel="stylesheet" href="/css/common.css?v=20260313">
<link rel="stylesheet" href="/css/backgrounds.css">
<link rel="alternate" hreflang="ko" href="https://minglestudio.co.kr/backgrounds">
<link rel="alternate" hreflang="en" href="https://minglestudio.co.kr/en/backgrounds">
<link rel="alternate" hreflang="ja" href="https://minglestudio.co.kr/ja/backgrounds">
<link rel="alternate" hreflang="zh" href="https://minglestudio.co.kr/zh/backgrounds">
<link rel="alternate" hreflang="x-default" href="https://minglestudio.co.kr/backgrounds">
</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) -->
<!-- 헤더 -->
<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="/schedule" class="nav-link" data-i18n="header.nav.schedule">Schedule</a></li>
<li><a href="/devlog" class="nav-link" data-i18n="header.nav.devlog">DevLog</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 class="backgrounds-page">
<div class="container">
<!-- 페이지 헤더 -->
<div class="page-header">
<h1>배경 씬 라이브러리</h1>
<p class="page-description">모션캡처 라이브 방송 서비스에서 사용 가능한 배경 씬 목록입니다</p>
<div class="last-updated" id="lastUpdated"></div>
</div>
<!-- 필터 & 검색 -->
<div class="filter-section">
<div class="search-box">
<input type="text" id="searchInput" placeholder="배경 이름으로 검색..." class="search-input">
<span class="search-icon"><i class="fa-solid fa-magnifying-glass" aria-hidden="true"></i></span>
</div>
<div class="filter-tags" id="filterTags">
<button class="filter-tag active" data-tag="all">전체</button>
<!-- 태그 버튼들이 동적으로 추가됨 -->
</div>
<div class="view-options">
<button class="view-btn active" data-view="grid" title="그리드 보기">
<span>▦</span>
</button>
<button class="view-btn" data-view="list" title="리스트 보기">
<span>☰</span>
</button>
</div>
</div>
<!-- 통계 -->
<div class="stats-bar">
<span class="stat-item">
<strong id="totalCount">0</strong>개 배경
</span>
<span class="stat-item">
<strong id="filteredCount">0</strong>개 표시 중
</span>
</div>
<!-- 배경 그리드 -->
<div class="backgrounds-grid" id="backgroundsGrid">
<!-- 배경 카드들이 동적으로 추가됨 -->
<div class="loading-placeholder">
<div class="loading-spinner"></div>
<p>배경 데이터를 불러오는 중...</p>
</div>
</div>
<!-- 데이터 없음 메시지 -->
<div class="no-data" id="noData" style="display: none;">
<div class="no-data-icon"><i class="fa-solid fa-box-open" aria-hidden="true"></i></div>
<h3>배경 데이터가 없습니다</h3>
<p>Unity에서 배경 데이터를 업로드해 주세요.</p>
</div>
<!-- 검색 결과 없음 -->
<div class="no-results" id="noResults" style="display: none;">
<div class="no-results-icon"><i class="fa-solid fa-magnifying-glass" aria-hidden="true"></i></div>
<h3>검색 결과가 없습니다</h3>
<p>다른 검색어나 필터를 시도해 보세요.</p>
</div>
</div>
</main>
<!-- 이미지 모달 -->
<div class="image-modal" id="imageModal">
<div class="modal-overlay"></div>
<div class="modal-content">
<button class="modal-close" aria-label="닫기">×</button>
<img src="" alt="" class="modal-image" id="modalImage">
<div class="modal-info">
<h3 id="modalTitle"></h3>
<p id="modalCategory"></p>
<div class="modal-tags" id="modalTags"></div>
</div>
</div>
</div>
<!-- 푸터 -->
<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>
<!-- 백업 푸터 -->
<footer class="site-footer">
<div class="container">
<div style="color:#bbb;font-size:0.98rem;">© 2025 밍글 스튜디오. All rights reserved.</div>
</div>
</footer>
<!-- JavaScript -->
<script src="/js/common.js?v=20260313"></script>
<script src="/js/backgrounds.js"></script>
</body></html>

528
ja/contact.html
View File

@ -1,528 +0,0 @@
<!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/contact">
<!-- Theme Color -->
<meta name="theme-color" content="#ff8800">
<!-- SEO 메타 태그 -->
<meta name="description" content="Mingle Studioへのお問い合わせ - モーションキャプチャースタジオレンタル、撮影、制作に関するお問い合わせとご相談">
<meta name="keywords" content="모션캡쳐 문의, 스튜디오 대관, 촬영 문의, 버튜버 제작, 3D 모션 상담">
<meta name="author" content="밍글 스튜디오">
<!-- Open Graph -->
<meta property="og:title" content="お問い合わせ - Mingle Studio">
<meta property="og:description" content="モーションキャプチャースタジオレンタル、撮影、制作に関するお問い合わせとご相談。仁川テクノバレー所在のOptiTrack専門スタジオ">
<meta property="og:url" content="https://minglestudio.co.kr/contact">
<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="모션캡처 스튜디오 대관, 촬영, 제작 관련 문의 및 상담. 인천 테크노밸리 소재 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">
<!-- 폰트 -->
<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?v=20260313">
<link rel="stylesheet" href="/css/contact.css">
<link rel="alternate" hreflang="ko" href="https://minglestudio.co.kr/contact">
<link rel="alternate" hreflang="en" href="https://minglestudio.co.kr/en/contact">
<link rel="alternate" hreflang="ja" href="https://minglestudio.co.kr/ja/contact">
<link rel="alternate" hreflang="zh" href="https://minglestudio.co.kr/zh/contact">
<link rel="alternate" hreflang="x-default" href="https://minglestudio.co.kr/contact">
</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="/schedule" class="nav-link" data-i18n="header.nav.schedule">Schedule</a></li>
<li><a href="/devlog" class="nav-link" data-i18n="header.nav.devlog">DevLog</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="contact.pageHeader.title">Contact Us</h1>
<p data-i18n="contact.pageHeader.desc">Mingle Studioと一緒に特別なプロジェクトを始めましょう</p>
</div>
</section>
<!-- 연락처 정보 -->
<section class="section">
<div class="container">
<div class="contact-info-grid stagger-children">
<div class="contact-card reveal" data-reveal="up">
<div class="contact-icon"><i class="fa-solid fa-phone" aria-hidden="true"></i></div>
<h3 data-i18n="contact.phone.title">お電話でのお問い合わせ</h3>
<p data-i18n="contact.phone.desc">24時間対応可能</p>
<a href="tel:+82-10-9288-9190" class="contact-link">010-9288-9190</a>
</div>
<div class="contact-card reveal" data-reveal="up">
<div class="contact-icon"><i class="fa-solid fa-briefcase" aria-hidden="true"></i></div>
<h3 data-i18n="contact.business.title">ビジネスお問い合わせ</h3>
<p data-i18n="contact.business.desc">提携・協力に関するお問い合わせ</p>
<a href="mailto:minglestudio@minglestudio.co.kr" class="contact-link">minglestudio@minglestudio.co.kr</a>
</div>
<div class="contact-card reveal" data-reveal="up">
<div class="contact-icon"><i class="fa-solid fa-envelope" aria-hidden="true"></i></div>
<h3 data-i18n="contact.reservation.title">ご予約・お問い合わせ</h3>
<p data-i18n="contact.reservation.desc">24時間受付可能</p>
<a href="mailto:help@minglestudio.co.kr" class="contact-link">help@minglestudio.co.kr</a>
</div>
<div class="contact-card reveal" data-reveal="up">
<div class="contact-icon"><i class="fa-brands fa-discord" aria-hidden="true"></i></div>
<h3 data-i18n="contact.discord.title">Discord</h3>
<p data-i18n="contact.discord.desc">リアルタイムチャットお問い合わせ</p>
<a href="https://discord.com/users/1402264505110495354" target="_blank" class="contact-link">minglestudio_mocap</a>
</div>
<div class="contact-card reveal" data-reveal="up">
<div class="contact-icon"><i class="fa-solid fa-comment" aria-hidden="true" style="color: #FEE500"></i></div>
<h3 data-i18n="contact.kakao.title">KakaoTalk</h3>
<p data-i18n="contact.kakao.desc">オープンチャット相談</p>
<a href="https://open.kakao.com/o/sXOK0Iji" target="_blank" class="contact-link" data-i18n="contact.kakao.link">KakaoTalkで相談する</a>
</div>
</div>
</div>
</div>
</section>
<!-- 온라인 문의 폼 -->
<section class="section">
<div class="container">
<div class="section-header">
<h2 data-i18n="contact.form.title">オンラインお問い合わせ</h2>
<p data-i18n="contact.form.desc">以下のフォームにご記入いただければ、迅速にご返答いたします</p>
</div>
<div class="contact-form-wrapper">
<form id="contactForm" class="contact-form" novalidate>
<div class="form-row">
<div class="form-group">
<label for="name" data-i18n="contact.form.name">お名前 <span class="required">*</span></label>
<input type="text" id="name" name="name" required placeholder="山田太郎" data-i18n-placeholder="contact.form.namePlaceholder">
</div>
<div class="form-group">
<label for="email" data-i18n="contact.form.email">メール <span class="required">*</span></label>
<input type="email" id="email" name="email" required placeholder="example@email.com">
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="phone" data-i18n="contact.form.phone">電話番号</label>
<input type="tel" id="phone" name="phone" placeholder="010-0000-0000">
</div>
<div class="form-group">
<label for="service" data-i18n="contact.form.service">お問い合わせ種類 <span class="required">*</span></label>
<select id="service" name="service" required>
<option value="" data-i18n="contact.form.serviceDefault">選択してください</option>
<option value="studio_rental" data-i18n="contact.form.serviceRental">スタジオレンタル</option>
<option value="motion_recording" data-i18n="contact.form.serviceMotion">モーション録画</option>
<option value="music_video" data-i18n="contact.form.serviceMV">ミュージックビデオ制作</option>
<option value="partnership" data-i18n="contact.form.servicePartner">提携・協力</option>
<option value="other" data-i18n="contact.form.serviceOther">その他</option>
</select>
</div>
</div>
<div class="form-group">
<label for="message" data-i18n="contact.form.message">お問い合わせ内容 <span class="required">*</span></label>
<textarea id="message" name="message" required rows="5" placeholder="プロジェクト内容、ご希望のスケジュールなどをご自由にご記入ください" data-i18n-placeholder="contact.form.messagePlaceholder"></textarea>
<p class="field-hint" data-i18n="contact.form.sensitiveWarning">※ マイナンバーや口座番号などの機密個人情報を入力しないでください。</p>
</div>
<div class="checkbox-group">
<label class="checkbox-label">
<input type="checkbox" id="privacyConsent" name="privacyConsent" required>
<span class="checkmark"></span>
<span data-i18n="contact.form.privacyAgree">個人情報の収集および利用に同意します。（必須）</span>
</label>
<a href="javascript:void(0)" class="privacy-link" onclick="openPrivacyModal()" data-i18n="contact.form.privacyView">個人情報処理方針を見る</a>
</div>
<div class="privacy-summary">
<ul>
<li data-i18n="contact.form.privacyPurpose">収集目的：お問い合わせの受付および回答</li>
<li data-i18n="contact.form.privacyItems">収集項目：氏名、メール、電話番号、お問い合わせ内容</li>
<li data-i18n="contact.form.privacyPeriod">保有期間：7日後に自動削除</li>
</ul>
</div>
<div class="form-submit">
<button type="submit" id="submitBtn" class="btn btn-primary btn-lg btn-submit-disabled" disabled data-i18n="contact.form.submit">お問い合わせを送信</button>
<button type="reset" class="btn btn-outline btn-lg" data-i18n="contact.form.reset">リセット</button>
</div>
</form>
</div>
</div>
</section>
<!-- 개인정보처리방침 모달 -->
<div id="privacyModal" class="modal" onclick="if(event.target===this)closePrivacyModal()" role="dialog" aria-modal="true" aria-labelledby="privacyModalTitle">
<div class="modal-content">
<div class="modal-header">
<h3 id="privacyModalTitle">個人情報の収集及び利用に関する同意書</h3>
<button class="modal-close" onclick="closePrivacyModal()" aria-label="閉じる">&times;</button>
</div>
<div class="modal-body">
<p>Mingle Studio（以下「当社」）は、韓国「個人情報保護法」に基づき、個人情報の収集及び利用について同意を求めます。</p>
<h4>1. 収集及び利用目的</h4>
<p>当社は以下の目的で個人情報を処理します。</p>
<ul>
<li>お客様からのお問い合わせ受付及び回答</li>
<li>サービス相談及び見積もりのご案内</li>
<li>お問い合わせ処理結果の通知</li>
</ul>
<h4>2. 収集する個人情報の項目</h4>
<ul>
<li><strong>必須項目：</strong>氏名、メールアドレス、お問い合わせ種類、お問い合わせ内容</li>
<li><strong>任意項目：</strong>電話番号</li>
</ul>
<p style="color: #ef4444; font-size: 0.85rem;">※ お問い合わせ内容にマイナンバー、口座番号等の機密個人情報を含めないようご注意ください。</p>
<h4>3. 保有及び利用期間</h4>
<p>収集された個人情報は<strong>お問い合わせ受付日から7日間</strong>保有し、保有期間経過後に自動的に破棄されます。ただし、関係法令による保存義務がある場合は、当該法令が定める期間保存します。</p>
<h4>4. 破棄手順及び方法</h4>
<ul>
<li><strong>破棄手順：</strong>保有期間を経過した個人情報は、自動削除システムにより遅滞なく破棄されます。</li>
<li><strong>破棄方法：</strong>電子ファイル形式の情報は、復元・再生できないよう完全に削除します。</li>
</ul>
<h4>5. 第三者への提供及び国外移転</h4>
<p>当社は原則として利用者の個人情報を第三者に提供しません。ただし、お問い合わせ処理のため、以下のとおり個人情報が国外に移転されます。（「個人情報保護法」第28条の8）</p>
<ul>
<li><strong>移転先の国及び受領者：</strong>米国 / Discord Inc.</li>
<li><strong>移転時期及び方法：</strong>お問い合わせ送信時に専用API（インターネット回線）を通じてリアルタイム送信</li>
<li><strong>移転項目：</strong>氏名、メール、電話番号（任意）、お問い合わせ種類、お問い合わせ内容</li>
<li><strong>移転目的：</strong>業務用コラボレーションツール（Discord）による迅速なお問い合わせ確認及び対応</li>
<li><strong>保有及び利用期間：</strong>送信後7日間保管後、自動破棄</li>
</ul>
<h4>6. 情報主体の権利</h4>
<p>利用者は個人情報の主体として、以下の権利を行使できます。</p>
<ul>
<li>個人情報の閲覧要求</li>
<li>誤り等の訂正要求</li>
<li>削除要求</li>
<li>処理停止要求</li>
</ul>
<p>上記の権利行使は、下記の個人情報保護責任者にご連絡ください。当社は遅滞なく対応いたします。</p>
<h4>7. 安全性確保措置</h4>
<p>当社は個人情報の安全性確保のため、以下の措置を講じています。</p>
<ul>
<li>送信データの暗号化（HTTPS/TLS）</li>
<li>アクセス権限の制限（指定された管理者のみ閲覧可能）</li>
<li>自動削除システムの運用（7日後に破棄）</li>
</ul>
<h4>8. 同意拒否の権利及び不利益</h4>
<p>利用者は個人情報の収集及び利用への同意を拒否する権利があります。ただし、必須項目への同意を拒否された場合、お問い合わせサービスのご利用が制限されます。</p>
<h4>9. 個人情報保護責任者</h4>
<ul>
<li><strong>氏名：</strong>キム・ヒジン</li>
<li><strong>役職：</strong>代表</li>
<li><strong>メール：</strong>minglestudio@minglestudio.co.kr</li>
<li><strong>電話：</strong>+82-10-9288-9190</li>
</ul>
<h4>10. 本方針の変更</h4>
<p>この個人情報処理方針は2026年3月4日から適用されます。変更がある場合は、本ウェブサイトを通じてお知らせします。</p>
</div>
</div>
</div>
<script>
function openPrivacyModal() {
var m = document.getElementById('privacyModal');
if (!m) return;
m.classList.add('active');
m.style.display = 'flex';
document.body.style.overflow = 'hidden';
}
function closePrivacyModal() {
var m = document.getElementById('privacyModal');
if (!m) return;
m.classList.remove('active');
m.style.display = '';
document.body.style.overflow = '';
}
// 체크박스 → 제출 버튼 활성화
document.addEventListener('DOMContentLoaded', function() {
var cb = document.getElementById('privacyConsent');
var btn = document.getElementById('submitBtn');
if (cb && btn) {
cb.addEventListener('change', function() {
btn.disabled = !cb.checked;
btn.classList.toggle('btn-submit-disabled', !cb.checked);
});
}
});
</script>
<!-- 위치 정보 -->
<section id="location" class="section">
<div class="container">
<div class="section-header">
<h2 data-i18n="contact.location.title">スタジオ所在地</h2>
</div>
<div class="location-wrapper">
<div class="location-info">
<div class="location-details">
<h3><i class="fa-solid fa-location-dot" aria-hidden="true"></i> <span data-i18n="contact.location.address">住所</span></h3>
<p data-i18n-html="contact.location.addressValue">(21330) 仁川広域市富平区主夫吐路236<br>仁川テクノバレーU1センター A棟 B105号</p>
<h3><i class="fa-solid fa-train-subway" aria-hidden="true"></i> <span data-i18n="contact.location.subway">地下鉄</span></h3>
<ul>
<li data-i18n="contact.location.subwayDesc">仁川7号線 カルサン駅下車 → 徒歩約7分</li>
</ul>
<h3><i class="fa-solid fa-bus" aria-hidden="true"></i> <span data-i18n="contact.location.bus">バス</span></h3>
<ul>
<li data-i18n="contact.location.busStop">カルサン市場・カルサン図書館バス停をご利用ください</li>
<li data-i18n="contact.location.busRoutes">4番、526番、555番バス</li>
</ul>
<h3><i class="fa-solid fa-car" aria-hidden="true"></i> <span data-i18n="contact.location.parking">駐車場</span></h3>
<p data-i18n="contact.location.parkingDesc">基本2時間無料、建物内施設利用時最大4時間無料</p>
<h3><i class="fa-solid fa-clock" aria-hidden="true"></i> <span data-i18n="contact.location.hours">営業時間</span></h3>
<ul>
<li data-i18n="contact.location.hours24">24時間営業</li>
<li data-i18n="contact.location.hoursAllYear">年中無休</li>
</ul>
</div>
<div class="location-map">
<div id="map" class="map-container">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d1012.8014347878724!2d126.6649476!3d37.5078124!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6f4c35884c93c281%3A0x1a65ba0583486105!2z67CN6riAIOyKpO2KnOuUlOyYpA!5e0!3m2!1sko!2skr!4v1759144450469!5m2!1sko!2skr" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade" title="밍글 스튜디오 위치 - 구글 지도">
</iframe>
</div>
<div class="map-buttons">
<a href="https://map.naver.com/p/search/밍글스튜디오" target="_blank" class="btn btn-outline" data-i18n="contact.location.naverMap">Naver地図</a>
<a href="https://maps.app.goo.gl/ioGQR4ZEsuGToRnb9" target="_blank" class="btn btn-outline" data-i18n="contact.location.googleMap">Google マップ</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 예약 및 FAQ -->
<section class="section bg-gradient">
<div class="container text-center">
<h2 data-i18n="contact.cta.title">ご予約・お問い合わせ</h2>
<p data-i18n="contact.cta.desc">簡単なオンライン予約またはよくある質問をご確認ください</p>
<div class="cta-buttons">
<a href="/ja/schedule" class="btn btn-outline btn-lg" data-i18n="contact.cta.btnSchedule"><i class="fa-regular fa-calendar-check"></i> 予約状況</a>
<a href="qna.html" class="btn btn-outline btn-lg" data-i18n="contact.cta.btnFaq">FAQを見る</a>
</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> minglestudio@minglestudio.co.kr</a></li>
<li><a href="mailto:help@minglestudio.co.kr"><i class="fa-solid fa-envelope" aria-hidden="true"></i> help@minglestudio.co.kr</a></li>
<li><a href="https://discord.com/users/1402264505110495354" target="_blank"><i class="fa-brands fa-discord" aria-hidden="true"></i> minglestudio_mocap</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?v=20260313"></script>
<script src="/js/contact.js"></script>
</body></html>

187
ja/devlog.html
View File

@ -1,187 +0,0 @@
<!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>DevLog - ミングルスタジオ</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/devlog">
<!-- Theme Color -->
<meta name="theme-color" content="#ff8800">
<!-- SEO 메타 태그 -->
<meta name="description" content="Mingle Studio DevLog - モーションキャプチャー技術、制作過程、バーチャルコンテンツ制作のストーリーを共有します。">
<meta name="keywords" content="Mingle Studio, DevLog, モーションキャプチャー, バーチャルコンテンツ, VTuber, モーキャプ技術">
<meta name="author" content="Mingle Studio">
<!-- Open Graph -->
<meta property="og:title" content="DevLog - ミングルスタジオ">
<meta property="og:description" content="モーションキャプチャー技術と制作過程を共有します。Mingle Studioの最新ニュースと技術ストーリー。">
<meta property="og:url" content="https://minglestudio.co.kr/ja/devlog">
<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="ja_JP">
<meta property="og:site_name" content="Mingle Studio">
<meta property="og:image:alt" content="Mingle Studio - DevLog">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="DevLog - ミングルスタジオ">
<meta name="twitter:description" content="モーションキャプチャー技術と制作過程を共有します。Mingle Studioの最新ニュースと技術ストーリー。">
<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?v=20260404">
<link rel="stylesheet" href="/css/devlog.css?v=20260404">
<link rel="alternate" hreflang="ko" href="https://minglestudio.co.kr/devlog">
<link rel="alternate" hreflang="en" href="https://minglestudio.co.kr/en/devlog">
<link rel="alternate" hreflang="ja" href="https://minglestudio.co.kr/ja/devlog">
<link rel="alternate" hreflang="zh" href="https://minglestudio.co.kr/zh/devlog">
<link rel="alternate" hreflang="x-default" href="https://minglestudio.co.kr/devlog">
<!-- JSON-LD 구조화 데이터 -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Blog",
"name": "Mingle Studio DevLog",
"description": "モーションキャプチャー技術と制作過程を共有します",
"url": "https://minglestudio.co.kr/ja/devlog",
"publisher": {
"@type": "Organization",
"name": "Mingle Studio",
"logo": {
"@type": "ImageObject",
"url": "https://minglestudio.co.kr/images/logo/mingle-logo.webp"
}
},
"inLanguage": "ja"
}
</script>
</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">ミングルスタジオ</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="/schedule" class="nav-link" data-i18n="header.nav.schedule">Schedule</a></li>
<li><a href="/ja/devlog" class="nav-link active" data-i18n="header.nav.devlog">DevLog</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="blog-hero">
<div class="container">
<h1>DevLog</h1>
<p>モーションキャプチャー技術と制作過程を共有します</p>
</div>
</section>
<section class="blog-list-section">
<div id="blogFilters" class="blog-filters"></div>
<div id="blogLoading" class="blog-loading">
<div class="loading-spinner"></div>
</div>
<div id="blogGrid" class="blog-grid"></div>
</section>
</main>
<!-- 푸터 -->
<div id="footer-placeholder"></div>
<!-- JavaScript -->
<script src="/js/i18n.js"></script>
<script src="/js/common.js"></script>
<script src="/js/devlog.js"></script>
</body></html>

508
ja/devlog/inertial-vs-optical-mocap.html
View File

@ -1,508 +0,0 @@
<!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 -->
<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>モーションキャプチャー 慣性式 vs 光学式、どんな違いがある？ - ミングルスタジオ DevLog</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="canonical" href="https://minglestudio.co.kr/ja/devlog/inertial-vs-optical-mocap">
<meta name="theme-color" content="#ff8800">
<meta name="description" content="モーションキャプチャーの二大方式である慣性式（IMU）と光学式（Optical）の原理、機材ごとの特徴、コミュニティの評価まで一目で比較します。">
<meta name="author" content="ミングルスタジオ">
<meta property="og:title" content="モーションキャプチャー 慣性式 vs 光学式、どんな違いがある？">
<meta property="og:description" content="モーションキャプチャーの二大方式である慣性式（IMU）と光学式（Optical）の原理、機材ごとの特徴、コミュニティの評価まで一目で比較します。">
<meta property="og:url" content="https://minglestudio.co.kr/ja/devlog/inertial-vs-optical-mocap">
<meta property="og:type" content="article">
<meta property="og:image" content="https://minglestudio.co.kr/blog/posts/inertial-vs-optical-mocap/images/thumbnail.webp">
<meta property="og:locale" content="ja_JP">
<meta property="og:site_name" content="ミングルスタジオ">
<meta property="article:published_time" content="2026-04-05">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="モーションキャプチャー 慣性式 vs 光学式、どんな違いがある？">
<meta name="twitter:description" content="モーションキャプチャーの二大方式である慣性式（IMU）と光学式（Optical）の原理、機材ごとの特徴、コミュニティの評価まで一目で比較します。">
<meta name="twitter:image" content="https://minglestudio.co.kr/blog/posts/inertial-vs-optical-mocap/images/thumbnail.webp">
<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?v=20260404">
<link rel="stylesheet" href="/css/devlog.css?v=20260404">
<link rel="alternate" hreflang="ko" href="https://minglestudio.co.kr/devlog/inertial-vs-optical-mocap">
<link rel="alternate" hreflang="en" href="https://minglestudio.co.kr/en/devlog/inertial-vs-optical-mocap">
<link rel="alternate" hreflang="ja" href="https://minglestudio.co.kr/ja/devlog/inertial-vs-optical-mocap">
<link rel="alternate" hreflang="zh" href="https://minglestudio.co.kr/zh/devlog/inertial-vs-optical-mocap">
<link rel="alternate" hreflang="x-default" href="https://minglestudio.co.kr/devlog/inertial-vs-optical-mocap">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BlogPosting",
"headline": "モーションキャプチャー 慣性式 vs 光学式、どんな違いがある？",
"description": "モーションキャプチャーの二大方式である慣性式（IMU）と光学式（Optical）の原理、機材ごとの特徴、コミュニティの評価まで一目で比較します。",
"datePublished": "2026-04-05",
"author": { "@type": "Organization", "name": "ミングルスタジオ" },
"publisher": { "@type": "Organization", "name": "ミングルスタジオ" },
"url": "https://minglestudio.co.kr/ja/devlog/inertial-vs-optical-mocap"
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "モーションキャプチャーの光学式と慣性式の最大の違いは何ですか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "光学式は赤外線カメラと反射マーカーで絶対位置を追跡し、サブミリメートル（0.1mm）レベルの精度を提供します。慣性式はIMUセンサーを着用して空間の制約なくどこでもキャプチャーが可能ですが、時間の経過とともに位置データにドリフト（累積誤差）が発生します。"
}
},
{
"@type": "Question",
"name": "VTuberのモーションキャプチャーにはどちらの方式が良いですか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "シンプルな個人コンテンツであれば慣性式（Rokoko、Perception Neuron）で十分です。しかし、高品質なライブ放送や精密な動作が必要な場合は、ドリフトのない光学式が適しています。"
}
},
{
"@type": "Question",
"name": "慣性式モーションキャプチャーのドリフトとは何ですか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "ドリフトとは、IMUセンサーの加速度データを二重積分して位置を計算する過程で生じる累積誤差です。撮影時間が長くなるほどキャラクターの位置が実際とずれていく現象が発生し、磁場干渉のある環境ではさらに悪化する可能性があります。"
}
},
{
"@type": "Question",
"name": "光学式モーションキャプチャーのオクルージョン問題はどう解決しますか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "オクルージョンは、マーカーがカメラから遮られて見えなくなった時に発生します。カメラの台数を増やして死角を減らし、ソフトウェアのギャップフィリング（Gap Filling）機能で欠落区間を補間して解決します。ミングルスタジオの場合、30台のカメラを360度に配置してオクルージョンを最小化しています。"
}
},
{
"@type": "Question",
"name": "二つの方式を同時に使うことはできますか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "はい、可能です。実際に多くのスタジオが全身は光学式で、指は慣性式グローブでキャプチャーするハイブリッド方式を採用しています。ミングルスタジオもOptiTrack光学式にRokokoグローブを組み合わせ、全身と指の両方を高品質で追跡しています。"
}
},
{
"@type": "Question",
"name": "モーションキャプチャースタジオをレンタルすれば、機材を自分で買わなくていいのですか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "その通りです。光学式機材は自分で購入するとかなりの投資が必要なため、必要なプロジェクトの時だけスタジオをレンタルするのが最も効率的な方法です。機材の購入、セットアップ、メンテナンスの負担なくプロ級の成果物を得ることができます。"
}
}
]
}
</script>
</head>
<body>
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PPTNN6WD"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<a href="#main-content" class="skip-to-content">Skip to content</a>
<div id="header-placeholder">
<nav class="navbar" aria-label="Navigation">
<div class="nav-container">
<div class="nav-logo">
<a href="/ja">
<img src="/images/logo/mingle-logo.webp" alt="밍글 스튜디오">
<span data-i18n="header.studioName">밍글 스튜디오</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/schedule" class="nav-link" data-i18n="header.nav.schedule">Schedule</a></li>
<li><a href="/ja/devlog" class="nav-link active" data-i18n="header.nav.devlog">DevLog</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="Language">
<span class="lang-current">JA</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="Toggle dark mode">
<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>
<button class="hamburger" id="hamburger" aria-label="Menu" aria-expanded="false">
<span class="hamburger-line"></span>
<span class="hamburger-line"></span>
<span class="hamburger-line"></span>
</button>
</div>
</div>
</nav>
</div>
<main id="main-content">
<article class="blog-post">
<div class="blog-post-header">
<div class="container">
<a href="/ja/devlog" class="blog-back-link">← 一覧に戻る</a>
<span class="blog-category">モーションキャプチャー技術</span>
<h1 class="blog-post-title">モーションキャプチャー 慣性式 vs 光学式、どんな違いがある？</h1>
<div class="blog-post-meta">
<time datetime="2026-04-05">2026年4月5日</time>
</div>
</div>
</div>
<div class="blog-post-body">
<div class="container">
<p>モーションキャプチャーに興味を持ち始めると、最初にぶつかる疑問があります。</p>
<p><strong>「慣性式と光学式、何が違うの？」</strong></p>
<p>この記事では、二つの方式の原理から代表的な機材、実際のユーザー評価までまとめてご紹介します。</p>
<hr>
<h2>光学式（Optical）モーションキャプチャーとは？</h2>
<p>光学式は<strong>赤外線カメラ</strong>と<strong>反射マーカー</strong>を使用する方式です。</p>
<p>撮影空間の周囲に複数の赤外線（IR）カメラを設置し、アクターの関節位置に直径10〜20mm程度の<strong>再帰反射（Retro-reflective）マーカー</strong>を取り付けます。各カメラは赤外線LEDを照射し、マーカーから反射して戻ってくる光を検出することで、2D画像上のマーカー座標を抽出します。</p>
<p>少なくとも2台以上のカメラが同じマーカーを同時に捉えると、<strong>三角測量（Triangulation）<strong>の原理でそのマーカーの正確な3D座標を計算できます。カメラの台数が多いほど精度が上がり死角が減るため、プロのスタジオでは通常</strong>12〜40台以上</strong>のカメラを配置します。</p>
<p>このように毎フレームごとにすべてのマーカーの3D座標が<strong>絶対位置</strong>として記録されるため、時間がどれだけ経過してもデータが累積誤差なく正確に維持されます。</p>
<p><video src="inertial-vs-optical-mocap/images/basketball-rigid-body-2x-web.mp4" autoplay loop muted playsinline style="width:100%;border-radius:12px;margin:1.5rem 0;"></video></p>
<h3>メリット</h3>
<ul>
<li><strong>サブミリメートル精度</strong> — 0.1mm レベルの精密な位置追跡が可能</li>
<li><strong>ドリフトなし</strong> — 絶対座標基準のため、時間が経ってもデータがズレない</li>
<li><strong>複数オブジェクトの同時追跡</strong> — アクター＋小道具＋セット要素まで一緒にキャプチャー可能</li>
<li><strong>低レイテンシー</strong> — 約5〜10msで、リアルタイムフィードバックに最適</li>
</ul>
<h3>制約</h3>
<ul>
<li>専用の撮影空間が必要（カメラ設置＋環境制御）</li>
<li>セットアップとキャリブレーションに30〜90分かかる</li>
<li><strong>オクルージョン（遮蔽）問題</strong> — マーカーがカメラから見えなくなると追跡が途切れる</li>
</ul>
<h3>代表的な機材</h3>
<p><strong>OptiTrack（PrimeXシリーズ）</strong></p>
<ul>
<li>光学式の中で<strong>コストパフォーマンス最強</strong>と評価されるブランド</li>
<li>Motiveソフトウェアの使いやすさが良く、Unity/Unrealプラグインのエコシステムが充実</li>
<li>ゲーム開発会社、VTuberプロダクション、大学研究室で幅広く使用</li>
<li>コミュニティ評価：*「この価格帯でこの精度はOptiTrackだけ」*という意見が主流</li>
</ul>
<p><strong>Vicon（Vero / Vantageシリーズ）</strong></p>
<ul>
<li>映画VFX業界の<strong>ゴールドスタンダード</strong> — ハリウッドAAA級映画のほとんどがViconで撮影</li>
<li>最高級の精度と安定性、強力なポストプロセスソフトウェア（Shogun）</li>
<li>コミュニティ評価：<em>「精度は最高だが、小規模スタジオには過大な投資」</em></li>
</ul>
<p><strong>Qualisys</strong></p>
<ul>
<li>医療・スポーツバイオメカニクス分野に強い</li>
<li>歩行分析、臨床研究、スポーツ科学に特化</li>
<li>エンターテインメント分野のユーザーコミュニティは比較的小規模</li>
</ul>
<hr>
<h2>慣性式（IMU）モーションキャプチャーとは？</h2>
<p>慣性式は<strong>IMU（Inertial Measurement Unit、慣性計測装置）</strong>センサーを体に取り付けるか、スーツに内蔵して動きを計測する方式です。</p>
<p>各IMUセンサーには3つのコアセンサーが搭載されています：</p>
<ul>
<li><strong>加速度計（Accelerometer）</strong> — 線形加速度を計測し、移動方向と速度を把握</li>
<li><strong>ジャイロスコープ（Gyroscope）</strong> — 角速度を計測し、回転量を算出</li>
<li><strong>地磁気計（Magnetometer）</strong> — 地球の磁場を基準に方向（Heading）を補正</li>
</ul>
<p>この3つのセンサーのデータを<strong>センサーフュージョン（Sensor Fusion）</strong>アルゴリズムで統合すると、センサーが取り付けられた身体部位の3D方向（Orientation）をリアルタイムで計算できます。通常15〜17個のセンサーを上半身、下半身、腕、脚などの主要関節に配置し、各センサー間の関係から全身骨格データを抽出します。</p>
<p>ただし、加速度計のデータを二重積分して位置を求める過程で<strong>誤差が蓄積（ドリフト）<strong>するため、「空間のどこに立っているか」という</strong>グローバル位置</strong>は時間の経過とともに不正確になります。これが慣性式の根本的な限界です。</p>
<p><video src="inertial-vs-optical-mocap/images/Sam_ROM_Raw.mp4" autoplay loop muted playsinline style="width:100%;border-radius:12px;margin:1.5rem 0;"></video></p>
<h3>メリット</h3>
<ul>
<li><strong>空間の制約なし</strong> — 屋外、狭い場所、どこでも可能</li>
<li><strong>素早いセットアップ</strong> — スーツ着用後5〜15分でキャプチャー開始</li>
<li><strong>オクルージョン問題なし</strong> — センサーが体に直接取り付けられているため遮蔽の問題がない</li>
</ul>
<h3>制約</h3>
<ul>
<li><strong>ドリフト</strong> — 時間の経過とともに位置データがズレる（累積誤差）</li>
<li><strong>グローバル位置精度が低い</strong> — 「どこに立っているか」を正確に把握しにくい</li>
<li><strong>磁場干渉</strong> — 金属構造物や電子機器の近くでデータが歪む</li>
<li>小道具や環境とのインタラクション追跡が困難</li>
</ul>
<h3>代表的な機材</h3>
<p><strong>Xsens MVN（現Movella）</strong></p>
<ul>
<li>慣性式の中で<strong>精度と信頼性No.1</strong>と評価される機材</li>
<li>自動車産業、人間工学、ゲームアニメーション分野で幅広く活用</li>
<li>コミュニティ評価：<em>「慣性式を使うならXsens一択」</em>、ただし*「グローバル位置のドリフトはどうしようもない」*</li>
</ul>
<p><strong>Rokoko Smartsuit Pro</strong></p>
<ul>
<li><strong>価格のアクセシビリティが最大の利点</strong> — インディー開発者、個人クリエイターに人気</li>
<li>Rokoko Studioソフトウェアが直感的で、リターゲティング機能が便利</li>
<li>コミュニティ評価：<em>「この価格でこのクオリティは驚き」</em>、一方で*「長時間撮影ではドリフトが目立つ」<em>、</em>「精密作業には限界がある」*</li>
</ul>
<p><strong>Noitom Perception Neuron</strong></p>
<ul>
<li>一部モデルで指追跡をサポート、コンパクトなフォームファクター</li>
<li>コミュニティ評価：<em>「Neuron 3で大幅に改善された」</em>、しかし*「ドリフトの問題はまだある」<em>、</em>「ソフトウェア（Axis Studio）の安定性が惜しい」*</li>
</ul>
<hr>
<h2>一目で比較</h2>
<table>
<thead>
<tr>
<th>項目</th>
<th>光学式（Optical）</th>
<th>慣性式（IMU）</th>
</tr>
</thead>
<tbody><tr>
<td><strong>追跡原理</strong></td>
<td>赤外線カメラ＋反射マーカー三角測量</td>
<td>IMUセンサー（加速度計＋ジャイロ＋地磁気計）</td>
</tr>
<tr>
<td><strong>位置精度</strong></td>
<td><strong>サブミリメートル（0.1mm）</strong> — 絶対座標</td>
<td>ドリフト発生 — 時間経過で累積誤差</td>
</tr>
<tr>
<td><strong>回転精度</strong></td>
<td>位置データから導出（非常に高い）</td>
<td>1〜3度レベル（センサーフュージョンアルゴリズムに依存）</td>
</tr>
<tr>
<td><strong>ドリフト</strong></td>
<td><strong>なし</strong> — 毎フレーム絶対位置を計測</td>
<td>あり — 加速度二重積分時に誤差蓄積</td>
</tr>
<tr>
<td><strong>オクルージョン（遮蔽）</strong></td>
<td>マーカーがカメラに見えないと追跡不可</td>
<td><strong>問題なし</strong> — センサーが直接体に取り付け</td>
</tr>
<tr>
<td><strong>磁場干渉</strong></td>
<td>影響なし</td>
<td>金属・電子機器の近くでデータ歪み</td>
</tr>
<tr>
<td><strong>レイテンシー</strong></td>
<td>〜5-10ms</td>
<td>〜10-20ms</td>
</tr>
<tr>
<td><strong>セットアップ時間</strong></td>
<td>30〜90分（カメラ配置＋キャリブレーション）</td>
<td>5〜15分（スーツ着用＋簡易補正）</td>
</tr>
<tr>
<td><strong>撮影空間</strong></td>
<td>専用スタジオ必要（カメラ設置・環境制御）</td>
<td><strong>どこでも可能</strong>（屋外、狭い場所OK）</td>
</tr>
<tr>
<td><strong>複数人撮影</strong></td>
<td>マーカーセットの区分で同時キャプチャー可能</td>
<td>スーツごとに独立で同時可能だがインタラクションが難しい</td>
</tr>
<tr>
<td><strong>小道具/オブジェクト追跡</strong></td>
<td>マーカー取り付けで同時追跡可能</td>
<td>別途センサーが必要、実質的に困難</td>
</tr>
<tr>
<td><strong>指追跡</strong></td>
<td>専用ハンドマーカーセットで高精度追跡</td>
<td>一部機材のみ対応、精度に限界</td>
</tr>
<tr>
<td><strong>後処理作業量</strong></td>
<td>オクルージョン区間のギャップフィリングが必要</td>
<td>ドリフト補正＋位置整理が必要</td>
</tr>
<tr>
<td><strong>代表的な機材</strong></td>
<td>OptiTrack、Vicon、Qualisys</td>
<td>Xsens、Rokoko、Noitom</td>
</tr>
<tr>
<td><strong>主な活用分野</strong></td>
<td>ゲーム/映画の最終キャプチャー、VTuberライブ、研究</td>
<td>プリビズ、屋外撮影、インディー/個人コンテンツ</td>
</tr>
</tbody></table>
<hr>
<h2>マーカーレス方式とは？</h2>
<p>最近では、カメラ映像だけでAIが動作を抽出する<strong>マーカーレスモーションキャプチャー</strong>も注目を集めています。Move.ai、Captury、Plaskなどが代表的で、マーカーの取り付けなしに一般的なカメラでもキャプチャーが可能という点で参入障壁が非常に低いです。</p>
<p>しかし、現時点でマーカーレス方式は<strong>精度と安定性の面で光学式・慣性式に大きく及びません。<strong>関節位置が飛んだり震えたりするジッター（Jitter）現象が頻繁に発生し、速い動きやオクルージョンの状況で追跡が不安定になります。プリビズやリファレンスレベルでは活用可能ですが、ゲーム・放送・映画などの</strong>最終成果物にそのまま使えるレベルにはまだ達していません。</strong></p>
<p>技術の進歩が速い分野なので今後期待できますが、現在のプロの現場では依然として光学式と慣性式が主流です。</p>
<hr>
<h2>コミュニティはどう評価している？</h2>
<p>Reddit（r/gamedev、r/vfx）、CGSocietyなどモーションキャプチャー関連コミュニティで繰り返し見られる意見をまとめると：</p>
<blockquote>
<p><strong>「最終クオリティが重要な作業は光学式、素早い反復とアクセシビリティが重要なら慣性式」</strong></p>
</blockquote>
<p>実際に多くのプロスタジオが<strong>二つの方式を併用</strong>しています。慣性式で素早くプリビズ（事前視覚化）やモーションブロッキングを行い、最終撮影は光学式で行うというワークフローが一般的です。</p>
<p>個人クリエイターやインディーチームであれば、Rokokoのように参入障壁の低い慣性式で始めつつ、<strong>精度が必要なプロジェクトでは光学式スタジオをレンタル</strong>するのが最も現実的だという意見が多いです。</p>
<hr>
<h2>ミングルスタジオが光学式を選んだ理由</h2>
<p>ミングルスタジオは<strong>OptiTrackカメラ30台（Prime 17 × 16台 + Prime 13 × 14台）</strong>を備えた光学式モーションキャプチャースタジオです。光学式を選んだ理由は明確です。</p>
<ul>
<li><strong>精度</strong> — ゲームシネマティック、VTuberライブ、放送コンテンツなど最終成果物に直結する作業にはサブミリメートル精度が不可欠</li>
<li><strong>リアルタイムストリーミング</strong> — VTuberライブ放送のようにリアルタイムフィードバックが必要な場面で、ドリフトのない安定したデータを提供</li>
<li><strong>小道具連携</strong> — 剣、銃、椅子などの小道具とのインタラクションまで精密に追跡可能</li>
<li><strong>コストパフォーマンス</strong> — OptiTrackはViconに比べて合理的な価格でプロ級の精度を提供</li>
<li><strong>指追跡の補完</strong> — 光学式の弱点である指追跡を<strong>Rokokoグローブ</strong>で補完し、全身は光学式の精度で、指は慣性式グローブの安定した追跡で、各方式のメリットだけを組み合わせ</li>
</ul>
<p>このように光学式と慣性式は必ずしも二者択一ではありません。<strong>各方式の強みを組み合わせる</strong>ことで、単一方式では到達しにくいクオリティを生み出すことができます。</p>
<p>8m x 7mのキャプチャー空間に30台のカメラが360度死角なく追跡するため、オクルージョンの問題も最小化されています。</p>
<h3>ミングルスタジオの撮影ワークフロー</h3>
<p>実際にミングルスタジオでモーションキャプチャーのスタジオレンタルをご利用いただくと、以下の流れで進行します。</p>
<p><strong>ステップ1：事前相談</strong>
撮影の目的、必要な人数、キャプチャーする動作の種類を事前にご相談します。ライブ放送の場合、アバター、背景、プロップ（小道具）のセッティングもこの段階で打ち合わせします。</p>
<p><strong>ステップ2：撮影準備（セッティング）</strong>
スタジオにお越しいただくと、専門オペレーターがマーカー取り付け、キャリブレーション、アバターマッピングを行います。ライブ放送パッケージの場合、キャラクター・背景・プロップのセッティングが含まれているため、別途の準備は不要です。</p>
<p><strong>ステップ3：本撮影 / ライブ放送</strong>
OptiTrack 30台カメラ + Rokokoグローブで全身と指を同時にキャプチャーします。リアルタイムモニタリングにより撮影現場ですぐに結果を確認でき、リモートディレクションにも対応しています。</p>
<p><strong>ステップ4：データ納品 / 後処理</strong>
撮影終了後、モーションデータをすぐにお受け取りいただけます。必要に応じて、データクリーンアップ（ノイズ除去、フレーム補正）やお客様のアバターに最適化されたリターゲティングの後処理も可能です。</p>
<hr>
<h2>どちらの方式を選ぶべき？</h2>
<table>
<thead>
<tr>
<th>シチュエーション</th>
<th>推奨方式</th>
<th>推奨機材</th>
<th>理由</th>
</tr>
</thead>
<tbody><tr>
<td>個人YouTube/VTuberコンテンツ</td>
<td>慣性式</td>
<td>Rokoko、Perception Neuron</td>
<td>簡単なセットアップ、空間の制約なし</td>
</tr>
<tr>
<td>屋外・ロケ撮影</td>
<td>慣性式</td>
<td>Xsens MVN</td>
<td>空間の制約なし、高い信頼性</td>
</tr>
<tr>
<td>プリビズ・モーションブロッキング</td>
<td>慣性式</td>
<td>Rokoko、Xsens</td>
<td>素早い反復作業に有利</td>
</tr>
<tr>
<td>ゲームシネマティック・最終アニメーション</td>
<td>光学式</td>
<td>OptiTrack、Vicon</td>
<td>サブミリメートル精度が必須</td>
</tr>
<tr>
<td>VTuberライブ放送（高品質）</td>
<td>光学式</td>
<td>OptiTrack</td>
<td>リアルタイムストリーミング＋ドリフトなし</td>
</tr>
<tr>
<td>小道具・環境インタラクション</td>
<td>光学式</td>
<td>OptiTrack、Vicon</td>
<td>オブジェクトにマーカー取り付けで同時追跡</td>
</tr>
<tr>
<td>医療・スポーツ研究</td>
<td>光学式</td>
<td>Vicon、Qualisys</td>
<td>臨床レベルの精密データが必要</td>
</tr>
<tr>
<td>自動車・人間工学分析</td>
<td>慣性式</td>
<td>Xsens MVN</td>
<td>実際の作業環境で計測可能</td>
</tr>
</tbody></table>
<p>自前で機材を購入するのが負担であれば、<strong>光学式スタジオのレンタル</strong>が最も効率的な選択です。高額な機材を自分で揃えなくても、プロ級の成果物を得ることができます。</p>
<hr>
<h2>よくある質問（FAQ）</h2>
<p><strong>Q. モーションキャプチャーの光学式と慣性式の最大の違いは何ですか？</strong></p>
<p>光学式は赤外線カメラと反射マーカーで絶対位置を追跡し、サブミリメートル（0.1mm）レベルの精度を提供します。慣性式はIMUセンサーを着用して空間の制約なくどこでもキャプチャーが可能ですが、時間の経過とともに位置データにドリフト（累積誤差）が発生します。</p>
<p><strong>Q. VTuberのモーションキャプチャーにはどちらの方式が良いですか？</strong></p>
<p>シンプルな個人コンテンツであれば慣性式（Rokoko、Perception Neuron）で十分です。しかし、高品質なライブ放送や精密な動作が必要な場合は、ドリフトのない光学式が適しています。</p>
<p><strong>Q. 慣性式モーションキャプチャーのドリフトとは何ですか？</strong></p>
<p>ドリフトとは、IMUセンサーの加速度データを二重積分して位置を計算する過程で生じる累積誤差です。撮影時間が長くなるほどキャラクターの位置が実際とずれていく現象が発生し、磁場干渉のある環境ではさらに悪化する可能性があります。</p>
<p><strong>Q. 光学式モーションキャプチャーのオクルージョン問題はどう解決しますか？</strong></p>
<p>オクルージョンは、マーカーがカメラから遮られて見えなくなった時に発生します。カメラの台数を増やして死角を減らし、ソフトウェアのギャップフィリング（Gap Filling）機能で欠落区間を補間して解決します。ミングルスタジオの場合、30台のカメラを360度に配置してオクルージョンを最小化しています。</p>
<p><strong>Q. 二つの方式を同時に使うことはできますか？</strong></p>
<p>はい、可能です。実際に多くのスタジオが全身は光学式で、指は慣性式グローブでキャプチャーするハイブリッド方式を採用しています。ミングルスタジオもOptiTrack光学式にRokokoグローブを組み合わせ、全身と指の両方を高品質で追跡しています。</p>
<p><strong>Q. モーションキャプチャースタジオをレンタルすれば、機材を自分で買わなくていいのですか？</strong></p>
<p>その通りです。光学式機材は自分で購入するとかなりの投資が必要なため、必要なプロジェクトの時だけスタジオをレンタルするのが最も効率的な方法です。機材の購入、セットアップ、メンテナンスの負担なくプロ級の成果物を得ることができます。</p>
<hr>
<h2>光学式モーションキャプチャーを実際に体験してみませんか</h2>
<p>機材を自分で購入する必要はありません。ミングルスタジオでは<strong>OptiTrack 30台 + Rokokoグローブ</strong>のフルセットアップを時間単位でご利用いただけます。</p>
<ul>
<li><strong>モーションキャプチャー収録</strong> — 全身/フェイシャルキャプチャー＋リアルタイムモニタリング＋モーションデータ提供</li>
<li><strong>ライブ放送フルパッケージ</strong> — アバター・背景・プロップセッティング＋リアルタイムストリーミングまでオールインワン</li>
</ul>
<p>詳しいサービス内容と料金は<a href="/services">サービス案内ページ</a>で、撮影スケジュールは<a href="/schedule">スケジュールページ</a>でご確認いただけます。ご質問がありましたら<a href="/contact">お問い合わせページ</a>からお気軽にご連絡ください。</p>
</div>
</div>
<div class="blog-post-footer">
<div class="container">
<a href="/ja/devlog" class="blog-back-btn"><i class="fas fa-arrow-left"></i> ← 一覧に戻る</a>
</div>
</div>
</article>
</main>
<div id="footer-placeholder"></div>
<script src="/js/i18n.js"></script>
<script src="/js/common.js"></script>
</body>
</html>

BIN
ja/devlog/inertial-vs-optical-mocap/images/Sam_ROM_Raw.mp4
View File

Binary file not shown.

BIN
ja/devlog/inertial-vs-optical-mocap/images/basketball-rigid-body-2x-web.mp4
View File

Binary file not shown.

BIN
ja/devlog/inertial-vs-optical-mocap/images/thumbnail.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 50 KiB

669
ja/devlog/optical-mocap-pipeline.html
View File

@ -1,669 +0,0 @@
<!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 -->
<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>光学式モーションキャプチャーパイプライン完全解剖 ― カメラからモーションデータまで - ミングルスタジオ DevLog</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="canonical" href="https://minglestudio.co.kr/ja/devlog/optical-mocap-pipeline">
<meta name="theme-color" content="#ff8800">
<meta name="description" content="光学式モーションキャプチャーの技術パイプライン全体を詳しく解説します。カメラ設置、PoEネットワーク、2Dセントロイド、キャリブレーション、3D復元、スケルトンソルビング、後処理、現場の実務課題まで10ステップで詳細に取り上げます。">
<meta name="author" content="ミングルスタジオ">
<meta property="og:title" content="光学式モーションキャプチャーパイプライン完全解剖 ― カメラからモーションデータまで">
<meta property="og:description" content="光学式モーションキャプチャーの技術パイプライン全体を詳しく解説します。カメラ設置、PoEネットワーク、2Dセントロイド、キャリブレーション、3D復元、スケルトンソルビング、後処理、現場の実務課題まで10ステップで詳細に取り上げます。">
<meta property="og:url" content="https://minglestudio.co.kr/ja/devlog/optical-mocap-pipeline">
<meta property="og:type" content="article">
<meta property="og:image" content="https://minglestudio.co.kr/blog/posts/optical-mocap-pipeline/images/thumbnail.webp">
<meta property="og:locale" content="ja_JP">
<meta property="og:site_name" content="ミングルスタジオ">
<meta property="article:published_time" content="2026-04-05">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="光学式モーションキャプチャーパイプライン完全解剖 ― カメラからモーションデータまで">
<meta name="twitter:description" content="光学式モーションキャプチャーの技術パイプライン全体を詳しく解説します。カメラ設置、PoEネットワーク、2Dセントロイド、キャリブレーション、3D復元、スケルトンソルビング、後処理、現場の実務課題まで10ステップで詳細に取り上げます。">
<meta name="twitter:image" content="https://minglestudio.co.kr/blog/posts/optical-mocap-pipeline/images/thumbnail.webp">
<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?v=20260404">
<link rel="stylesheet" href="/css/devlog.css?v=20260404">
<link rel="alternate" hreflang="ko" href="https://minglestudio.co.kr/devlog/optical-mocap-pipeline">
<link rel="alternate" hreflang="en" href="https://minglestudio.co.kr/en/devlog/optical-mocap-pipeline">
<link rel="alternate" hreflang="ja" href="https://minglestudio.co.kr/ja/devlog/optical-mocap-pipeline">
<link rel="alternate" hreflang="zh" href="https://minglestudio.co.kr/zh/devlog/optical-mocap-pipeline">
<link rel="alternate" hreflang="x-default" href="https://minglestudio.co.kr/devlog/optical-mocap-pipeline">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BlogPosting",
"headline": "光学式モーションキャプチャーパイプライン完全解剖 ― カメラからモーションデータまで",
"description": "光学式モーションキャプチャーの技術パイプライン全体を詳しく解説します。カメラ設置、PoEネットワーク、2Dセントロイド、キャリブレーション、3D復元、スケルトンソルビング、後処理、現場の実務課題まで10ステップで詳細に取り上げます。",
"datePublished": "2026-04-05",
"author": { "@type": "Organization", "name": "ミングルスタジオ" },
"publisher": { "@type": "Organization", "name": "ミングルスタジオ" },
"url": "https://minglestudio.co.kr/ja/devlog/optical-mocap-pipeline"
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "光学式モーションキャプチャーカメラは一般のカメラと何が違いますか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "一般のカメラはフルカラー映像を撮影しますが、モーションキャプチャーカメラは赤外線（IR）領域に特化しています。IR LEDでマーカーを照らし反射光のみを検出し、カメラ内部でマーカーの2D座標を直接計算して座標データのみをPCに送信します。"
}
},
{
"@type": "Question",
"name": "PoEケーブルの長さに制限はありますか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "Ethernet規格に従い、PoEケーブルは**最大100m**までサポートされています。ほとんどのモーションキャプチャースタジオではこの範囲を十分に満たします。"
}
},
{
"@type": "Question",
"name": "カメラのフレームレートは高ければ高いほど良いですか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "フレームレートが高いと高速な動きの追跡と低レイテンシーに有利ですが、データ処理量が増え、カメラの解像度が低下する可能性があります。一般的にVTuberライブやゲームモーションキャプチャーでは120〜240fpsで十分であり、スポーツ科学などの超高速動作分析では360fps以上を使用します。"
}
},
{
"@type": "Question",
"name": "マーカースワップはどのくらいの頻度で発生しますか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "マーカーセットが適切に設計されていてカメラ台数が十分であれば、リアルタイム撮影中のスワップは稀にしか発生しません。ただし高速な動きやマーカー間の距離が近い動作（手を合わせるなど）では発生確率が上がり、このような区間は後処理で修正します。"
}
},
{
"@type": "Question",
"name": "三角測量に2台で十分なのに、なぜ30台も設置するのですか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "2台は理論的な最小値にすぎません。実際にはオクルージョン（マーカーの遮蔽）、カメラ角度による精度の差、冗長性の確保などを考慮する必要があります。30台を配置すればどのマーカーも常に多数のカメラから見えるため、安定的で正確なトラッキングが可能です。"
}
},
{
"@type": "Question",
"name": "キャリブレーションはどのくらいの頻度で行う必要がありますか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "一般的に撮影日の開始前に1回実施します。ただし長時間撮影時には温度変化やカメラの微細な移動でキャリブレーションがずれる可能性があるため、4〜6時間の連続撮影時には途中で再キャリブレーションを推奨します。OptiTrack MotiveのContinuous Calibration機能を使用すれば、撮影中でもリアルタイムで補正が可能です。"
}
},
{
"@type": "Question",
"name": "光沢のある服を着てはいけないのですか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "モーションキャプチャーカメラは赤外線の反射を検出するため、光沢のある素材（金属装飾、スパンコール、光沢のある合成繊維など）は赤外線を反射して偽マーカー（Ghost Marker）を作る可能性があります。専用モーキャプスーツやマット素材の快適な服を着用するのが最善です。"
}
}
]
}
</script>
</head>
<body>
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PPTNN6WD"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<a href="#main-content" class="skip-to-content">Skip to content</a>
<div id="header-placeholder">
<nav class="navbar" aria-label="Navigation">
<div class="nav-container">
<div class="nav-logo">
<a href="/ja">
<img src="/images/logo/mingle-logo.webp" alt="밍글 스튜디오">
<span data-i18n="header.studioName">밍글 스튜디오</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/schedule" class="nav-link" data-i18n="header.nav.schedule">Schedule</a></li>
<li><a href="/ja/devlog" class="nav-link active" data-i18n="header.nav.devlog">DevLog</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="Language">
<span class="lang-current">JA</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="Toggle dark mode">
<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>
<button class="hamburger" id="hamburger" aria-label="Menu" aria-expanded="false">
<span class="hamburger-line"></span>
<span class="hamburger-line"></span>
<span class="hamburger-line"></span>
</button>
</div>
</div>
</nav>
</div>
<main id="main-content">
<article class="blog-post">
<div class="blog-post-header">
<div class="container">
<a href="/ja/devlog" class="blog-back-link">← 一覧に戻る</a>
<span class="blog-category">モーションキャプチャー技術</span>
<h1 class="blog-post-title">光学式モーションキャプチャーパイプライン完全解剖 ― カメラからモーションデータまで</h1>
<div class="blog-post-meta">
<time datetime="2026-04-05">2026年4月5日</time>
</div>
</div>
</div>
<div class="blog-post-body">
<div class="container">
<p>モーションキャプチャースタジオで俳優がスーツを着て動くと、画面上のキャラクターがリアルタイムで追従します。一見シンプルに見えますが、その裏では<strong>カメラハードウェア → ネットワーク伝送 → 2D映像処理 → 3D復元 → スケルトンソルビング → リアルタイムストリーミング</strong>という精密な技術パイプラインが動いています。</p>
<p>この記事では、光学式モーションキャプチャー（OptiTrack基準）のパイプライン全体をステップごとに解剖します。</p>
<hr>
<h2>ステップ1：カメラの設置と配置戦略</h2>
<p>光学式モーションキャプチャーの最初のステップは、カメラを<strong>どこに、どのように配置するか</strong>です。</p>
<p><figure class="blog-figure"><img src="/images/studio/모션캡쳐%20공간%20001.webp" alt="ミングルスタジオ モーションキャプチャー空間" loading="lazy"><figcaption>ミングルスタジオ モーションキャプチャー空間</figcaption></figure></p>
<h3>配置の原則</h3>
<ul>
<li><strong>高さ</strong>：通常2〜3mの高さに設置し、約30度下向きに角度を調整します</li>
<li><strong>配置形態</strong>：キャプチャーボリューム（撮影空間）の周囲を囲むリング（Ring）形態で配置</li>
<li><strong>2段配置</strong>：高い位置と低い位置にカメラを交互に配置すると、垂直方向のカバレッジが向上します</li>
<li><strong>オーバーラップ（重複）</strong>：キャプチャーボリューム内のすべてのポイントが<strong>最低3台以上のカメラ</strong>に同時に見える必要があります。三角測量には最低2台が必要ですが、3台以上になると精度とオクルージョン対応力が大幅に向上します</li>
</ul>
<h3>カメラ台数と精度の関係</h3>
<p>カメラの台数が多いほど：</p>
<ul>
<li>死角が減る → オクルージョン発生確率の減少</li>
<li>同じマーカーを見るカメラが増える → 三角測量精度の向上</li>
<li>一部のカメラに問題が生じても他のカメラが補完（冗長性）</li>
</ul>
<p>ミングルスタジオでは<strong>OptiTrack Prime 17 × 16台 + Prime 13 × 14台</strong>、合計30台を8m × 7mの空間に配置し、360度の死角を最小化しています。</p>
<h3>IRパスフィルター ― 赤外線だけを見る目</h3>
<p>モーションキャプチャーカメラのレンズ前面には<strong>IRパスフィルター（赤外線通過フィルター）<strong>が装着されています。このフィルターは可視光線を遮断し、赤外線波長（850nm付近）のみを通過させます。これにより蛍光灯、太陽光、モニターの光など一般的な照明による干渉が根本的に遮断され、カメラは</strong>IR LEDに反射したマーカーの光のみ</strong>を検出できます。</p>
<p>撮影空間の照明を完全に消す必要がないのもこのフィルターのおかげです。ただし直射日光や強いIR成分を含む照明は干渉を引き起こす可能性があるため、スタジオ環境ではIR干渉の少ない照明を使用します。</p>
<h3>フレーム同期 ― 30台のカメラが同時に撮影する方法</h3>
<p>三角測量を正確に行うには、すべてのカメラが<strong>まったく同じ瞬間</strong>にシャッターを切る必要があります。カメラごとにバラバラのタイミングで撮影すると、高速移動するマーカーの位置がカメラごとに異なり、3D復元が不正確になります。</p>
<p>OptiTrackは<strong>ハードウェア同期（Hardware Sync）<strong>方式を採用しています。1台のカメラが</strong>Sync Master（同期マスター）</strong>に指定されてタイミング信号を生成し、残りのカメラがこの信号に合わせて同時に露光します。</p>
<ul>
<li><strong>Ethernetカメラ（Primeシリーズ）</strong>：同期信号がEthernet接続自体に内蔵されているか、OptiTrackのeSyncハブを通じて伝達されます。別途の同期ケーブルは不要です。</li>
<li><strong>USBカメラ（Flexシリーズ）</strong>：カメラ間を専用同期ケーブルでデイジーチェーン接続します。</li>
</ul>
<p>この同期の精度は<strong>マイクロ秒（μs）単位</strong>で、30台のカメラが事実上完全に同じ瞬間に撮影します。</p>
<hr>
<h2>ステップ2：PoE ― 1本のケーブルで電力とデータを同時に</h2>
<h3>PoE（Power over Ethernet）とは？</h3>
<p>OptiTrack Primeシリーズのカメラは<strong>PoE（Power over Ethernet）<strong>方式で接続されます。標準のEthernetケーブル（Cat5e/Cat6）1本で</strong>電力供給とデータ伝送を同時に</strong>行う技術です。</p>
<p><figure class="blog-figure"><img src="optical-mocap-pipeline/images/poe-switch.png" alt="PoEスイッチとカメラの接続" loading="lazy"><figcaption>PoEスイッチとカメラの接続</figcaption></figure></p>
<h3>技術規格</h3>
<table>
<thead>
<tr>
<th>規格</th>
<th>最大電力</th>
<th>備考</th>
</tr>
</thead>
<tbody><tr>
<td><strong>IEEE 802.3af (PoE)</strong></td>
<td>ポートあたり15.4W</td>
<td>基本的なモーションキャプチャーカメラに十分</td>
</tr>
<tr>
<td><strong>IEEE 802.3at (PoE+)</strong></td>
<td>ポートあたり25.5W</td>
<td>高フレームレートカメラやIR LED出力が高い場合</td>
</tr>
</tbody></table>
<p>OptiTrackカメラは通常<strong>5〜12W</strong>程度の消費電力なので、PoE規格の範囲内で十分に動作します。</p>
<h3>ネットワークトポロジー</h3>
<p>カメラは<strong>スター（Star）トポロジー</strong>で接続されます。各カメラがPoEスイッチの個別ポートに1対1で接続される構造です。デイジーチェーン（直列接続）は使用しません。</p>
<div class="network-diagram">
<div class="network-cameras">
<div class="network-cam"><div class="network-cam-icon">CAM 1</div></div>
<div class="network-cam"><div class="network-cam-icon">CAM 2</div></div>
<div class="network-cam"><div class="network-cam-icon">CAM 3</div></div>
<div class="network-cam"><div class="network-cam-icon">···</div></div>
<div class="network-cam"><div class="network-cam-icon">CAM N</div></div>
</div>
<svg class="network-lines" viewBox="0 0 100 200" preserveAspectRatio="none">
<line x1="0" y1="20" x2="100" y2="45" />
<line x1="0" y1="55" x2="100" y2="45" />
<line x1="0" y1="90" x2="100" y2="45" />
<line x1="0" y1="125" x2="100" y2="45" />
<line x1="0" y1="160" x2="100" y2="45" />
</svg>
<div class="network-center">
<div class="network-switch">PoEスイッチ</div>
<div class="network-link"></div>
<div class="network-pc">ホストPC</div>
</div>
</div>
<p>30台のカメラの場合、24ポート + 8ポートのPoE+スイッチを組み合わせるか、48ポートスイッチを使用します。スイッチ選択時には<strong>PoE総電力バジェット</strong>（例：30台 × 12W = 360W）を確認する必要があります。</p>
<h3>PoEの利点</h3>
<ul>
<li><strong>ケーブル1本で解決</strong> ― 天井に設置されたカメラごとに電源アダプターを別途接続する必要なし</li>
<li><strong>すっきりした施工</strong> ― ケーブル数が半分に削減され、設置と管理が簡便</li>
<li><strong>集中電源管理</strong> ― スイッチからカメラの電源を一括ON/OFF可能</li>
</ul>
<hr>
<h2>ステップ3：カメラが送るデータ ― 2Dセントロイド</h2>
<p>カメラからPCへ送信されるデータが何かを理解することが、パイプラインの核心です。</p>
<p><figure class="blog-figure"><img src="optical-mocap-pipeline/images/motive-2d-centroid.png" alt="Motiveカメラ2Dビュー ― マーカーが明るい点として表示されている様子" loading="lazy"><figcaption>Motiveカメラ2Dビュー ― マーカーが明るい点として表示されている様子</figcaption></figure></p>
<h3>カメラ内部の処理過程</h3>
<p>各OptiTrackカメラには、カメラレンズの周囲に<strong>赤外線（IR）LEDリング</strong>が装着されています。このLEDが赤外線を照射すると、俳優の身体に取り付けられた<strong>再帰反射マーカー</strong>が光をカメラ方向に反射します。カメラセンサーはこの反射光をグレースケールIR画像として撮影します。</p>
<p>ここで重要なのは、カメラがこの画像を<strong>そのままPCに送信するわけではない</strong>ということです。カメラ内部のプロセッサーがまず処理を行います：</p>
<p><strong>1. スレッショルディング（Thresholding）</strong>
一定基準（閾値）以上の明るさのピクセルのみを残し、残りを除去します。赤外線を反射するマーカーだけが明るく光るため、背景とマーカーを分離する処理です。</p>
<p><strong>2. ブロブ検出（Blob Detection）</strong>
明るいピクセルが集まっている領域（ブロブ）を1つのマーカー候補として認識します。</p>
<p><strong>3. 2Dセントロイド計算</strong>
各ブロブの<strong>正確な中心点（セントロイド）</strong>をサブピクセル精度（約0.1ピクセル）で計算します。ブロブ内の各ピクセルの明るさを重みとして使用する加重平均方式です。</p>
<h3>PCに送信されるデータ</h3>
<p>デフォルトのトラッキングモードでカメラがPCに送るのは<strong>2Dセントロイドデータ</strong>です：</p>
<ul>
<li>各マーカー候補の<strong>(x, y)座標</strong> + サイズ情報</li>
<li>カメラ1台あたり1フレームあたり数百バイトの非常に小さなデータ</li>
</ul>
<p>このように小さなデータ量のおかげで、<strong>40台以上のカメラでもギガビットEthernet1本で十分</strong>です。生のグレースケール画像も送信可能ですが（デバッグ/可視化用）、その場合カメラあたり数MB/sが必要なため、通常のトラッキングでは使用しません。</p>
<blockquote>
<p>つまり、カメラは「映像を撮って送る装置」ではなく、<strong>「マーカー位置を計算して座標だけを送るセンサー」</strong>に近い存在です。</p>
</blockquote>
<p>ここで一つ疑問が生じるかもしれません ― なぜモーションキャプチャーカメラは通常のカメラと比べてあれほど高価なのか？ その理由は上で説明した処理にあります。通常のカメラは撮影した映像をそのまま送って終わりですが、モーションキャプチャーカメラは<strong>内部に専用プロセッサーを搭載</strong>しており、スレッショルディング、ブロブ検出、サブピクセルセントロイド計算までを毎秒240〜360フレームでリアルタイム処理します。カメラ1台が事実上<strong>映像処理専用の小型コンピューター</strong>を内蔵しているのです。</p>
<hr>
<h2>ステップ4：キャリブレーション ― カメラの目を揃える</h2>
<p>3D復元の前に必ず経なければならないプロセスがあります。ソフトウェアが各カメラの<strong>正確な位置、方向、レンズ特性</strong>を把握する<strong>キャリブレーション（Calibration）</strong>です。</p>
<p><figure class="blog-figure"><img src="optical-mocap-pipeline/images/calibration-tools.webp" alt="キャリブレーションワンド（左）とグラウンドプレーンフレーム（右）" loading="lazy"><figcaption>キャリブレーションワンド（左）とグラウンドプレーンフレーム（右）</figcaption></figure></p>
<h3>ワンディング（Wanding） ― 空間をスキャンする</h3>
<p>オペレーターがLEDまたはマーカーが取り付けられた<strong>キャリブレーションワンド（Wand、棒）</strong>を持ち、キャプチャーボリューム全体を歩き回りながら振ります。ワンドのマーカー間の距離は正確に分かっているため、各カメラがワンドを数千フレームにわたって撮影すると、ソフトウェアは以下を計算できます：</p>
<ul>
<li><strong>内部パラメータ（Intrinsic Parameters）</strong> ― 焦点距離、レンズ歪み係数などカメラレンズ固有の特性</li>
<li><strong>外部パラメータ（Extrinsic Parameters）</strong> ― 3D空間におけるカメラの正確な位置と方向</li>
</ul>
<p>この計算には<strong>バンドル調整（Bundle Adjustment）</strong>という最適化アルゴリズムが使用されます。数千の2D観測データに基づいて、すべてのカメラのパラメータを同時に最適化するプロセスです。</p>
<h3>グラウンドプレーンの設定</h3>
<p>ワンディングが完了したら、床に<strong>L字型のキャリブレーションフレーム（Ground Plane）</strong>を置きます。このフレームの3つ以上のマーカーが床面と座標原点を定義します：</p>
<ul>
<li>どこが(0, 0, 0)か（原点）</li>
<li>どの方向がX、Y、Z軸か</li>
<li>床面の高さ基準</li>
</ul>
<p>キャリブレーションが完了すると、ソフトウェアはどのカメラの2D座標でも正確な3D光線に変換できるようになります。</p>
<h3>キャリブレーション品質</h3>
<p>Motiveソフトウェアはキャリブレーション後、各カメラの<strong>再投影誤差（Reprojection Error）</strong>を表示します。この値が小さいほど（通常0.5px以下）、キャリブレーションが正確であることを意味します。誤差が大きいカメラは位置を調整するか再キャリブレーションします。</p>
<hr>
<h2>ステップ5：2D → 3D復元（三角測量）</h2>
<p>PCに到着した2Dセントロイドがどのように3D座標に変換されるかを見ていきます。</p>
<h3>三角測量（Triangulation）の原理</h3>
<ol>
<li>キャリブレーションで取得した各カメラの<strong>正確な3D位置、方向、レンズ特性</strong>を活用します</li>
<li>カメラの2Dセントロイド座標から<strong>光線（Ray）</strong>を射出します ― カメラ位置からセントロイド方向に3D空間へ伸びる直線</li>
<li>同じマーカーを見た<strong>2台以上のカメラから射出された光線が交差する点</strong>がマーカーの3D座標です</li>
</ol>
<p><video src="optical-mocap-pipeline/images/continuous-calibration-web.mp4" autoplay loop muted playsinline style="width:100%;border-radius:12px;margin:1.5rem 0;"></video></p>
<h3>実際には完全に交差しない</h3>
<p>ノイズ、レンズ歪み、キャリブレーション誤差などにより、光線が正確に1点で交わることはほぼありません。そのため<strong>最小二乗法（Least Squares Optimization）</strong>を使用します：</p>
<ul>
<li>すべての光線までの距離の合計が最小になる3D座標を計算</li>
<li>この時、各光線と復元された3Dポイントとの距離を<strong>残差（Residual）</strong>と呼びます</li>
<li>残差が小さいほど復元品質が高い ― 適切にキャリブレーションされたOptiTrackシステムでは<strong>サブミリメートル（0.5mm以下）レベルの残差</strong>が期待できます</li>
</ul>
<h3>カメラ台数の影響</h3>
<table>
<thead>
<tr>
<th>該当マーカーを見ているカメラ台数</th>
<th>効果</th>
</tr>
</thead>
<tbody><tr>
<td><strong>2台</strong></td>
<td>3D復元可能（最低条件）</td>
</tr>
<tr>
<td><strong>3台</strong></td>
<td>精度向上 + 1台が遮られてもトラッキング維持</td>
</tr>
<tr>
<td><strong>4台以上</strong></td>
<td>高精度 + 強力なオクルージョン耐性</td>
</tr>
</tbody></table>
<hr>
<h2>ステップ6：マーカー識別とラベリング</h2>
<h3>マーカースーツとマーカー配置</h3>
<p>3D復元を意味のあるモーションデータにするには、マーカーが身体の<strong>正確な位置</strong>に取り付けられている必要があります。</p>
<p><strong>マーカー仕様</strong></p>
<ul>
<li>直径：通常<strong>12〜19mm</strong>の球形再帰反射マーカーを使用</li>
<li>素材：3M再帰反射テープでコーティングされたフォーム/プラスチック球</li>
<li>取り付け：ベルクロ（面ファスナー）、両面テープ、または専用マーカースーツにあらかじめ装着</li>
</ul>
<p><strong>マーカーセット規格</strong>
マーカーをどこに何個付けるかは標準化された<strong>マーカーセット（Markerset）</strong>規格に従います：</p>
<ul>
<li><strong>Baseline（37マーカー）</strong> ― OptiTrack基本フルボディマーカーセット。上半身、下半身、頭部をカバーし、ゲーム/映像モーションキャプチャーで最も多く使用</li>
<li><strong>Baseline + Fingers（約57マーカー）</strong> ― 上記に指マーカー約20個を追加した拡張版</li>
<li><strong>Helen Hayes（約15〜19マーカー）</strong> ― 医療/歩行分析の標準。下半身中心の最小マーカーセット</li>
</ul>
<p>マーカーは<strong>骨が突出した解剖学的ランドマーク</strong>（肩峰、外側上顆、上前腸骨棘など）に取り付けます。これらの位置は皮膚上で骨の動きを最も正確に反映し、スキンアーティファクト（皮膚の滑り）が最小化されるポイントです。</p>
<p>3D復元が完了すると、各フレームに<strong>名前のない3Dポイントの群（Point Cloud）<strong>が生成されます。「このポイントは左膝マーカーなのか、右肩マーカーなのか」を判別するプロセスが</strong>ラベリング（Labeling）</strong>です。</p>
<p><figure class="blog-figure"><img src="optical-mocap-pipeline/images/marker-labeling.png" alt="Motiveでマーカーがラベリングされた様子" loading="lazy"><figcaption>Motiveでマーカーがラベリングされた様子</figcaption></figure></p>
<h3>ラベリングアルゴリズム</h3>
<p><strong>テンプレートマッチング（Template Matching）</strong>
キャリブレーション時に定義されたマーカーセットの幾何学的配置（例：膝と足首のマーカー間距離）を基準に、現在のフレームの3Dポイントをテンプレートと照合します。</p>
<p><strong>予測追跡（Predictive Tracking）</strong>
前のフレームの速度・加速度に基づいて、次のフレームで各マーカーがどこにあるかを予測し、最も近い3Dポイントとマッチングします。</p>
<h3>マーカースワップ（Swap）問題</h3>
<p>2つのマーカーが互いに非常に近くを通過する際、ソフトウェアが2つのマーカーの<strong>ラベルを入れ替えてしまう現象</strong>です。光学式モーキャプで最もよく見られるアーティファクトの一つです。</p>
<p>解決方法：</p>
<ul>
<li>後処理で手動でラベルを修正</li>
<li>マーカー配置を<strong>非対称</strong>に設計して区別を容易にする</li>
<li><strong>アクティブマーカー（Active Marker）</strong>の使用 ― 各マーカーが固有の赤外線パターンを発光し、ハードウェアレベルで識別、スワップを根本的に防止</li>
</ul>
<h3>パッシブ vs アクティブマーカー</h3>
<table>
<thead>
<tr>
<th>区分</th>
<th>パッシブマーカー（反射型）</th>
<th>アクティブマーカー（発光型）</th>
</tr>
</thead>
<tbody><tr>
<td><strong>原理</strong></td>
<td>カメラIR LEDの光を反射</td>
<td>マーカー自体が固有のIRパターンを発光</td>
</tr>
<tr>
<td><strong>識別</strong></td>
<td>ソフトウェアベース（スワップの可能性あり）</td>
<td>ハードウェアベース（スワップなし）</td>
</tr>
<tr>
<td><strong>利点</strong></td>
<td>軽量で安価、取り付け簡単</td>
<td>自動識別、ラベリングエラーなし</td>
</tr>
<tr>
<td><strong>欠点</strong></td>
<td>ラベリング後処理が必要な場合あり</td>
<td>重く、バッテリー/電源が必要</td>
</tr>
</tbody></table>
<p>ほとんどのエンターテインメント/VTuber現場では<strong>パッシブマーカー</strong>が主に使用されています。軽くて快適であり、ソフトウェアの性能が十分に高いため、ほとんどの状況で自動ラベリングがうまく機能するからです。</p>
<hr>
<h2>ステップ7：スケルトンソルビング ― 点から骨格へ</h2>
<p>ラベリングされた3Dマーカーを人間の<strong>骨格（Skeleton）</strong>構造にマッピングするステップです。</p>
<h3>事前キャリブレーション</h3>
<p>撮影前に俳優が<strong>Tポーズ</strong>（両腕を広げた姿勢）をとると、ソフトウェアがマーカー位置を基に各骨の長さ（腕の長さ、脚の長さなど）と関節位置を計算します。</p>
<p>続いて<strong>ROM（Range of Motion）キャプチャー</strong>を実行します。</p>
<p><figure class="blog-figure"><img src="optical-mocap-pipeline/images/rom-grid.webp" alt="ROMキャプチャー ― さまざまな動きで関節範囲を補正する過程" loading="lazy"><figcaption>ROMキャプチャー ― さまざまな動きで関節範囲を補正する過程</figcaption></figure>
腕回し、膝曲げ、上半身ひねりなどさまざまな動きを通じて、ソフトウェアが<strong>関節中心点と回転軸</strong>を精密に補正します。</p>
<h3>リアルタイムソルビング</h3>
<p>撮影中は毎フレームごとに：</p>
<ol>
<li>ラベリングされた3Dマーカー座標を受け取る</li>
<li>マーカー位置を基に各関節の<strong>3D位置と回転値（Rotation）</strong>を計算</li>
<li><strong>逆運動学（Inverse Kinematics）</strong>などのアルゴリズムで自然な骨格ポーズを算出</li>
<li>結果：タイムライン上のすべての関節に対する<strong>位置（Translation）+ 回転（Rotation）</strong>データ</li>
</ol>
<h3>リジッドボディトラッキング（小道具追跡）</h3>
<p>刀、銃、カメラなどの小道具に<strong>3つ以上のマーカーを非対称に取り付ける</strong>と、ソフトウェアがそのマーカークラスターを1つの剛体（Rigid Body）として認識し、<strong>6DOF（位置3軸 + 回転3軸）</strong>トラッキングが可能になります。</p>
<hr>
<h2>ステップ8：リアルタイムストリーミングとデータ出力</h2>
<h3>リアルタイムストリーミング</h3>
<p><figure class="blog-figure"><img src="optical-mocap-pipeline/images/realtime-streaming.png" alt="リアルタイムストリーミング ― Motiveからゲームエンジンへモーションデータを送信" loading="lazy"><figcaption>リアルタイムストリーミング ― Motiveからゲームエンジンへモーションデータを送信</figcaption></figure></p>
<p>OptiTrack Motiveはソルビングされたデータをリアルタイムで外部ソフトウェアに伝達します：</p>
<ul>
<li><strong>NatNet SDK</strong> ― OptiTrack独自のプロトコル、UDPベースの低遅延伝送</li>
<li><strong>VRPN</strong> ― VR/モーキャプ分野の標準プロトコル</li>
</ul>
<p>これにより<strong>Unity、Unreal Engine、MotionBuilder</strong>などでリアルタイムにキャラクターを動かすことができます。VTuberのライブ配信が可能なのも、このリアルタイムストリーミングのおかげです。</p>
<h3>録画データ出力フォーマット</h3>
<table>
<thead>
<tr>
<th>フォーマット</th>
<th>用途</th>
</tr>
</thead>
<tbody><tr>
<td><strong>FBX</strong></td>
<td>スケルトン + アニメーションデータ、ゲームエンジン/DCCツール互換</td>
</tr>
<tr>
<td><strong>BVH</strong></td>
<td>階層的モーションデータ、リターゲティングに主に使用</td>
</tr>
<tr>
<td><strong>C3D</strong></td>
<td>生の3Dマーカーデータ、バイオメカニクス/研究標準</td>
</tr>
</tbody></table>
<hr>
<h2>ステップ9：後処理 ― データを整える過程</h2>
<p><figure class="blog-figure"><img src="optical-mocap-pipeline/images/post-processing.png" alt="後処理作業 ― Motiveでモーションデータを整理する過程" loading="lazy"><figcaption>後処理作業 ― Motiveでモーションデータを整理する過程</figcaption></figure></p>
<p>リアルタイムキャプチャーで得たデータはそのまま最終成果物として使える場合もありますが、ほとんどのプロの作業では<strong>後処理（Post-Processing）</strong>過程を経ます。</p>
<h3>ギャップフィリング（Gap Filling）</h3>
<p>オクルージョンによりマーカーが一時的に消えた区間を<strong>補間（Interpolation）</strong>で埋める作業です。</p>
<ul>
<li><strong>線形補間（Linear）</strong> ― 単純に前後のフレームを直線でつなぐ。短いギャップに適合</li>
<li><strong>スプライン補間（Spline）</strong> ― 曲線でなめらかに埋める。自然な動きの維持に有利</li>
<li><strong>パターンベース補間</strong> ― 同じ動きを繰り返した別テイクのデータを参照して埋める</li>
</ul>
<p>ギャップが長いほど補間の精度が落ちるため、撮影時にオクルージョンを最小化することが最も重要です。</p>
<h3>スムージング（Smoothing）とフィルタリング</h3>
<p>キャプチャーされたデータには微細な振動（高周波ノイズ）が含まれることがあります。これを除去するために：</p>
<ul>
<li><strong>バターワースフィルター（Butterworth Filter）</strong> ― 指定した周波数以上のノイズを除去するローパスフィルター</li>
<li><strong>ガウシアンスムージング</strong> ― 周辺フレームの加重平均で振動を緩和</li>
</ul>
<p>ただし過度なスムージングは動きの<strong>ディテールとインパクト</strong>を失わせるため、剣を振るう瞬間の鋭い動きまでぼやけないよう、適切な強度を設定する必要があります。</p>
<h3>マーカースワップ修正</h3>
<p>ステップ6で説明したマーカースワップが発生した区間を見つけて、ラベルを手動で修正する作業です。Motiveではタイムライン上でマーカーの軌跡を視覚的に確認しながら修正できます。</p>
<h3>リターゲティング（Retargeting）</h3>
<p>キャプチャーされたスケルトンデータを<strong>異なるプロポーションのキャラクター</strong>に適用するプロセスです。例えば身長170cmの俳優のモーションデータを身長3mの巨人キャラクターや150cmの子供キャラクターに合わせるには、関節の回転を維持しながら骨の長さを対象キャラクターに合わせて再計算する必要があります。MotionBuilder、Maya、Unreal Engineなどがリターゲティング機能を提供しています。</p>
<hr>
<h2>ステップ10：現場で頻発する問題と対応</h2>
<p>技術的に完璧に見える光学式モーキャプにも、実務現場で直面する問題があります。</p>
<h3>反射ノイズ（Stray Reflections）</h3>
<p>マーカー以外の物体から赤外線が反射され、<strong>偽マーカー（Ghost Marker）</strong>が検出される現象です。</p>
<ul>
<li>原因：金属表面、光沢のある服、メガネ、腕時計、床の反射など</li>
<li>対応：反射が起きる表面をマットテープで覆うか、Motiveで該当エリアを<strong>マスキング（Masking）</strong>処理してソフトウェアが無視するよう設定</li>
</ul>
<h3>マーカー脱落</h3>
<p>激しい動きの最中にマーカーがスーツから外れたり位置がずれたりするケースです。</p>
<ul>
<li>対応：撮影前にマーカーの取り付け状態を丁寧に確認し、激しいモーションキャプチャー時にはベルクロ + 両面テープを併用して固定力を高めます</li>
<li>途中でモニタリングしながらマーカーの状態をチェックすることも重要です</li>
</ul>
<h3>衣装の制約</h3>
<p>撮影時に俳優が着る服は<strong>明るい色・マット素材</strong>が理想的です。黒色はマーカーの反射に影響しませんが、光沢のある素材やゆるい服はマーカー位置が不安定になったり反射ノイズを引き起こす可能性があります。専用モーキャプスーツを着用するのが最も安定的です。</p>
<h3>キャリブレーションの維持</h3>
<p>キャプチャーボリューム内の温度変化、カメラの振動、三脚の微細な移動などにより、キャリブレーションが徐々にずれることがあります。長時間撮影時には途中で<strong>再キャリブレーション</strong>するか、Motiveの<strong>Continuous Calibration（連続キャリブレーション）</strong>機能でリアルタイム補正することをお勧めします。</p>
<hr>
<h2>レイテンシー ― 動きから画面まで何ミリ秒？</h2>
<p>パイプライン各ステップの所要時間です。</p>
<table>
<thead>
<tr>
<th>ステップ</th>
<th>所要時間</th>
</tr>
</thead>
<tbody><tr>
<td>カメラ露光（240fps基準）</td>
<td>約4.2ms</td>
</tr>
<tr>
<td>カメラ内部処理（セントロイド計算）</td>
<td>約0.5〜1ms</td>
</tr>
<tr>
<td>ネットワーク伝送（PoE → PC）</td>
<td>&lt; 1ms</td>
</tr>
<tr>
<td>3D復元 + ラベリング</td>
<td>約1〜2ms</td>
</tr>
<tr>
<td>スケルトンソルビング</td>
<td>約0.5〜1ms</td>
</tr>
<tr>
<td>ストリーミング出力（NatNet）</td>
<td>&lt; 1ms</td>
</tr>
<tr>
<td><strong>総エンドツーエンドレイテンシー</strong></td>
<td><strong>約8〜14ms（240fps基準）</strong></td>
</tr>
</tbody></table>
<p>360fpsでは露光時間が短縮され、<strong>7ms以下</strong>まで可能です。このレベルのレイテンシーは人間が体感するのが難しい水準で、VTuberのライブ配信でも自然なリアルタイム反応が可能です。</p>
<blockquote>
<p>参考：レイテンシーの大部分は<strong>カメラ露光時間（フレーム周期）</strong>が占めています。フレームレートが高いほどレイテンシーが下がるのはこのためです。</p>
</blockquote>
<hr>
<h2>パイプライン全体のまとめ</h2>
<div class="pipeline-flow">
<div class="pipeline-step">
<div class="pipeline-step-title">1. カメラ設置・IRフィルター・フレーム同期</div>
<p class="pipeline-step-desc">30台のカメラをリング形態で配置、IRパスフィルターで赤外線のみ検出、ハードウェアシンクでμs単位の同期</p>
</div>
<div class="pipeline-arrow">↓</div>
<div class="pipeline-step">
<div class="pipeline-step-title">2. PoEネットワーク</div>
<p class="pipeline-step-desc">Cat6ケーブル1本で電力 + データ同時伝送、スタートポロジーでスイッチに接続</p>
</div>
<div class="pipeline-arrow">↓</div>
<div class="pipeline-step">
<div class="pipeline-step-title">3. カメラオンボード処理 → 2Dセントロイド</div>
<p class="pipeline-step-desc">IR LED照射 → マーカー反射光受信 → スレッショルディング → ブロブ検出 → サブピクセルセントロイド計算 → 座標のみ送信</p>
</div>
<div class="pipeline-arrow">↓</div>
<div class="pipeline-step">
<div class="pipeline-step-title">4. キャリブレーション</div>
<p class="pipeline-step-desc">ワンディングでカメラ内部/外部パラメータを算出、グラウンドプレーンで座標系を定義</p>
</div>
<div class="pipeline-arrow">↓</div>
<div class="pipeline-step">
<div class="pipeline-step-title">5. 2D → 3D三角測量</div>
<p class="pipeline-step-desc">複数カメラの2D座標から光線交差 + 最小二乗法で3D座標を復元</p>
</div>
<div class="pipeline-arrow">↓</div>
<div class="pipeline-step">
<div class="pipeline-step-title">6. マーカーラベリング</div>
<p class="pipeline-step-desc">テンプレートマッチング + 予測追跡で各3Dポイントにマーカー名を付与</p>
</div>
<div class="pipeline-arrow">↓</div>
<div class="pipeline-step">
<div class="pipeline-step-title">7. スケルトンソルビング</div>
<p class="pipeline-step-desc">Tポーズ + ROMキャリブレーション基盤、逆運動学で関節の位置・回転を計算</p>
</div>
<div class="pipeline-arrow">↓</div>
<div class="pipeline-step">
<div class="pipeline-step-title">8. リアルタイムストリーミング・データ出力</div>
<p class="pipeline-step-desc">NatNet/VRPNでUnity/Unreal/MotionBuilderにリアルタイム伝送、FBX/BVH/C3D録画</p>
</div>
<div class="pipeline-arrow">↓</div>
<div class="pipeline-step">
<div class="pipeline-step-title">9. 後処理</div>
<p class="pipeline-step-desc">ギャップフィリング・スムージング・マーカースワップ修正・リターゲティング</p>
</div>
<div class="pipeline-arrow">↓</div>
<div class="pipeline-step">
<div class="pipeline-step-title">最終成果物</div>
<p class="pipeline-step-desc">ゲームシネマティック・VTuberライブ・映像コンテンツに適用（総レイテンシー約8〜14ms）</p>
</div>
</div>
<p>カメラが撮影した映像がそのままPCに送られるのではなく、カメラが自らマーカー座標を計算して送信し、PCがこの座標を3Dに復元してスケルトンにマッピングする ― これが光学式モーションキャプチャーの核心原理です。</p>
<hr>
<h2>よくある質問（FAQ）</h2>
<p><strong>Q. 光学式モーションキャプチャーカメラは一般のカメラと何が違いますか？</strong></p>
<p>一般のカメラはフルカラー映像を撮影しますが、モーションキャプチャーカメラは赤外線（IR）領域に特化しています。IR LEDでマーカーを照らし反射光のみを検出し、カメラ内部でマーカーの2D座標を直接計算して座標データのみをPCに送信します。</p>
<p><strong>Q. PoEケーブルの長さに制限はありますか？</strong></p>
<p>Ethernet規格に従い、PoEケーブルは<strong>最大100m</strong>までサポートされています。ほとんどのモーションキャプチャースタジオではこの範囲を十分に満たします。</p>
<p><strong>Q. カメラのフレームレートは高ければ高いほど良いですか？</strong></p>
<p>フレームレートが高いと高速な動きの追跡と低レイテンシーに有利ですが、データ処理量が増え、カメラの解像度が低下する可能性があります。一般的にVTuberライブやゲームモーションキャプチャーでは120〜240fpsで十分であり、スポーツ科学などの超高速動作分析では360fps以上を使用します。</p>
<p><strong>Q. マーカースワップはどのくらいの頻度で発生しますか？</strong></p>
<p>マーカーセットが適切に設計されていてカメラ台数が十分であれば、リアルタイム撮影中のスワップは稀にしか発生しません。ただし高速な動きやマーカー間の距離が近い動作（手を合わせるなど）では発生確率が上がり、このような区間は後処理で修正します。</p>
<p><strong>Q. 三角測量に2台で十分なのに、なぜ30台も設置するのですか？</strong></p>
<p>2台は理論的な最小値にすぎません。実際にはオクルージョン（マーカーの遮蔽）、カメラ角度による精度の差、冗長性の確保などを考慮する必要があります。30台を配置すればどのマーカーも常に多数のカメラから見えるため、安定的で正確なトラッキングが可能です。</p>
<p><strong>Q. キャリブレーションはどのくらいの頻度で行う必要がありますか？</strong></p>
<p>一般的に撮影日の開始前に1回実施します。ただし長時間撮影時には温度変化やカメラの微細な移動でキャリブレーションがずれる可能性があるため、4〜6時間の連続撮影時には途中で再キャリブレーションを推奨します。OptiTrack MotiveのContinuous Calibration機能を使用すれば、撮影中でもリアルタイムで補正が可能です。</p>
<p><strong>Q. 光沢のある服を着てはいけないのですか？</strong></p>
<p>モーションキャプチャーカメラは赤外線の反射を検出するため、光沢のある素材（金属装飾、スパンコール、光沢のある合成繊維など）は赤外線を反射して偽マーカー（Ghost Marker）を作る可能性があります。専用モーキャプスーツやマット素材の快適な服を着用するのが最善です。</p>
<hr>
<p>光学式モーションキャプチャーの技術的な構造についてさらにご質問がありましたら、<a href="/contact">お問い合わせページ</a>からお気軽にご質問ください。ミングルスタジオで直接体験されたい方は<a href="/services">サービス案内</a>をご覧ください。</p>
</div>
</div>
<div class="blog-post-footer">
<div class="container">
<a href="/ja/devlog" class="blog-back-btn"><i class="fas fa-arrow-left"></i> ← 一覧に戻る</a>
</div>
</div>
</article>
</main>
<div id="footer-placeholder"></div>
<script src="/js/i18n.js"></script>
<script src="/js/common.js"></script>
</body>
</html>

BIN
ja/devlog/optical-mocap-pipeline/images/calibration-tools.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 27 KiB

BIN
ja/devlog/optical-mocap-pipeline/images/continuous-calibration-web.mp4
View File

Binary file not shown.

BIN
ja/devlog/optical-mocap-pipeline/images/marker-labeling.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 895 KiB

BIN
ja/devlog/optical-mocap-pipeline/images/motive-2d-centroid.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 26 KiB

BIN
ja/devlog/optical-mocap-pipeline/images/poe-switch.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 350 KiB

BIN
ja/devlog/optical-mocap-pipeline/images/post-processing.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 730 KiB

BIN
ja/devlog/optical-mocap-pipeline/images/realtime-streaming.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.9 MiB

BIN
ja/devlog/optical-mocap-pipeline/images/rom-1.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 16 KiB

BIN
ja/devlog/optical-mocap-pipeline/images/rom-2.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 16 KiB

BIN
ja/devlog/optical-mocap-pipeline/images/rom-3.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 15 KiB

BIN
ja/devlog/optical-mocap-pipeline/images/rom-4.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 15 KiB

BIN
ja/devlog/optical-mocap-pipeline/images/rom-grid.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 60 KiB

BIN
ja/devlog/optical-mocap-pipeline/images/thumbnail.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 895 KiB

330
ja/gallery.html
View File

@ -1,330 +0,0 @@
<!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">
<!-- 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">
<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?v=20260313">
<link rel="stylesheet" href="/css/gallery.css">
<link rel="alternate" hreflang="ko" href="https://minglestudio.co.kr/gallery">
<link rel="alternate" hreflang="en" href="https://minglestudio.co.kr/en/gallery">
<link rel="alternate" hreflang="ja" href="https://minglestudio.co.kr/ja/gallery">
<link rel="alternate" hreflang="zh" href="https://minglestudio.co.kr/zh/gallery">
<link rel="alternate" hreflang="x-default" href="https://minglestudio.co.kr/gallery">
</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="/schedule" class="nav-link" data-i18n="header.nav.schedule">Schedule</a></li>
<li><a href="/devlog" class="nav-link" data-i18n="header.nav.devlog">DevLog</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> minglestudio@minglestudio.co.kr</a></li>
<li><a href="mailto:help@minglestudio.co.kr"><i class="fa-solid fa-envelope" aria-hidden="true"></i> help@minglestudio.co.kr</a></li>
<li><a href="https://discord.com/users/1402264505110495354" target="_blank"><i class="fa-brands fa-discord" aria-hidden="true"></i> minglestudio_mocap</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?v=20260313"></script>
<script src="/js/gallery.js"></script>
</body></html>

1025
ja/index.html
View File

File diff suppressed because it is too large Load Diff

735
ja/portfolio.html
View File

@ -1,735 +0,0 @@
<!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/portfolio">
<!-- Theme Color -->
<meta name="theme-color" content="#ff8800">
<!-- SEO 메타 태그 -->
<meta name="description" content="Mingle Studioのポートフォリオ - モーションキャプチャーで制作されたYouTubeコンテンツ、VTuber配信、ショート映像コレクション">
<meta name="keywords" content="모션캡쳐 포트폴리오, 버튜버 방송, YouTube 영상, 3D 모션, 실시간 스트리밍">
<meta name="author" content="밍글 스튜디오">
<!-- Open Graph -->
<meta property="og:title" content="ポートフォリオ - Mingle Studio">
<meta property="og:description" content="モーションキャプチャースタジオで制作されたミュージックビデオ、ショートフォーム、VTuber配信など多彩な映像コンテンツ。OptiTrackで高品質モーションキャプチャーサービスを提供">
<meta property="og:url" content="https://minglestudio.co.kr/portfolio">
<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="모션캡처 스튜디오에서 제작된 뮤직비디오, 숏폼, 버튜버 방송 등 다양한 영상 콘텐츠. 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">
<!-- 폰트 -->
<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">
<!-- CSS -->
<link rel="stylesheet" href="/css/common.css?v=20260313">
<link rel="stylesheet" href="/css/portfolio.css">
<!-- SOOP VOD 구조화 데이터 -->
<script type="application/ld+json">
[{
"@context": "https://schema.org",
"@type": "VideoObject",
"name": "250510 춤짱자매즈 모캡 합방 (w. 호발) | SOOP VOD",
"description": "밍글 스튜디오에서 진행된 춤짱자매즈 모션캡쳐 합방 방송",
"thumbnailUrl": "https://minglestudio.co.kr/images/logo/mingle-OG.png",
"uploadDate": "2025-05-10T00:00:00+09:00",
"embedUrl": "https://vod.sooplive.co.kr/player/159683673"
},
{
"@context": "https://schema.org",
"@type": "VideoObject",
"name": "[크로아] 링피트 치요X마늘 3D 모션캡쳐 합방 | SOOP VOD",
"description": "크로아 링피트 치요X마늘 3D 모션캡쳐 합방 방송",
"thumbnailUrl": "https://minglestudio.co.kr/images/logo/mingle-OG.png",
"uploadDate": "2025-09-01T00:00:00+09:00",
"embedUrl": "https://vod.sooplive.co.kr/player/169085307"
},
{
"@context": "https://schema.org",
"@type": "VideoObject",
"name": "[크로아] 크리스마스 치요X마늘 모션캡쳐 합방+커버곡 공개 | SOOP VOD",
"description": "크로아 크리스마스 치요X마늘 모션캡쳐 합방 및 커버곡 공개 방송",
"thumbnailUrl": "https://minglestudio.co.kr/images/logo/mingle-OG.png",
"uploadDate": "2025-12-25T00:00:00+09:00",
"embedUrl": "https://vod.sooplive.co.kr/player/181746237"
},
{
"@context": "https://schema.org",
"@type": "VideoObject",
"name": "뉴걸의 첫 모캡방송! 춤 못 추면 댄스 방송 하면 안 되나요? | SOOP VOD",
"description": "뉴걸의 첫 모션캡쳐 댄스 방송",
"thumbnailUrl": "https://minglestudio.co.kr/images/logo/mingle-OG.png",
"uploadDate": "2025-05-01T00:00:00+09:00",
"embedUrl": "https://vod.sooplive.co.kr/player/159299033"
},
{
"@context": "https://schema.org",
"@type": "VideoObject",
"name": "첫 모캡 방송! | SOOP VOD",
"description": "미르의 첫 모션캡쳐 방송",
"thumbnailUrl": "https://minglestudio.co.kr/images/logo/mingle-OG.png",
"uploadDate": "2025-05-01T00:00:00+09:00",
"embedUrl": "https://vod.sooplive.co.kr/player/159808721"
},
{
"@context": "https://schema.org",
"@type": "VideoObject",
"name": "크로아) 치요 X 마늘 3D 모션 캡쳐 합방 | SOOP VOD",
"description": "치요X마늘 3D 모션캡쳐 합방 방송",
"thumbnailUrl": "https://minglestudio.co.kr/images/logo/mingle-OG.png",
"uploadDate": "2025-05-01T00:00:00+09:00",
"embedUrl": "https://vod.sooplive.co.kr/player/159205533"
}]
</script>
<link rel="alternate" hreflang="ko" href="https://minglestudio.co.kr/portfolio">
<link rel="alternate" hreflang="en" href="https://minglestudio.co.kr/en/portfolio">
<link rel="alternate" hreflang="ja" href="https://minglestudio.co.kr/ja/portfolio">
<link rel="alternate" hreflang="zh" href="https://minglestudio.co.kr/zh/portfolio">
<link rel="alternate" hreflang="x-default" href="https://minglestudio.co.kr/portfolio">
</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="/schedule" class="nav-link" data-i18n="header.nav.schedule">Schedule</a></li>
<li><a href="/devlog" class="nav-link" data-i18n="header.nav.devlog">DevLog</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="portfolio.pageHeader.title">Portfolio</h1>
<p data-i18n="portfolio.pageHeader.desc">Mingle Studioで制作・協業したモーションキャプチャーコンテンツ</p>
</div>
</section>
<!-- YouTube 채널 링크 -->
<section class="section">
<div class="container">
<div class="youtube-channel-card">
<div class="channel-info">
<div class="channel-icon">📺</div>
<div class="channel-details">
<h2 data-i18n="portfolio.channel.title">Mingle Studio公式チャンネル</h2>
<p data-i18n="portfolio.channel.desc">最新のモーションキャプチャーコンテンツと制作過程をYouTubeでご確認ください</p>
</div>
</div>
<a href="https://www.youtube.com/@minglestudio_mocap" target="_blank" class="btn btn-primary" data-i18n="portfolio.channel.btn">YouTubeチャンネルを訪問する</a>
</div>
</div>
</section>
<!-- 포트폴리오 탭 네비게이션 -->
<section class="section">
<div class="container">
<div class="portfolio-tabs">
<div class="tab-buttons" role="tablist" aria-label="포트폴리오 카테고리">
<button class="tab-btn active" id="tab-individual" data-tab="individual" role="tab" aria-selected="true" aria-controls="individual" data-i18n="portfolio.tabs.individual">個人クリエイター</button>
<button class="tab-btn" id="tab-corporate" data-tab="corporate" role="tab" aria-selected="false" aria-controls="corporate" data-i18n="portfolio.tabs.corporate">企業プロジェクト</button>
</div>
</div>
</div>
</section>
<!-- 개인 크리에이터 포트폴리오 -->
<div class="tab-content active" id="individual" role="tabpanel" aria-labelledby="tab-individual">
<!-- Long-Form 콘텐츠 - 개인 -->
<section class="section bg-light">
<div class="container">
<div class="section-header">
<h2 data-i18n="portfolio.longform.title">ロングフォームコンテンツ</h2>
<p data-i18n="portfolio.longform.desc">個人クリエイターのモーションキャプチャープロジェクト</p>
</div>
<div class="video-grid longform-grid">
<div class="video-card featured">
<div class="video-wrapper">
<iframe data-src="https://www.youtube.com/embed/jQTi8adbvaM" title="밍글 스튜디오 모션캡쳐 포트폴리오" allowfullscreen="" loading="lazy"></iframe>
</div>
<div class="video-info">
<h3>머쉬베놈 (MUSHVENOM) - 돌림판 (feat. 신빠람 이박사) 🍓 CROA COVER</h3>
<p>CROA가 커버한 머쉬베놈의 돌림판</p>
<div class="video-tags">
<span class="tag">커버</span>
<span class="tag">CROA</span>
<span class="tag">머쉬베놈</span>
</div>
</div>
</div>
<div class="video-card">
<div class="video-wrapper">
<iframe data-src="https://www.youtube.com/embed/FecqTyUU6y0" title="밍글 스튜디오 모션캡쳐 콘텐츠 2" allowfullscreen="" loading="lazy"></iframe>
</div>
<div class="video-info">
<h3>「 QWER - 가짜아이돌 (FAKE IDOL) 」 COVER BY VENY 【CROA】</h3>
<p>VENY가 커버한 QWER의 가짜아이돌</p>
<div class="video-tags">
<span class="tag">커버</span>
<span class="tag">CROA</span>
<span class="tag">VENY</span>
</div>
</div>
</div>
<div class="video-card">
<div class="video-wrapper">
<iframe data-src="https://www.youtube.com/embed/ryliwrc0Yms" title="밍글 스튜디오 모션캡쳐 콘텐츠 3" allowfullscreen="" loading="lazy"></iframe>
</div>
<div class="video-info">
<h3>aesoopa 에숲파 'Black Mamba' MV</h3>
<p>에숲파의 Black Mamba 뮤직비디오</p>
<div class="video-tags">
<span class="tag">MV</span>
<span class="tag">에숲파</span>
<span class="tag">Black Mamba</span>
</div>
</div>
</div>
<div class="video-card">
<div class="video-wrapper">
<iframe data-src="https://www.youtube.com/embed/nH7IdgqhugQ" title="QWER 내 이름 맑음 CROA 커버" allowfullscreen="" loading="lazy"></iframe>
</div>
<div class="video-info">
<h3>【CROA】 QWER - 내 이름 맑음 (feat.치치) 🍓 CROA COVER</h3>
<p>CROA가 커버한 QWER의 내 이름 맑음</p>
<div class="video-tags">
<span class="tag">커버</span>
<span class="tag">CROA</span>
<span class="tag">QWER</span>
</div>
</div>
</div>
<div class="video-card">
<div class="video-wrapper">
<iframe data-src="https://www.youtube.com/embed/YO7-z_JxSjY" title="첫사랑 (백아) | 치요 cover" allowfullscreen="" loading="lazy"></iframe>
</div>
<div class="video-info">
<h3>첫사랑 (백아) | 치요 cover</h3>
<p>치요가 커버한 백아의 첫사랑</p>
<div class="video-tags">
<span class="tag">치요</span>
<span class="tag">cover</span>
<span class="tag">크로아</span>
</div>
</div>
</div>
<div class="video-card">
<div class="video-wrapper">
<iframe data-src="https://www.youtube.com/embed/hRBup9lEyiY" title="Merry &amp; Happy (트와이스) | 치요 x 마늘 Cover" allowfullscreen="" loading="lazy"></iframe>
</div>
<div class="video-info">
<h3>Merry &amp; Happy (트와이스) | 치요 x 마늘 Cover</h3>
<p>치요&amp;마늘이 커버한 트와이스의 Merry &amp; Happy</p>
<div class="video-tags">
<span class="tag">치요</span>
<span class="tag">마늘</span>
<span class="tag">트와이스</span>
<span class="tag">크리스마스</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Shorts 콘텐츠 -->
<section class="section">
<div class="container">
<div class="section-header">
<h2 data-i18n="portfolio.shorts.title">ショートコンテンツ</h2>
<p data-i18n="portfolio.shorts.desc">短くインパクトのあるモーションキャプチャーの瞬間</p>
</div>
<div class="video-grid shorts-grid">
<div class="video-card shorts">
<div class="video-wrapper shorts-wrapper">
<iframe data-src="https://www.youtube.com/embed/OmpqKhMrb-U" title="모션캡쳐 Shorts 1" allowfullscreen="" loading="lazy"></iframe>
</div>
<div class="video-info">
<h4>스ㅡㅡㅡㅡㅡㅡㅡ게 💕STARGAZERS CHALLENGE</h4>
</div>
</div>
<div class="video-card shorts">
<div class="video-wrapper shorts-wrapper">
<iframe data-src="https://www.youtube.com/embed/hKwGjPfULFI" title="모션캡쳐 Shorts 2" allowfullscreen="" loading="lazy"></iframe>
</div>
<div class="video-info">
<h4>🤎 곰이의 이세계 아이돌 - ELEVATE 챌린지 🤎</h4>
</div>
</div>
<div class="video-card shorts">
<div class="video-wrapper shorts-wrapper">
<iframe data-src="https://www.youtube.com/embed/_blWj7UQtRc" title="모션캡쳐 Shorts 3" allowfullscreen="" loading="lazy"></iframe>
</div>
<div class="video-info">
<h4>Memory 깡담비 #하이라이트 #shorts</h4>
</div>
</div>
<div class="video-card shorts">
<div class="video-wrapper shorts-wrapper">
<iframe data-src="https://www.youtube.com/embed/ZWftEFNlvVc" title="일본 유행 챌린지 Shorts" allowfullscreen="" loading="lazy"></iframe>
</div>
<div class="video-info">
<h4>🍓요즘 일본에서 유행하는 챌린지 #vtuber #shorts</h4>
</div>
</div>
<div class="video-card shorts">
<div class="video-wrapper shorts-wrapper">
<iframe data-src="https://www.youtube.com/embed/xZS1e465wjc" title="Trouble 챌린지 Shorts" allowfullscreen="" loading="lazy"></iframe>
</div>
<div class="video-info">
<h4>🍓trouble 챌린지 #trouble #challenge</h4>
</div>
</div>
<div class="video-card shorts">
<div class="video-wrapper shorts-wrapper">
<iframe data-src="https://www.youtube.com/embed/X3a_4GWU3V8" title="그르르 챌린지 Shorts" allowfullscreen="" loading="lazy"></iframe>
</div>
<div class="video-info">
<h4>🍓그르르 챌린지 grrr#shorts</h4>
</div>
</div>
<div class="video-card shorts">
<div class="video-wrapper shorts-wrapper">
<iframe data-src="https://www.youtube.com/embed/6tsYJ0z2q4s" title="뽀로로도 놀란 귀여움 바라밤챌린지" allowfullscreen="" loading="lazy"></iframe>
</div>
<div class="video-info">
<h4>뽀로로도 놀란 귀여움💙 #바라밤챌린지 #바라밤 #쿠아와친구들</h4>
</div>
</div>
</div>
</div>
</section>
<!-- 실시간 방송 예시 -->
<section class="section bg-gradient">
<div class="container">
<div class="section-header">
<h2 data-i18n="portfolio.broadcast.title">リアルタイム配信事例</h2>
<p data-i18n="portfolio.broadcast.desc">VTuberとストリーマーによるリアルタイムモーションキャプチャー配信</p>
</div>
<div class="broadcast-notice">
<div class="notice-icon"><i class="fa-solid fa-circle" aria-hidden="true" style="color: #ef4444;"></i></div>
<div class="notice-content">
<h3 data-i18n="portfolio.broadcast.noticeTitle">リアルタイムモーションキャプチャー配信</h3>
<p data-i18n="portfolio.broadcast.noticeDesc">Mingle Studioで行われるリアルタイムモーションキャプチャー配信を通じて、高品質バーチャルコンテンツを体験してください</p>
</div>
</div>
<div class="video-grid broadcast-grid">
<div class="video-card broadcast">
<div class="video-wrapper">
<iframe src="https://vod.sooplive.co.kr/player/159808721" title="미르 첫 모캡 방송" allowfullscreen=""></iframe>
</div>
<div class="video-info">
<h4>미르 첫 모캡 방송</h4>
<div class="broadcast-info">
<span class="platform">SOOP</span>
<span class="streamer">미르</span>
</div>
</div>
</div>
<div class="video-card broadcast">
<div class="video-wrapper">
<iframe src="https://vod.sooplive.co.kr/player/159683673" title="춤짱자매즈 모캡 합방" allowfullscreen=""></iframe>
</div>
<div class="video-info">
<h4>춤짱자매즈 모캡 합방 (w. 호발)</h4>
<div class="broadcast-info">
<span class="platform">SOOP</span>
<span class="streamer">흰콕 &amp; 호발</span>
</div>
</div>
</div>
<div class="video-card broadcast">
<div class="video-wrapper">
<iframe src="https://vod.sooplive.co.kr/player/159205533" title="치요 X 마늘 3D 모션캡쳐 합방" allowfullscreen=""></iframe>
</div>
<div class="video-info">
<h4>치요 X 마늘 3D 모션캡쳐 합방</h4>
<div class="broadcast-info">
<span class="platform">SOOP</span>
<span class="streamer">치요 &amp; 마늘</span>
</div>
</div>
</div>
<div class="video-card broadcast">
<div class="video-wrapper">
<iframe src="https://vod.sooplive.co.kr/player/159299033" title="뉴걸의 첫 모캡방송" allowfullscreen=""></iframe>
</div>
<div class="video-info">
<h4>뉴걸의 첫 모캡방송!</h4>
<p class="video-desc">춤 못 추면 댄스방송 하면 안 되나요?</p>
<div class="broadcast-info">
<span class="platform">SOOP</span>
<span class="streamer">뉴걸</span>
</div>
</div>
</div>
<div class="video-card broadcast">
<div class="video-wrapper">
<iframe src="https://vod.sooplive.co.kr/player/169085307" title="크로아 링피트 치요X마늘 3D 모션캡쳐 합방" allowfullscreen=""></iframe>
</div>
<div class="video-info">
<h4>[크로아] 링피트 치요X마늘 3D 모션캡쳐 합방</h4>
<div class="broadcast-info">
<span class="platform">SOOP</span>
<span class="streamer">치요 &amp; 마늘</span>
</div>
</div>
</div>
<div class="video-card broadcast">
<div class="video-wrapper">
<iframe src="https://vod.sooplive.co.kr/player/181746237" title="크로아 크리스마스 치요X마늘 모션캡쳐 합방+커버곡 공개" allowfullscreen=""></iframe>
</div>
<div class="video-info">
<h4>[크로아] 크리스마스 치요X마늘 모션캡쳐 합방+커버곡 공개</h4>
<div class="broadcast-info">
<span class="platform">SOOP</span>
<span class="streamer">치요 &amp; 마늘</span>
</div>
</div>
</div>
</div>
</div>
</section></div>
<!-- 개인 크리에이터 포트폴리오 끝 -->
<!-- 기업 프로젝트 포트폴리오 -->
<div class="tab-content" id="corporate" role="tabpanel" aria-labelledby="tab-corporate">
<section class="section bg-light">
<div class="container">
<div class="section-header">
<h2 data-i18n="portfolio.corporate.title">企業プロジェクト</h2>
<p data-i18n="portfolio.corporate.desc">企業および商業モーションキャプチャープロジェクト</p>
</div>
<!-- IXIA 기업 프로젝트 -->
<div class="corporate-project-showcase">
<div class="project-header">
<div class="project-logo">
<h3>아이시아(IXIA)</h3>
<p data-i18n="portfolio.corporate.ixiaDesc">バーチャルアイドルグループのモーションキャプチャー制作</p>
</div>
<div class="project-tags">
<span class="tag corporate">기업 프로젝트</span>
<span class="tag">버추얼 아이돌</span>
<span class="tag">엔터테인먼트</span>
</div>
</div>
<!-- Long-Form 콘텐츠 -->
<div class="project-section">
<h4 data-i18n="portfolio.corporate.mvSection">ミュージックビデオ制作</h4>
<div class="video-grid corporate-longform">
<div class="video-card featured">
<div class="video-wrapper">
<iframe data-src="https://www.youtube.com/embed/OUdsyxPzS14" title="아이시아(IXIA) '꼭꼭 숨어라' Part.2 MV (Performance ver.)" allowfullscreen="" loading="lazy"></iframe>
</div>
<div class="video-info">
<h3>아이시아(IXIA) '꼭꼭 숨어라' Part.2 MV (Performance ver.)</h3>
<p>아이시아의 꼭꼭 숨어라 뮤직비디오 퍼포먼스 버전</p>
<div class="video-tags">
<span class="tag">뮤직비디오</span>
<span class="tag">퍼포먼스</span>
<span class="tag">IXIA</span>
</div>
</div>
</div>
</div>
</div>
<!-- Shorts 콘텐츠 -->
<div class="project-section">
<h4 data-i18n="portfolio.corporate.shortsSection">ショートフォームビデオ制作</h4>
<div class="video-grid corporate-shorts">
<div class="video-card shorts">
<div class="video-wrapper shorts-wrapper">
<iframe data-src="https://www.youtube.com/embed/C_EwalifDGk" title="꼭꼭 숨어라 릴레이 댄스 - 아이시아랑 숨바꼭질 할 사람" allowfullscreen="" loading="lazy"></iframe>
</div>
<div class="video-info">
<h4>✨꼭꼭 숨어라 릴레이 댄스✨</h4>
<p>아이시아랑 숨바꼭질 할 사람 🙋‍♀️🙋‍♀️</p>
</div>
</div>
<div class="video-card shorts">
<div class="video-wrapper shorts-wrapper">
<iframe data-src="https://www.youtube.com/embed/yZPuVDplajo" title="루화가 제일 싫어하는 말은❓착하다는 말… 제일 싫어 💢💢" allowfullscreen="" loading="lazy"></iframe>
</div>
<div class="video-info">
<h4>루화가 제일 싫어하는 말은❓</h4>
<p>착하다는 말... 제일 싫어 💢💢</p>
</div>
</div>
</div>
</div>
<!-- 라이브 방송 -->
<div class="project-section">
<h4 data-i18n="portfolio.corporate.liveSection">ライブ配信</h4>
<div class="video-grid corporate-live">
<div class="video-card broadcast">
<div class="video-wrapper">
<iframe data-src="https://www.youtube.com/embed/KNABwaYmuA8" title="IXIA Debut Live Showcase | 아이시아 데뷔 쇼케이스: TIME TO SAY IXIA" allowfullscreen="" loading="lazy"></iframe>
</div>
<div class="video-info">
<h4>✨IXIA 데뷔 라이브 쇼케이스✨</h4>
<p class="video-desc">아이시아 데뷔 쇼케이스: TIME TO SAY IXIA</p>
<div class="broadcast-info">
<span class="platform">YouTube</span>
<span class="streamer">아이시아</span>
</div>
</div>
</div>
<div class="video-card broadcast">
<div class="video-wrapper">
<iframe data-src="https://www.youtube.com/embed/FXnH-43NpFM?start=1725" title="아이시아의 라이브룸 💖 플레이리스트 대공개" allowfullscreen="" loading="lazy"></iframe>
</div>
<div class="video-info">
<h4>🎤 아이시아의 라이브룸</h4>
<p class="video-desc">플레이리스트 대공개 라이브 방송</p>
<div class="broadcast-info">
<span class="platform">YouTube</span>
<span class="streamer">아이시아</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<!-- 기업 프로젝트 포트폴리오 끝 -->
<!-- CTA -->
<section class="cta-section">
<div class="container text-center">
<h2 data-i18n="portfolio.cta.title">あなたのコンテンツもここに</h2>
<p data-i18n="portfolio.cta.desc">Mingle Studioと共に次のポートフォリオの主人公になりましょう</p>
<div class="cta-buttons">
<a href="/ja/contact" class="btn btn-primary btn-lg" data-i18n="portfolio.cta.btnInquiry">プロジェクトのお問い合わせ</a>
<a href="/ja/services" class="btn btn-outline btn-lg" data-i18n="portfolio.cta.btnServices">サービスを見る</a>
</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> minglestudio@minglestudio.co.kr</a></li>
<li><a href="mailto:help@minglestudio.co.kr"><i class="fa-solid fa-envelope" aria-hidden="true"></i> help@minglestudio.co.kr</a></li>
<li><a href="https://discord.com/users/1402264505110495354" target="_blank"><i class="fa-brands fa-discord" aria-hidden="true"></i> minglestudio_mocap</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?v=20260313"></script>
<script src="/js/portfolio.js"></script>
</body></html>

252
ja/props.html
View File

@ -1,252 +0,0 @@
<!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>props.meta.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">
<!-- Theme Color -->
<meta name="theme-color" content="#ff8800">
<!-- SEO -->
<meta name="description" content="props.meta.description">
<meta name="robots" content="noindex, nofollow">
<!-- 폰트 -->
<link href="https://hangeul.pstatic.net/hangeul_static/css/nanum-square.css" rel="stylesheet">
<!-- CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" integrity="sha512-Avb2QiuDEEvB4bZJYdft2mNjVShBftLGPg8YJ04IY4YZ7C7BC9XkjsTBdQ1B8TAVxT2BOxqIRkVvNs/FNRs0w==" crossorigin="anonymous" referrerpolicy="no-referrer">
<link rel="stylesheet" href="/css/common.css?v=20260313">
<link rel="stylesheet" href="/css/props.css">
<link rel="alternate" hreflang="ko" href="https://minglestudio.co.kr/props">
<link rel="alternate" hreflang="en" href="https://minglestudio.co.kr/en/props">
<link rel="alternate" hreflang="ja" href="https://minglestudio.co.kr/ja/props">
<link rel="alternate" hreflang="zh" href="https://minglestudio.co.kr/zh/props">
<link rel="alternate" hreflang="x-default" href="https://minglestudio.co.kr/props">
</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) -->
<!-- 헤더 -->
<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="/schedule" class="nav-link" data-i18n="header.nav.schedule">Schedule</a></li>
<li><a href="/devlog" class="nav-link" data-i18n="header.nav.devlog">DevLog</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 class="props-page">
<div class="container">
<!-- 페이지 헤더 -->
<div class="page-header">
<h1>프랍 라이브러리</h1>
<p class="page-description">모션캡처 라이브 방송 서비스에서 사용 가능한 프랍(소품) 목록입니다</p>
<div class="last-updated" id="lastUpdated"></div>
</div>
<!-- 필터 & 검색 -->
<div class="filter-section">
<div class="search-box">
<input type="text" id="searchInput" placeholder="프랍 이름으로 검색..." class="search-input">
<span class="search-icon"><i class="fa-solid fa-magnifying-glass" aria-hidden="true"></i></span>
</div>
<div class="view-options">
<button class="view-btn active" data-view="grid" title="그리드 보기">
<span>▦</span>
</button>
<button class="view-btn" data-view="list" title="리스트 보기">
<span>☰</span>
</button>
</div>
</div>
<!-- 통계 -->
<div class="stats-bar">
<span class="stat-item">
<strong id="totalCount">0</strong>개 프랍
</span>
<span class="stat-item">
<strong id="filteredCount">0</strong>개 표시 중
</span>
</div>
<!-- 프랍 그리드 -->
<div class="props-grid" id="propsGrid">
<!-- 프랍 카드들이 동적으로 추가됨 -->
<div class="loading-placeholder">
<div class="loading-spinner"></div>
<p>프랍 데이터를 불러오는 중...</p>
</div>
</div>
<!-- 데이터 없음 메시지 -->
<div class="no-data" id="noData" style="display: none;">
<div class="no-data-icon"><i class="fa-solid fa-box-open" aria-hidden="true"></i></div>
<h3>프랍 데이터가 없습니다</h3>
<p>Unity에서 프랍 데이터를 업로드해 주세요.</p>
</div>
<!-- 검색 결과 없음 -->
<div class="no-results" id="noResults" style="display: none;">
<div class="no-results-icon"><i class="fa-solid fa-magnifying-glass" aria-hidden="true"></i></div>
<h3>검색 결과가 없습니다</h3>
<p>다른 검색어를 시도해 보세요.</p>
</div>
</div>
</main>
<!-- 이미지 모달 -->
<div class="image-modal" id="imageModal">
<div class="modal-overlay"></div>
<div class="modal-content">
<button class="modal-close" aria-label="닫기">×</button>
<img src="" alt="" class="modal-image" id="modalImage">
<div class="modal-info">
<h3 id="modalTitle"></h3>
<div class="modal-details" id="modalDetails"></div>
</div>
</div>
</div>
<!-- 푸터 -->
<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>
<!-- 백업 푸터 -->
<footer class="site-footer">
<div class="container">
<div style="color:#bbb;font-size:0.98rem;">© 2025 밍글 스튜디오. All rights reserved.</div>
</div>
</footer>
<!-- JavaScript -->
<script src="/js/common.js?v=20260313"></script>
<script src="/js/props.js"></script>
</body></html>

533
ja/qna.html
View File

@ -1,533 +0,0 @@
<!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/qna">
<!-- Theme Color -->
<meta name="theme-color" content="#ff8800">
<!-- SEO 메타 태그 -->
<meta name="description" content="Mingle StudioFAQ - モーションキャプチャースタジオレンタル、撮影、制作に関するよくある質問と回答">
<meta name="keywords" content="모션캡쳐 FAQ, 스튜디오 대관 질문, 촬영 문의, 버튜버 제작 FAQ">
<meta name="author" content="밍글 스튜디오">
<!-- Open Graph -->
<meta property="og:title" content="よくある質問 - Mingle Studio">
<meta property="og:description" content="モーションキャプチャースタジオレンタル、撮影、料金、予約に関するよくある質問と回答。OptiTrackシステム利用ガイド">
<meta property="og:url" content="https://minglestudio.co.kr/qna">
<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="모션캡처 스튜디오 대관, 촬영, 요금, 예약 등에 관한 자주 묻는 질문과 답변. 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">
<!-- 폰트 -->
<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?v=20260313">
<link rel="stylesheet" href="/css/qna.css">
<link rel="alternate" hreflang="ko" href="https://minglestudio.co.kr/qna">
<link rel="alternate" hreflang="en" href="https://minglestudio.co.kr/en/qna">
<link rel="alternate" hreflang="ja" href="https://minglestudio.co.kr/ja/qna">
<link rel="alternate" hreflang="zh" href="https://minglestudio.co.kr/zh/qna">
<link rel="alternate" hreflang="x-default" href="https://minglestudio.co.kr/qna">
</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="/schedule" class="nav-link" data-i18n="header.nav.schedule">Schedule</a></li>
<li><a href="/devlog" class="nav-link" data-i18n="header.nav.devlog">DevLog</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="qna.pageHeader.title">よくある質問</h1>
<p data-i18n="qna.pageHeader.desc">Mingle Studioのご利用に関するよくある質問をご確認ください</p>
</div>
</section>
<!-- FAQ 검색 -->
<section class="section">
<div class="container">
<div class="faq-search">
<div class="search-box">
<label for="faqSearch" class="sr-only">FAQ 검색</label>
<input type="text" id="faqSearch" placeholder="気になる内容を検索してください..." data-i18n-placeholder="qna.search.placeholder" autocomplete="off">
<button type="button" class="search-btn" aria-label="検索" data-i18n-aria="qna.search.btnLabel"><i class="fa-solid fa-magnifying-glass" aria-hidden="true"></i></button>
</div>
<div class="search-suggestions" id="searchSuggestions"></div>
</div>
</div>
</section>
<!-- FAQ 카테고리 -->
<section class="faq-category-section bg-light">
<div class="container">
<div class="faq-categories">
<button class="category-btn active" data-category="all" data-i18n="qna.categories.all">全て</button>
<button class="category-btn" data-category="booking" data-i18n="qna.categories.booking">予約/レンタル</button>
<button class="category-btn" data-category="equipment" data-i18n="qna.categories.equipment">機材/技術</button>
<button class="category-btn" data-category="pricing" data-i18n="qna.categories.pricing">料金/お支払い</button>
<button class="category-btn" data-category="production" data-i18n="qna.categories.production">制作/撮影</button>
<button class="category-btn" data-category="streaming" data-i18n="qna.categories.streaming">ストリーミング</button>
<button class="category-btn" data-category="etc" data-i18n="qna.categories.etc">その他</button>
</div>
</div>
</section>
<!-- FAQ 리스트 -->
<section class="section">
<div class="container">
<div class="faq-list">
<!-- 예약/대관 관련 -->
<div class="faq-item" data-category="booking">
<div class="faq-question">
<h3 data-i18n="qna.faq.q1">スタジオレンタルはどのように予約しますか？</h3>
<span class="faq-toggle">+</span>
</div>
<div class="faq-answer" data-i18n-html="qna.faq.a1"><p>以下の方法でご予約いただけます：</p>
<ul>
<li><strong><i class="fa-solid fa-envelope" aria-hidden="true"></i> メール：</strong> <a href="mailto:help@minglestudio.co.kr?subject=[スタジオ予約お問い合わせ] Mingle Studio&amp;body=こんにちは。Mingle Studioのレンタル予約についてお問い合わせいたします。%0A%0A■ 基本情報%0A- ご利用予定日：（例：2024年12月25日）%0A- ご利用時間：（例：午後2時〜4時、2時間）%0A- 参加人数：名%0A- ご連絡先：%0A- メール：%0A%0A■ 撮影情報%0A- 撮影目的：（例：VTuber配信、ゲーム制作、映像コンテンツなど）%0A- 撮影予定内容：%0A- 必要な機材：（全身モーションキャプチャー/フェイシャルキャプチャー/その他）%0A%0A■ 追加リクエスト%0A- 特別なご要望：%0A- ご質問：%0A%0A■ 参考情報%0A- 最小レンタル：2時間（$165、税込み）%0A- 延長：1時間あたり$83%0A- お支払い方法：銀行振込または現金（カード決済不可）%0A- 現金領収書/税金計算書発行可能%0A%0A早急にご返答いたします。%0Aよろしくお願いいたします。">help@minglestudio.co.kr</a></li>
<li><strong><i class="fa-solid fa-phone" aria-hidden="true"></i> お電話：</strong> 010-9288-9190</li>
</ul>
<div style="margin-top: var(--spacing-md); text-align: center;">
<button id="showEmailFormFAQ" class="btn btn-primary" style="font-size: 0.9rem; padding: 0.5rem 1rem;"><i class="fa-solid fa-envelope" aria-hidden="true"></i> メールでお問い合わせ</button>
</div>
<div id="emailFormFAQ" class="email-form" style="display:none; margin-top: var(--spacing-lg); padding: var(--spacing-lg); border: 1px solid #ddd; border-radius: var(--border-radius); background: #f9f9f9;">
<h4>メールお問い合わせフォーム</h4>
<p>以下のフォームをコピーしてメールでお問い合わせください：</p>
<div class="email-template" style="background: white; padding: var(--spacing-md); border-radius: var(--border-radius); font-family: monospace; font-size: 0.9rem; line-height: 1.6;">
<div><strong>件名：</strong> [スタジオレンタルお問い合わせ]</div>
<div><strong>宛先：</strong> help@minglestudio.co.kr</div>
<br>
<div><strong>1. お名前と所属</strong></div>
<div style="color: #666; font-size: 0.85rem;">（個人の場合はお名前のみ、企業の場合はご利用者のお名前と所属をご記入ください）</div>
<div style="margin: 0.5rem 0; padding: 0.5rem; background: #f0f0f0; border-radius: 4px;">[こちらにご記入ください]</div>
<div><strong>2. ご連絡先</strong></div>
<div style="color: #666; font-size: 0.85rem;">（電話番号、メール、Discordのいずれか）</div>
<div style="margin: 0.5rem 0; padding: 0.5rem; background: #f0f0f0; border-radius: 4px;">[こちらにご記入ください]</div>
<div><strong>3. ご利用人数</strong></div>
<div style="color: #666; font-size: 0.85rem;">（1〜2名推奨、最大5名まで可能）</div>
<div style="margin: 0.5rem 0; padding: 0.5rem; background: #f0f0f0; border-radius: 4px;">□ 1名 □ 2名 □ 3名 □ 4名 □ 5名</div>
<div><strong>4. スタジオ使用目的</strong></div>
<div style="margin: 0.5rem 0; padding: 0.5rem; background: #f0f0f0; border-radius: 4px;">□ 録画 □ その他：[こちらにご記入ください]</div>
<div><strong>5. ご希望レンタル日</strong></div>
<div style="color: #666; font-size: 0.85rem;">※ 最低2週間前のご予約を推奨します</div>
<div style="margin: 0.5rem 0; padding: 0.5rem; background: #f0f0f0; border-radius: 4px;">[こちらにご記入ください]</div>
<div><strong>6. ご希望利用時間</strong></div>
<div style="color: #666; font-size: 0.85rem;">※ 回答例）午前10時〜午後3時（5時間）</div>
<div style="color: #666; font-size: 0.85rem;">※ 深夜レンタル（夜10時〜翌朝8時）は内部規定による特別料金が適用されます</div>
<div style="margin: 0.5rem 0; padding: 0.5rem; background: #f0f0f0; border-radius: 4px;">[こちらにご記入ください]</div>
</div>
<div style="margin-top: var(--spacing-md); text-align: center;">
<a href="mailto:help@minglestudio.co.kr?subject=[スタジオレンタルお問い合わせ]" class="btn btn-primary"><i class="fa-solid fa-envelope" aria-hidden="true"></i> メールを送る</a>
</div>
</div>
<p>最低2週間前にご連絡いただければスムーズに準備が可能です。</p></div>
</div>
<div class="faq-item" data-category="booking">
<div class="faq-question">
<h3 data-i18n="qna.faq.q2">予約金制度と返金規定はありますか？</h3>
<span class="faq-toggle">+</span>
</div>
<div class="faq-answer" data-i18n-html="qna.faq.a2"><p>以下が返金規定です：</p>
<div class="policy-table">
<div class="policy-row">
<span class="policy-time">予約日の7日前</span>
<span class="policy-desc">100% 返金</span>
</div>
<div class="policy-row">
<span class="policy-time">予約日の3日前</span>
<span class="policy-desc">70% 返金</span>
</div>
<div class="policy-row">
<span class="policy-time">予約日の1日前</span>
<span class="policy-desc">50% 返金</span>
</div>
<div class="policy-row">
<span class="policy-time">当日キャンセル</span>
<span class="policy-desc">返金不可</span>
</div>
</div></div>
</div>
<div class="faq-item" data-category="booking">
<div class="faq-question">
<h3 data-i18n="qna.faq.q3">最小レンタル時間はどのくらいですか？</h3>
<span class="faq-toggle">+</span>
</div>
<div class="faq-answer" data-i18n-html="qna.faq.a3"><p>最小レンタルは<strong>2時間</strong>からとなります。</p>
<p>延長は1時間単位で可能です。</p></div>
</div>
<div class="faq-item" data-category="booking">
<div class="faq-question">
<h3 data-i18n="qna.faq.q4">レンタルはどのくらい前に予約する必要がありますか？</h3>
<span class="faq-toggle">+</span>
</div>
<div class="faq-answer" data-i18n-html="qna.faq.a4"><p>最低2週間前にご連絡いただければスムーズに準備が可能です。</p></div>
</div>
<div class="faq-item" data-category="pricing">
<div class="faq-question">
<h3 data-i18n="qna.faq.q5">現地でのお支払いは可能ですか？</h3>
<span class="faq-toggle">+</span>
</div>
<div class="faq-answer" data-i18n-html="qna.faq.a5"><p>現地では現金またはお振込みでのお支払いが可能です。</p>
<p>カード決済は現地ではご利用いただけませんのでご了承ください。</p>
<p>現金領収書および税金計算書の発行が可能です。</p></div>
</div>
<div class="faq-item" data-category="pricing">
<div class="faq-question">
<h3 data-i18n="qna.faq.q6">税金計算書の発行は可能ですか？</h3>
<span class="faq-toggle">+</span>
</div>
<div class="faq-answer" data-i18n-html="qna.faq.a6"><p>はい、発行可能です。</p></div>
</div>
<!-- 장비/기술 관련 -->
<div class="faq-item" data-category="equipment">
<div class="faq-question">
<h3 data-i18n="qna.faq.q7">どのようなモーションキャプチャー機材を使用していますか？</h3>
<span class="faq-toggle">+</span>
</div>
<div class="faq-answer" data-i18n-html="qna.faq.a7"><p>Mingle Studioは以下の専門機材を保有しています：</p>
<ul>
<li><strong>OptiTrack カメラ：</strong> 30台</li>
<li><strong>ハンドトラッキング：</strong> Rokokoスマートグローブ使用中</li>
</ul></div>
</div>
<div class="faq-item" data-category="equipment">
<div class="faq-question">
<h3 data-i18n="qna.faq.q8">モーションキャプチャースーツは提供されますか？</h3>
<span class="faq-toggle">+</span>
</div>
<div class="faq-answer" data-i18n-html="qna.faq.a8"><p>はい、専門のモーションキャプチャースーツとマーカーを無料で提供しています。</p>
<ul>
<li>各種サイズ（S、M、L、XL）を用意</li>
<li>衛生的な管理で清潔な状態を維持</li>
<li>個人のスーツの持ち込みも可能</li>
<li>グローブ、ヘッドバンドなどの付属品を含む</li>
</ul></div>
</div>
<div class="faq-item" data-category="equipment">
<div class="faq-question">
<h3 data-i18n="qna.faq.q9">何名まで同時にモーションキャプチャーが可能ですか？</h3>
<span class="faq-toggle">+</span>
</div>
<div class="faq-answer" data-i18n-html="qna.faq.a9"><p>最大<strong>5名</strong>まで同時にモーションキャプチャーが可能です。</p>
<p>人数別の詳細情報：</p>
<ul>
<li><strong>1名：</strong> 最高精度でのキャプチャー</li>
<li><strong>2名：</strong> インタラクションシーンに最適</li>
<li><strong>3-5名：</strong> グループパフォーマンス可能</li>
</ul>
<p>人数が多いほどキャプチャー空間と精度に制約が生じる場合があります。</p></div>
</div>
<!-- 요금/결제 관련 -->
<div class="faq-item" data-category="pricing">
<div class="faq-question">
<h3 data-i18n="qna.faq.q10">お支払い方法はどうなっていますか？</h3>
<span class="faq-toggle">+</span>
</div>
<div class="faq-answer" data-i18n-html="qna.faq.a10"><p>以下のお支払い方法をご利用いただけます：</p>
<ul>
<li><strong>お振込み：</strong> ご予約確定後24時間以内</li>
<li><strong>現金決済：</strong> 現地でのお支払い可能</li>
<li><strong>カード決済：</strong> 現地ではご利用不可</li>
<li><strong>税金計算書：</strong> 法人のお客様向けに発行可能</li>
<li><strong>現金領収書：</strong> 個人のお客様向けに発行可能</li>
</ul>
<p>予約金（30%）はご予約確定時、残金（70%）は撮影当日にお支払いいただけます。</p></div>
</div>
<!-- 제작/촬영 관련 -->
<div class="faq-item" data-category="production">
<div class="faq-question">
<h3 data-i18n="qna.faq.q11">撮影の準備物は何が必要ですか？</h3>
<span class="faq-toggle">+</span>
</div>
<div class="faq-answer" data-i18n-html="qna.faq.a11"><p>基本的に以下の準備が必要です：</p>
<ul>
<li><strong>靴：</strong> 靴下の着用必須</li>
<li><strong>メガネ：</strong> メガネ着用不可（コンタクトレンズ推奨）</li>
<li><strong>髪：</strong> 長い髪はまとめてください</li>
<li><strong>アクセサリー：</strong> 時計、指輪などは外してください</li>
<li><strong>メイク：</strong> 濃いメイクはお控えください</li>
</ul>
<p>モーションキャプチャースーツとマーカーはスタジオで提供いたします。</p></div>
</div>
<div class="faq-item" data-category="production">
<div class="faq-question">
<h3 data-i18n="qna.faq.q12">データはどのような形式で受け取れますか？</h3>
<span class="faq-toggle">+</span>
</div>
<div class="faq-answer" data-i18n-html="qna.faq.a12"><p>以下の形式でデータを提供いたします：</p>
<ul>
<li><strong>FBXファイル：</strong> Unity、Unreal Engine対応</li>
<li><strong>ANIMファイル：</strong> Unity Animatorに直接対応</li>
<li><strong>MP4映像：</strong> 参考用映像</li>
</ul>
<p>お問い合わせ時に詳細をご案内いたします。データはクラウドを通じてお届けします。</p></div>
</div>
<!-- 스트리밍 관련 -->
<div class="faq-item" data-category="streaming">
<div class="faq-question">
<h3 data-i18n="qna.faq.q13">リアルタイムストリーミングは可能ですか？</h3>
<span class="faq-toggle">+</span>
</div>
<div class="faq-answer" data-i18n-html="qna.faq.a13"><p><strong>はい、ストリーミングルサービスを通じてリアルタイムストリーミングが可能です。</strong></p>
<p>モーションキャプチャーデータをリアルタイムで配信し、ライブ配信にご活用いただけます。</p>
<p>詳細はServicesページのストリーミングルサービスの項目をご参照ください。</p></div>
</div>
<!-- 기타 -->
<div class="faq-item" data-category="etc">
<div class="faq-question">
<h3 data-i18n="qna.faq.q14">駐車場はありますか？</h3>
<span class="faq-toggle">+</span>
</div>
<div class="faq-answer" data-i18n-html="qna.faq.a14"><p>はい、駐車が可能です：</p>
<ul>
<li><strong>基本：</strong> 2時間無料</li>
<li><strong>建物内施設ご利用時：</strong> 追加2時間、最大4時間無料</li>
<li><strong>場所：</strong> 仁川テクノバレービル駐車場</li>
</ul></div>
</div>
<div class="faq-item" data-category="etc">
<div class="faq-question">
<h3 data-i18n="qna.faq.q15">見学や施設ツアーは可能ですか？</h3>
<span class="faq-toggle">+</span>
</div>
<div class="faq-answer" data-i18n-html="qna.faq.a15"><p>見学やツアーは事前のお問い合わせにより可否をご確認いただく必要があります：</p>
<ul>
<li><strong>事前お問い合わせ：</strong> 必須（スタジオの事情によりお断りする場合があります）</li>
<li><strong>お問い合わせ先：</strong> help@minglestudio.co.kr</li>
<li><strong>見学時間：</strong> 承認時に協議（約30分）</li>
<li><strong>費用：</strong> 無料</li>
</ul>
<p>スタジオの運営状況により見学が制限される場合がありますのでご了承ください。</p></div>
</div>
</div>
</div>
</section>
<!-- 추가 문의 -->
<section class="section bg-gradient">
<div class="container text-center">
<h2 data-i18n="qna.cta.title">お探しの回答が見つかりませんでしたか？</h2>
<p data-i18n="qna.cta.desc">ご不明な点がございましたら、いつでもお問い合わせください</p>
<div class="cta-buttons">
<a href="contact.html" class="btn btn-primary btn-lg" data-i18n="qna.cta.btnContact">お問い合わせ</a>
<a href="tel:010-9288-9190" class="btn btn-outline btn-lg" data-i18n="qna.cta.btnCall">電話相談</a>
</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> minglestudio@minglestudio.co.kr</a></li>
<li><a href="mailto:help@minglestudio.co.kr"><i class="fa-solid fa-envelope" aria-hidden="true"></i> help@minglestudio.co.kr</a></li>
<li><a href="https://discord.com/users/1402264505110495354" target="_blank"><i class="fa-brands fa-discord" aria-hidden="true"></i> minglestudio_mocap</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?v=20260313"></script>
<script src="/js/qna.js"></script>
</body></html>

163
ja/schedule.html
View File

@ -1,163 +0,0 @@
<!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/schedule">
<!-- Theme Color -->
<meta name="theme-color" content="#ff8800">
<!-- SEO メタタグ -->
<meta name="description" content="Mingle Studio 予約状況 - モーションキャプチャスタジオの予約可能日程をご確認ください">
<meta name="keywords" content="モーションキャプチャスタジオ, 予約, スケジュール, Mingle Studio, 仁川">
<meta name="author" content="Mingle Studio">
<!-- Open Graph -->
<meta property="og:title" content="予約状況 - Mingle Studio">
<meta property="og:description" content="Mingle Studioモーションキャプチャスタジオの予約可能日程をご確認ください">
<meta property="og:url" content="https://minglestudio.co.kr/ja/schedule">
<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="ja_JP">
<meta property="og:site_name" content="Mingle Studio">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="予約状況 - Mingle Studio">
<meta name="twitter:description" content="Mingle Studioモーションキャプチャスタジオの予約可能日程をご確認ください">
<meta name="twitter:image" content="https://minglestudio.co.kr/images/logo/mingle-OG.png">
<!-- フォント -->
<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?v=20260313">
<link rel="stylesheet" href="/css/schedule.css">
<link rel="alternate" hreflang="ko" href="https://minglestudio.co.kr/schedule">
<link rel="alternate" hreflang="en" href="https://minglestudio.co.kr/en/schedule">
<link rel="alternate" hreflang="ja" href="https://minglestudio.co.kr/ja/schedule">
<link rel="alternate" hreflang="zh" href="https://minglestudio.co.kr/zh/schedule">
<link rel="alternate" hreflang="x-default" href="https://minglestudio.co.kr/schedule">
</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"></div>
<main id="main-content">
<!-- ページヘッダー -->
<section class="page-header">
<div class="container">
<h1 class="page-title" data-i18n="schedule.title">予約状況</h1>
<p class="page-description" data-i18n="schedule.desc">スタジオの予約可能日程をご確認ください</p>
</div>
</section>
<!-- カレンダーセクション -->
<section class="section">
<div class="container">
<div class="schedule-wrapper">
<div class="calendar-card">
<div class="calendar-nav">
<button class="cal-nav-btn" id="prevMonth" aria-label="前月">
<i class="fa-solid fa-chevron-left"></i>
</button>
<h2 class="cal-title" id="calTitle"></h2>
<button class="cal-nav-btn" id="nextMonth" aria-label="翌月">
<i class="fa-solid fa-chevron-right"></i>
</button>
</div>
<div class="cal-header">
<span data-i18n="schedule.sun">日</span>
<span data-i18n="schedule.mon">月</span>
<span data-i18n="schedule.tue">火</span>
<span data-i18n="schedule.wed">水</span>
<span data-i18n="schedule.thu">木</span>
<span data-i18n="schedule.fri">金</span>
<span data-i18n="schedule.sat">土</span>
</div>
<div class="cal-body" id="calBody"></div>
</div>
<div class="calendar-legend">
<div class="legend-item">
<span class="legend-dot available"></span>
<span data-i18n="schedule.available">予約可能</span>
</div>
<div class="legend-item">
<span class="legend-dot booked"></span>
<span data-i18n="schedule.booked">予約済み</span>
</div>
<div class="legend-item">
<span class="legend-dot past"></span>
<span data-i18n="schedule.past">過去の日付</span>
</div>
</div>
<div class="schedule-info-card">
<div class="info-icon">
<i class="fa-solid fa-calendar-check"></i>
</div>
<h3 data-i18n="schedule.infoTitle">ご予約案内</h3>
<p data-i18n="schedule.infoDesc">ご予約はメールまたはお問い合わせページから承ります。<br>2週間前までのご予約をお勧めいたします。</p>
<div class="schedule-actions">
<a href="/ja/contact" class="btn btn-primary" data-i18n="schedule.contactBtn"><i class="fa-solid fa-envelope"></i> 予約お問い合わせ</a>
</div>
<div class="schedule-details">
<div class="detail-item">
<span class="detail-label" data-i18n="schedule.detailHours">営業時間</span>
<span class="detail-value" data-i18n="schedule.detailHoursVal">24時間 · 年中無休</span>
</div>
<div class="detail-item">
<span class="detail-label" data-i18n="schedule.detailMin">最低利用</span>
<span class="detail-value" data-i18n="schedule.detailMinVal">2時間から</span>
</div>
<div class="detail-item">
<span class="detail-label" data-i18n="schedule.detailAdvance">事前予約</span>
<span class="detail-value" data-i18n="schedule.detailAdvanceVal">2週間前推奨</span>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<div id="footer-placeholder"></div>
<script src="/js/i18n.js"></script>
<script src="/js/common.js?v=20260313"></script>
<script src="/js/schedule.js"></script>
</body>
</html>

1191
ja/services.html
View File

File diff suppressed because it is too large Load Diff

44
js/devlog.js
View File

@ -1,6 +1,6 @@
/**
* 밍글 스튜디오 블로그 목록 페이지
* blog/index.json에서 글 목록을 불러와 렌더링
* 밍글 스튜디오 DevLog 목록 페이지
* devlog/index.json에서 글 목록을 불러와 렌더링
*/
(function() {
'use strict';
@ -10,14 +10,6 @@
var loadingEl = document.getElementById('blogLoading');
if (!grid) return;
var lang = document.documentElement.lang || 'ko';
var langPrefix = { ko: '', en: '/en', ja: '/ja', zh: '/zh' };
var prefix = langPrefix[lang] || '';
var readMore = { ko: '자세히 보기', en: 'Read more', ja: '続きを読む', zh: '阅读更多' };
var emptyText = { ko: '아직 작성된 글이 없습니다.', en: 'No posts yet.', ja: 'まだ記事がありません。', zh: '暂无文章。' };
var allText = { ko: '전체', en: 'All', ja: 'すべて', zh: '全部' };
var allPosts = [];
var currentFilter = 'all';
@ -32,7 +24,7 @@
})
.catch(function() {
if (loadingEl) loadingEl.style.display = 'none';
grid.innerHTML = '<div class="blog-empty"><i class="fas fa-pen-fancy"></i><p>' + emptyText[lang] + '</p></div>';
grid.innerHTML = '<div class="blog-empty"><i class="fas fa-pen-fancy"></i><p>아직 작성된 글이 없습니다.</p></div>';
});
}
@ -41,14 +33,13 @@
var categories = {};
allPosts.forEach(function(p) {
var cat = (p.categories && p.categories[lang]) || (p.categories && p.categories.ko) || p.category || '';
if (cat) categories[cat] = true;
if (p.category) categories[p.category] = true;
});
var cats = Object.keys(categories).sort();
if (cats.length < 2) { filtersWrap.style.display = 'none'; return; }
var html = '<button class="blog-filter-btn active" data-cat="all">' + allText[lang] + '</button>';
var html = '<button class="blog-filter-btn active" data-cat="all">전체</button>';
cats.forEach(function(c) {
html += '<button class="blog-filter-btn" data-cat="' + c + '">' + c + '</button>';
});
@ -64,25 +55,20 @@
});
}
function getCategory(post) {
return (post.categories && post.categories[lang]) || (post.categories && post.categories.ko) || post.category || '';
}
function renderPosts() {
var filtered = currentFilter === 'all' ? allPosts : allPosts.filter(function(p) { return getCategory(p) === currentFilter; });
var filtered = currentFilter === 'all' ? allPosts : allPosts.filter(function(p) { return p.category === currentFilter; });
if (filtered.length === 0) {
grid.innerHTML = '<div class="blog-empty"><i class="fas fa-pen-fancy"></i><p>' + emptyText[lang] + '</p></div>';
grid.innerHTML = '<div class="blog-empty"><i class="fas fa-pen-fancy"></i><p>아직 작성된 글이 없습니다.</p></div>';
return;
}
var html = '';
filtered.forEach(function(post) {
var title = (post.titles && post.titles[lang]) || (post.titles && post.titles.ko) || post.slug;
var desc = (post.descriptions && post.descriptions[lang]) || (post.descriptions && post.descriptions.ko) || '';
var cat = getCategory(post);
var title = post.title || post.slug;
var desc = post.description || '';
var thumb = post.thumbnail ? '/blog/posts/' + post.slug + '/' + post.thumbnail : '';
var url = prefix + '/devlog/' + post.slug;
var url = '/devlog/' + post.slug;
var date = formatDate(post.date);
html += '<article class="blog-card">';
@ -94,12 +80,12 @@
}
html += '</a>';
html += '<div class="blog-card-body">';
if (cat) html += '<span class="blog-card-category">' + escapeHtml(cat) + '</span>';
if (post.category) html += '<span class="blog-card-category">' + escapeHtml(post.category) + '</span>';
html += '<h2 class="blog-card-title"><a href="' + url + '" style="color:inherit;text-decoration:none">' + escapeHtml(title) + '</a></h2>';
html += '<p class="blog-card-desc">' + escapeHtml(desc) + '</p>';
html += '<div class="blog-card-footer">';
html += '<span class="blog-card-date"><i class="far fa-calendar-alt"></i> ' + date + '</span>';
html += '<a href="' + url + '" class="blog-card-link">' + readMore[lang] + ' →</a>';
html += '<a href="' + url + '" class="blog-card-link">자세히 보기 →</a>';
html += '</div></div></article>';
});
@ -110,11 +96,7 @@
if (!dateStr) return '';
var d = new Date(dateStr + 'T00:00:00');
if (isNaN(d)) return dateStr;
var y = d.getFullYear(), m = d.getMonth() + 1, day = d.getDate();
if (lang === 'ko') return y + '.' + m + '.' + day;
if (lang === 'ja' || lang === 'zh') return y + '/' + m + '/' + day;
var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
return months[m - 1] + ' ' + day + ', ' + y;
return d.getFullYear() + '.' + (d.getMonth() + 1) + '.' + d.getDate();
}
function escapeHtml(str) {

369
js/i18n.js
View File

@ -1,369 +0,0 @@
/**
* i18n (국제화) 시스템
* 지원 언어: ko(한국어), en(영어), zh(중국어), ja(일본어)
*/
(function () {
'use strict';
const SUPPORTED_LANGS = ['ko', 'en', 'zh', 'ja'];
const DEFAULT_LANG = 'ko';
const STORAGE_KEY = 'mingle-lang';
const i18n = {
currentLang: DEFAULT_LANG,
translations: {},
cache: {},
ready: false,
/**
* 초기화: 언어 감지 → JSON 로드
*/
init() {
// URL 파싱을 통해 현재 경로 언어 감지
const path = window.location.pathname;
const parts = path.split('/').filter(Boolean);
const pathLang = (parts.length > 0 && SUPPORTED_LANGS.includes(parts[0]) && parts[0] !== DEFAULT_LANG) ? parts[0] : DEFAULT_LANG;
// 1. URL이 가장 높은 우선순위를 가짐
let lang = pathLang;
if (pathLang === DEFAULT_LANG) {
// 2. 루트 경로(/)에 왔을 때는 기존처럼 브라우저/로컬 환경 감지
lang = this.detectLanguage();
} else {
// URL에 명시되어 있다면 해당 언어 환경 저장
localStorage.setItem(STORAGE_KEY, lang);
}
this.currentLang = lang;
document.documentElement.lang = lang;
// 기본 언어가 아니면 JSON 번역 파일 로드 (동적 컴포넌트 번역용)
if (lang !== DEFAULT_LANG) {
return this.loadLang(lang).then(() => {
this.ready = true;
});
} else {
this.ready = true;
return Promise.resolve();
}
},
/**
* 언어 감지 우선순위: localStorage → 브라우저 언어 → 기본값(ko)
*/
detectLanguage() {
// 1. localStorage에 저장된 언어
const saved = localStorage.getItem(STORAGE_KEY);
if (saved && SUPPORTED_LANGS.includes(saved)) {
return saved;
}
// 2. 브라우저 언어
const browserLang = (navigator.language || navigator.userLanguage || '').toLowerCase();
const langCode = browserLang.split('-')[0];
if (SUPPORTED_LANGS.includes(langCode) && langCode !== DEFAULT_LANG) {
return langCode;
}
// 3. 기본값
return DEFAULT_LANG;
},
/**
* JSON 번역 파일 로드
*/
async loadLang(lang) {
if (lang === DEFAULT_LANG) {
this.translations = {};
return;
}
// 캐시 확인
if (this.cache[lang]) {
this.translations = this.cache[lang];
return;
}
try {
const response = await fetch(`/i18n/${lang}.json`);
if (!response.ok) throw new Error(`HTTP ${response.status}`);
const data = await response.json();
this.cache[lang] = data;
this.translations = data;
} catch (error) {
console.warn(`[i18n] Failed to load ${lang}.json:`, error);
this.translations = {};
}
},
/**
* 번역 키로 텍스트 가져오기
* @param {string} key - 점(.) 구분 키 (예: "header.studioName")
* @param {string} fallback - 폴백 텍스트
* @returns {string}
*/
t(key, fallback) {
if (this.currentLang === DEFAULT_LANG) {
return fallback || key;
}
const keys = key.split('.');
let value = this.translations;
for (const k of keys) {
if (value && typeof value === 'object' && k in value) {
value = value[k];
} else {
return fallback || key;
}
}
return typeof value === 'string' ? value : (fallback || key);
},
/**
* DOM 전체 번역 적용
* @param {Element} root - 번역 대상 루트 (기본: document)
*/
translateDOM(root) {
const container = root || document;
const isKorean = this.currentLang === DEFAULT_LANG;
// data-i18n: 텍스트 콘텐츠 번역
container.querySelectorAll('[data-i18n]').forEach(el => {
const key = el.getAttribute('data-i18n');
// 원본 한국어 텍스트 저장 (최초 1회)
if (!el.hasAttribute('data-i18n-ko')) {
el.setAttribute('data-i18n-ko', el.innerHTML);
}
if (isKorean) {
el.innerHTML = el.getAttribute('data-i18n-ko');
} else {
const translated = this.t(key, null);
if (translated && translated !== key) {
if (translated.includes('<')) {
el.innerHTML = translated;
} else {
el.textContent = translated;
}
}
}
});
// data-i18n-html: HTML 콘텐츠 번역 (명시적)
container.querySelectorAll('[data-i18n-html]').forEach(el => {
const key = el.getAttribute('data-i18n-html');
if (!el.hasAttribute('data-i18n-ko')) {
el.setAttribute('data-i18n-ko', el.innerHTML);
}
if (isKorean) {
el.innerHTML = el.getAttribute('data-i18n-ko');
} else {
const translated = this.t(key, null);
if (translated && translated !== key) {
el.innerHTML = translated;
}
}
});
// data-i18n-placeholder: placeholder 번역
container.querySelectorAll('[data-i18n-placeholder]').forEach(el => {
const key = el.getAttribute('data-i18n-placeholder');
if (!el.hasAttribute('data-i18n-ko-placeholder')) {
el.setAttribute('data-i18n-ko-placeholder', el.placeholder);
}
if (isKorean) {
el.placeholder = el.getAttribute('data-i18n-ko-placeholder');
} else {
const translated = this.t(key, null);
if (translated && translated !== key) {
el.placeholder = translated;
}
}
});
// data-i18n-aria: aria-label 번역
container.querySelectorAll('[data-i18n-aria]').forEach(el => {
const key = el.getAttribute('data-i18n-aria');
if (!el.hasAttribute('data-i18n-ko-aria')) {
el.setAttribute('data-i18n-ko-aria', el.getAttribute('aria-label') || '');
}
if (isKorean) {
el.setAttribute('aria-label', el.getAttribute('data-i18n-ko-aria'));
} else {
const translated = this.t(key, null);
if (translated && translated !== key) {
el.setAttribute('aria-label', translated);
}
}
});
// data-i18n-title: title 속성 번역
container.querySelectorAll('[data-i18n-title]').forEach(el => {
const key = el.getAttribute('data-i18n-title');
if (!el.hasAttribute('data-i18n-ko-title')) {
el.setAttribute('data-i18n-ko-title', el.title || '');
}
if (isKorean) {
el.title = el.getAttribute('data-i18n-ko-title');
} else {
const translated = this.t(key, null);
if (translated && translated !== key) {
el.title = translated;
}
}
});
// 메타 태그 번역
this.translateMeta();
// 언어 스위처 활성 상태 업데이트
this.updateSwitcher();
},
/**
* 메타 태그 번역 (title, description, OG 등)
*/
translateMeta() {
const isKorean = this.currentLang === DEFAULT_LANG;
const pageName = this.getPageName();
// 원본 메타 저장 (최초 1회)
if (!this._metaOriginals) {
this._metaOriginals = {
title: document.title,
description: document.querySelector('meta[name="description"]')?.content || '',
ogTitle: document.querySelector('meta[property="og:title"]')?.content || '',
ogDescription: document.querySelector('meta[property="og:description"]')?.content || ''
};
}
if (isKorean) {
document.title = this._metaOriginals.title;
const metaDesc = document.querySelector('meta[name="description"]');
if (metaDesc) metaDesc.content = this._metaOriginals.description;
const ogTitleEl = document.querySelector('meta[property="og:title"]');
if (ogTitleEl) ogTitleEl.content = this._metaOriginals.ogTitle;
const ogDescEl = document.querySelector('meta[property="og:description"]');
if (ogDescEl) ogDescEl.content = this._metaOriginals.ogDescription;
return;
}
// title
const titleKey = `${pageName}.meta.title`;
const title = this.t(titleKey, null);
if (title && title !== titleKey) {
document.title = title;
}
// meta description
const descKey = `${pageName}.meta.description`;
const desc = this.t(descKey, null);
if (desc && desc !== descKey) {
const metaDesc = document.querySelector('meta[name="description"]');
if (metaDesc) metaDesc.content = desc;
}
// OG tags
const ogTitleKey = `${pageName}.meta.ogTitle`;
const ogTitle = this.t(ogTitleKey, null);
if (ogTitle && ogTitle !== ogTitleKey) {
const ogTitleEl = document.querySelector('meta[property="og:title"]');
if (ogTitleEl) ogTitleEl.content = ogTitle;
}
const ogDescKey = `${pageName}.meta.ogDescription`;
const ogDesc = this.t(ogDescKey, null);
if (ogDesc && ogDesc !== ogDescKey) {
const ogDescEl = document.querySelector('meta[property="og:description"]');
if (ogDescEl) ogDescEl.content = ogDesc;
}
},
/**
* 현재 페이지 이름 추출
*/
getPageName() {
const path = window.location.pathname;
const page = path.split('/').pop().replace('.html', '') || 'index';
return page;
},
/**
* 언어 전환
*/
setLang(lang) {
if (!SUPPORTED_LANGS.includes(lang)) return;
if (lang === this.currentLang) return;
localStorage.setItem(STORAGE_KEY, lang);
// SEO 친화적인 URL 리다이렉션 수행
const currentPath = window.location.pathname;
const parts = currentPath.split('/').filter(Boolean);
// 만약 현재 경로의 첫 번째 파트가 지원하는 언어라면(ko 제외), 제거
if (parts.length > 0 && SUPPORTED_LANGS.includes(parts[0]) && parts[0] !== DEFAULT_LANG) {
parts.shift();
}
const baseRoute = '/' + parts.join('/');
const newPath = lang === DEFAULT_LANG ? baseRoute : `/${lang}${baseRoute === '/' ? '' : baseRoute}`;
// URL 변경
window.location.href = newPath || '/';
},
/**
* 언어 스위처 UI 활성 상태 업데이트
*/
updateSwitcher() {
const currentEl = document.querySelector('.lang-current');
if (currentEl) {
currentEl.textContent = this.currentLang.toUpperCase();
}
document.querySelectorAll('.lang-dropdown button[data-lang]').forEach(btn => {
btn.classList.toggle('active', btn.getAttribute('data-lang') === this.currentLang);
});
},
/**
* 언어 스위처 이벤트 바인딩
*/
initSwitcher() {
const switcher = document.querySelector('.lang-switcher');
if (!switcher) return;
const btn = switcher.querySelector('.lang-btn');
const dropdown = switcher.querySelector('.lang-dropdown');
if (btn && dropdown) {
btn.addEventListener('click', (e) => {
e.stopPropagation();
dropdown.classList.toggle('open');
btn.classList.toggle('open');
});
dropdown.querySelectorAll('button[data-lang]').forEach(langBtn => {
langBtn.addEventListener('click', (e) => {
e.stopPropagation();
const lang = langBtn.getAttribute('data-lang');
this.setLang(lang);
dropdown.classList.remove('open');
btn.classList.remove('open');
});
});
// 외부 클릭 시 닫기
document.addEventListener('click', () => {
dropdown.classList.remove('open');
btn.classList.remove('open');
});
}
this.updateSwitcher();
}
};
window.i18n = i18n;
})();

24
js/schedule.js
View File

@ -49,12 +49,9 @@
var existing = calBody.querySelector('.cal-loading-overlay');
if (existing) existing.remove();
var lang = (window.i18n && window.i18n.currentLang) || 'ko';
var loadingTexts = { ko: '불러오는 중...', en: 'Loading...', ja: '読み込み中...', zh: '加载中...' };
var overlay = document.createElement('div');
overlay.className = 'cal-loading-overlay';
overlay.innerHTML = '<div class="loading-spinner"></div><span class="loading-text">' + (loadingTexts[lang] || loadingTexts.ko) + '</span>';
overlay.innerHTML = '<div class="loading-spinner"></div><span class="loading-text">불러오는 중...</span>';
calBody.appendChild(overlay);
}
@ -66,21 +63,8 @@
// --- 제목 업데이트 ---
function updateTitle() {
var lang = (window.i18n && window.i18n.currentLang) || 'ko';
var monthNames = {
ko: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
en: ['January','February','March','April','May','June','July','August','September','October','November','December'],
ja: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
zh: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
};
var names = monthNames[lang] || monthNames.ko;
if (lang === 'en') {
calTitle.textContent = names[currentMonth - 1] + ' ' + currentYear;
} else if (lang === 'ja' || lang === 'zh') {
calTitle.textContent = currentYear + '年 ' + names[currentMonth - 1];
} else {
calTitle.textContent = currentYear + '년 ' + names[currentMonth - 1];
}
var monthNames = ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'];
calTitle.textContent = currentYear + '년 ' + monthNames[currentMonth - 1];
}
// --- API 호출 ---
@ -150,8 +134,6 @@
calBody.appendChild(fragment);
}
document.addEventListener('langChanged', function() { updateTitle(); });
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {

1
package.json
View File

@ -10,7 +10,6 @@
"preview": "python -m http.server 8000",
"python": "python server.py",
"test": "echo \"웹사이트를 http://localhost:8000 에서 확인하세요\" && npm run dev",
"build:i18n": "node build_i18n.js",
"build:devlog": "node build-blog.js"
},
"keywords": [

19
portfolio.html
View File

@ -129,10 +129,6 @@
<link rel="alternate" hreflang="ko" href="https://minglestudio.co.kr/portfolio">
<link rel="alternate" hreflang="en" href="https://minglestudio.co.kr/en/portfolio">
<link rel="alternate" hreflang="ja" href="https://minglestudio.co.kr/ja/portfolio">
<link rel="alternate" hreflang="zh" href="https://minglestudio.co.kr/zh/portfolio">
<link rel="alternate" hreflang="x-default" href="https://minglestudio.co.kr/portfolio">
</head>
<body>
<!-- Google Tag Manager (noscript) -->
@ -164,20 +160,6 @@
<li><a href="/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">
@ -725,7 +707,6 @@
</footer>
<!-- JavaScript -->
<script src="js/i18n.js"></script>
<script src="js/common.js?v=20260313"></script>
<script src="js/portfolio.js"></script>

18
props.html
View File

@ -44,10 +44,6 @@
<link rel="alternate" hreflang="ko" href="https://minglestudio.co.kr/props">
<link rel="alternate" hreflang="en" href="https://minglestudio.co.kr/en/props">
<link rel="alternate" hreflang="ja" href="https://minglestudio.co.kr/ja/props">
<link rel="alternate" hreflang="zh" href="https://minglestudio.co.kr/zh/props">
<link rel="alternate" hreflang="x-default" href="https://minglestudio.co.kr/props">
</head>
<body>
<!-- Google Tag Manager (noscript) -->
@ -78,20 +74,6 @@
<li><a href="/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">

19
qna.html
View File

@ -70,10 +70,6 @@
<link rel="alternate" hreflang="ko" href="https://minglestudio.co.kr/qna">
<link rel="alternate" hreflang="en" href="https://minglestudio.co.kr/en/qna">
<link rel="alternate" hreflang="ja" href="https://minglestudio.co.kr/ja/qna">
<link rel="alternate" hreflang="zh" href="https://minglestudio.co.kr/zh/qna">
<link rel="alternate" hreflang="x-default" href="https://minglestudio.co.kr/qna">
</head>
<body>
<!-- Google Tag Manager (noscript) -->
@ -105,20 +101,6 @@
<li><a href="/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">
@ -559,7 +541,6 @@
</footer>
<!-- JavaScript -->
<script src="js/i18n.js"></script>
<script src="js/common.js?v=20260313"></script>
<script src="js/qna.js"></script>

6
schedule.html
View File

@ -61,10 +61,6 @@
<link rel="stylesheet" href="css/schedule.css">
<link rel="alternate" hreflang="ko" href="https://minglestudio.co.kr/schedule">
<link rel="alternate" hreflang="en" href="https://minglestudio.co.kr/en/schedule">
<link rel="alternate" hreflang="ja" href="https://minglestudio.co.kr/ja/schedule">
<link rel="alternate" hreflang="zh" href="https://minglestudio.co.kr/zh/schedule">
<link rel="alternate" hreflang="x-default" href="https://minglestudio.co.kr/schedule">
</head>
<body>
<!-- Google Tag Manager (noscript) -->
@ -163,8 +159,6 @@
</main>
<div id="footer-placeholder"></div>
<script src="js/i18n.js"></script>
<script src="js/common.js?v=20260313"></script>
<script src="js/schedule.js"></script>
</body>

19
services.html
View File

@ -71,10 +71,6 @@
<link rel="alternate" hreflang="ko" href="https://minglestudio.co.kr/services">
<link rel="alternate" hreflang="en" href="https://minglestudio.co.kr/en/services">
<link rel="alternate" hreflang="ja" href="https://minglestudio.co.kr/ja/services">
<link rel="alternate" hreflang="zh" href="https://minglestudio.co.kr/zh/services">
<link rel="alternate" hreflang="x-default" href="https://minglestudio.co.kr/services">
</head>
<body>
<!-- Google Tag Manager (noscript) -->
@ -106,20 +102,6 @@
<li><a href="/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">
@ -1178,7 +1160,6 @@
</div>
<!-- JavaScript -->
<script src="js/i18n.js"></script>
<script src="js/common.js?v=20260313"></script>
<script src="js/services.js"></script>

141
sitemap.xml
View File

@ -49,145 +49,4 @@
<priority>0.7</priority>
</url>
<!-- English -->
<url>
<loc>https://minglestudio.co.kr/en/</loc>
<changefreq>weekly</changefreq>
<priority>0.9</priority>
</url>
<url>
<loc>https://minglestudio.co.kr/en/about</loc>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
</url>
<url>
<loc>https://minglestudio.co.kr/en/services</loc>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
</url>
<url>
<loc>https://minglestudio.co.kr/en/portfolio</loc>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
</url>
<url>
<loc>https://minglestudio.co.kr/en/gallery</loc>
<changefreq>weekly</changefreq>
<priority>0.6</priority>
</url>
<url>
<loc>https://minglestudio.co.kr/en/contact</loc>
<changefreq>weekly</changefreq>
<priority>0.6</priority>
</url>
<url>
<loc>https://minglestudio.co.kr/en/qna</loc>
<changefreq>weekly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>https://minglestudio.co.kr/en/schedule</loc>
<changefreq>daily</changefreq>
<priority>0.6</priority>
</url>
<url>
<loc>https://minglestudio.co.kr/en/devlog</loc>
<changefreq>weekly</changefreq>
<priority>0.6</priority>
</url>
<!-- 日本語 -->
<url>
<loc>https://minglestudio.co.kr/ja/</loc>
<changefreq>weekly</changefreq>
<priority>0.9</priority>
</url>
<url>
<loc>https://minglestudio.co.kr/ja/about</loc>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
</url>
<url>
<loc>https://minglestudio.co.kr/ja/services</loc>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
</url>
<url>
<loc>https://minglestudio.co.kr/ja/portfolio</loc>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
</url>
<url>
<loc>https://minglestudio.co.kr/ja/gallery</loc>
<changefreq>weekly</changefreq>
<priority>0.6</priority>
</url>
<url>
<loc>https://minglestudio.co.kr/ja/contact</loc>
<changefreq>weekly</changefreq>
<priority>0.6</priority>
</url>
<url>
<loc>https://minglestudio.co.kr/ja/qna</loc>
<changefreq>weekly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>https://minglestudio.co.kr/ja/schedule</loc>
<changefreq>daily</changefreq>
<priority>0.6</priority>
</url>
<url>
<loc>https://minglestudio.co.kr/ja/devlog</loc>
<changefreq>weekly</changefreq>
<priority>0.6</priority>
</url>
<!-- 中文 -->
<url>
<loc>https://minglestudio.co.kr/zh/</loc>
<changefreq>weekly</changefreq>
<priority>0.9</priority>
</url>
<url>
<loc>https://minglestudio.co.kr/zh/about</loc>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
</url>
<url>
<loc>https://minglestudio.co.kr/zh/services</loc>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
</url>
<url>
<loc>https://minglestudio.co.kr/zh/portfolio</loc>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
</url>
<url>
<loc>https://minglestudio.co.kr/zh/gallery</loc>
<changefreq>weekly</changefreq>
<priority>0.6</priority>
</url>
<url>
<loc>https://minglestudio.co.kr/zh/contact</loc>
<changefreq>weekly</changefreq>
<priority>0.6</priority>
</url>
<url>
<loc>https://minglestudio.co.kr/zh/qna</loc>
<changefreq>weekly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>https://minglestudio.co.kr/zh/schedule</loc>
<changefreq>daily</changefreq>
<priority>0.6</priority>
</url>
<url>
<loc>https://minglestudio.co.kr/zh/devlog</loc>
<changefreq>weekly</changefreq>
<priority>0.6</priority>
</url>
</urlset>

264
zh/404.html
View File

@ -1,264 +0,0 @@
<!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>404.meta.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 href="https://hangeul.pstatic.net/hangeul_static/css/nanum-square.css" rel="stylesheet">
<!-- CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" integrity="sha512-Avb2QiuDEEvB4bZJYdft2mNjVShBftLGPg8YJ04IY4YZ7C7BC9XkjsTBdQ1B8TAVxT2BOxqIRkVvNs/FNRs0w==" crossorigin="anonymous" referrerpolicy="no-referrer">
<link rel="stylesheet" href="/css/common.css?v=20260313">
<style>
.error-container {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
background: linear-gradient(135deg, #f8fafc 0%, #fff7ed 100%);
padding: var(--spacing-2xl);
}
.error-code {
font-size: 8rem;
font-weight: 800;
background: var(--gradient-main);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: var(--spacing-lg);
line-height: 1;
}
.error-title {
font-size: var(--font-3xl);
color: var(--text-primary);
margin-bottom: var(--spacing-md);
font-weight: 700;
}
.error-description {
font-size: var(--font-lg);
color: var(--text-secondary);
margin-bottom: var(--spacing-2xl);
max-width: 600px;
}
.error-actions {
display: flex;
gap: var(--spacing-md);
flex-wrap: wrap;
justify-content: center;
margin-bottom: var(--spacing-2xl);
}
.search-container {
margin-top: var(--spacing-xl);
max-width: 400px;
width: 100%;
}
.search-input {
width: 100%;
padding: var(--spacing-md) var(--spacing-lg);
border: 2px solid #e5e7eb;
border-radius: var(--border-radius-full);
font-size: var(--font-base);
transition: var(--transition);
}
.search-input:focus {
outline: none;
border-color: var(--primary-color);
}
.helpful-links {
margin-top: var(--spacing-2xl);
text-align: left;
}
.helpful-links h3 {
color: var(--text-primary);
margin-bottom: var(--spacing-md);
font-size: var(--font-xl);
}
.helpful-links ul {
list-style: none;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--spacing-md);
}
.helpful-links li {
background: var(--bg-white);
padding: var(--spacing-md);
border-radius: var(--border-radius);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
.helpful-links a {
color: var(--primary-color);
text-decoration: none;
font-weight: 500;
display: flex;
align-items: center;
gap: var(--spacing-sm);
}
.helpful-links a:hover {
color: var(--primary-hover);
}
/* 다크모드 */
[data-theme="dark"] .error-container {
background: linear-gradient(135deg, var(--dark-bg) 0%, #1a1520 100%);
}
[data-theme="dark"] .error-title {
color: rgba(255, 255, 255, 0.95);
}
[data-theme="dark"] .error-description {
color: rgba(255, 255, 255, 0.65);
}
[data-theme="dark"] .search-input {
background: rgba(255, 255, 255, 0.05);
border-color: var(--glass-border);
color: rgba(255, 255, 255, 0.9);
}
[data-theme="dark"] .search-input::placeholder {
color: rgba(255, 255, 255, 0.35);
}
[data-theme="dark"] .search-input:focus {
border-color: var(--primary-color);
}
[data-theme="dark"] .helpful-links h3 {
color: rgba(255, 255, 255, 0.95);
}
[data-theme="dark"] .helpful-links li {
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--glass-border);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .helpful-links a {
color: var(--primary-color);
}
@media (max-width: 768px) {
.error-code {
font-size: 6rem;
}
.error-title {
font-size: var(--font-2xl);
}
.error-actions {
flex-direction: column;
align-items: center;
}
.helpful-links ul {
grid-template-columns: 1fr;
}
}
</style>
<link rel="alternate" hreflang="ko" href="https://minglestudio.co.kr/404">
<link rel="alternate" hreflang="en" href="https://minglestudio.co.kr/en/404">
<link rel="alternate" hreflang="ja" href="https://minglestudio.co.kr/ja/404">
<link rel="alternate" hreflang="zh" href="https://minglestudio.co.kr/zh/404">
<link rel="alternate" hreflang="x-default" href="https://minglestudio.co.kr/404">
</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) -->
<div class="error-container">
<div class="error-code">404</div>
<h1 class="error-title" data-i18n="error404.title">页面未找到</h1>
<p class="error-description" data-i18n-html="error404.desc">抱歉，您请求的页面不存在或已被移动。<br>请通过以下链接查找您需要的信息。</p>
<div class="error-actions">
<a href="index.html" class="btn btn-primary btn-lg"><i class="fa-solid fa-house" aria-hidden="true"></i> <span data-i18n="error404.btnHome">返回首页</span></a>
<a href="contact.html" class="btn btn-outline btn-lg"><i class="fa-solid fa-phone" aria-hidden="true"></i> <span data-i18n="error404.btnContact">联系我们</span></a>
</div>
<div class="search-container">
<label for="errorSearch" class="sr-only">검색</label>
<input type="text" class="search-input" placeholder="搜索您需要的内容..." id="errorSearch" data-i18n-placeholder="error404.searchPlaceholder">
</div>
<div class="helpful-links">
<h3 data-i18n="error404.helpfulLinks">可能有帮助的页面</h3>
<ul>
<li><a href="about.html"><i class="fa-solid fa-building" aria-hidden="true"></i> <span data-i18n="error404.linkAbout">关于我们</span></a></li>
<li><a href="services.html"><i class="fa-solid fa-clapperboard" aria-hidden="true"></i> <span data-i18n="error404.linkServices">服务介绍</span></a></li>
<li><a href="portfolio.html"><i class="fa-solid fa-bullseye" aria-hidden="true"></i> <span data-i18n="error404.linkPortfolio">作品集</span></a></li>
<li><a href="gallery.html"><i class="fa-solid fa-images" aria-hidden="true"></i> <span data-i18n="error404.linkGallery">工作室画廊</span></a></li>
<li><a href="qna.html"><i class="fa-solid fa-circle-question" aria-hidden="true"></i> <span data-i18n="error404.linkQna">常见问题</span></a></li>
<li><a href="contact.html"><i class="fa-solid fa-envelope" aria-hidden="true"></i> <span data-i18n="error404.linkContact">联系方式与位置</span></a></li>
</ul>
</div>
</div>
<script src="/js/i18n.js"></script>
<script src="/js/common.js?v=20260313"></script>
<script>
// 검색 기능
document.getElementById('errorSearch').addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
const query = this.value.trim();
if (query) {
// Q&A 페이지로 검색어와 함께 이동
window.location.href = `qna.html?search=${encodeURIComponent(query)}`;
}
}
});
</script>
</body></html>

423
zh/about.html
View File

@ -1,423 +0,0 @@
<!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">
<!-- 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">
<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?v=20260313">
<link rel="stylesheet" href="/css/about.css">
<link rel="alternate" hreflang="ko" href="https://minglestudio.co.kr/about">
<link rel="alternate" hreflang="en" href="https://minglestudio.co.kr/en/about">
<link rel="alternate" hreflang="ja" href="https://minglestudio.co.kr/ja/about">
<link rel="alternate" hreflang="zh" href="https://minglestudio.co.kr/zh/about">
<link rel="alternate" hreflang="x-default" href="https://minglestudio.co.kr/about">
</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="/schedule" class="nav-link" data-i18n="header.nav.schedule">Schedule</a></li>
<li><a href="/devlog" class="nav-link" data-i18n="header.nav.devlog">DevLog</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> minglestudio@minglestudio.co.kr</a></li>
<li><a href="mailto:help@minglestudio.co.kr"><i class="fa-solid fa-envelope" aria-hidden="true"></i> help@minglestudio.co.kr</a></li>
<li><a href="https://discord.com/users/1402264505110495354" target="_blank"><i class="fa-brands fa-discord" aria-hidden="true"></i> minglestudio_mocap</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?v=20260313"></script>
</body></html>

257
zh/backgrounds.html
View File

@ -1,257 +0,0 @@
<!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>backgrounds.meta.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">
<!-- Theme Color -->
<meta name="theme-color" content="#ff8800">
<!-- SEO -->
<meta name="description" content="backgrounds.meta.description">
<meta name="robots" content="noindex, nofollow">
<!-- 폰트 -->
<link href="https://hangeul.pstatic.net/hangeul_static/css/nanum-square.css" rel="stylesheet">
<!-- CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" integrity="sha512-Avb2QiuDEEvB4bZJYdft2mNjVShBftLGPg8YJ04IY4YZ7C7BC9XkjsTBdQ1B8TAVxT2BOxqIRkVvNs/FNRs0w==" crossorigin="anonymous" referrerpolicy="no-referrer">
<link rel="stylesheet" href="/css/common.css?v=20260313">
<link rel="stylesheet" href="/css/backgrounds.css">
<link rel="alternate" hreflang="ko" href="https://minglestudio.co.kr/backgrounds">
<link rel="alternate" hreflang="en" href="https://minglestudio.co.kr/en/backgrounds">
<link rel="alternate" hreflang="ja" href="https://minglestudio.co.kr/ja/backgrounds">
<link rel="alternate" hreflang="zh" href="https://minglestudio.co.kr/zh/backgrounds">
<link rel="alternate" hreflang="x-default" href="https://minglestudio.co.kr/backgrounds">
</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) -->
<!-- 헤더 -->
<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="/schedule" class="nav-link" data-i18n="header.nav.schedule">Schedule</a></li>
<li><a href="/devlog" class="nav-link" data-i18n="header.nav.devlog">DevLog</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 class="backgrounds-page">
<div class="container">
<!-- 페이지 헤더 -->
<div class="page-header">
<h1>배경 씬 라이브러리</h1>
<p class="page-description">모션캡처 라이브 방송 서비스에서 사용 가능한 배경 씬 목록입니다</p>
<div class="last-updated" id="lastUpdated"></div>
</div>
<!-- 필터 & 검색 -->
<div class="filter-section">
<div class="search-box">
<input type="text" id="searchInput" placeholder="배경 이름으로 검색..." class="search-input">
<span class="search-icon"><i class="fa-solid fa-magnifying-glass" aria-hidden="true"></i></span>
</div>
<div class="filter-tags" id="filterTags">
<button class="filter-tag active" data-tag="all">전체</button>
<!-- 태그 버튼들이 동적으로 추가됨 -->
</div>
<div class="view-options">
<button class="view-btn active" data-view="grid" title="그리드 보기">
<span>▦</span>
</button>
<button class="view-btn" data-view="list" title="리스트 보기">
<span>☰</span>
</button>
</div>
</div>
<!-- 통계 -->
<div class="stats-bar">
<span class="stat-item">
<strong id="totalCount">0</strong>개 배경
</span>
<span class="stat-item">
<strong id="filteredCount">0</strong>개 표시 중
</span>
</div>
<!-- 배경 그리드 -->
<div class="backgrounds-grid" id="backgroundsGrid">
<!-- 배경 카드들이 동적으로 추가됨 -->
<div class="loading-placeholder">
<div class="loading-spinner"></div>
<p>배경 데이터를 불러오는 중...</p>
</div>
</div>
<!-- 데이터 없음 메시지 -->
<div class="no-data" id="noData" style="display: none;">
<div class="no-data-icon"><i class="fa-solid fa-box-open" aria-hidden="true"></i></div>
<h3>배경 데이터가 없습니다</h3>
<p>Unity에서 배경 데이터를 업로드해 주세요.</p>
</div>
<!-- 검색 결과 없음 -->
<div class="no-results" id="noResults" style="display: none;">
<div class="no-results-icon"><i class="fa-solid fa-magnifying-glass" aria-hidden="true"></i></div>
<h3>검색 결과가 없습니다</h3>
<p>다른 검색어나 필터를 시도해 보세요.</p>
</div>
</div>
</main>
<!-- 이미지 모달 -->
<div class="image-modal" id="imageModal">
<div class="modal-overlay"></div>
<div class="modal-content">
<button class="modal-close" aria-label="닫기">×</button>
<img src="" alt="" class="modal-image" id="modalImage">
<div class="modal-info">
<h3 id="modalTitle"></h3>
<p id="modalCategory"></p>
<div class="modal-tags" id="modalTags"></div>
</div>
</div>
</div>
<!-- 푸터 -->
<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>
<!-- 백업 푸터 -->
<footer class="site-footer">
<div class="container">
<div style="color:#bbb;font-size:0.98rem;">© 2025 밍글 스튜디오. All rights reserved.</div>
</div>
</footer>
<!-- JavaScript -->
<script src="/js/common.js?v=20260313"></script>
<script src="/js/backgrounds.js"></script>
</body></html>

528
zh/contact.html
View File

@ -1,528 +0,0 @@
<!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/contact">
<!-- Theme Color -->
<meta name="theme-color" content="#ff8800">
<!-- SEO 메타 태그 -->
<meta name="description" content="Mingle Studio联系方式 - 动作捕捉工作室场地租赁、拍摄、制作咨询与洽谈">
<meta name="keywords" content="모션캡쳐 문의, 스튜디오 대관, 촬영 문의, 버튜버 제작, 3D 모션 상담">
<meta name="author" content="밍글 스튜디오">
<!-- Open Graph -->
<meta property="og:title" content="联系我们 - Mingle Studio">
<meta property="og:description" content="动作捕捉工作室场地租赁、拍摄、制作相关咨询与洽谈。位于仁川科技谷的OptiTrack专业工作室">
<meta property="og:url" content="https://minglestudio.co.kr/contact">
<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="모션캡처 스튜디오 대관, 촬영, 제작 관련 문의 및 상담. 인천 테크노밸리 소재 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">
<!-- 폰트 -->
<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?v=20260313">
<link rel="stylesheet" href="/css/contact.css">
<link rel="alternate" hreflang="ko" href="https://minglestudio.co.kr/contact">
<link rel="alternate" hreflang="en" href="https://minglestudio.co.kr/en/contact">
<link rel="alternate" hreflang="ja" href="https://minglestudio.co.kr/ja/contact">
<link rel="alternate" hreflang="zh" href="https://minglestudio.co.kr/zh/contact">
<link rel="alternate" hreflang="x-default" href="https://minglestudio.co.kr/contact">
</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="/schedule" class="nav-link" data-i18n="header.nav.schedule">Schedule</a></li>
<li><a href="/devlog" class="nav-link" data-i18n="header.nav.devlog">DevLog</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">
<div class="container">
<h1 data-i18n="contact.pageHeader.title">Contact Us</h1>
<p data-i18n="contact.pageHeader.desc">与Mingle Studio一起开启您的特别项目</p>
</div>
</section>
<!-- 연락처 정보 -->
<section class="section">
<div class="container">
<div class="contact-info-grid stagger-children">
<div class="contact-card reveal" data-reveal="up">
<div class="contact-icon"><i class="fa-solid fa-phone" aria-hidden="true"></i></div>
<h3 data-i18n="contact.phone.title">电话咨询</h3>
<p data-i18n="contact.phone.desc">24小时可用</p>
<a href="tel:+82-10-9288-9190" class="contact-link">010-9288-9190</a>
</div>
<div class="contact-card reveal" data-reveal="up">
<div class="contact-icon"><i class="fa-solid fa-briefcase" aria-hidden="true"></i></div>
<h3 data-i18n="contact.business.title">商务咨询</h3>
<p data-i18n="contact.business.desc">合作与协作咨询</p>
<a href="mailto:minglestudio@minglestudio.co.kr" class="contact-link">minglestudio@minglestudio.co.kr</a>
</div>
<div class="contact-card reveal" data-reveal="up">
<div class="contact-icon"><i class="fa-solid fa-envelope" aria-hidden="true"></i></div>
<h3 data-i18n="contact.reservation.title">预约与咨询</h3>
<p data-i18n="contact.reservation.desc">24小时受理</p>
<a href="mailto:help@minglestudio.co.kr" class="contact-link">help@minglestudio.co.kr</a>
</div>
<div class="contact-card reveal" data-reveal="up">
<div class="contact-icon"><i class="fa-brands fa-discord" aria-hidden="true"></i></div>
<h3 data-i18n="contact.discord.title">Discord</h3>
<p data-i18n="contact.discord.desc">实时聊天咨询</p>
<a href="https://discord.com/users/1402264505110495354" target="_blank" class="contact-link">minglestudio_mocap</a>
</div>
<div class="contact-card reveal" data-reveal="up">
<div class="contact-icon"><i class="fa-solid fa-comment" aria-hidden="true" style="color: #FEE500"></i></div>
<h3 data-i18n="contact.kakao.title">KakaoTalk</h3>
<p data-i18n="contact.kakao.desc">开放聊天咨询</p>
<a href="https://open.kakao.com/o/sXOK0Iji" target="_blank" class="contact-link" data-i18n="contact.kakao.link">KakaoTalk咨询</a>
</div>
</div>
</div>
</div>
</section>
<!-- 온라인 문의 폼 -->
<section class="section">
<div class="container">
<div class="section-header">
<h2 data-i18n="contact.form.title">在线咨询</h2>
<p data-i18n="contact.form.desc">请填写以下表格，我们会尽快回复您</p>
</div>
<div class="contact-form-wrapper">
<form id="contactForm" class="contact-form" novalidate>
<div class="form-row">
<div class="form-group">
<label for="name" data-i18n="contact.form.name">姓名 <span class="required">*</span></label>
<input type="text" id="name" name="name" required placeholder="张三" data-i18n-placeholder="contact.form.namePlaceholder">
</div>
<div class="form-group">
<label for="email" data-i18n="contact.form.email">电子邮件 <span class="required">*</span></label>
<input type="email" id="email" name="email" required placeholder="example@email.com">
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="phone" data-i18n="contact.form.phone">电话号码</label>
<input type="tel" id="phone" name="phone" placeholder="010-0000-0000">
</div>
<div class="form-group">
<label for="service" data-i18n="contact.form.service">咨询类型 <span class="required">*</span></label>
<select id="service" name="service" required>
<option value="" data-i18n="contact.form.serviceDefault">请选择</option>
<option value="studio_rental" data-i18n="contact.form.serviceRental">工作室租赁</option>
<option value="motion_recording" data-i18n="contact.form.serviceMotion">动作录制</option>
<option value="music_video" data-i18n="contact.form.serviceMV">音乐视频制作</option>
<option value="partnership" data-i18n="contact.form.servicePartner">合作伙伴</option>
<option value="other" data-i18n="contact.form.serviceOther">其他</option>
</select>
</div>
</div>
<div class="form-group">
<label for="message" data-i18n="contact.form.message">咨询内容 <span class="required">*</span></label>
<textarea id="message" name="message" required rows="5" placeholder="请自由填写项目内容、希望的日程等" data-i18n-placeholder="contact.form.messagePlaceholder"></textarea>
<p class="field-hint" data-i18n="contact.form.sensitiveWarning">※ 请勿输入身份证号、银行账号等敏感个人信息。</p>
</div>
<div class="checkbox-group">
<label class="checkbox-label">
<input type="checkbox" id="privacyConsent" name="privacyConsent" required>
<span class="checkmark"></span>
<span data-i18n="contact.form.privacyAgree">我同意收集和使用个人信息。（必需）</span>
</label>
<a href="javascript:void(0)" class="privacy-link" onclick="openPrivacyModal()" data-i18n="contact.form.privacyView">查看隐私政策</a>
</div>
<div class="privacy-summary">
<ul>
<li data-i18n="contact.form.privacyPurpose">收集目的：受理咨询并回复</li>
<li data-i18n="contact.form.privacyItems">收集项目：姓名、电子邮件、电话号码、咨询内容</li>
<li data-i18n="contact.form.privacyPeriod">保存期限：7天后自动删除</li>
</ul>
</div>
<div class="form-submit">
<button type="submit" id="submitBtn" class="btn btn-primary btn-lg btn-submit-disabled" disabled data-i18n="contact.form.submit">发送咨询</button>
<button type="reset" class="btn btn-outline btn-lg" data-i18n="contact.form.reset">重置</button>
</div>
</form>
</div>
</div>
</section>
<!-- 개인정보처리방침 모달 -->
<div id="privacyModal" class="modal" onclick="if(event.target===this)closePrivacyModal()" role="dialog" aria-modal="true" aria-labelledby="privacyModalTitle">
<div class="modal-content">
<div class="modal-header">
<h3 id="privacyModalTitle">个人信息收集及使用同意书</h3>
<button class="modal-close" onclick="closePrivacyModal()" aria-label="关闭">&times;</button>
</div>
<div class="modal-body">
<p>Mingle Studio（以下简称"公司"）根据韩国《个人信息保护法》，就个人信息的收集和使用征求您的同意。</p>
<h4>1. 收集及使用目的</h4>
<p>公司为以下目的处理个人信息：</p>
<ul>
<li>受理并回复客户咨询</li>
<li>服务咨询及报价指导</li>
<li>咨询处理结果通知</li>
</ul>
<h4>2. 收集的个人信息项目</h4>
<ul>
<li><strong>必填项目：</strong>姓名、电子邮箱、咨询类型、咨询内容</li>
<li><strong>选填项目：</strong>电话号码</li>
</ul>
<p style="color: #ef4444; font-size: 0.85rem;">※ 请勿在咨询内容中包含身份证号、银行账号等敏感个人信息。</p>
<h4>3. 保留及使用期限</h4>
<p>收集的个人信息自<strong>咨询受理之日起保留7天</strong>，超过保留期限后自动销毁。但根据相关法律法规有保存义务的，按法律规定的期限保存。</p>
<h4>4. 销毁程序及方法</h4>
<ul>
<li><strong>销毁程序：</strong>超过保留期限的个人信息由自动删除系统及时销毁。</li>
<li><strong>销毁方法：</strong>电子文件形式的信息以无法恢复和再生的方式完全删除。</li>
</ul>
<h4>5. 向第三方提供及跨境转移</h4>
<p>公司原则上不向第三方提供用户的个人信息。但为处理咨询，个人信息按以下方式转移至境外（依据《个人信息保护法》第28条之8）：</p>
<ul>
<li><strong>转移国家及接收者：</strong>美国 / Discord Inc.</li>
<li><strong>转移时间及方式：</strong>咨询提交时通过专用API（互联网）实时传输</li>
<li><strong>转移项目：</strong>姓名、邮箱、电话号码（选填）、咨询类型、咨询内容</li>
<li><strong>转移目的：</strong>通过协作工具（Discord）进行快速咨询确认及回复</li>
<li><strong>保留及使用期限：</strong>传输后保管7天后自动销毁</li>
</ul>
<h4>6. 信息主体的权利</h4>
<p>用户作为个人信息主体，可以行使以下权利：</p>
<ul>
<li>要求查阅个人信息</li>
<li>要求更正错误</li>
<li>要求删除</li>
<li>要求停止处理</li>
</ul>
<p>上述权利可通过联系以下个人信息保护负责人行使，公司将及时采取措施。</p>
<h4>7. 安全保障措施</h4>
<p>公司为确保个人信息安全采取以下措施：</p>
<ul>
<li>传输数据加密（HTTPS/TLS）</li>
<li>访问权限限制（仅指定管理员可查看）</li>
<li>自动删除系统运营（7天后销毁）</li>
</ul>
<h4>8. 拒绝同意的权利及不利影响</h4>
<p>用户有权拒绝个人信息的收集和使用。但拒绝必填项目的同意将限制咨询服务的使用。</p>
<h4>9. 个人信息保护负责人</h4>
<ul>
<li><strong>姓名：</strong>金希真</li>
<li><strong>职位：</strong>代表</li>
<li><strong>邮箱：</strong>minglestudio@minglestudio.co.kr</li>
<li><strong>电话：</strong>+82-10-9288-9190</li>
</ul>
<h4>10. 隐私政策的变更</h4>
<p>本隐私政策自2026年3月4日起生效。如有变更，将通过本网站公告。</p>
</div>
</div>
</div>
<script>
function openPrivacyModal() {
var m = document.getElementById('privacyModal');
if (!m) return;
m.classList.add('active');
m.style.display = 'flex';
document.body.style.overflow = 'hidden';
}
function closePrivacyModal() {
var m = document.getElementById('privacyModal');
if (!m) return;
m.classList.remove('active');
m.style.display = '';
document.body.style.overflow = '';
}
// 체크박스 → 제출 버튼 활성화
document.addEventListener('DOMContentLoaded', function() {
var cb = document.getElementById('privacyConsent');
var btn = document.getElementById('submitBtn');
if (cb && btn) {
cb.addEventListener('change', function() {
btn.disabled = !cb.checked;
btn.classList.toggle('btn-submit-disabled', !cb.checked);
});
}
});
</script>
<!-- 위치 정보 -->
<section id="location" class="section">
<div class="container">
<div class="section-header">
<h2 data-i18n="contact.location.title">工作室位置</h2>
</div>
<div class="location-wrapper">
<div class="location-info">
<div class="location-details">
<h3><i class="fa-solid fa-location-dot" aria-hidden="true"></i> <span data-i18n="contact.location.address">地址</span></h3>
<p data-i18n-html="contact.location.addressValue">(21330) 仁川广域市富平区主夫吐路236<br>仁川科技谷U1中心 A栋 B105号</p>
<h3><i class="fa-solid fa-train-subway" aria-hidden="true"></i> <span data-i18n="contact.location.subway">地铁</span></h3>
<ul>
<li data-i18n="contact.location.subwayDesc">仁川7号线葛山站下车 → 步行约7分钟</li>
</ul>
<h3><i class="fa-solid fa-bus" aria-hidden="true"></i> <span data-i18n="contact.location.bus">公交</span></h3>
<ul>
<li data-i18n="contact.location.busStop">갈산시장·갈산도서관 站</li>
<li data-i18n="contact.location.busRoutes">4路、526路、555路公交</li>
</ul>
<h3><i class="fa-solid fa-car" aria-hidden="true"></i> <span data-i18n="contact.location.parking">停车</span></h3>
<p data-i18n="contact.location.parkingDesc">基本2小时免费，使用楼内设施最多4小时免费</p>
<h3><i class="fa-solid fa-clock" aria-hidden="true"></i> <span data-i18n="contact.location.hours">营业时间</span></h3>
<ul>
<li data-i18n="contact.location.hours24">24小时营业</li>
<li data-i18n="contact.location.hoursAllYear">全年无休</li>
</ul>
</div>
<div class="location-map">
<div id="map" class="map-container">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d1012.8014347878724!2d126.6649476!3d37.5078124!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6f4c35884c93c281%3A0x1a65ba0583486105!2z67CN6riAIOyKpO2KnOuUlOyYpA!5e0!3m2!1sko!2skr!4v1759144450469!5m2!1sko!2skr" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade" title="밍글 스튜디오 위치 - 구글 지도">
</iframe>
</div>
<div class="map-buttons">
<a href="https://map.naver.com/p/search/밍글스튜디오" target="_blank" class="btn btn-outline" data-i18n="contact.location.naverMap">Naver地图</a>
<a href="https://maps.app.goo.gl/ioGQR4ZEsuGToRnb9" target="_blank" class="btn btn-outline" data-i18n="contact.location.googleMap">Google地图</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 예약 및 FAQ -->
<section class="section bg-gradient">
<div class="container text-center">
<h2 data-i18n="contact.cta.title">预约与咨询</h2>
<p data-i18n="contact.cta.desc">便捷的在线预约或查看常见问题</p>
<div class="cta-buttons">
<a href="/zh/schedule" class="btn btn-outline btn-lg" data-i18n="contact.cta.btnSchedule"><i class="fa-regular fa-calendar-check"></i> 预约状态</a>
<a href="qna.html" class="btn btn-outline btn-lg" data-i18n="contact.cta.btnFaq">查看FAQ</a>
</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> minglestudio@minglestudio.co.kr</a></li>
<li><a href="mailto:help@minglestudio.co.kr"><i class="fa-solid fa-envelope" aria-hidden="true"></i> help@minglestudio.co.kr</a></li>
<li><a href="https://discord.com/users/1402264505110495354" target="_blank"><i class="fa-brands fa-discord" aria-hidden="true"></i> minglestudio_mocap</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?v=20260313"></script>
<script src="/js/contact.js"></script>
</body></html>

187
zh/devlog.html
View File

@ -1,187 +0,0 @@
<!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>DevLog - 明格工作室</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/devlog">
<!-- Theme Color -->
<meta name="theme-color" content="#ff8800">
<!-- SEO 메타 태그 -->
<meta name="description" content="Mingle Studio DevLog - 分享动作捕捉技术、制作过程和虚拟内容制作故事。">
<meta name="keywords" content="Mingle Studio, DevLog, 动作捕捉, 虚拟内容, VTuber, 动捕技术">
<meta name="author" content="Mingle Studio">
<!-- Open Graph -->
<meta property="og:title" content="DevLog - 明格工作室">
<meta property="og:description" content="分享动作捕捉技术和制作过程。Mingle Studio的最新资讯和技术故事。">
<meta property="og:url" content="https://minglestudio.co.kr/zh/devlog">
<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="zh_CN">
<meta property="og:site_name" content="Mingle Studio">
<meta property="og:image:alt" content="Mingle Studio - DevLog">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="DevLog - 明格工作室">
<meta name="twitter:description" content="分享动作捕捉技术和制作过程。Mingle Studio的最新资讯和技术故事。">
<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?v=20260404">
<link rel="stylesheet" href="/css/devlog.css?v=20260404">
<link rel="alternate" hreflang="ko" href="https://minglestudio.co.kr/devlog">
<link rel="alternate" hreflang="en" href="https://minglestudio.co.kr/en/devlog">
<link rel="alternate" hreflang="ja" href="https://minglestudio.co.kr/ja/devlog">
<link rel="alternate" hreflang="zh" href="https://minglestudio.co.kr/zh/devlog">
<link rel="alternate" hreflang="x-default" href="https://minglestudio.co.kr/devlog">
<!-- JSON-LD 구조화 데이터 -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Blog",
"name": "Mingle Studio DevLog",
"description": "分享动作捕捉技术和制作过程",
"url": "https://minglestudio.co.kr/zh/devlog",
"publisher": {
"@type": "Organization",
"name": "Mingle Studio",
"logo": {
"@type": "ImageObject",
"url": "https://minglestudio.co.kr/images/logo/mingle-logo.webp"
}
},
"inLanguage": "zh"
}
</script>
</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="明格工作室 Logo">
<span data-i18n="header.studioName">明格工作室</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="/schedule" class="nav-link" data-i18n="header.nav.schedule">Schedule</a></li>
<li><a href="/zh/devlog" class="nav-link active" data-i18n="header.nav.devlog">DevLog</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="blog-hero">
<div class="container">
<h1>DevLog</h1>
<p>分享动作捕捉技术和制作过程</p>
</div>
</section>
<section class="blog-list-section">
<div id="blogFilters" class="blog-filters"></div>
<div id="blogLoading" class="blog-loading">
<div class="loading-spinner"></div>
</div>
<div id="blogGrid" class="blog-grid"></div>
</section>
</main>
<!-- 푸터 -->
<div id="footer-placeholder"></div>
<!-- JavaScript -->
<script src="/js/i18n.js"></script>
<script src="/js/common.js"></script>
<script src="/js/devlog.js"></script>
</body></html>

508
zh/devlog/inertial-vs-optical-mocap.html
View File

@ -1,508 +0,0 @@
<!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 -->
<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>动作捕捉惯性式 vs 光学式，有什么区别？ - 明格工作室 DevLog</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="canonical" href="https://minglestudio.co.kr/zh/devlog/inertial-vs-optical-mocap">
<meta name="theme-color" content="#ff8800">
<meta name="description" content="全面比较动作捕捉两大主流方式——惯性式（IMU）与光学式（Optical）的原理、各类设备特征及社区评价。">
<meta name="author" content="明格工作室">
<meta property="og:title" content="动作捕捉惯性式 vs 光学式，有什么区别？">
<meta property="og:description" content="全面比较动作捕捉两大主流方式——惯性式（IMU）与光学式（Optical）的原理、各类设备特征及社区评价。">
<meta property="og:url" content="https://minglestudio.co.kr/zh/devlog/inertial-vs-optical-mocap">
<meta property="og:type" content="article">
<meta property="og:image" content="https://minglestudio.co.kr/blog/posts/inertial-vs-optical-mocap/images/thumbnail.webp">
<meta property="og:locale" content="zh_CN">
<meta property="og:site_name" content="明格工作室">
<meta property="article:published_time" content="2026-04-05">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="动作捕捉惯性式 vs 光学式，有什么区别？">
<meta name="twitter:description" content="全面比较动作捕捉两大主流方式——惯性式（IMU）与光学式（Optical）的原理、各类设备特征及社区评价。">
<meta name="twitter:image" content="https://minglestudio.co.kr/blog/posts/inertial-vs-optical-mocap/images/thumbnail.webp">
<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?v=20260404">
<link rel="stylesheet" href="/css/devlog.css?v=20260404">
<link rel="alternate" hreflang="ko" href="https://minglestudio.co.kr/devlog/inertial-vs-optical-mocap">
<link rel="alternate" hreflang="en" href="https://minglestudio.co.kr/en/devlog/inertial-vs-optical-mocap">
<link rel="alternate" hreflang="ja" href="https://minglestudio.co.kr/ja/devlog/inertial-vs-optical-mocap">
<link rel="alternate" hreflang="zh" href="https://minglestudio.co.kr/zh/devlog/inertial-vs-optical-mocap">
<link rel="alternate" hreflang="x-default" href="https://minglestudio.co.kr/devlog/inertial-vs-optical-mocap">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BlogPosting",
"headline": "动作捕捉惯性式 vs 光学式，有什么区别？",
"description": "全面比较动作捕捉两大主流方式——惯性式（IMU）与光学式（Optical）的原理、各类设备特征及社区评价。",
"datePublished": "2026-04-05",
"author": { "@type": "Organization", "name": "明格工作室" },
"publisher": { "@type": "Organization", "name": "明格工作室" },
"url": "https://minglestudio.co.kr/zh/devlog/inertial-vs-optical-mocap"
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "光学式和惯性式动作捕捉最大的区别是什么？",
"acceptedAnswer": {
"@type": "Answer",
"text": "光学式通过红外摄像机和反射标记点追踪绝对位置，可提供亚毫米（0.1mm）级别的精度。惯性式佩戴IMU传感器，不受空间限制可随时随地捕捉，但随着时间推移位置数据会产生漂移（累积误差）。"
}
},
{
"@type": "Question",
"name": "VTuber动作捕捉应该选哪种方式？",
"acceptedAnswer": {
"@type": "Answer",
"text": "简单的个人内容用惯性式（Rokoko、Perception Neuron）就足够了。但如果需要高品质的直播或精细动作，没有漂移的光学式更为合适。"
}
},
{
"@type": "Question",
"name": "惯性式动作捕捉的漂移是什么？",
"acceptedAnswer": {
"@type": "Answer",
"text": "漂移是对IMU传感器的加速度数据进行二次积分计算位置时产生的累积误差。拍摄时间越长，角色位置与实际位置的偏差就越大，在存在磁场干扰的环境中会更加严重。"
}
},
{
"@type": "Question",
"name": "光学式动作捕捉的遮挡问题怎么解决？",
"acceptedAnswer": {
"@type": "Answer",
"text": "遮挡是指标记点被挡住导致摄像机无法看到时出现的问题。通过增加摄像机数量来减少盲区，并利用软件的间隙填充（Gap Filling）功能对缺失区间进行插值来解决。以明格工作室为例，30台摄像机呈360度布置，将遮挡问题降到最低。"
}
},
{
"@type": "Question",
"name": "两种方式可以同时使用吗？",
"acceptedAnswer": {
"@type": "Answer",
"text": "可以。实际上，很多工作室采用混合方式——全身用光学式，手指用惯性式手套进行捕捉。明格工作室也将OptiTrack光学式与Rokoko手套相结合，实现全身和手指的高品质追踪。"
}
},
{
"@type": "Question",
"name": "租用动作捕捉工作室就不需要自己买设备了吗？",
"acceptedAnswer": {
"@type": "Answer",
"text": "没错。光学式设备自行购买需要相当大的投资，因此只在需要的项目中租用工作室是最高效的方式。无需承担设备购买、搭建和维护的负担，即可获得专业级成果。"
}
}
]
}
</script>
</head>
<body>
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PPTNN6WD"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<a href="#main-content" class="skip-to-content">Skip to content</a>
<div id="header-placeholder">
<nav class="navbar" aria-label="Navigation">
<div class="nav-container">
<div class="nav-logo">
<a href="/zh">
<img src="/images/logo/mingle-logo.webp" alt="밍글 스튜디오">
<span data-i18n="header.studioName">밍글 스튜디오</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/schedule" class="nav-link" data-i18n="header.nav.schedule">Schedule</a></li>
<li><a href="/zh/devlog" class="nav-link active" data-i18n="header.nav.devlog">DevLog</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="Language">
<span class="lang-current">ZH</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="Toggle dark mode">
<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>
<button class="hamburger" id="hamburger" aria-label="Menu" aria-expanded="false">
<span class="hamburger-line"></span>
<span class="hamburger-line"></span>
<span class="hamburger-line"></span>
</button>
</div>
</div>
</nav>
</div>
<main id="main-content">
<article class="blog-post">
<div class="blog-post-header">
<div class="container">
<a href="/zh/devlog" class="blog-back-link">← 返回列表</a>
<span class="blog-category">动作捕捉技术</span>
<h1 class="blog-post-title">动作捕捉惯性式 vs 光学式，有什么区别？</h1>
<div class="blog-post-meta">
<time datetime="2026-04-05">2026年4月5日</time>
</div>
</div>
</div>
<div class="blog-post-body">
<div class="container">
<p>当你开始关注动作捕捉时，最先遇到的问题就是：</p>
<p><strong>&quot;惯性式和光学式，到底有什么区别？&quot;</strong></p>
<p>本文将从两种方式的原理出发，涵盖代表性设备及真实用户评价，为你做一次全面的梳理。</p>
<hr>
<h2>什么是光学式（Optical）动作捕捉？</h2>
<p>光学式采用<strong>红外摄像机</strong>和<strong>反射标记点</strong>来实现动作捕捉。</p>
<p>在拍摄空间周围安装多台红外（IR）摄像机，并在演员的关节位置贴上直径约10～20mm的<strong>回射（Retro-reflective）标记点</strong>。每台摄像机发射红外LED光，检测从标记点反射回来的光线，从而在2D图像中提取标记点坐标。</p>
<p>当至少两台摄像机同时捕捉到同一个标记点时，就可以利用<strong>三角测量（Triangulation）<strong>原理计算出该标记点精确的3D坐标。摄像机数量越多，精度越高，盲区越少，因此专业工作室通常配备</strong>12至40台以上</strong>的摄像机。</p>
<p>由于每一帧中所有标记点的3D坐标都以<strong>绝对位置</strong>记录，无论经过多长时间，数据都能保持准确，不会产生累积误差。</p>
<p><video src="inertial-vs-optical-mocap/images/basketball-rigid-body-2x-web.mp4" autoplay loop muted playsinline style="width:100%;border-radius:12px;margin:1.5rem 0;"></video></p>
<h3>优点</h3>
<ul>
<li><strong>亚毫米精度</strong> — 可实现0.1mm级别的精确位置追踪</li>
<li><strong>无漂移</strong> — 基于绝对坐标，数据不会随时间推移而偏移</li>
<li><strong>多目标同步追踪</strong> — 可同时捕捉演员 + 道具 + 场景元素</li>
<li><strong>低延迟</strong> — 约5～10ms，非常适合实时反馈</li>
</ul>
<h3>局限</h3>
<ul>
<li>需要专用拍摄空间（安装摄像机 + 环境控制）</li>
<li>搭建和校准需要30～90分钟</li>
<li><strong>遮挡（Occlusion）问题</strong> — 标记点被遮挡时无法追踪</li>
</ul>
<h3>代表性设备</h3>
<p><strong>OptiTrack（PrimeX系列）</strong></p>
<ul>
<li>被评为光学式中<strong>性价比最高</strong>的品牌</li>
<li>Motive软件易用性好，Unity/Unreal插件生态完善</li>
<li>广泛应用于游戏开发公司、VTuber制作团队、高校研究实验室</li>
<li>社区评价：*&quot;在这个价位上能达到这种精度的只有OptiTrack&quot;*是主流观点</li>
</ul>
<p><strong>Vicon（Vero / Vantage系列）</strong></p>
<ul>
<li>影视VFX行业的<strong>黄金标准</strong> — 好莱坞大多数AAA级电影都使用Vicon拍摄</li>
<li>最顶级的精度与稳定性，强大的后处理软件（Shogun）</li>
<li>社区评价：<em>&quot;精度是最好的，但对小型工作室来说投资过大&quot;</em></li>
</ul>
<p><strong>Qualisys</strong></p>
<ul>
<li>在医疗/运动生物力学领域表现强劲</li>
<li>专注于步态分析、临床研究、运动科学</li>
<li>在娱乐领域的用户社区相对较小</li>
</ul>
<hr>
<h2>什么是惯性式（IMU）动作捕捉？</h2>
<p>惯性式通过将<strong>IMU（Inertial Measurement Unit，惯性测量单元）</strong>传感器贴在身体上或内置于动捕服中来测量运动。</p>
<p>每个IMU传感器内含三个核心组件：</p>
<ul>
<li><strong>加速度计（Accelerometer）</strong> — 测量线性加速度，判断运动方向和速度</li>
<li><strong>陀螺仪（Gyroscope）</strong> — 测量角速度，计算旋转量</li>
<li><strong>磁力计（Magnetometer）</strong> — 以地球磁场为基准校正朝向（Heading）</li>
</ul>
<p>通过<strong>传感器融合（Sensor Fusion）</strong>算法将这三种传感器的数据进行整合，可以实时计算传感器所贴身体部位的3D朝向（Orientation）。通常将15～17个传感器分布在上身、下身、手臂、腿部等主要关节处，通过各传感器之间的关系提取全身骨骼数据。</p>
<p>但是，由于需要对加速度计数据进行二次积分来计算位置，<strong>误差会逐渐累积（漂移）</strong>，因此&quot;我站在空间的哪个位置&quot;这一<strong>全局位置</strong>会随着时间推移变得越来越不准确。这就是惯性式的根本局限。</p>
<p><video src="inertial-vs-optical-mocap/images/Sam_ROM_Raw.mp4" autoplay loop muted playsinline style="width:100%;border-radius:12px;margin:1.5rem 0;"></video></p>
<h3>优点</h3>
<ul>
<li><strong>不受空间限制</strong> — 室外、狭小空间，随时随地可用</li>
<li><strong>快速搭建</strong> — 穿上动捕服后5～15分钟即可开始捕捉</li>
<li><strong>无遮挡问题</strong> — 传感器直接贴在身上，不存在视线遮挡问题</li>
</ul>
<h3>局限</h3>
<ul>
<li><strong>漂移</strong> — 位置数据随时间推移而偏移（累积误差）</li>
<li><strong>全局位置精度低</strong> — 难以精确判断&quot;站在哪里&quot;</li>
<li><strong>磁场干扰</strong> — 在金属结构、电子设备附近数据会失真</li>
<li>难以追踪道具或与环境的交互</li>
</ul>
<h3>代表性设备</h3>
<p><strong>Xsens MVN（现Movella）</strong></p>
<ul>
<li>被认为是惯性式中<strong>精度和可靠性第一</strong>的设备</li>
<li>广泛应用于汽车行业、人体工程学、游戏动画领域</li>
<li>社区评价：<em>&quot;用惯性式的话，Xsens就是答案&quot;</em>，但*&quot;全局位置漂移是无法避免的&quot;*</li>
</ul>
<p><strong>Rokoko Smartsuit Pro</strong></p>
<ul>
<li><strong>价格亲民是最大优势</strong> — 深受独立开发者和个人创作者的欢迎</li>
<li>Rokoko Studio软件直观易用，重定向功能方便</li>
<li>社区评价：<em>&quot;这个价格能做到这种程度，令人惊叹&quot;</em>，但也有*&quot;长时间拍摄漂移明显&quot;<em>、</em>&quot;精细工作有局限&quot;*</li>
</ul>
<p><strong>Noitom Perception Neuron</strong></p>
<ul>
<li>部分型号支持手指追踪，紧凑的外形设计</li>
<li>社区评价：<em>&quot;Neuron 3改进了很多&quot;</em>，但*&quot;漂移问题仍然存在&quot;<em>，</em>&quot;软件（Axis Studio）稳定性有待提高&quot;*</li>
</ul>
<hr>
<h2>一目了然的对比</h2>
<table>
<thead>
<tr>
<th>项目</th>
<th>光学式（Optical）</th>
<th>惯性式（IMU）</th>
</tr>
</thead>
<tbody><tr>
<td><strong>追踪原理</strong></td>
<td>红外摄像机 + 反射标记点三角测量</td>
<td>IMU传感器（加速度计 + 陀螺仪 + 磁力计）</td>
</tr>
<tr>
<td><strong>位置精度</strong></td>
<td><strong>亚毫米（0.1mm）</strong> — 绝对坐标</td>
<td>存在漂移 — 随时间累积误差</td>
</tr>
<tr>
<td><strong>旋转精度</strong></td>
<td>从位置数据推导（非常高）</td>
<td>1～3度水平（取决于传感器融合算法）</td>
</tr>
<tr>
<td><strong>漂移</strong></td>
<td><strong>无</strong> — 每帧测量绝对位置</td>
<td>有 — 加速度二次积分时误差累积</td>
</tr>
<tr>
<td><strong>遮挡</strong></td>
<td>标记点被遮挡时无法追踪</td>
<td><strong>无问题</strong> — 传感器直接贴在身上</td>
</tr>
<tr>
<td><strong>磁场干扰</strong></td>
<td>不受影响</td>
<td>在金属/电子设备附近数据失真</td>
</tr>
<tr>
<td><strong>延迟</strong></td>
<td>～5-10ms</td>
<td>～10-20ms</td>
</tr>
<tr>
<td><strong>搭建时间</strong></td>
<td>30～90分钟（摄像机布置 + 校准）</td>
<td>5～15分钟（穿戴动捕服 + 简单校正）</td>
</tr>
<tr>
<td><strong>拍摄空间</strong></td>
<td>需要专用工作室（安装摄像机·环境控制）</td>
<td><strong>随时随地</strong>（室外、狭小空间均可）</td>
</tr>
<tr>
<td><strong>多人拍摄</strong></td>
<td>通过区分标记组可同时捕捉</td>
<td>每套动捕服独立运行，可同时使用但交互困难</td>
</tr>
<tr>
<td><strong>道具/物体追踪</strong></td>
<td>在道具上贴标记点即可同步追踪</td>
<td>需要额外传感器，实际操作困难</td>
</tr>
<tr>
<td><strong>手指追踪</strong></td>
<td>专用手部标记组实现高精度追踪</td>
<td>仅部分设备支持，精度有限</td>
</tr>
<tr>
<td><strong>后期处理工作量</strong></td>
<td>需要对遮挡区间进行间隙填充</td>
<td>需要漂移校正 + 位置修正</td>
</tr>
<tr>
<td><strong>代表性设备</strong></td>
<td>OptiTrack、Vicon、Qualisys</td>
<td>Xsens、Rokoko、Noitom</td>
</tr>
<tr>
<td><strong>主要应用领域</strong></td>
<td>游戏/电影最终捕捉、VTuber直播、研究</td>
<td>预可视化、户外拍摄、独立/个人内容</td>
</tr>
</tbody></table>
<hr>
<h2>无标记（Markerless）方式如何？</h2>
<p>近年来，仅通过摄像机画面由AI提取动作的<strong>无标记动作捕捉</strong>也备受关注。Move.ai、Captury、Plask等是其中的代表，由于无需贴标记点、用普通摄像机即可捕捉，入门门槛非常低。</p>
<p>然而，目前无标记方式<strong>在精度和稳定性方面远远不及光学式和惯性式。</strong>关节位置频繁出现抖动（Jitter）现象，在快速动作或遮挡情况下追踪变得不稳定。在预可视化或参考用途上可以使用，但在游戏、广播、电影等领域，<strong>尚未达到可以直接用于最终成品的水平。</strong></p>
<p>这是一个技术进步非常快的领域，未来值得期待，但目前在专业制作现场，光学式和惯性式仍然是主流。</p>
<hr>
<h2>社区怎么评价？</h2>
<p>综合Reddit（r/gamedev、r/vfx）、CGSociety等动作捕捉相关社区中反复出现的观点：</p>
<blockquote>
<p><strong>&quot;对最终质量要求高的工作用光学式，注重速度和便捷性的用惯性式。&quot;</strong></p>
</blockquote>
<p>实际上，很多专业工作室<strong>两种方式并用</strong>。先用惯性式快速完成预可视化（Previz）或动作粗排，最终拍摄则使用光学式，这是常见的工作流程。</p>
<p>对于个人创作者或独立团队，普遍建议是先从Rokoko这样入门门槛低的惯性式开始，<strong>在需要精度的项目中租用光学式工作室</strong>，这是最现实的方案。</p>
<hr>
<h2>明格工作室为什么选择光学式</h2>
<p>明格工作室是一家配备了<strong>30台OptiTrack摄像机（Prime 17 × 16台 + Prime 13 × 14台）</strong>的光学式动作捕捉工作室。选择光学式的理由非常明确：</p>
<ul>
<li><strong>精度</strong> — 游戏过场动画、VTuber直播、广播内容等直接用于最终成品的工作，亚毫米精度必不可少</li>
<li><strong>实时串流</strong> — 在VTuber直播等需要实时反馈的场景中，提供无漂移的稳定数据</li>
<li><strong>道具联动</strong> — 可精确追踪与刀、枪、椅子等道具的交互</li>
<li><strong>性价比</strong> — OptiTrack以比Vicon更合理的价格提供专业级精度</li>
<li><strong>手指追踪补充</strong> — 光学式在手指追踪方面的弱点由<strong>Rokoko手套</strong>弥补，全身采用光学式的精度，手指则利用惯性式手套的稳定追踪——汇集了两种方式各自的优势</li>
</ul>
<p>由此可见，光学式和惯性式并非必须二选一。<strong>将各方式的优势组合</strong>起来，可以实现单一方式难以达到的品质。</p>
<p>在8m x 7m的捕捉空间内，30台摄像机实现360度无死角追踪，最大程度减少了遮挡问题。</p>
<h3>明格工作室拍摄工作流程</h3>
<p>当您在明格工作室租用动作捕捉服务时，实际流程如下：</p>
<p><strong>第一步：前期沟通</strong>
事先沟通拍摄目的、所需人数、需要捕捉的动作类型。如果是直播，还会在此阶段商讨虚拟形象、背景和道具的设置方案。</p>
<p><strong>第二步：拍摄准备（搭建）</strong>
您到达工作室后，专业操作人员将进行标记点贴附、校准和虚拟形象映射。直播套餐已包含角色、背景、道具的搭建，无需额外准备。</p>
<p><strong>第三步：正式拍摄 / 直播</strong>
使用30台OptiTrack摄像机 + Rokoko手套同时捕捉全身和手指动作。通过实时监控可以在现场立即查看效果，同时支持远程指导。</p>
<p><strong>第四步：数据交付 / 后期处理</strong>
拍摄结束后即可获取动作数据。根据需要，还可以进行数据清理（去噪、帧校正）以及针对您的虚拟形象优化的重定向后期处理。</p>
<hr>
<h2>应该选择哪种方式？</h2>
<table>
<thead>
<tr>
<th>场景</th>
<th>推荐方式</th>
<th>推荐设备</th>
<th>原因</th>
</tr>
</thead>
<tbody><tr>
<td>个人YouTube/VTuber内容</td>
<td>惯性式</td>
<td>Rokoko、Perception Neuron</td>
<td>搭建简单，不受空间限制</td>
</tr>
<tr>
<td>户外/外景拍摄</td>
<td>惯性式</td>
<td>Xsens MVN</td>
<td>不受空间限制，可靠性高</td>
</tr>
<tr>
<td>预可视化/动作粗排</td>
<td>惯性式</td>
<td>Rokoko、Xsens</td>
<td>适合快速迭代工作</td>
</tr>
<tr>
<td>游戏过场动画/最终动画</td>
<td>光学式</td>
<td>OptiTrack、Vicon</td>
<td>亚毫米精度必不可少</td>
</tr>
<tr>
<td>高品质VTuber直播</td>
<td>光学式</td>
<td>OptiTrack</td>
<td>实时串流 + 无漂移</td>
</tr>
<tr>
<td>道具/环境交互</td>
<td>光学式</td>
<td>OptiTrack、Vicon</td>
<td>在物体上贴标记点即可同步追踪</td>
</tr>
<tr>
<td>医疗/运动研究</td>
<td>光学式</td>
<td>Vicon、Qualisys</td>
<td>需要临床级精密数据</td>
</tr>
<tr>
<td>汽车/人体工程学分析</td>
<td>惯性式</td>
<td>Xsens MVN</td>
<td>可在实际工作环境中测量</td>
</tr>
</tbody></table>
<p>如果自行购买设备负担较大，<strong>租用光学式工作室</strong>是最高效的选择。无需自己配备昂贵设备，也能获得专业级成果。</p>
<hr>
<h2>常见问题（FAQ）</h2>
<p><strong>Q. 光学式和惯性式动作捕捉最大的区别是什么？</strong></p>
<p>光学式通过红外摄像机和反射标记点追踪绝对位置，可提供亚毫米（0.1mm）级别的精度。惯性式佩戴IMU传感器，不受空间限制可随时随地捕捉，但随着时间推移位置数据会产生漂移（累积误差）。</p>
<p><strong>Q. VTuber动作捕捉应该选哪种方式？</strong></p>
<p>简单的个人内容用惯性式（Rokoko、Perception Neuron）就足够了。但如果需要高品质的直播或精细动作，没有漂移的光学式更为合适。</p>
<p><strong>Q. 惯性式动作捕捉的漂移是什么？</strong></p>
<p>漂移是对IMU传感器的加速度数据进行二次积分计算位置时产生的累积误差。拍摄时间越长，角色位置与实际位置的偏差就越大，在存在磁场干扰的环境中会更加严重。</p>
<p><strong>Q. 光学式动作捕捉的遮挡问题怎么解决？</strong></p>
<p>遮挡是指标记点被挡住导致摄像机无法看到时出现的问题。通过增加摄像机数量来减少盲区，并利用软件的间隙填充（Gap Filling）功能对缺失区间进行插值来解决。以明格工作室为例，30台摄像机呈360度布置，将遮挡问题降到最低。</p>
<p><strong>Q. 两种方式可以同时使用吗？</strong></p>
<p>可以。实际上，很多工作室采用混合方式——全身用光学式，手指用惯性式手套进行捕捉。明格工作室也将OptiTrack光学式与Rokoko手套相结合，实现全身和手指的高品质追踪。</p>
<p><strong>Q. 租用动作捕捉工作室就不需要自己买设备了吗？</strong></p>
<p>没错。光学式设备自行购买需要相当大的投资，因此只在需要的项目中租用工作室是最高效的方式。无需承担设备购买、搭建和维护的负担，即可获得专业级成果。</p>
<hr>
<h2>亲身体验光学式动作捕捉</h2>
<p>您无需自行购买设备。在明格工作室，您可以按小时使用<strong>30台OptiTrack + Rokoko手套</strong>的完整配置。</p>
<ul>
<li><strong>动作捕捉录制</strong> — 全身/面部捕捉 + 实时监控 + 动作数据交付</li>
<li><strong>直播全套方案</strong> — 虚拟形象·背景·道具搭建 + 实时串流，一站式服务</li>
</ul>
<p>详细的服务内容和价格请查看<a href="/services">服务介绍页面</a>，拍摄日程请查看<a href="/schedule">日程页面</a>。如有任何疑问，欢迎通过<a href="/contact">联系页面</a>随时与我们沟通。</p>
</div>
</div>
<div class="blog-post-footer">
<div class="container">
<a href="/zh/devlog" class="blog-back-btn"><i class="fas fa-arrow-left"></i> ← 返回列表</a>
</div>
</div>
</article>
</main>
<div id="footer-placeholder"></div>
<script src="/js/i18n.js"></script>
<script src="/js/common.js"></script>
</body>
</html>

BIN
zh/devlog/inertial-vs-optical-mocap/images/Sam_ROM_Raw.mp4
View File

Binary file not shown.

BIN
zh/devlog/inertial-vs-optical-mocap/images/basketball-rigid-body-2x-web.mp4
View File

Binary file not shown.

BIN
zh/devlog/inertial-vs-optical-mocap/images/thumbnail.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 50 KiB

669
zh/devlog/optical-mocap-pipeline.html
View File

@ -1,669 +0,0 @@
<!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 -->
<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>光学动作捕捉管线完全解析 — 从摄像头到动作数据 - 明格工作室 DevLog</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="canonical" href="https://minglestudio.co.kr/zh/devlog/optical-mocap-pipeline">
<meta name="theme-color" content="#ff8800">
<meta name="description" content="深入讲解光学动作捕捉的完整技术管线。涵盖摄像头安装、PoE网络、2D质心、标定、3D重建、骨骼解算、后处理以及现场实际问题，共10个详细步骤。">
<meta name="author" content="明格工作室">
<meta property="og:title" content="光学动作捕捉管线完全解析 — 从摄像头到动作数据">
<meta property="og:description" content="深入讲解光学动作捕捉的完整技术管线。涵盖摄像头安装、PoE网络、2D质心、标定、3D重建、骨骼解算、后处理以及现场实际问题，共10个详细步骤。">
<meta property="og:url" content="https://minglestudio.co.kr/zh/devlog/optical-mocap-pipeline">
<meta property="og:type" content="article">
<meta property="og:image" content="https://minglestudio.co.kr/blog/posts/optical-mocap-pipeline/images/thumbnail.webp">
<meta property="og:locale" content="zh_CN">
<meta property="og:site_name" content="明格工作室">
<meta property="article:published_time" content="2026-04-05">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="光学动作捕捉管线完全解析 — 从摄像头到动作数据">
<meta name="twitter:description" content="深入讲解光学动作捕捉的完整技术管线。涵盖摄像头安装、PoE网络、2D质心、标定、3D重建、骨骼解算、后处理以及现场实际问题，共10个详细步骤。">
<meta name="twitter:image" content="https://minglestudio.co.kr/blog/posts/optical-mocap-pipeline/images/thumbnail.webp">
<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?v=20260404">
<link rel="stylesheet" href="/css/devlog.css?v=20260404">
<link rel="alternate" hreflang="ko" href="https://minglestudio.co.kr/devlog/optical-mocap-pipeline">
<link rel="alternate" hreflang="en" href="https://minglestudio.co.kr/en/devlog/optical-mocap-pipeline">
<link rel="alternate" hreflang="ja" href="https://minglestudio.co.kr/ja/devlog/optical-mocap-pipeline">
<link rel="alternate" hreflang="zh" href="https://minglestudio.co.kr/zh/devlog/optical-mocap-pipeline">
<link rel="alternate" hreflang="x-default" href="https://minglestudio.co.kr/devlog/optical-mocap-pipeline">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BlogPosting",
"headline": "光学动作捕捉管线完全解析 — 从摄像头到动作数据",
"description": "深入讲解光学动作捕捉的完整技术管线。涵盖摄像头安装、PoE网络、2D质心、标定、3D重建、骨骼解算、后处理以及现场实际问题，共10个详细步骤。",
"datePublished": "2026-04-05",
"author": { "@type": "Organization", "name": "明格工作室" },
"publisher": { "@type": "Organization", "name": "明格工作室" },
"url": "https://minglestudio.co.kr/zh/devlog/optical-mocap-pipeline"
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "光学动作捕捉摄像头和普通摄像头有什么区别？",
"acceptedAnswer": {
"@type": "Answer",
"text": "普通摄像头拍摄全彩视频，而动作捕捉摄像头专注于红外（IR）光谱。它们用IR LED照射标记点并仅检测反射光，在摄像头内部直接计算标记点的2D坐标，只向PC传输坐标数据。"
}
},
{
"@type": "Question",
"name": "PoE线缆长度有限制吗？",
"acceptedAnswer": {
"@type": "Answer",
"text": "根据以太网标准，PoE线缆最长支持**100m**。大多数动作捕捉工作室完全在此范围内。"
}
},
{
"@type": "Question",
"name": "摄像头帧率是不是越高越好？",
"acceptedAnswer": {
"@type": "Answer",
"text": "更高的帧率有利于快速动作追踪和降低延迟，但数据处理量会增加，摄像头分辨率可能会降低。通常VTuber直播和游戏动作捕捉120~240fps就已足够，而体育科学等超高速动作分析则使用360fps或更高。"
}
},
{
"@type": "Question",
"name": "标记点交换发生的频率有多高？",
"acceptedAnswer": {
"@type": "Answer",
"text": "如果标记点集设计良好且摄像头数量充足，实时拍摄中交换现象很少发生。但在快速动作或标记点间距较近的动作（如双手合十等）中概率会增加，这些区间在后处理中校正。"
}
},
{
"@type": "Question",
"name": "三角测量2台就够了，为什么要安装30台？",
"acceptedAnswer": {
"@type": "Answer",
"text": "2台只是理论最小值。实际上需要考虑遮挡（标记点被挡住）、不同摄像头角度导致的精度差异、冗余保障等因素。布置30台后，任何标记点都始终被多台摄像头观测，能够实现稳定精确的追踪。"
}
},
{
"@type": "Question",
"name": "多久需要进行一次标定？",
"acceptedAnswer": {
"@type": "Answer",
"text": "通常在每个拍摄日开始前进行一次。但长时间拍摄时，温度变化或摄像头微小移动可能导致标定偏移，因此4~6小时连续拍摄时建议中途重新标定。使用OptiTrack Motive的Continuous Calibration功能，即使在拍摄过程中也能进行实时校正。"
}
},
{
"@type": "Question",
"name": "不能穿闪亮的衣服吗？",
"acceptedAnswer": {
"@type": "Answer",
"text": "由于动作捕捉摄像头检测的是红外反射，闪亮材质（金属装饰、亮片、有光泽的合成纤维等）可能反射红外线并产生虚假标记点（Ghost Marker）。穿戴专用动捕服或哑光材质的舒适衣物是最佳选择。"
}
}
]
}
</script>
</head>
<body>
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PPTNN6WD"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<a href="#main-content" class="skip-to-content">Skip to content</a>
<div id="header-placeholder">
<nav class="navbar" aria-label="Navigation">
<div class="nav-container">
<div class="nav-logo">
<a href="/zh">
<img src="/images/logo/mingle-logo.webp" alt="밍글 스튜디오">
<span data-i18n="header.studioName">밍글 스튜디오</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/schedule" class="nav-link" data-i18n="header.nav.schedule">Schedule</a></li>
<li><a href="/zh/devlog" class="nav-link active" data-i18n="header.nav.devlog">DevLog</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="Language">
<span class="lang-current">ZH</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="Toggle dark mode">
<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>
<button class="hamburger" id="hamburger" aria-label="Menu" aria-expanded="false">
<span class="hamburger-line"></span>
<span class="hamburger-line"></span>
<span class="hamburger-line"></span>
</button>
</div>
</div>
</nav>
</div>
<main id="main-content">
<article class="blog-post">
<div class="blog-post-header">
<div class="container">
<a href="/zh/devlog" class="blog-back-link">← 返回列表</a>
<span class="blog-category">动作捕捉技术</span>
<h1 class="blog-post-title">光学动作捕捉管线完全解析 — 从摄像头到动作数据</h1>
<div class="blog-post-meta">
<time datetime="2026-04-05">2026年4月5日</time>
</div>
</div>
</div>
<div class="blog-post-body">
<div class="container">
<p>在动作捕捉工作室中，当演员穿上动捕服进行表演时，屏幕上的角色会实时跟随其动作。看起来很简单，但其背后运行着一条精密的技术管线：<strong>摄像头硬件 → 网络传输 → 2D图像处理 → 3D重建 → 骨骼解算 → 实时串流</strong>。</p>
<p>本文将逐步剖析光学动作捕捉（以OptiTrack为基准）的完整管线。</p>
<hr>
<h2>第1步：摄像头安装与布局策略</h2>
<p>光学动作捕捉的第一步是决定摄像头<strong>放在哪里、如何布置</strong>。</p>
<p><figure class="blog-figure"><img src="/images/studio/모션캡쳐%20공간%20001.webp" alt="明格工作室动作捕捉空间" loading="lazy"><figcaption>明格工作室动作捕捉空间</figcaption></figure></p>
<h3>布局原则</h3>
<ul>
<li><strong>高度</strong>：通常安装在2~3m高度，向下倾斜约30度</li>
<li><strong>布局形态</strong>：围绕捕捉体积（拍摄空间）呈环形（Ring）布置</li>
<li><strong>双层布局</strong>：在高位和低位交替放置摄像头，可提升垂直方向的覆盖范围</li>
<li><strong>重叠（Overlap）</strong>：捕捉体积内的每个点都必须同时被<strong>至少3台摄像头</strong>看到。三角测量最少需要2台，但3台以上能显著提升精度和遮挡应对能力</li>
</ul>
<h3>摄像头数量与精度的关系</h3>
<p>摄像头数量越多：</p>
<ul>
<li>盲区越少 → 遮挡发生概率降低</li>
<li>观测同一标记点的摄像头越多 → 三角测量精度提升</li>
<li>部分摄像头出现问题时其他摄像头可以补偿（冗余性）</li>
</ul>
<p>明格工作室配备了<strong>OptiTrack Prime 17 × 16台 + Prime 13 × 14台</strong>，共30台摄像头布置在8m × 7m的空间中，最大限度地减少了360度盲区。</p>
<h3>IR通过滤光片 — 只看红外线的眼睛</h3>
<p>每台动作捕捉摄像头的镜头前方都安装了<strong>IR通过滤光片（红外通过滤光片）</strong>。该滤光片阻挡可见光，仅允许红外线波长（约850nm）通过。因此，荧光灯、阳光、显示器光线等普通照明的干扰被从根本上消除，摄像头只能检测到<strong>IR LED反射的标记点光线</strong>。</p>
<p>这也是拍摄空间不需要完全关灯的原因。不过，直射阳光或含有强IR成分的照明仍可能造成干扰，因此工作室环境中使用IR干扰较小的照明设备。</p>
<h3>帧同步 — 30台摄像头如何同时拍摄</h3>
<p>要使三角测量准确，所有摄像头必须在<strong>完全相同的时刻</strong>按下快门。如果各台摄像头在不同时间拍摄，快速运动的标记点位置会因摄像头而异，导致3D重建不准确。</p>
<p>OptiTrack采用<strong>硬件同步（Hardware Sync）<strong>方式。一台摄像头被指定为</strong>Sync Master（同步主机）</strong>生成时序信号，其余摄像头根据该信号同时曝光。</p>
<ul>
<li><strong>以太网摄像头（Prime系列）</strong>：同步信号内嵌在以太网连接本身中，或通过OptiTrack的eSync集线器传输。无需单独的同步线缆。</li>
<li><strong>USB摄像头（Flex系列）</strong>：摄像头之间通过专用同步线缆以菊花链方式连接。</li>
</ul>
<p>该同步精度达到<strong>微秒（μs）级别</strong>，30台摄像头实际上在完全相同的时刻进行拍摄。</p>
<hr>
<h2>第2步：PoE — 一根线缆同时传输电力和数据</h2>
<h3>什么是PoE（Power over Ethernet）？</h3>
<p>OptiTrack Prime系列摄像头通过<strong>PoE（Power over Ethernet）</strong>方式连接。这是一种通过标准以太网线缆（Cat5e/Cat6）<strong>同时提供电力和传输数据</strong>的技术。</p>
<p><figure class="blog-figure"><img src="optical-mocap-pipeline/images/poe-switch.png" alt="PoE交换机与摄像头连接" loading="lazy"><figcaption>PoE交换机与摄像头连接</figcaption></figure></p>
<h3>技术标准</h3>
<table>
<thead>
<tr>
<th>标准</th>
<th>最大功率</th>
<th>备注</th>
</tr>
</thead>
<tbody><tr>
<td><strong>IEEE 802.3af (PoE)</strong></td>
<td>每端口15.4W</td>
<td>足以满足基本动作捕捉摄像头</td>
</tr>
<tr>
<td><strong>IEEE 802.3at (PoE+)</strong></td>
<td>每端口25.5W</td>
<td>适用于高帧率摄像头或IR LED输出较高的情况</td>
</tr>
</tbody></table>
<p>OptiTrack摄像头通常功耗约<strong>5~12W</strong>，完全在PoE标准范围内。</p>
<h3>网络拓扑</h3>
<p>摄像头以<strong>星型（Star）拓扑</strong>方式连接。每台摄像头1对1连接到PoE交换机的独立端口。不使用菊花链（串行连接）。</p>
<div class="network-diagram">
<div class="network-cameras">
<div class="network-cam"><div class="network-cam-icon">CAM 1</div></div>
<div class="network-cam"><div class="network-cam-icon">CAM 2</div></div>
<div class="network-cam"><div class="network-cam-icon">CAM 3</div></div>
<div class="network-cam"><div class="network-cam-icon">···</div></div>
<div class="network-cam"><div class="network-cam-icon">CAM N</div></div>
</div>
<svg class="network-lines" viewBox="0 0 100 200" preserveAspectRatio="none">
<line x1="0" y1="20" x2="100" y2="45" />
<line x1="0" y1="55" x2="100" y2="45" />
<line x1="0" y1="90" x2="100" y2="45" />
<line x1="0" y1="125" x2="100" y2="45" />
<line x1="0" y1="160" x2="100" y2="45" />
</svg>
<div class="network-center">
<div class="network-switch">PoE交换机</div>
<div class="network-link"></div>
<div class="network-pc">主机PC</div>
</div>
</div>
<p>如果有30台摄像头，可以组合使用24端口 + 8端口的PoE+交换机，或使用48端口交换机。选择交换机时必须确认<strong>PoE总功率预算</strong>（例如：30台 × 12W = 360W）。</p>
<h3>PoE的优势</h3>
<ul>
<li><strong>一根线缆搞定</strong> — 无需为安装在天花板上的每台摄像头单独连接电源适配器</li>
<li><strong>整洁的施工</strong> — 线缆数量减半，安装和管理更加简便</li>
<li><strong>集中电源管理</strong> — 可从交换机统一控制摄像头的开关</li>
</ul>
<hr>
<h2>第3步：摄像头发送的数据 — 2D质心</h2>
<p>理解摄像头向PC发送的数据内容是管线的核心。</p>
<p><figure class="blog-figure"><img src="optical-mocap-pipeline/images/motive-2d-centroid.png" alt="Motive摄像头2D视图 — 标记点显示为明亮的点" loading="lazy"><figcaption>Motive摄像头2D视图 — 标记点显示为明亮的点</figcaption></figure></p>
<h3>摄像头内部处理过程</h3>
<p>每台OptiTrack摄像头的镜头周围都安装了<strong>红外（IR）LED环</strong>。这些LED发射红外线，演员身上的<strong>逆反射标记点</strong>将光线反射回摄像头方向。摄像头传感器将这些反射光拍摄为灰度IR图像。</p>
<p>这里的关键是，摄像头<strong>并不会将这张图像直接发送给PC</strong>。摄像头内部处理器会先进行处理：</p>
<p><strong>1. 阈值处理（Thresholding）</strong>
只保留亮度超过一定阈值的像素，其余全部去除。由于只有反射红外线的标记点会发出明亮的光，这个过程实现了标记点与背景的分离。</p>
<p><strong>2. 斑点检测（Blob Detection）</strong>
将明亮像素聚集的区域（斑点）识别为单个标记点候选。</p>
<p><strong>3. 2D质心计算</strong>
以亚像素精度（约0.1像素）计算每个斑点的<strong>精确中心点（质心）</strong>。采用加权平均方法，以斑点内各像素的亮度作为权重。</p>
<h3>发送给PC的数据</h3>
<p>在默认追踪模式下，摄像头发送给PC的是<strong>2D质心数据</strong>：</p>
<ul>
<li>每个标记点候选的<strong>(x, y)坐标</strong> + 大小信息</li>
<li>每台摄像头每帧仅数百字节的极小数据量</li>
</ul>
<p>正因为数据量如此之小，<strong>40台以上的摄像头仅需一条千兆以太网即可满足需求</strong>。也可以传输原始灰度图像（用于调试/可视化），但这种情况下每台摄像头需要数MB/s，因此在正常追踪中不使用。</p>
<blockquote>
<p>也就是说，摄像头并不是&quot;拍摄并发送视频的设备&quot;，更接近于<strong>&quot;计算标记点位置并仅发送坐标的传感器&quot;</strong>。</p>
</blockquote>
<p>这里可能会产生一个疑问——为什么动作捕捉摄像头比普通摄像头贵那么多？原因就在于上面描述的处理过程。普通摄像头只需将拍摄的视频原样发送即可，而动作捕捉摄像头<strong>内置了专用处理器</strong>，能以每秒240~360帧的速度实时执行阈值处理、斑点检测和亚像素质心计算。每台摄像头实际上就是一台<strong>专门用于图像处理的小型计算机</strong>。</p>
<hr>
<h2>第4步：标定 — 对齐摄像头的视线</h2>
<p>在进行3D重建之前，有一个必须经历的过程。软件需要了解每台摄像头的<strong>精确位置、方向和镜头特性</strong> — 这就是<strong>标定（Calibration）</strong>。</p>
<p><figure class="blog-figure"><img src="optical-mocap-pipeline/images/calibration-tools.webp" alt="标定棒（左）和地面参考框架（右）" loading="lazy"><figcaption>标定棒（左）和地面参考框架（右）</figcaption></figure></p>
<h3>挥棒（Wanding） — 扫描空间</h3>
<p>操作员手持装有LED或标记点的<strong>标定棒（Wand）</strong>，在整个捕捉体积范围内走动并挥舞。由于棒上标记点之间的距离是精确已知的，当各台摄像头拍摄标定棒数千帧后，软件可以计算出：</p>
<ul>
<li><strong>内参（Intrinsic Parameters）</strong> — 焦距、镜头畸变系数等摄像头镜头固有的特性</li>
<li><strong>外参（Extrinsic Parameters）</strong> — 摄像头在3D空间中的精确位置和方向</li>
</ul>
<p>该计算使用一种名为<strong>光束法平差（Bundle Adjustment）</strong>的优化算法。基于数千个2D观测数据，同时优化所有摄像头的参数。</p>
<h3>地面参考设置</h3>
<p>挥棒完成后，在地板上放置一个<strong>L形标定框架（Ground Plane）</strong>。该框架上的3个或更多标记点定义了地面和坐标原点：</p>
<ul>
<li>哪里是(0, 0, 0)（原点）</li>
<li>哪个方向是X、Y、Z轴</li>
<li>地面的高度基准</li>
</ul>
<p>标定完成后，软件就能将任何摄像头的2D坐标转换为精确的3D射线。</p>
<h3>标定质量</h3>
<p>Motive软件在标定后会显示每台摄像头的<strong>重投影误差（Reprojection Error）</strong>。该值越小（通常0.5像素以下），表示标定越精确。误差较大的摄像头需要调整位置或重新标定。</p>
<hr>
<h2>第5步：2D → 3D重建（三角测量）</h2>
<p>让我们看看到达PC的2D质心是如何转换为3D坐标的。</p>
<h3>三角测量（Triangulation）原理</h3>
<ol>
<li>利用标定获得的每台摄像头的<strong>精确3D位置、方向和镜头特性</strong></li>
<li>从摄像头的2D质心坐标发射一条<strong>射线（Ray）</strong> — 从摄像头位置沿质心方向延伸到3D空间的直线</li>
<li>观测同一标记点的<strong>2台或更多摄像头发射的射线交汇之处</strong>即为标记点的3D坐标</li>
</ol>
<p><video src="optical-mocap-pipeline/images/continuous-calibration-web.mp4" autoplay loop muted playsinline style="width:100%;border-radius:12px;margin:1.5rem 0;"></video></p>
<h3>实际上射线并不会完美交汇</h3>
<p>由于噪声、镜头畸变、标定误差等因素，射线几乎不可能精确交于一点。因此使用<strong>最小二乘法（Least Squares Optimization）</strong>：</p>
<ul>
<li>计算到所有射线距离之和最小的3D坐标</li>
<li>此时每条射线与重建的3D点之间的距离称为<strong>残差（Residual）</strong></li>
<li>残差越小，重建质量越好 — 在标定良好的OptiTrack系统中，可以期望<strong>亚毫米级（0.5mm以下）的残差</strong></li>
</ul>
<h3>摄像头数量的影响</h3>
<table>
<thead>
<tr>
<th>观测该标记点的摄像头数</th>
<th>效果</th>
</tr>
</thead>
<tbody><tr>
<td><strong>2台</strong></td>
<td>可以进行3D重建（最低条件）</td>
</tr>
<tr>
<td><strong>3台</strong></td>
<td>精度提升 + 即使1台被遮挡也能维持追踪</td>
</tr>
<tr>
<td><strong>4台以上</strong></td>
<td>高精度 + 强遮挡抗性</td>
</tr>
</tbody></table>
<hr>
<h2>第6步：标记点识别与标注</h2>
<h3>标记点服装与标记点布置</h3>
<p>要将3D重建转化为有意义的动作数据，标记点必须贴在身体的<strong>精确位置</strong>上。</p>
<p><strong>标记点规格</strong></p>
<ul>
<li>直径：通常使用<strong>12~19mm</strong>的球形逆反射标记点</li>
<li>材质：覆有3M逆反射胶带的泡沫/塑料球</li>
<li>固定方式：魔术贴、双面胶带，或预装在专用标记点服上</li>
</ul>
<p><strong>标记点集规格</strong>
标记点贴在哪里、贴几个，遵循标准化的<strong>标记点集（Markerset）</strong>规格：</p>
<ul>
<li><strong>Baseline（37个标记点）</strong> — OptiTrack默认全身标记点集。覆盖上半身、下半身和头部，是游戏/影视动作捕捉中最常用的</li>
<li><strong>Baseline + Fingers（约57个标记点）</strong> — 在上述基础上增加约20个手指标记点的扩展版</li>
<li><strong>Helen Hayes（约15~19个标记点）</strong> — 医学/步态分析标准。以下半身为中心的最小标记点集</li>
</ul>
<p>标记点贴在<strong>骨骼突出的解剖学标志点</strong>（肩峰、外侧上髁、髂前上棘等）。这些位置在皮肤上最能准确反映骨骼运动，且皮肤滑移（Skin Artifact）最小。</p>
<p>3D重建完成后，每一帧都会产生一团<strong>无名称的3D点云（Point Cloud）</strong>。判断&quot;这个点是左膝标记点还是右肩标记点&quot;的过程就是<strong>标注（Labeling）</strong>。</p>
<p><figure class="blog-figure"><img src="optical-mocap-pipeline/images/marker-labeling.png" alt="Motive中标记点被标注的样子" loading="lazy"><figcaption>Motive中标记点被标注的样子</figcaption></figure></p>
<h3>标注算法</h3>
<p><strong>模板匹配（Template Matching）</strong>
以标定时定义的标记点集的几何布局（如膝盖与踝关节标记点之间的距离）为基准，将当前帧的3D点与模板进行对照。</p>
<p><strong>预测追踪（Predictive Tracking）</strong>
基于前一帧的速度和加速度，预测下一帧各标记点的位置，并与最近的3D点进行匹配。</p>
<h3>标记点交换（Swap）问题</h3>
<p>当两个标记点非常接近地经过彼此时，软件可能会<strong>交换两个标记点的标签</strong> — 即标签互换现象。这是光学动捕中最常见的伪影之一。</p>
<p>解决方法：</p>
<ul>
<li>在后处理中手动纠正标签</li>
<li>将标记点布置设计为<strong>不对称</strong>以便于区分</li>
<li>使用<strong>主动标记点（Active Marker）</strong> — 每个标记点发射独特的红外模式，在硬件层面实现识别，从根本上杜绝交换</li>
</ul>
<h3>被动标记点 vs 主动标记点</h3>
<table>
<thead>
<tr>
<th>类别</th>
<th>被动标记点（反射型）</th>
<th>主动标记点（发光型）</th>
</tr>
</thead>
<tbody><tr>
<td><strong>原理</strong></td>
<td>反射摄像头IR LED的光</td>
<td>标记点自身发射独特的IR模式</td>
</tr>
<tr>
<td><strong>识别</strong></td>
<td>基于软件（可能发生交换）</td>
<td>基于硬件（无交换）</td>
</tr>
<tr>
<td><strong>优点</strong></td>
<td>轻便、便宜、易于安装</td>
<td>自动识别、无标注错误</td>
</tr>
<tr>
<td><strong>缺点</strong></td>
<td>可能需要后处理标注</td>
<td>较重，需要电池/电源</td>
</tr>
</tbody></table>
<p>在大多数娱乐/VTuber制作现场，主要使用<strong>被动标记点</strong>。因为它们轻便舒适，而且软件性能足够好，在大多数情况下自动标注都能良好运作。</p>
<hr>
<h2>第7步：骨骼解算 — 从点到骨架</h2>
<p>将标注好的3D标记点映射到人体<strong>骨骼（Skeleton）</strong>结构的步骤。</p>
<h3>预标定</h3>
<p>拍摄前，演员摆出<strong>T-Pose</strong>（双臂展开的姿势），软件根据标记点位置计算各骨骼长度（臂长、腿长等）和关节位置。</p>
<p>接着进行<strong>ROM（Range of Motion）捕捉</strong>。</p>
<p><figure class="blog-figure"><img src="optical-mocap-pipeline/images/rom-grid.webp" alt="ROM捕捉 — 通过各种动作校准关节范围的过程" loading="lazy"><figcaption>ROM捕捉 — 通过各种动作校准关节范围的过程</figcaption></figure>
通过旋转手臂、弯曲膝盖、扭转上身等各种动作，软件精确校准<strong>关节中心点和旋转轴</strong>。</p>
<h3>实时解算</h3>
<p>拍摄过程中，每一帧都会：</p>
<ol>
<li>接收标注后的3D标记点坐标</li>
<li>根据标记点位置计算各关节的<strong>3D位置和旋转值（Rotation）</strong></li>
<li>通过<strong>逆运动学（Inverse Kinematics）</strong>等算法计算自然的骨骼姿态</li>
<li>结果：时间轴上所有关节的<strong>位置（Translation）+ 旋转（Rotation）</strong>数据</li>
</ol>
<h3>刚体追踪（道具追踪）</h3>
<p>在刀、枪、摄像机等道具上<strong>不对称地贴上3个或更多标记点</strong>后，软件会将该标记点集群识别为一个刚体（Rigid Body），实现<strong>6DOF（3轴位置 + 3轴旋转）</strong>追踪。</p>
<hr>
<h2>第8步：实时串流与数据输出</h2>
<h3>实时串流</h3>
<p><figure class="blog-figure"><img src="optical-mocap-pipeline/images/realtime-streaming.png" alt="实时串流 — 从Motive向游戏引擎发送动作数据" loading="lazy"><figcaption>实时串流 — 从Motive向游戏引擎发送动作数据</figcaption></figure></p>
<p>OptiTrack Motive将解算后的数据实时传递给外部软件：</p>
<ul>
<li><strong>NatNet SDK</strong> — OptiTrack自有协议，基于UDP的低延迟传输</li>
<li><strong>VRPN</strong> — VR/动捕领域的标准协议</li>
</ul>
<p>通过这些协议，可以在<strong>Unity、Unreal Engine、MotionBuilder</strong>等软件中实时驱动角色。VTuber直播之所以成为可能，也正是得益于这种实时串流。</p>
<h3>录制数据输出格式</h3>
<table>
<thead>
<tr>
<th>格式</th>
<th>用途</th>
</tr>
</thead>
<tbody><tr>
<td><strong>FBX</strong></td>
<td>骨骼 + 动画数据，兼容游戏引擎/DCC工具</td>
</tr>
<tr>
<td><strong>BVH</strong></td>
<td>层级动作数据，主要用于重定向</td>
</tr>
<tr>
<td><strong>C3D</strong></td>
<td>原始3D标记点数据，生物力学/研究标准</td>
</tr>
</tbody></table>
<hr>
<h2>第9步：后处理 — 打磨数据的过程</h2>
<p><figure class="blog-figure"><img src="optical-mocap-pipeline/images/post-processing.png" alt="后处理工作 — 在Motive中整理动作数据的过程" loading="lazy"><figcaption>后处理工作 — 在Motive中整理动作数据的过程</figcaption></figure></p>
<p>实时捕捉获取的数据有时可以直接使用，但大多数专业工作需要经过<strong>后处理（Post-Processing）</strong>阶段。</p>
<h3>间隙填充（Gap Filling）</h3>
<p>用<strong>插值（Interpolation）</strong>填补因遮挡导致标记点暂时消失的区间。</p>
<ul>
<li><strong>线性插值（Linear）</strong> — 简单地用直线连接前后帧。适用于短间隙</li>
<li><strong>样条插值（Spline）</strong> — 用曲线平滑填充。有利于保持自然运动</li>
<li><strong>基于模式的插值</strong> — 参考重复相同动作的其他拍摄数据来填充</li>
</ul>
<p>间隙越长，插值精度越低，因此拍摄时最大限度地减少遮挡才是最重要的。</p>
<h3>平滑（Smoothing）与滤波</h3>
<p>捕捉到的数据可能包含细微抖动（高频噪声）。为去除这些噪声：</p>
<ul>
<li><strong>巴特沃斯滤波器（Butterworth Filter）</strong> — 去除指定频率以上噪声的低通滤波器</li>
<li><strong>高斯平滑</strong> — 通过周围帧的加权平均来缓解抖动</li>
</ul>
<p>但过度平滑会导致动作的<strong>细节和冲击力</strong>丧失，因此必须设置适当的强度，避免将挥剑瞬间的锐利动作也模糊掉。</p>
<h3>标记点交换校正</h3>
<p>找到第6步中描述的标记点交换发生的区间，手动纠正标签。在Motive中，可以在时间线上直观地查看和校正标记点轨迹。</p>
<h3>重定向（Retargeting）</h3>
<p>将捕捉到的骨骼数据应用于<strong>不同体型比例的角色</strong>的过程。例如，要将170cm演员的动作数据应用于3m的巨人角色或150cm的儿童角色，需要在保持关节旋转的同时，根据目标角色重新计算骨骼长度。MotionBuilder、Maya、Unreal Engine等提供重定向功能。</p>
<hr>
<h2>第10步：现场常见问题及应对方法</h2>
<p>即便看似技术完美的光学动捕，在实际现场也会遇到各种问题。</p>
<h3>杂散反射（Stray Reflections）</h3>
<p>红外线从标记点以外的物体反射，产生<strong>虚假标记点（Ghost Marker）</strong>的现象。</p>
<ul>
<li>原因：金属表面、闪亮的衣服、眼镜、手表、地板反射等</li>
<li>应对：用哑光胶带覆盖反射表面，或在Motive中对该区域进行<strong>遮罩（Masking）</strong>处理，使软件忽略该区域</li>
</ul>
<h3>标记点脱落</h3>
<p>剧烈运动中标记点从服装上脱落或位置偏移。</p>
<ul>
<li>应对：拍摄前仔细检查标记点的粘贴状态；进行剧烈动作捕捉时，同时使用魔术贴 + 双面胶带增强固定力</li>
<li>中途监控标记点状态也很重要</li>
</ul>
<h3>服装限制</h3>
<p>拍摄时演员穿的衣服理想选择是<strong>浅色、哑光材质</strong>。黑色不影响标记点反射，但闪亮材质或宽松衣物会导致标记点位置不稳定或产生杂散反射。穿戴专用动捕服是最稳定的选择。</p>
<h3>标定维护</h3>
<p>捕捉体积内的温度变化、摄像头振动、三脚架微小移动等因素可能导致标定逐渐偏移。长时间拍摄时，建议中途进行<strong>重新标定</strong>，或使用Motive的<strong>Continuous Calibration（持续标定）</strong>功能进行实时校正。</p>
<hr>
<h2>延迟 — 从动作到屏幕需要多久？</h2>
<p>管线各阶段的耗时如下。</p>
<table>
<thead>
<tr>
<th>阶段</th>
<th>耗时</th>
</tr>
</thead>
<tbody><tr>
<td>摄像头曝光（以240fps为基准）</td>
<td>约4.2ms</td>
</tr>
<tr>
<td>摄像头内部处理（质心计算）</td>
<td>约0.5~1ms</td>
</tr>
<tr>
<td>网络传输（PoE → PC）</td>
<td>&lt; 1ms</td>
</tr>
<tr>
<td>3D重建 + 标注</td>
<td>约1~2ms</td>
</tr>
<tr>
<td>骨骼解算</td>
<td>约0.5~1ms</td>
</tr>
<tr>
<td>串流输出（NatNet）</td>
<td>&lt; 1ms</td>
</tr>
<tr>
<td><strong>总端到端延迟</strong></td>
<td><strong>约8~14ms（以240fps为基准）</strong></td>
</tr>
</tbody></table>
<p>在360fps下，曝光时间缩短，延迟可降至<strong>7ms以下</strong>。这样的延迟水平人类几乎无法感知，即使在VTuber直播中也能实现自然的实时响应。</p>
<blockquote>
<p>注：延迟的大部分来自<strong>摄像头曝光时间（帧周期）</strong>。这就是帧率越高延迟越低的原因。</p>
</blockquote>
<hr>
<h2>完整管线总结</h2>
<div class="pipeline-flow">
<div class="pipeline-step">
<div class="pipeline-step-title">1. 摄像头安装 · IR滤光片 · 帧同步</div>
<p class="pipeline-step-desc">30台摄像头环形布置，IR通过滤光片仅检测红外线，硬件同步实现μs级精度</p>
</div>
<div class="pipeline-arrow">↓</div>
<div class="pipeline-step">
<div class="pipeline-step-title">2. PoE网络</div>
<p class="pipeline-step-desc">一根Cat6线缆同时传输电力和数据，以星型拓扑连接至交换机</p>
</div>
<div class="pipeline-arrow">↓</div>
<div class="pipeline-step">
<div class="pipeline-step-title">3. 摄像头板载处理 → 2D质心</div>
<p class="pipeline-step-desc">IR LED发射 → 接收标记点反射光 → 阈值处理 → 斑点检测 → 亚像素质心计算 → 仅传输坐标</p>
</div>
<div class="pipeline-arrow">↓</div>
<div class="pipeline-step">
<div class="pipeline-step-title">4. 标定</div>
<p class="pipeline-step-desc">通过挥棒获取摄像头内参/外参，通过地面参考定义坐标系</p>
</div>
<div class="pipeline-arrow">↓</div>
<div class="pipeline-step">
<div class="pipeline-step-title">5. 2D → 3D三角测量</div>
<p class="pipeline-step-desc">从多台摄像头的2D坐标射出射线交叉 + 最小二乘法重建3D坐标</p>
</div>
<div class="pipeline-arrow">↓</div>
<div class="pipeline-step">
<div class="pipeline-step-title">6. 标记点标注</div>
<p class="pipeline-step-desc">模板匹配 + 预测追踪为每个3D点分配标记点名称</p>
</div>
<div class="pipeline-arrow">↓</div>
<div class="pipeline-step">
<div class="pipeline-step-title">7. 骨骼解算</div>
<p class="pipeline-step-desc">基于T-Pose + ROM标定，通过逆运动学计算关节位置与旋转</p>
</div>
<div class="pipeline-arrow">↓</div>
<div class="pipeline-step">
<div class="pipeline-step-title">8. 实时串流 · 数据输出</div>
<p class="pipeline-step-desc">通过NatNet/VRPN实时传输至Unity/Unreal/MotionBuilder，录制为FBX/BVH/C3D</p>
</div>
<div class="pipeline-arrow">↓</div>
<div class="pipeline-step">
<div class="pipeline-step-title">9. 后处理</div>
<p class="pipeline-step-desc">间隙填充 · 平滑 · 标记点交换校正 · 重定向</p>
</div>
<div class="pipeline-arrow">↓</div>
<div class="pipeline-step">
<div class="pipeline-step-title">最终成果</div>
<p class="pipeline-step-desc">应用于游戏过场动画 · VTuber直播 · 视频内容（总延迟约8~14ms）</p>
</div>
</div>
<p>摄像头拍摄的图像并不是直接发送到PC的——而是由摄像头自行计算标记点坐标后发送，PC将这些坐标重建为3D并映射到骨骼上。这就是光学动作捕捉的核心原理。</p>
<hr>
<h2>常见问题（FAQ）</h2>
<p><strong>Q. 光学动作捕捉摄像头和普通摄像头有什么区别？</strong></p>
<p>普通摄像头拍摄全彩视频，而动作捕捉摄像头专注于红外（IR）光谱。它们用IR LED照射标记点并仅检测反射光，在摄像头内部直接计算标记点的2D坐标，只向PC传输坐标数据。</p>
<p><strong>Q. PoE线缆长度有限制吗？</strong></p>
<p>根据以太网标准，PoE线缆最长支持<strong>100m</strong>。大多数动作捕捉工作室完全在此范围内。</p>
<p><strong>Q. 摄像头帧率是不是越高越好？</strong></p>
<p>更高的帧率有利于快速动作追踪和降低延迟，但数据处理量会增加，摄像头分辨率可能会降低。通常VTuber直播和游戏动作捕捉120~240fps就已足够，而体育科学等超高速动作分析则使用360fps或更高。</p>
<p><strong>Q. 标记点交换发生的频率有多高？</strong></p>
<p>如果标记点集设计良好且摄像头数量充足，实时拍摄中交换现象很少发生。但在快速动作或标记点间距较近的动作（如双手合十等）中概率会增加，这些区间在后处理中校正。</p>
<p><strong>Q. 三角测量2台就够了，为什么要安装30台？</strong></p>
<p>2台只是理论最小值。实际上需要考虑遮挡（标记点被挡住）、不同摄像头角度导致的精度差异、冗余保障等因素。布置30台后，任何标记点都始终被多台摄像头观测，能够实现稳定精确的追踪。</p>
<p><strong>Q. 多久需要进行一次标定？</strong></p>
<p>通常在每个拍摄日开始前进行一次。但长时间拍摄时，温度变化或摄像头微小移动可能导致标定偏移，因此4~6小时连续拍摄时建议中途重新标定。使用OptiTrack Motive的Continuous Calibration功能，即使在拍摄过程中也能进行实时校正。</p>
<p><strong>Q. 不能穿闪亮的衣服吗？</strong></p>
<p>由于动作捕捉摄像头检测的是红外反射，闪亮材质（金属装饰、亮片、有光泽的合成纤维等）可能反射红外线并产生虚假标记点（Ghost Marker）。穿戴专用动捕服或哑光材质的舒适衣物是最佳选择。</p>
<hr>
<p>如果您对光学动作捕捉的技术结构有更多疑问，欢迎在<a href="/contact">联系页面</a>随时提问。如果您想在明格工作室亲身体验，请查看<a href="/services">服务介绍</a>。</p>
</div>
</div>
<div class="blog-post-footer">
<div class="container">
<a href="/zh/devlog" class="blog-back-btn"><i class="fas fa-arrow-left"></i> ← 返回列表</a>
</div>
</div>
</article>
</main>
<div id="footer-placeholder"></div>
<script src="/js/i18n.js"></script>
<script src="/js/common.js"></script>
</body>
</html>

BIN
zh/devlog/optical-mocap-pipeline/images/calibration-tools.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 27 KiB

BIN
zh/devlog/optical-mocap-pipeline/images/continuous-calibration-web.mp4
View File

Binary file not shown.

Some files were not shown because too many files have changed in this diff Show More