347 lines
16 KiB
HTML
347 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>포트폴리오 - 밍글 스튜디오</title>
|
|
|
|
<!-- 파비콘 -->
|
|
<link rel="icon" type="image/webp" href="/mingle-logo.webp">
|
|
<link rel="shortcut icon" type="image/webp" href="/mingle-logo.webp">
|
|
|
|
<!-- Canonical URL -->
|
|
<link rel="canonical" href="https://minglestudio.co.kr/portfolio.html">
|
|
|
|
<!-- Theme Color -->
|
|
<meta name="theme-color" content="#ff8800">
|
|
|
|
<!-- SEO 메타 태그 -->
|
|
<meta name="description" content="밍글 스튜디오 포트폴리오 - 모션캡쳐로 제작된 YouTube 콘텐츠, 버튜버 방송, Shorts 영상 모음">
|
|
<meta name="keywords" content="모션캡쳐 포트폴리오, 버튜버 방송, YouTube 영상, 3D 모션, 실시간 스트리밍">
|
|
<meta name="author" content="밍글 스튜디오">
|
|
|
|
<!-- Open Graph -->
|
|
<meta property="og:title" content="포트폴리오 - 밍글 스튜디오">
|
|
<meta property="og:description" content="모션캡쳐로 제작된 다양한 영상 콘텐츠를 확인해보세요">
|
|
<meta property="og:url" content="https://minglestudio.co.kr/portfolio.html">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:image" content="https://minglestudio.co.kr/mingle-logo.webp">
|
|
<meta property="og:site_name" content="밍글 스튜디오">
|
|
|
|
<!-- Twitter Card -->
|
|
<meta name="twitter:card" content="summary">
|
|
<meta name="twitter:title" content="포트폴리오 - 밍글 스튜디오">
|
|
<meta name="twitter:description" content="모션캡쳐로 제작된 다양한 영상 콘텐츠를 확인해보세요">
|
|
<meta name="twitter:image" content="https://minglestudio.co.kr/mingle-logo.webp">
|
|
|
|
<!-- 폰트 -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap" rel="stylesheet">
|
|
<link href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css" rel="stylesheet">
|
|
|
|
<!-- 아이콘 폰트 (이모지 대체용) -->
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">
|
|
|
|
<!-- CSS -->
|
|
<link rel="stylesheet" href="css/common.css">
|
|
<link rel="stylesheet" href="css/portfolio.css">
|
|
</head>
|
|
<body>
|
|
<!-- 헤더 -->
|
|
<div id="header-placeholder"></div>
|
|
|
|
<!-- 브레드크럼 -->
|
|
<nav class="breadcrumb">
|
|
<div class="container">
|
|
<ol class="breadcrumb-list">
|
|
<li class="breadcrumb-item">
|
|
<a href="index.html" class="breadcrumb-link breadcrumb-home">🏠 홈</a>
|
|
</li>
|
|
<li class="breadcrumb-item">
|
|
<span class="breadcrumb-current">포트폴리오</span>
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- 페이지 헤더 -->
|
|
<section class="page-header">
|
|
<div class="container">
|
|
<h1>Portfolio</h1>
|
|
<p>밍글 스튜디오에서 제작하고 협업한 모션캡쳐 콘텐츠</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>밍글 스튜디오 공식 채널</h2>
|
|
<p>최신 모션캡쳐 콘텐츠와 제작 과정을 YouTube에서 확인하세요</p>
|
|
</div>
|
|
</div>
|
|
<a href="https://www.youtube.com/@mingle_studio" target="_blank" class="btn btn-primary">
|
|
YouTube 채널 방문하기
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Long-Form 콘텐츠 -->
|
|
<section class="section bg-light">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<h2>Long-Form 콘텐츠</h2>
|
|
<p>밍글 스튜디오의 주요 모션캡쳐 프로젝트</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>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Shorts 콘텐츠 -->
|
|
<section class="section">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<h2>Shorts 콘텐츠</h2>
|
|
<p>짧고 임팩트 있는 모션캡쳐 순간들</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>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 실시간 방송 예시 -->
|
|
<section class="section bg-gradient">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<h2>실시간 방송 예시</h2>
|
|
<p>버튜버와 스트리머들의 실시간 모션캡쳐 방송</p>
|
|
</div>
|
|
|
|
<div class="broadcast-notice">
|
|
<div class="notice-icon">🔴</div>
|
|
<div class="notice-content">
|
|
<h3>실시간 모션캡쳐 방송</h3>
|
|
<p>밍글 스튜디오에서 진행되는 실시간 모션캡쳐 방송을 통해 고품질 버추얼 콘텐츠를 경험하세요</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">춤짱자매즈</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">치요 & 마늘</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>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 기술 특징 -->
|
|
<section class="section">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<h2>기술적 특징</h2>
|
|
<p>밍글 스튜디오 모션캡쳐의 핵심 기술</p>
|
|
</div>
|
|
|
|
<div class="tech-features">
|
|
<div class="tech-feature">
|
|
<div class="tech-icon">⚡</div>
|
|
<h3>실시간 처리</h3>
|
|
<p>28대 OptiTrack 카메라로 실시간 모션 데이터 처리</p>
|
|
</div>
|
|
|
|
<div class="tech-feature">
|
|
<div class="tech-icon">🎯</div>
|
|
<h3>정밀 트래킹</h3>
|
|
<p>전신과 페이셜 모션을 동시에 정밀 캡쳐</p>
|
|
</div>
|
|
|
|
<div class="tech-feature">
|
|
<div class="tech-icon">📡</div>
|
|
<h3>스트리밍 서비스</h3>
|
|
<p>현재 준비중 (곧 출시 예정)</p>
|
|
</div>
|
|
|
|
<div class="tech-feature">
|
|
<div class="tech-icon">🔄</div>
|
|
<h3>다양한 포맷</h3>
|
|
<p>FBX, ANIM 포맷으로 데이터 출력</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA -->
|
|
<section class="cta-section">
|
|
<div class="container text-center">
|
|
<h2>당신의 콘텐츠도 여기에</h2>
|
|
<p>밍글 스튜디오와 함께 다음 포트폴리오의 주인공이 되어보세요</p>
|
|
<div class="cta-buttons">
|
|
<a href="contact.html" class="btn btn-primary btn-lg">프로젝트 문의하기</a>
|
|
<a href="services.html" class="btn btn-outline btn-lg">서비스 알아보기</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 푸터 -->
|
|
<div id="footer-placeholder"></div>
|
|
|
|
<!-- 백업 푸터 (JavaScript 로드 실패 시) -->
|
|
<footer class="section" style="background:#222;color:#fff;padding:2.5rem 0 1.2rem;">
|
|
<div class="container" style="text-align:center;">
|
|
<div style="font-size:1.15rem;font-weight:700;letter-spacing:0.02em;">회사명: 밍글 스튜디오 | 대표: 김희진</div>
|
|
<div style="margin:0.3rem 0 0.2rem;">주소: (21330) 인천광역시 부평구 주부토로 236, 인천테크노밸리 A동 B105호</div>
|
|
<div style="margin:0.3rem 0 0.2rem;">전화: 010-9288-9190 | 이메일: minglestudio.mocap@gmail.com</div>
|
|
<div style="margin:0.3rem 0 0.2rem;">사업자등록번호: 208-12-73755</div>
|
|
<div style="color:#bbb;font-size:0.98rem;margin-top:0.7rem;">© 2025 밍글 스튜디오. All rights reserved.</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- JavaScript -->
|
|
<script src="js/common.js"></script>
|
|
<script src="js/portfolio.js"></script>
|
|
</body>
|
|
</html> |