# XmosaiX 포트폴리오 웹사이트 설계 분석 보고서

> 작성일: 2026-04-16  
> 분석 대상: @xmosaix (linktr.ee/xmosaix, ctee.kr/place/xmosaix, instagram.com/xmosaix)

---

## 1. 브랜드 개요

| 항목 | 내용 |
|------|------|
| **브랜드명** | XmosaiX (표기: XMosaiX / XMsoaiX) |
| **장르** | 한국 남성 바디 매거진 사진 |
| **슬로건** | "Korea man magazine" |
| **소개** | 남성 바디 매거진으로 남성의 아름다움을 담아내고 표현 |
| **활동 채널** | Instagram, X(Twitter), Patreon, Ctee(크티) |
| **Instagram 팔로워** | 5,313명 (게시물 73개) |
| **콘텐츠 등급** | 19+ (일부 성인 인증 콘텐츠 포함) |
| **도메인** | www.xmosaix.kr (사진 워터마크에 이미 명시됨) |

---

## 2. 기존 비주얼 아이덴티티 분석

### 2-1. 로고 & 워드마크

- **심볼**: 원형 검정 배경 + 내부 사진 삽입 형태의 아이콘
- **워드마크**: 세리프 계열 볼드 폰트로 `XMosaiX` 또는 `XMsoaiX` 표기
- **워터마크 구성**: `XMsoaiX` + `WWW.XMOSAIX.KR` — 모든 사진에 일관 적용
- **색상**: 흰색 텍스트 on 어두운 배경 (또는 반전 버전)

### 2-2. 컬러 팔레트

```
Primary Dark    : #0a0a0a ~ #1c1c1c  (배경, 무드 기반)
Warm Amber      : #c8893a ~ #e8a44a  (골든아워 피부톤, 드라마틱 조명)
Terracotta      : #8b4a2e ~ #b56035  (주요 컨텐츠 썸네일 색조)
Skin Neutral    : #d4a88a ~ #f0c8a0  (피부톤 중간값)
Clean White     : #f5f5f5 ~ #ffffff  (스튜디오 배경 세트)
Steel Blue-Grey : #7a8fa0 ~ #b0c0cc  (수중/쿨톤 사진군)
Monochrome      : #222222 ~ #eeeeee  (흑백 아트 시리즈)
```

### 2-3. 사진 스타일 유형 분류

| 스타일 유형 | 특징 | 비중 |
|------------|------|------|
| **무드/보두아르** | 어두운 배경, 극적 측면 조명, 친밀한 구도 | ★★★★★ |
| **스튜디오 화이트** | 밝은 배경, 피지크/바디 쇼케이스, 카탈로그 느낌 | ★★★★ |
| **흑백 아트** | 고대비 모노크롬, 예술적 구도 | ★★★ |
| **에디토리얼/라이프스타일** | 자연광, 룸/인테리어 배경, 세련된 일상성 | ★★★ |
| **수중/텍스처** | 물, 거품, 블루/틸 톤, 감각적 질감 | ★★ |
| **피트니스/스트렝스** | 근육 강조, 자신감 있는 포즈, 스포츠적 | ★★ |

### 2-4. 타이포그래피 특성

- **워드마크 폰트**: 강한 대비의 두꺼운 세리프체 (Didot / Playfair Display 계열)
- **텍스트 레이어**: 대형 텍스트를 이미지 위에 반투명 오버레이 → 매거진 커버 미학
- **넘버링 시스템**: `XMosaiX#19`, `#20`, `#21` 형식으로 시리즈 아이덴티티 구축

---

## 3. 콘텐츠 구조 분석

### 현재 채널별 역할

| 채널 | 역할 |
|------|------|
| **Instagram** | 메인 포트폴리오 노출, 뮤즈 모집, 팔로워 유입 |
| **Linktree** | 채널 허브 (→ Ctee, Instagram, X, Patreon) |
| **Ctee(크티)** | 유료 콘텐츠 판매 (시리즈별 20,000~36,000원) |
| **Patreon** | 해외 구독자 대상 유료 콘텐츠 |
| **X(Twitter)** | 추가 노출 채널 |

### 콘텐츠 상품 구조 (Ctee 기준)

- **정기 시리즈**: `XMosaiX#번호` 포맷, 회차별 독립 판매
- **첫 번째 매거진**: "Xmosaix's first body magazine / Boyish Hint's first pictorial" — 28,500원
- **피드 콘텐츠**: 미리보기 성격의 무료 게시물 + 유료 풀 버전

