# 제이미성형외과 Instagram 디자인 가이드라인

> **Version**: 2.0 | 2026-02-15
> **기준**: Brand Guide v2.8 + 인스타그램 프로토타입 디자인 시안 3종 분석 반영
> **용도**: 인스타그램 피드, 릴스 커버, 스토리, 카드뉴스 디자인 시 적용

---

## 1. 브랜드 컬러 시스템

### 1.1 Primary Colors

| 컬러명 | HEX | RGB | 용도 |
|--------|-----|-----|------|
| Web Green | `#79A233` | 121, 162, 51 | CTA 버튼, 제목 텍스트, 강조 요소, 카테고리 태그 |
| Light Green | `#AFCC6D` | 175, 204, 109 | Floating Circle 그라데이션, 배경 포인트, 서브 헤딩 |
| Main Green | `#6D7856` | 109, 120, 86 | 보조 텍스트, 캡션, 푸터, 날짜 표시 |
| Background Cream | `#F1F4EB` | 241, 244, 235 | 밝은 배경 (교육/카드뉴스 콘텐츠) |
| Dark BG | `#2D2D2D` | 45, 45, 45 | 어두운 배경 (Q&A 릴스, 프리미엄 콘텐츠) |
| Gold | `#B5A040` | 181, 160, 64 | 프리미엄 강조, 하이라이트, 숫자 포인트 |
| Sage | `#8FA87A` | 143, 168, 122 | Floating Circle, 서브 배경, 구분선 |

### 1.2 컬러 테마 (콘텐츠 유형별)

| 테마 | 배경 | 텍스트 | 포인트 | 사용 콘텐츠 |
|------|------|--------|--------|------------|
| **Light (라이트)** | `#F1F4EB` | `#2D2D2D` | `#79A233` | 교육 카드뉴스, 시술 정보, FAQ |
| **Dark (다크)** | `#2D2D2D` | `#FFFFFF` | `#B5A040` | Q&A 릴스 커버, 프리미엄 콘텐츠, 커버 이미지 |
| **Soft (소프트)** | `#F7F5F0` | `#4A4A4A` | `#8FA87A` | 일상 콘텐츠, 에피소드, 스토리 |

---

## 2. 타이포그래피

### 2.1 폰트 시스템

| 용도 | 폰트 | 굵기 | 크기 (피드 1080px 기준) |
|------|------|------|------------------------|
| 대제목 (시술명, 메인 카피) | 나눔스퀘어라운드 | ExtraBold | 48-64px |
| 소제목 / 섹션 헤딩 | Pretendard | Bold | 32-40px |
| 본문 | Noto Sans KR | Medium | 24-28px |
| 캡션 / 부가 설명 | Noto Sans KR | Regular | 18-22px |
| 영문 텍스트 | Inter | Medium / Bold | 크기 동일 |
| 숫자 / 데이터 | Poppins | Bold | 40-72px (강조 시 확대) |

### 2.2 텍스트 스타일 규칙

- **제목**: 최대 2줄, 줄간격 130%, 왼쪽 정렬 기본
- **본문**: 최대 4-5줄, 줄간격 160%, 좌측 또는 중앙 정렬
- **강조**: 볼드 또는 Web Green(`#79A233`) 컬러 하이라이트 (밑줄 사용 금지)
- **질문형 텍스트**: Gold(`#B5A040`) 컬러 + Pretendard Bold 조합
- **면책 고지문**: Noto Sans KR Regular 16px, Main Green(`#6D7856`) 컬러, 하단 배치
- **이모지**: 텍스트 내 사용 가능하나 제목에는 미사용, 본문 끝 또는 캡션에 1-2개

---

## 3. 레이아웃 시스템

### 3.1 기본 그리드

```
┌──────────────────────┐
│     Safe Zone         │ ← 상하좌우 80px 여백 (1080px 기준)
│  ┌──────────────────┐ │
│  │                  │ │
│  │   Content Area   │ │ ← 920 x 1190px (피드)
│  │                  │ │   920 x 1760px (스토리)
│  │                  │ │
│  └──────────────────┘ │
│     Footer Zone       │ ← 하단 80px (로고/고지문)
└──────────────────────┘
```

