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

ADD : 파트너사 웹페이지 업데이트

Browse Source
This commit is contained in:
KINDNICK 2025-09-18 21:11:46 +09:00
parent ca88e829ad
commit ba08e352d4
11 changed files with 1373 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

121
CLAUDE.md Normal file
View File

@ -0,0 +1,121 @@
# CLAUDE.md
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
## Project Overview
This is the official website for 밍글 스튜디오 (Mingle Studio), a motion capture studio located in Incheon, South Korea. The website is a multi-page static site built with vanilla HTML, CSS, and JavaScript, showcasing motion capture services, studio galleries, and client portfolios.
## Architecture & Structure
### Page Architecture
The site follows a modular component-based structure:
- **Main Pages**: `index.html`, `about.html`, `services.html`, `portfolio.html`, `gallery.html`, `contact.html`, `qna.html`, `404.html`
- **Shared Components**: `components/header.html`, `components/footer.html`
- **Page-specific Assets**: Each page has dedicated CSS (`css/[page].css`) and JavaScript (`js/[page].js`) files
- **Common Assets**: `css/common.css` and `js/common.js` provide shared functionality
### Component Loading System
The site uses a dynamic component loading system implemented in `js/common.js`:
- Header and footer are loaded via `fetch()` API from `components/` directory
- Fallback system: Static backup footer is hidden when dynamic loading succeeds
- Components are initialized after DOM load with proper error handling
### CSS Architecture
- **CSS Variables**: Defined in `:root` of `common.css` with motion capture/VTuber orange theme
- **Modular Approach**: Common styles in `common.css`, page-specific styles in separate files
- **Responsive Design**: Mobile-first approach with breakpoints at 768px and 1200px
- **Color Scheme**: Primary orange (`#ff8800`) with gradient variations for modern tech aesthetic
## Development Commands
### Quick Start (권장)
**Windows:**
```cmd
# 더블클릭으로 실행
start-server.bat
```
**macOS/Linux:**
```bash
# 터미널에서 실행
./start-server.sh
```
### Manual Server Start
**Node.js (권장):**
```bash
npm run dev # http://localhost:8000
npm start # 같은 기능
npm run serve # 같은 기능
npm test # 도움말 + 서버 시작
```
**Python:**
```bash
python server.py # 커스텀 서버 (추천)
python -m http.server 8000 # 기본 서버
```
### Development Features
- **자동 브라우저 열기**: 서버 시작 시 자동으로 브라우저에서 사이트 열림
- **Clean URLs**: `.html` 확장자 없이 접근 가능 (`/about`, `/services` 등)
- **개발 최적화**: 캐시 비활성화, CORS 헤더 추가
- **오류 처리**: 포트 충돌 및 기본적인 오류 상황 처리
### Available URLs
- Homepage: http://localhost:8000/
- About: http://localhost:8000/about
- Services: http://localhost:8000/services
- Portfolio: http://localhost:8000/portfolio
- Gallery: http://localhost:8000/gallery
- Contact: http://localhost:8000/contact
- Q&A: http://localhost:8000/qna
## Key Technical Details
### SEO Optimization
- Structured data (JSON-LD) with LocalBusiness schema for search engines
- Comprehensive meta tags including Open Graph, Twitter Cards, and Korean platform-specific tags
- Sitemap.xml without lastmod dates to prevent unwanted date display in search results
- Favicon system: Both ICO (`mingle-logo.ico`) and WebP (`mingle-logo.webp`) formats
### Image Management
- Studio images stored in `Studio_Image/` directory using WebP format for optimization
- Gallery system dynamically references these images with descriptive alt text
- Logo assets: `mingle-logo.webp` (primary) and `mingle-logo.ico` (favicon)
### Form Handling & Interactivity
- Contact form with real-time validation in `js/contact.js`
- Lazy loading implementation for performance optimization
- Scroll animations and intersection observers for modern UX
## Content Management
### Adding Gallery Images
1. Add new WebP images to `Studio_Image/` directory
2. Update `gallery.html` with new gallery items following the existing pattern:
```html
<div class="gallery-item">
<img src="Studio_Image/[filename].webp" alt="descriptive text" class="gallery-img" loading="lazy">
<div class="gallery-caption">Caption Text</div>
</div>
```
### Adding Portfolio Videos
- YouTube videos: Update `portfolio.html` with iframe embed using `data-src` for lazy loading
- SOOP/streaming VODs: Direct iframe source for broadcast examples
### Navigation Updates
When adding new pages, update `components/header.html` navigation links and ensure corresponding CSS/JS files follow the naming convention.
## Business Context
This website represents a motion capture studio business with:
- **Primary Service**: OptiTrack-based motion capture studio rental (22만원/hour)
- **Target Market**: VTubers, game developers, content creators
- **Location**: Incheon Techno Valley, unique positioning as Incheon's only motion capture facility
- **Technical Specs**: 28 OptiTrack cameras, 8×7m capture space
Understanding this context helps with content updates, SEO optimization, and feature development that aligns with the studio's business objectives.