---

## 4. 포트폴리오 웹사이트 설계 방향

### 4-1. 핵심 설계 철학

> **"다크 매거진 + 아트 포트폴리오"**  
> 잡지의 감성적 무게감 + 사진작가의 포트폴리오 신뢰성을 동시에 전달

인스타그램 그리드는 이미 완성도 높은 포트폴리오지만, 웹사이트는 아래 기능을 추가로 제공해야 함:
1. 브랜드 스토리텔링 공간
2. 시리즈별 큐레이션 전시
3. 촬영 의뢰/예약 시스템
4. 유료 콘텐츠 접근 허브
5. 검색엔진 노출(SEO) 및 전문성 강화

---

### 4-2. 페이지 구조 (사이트맵)

```
xmosaix.kr
├── / (홈 — Hero)
├── /portfolio
│   ├── /series         (시리즈별 갤러리: #1~최신)
│   ├── /styles         (스타일별: Moody / Studio / B&W / Editorial)
│   └── /works          (전체 아카이브)
├── /magazine           (XMosaiX 매거진 소개 + 구매 링크)
├── /about              (작가 소개 + 비전)
├── /contact            (촬영 의뢰 폼 + SNS 링크)
└── /links              (Ctee, Patreon, Instagram, X 허브)
```

---

### 4-3. 섹션별 상세 설계

#### Hero 섹션 (/)
- **레이아웃**: 풀스크린 슬라이드 이미지 (페이드 또는 켄번 효과)
- **콘텐츠**: 대표 사진 3~5장 + `XMosaiX` 대형 워드마크 오버레이
- **타이포**: 초대형 세리프 폰트 ("Korea Man Magazine" 서브타이틀)
- **CTA 버튼**: `포트폴리오 보기` / `촬영 의뢰하기`
- **분위기**: 어둡고 강렬한 첫인상 → 매거진 표지 느낌

#### 포트폴리오 갤러리 (/portfolio)
- **그리드 유형**: Masonry(벽돌) 레이아웃 또는 3열 균일 그리드
- **필터**: 시리즈별 / 스타일별 / 연도별 탭 필터
- **호버 효과**: 이미지 확대 + 시리즈명 페이드인 오버레이
- **클릭 후**: 라이트박스 풀스크린 뷰어 (키보드 네비게이션 지원)
- **19+ 콘텐츠**: 해당 섹션 진입 시 나이 확인 모달

#### 매거진 섹션 (/magazine)
- **레이아웃**: 책 커버 느낌의 카드 UI
- **구성**: 각 매거진 번호 + 커버 이미지 + 가격 + 구매 링크(Ctee/Patreon)
- **미리보기**: 매거진 내부 샘플 이미지 3~5장 표시
- **디자인 참고**: 고급 패션 매거진 e-commerce 레이아웃

#### About 섹션 (/about)
- **콘텐츠**: 작가 포토 + 짧은 브랜드 철학 텍스트
- **핵심 메시지**: "남성의 아름다움을 담아내고 표현하는 바디 매거진"
- **스타일**: 타이포 중심, 최소한의 텍스트, 여백 강조

#### Contact 섹션 (/contact)
- **촬영 의뢰 폼 필드**: 이름 / 연락처 / 희망 촬영 스타일 / 메모
- **직접 링크**: Instagram DM 버튼 (현재 주요 연락 수단)
- **SNS 아이콘**: Instagram, X, Patreon, Ctee

---

### 4-4. 비주얼 디자인 스펙

#### 컬러 시스템

```css
/* 배경 */
--bg-primary:     #0c0c0c;   /* 메인 다크 배경 */
--bg-secondary:   #161616;   /* 카드/섹션 배경 */
--bg-surface:     #1e1e1e;   /* 모달, 오버레이 */

/* 텍스트 */
--text-primary:   #f0ece6;   /* 크림 화이트 */
--text-secondary: #a09488;   /* 웜 그레이 */
--text-muted:     #5a5250;   /* 캡션, 메타 정보 */

/* 액센트 */
--accent-warm:    #c8893a;   /* 골든 앰버 — CTA, 호버 */
--accent-terra:   #9b4f2c;   /* 테라코타 — 시리즈 배지 */
--accent-light:   #e8c89a;   /* 밝은 웜 — 하이라이트 */
```

#### 타이포그래피 스택

