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

CLAUDE.md

@@ -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.

components/header.html

@@ -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="/" class="nav-link">Home</a></li>
-            <li><a href="about.html" class="nav-link">About</a></li>
+            <li><a href="/about" class="nav-link">About</a></li>
-            <li><a href="services.html" class="nav-link">Services</a></li>
+            <li><a href="/services" class="nav-link">Services</a></li>
-            <li><a href="portfolio.html" class="nav-link">Portfolio</a></li>
+            <li><a href="/portfolio" class="nav-link">Portfolio</a></li>
-            <li><a href="gallery.html" class="nav-link">Gallery</a></li>
+            <li><a href="/gallery" class="nav-link">Gallery</a></li>
-            <li><a href="contact.html" class="nav-link">Contact</a></li>
+            <li><a href="/contact" class="nav-link">Contact</a></li>
-            <li><a href="qna.html" class="nav-link">Q&A</a></li>
+            <li><a href="/qna" class="nav-link">Q&A</a></li>
         </ul>
         <div class="hamburger">
             <span></span>

css/main.css

@@ -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);

css/portfolio.css

@@ -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;
+    }
 }

index.html

@@ -305,8 +305,8 @@
                         새로운 가치가 만들어지는 공간
                     </p>
                     <div class="hero-buttons">
-                        <a href="about.html" class="btn btn-primary">회사 소개 보기</a>
+                        <a href="/about" class="btn btn-primary">회사 소개 보기</a>
-                        <a href="contact.html" class="btn btn-outline">예약 문의하기</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="/qna" class="btn btn-primary btn-lg">자주 묻는 질문</a>
-                    <a href="contact.html" class="btn btn-outline 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>
             

js/main.js

@@ -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();
+        }
+    }
+}
+
 // ========================================
 // 마우스 호버 효과
 // ========================================

js/portfolio.js

@@ -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');

package.json

@@ -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"
+  }
+}

portfolio.html

@@ -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,13 +90,27 @@
         </div>
     </section>
 
-    <!-- Long-Form 콘텐츠 -->
+    <!-- 포트폴리오 탭 네비게이션 -->
-    <section class="section bg-light">
+    <section class="section">
         <div class="container">
-            <div class="section-header">
+            <div class="portfolio-tabs">
-                <h2>Long-Form 콘텐츠</h2>
+                <div class="tab-buttons">
-                <p>밍글 스튜디오의 주요 모션캡쳐 프로젝트</p>
+                    <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>
+                </div>
             
             <div class="video-grid longform-grid">
                 <div class="video-card featured">
@@ -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>
-    </section>
+    </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="/contact" class="btn btn-primary btn-lg">프로젝트 문의하기</a>
-                <a href="services.html" class="btn btn-outline btn-lg">서비스 알아보기</a>
+                <a href="/services" class="btn btn-outline btn-lg">서비스 알아보기</a>
             </div>
         </div>
     </section>

server.py

@@ -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()