BIN
Partners/메가메타.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

16
components/header.html
View File

@ -2,19 +2,19 @@
<nav class="navbar">
<div class="nav-container">
<div class="nav-logo">
<a href="index.html">
<a href="/">
<img src="/mingle-logo.webp" alt="밍글 스튜디오 - 인천 모션캡쳐 전문 스튜디오 로고">
<span>밍글 스튜디오</span>
</a>
</div>
<ul class="nav-menu">
<li><a href="index.html" class="nav-link">Home</a></li>
<li><a href="about.html" class="nav-link">About</a></li>
<li><a href="services.html" class="nav-link">Services</a></li>
<li><a href="portfolio.html" class="nav-link">Portfolio</a></li>
<li><a href="gallery.html" class="nav-link">Gallery</a></li>
<li><a href="contact.html" class="nav-link">Contact</a></li>
<li><a href="qna.html" class="nav-link">Q&A</a></li>
<li><a href="/" class="nav-link">Home</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="/contact" class="nav-link">Contact</a></li>
<li><a href="/qna" class="nav-link">Q&A</a></li>
</ul>
<div class="hamburger">
<span></span>

356
css/main.css
View File

@ -533,6 +533,310 @@
font-size: var(--font-sm);
}
/* ========================================
기업 파트너 섹션
======================================== */
.partners-section {
background: var(--bg-white);
padding: var(--spacing-3xl) 0;
}
.partners-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--spacing-xl);
max-width: 1000px;
margin: 0 auto;
padding: var(--spacing-xl) 0;
}
.partner-logo-item {
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.partner-logo-item:hover {
transform: translateY(-5px);
}
.partner-placeholder {
width: 180px;
height: 120px;
background: var(--bg-light);
border: 2px dashed var(--border-color);
border-radius: var(--border-radius);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.partner-placeholder:hover {
border-color: var(--primary-color);
background: rgba(255, 136, 0, 0.05);
}
.partner-placeholder-text {
font-size: var(--font-sm);
color: var(--text-secondary);
font-weight: 500;
text-align: center;
}
.partner-logo-item img {
width: 180px;
height: 120px;
object-fit: contain;
object-position: center;
filter: grayscale(100%);
transition: all 0.3s ease;
background: var(--bg-light);
border-radius: var(--border-radius);
padding: var(--spacing-md);
border: 1px solid rgba(0, 0, 0, 0.05);
}
.partner-logo-item:hover img {
filter: grayscale(0%);
transform: scale(1.02);
background: white;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
/* 단일 파트너 특별 스타일 */
.partners-grid.single-partner {
display: flex;
justify-content: center;
align-items: center;
max-width: 500px;
}
.partner-logo-item.featured-partner {
background: transparent;
border-radius: var(--border-radius-lg);
padding: var(--spacing-lg);
text-align: center;
transition: all 0.4s ease;
width: 100%;
max-width: 300px;
}
.partner-logo-item.featured-partner:hover {
transform: translateY(-5px);
}
.featured-partner .partner-logo {
width: 240px;
height: 140px;
object-fit: contain;
object-position: center;
filter: grayscale(30%);
background: var(--bg-white);
border-radius: var(--border-radius-lg);
padding: var(--spacing-lg);
border: 1px solid rgba(0, 0, 0, 0.08);
box-shadow: var(--shadow-md);
display: block;
transition: all 0.3s ease;
}
.featured-partner:hover .partner-logo {
filter: grayscale(0%);
transform: scale(1.05);
box-shadow: var(--shadow-lg);
}
/* ========================================
비디오 콘텐츠 섹션
======================================== */
.video-content-section {
background: var(--bg-light);
padding: var(--spacing-3xl) 0;
}
.video-tabs {
display: flex;
justify-content: center;
gap: var(--spacing-xs);
margin-bottom: var(--spacing-2xl);
border-bottom: 1px solid var(--border-color);
padding-bottom: var(--spacing-md);
}
.video-tab-btn {
background: none;
border: none;
padding: var(--spacing-md) var(--spacing-xl);
font-size: var(--font-base);
font-weight: 600;
color: var(--text-secondary);
cursor: pointer;
border-radius: var(--border-radius) var(--border-radius) 0 0;
transition: all 0.3s ease;
position: relative;
}
.video-tab-btn:hover {
color: var(--primary-color);
background: rgba(255, 136, 0, 0.05);
}
.video-tab-btn.active {
color: var(--primary-color);
background: var(--bg-white);
border: 1px solid var(--border-color);
border-bottom: 1px solid var(--bg-white);
margin-bottom: -1px;
}
.video-tab-btn.active::after {
content: '';
position: absolute;
bottom: -1px;
left: 0;
right: 0;
height: 2px;
background: var(--primary-color);
}
.video-tab-content {
display: none;
animation: fadeIn 0.5s ease;
}
.video-tab-content.active {
display: block;
}
/* 라이브 비디오 그리드 */
.live-videos-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: var(--spacing-xl);
margin-bottom: var(--spacing-xl);
}
.live-video-item {
background: var(--bg-white);
border-radius: var(--border-radius);
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: all 0.3s ease;
}
.live-video-item:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-md);
}
.video-placeholder {
width: 100%;
height: 200px;
background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 100%);
display: flex;
align-items: center;
justify-content: center;
position: relative;
border-bottom: 1px solid var(--border-color);
}
.video-placeholder.vertical {
height: 300px;
aspect-ratio: 9/16;
}
.video-wrapper {
width: 100%;
height: 200px;
position: relative;
border-bottom: 1px solid var(--border-color);
overflow: hidden;
}
.video-wrapper.vertical {
height: 300px;
aspect-ratio: 9/16;
}
.video-wrapper iframe {
width: 100%;
height: 100%;
border: none;
}
.video-placeholder-text {
font-size: var(--font-base);
color: var(--text-secondary);
font-weight: 500;
}
.live-indicator {
position: absolute;
top: var(--spacing-sm);
right: var(--spacing-sm);
background: #ef4444;
color: white;
padding: var(--spacing-xs) var(--spacing-sm);
border-radius: var(--border-radius);
font-size: var(--font-xs);
font-weight: 600;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
.live-video-item h3 {
font-size: var(--font-lg);
font-weight: 600;
color: var(--text-primary);
margin: var(--spacing-md);
margin-bottom: var(--spacing-xs);
}
.live-video-item p {
font-size: var(--font-sm);
color: var(--text-secondary);
margin: 0 var(--spacing-md) var(--spacing-md);
}
/* 숏폼 비디오 그리드 */
.shorts-videos-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: var(--spacing-lg);
max-width: 800px;
margin: 0 auto var(--spacing-xl);
}
.shorts-video-item {
background: var(--bg-white);
border-radius: var(--border-radius);
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: all 0.3s ease;
}
.shorts-video-item:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-md);
}
.shorts-video-item h4 {
font-size: var(--font-sm);
font-weight: 600;
color: var(--text-primary);
margin: var(--spacing-sm);
text-align: center;
}
/* 유틸리티 클래스 */
.text-center {
text-align: center;
@ -616,6 +920,24 @@
grid-template-columns: 1fr;
}
.partners-grid {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: var(--spacing-lg);
}
.live-videos-grid {
grid-template-columns: 1fr;
}
.shorts-videos-grid {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.video-tabs {
flex-direction: column;
align-items: center;
}
.cta-title {
font-size: var(--font-3xl);
}
@ -651,6 +973,40 @@
flex-direction: column;
}
.partners-grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-md);
}
.partner-placeholder {
width: 140px;
height: 100px;
}
/* 단일 파트너 모바일 스타일 */
.partners-grid.single-partner {
max-width: 90%;
}
.partner-logo-item.featured-partner {
padding: var(--spacing-xl);
max-width: none;
}
.featured-partner .partner-logo {
width: 180px;
height: 110px;
}
.shorts-videos-grid {
grid-template-columns: repeat(2, 1fr);
}
.video-tab-btn {
padding: var(--spacing-sm) var(--spacing-lg);
font-size: var(--font-sm);
}
.contact-info-quick {
flex-direction: column;
gap: var(--spacing-sm);

309
css/portfolio.css
View File

@ -2,6 +2,148 @@
Portfolio 페이지 전용 스타일
======================================== */
/* ========================================
포트폴리오 탭 시스템
======================================== */
.portfolio-tabs {
margin-bottom: 0;
}
.tab-buttons {
display: flex;
justify-content: center;
gap: 1rem;
margin-bottom: 2rem;
}
.tab-btn {
background: transparent;
border: 2px solid var(--primary-color);
padding: 0.75rem 2rem;
border-radius: 50px;
font-weight: 600;
font-size: 1rem;
color: var(--primary-color);
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.tab-btn:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(255, 136, 0, 0.3);
}
.tab-btn.active {
background: var(--primary-color);
color: white;
}
.tab-btn.active::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: left 0.5s;
}
.tab-btn.active:hover::before {
left: 100%;
}
/* 탭 콘텐츠 */
.tab-content {
display: none;
}
.tab-content.active {
display: block;
animation: fadeIn 0.5s ease-in-out;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ========================================
기업 포트폴리오 Coming Soon 스타일
======================================== */
.coming-soon {
min-height: 400px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.coming-soon-content {
max-width: 600px;
padding: 3rem 2rem;
background: white;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
border: 1px solid #f0f0f0;
}
.coming-soon-icon {
font-size: 4rem;
margin-bottom: 1.5rem;
}
.coming-soon h3 {
font-size: 1.8rem;
color: var(--text-primary);
margin-bottom: 1rem;
}
.coming-soon p {
color: var(--text-secondary);
font-size: 1.1rem;
line-height: 1.6;
margin-bottom: 2rem;
}
.business-features {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
margin: 2.5rem 0;
}
.feature-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 1rem;
background: var(--gradient-warm);
border-radius: 12px;
transition: transform 0.3s ease;
}
.feature-item:hover {
transform: translateY(-3px);
}
.feature-icon {
font-size: 1.5rem;
}
.feature-item span:last-child {
font-weight: 500;
color: var(--text-primary);
}
/* 페이지 헤더 */
.page-header {
background: var(--gradient-main);
@ -447,4 +589,171 @@
.tech-icon {
font-size: 2.5rem;
}
/* 탭 시스템 모바일 반응형 */
.tab-buttons {
flex-direction: column;
align-items: center;
gap: 0.75rem;
}
.tab-btn {
width: 200px;
text-align: center;
}
.business-features {
grid-template-columns: 1fr;
gap: 1rem;
}
.coming-soon-content {
padding: 2rem 1.5rem;
margin: 0 1rem;
}
.coming-soon-icon {
font-size: 3rem;
}
}
/* ========================================
기업 프로젝트 스타일
======================================== */
.corporate-project-showcase {
background: var(--bg-white);
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-lg);
overflow: hidden;
margin-bottom: var(--spacing-2xl);
}
.project-header {
background: linear-gradient(135deg, var(--primary-color) 0%, #ff9933 100%);
padding: var(--spacing-2xl);
color: white;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: var(--spacing-lg);
}
.project-logo h3 {
font-size: var(--font-2xl);
font-weight: 700;
margin-bottom: var(--spacing-xs);
}
.project-logo p {
font-size: var(--font-base);
opacity: 0.9;
}
.project-tags {
display: flex;
gap: var(--spacing-sm);
flex-wrap: wrap;
}
.project-tags .tag {
background: rgba(255, 255, 255, 0.2);
color: white;
border: 1px solid rgba(255, 255, 255, 0.3);
font-weight: 500;
}
.project-section {
padding: var(--spacing-2xl);
border-bottom: 1px solid var(--border-color);
}
.project-section:last-child {
border-bottom: none;
}
.project-section h4 {
font-size: var(--font-xl);
font-weight: 600;
color: var(--text-primary);
margin-bottom: var(--spacing-lg);
position: relative;
padding-left: var(--spacing-lg);
}
.project-section h4::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 20px;
background: var(--primary-color);
border-radius: 2px;
}
/* 기업 프로젝트 비디오 그리드 */
.corporate-longform {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-xl);
max-width: 800px;
margin: 0 auto;
}
.corporate-shorts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--spacing-xl);
max-width: 600px;
margin: 0 auto;
}
.corporate-live {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: var(--spacing-xl);
}
/* 기업 프로젝트 반응형 */
@media (max-width: 768px) {
.project-header {
flex-direction: column;
text-align: center;
}
.project-section {
padding: var(--spacing-xl);
}
.corporate-shorts {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.corporate-live {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.project-header {
padding: var(--spacing-xl);
}
.project-logo h3 {
font-size: var(--font-xl);
}
.project-section {
padding: var(--spacing-lg);
}
.project-section h4 {
font-size: var(--font-lg);
}
.corporate-shorts {
grid-template-columns: 1fr;
}
}

33
index.html
View File

@ -305,8 +305,8 @@
새로운 가치가 만들어지는 공간
</p>
<div class="hero-buttons">
<a href="about.html" class="btn btn-primary">회사 소개 보기</a>
<a href="contact.html" class="btn btn-outline">예약 문의하기</a>
<a href="/about" class="btn btn-primary">회사 소개 보기</a>
<a href="/contact" class="btn btn-outline">예약 문의하기</a>
</div>
<!-- 간단한 스펙 표시 -->
@ -411,7 +411,7 @@
</div>
<div class="text-center mt-4">
<a href="services.html" class="btn btn-secondary">전체 서비스 보기</a>
<a href="/services" class="btn btn-secondary">전체 서비스 보기</a>
</div>
</div>
</section>
@ -449,7 +449,7 @@
</div>
<div class="text-center mt-4">
<a href="gallery.html" class="btn btn-primary">갤러리 보기</a>
<a href="/gallery" class="btn btn-primary">갤러리 보기</a>
</div>
</div>
</section>
@ -478,7 +478,24 @@
</div>
<div class="text-center mt-4">
<a href="portfolio.html" class="btn btn-secondary">전체 포트폴리오</a>
<a href="/portfolio" class="btn btn-secondary">전체 포트폴리오</a>
</div>
</div>
</section>
<!-- 기업 파트너 섹션 -->
<section class="partners-section section">
<div class="container">
<div class="section-header">
<h2>파트너사</h2>
<p>다양한 분야의 기업들과 함께 혁신적인 모션캡쳐 콘텐츠를 제작합니다</p>
</div>
<!-- 파트너 로고 그리드 -->
<div class="partners-grid single-partner">
<div class="partner-logo-item featured-partner">
<img src="Partners/메가메타.jpg" alt="메가메타 - 밍글 스튜디오 파트너사" class="partner-logo">
</div>
</div>
</div>
</section>
@ -494,8 +511,8 @@
<div class="text-center">
<div class="cta-buttons">
<a href="qna.html" class="btn btn-primary btn-lg">자주 묻는 질문</a>
<a href="contact.html" class="btn btn-outline btn-lg">직접 문의하기</a>
<a href="/qna" class="btn btn-primary btn-lg">자주 묻는 질문</a>
<a href="/contact" class="btn btn-outline btn-lg">직접 문의하기</a>
</div>
</div>
</div>
@ -510,7 +527,7 @@
최첨단 모션캡쳐 시스템으로 여러분의 창작 비전을 실현해보세요
</p>
<div class="cta-buttons">
<a href="contact.html" class="btn btn-primary btn-lg">예약 문의하기</a>
<a href="/contact" class="btn btn-primary btn-lg">예약 문의하기</a>
<a href="https://m.booking.naver.com/booking/10/bizes/1468174/items/6949481" target="_blank" class="btn btn-outline btn-lg">네이버 예약</a>
</div>

176
js/main.js
View File

@ -5,6 +5,8 @@
document.addEventListener('DOMContentLoaded', function() {
initMainPageAnimations();
initCounterAnimation();
initVideoTabs();
initVideoLazyLoading();
});
// ========================================
@ -113,6 +115,180 @@ window.addEventListener('scroll', () => {
});
});
// ========================================
// 비디오 탭 시스템
// ========================================
function initVideoTabs() {
const tabButtons = document.querySelectorAll('.video-tab-btn');
const tabContents = document.querySelectorAll('.video-tab-content');
if (tabButtons.length === 0) return; // 탭이 없으면 종료
// 탭 버튼 클릭 이벤트
tabButtons.forEach(button => {
button.addEventListener('click', () => {
const targetTab = button.getAttribute('data-tab');
// 모든 탭 버튼에서 active 클래스 제거
tabButtons.forEach(btn => btn.classList.remove('active'));
// 클릭된 탭 버튼에 active 클래스 추가
button.classList.add('active');
// 모든 탭 콘텐츠 숨기기
tabContents.forEach(content => {
content.classList.remove('active');
});
// 선택된 탭 콘텐츠 표시
const activeContent = document.getElementById(targetTab);
if (activeContent) {
activeContent.classList.add('active');
// 탭 전환 애니메이션
activeContent.style.opacity = '0';
activeContent.style.transform = 'translateY(20px)';
setTimeout(() => {
activeContent.style.transition = 'all 0.3s ease';
activeContent.style.opacity = '1';
activeContent.style.transform = 'translateY(0)';
}, 50);
}
});
// 키보드 접근성
button.addEventListener('keydown', (e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
button.click();
}
});
});
// 파트너 로고 애니메이션
const partnerItems = document.querySelectorAll('.partner-logo-item');
if (partnerItems.length > 0) {
const partnerObserver = new IntersectionObserver((entries) => {
entries.forEach((entry, index) => {
if (entry.isIntersecting) {
setTimeout(() => {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}, index * 100);
partnerObserver.unobserve(entry.target);
}
});
}, { threshold: 0.1 });
partnerItems.forEach(item => {
item.style.opacity = '0';
item.style.transform = 'translateY(30px)';
item.style.transition = 'all 0.6s ease';
partnerObserver.observe(item);
});
}
// 비디오 아이템 애니메이션
const videoItems = document.querySelectorAll('.live-video-item, .shorts-video-item');
if (videoItems.length > 0) {
const videoObserver = new IntersectionObserver((entries) => {
entries.forEach((entry, index) => {
if (entry.isIntersecting) {
setTimeout(() => {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}, index * 150);
videoObserver.unobserve(entry.target);
}
});
}, { threshold: 0.1 });
videoItems.forEach(item => {
item.style.opacity = '0';
item.style.transform = 'translateY(30px)';
item.style.transition = 'all 0.6s ease';
videoObserver.observe(item);
});
}
}
// ========================================
// 비디오 레이지 로딩
// ========================================
function initVideoLazyLoading() {
const videoWrappers = document.querySelectorAll('.video-wrapper');
// Intersection Observer를 사용한 레이지 로딩
const observerOptions = {
threshold: 0.1,
rootMargin: '50px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
loadVideo(entry.target);
observer.unobserve(entry.target);
}
});
}, observerOptions);
videoWrappers.forEach(wrapper => {
observer.observe(wrapper);
// 로딩 상태 표시
if (!wrapper.querySelector('.video-loading')) {
const loadingDiv = document.createElement('div');
loadingDiv.className = 'video-loading';
loadingDiv.textContent = '비디오 로딩 중...';
loadingDiv.style.cssText = `
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: var(--text-secondary);
font-size: var(--font-sm);
z-index: 10;
`;
wrapper.appendChild(loadingDiv);
}
});
}
// 비디오 로딩
function loadVideo(wrapper) {
const iframe = wrapper.querySelector('iframe');
if (iframe && iframe.dataset.src) {
// 실제 src 설정
iframe.src = iframe.dataset.src;
// 로딩 완료 처리
iframe.addEventListener('load', function() {
wrapper.classList.add('loaded');
const loadingDiv = wrapper.querySelector('.video-loading');
if (loadingDiv) {
loadingDiv.remove();
}
});
// 에러 처리
iframe.addEventListener('error', function() {
const loadingDiv = wrapper.querySelector('.video-loading');
if (loadingDiv) {
loadingDiv.textContent = '비디오를 로드할 수 없습니다';
loadingDiv.style.color = '#ef4444';
}
});
} else {
// 이미 src가 설정된 경우
wrapper.classList.add('loaded');
const loadingDiv = wrapper.querySelector('.video-loading');
if (loadingDiv) {
loadingDiv.remove();
}
}
}
// ========================================
// 마우스 호버 효과
// ========================================