- **피드 사이즈**: 1080 x 1350px (4:5 비율)
- **스토리 사이즈**: 1080 x 1920px (9:16 비율)
- **릴스 커버**: 1080 x 1920px (9:16), 중앙 1080x1080 영역에 핵심 정보 배치
- **카드뉴스 슬라이드**: 1080 x 1350px, 최대 10장

### 3.2 콘텐츠 유형별 레이아웃

#### A. Q&A 릴스형 (40% — 핵심 콘텐츠)

```
┌──────────────────────┐
│  [Floating Circle]    │ ← 우상단 Sage 반원, 반투명
│                       │
│  카테고리 태그          │ ← Web Green 배경, 흰색 텍스트, 라운드 모서리
│  "Q. 질문 텍스트"      │ ← Gold 컬러, Pretendard Bold, 32-40px
│                       │
│  "A. 답변 텍스트"      │ ← White/Dark, Noto Sans Medium, 24-28px
│  (2-3줄 이내)          │
│                       │
│  ─── 구분선 ───        │ ← Sage 컬러 1px 라인
│  정기호 원장  |  Jamie  │ ← 좌측 원장명, 우측 로고
│  면책 고지문            │ ← 16px, Main Green
└──────────────────────┘
배경: Dark (#2D2D2D) 기본, Light 테마 교차 사용
```

**디자인 특징**:
- 배경은 Dark 테마가 기본, 3-4회 중 1회는 Light 테마로 교차
- 상단 좌측 또는 우상단에 Floating Circle 배치 (Sage 또는 Light Green, 투명도 20-40%)
- 카테고리 태그: `[눈성형]`, `[이마거상]`, `[동안성형]` 등 — Web Green 배경의 라운드 뱃지
- 질문(Q)은 Gold 컬러로 시각적 구분, 답변(A)은 기본 텍스트 컬러
- 하단에 원장명 + 병원 로고를 가로 배치, 그 아래 면책 고지문

#### B. 일상 콘텐츠형 (30%)

```
┌──────────────────────┐
│                       │
│     [실제 사진]        │ ← 사진이 전면 배치 (70-80% 영역)
│     웜톤 보정          │
│                       │
│  ┌─────────────────┐  │
│  │ 오버레이 바      │  │ ← 하단 20-30%, 반투명 White 또는 Dark 오버레이
│  │ 짧은 캡션 텍스트  │  │   투명도 70-85%
│  │ #해시태그         │  │
│  │ 🏥 Jamie Logo    │  │ ← 우하단 작은 로고
│  └─────────────────┘  │
└──────────────────────┘
배경: 실제 사진 (웜톤 필터 적용)
```

**디자인 특징**:
- 사진이 주인공 — 텍스트는 최소화
- 사진 톤 보정: 약간의 웜톤 + 밝기 +10-15%, 채도 -5% (과도하게 보정하지 않는 자연스러운 톤)
- 오버레이 바: 하단에 반투명 레이어, 흰색(Light 버전) 또는 다크(Dark 버전)
- 오버레이 위 텍스트: 1-2줄 짧은 캡션, Noto Sans KR Medium
- 로고: 우하단 모서리에 작게 (높이 30-40px), 흰색 또는 그린 컬러
- 사진 위에 직접 텍스트를 올리지 않음 — 반드시 오버레이를 거침

#### C. 카드뉴스형 (20%)

