121 lines
4.9 KiB
Markdown
121 lines
4.9 KiB
Markdown
# 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. |