47
js/portfolio.js
View File

@ -3,12 +3,59 @@
// ========================================
document.addEventListener('DOMContentLoaded', function() {
initPortfolioTabs();
initVideoLazyLoading();
initPortfolioAnimations();
initVideoInteractions();
initYouTubeAPI();
});
// ========================================
// 포트폴리오 탭 시스템
// ========================================
function initPortfolioTabs() {
const tabButtons = document.querySelectorAll('.tab-btn');
const tabContents = document.querySelectorAll('.tab-content');
// 탭 버튼 클릭 이벤트
tabButtons.forEach(button => {
button.addEventListener('click', () => {
const targetTab = button.getAttribute('data-tab');
// 모든 탭 버튼에서 active 클래스 제거
tabButtons.forEach(btn => btn.classList.remove('active'));
// 클릭된 탭 버튼에 active 클래스 추가
button.classList.add('active');
// 모든 탭 콘텐츠 숨기기
tabContents.forEach(content => {
content.classList.remove('active');
});
// 선택된 탭 콘텐츠 표시
const activeContent = document.getElementById(targetTab);
if (activeContent) {
activeContent.classList.add('active');
// 탭 전환 시 비디오 레이지 로딩 재초기화
setTimeout(() => {
initVideoLazyLoading();
}, 100);
}
});
});
// 키보드 접근성
tabButtons.forEach(button => {
button.addEventListener('keydown', (e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
button.click();
}
});
});
}
// 비디오 레이지 로딩 초기화
function initVideoLazyLoading() {
const videoWrappers = document.querySelectorAll('.video-wrapper');

30
package.json Normal file
View File

@ -0,0 +1,30 @@
{
"name": "mingle-studio-website",
"version": "1.0.0",
"description": "밍글 스튜디오 공식 웹사이트 - 인천 모션캡쳐 전문 스튜디오",
"main": "index.html",
"scripts": {
"dev": "npx serve . --listen 8000 --no-clipboard --no-compression --cors",
"start": "npx serve . --listen 8000 --no-clipboard --no-compression --cors",
"serve": "npx serve . --listen 8000 --no-clipboard --no-compression --cors",
"preview": "python -m http.server 8000",
"python": "python server.py",
"test": "echo \"웹사이트를 http://localhost:8000 에서 확인하세요\" && npm run dev"
},
"keywords": [
"motion-capture",
"studio",
"optitrack",
"vtuber",
"3d-animation"
],
"author": "밍글 스튜디오",
"license": "MIT",
"repository": {
"type": "git",
"url": "https://github.com/mingle-studio/website"
},
"devDependencies": {
"serve": "^14.2.0"
}
}

147
portfolio.html
View File

@ -55,7 +55,7 @@
<div class="container">
<ol class="breadcrumb-list">
<li class="breadcrumb-item">
<a href="index.html" class="breadcrumb-link breadcrumb-home">🏠 홈</a>
<a href="/" class="breadcrumb-link breadcrumb-home">🏠 홈</a>
</li>
<li class="breadcrumb-item">
<span class="breadcrumb-current">포트폴리오</span>
@ -90,12 +90,26 @@
</div>
</section>
<!-- Long-Form 콘텐츠 -->
<!-- 포트폴리오 탭 네비게이션 -->
<section class="section">
<div class="container">
<div class="portfolio-tabs">
<div class="tab-buttons">
<button class="tab-btn active" data-tab="individual">개인 크리에이터</button>
<button class="tab-btn" data-tab="corporate">기업 프로젝트</button>
</div>
</div>
</div>
</section>
<!-- 개인 크리에이터 포트폴리오 -->
<div class="tab-content active" id="individual">
<!-- Long-Form 콘텐츠 - 개인 -->
<section class="section bg-light">
<div class="container">
<div class="section-header">
<h2>Long-Form 콘텐츠</h2>
<p>밍글 스튜디오의 주요 모션캡쳐 프로젝트</p>
<p>개인 크리에이터들의 모션캡쳐 프로젝트</p>
</div>
<div class="video-grid longform-grid">
@ -166,6 +180,7 @@
</div>
</div>
</div>
</div>
</div>
</section>
@ -211,6 +226,7 @@
<h4>Memory 깡담비 #하이라이트 #shorts</h4>
</div>
</div>
</div>
</div>
</section>
@ -307,9 +323,130 @@
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 개인 크리에이터 포트폴리오 끝 -->
<!-- 기업 프로젝트 포트폴리오 -->
<div class="tab-content" id="corporate">
<section class="section bg-light">
<div class="container">
<div class="section-header">
<h2>기업 프로젝트</h2>
<p>기업 및 상업적 모션캡쳐 프로젝트</p>
</div>
<!-- IXIA 기업 프로젝트 -->
<div class="corporate-project-showcase">
<div class="project-header">
<div class="project-logo">
<h3>아이시아(IXIA)</h3>
<p>버추얼 아이돌 그룹 모션캡쳐 제작</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>뮤직비디오 제작</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>숏폼비디오 제작</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>라이브 방송 진행</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>
<!-- 기업 프로젝트 포트폴리오 끝 -->
<!-- 기술 특징 -->
<section class="section">
@ -353,8 +490,8 @@
<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>
<a href="/contact" class="btn btn-primary btn-lg">프로젝트 문의하기</a>
<a href="/services" class="btn btn-outline btn-lg">서비스 알아보기</a>
</div>
</div>
</section>

155
server.py Normal file
View File

@ -0,0 +1,155 @@
#!/usr/bin/env python3
# -*- coding: utf-8 -*-
"""
밍글 스튜디오 웹사이트 로컬 개발 서버
Python 기반 HTTP 서버로 개발 및 테스트 지원
"""
import http.server
import socketserver
import webbrowser
import os
import sys
import socket
from pathlib import Path
# 한글 출력을 위한 인코딩 설정
if os.name == 'nt': # Windows
import locale
import codecs
# UTF-8 강제 설정
try:
sys.stdout.reconfigure(encoding='utf-8')
sys.stderr.reconfigure(encoding='utf-8')
except:
# Python 3.6 이하 버전 호환
sys.stdout = codecs.getwriter('utf-8')(sys.stdout.detach())
sys.stderr = codecs.getwriter('utf-8')(sys.stderr.detach())
# 서버 설정
PORT = 3000
HOST = '0.0.0.0' # 모든 인터페이스에서 접근 가능
class CustomHTTPRequestHandler(http.server.SimpleHTTPRequestHandler):
"""커스텀 HTTP 요청 핸들러"""
def end_headers(self):
# CORS 헤더 추가 (개발용)
self.send_header('Access-Control-Allow-Origin', '*')
self.send_header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS')
self.send_header('Access-Control-Allow-Headers', 'Content-Type')
# 캐시 비활성화 (개발용)
self.send_header('Cache-Control', 'no-cache, no-store, must-revalidate')
self.send_header('Pragma', 'no-cache')
self.send_header('Expires', '0')
super().end_headers()
def do_GET(self):
"""GET 요청 처리"""
original_path = self.path
# .html로 직접 접근하는 경우 리다이렉트
if self.path.endswith('.html') and self.path != '/index.html':
clean_path = self.path[:-5] # .html 제거
self.send_response(301)
self.send_header('Location', clean_path)
self.end_headers()
return
# .html 확장자 없이 접근 시 자동으로 .html 추가
if not self.path.endswith('/') and '.' not in os.path.basename(self.path):
html_path = self.path + '.html'
if os.path.exists(html_path.lstrip('/')):
self.path = html_path
# 기본 파일 처리
if self.path == '/':
self.path = '/index.html'
super().do_GET()
def log_message(self, format, *args):
"""로그 메시지 포맷팅"""
print(f"[{self.log_date_time_string()}] {format % args}")
def find_available_port(start_port=8001):
"""사용 가능한 포트 찾기"""
for port in range(start_port, start_port + 20): # 더 많은 포트 시도
try:
sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
sock.setsockopt(socket.SOL_SOCKET, socket.SO_REUSEADDR, 1) # 주소 재사용
sock.bind(('localhost', port)) # 실제로 바인드 테스트
sock.close()
print(f"Available port found: {port}")
return port # 성공하면 해당 포트 반환
except OSError:
continue # 포트가 사용 중이면 다음 포트 시도
print(f"No available port found in range {start_port}-{start_port+19}")
return start_port # 찾지 못하면 기본값 반환
def main():
"""메인 서버 실행 함수"""
# 현재 디렉토리가 프로젝트 루트인지 확인
if not os.path.exists('index.html'):
print("Error: index.html file not found.")
print("Please run from project root directory.")
sys.exit(1)
# 사용 가능한 포트 찾기
available_port = find_available_port(PORT)
try:
# 서버 시작
httpd = socketserver.TCPServer((HOST, available_port), CustomHTTPRequestHandler)
httpd.allow_reuse_address = True # 주소 재사용 허용
with httpd:
# 로컬 및 외부 접근 주소 표시
import socket
local_ip = socket.gethostbyname(socket.gethostname())
print("Mingle Studio Development Server Started!")
print("="*60)
print(f"Local Access: http://localhost:{available_port}")
print(f"Network Access: http://{local_ip}:{available_port}")
print(f"Root Directory: {os.getcwd()}")
print("="*60)
print("Main Pages:")
print(f" Home: http://localhost:{available_port}/")
print(f" About: http://localhost:{available_port}/about")
print(f" Services: http://localhost:{available_port}/services")
print(f" Portfolio: http://localhost:{available_port}/portfolio")
print(f" Gallery: http://localhost:{available_port}/gallery")
print(f" Contact: http://localhost:{available_port}/contact")
print(f" Q&A: http://localhost:{available_port}/qna")
print("="*60)
print("External Access Setup:")
print(f" 1. Setup port forwarding for port {available_port} on router")
print(f" 2. Access via public IP: http://[PUBLIC_IP]:{available_port}")
print(f" 3. Same network: http://{local_ip}:{available_port}")
print("="*60)
print("Tip: Press Ctrl+C to stop the server.")
print("Opening browser automatically...")
# 기본 브라우저에서 자동으로 열기 (로컬호스트로)
webbrowser.open(f"http://localhost:{available_port}")
# 서버 실행
httpd.serve_forever()
except KeyboardInterrupt:
print("\n\nServer stopped.")
print("Goodbye!")
except OSError as e:
if e.errno == 10048: # WinError 10048
print(f"\nError: Port {available_port} is already in use.")
print("Try different port or check the following:")
print("1. Check if another server is running")
print("2. Kill Python process in Task Manager")
print(f"3. Run in command prompt: netstat -ano | findstr :{available_port}")
else:
print(f"Server error: {e}")
sys.exit(1)
if __name__ == "__main__":
main()