```
[슬라이드 1 - 커버]
┌──────────────────────┐
│  [Floating Circle]    │ ← 좌상단 또는 우상단, Light Green
│                       │
│  시술명 / 주제         │ ← 나눔스퀘어라운드 ExtraBold, 48-64px
│  (대제목)              │   Web Green 컬러
│                       │
│  부제목                │ ← Pretendard Bold, 28px, Main Green
│                       │
│  JAMIE ┃ 카드뉴스     │ ← 하단 좌측 로고 + 우측 콘텐츠 유형 태그
└──────────────────────┘
배경: Background Cream (#F1F4EB) 또는 White

[슬라이드 2-N - 본문]
┌──────────────────────┐
│  [섹션 번호] 01        │ ← Web Green 원형 뱃지 안에 숫자
│  섹션 제목             │ ← Pretendard Bold, 32px
│                       │
│  • 본문 포인트 1       │ ← Noto Sans Medium, 24px
│  • 본문 포인트 2       │   줄간격 160%, 불릿 컬러 Web Green
│  • 본문 포인트 3       │
│                       │
│  [강조 박스]           │ ← Background Cream 배경, 라운드 코너 12px
│  핵심 메시지           │   내부 텍스트 Web Green Bold
│                       │
│  ─── 페이지 인디케이터 │ ← 하단 중앙 dot 인디케이터
└──────────────────────┘

[마지막 슬라이드 - CTA]
┌──────────────────────┐
│                       │
│  "상담이 필요하신가요?" │ ← Pretendard Bold, Gold 컬러
│                       │
│  [카카오톡 상담하기]    │ ← CTA 버튼: Web Green 배경, 흰색 텍스트
│  [전화 상담하기]        │   라운드 코너 24px, 높이 60px
│                       │
│  JAMIE | 02-542-2399  │ ← 연락처 + 로고
│  면책 고지문            │
└──────────────────────┘
```

**디자인 특징**:
- 커버는 대제목 + Floating Circle로 임팩트, 밝은 배경 기본
- 본문 슬라이드: 정보 밀도를 낮게 유지 (슬라이드당 3-4포인트 이내)
- 섹션 번호를 Web Green 원형 뱃지로 표시하여 진행 감각 제공
- 강조 박스: 라운드 코너 카드 안에 핵심 메시지 — Background Cream 배경
- 불릿 포인트: Web Green 원형 dot (●) 사용, 대시(-) 미사용
- 페이지 인디케이터: 하단 중앙에 작은 dot으로 현재 위치 표시
- 마지막 슬라이드는 반드시 CTA(카카오톡 상담, 전화) 포함

#### D. 환자 에피소드형 (10%)

```
┌──────────────────────┐
│  [Floating Circle]    │
│                       │
│  "환자 에피소드"       │ ← 카테고리 태그 (Gold 배경 뱃지)
│                       │
│  시술명: ○○○          │ ← Pretendard Bold, 36px
│                       │
│  [Before → After]     │ ← 가로 분할 비교 (동의 기반)
│  또는 텍스트 후기      │   얼굴 비식별 처리 필수
│                       │
│  핵심 개선 포인트      │ ← 불릿 2-3개, Noto Sans Medium
│                       │
│  면책 고지문 (필수)    │ ← 16px, 2줄, Main Green
│  정기호 원장 | Jamie   │
└──────────────────────┘
배경: Soft 테마 (#F7F5F0) 기본
```

**디자인 특징**:
- Soft 테마 배경(웜 크림)으로 따뜻한 인상
- Gold 컬러 카테고리 뱃지로 "환자 에피소드" 표기
- Before/After는 반드시 가로 분할 구도, 비식별 처리 상태
- 면책 고지문 필수 — 슬라이드 하단 고정 영역
- 과장 표현 절대 금지: "완벽한", "놀라운 변화" 등 불가

---

## 4. Floating Circles (시그니처 비주얼)

### 4.1 기본 사양

| 속성 | 값 |
|------|-----|
| 형태 | 완전한 원형 (border-radius: 50%) |
| 크기 | 피드 기준 직경 200-400px (슬라이드 대비 20-40%) |
| 컬러 | Sage `#8FA87A`, Light Green `#AFCC6D`, 또는 Main Green `#6D7856` |
| 투명도 | 20-40% (배경에 녹아드는 수준) |
| 위치 | 상단 우측, 좌측 하단, 또는 우측 가장자리 (잘리는 형태) |
| 개수 | 슬라이드당 1-2개 (과도하게 사용하지 않음) |

### 4.2 배치 규칙