| 역할 | 폰트 추천 | 특성 |
|------|----------|------|
| **디스플레이 (워드마크)** | Playfair Display Black / Cormorant Garamond Bold | 강한 세리프, 매거진 감성 |
| **헤딩** | Cormorant Garamond / EB Garamond | 우아한 세리프 |
| **본문/UI** | Inter / Pretendard | 가독성 높은 현대 고딕 |
| **넘버링/캡션** | Space Mono / Courier Prime | 에디토리얼 모노스페이스 |
| **한글 지원** | Pretendard / Noto Serif KR | 국문 텍스트 전용 |

#### 레이아웃 원칙

- **여백(Whitespace)**: 각 사진이 숨쉴 공간 확보, 과밀 금지
- **반응형**: Mobile-first (인스타그램 유입이 주요 경로)
- **애니메이션**: 스크롤 트리거 페이드인, 이미지 패럴랙스 (절제된 사용)
- **로딩**: 이미지 lazy loading + 블러 플레이스홀더 (LCP 최적화)

---

### 4-5. 참고 디자인 레퍼런스 방향

| 레퍼런스 스타일 | 벤치마킹 포인트 |
|---------------|----------------|
| **패션 매거진 웹사이트** (i-D, Dazed) | 대형 타이포, 풀스크린 이미지, 다크 에디토리얼 |
| **Squarespace 포트폴리오 다크 테마** | 클린한 그리드, 갤러리 뷰어 UX |
| **고급 패션 포토그래퍼 포트폴리오** | 이미지 중심 내비게이션 |
| **현재 Ctee 페이지 구조** | 시리즈 넘버링 카드 UI는 유지 |

---

## 5. 기술 스택 추천

| 항목 | 추천 | 이유 |
|------|------|------|
| **프레임워크** | Next.js (React) | SEO 최적화, next/image 자동 최적화 |
| **스타일링** | Tailwind CSS | 빠른 다크 테마 구현, 반응형 |
| **CMS** | Sanity.io 또는 Notion API | 비개발자도 사진/글 업데이트 가능 |
| **이미지 호스팅** | Cloudflare Images / Cloudinary | 자동 WebP 변환, CDN 배포 |
| **배포** | Vercel 또는 현재 IIS 서버 | 빠른 배포, 글로벌 CDN |
| **나이인증** | 자체 쿠키 기반 age gate | 19+ 콘텐츠 법적 요건 대응 |
| **분석** | Google Analytics 4 + Search Console | 유입 경로 및 SEO 추적 |

---

## 6. 개발 우선순위 로드맵

### Phase 1 — MVP (최소 기능 사이트)
- [ ] Hero 섹션 + 브랜드 로고/워드마크
- [ ] 기본 포트폴리오 그리드
- [ ] 연락처 페이지 (Instagram DM 링크)
- [ ] 반응형 모바일 레이아웃

### Phase 2 — 콘텐츠 허브
- [ ] 시리즈별 갤러리 페이지
- [ ] 매거진 쇼케이스 + 구매 링크 연동
- [ ] 라이트박스 풀스크린 뷰어
- [ ] 19+ 에이지 게이트

### Phase 3 — 비즈니스 기능
- [ ] 촬영 의뢰 폼 + 자동 이메일 알림
- [ ] Patreon / Ctee 통합 위젯
- [ ] SEO 메타태그 최적화
- [ ] 포트폴리오 CMS 연동

---

## 7. 핵심 차별화 포인트 요약

1. **브랜드 스토리텔링**: Linktree가 제공하지 못하는 XmosaiX 세계관 표현 공간
2. **시리즈 아카이브**: #1부터 최신까지 매거진 역사를 한눈에 볼 수 있는 큐레이션
3. **도메인 신뢰성**: `www.xmosaix.kr` (이미 워터마크에 사용 중) 풀 활용
4. **촬영 의뢰 전환**: 뮤즈 모집/의뢰자를 위한 명확한 contact flow
5. **유료 콘텐츠 허브**: Ctee + Patreon 링크를 브랜드답게 통합 제시

---

## 8. 무드보드 키워드

```
다크 럭셔리  /  한국 남성미  /  매거진 에디토리얼
바디 아트  /  웜 앰버  /  드라마틱 조명
세리프 타이포  /  필름 그레인  /  미니멀 내비게이션
```

---

*본 보고서는 @xmosaix의 Instagram, Linktree, Ctee 플레이스 페이지 시각 자료를 기반으로 작성되었습니다.*