- **커버/표지 슬라이드**: 2개 사용 가능 (크기 차이를 두어 원근감)
- **본문 슬라이드**: 0-1개 (정보 전달을 방해하지 않을 때만)
- **CTA 슬라이드**: 1개 (배경 장식)
- **사진 중심 콘텐츠**: 사용하지 않음 (사진이 주인공)
- **Dark 테마**: Sage 컬러 원형, 투명도 15-25%
- **Light 테마**: Light Green 컬러 원형, 투명도 25-40%

### 4.3 금지 사항

- 텍스트 위에 원형을 올리지 않음 (가독성 저하)
- 원형 내부에 텍스트나 아이콘을 넣지 않음 (섹션 번호 뱃지는 별도)
- 3개 이상 사용 금지
- 원형 컬러를 Red, Blue 등 브랜드 외 컬러로 사용 금지

---

## 5. 로고 사용 규정

### 5.1 로고 유형

| 유형 | 사용 상황 |
|------|----------|
| J 서클 로고 (원형 안의 J) | 프로필, 워터마크, 소형 배치 |
| 텍스트 로고 "JAMIE" | 하단 푸터, 슬라이드 서명 |
| 풀 로고 (J 서클 + 텍스트) | 커버 슬라이드, 마지막 CTA 슬라이드 |

### 5.2 배치 규칙

- **워터마크 (일상 콘텐츠)**: 우하단, 높이 30-40px, 투명도 60-80%
- **서명 (교육 콘텐츠)**: 하단 중앙 또는 좌측, 높이 40-50px, 투명도 100%
- **커버 (표지)**: 상단 좌측 또는 중앙, 높이 80-120px
- **Safe Zone**: 로고는 반드시 가장자리에서 40px 이상 떨어져 배치

---

## 6. 사진 보정 가이드

### 6.1 일반 사진 (병원 일상, 스태프)

| 항목 | 보정값 |
|------|--------|
| 밝기 (Brightness) | +10 ~ +15% |
| 대비 (Contrast) | +5% |
| 채도 (Saturation) | -5 ~ 0% (과도한 채도 금지) |
| 온도 (Temperature) | 약간 웜톤 (+5) |
| 선명도 (Sharpness) | +10% |
| 필터 | 없음 또는 최소한의 웜톤 필터 |

### 6.2 시술 관련 사진

| 항목 | 보정값 |
|------|--------|
| 밝기 | +5% (과도한 보정 금지 — 왜곡 우려) |
| 대비 | 원본 유지 |
| 채도 | 원본 유지 |
| 비식별 처리 | 눈/얼굴 블러 또는 마스킹 필수 |
| 워터마크 | 반드시 포함 |

### 6.3 금지 사항

- 피부톤을 과도하게 밝게/매끈하게 보정하지 않음
- Before/After에서 조명/각도를 의도적으로 다르게 촬영하지 않음
- 필터로 시술 결과를 왜곡하지 않음
- AI 생성 이미지를 "실제 사진"으로 오인 가능하게 사용 금지

---

## 7. 컴포넌트 라이브러리

### 7.1 카테고리 태그 뱃지

```
┌─────────────┐
│  눈성형      │  Web Green (#79A233) 배경
│             │  White 텍스트, Pretendard Bold 18px
└─────────────┘  border-radius: 20px, padding: 8px 16px
```

### 7.2 CTA 버튼

```
┌──────────────────┐
│  카카오톡 상담하기  │  Web Green (#79A233) 배경
│                  │  White 텍스트, Pretendard Bold 22px
└──────────────────┘  border-radius: 24px, 높이 56-64px
```

### 7.3 강조 박스

```
┌──────────────────────────┐
│  핵심 포인트:              │  Background Cream (#F1F4EB) 배경
│  텍스트 내용               │  border-radius: 12px
│                          │  padding: 20px
└──────────────────────────┘  border: none (그림자도 없음)
```

### 7.4 구분선

```
────────────────────────────  Sage (#8FA87A), 높이 1px, 투명도 40%
```

### 7.5 면책 고지문 블록

```
※ 개인에 따라 결과가 다를 수 있으며,
부작용(붓기, 멍, 통증 등)이 발생할 수 있습니다.
─────────────────────────────
Noto Sans KR Regular 16px, Main Green (#6D7856)
항상 슬라이드 하단 고정, 구분선 위에 배치
```

---

## 8. 콘텐츠 유형별 체크리스트

### Q&A 릴스 커버

- [ ] Dark 또는 Light 테마 중 선택
- [ ] Floating Circle 1-2개 배치
- [ ] 카테고리 태그 뱃지 삽입
- [ ] 질문(Q) Gold 컬러 / 답변(A) 기본 컬러 구분
- [ ] 정기호 원장 크레딧 + Jamie 로고
- [ ] 면책 고지문 (시술 관련 시)

### 일상 콘텐츠

- [ ] 사진 웜톤 보정 적용
- [ ] 하단 오버레이 바 (반투명)
- [ ] 캡션 1-2줄 이내
- [ ] 우하단 워터마크 로고
- [ ] Floating Circle 미사용

### 카드뉴스

- [ ] 커버 슬라이드: 대제목 + Floating Circle + 로고
- [ ] 본문 슬라이드: 섹션 번호 뱃지 + 불릿 3-4개 이내
- [ ] 강조 박스 적절히 활용
- [ ] 마지막 슬라이드: CTA (카카오톡/전화) 필수
- [ ] 페이지 인디케이터
- [ ] 면책 고지문 (시술 정보 시)
- [ ] 총 슬라이드 5-7장 권장 (최대 10장)

### 환자 에피소드

- [ ] Soft 테마 배경
- [ ] Gold 카테고리 뱃지
- [ ] 얼굴 비식별 처리 확인
- [ ] 면책 고지문 필수 (2줄)
- [ ] 과장 표현 없음 확인
- [ ] 초상권 동의서 확보 확인

---

## 9. 제작 도구 및 템플릿

### 9.1 승인된 도구

| 도구 | 용도 | 비고 |
|------|------|------|
| Canva Pro | 피드/카드뉴스/스토리 디자인 | 월 13,000원 |
| Gemini 나노 바나나 | 카드뉴스형 이미지 생성 | 적극 활용 |
| Meta Business Suite | 게시/예약/분석 | 비즈니스 계정 필수 |

### 9.2 사용 불가 도구

| 도구 | 사유 |
|------|------|
| ~~CapCut 무료~~ | 사용 불가 |
| ~~Unsplash 무료 스톡~~ | 사용 불가 |
| ~~Instagram Shopping~~ | 사용 안 함 |

### 9.3 Canva 템플릿 규칙

- 브랜드 킷에 위 컬러 + 폰트 등록 필수
- 템플릿 저장 시 명명 규칙: `JAM_IG_[유형]_[날짜]` (예: `JAM_IG_QnA_0215`)
- 내보내기: PNG, 300 DPI (인쇄 아님, 화면 최적화이지만 선명도 확보)

---

## 10. 안티패턴 (하지 말아야 할 것들)

| 하지 않기 | 대신 이렇게 |
|-------------|---------------|
| 네온 컬러, 형광색 사용 | 브랜드 컬러 팔레트 내에서만 |
| 과도한 그림자/3D 효과 | 플랫 디자인, 최소한의 음영 |
| 사진 위에 직접 텍스트 (오버레이 없이) | 반투명 오버레이 위에 텍스트 |
| 여러 폰트 혼용 (3종 이상) | 나눔스퀘어/Pretendard/Noto Sans KR 3종 체계 |
| 슬라이드에 정보 과밀 | 슬라이드당 핵심 3-4포인트 |
| 빨간색/파란색 강조 | Green/Gold/Sage만 사용 |
| 복잡한 패턴/텍스처 배경 | 단색 또는 단순 그라데이션 |
| 스톡 사진 느낌의 과도한 보정 | 자연스러운 웜톤 보정 |
| 이모지 남발 (5개 이상) | 이모지 2-3개, 제목에는 미사용 |

---

*Version 2.0 | 2026-02-15 | Jamie Instagram Design System*
*Based on: Brand Guide v2.8 + Instagram Prototype Designs (3종)*
