ourdigital/our-claude-skills
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

directory changes and restructuring

Browse Source 
🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Andrew Yim
2025-12-22 02:01:41 +09:00
parent eea49f9f8c
commit 236be6c580
598 changed files with 0 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
custom-skills/41-jamie-brand-audit/desktop/design/ Jamie-Clinic-plaque.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 46 KiB

BIN
custom-skills/41-jamie-brand-audit/desktop/design/Jamie-Clinic-Logo-Square-500x500-dark.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

BIN
custom-skills/41-jamie-brand-audit/desktop/design/Jamie-Clinic-Logo-Square-500x500.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

271
custom-skills/41-jamie-brand-audit/desktop/design/jamie_brand_color_typography_extension_v2.3.md Normal file
View File

@@ -0,0 +1,271 @@
# 제이미성형외과 브랜드 컬러 & 타이포그래피 확장 가이드
> **분석 소스**: 초진 환자 안내서 2025 (Canva 제작물)
> **분석일**: 2025-12-09
> **버전**: v2.3
---
## 1. 확장 컬러 팔레트
### 1.1 기존 브랜드 컬러 (Primary - 유지)
| 컬러명 | HEX | RGB | CMYK | 용도 |
|--------|-----|-----|------|------|
| **Jamie Main Green** | #6D7856 | (109, 120, 86) | (9, 0, 28, 53) | 메인 브랜드 컬러, 로고 |
| **Jamie Green (Web)** | #79A233 | (121, 162, 51) | (25, 0, 69, 36) | 웹 링크, 강조, CTA |
| **Jamie Light Green** | #AFCC6D | (175, 204, 109) | (14, 0, 47, 20) | 버튼, 말풍선 |
| **Black** | #000000 | (0, 0, 0) | (0, 0, 0, 100) | 본문 텍스트 |
| **White** | #FFFFFF | (255, 255, 255) | (0, 0, 0, 0) | 버튼 텍스트, 밝은 배경 |
---
### 1.2 인쇄용 확장 컬러 (Print Extended) 🆕
#### 민트 그린 테마 (Mint Green Theme)
병원 인쇄물, 안내서, 브로슈어에 사용
| 컬러명 | HEX | RGB | CMYK | 용도 |
|--------|-----|-----|------|------|
| **Jamie Mint Light** | #DAEEE3 | (218, 238, 227) | (8, 0, 5, 7) | 메인 배경 |
| **Jamie Mint** | #D2EBDD | (210, 235, 221) | (11, 0, 6, 8) | 서브 배경, 카드 배경 |
| **Jamie Forest** | #568459 | (86, 132, 89) | (35, 0, 33, 48) | 타이틀, 강조 텍스트 |
| **Jamie Sage** | #8DAE92 | (141, 174, 146) | (19, 0, 16, 32) | 중간톤, 아이콘 |
| **Jamie Moss** | #B0C9B5 | (176, 201, 181) | (12, 0, 10, 21) | 서브 요소, 구분선 |
#### 블루 테마 (Blue Theme)
FAQ, 정보 섹션, 안내 페이지에 사용
| 컬러명 | HEX | RGB | CMYK | 용도 |
|--------|-----|-----|------|------|
| **Jamie Sky Light** | #C6D7E6 | (198, 215, 230) | (14, 7, 0, 10) | 메인 배경 |
| **Jamie Steel Blue** | #4C718B | (76, 113, 139) | (45, 19, 0, 45) | 타이틀, 강조 텍스트 |
| **Jamie Mist** | #8BA0AF | (139, 160, 175) | (21, 9, 0, 31) | 중간톤, 서브 텍스트 |
| **Jamie Cloud** | #A9C3D7 | (169, 195, 215) | (21, 9, 0, 16) | 서브 요소, 구분선 |
---
### 1.3 인쇄용 그라데이션 (Print Gradients) 🆕
#### 민트 그린 그라데이션
```css
/* CSS */
background: linear-gradient(135deg, #DAEEE3 0%, #D2EBDD 50%, #C8E5D6 100%);
/* 인쇄 적용 */
시작점: #DAEEE3 (C8 M0 Y5 K7)
중간점: #D2EBDD (C11 M0 Y6 K8)
끝점: #C8E5D6 (C13 M0 Y8 K10)
```
**용도**: 표지, 메인 비주얼, 안내서 배경
#### 블루 그라데이션
```css
/* CSS */
background: linear-gradient(135deg, #C6D7E6 0%, #B8CDE0 50%, #A9C3D7 100%);
/* 인쇄 적용 */
시작점: #C6D7E6 (C14 M7 Y0 K10)
중간점: #B8CDE0 (C18 M9 Y0 K12)
끝점: #A9C3D7 (C21 M9 Y0 K16)
```
**용도**: FAQ 섹션, 정보 안내 페이지
---
## 2. 타이포그래피 확장 가이드
### 2.1 서체 체계 🆕
| 용도 | 서체 | 웨이트 | 언어 |
|------|------|--------|------|
| **영문 로고** | Now | Regular | EN |
| **영문 본문** | DM Sans | Regular, Bold | EN |
| **국문 전체** | Noto Sans KR | Light, Regular, Medium, Bold | KO |
### 2.2 서체 상세
#### Now (영문 로고 전용)
- **용도**: "JAMIE", "JAMIE CLINIC" 워드마크
- **특징**: 현대적이고 깔끔한 산세리프, 기하학적 형태
- **웨이트**: Regular
- **출처**: 프리미엄 서체 (라이선스 확인 필요)
#### DM Sans (영문 본문)
- **용도**: 영문 태그라인, 부제목, 영문 안내문
- **특징**: 가독성 높은 기하학적 산세리프, Google Fonts 무료 제공
- **웨이트**:
- Regular (400) - 본문
- Bold (700) - 강조, 제목
- **출처**: [Google Fonts](https://fonts.google.com/specimen/DM+Sans)
#### Noto Sans KR (국문 전체)
- **용도**: 모든 한글 텍스트
- **웨이트 활용**:
- Light (300) - 긴 본문, 부가 설명
- Regular (400) - 일반 본문
- Medium (500) - 서브 타이틀
- Bold (700) - 메인 타이틀, 강조
---
### 2.3 텍스트 스타일 가이드
#### 인쇄물 텍스트 스타일
| 요소 | 서체 | 크기 | 웨이트 | 자간 | 컬러 |
|------|------|------|--------|------|------|
| 메인 타이틀 (KO) | Noto Sans KR | 48-72pt | Bold | -60 | #568459 |
| 서브 타이틀 (KO) | Noto Sans KR | 24-36pt | Medium | -60 | #568459 |
| 본문 (KO) | Noto Sans KR | 14-18pt | Regular | -40 | #4A4949 |
| 캡션 (KO) | Noto Sans KR | 11-13pt | Light | -20 | #666666 |
| 로고 (EN) | Now | - | Regular | +50 | #6D7856 |
| 영문 타이틀 (EN) | DM Sans | 24-36pt | Bold | -20 | #568459 |
| 영문 본문 (EN) | DM Sans | 14-18pt | Regular | 0 | #4A4949 |
#### 웹 텍스트 스타일 (유지)
| 요소 | 서체 | 자간 | 행간 |
|------|------|------|------|
| 영문 텍스트 | DM Sans | -60 | 15.59pt |
| 타이틀 | Noto Sans KR | -60 | - |
| 소타이틀 | Noto Sans KR | -60 | 39pt |
| 라운드 네모박스 | Noto Sans KR | -60 | 31pt |
| 내용 텍스트 | Noto Sans KR | -60 | 26pt |
---
## 3. 테마별 적용 가이드
### 3.1 민트 그린 테마 적용
**적용 콘텐츠**:
- 초진 환자 안내서
- 수술당일 프로세스
- 병원 소개 자료
- 브로슈어 표지
**컬러 조합**:
```
배경: #DAEEE3 (Jamie Mint Light)
카드 배경: #FFFFFF 또는 #D2EBDD
메인 타이틀: #568459 (Jamie Forest)
본문: #4A4949
강조 아이콘: #79A233 (Jamie Green)
구분선: #B0C9B5 (Jamie Moss)
```
### 3.2 블루 테마 적용
**적용 콘텐츠**:
- FAQ 페이지
- Q&A 섹션
- 주의사항 안내
- 정보성 콘텐츠
**컬러 조합**:
```
배경: #C6D7E6 (Jamie Sky Light)
카드 배경: #FFFFFF 또는 #A9C3D7
메인 타이틀: #4C718B (Jamie Steel Blue)
본문: #4A4949
서브 텍스트: #8BA0AF (Jamie Mist)
```
---
## 4. CSS 코드 스니펫
```css
/* === 민트 그린 테마 === */
.theme-mint {
background: linear-gradient(135deg, #DAEEE3 0%, #D2EBDD 50%, #C8E5D6 100%);
}
.theme-mint .title {
color: #568459;
font-family: 'Noto Sans KR', sans-serif;
font-weight: 700;
letter-spacing: -0.06em;
}
.theme-mint .body {
color: #4A4949;
font-family: 'Noto Sans KR', sans-serif;
font-weight: 400;
}
.theme-mint .accent {
color: #79A233;
}
/* === 블루 테마 === */
.theme-blue {
background: linear-gradient(135deg, #C6D7E6 0%, #B8CDE0 50%, #A9C3D7 100%);
}
.theme-blue .title {
color: #4C718B;
font-family: 'Noto Sans KR', sans-serif;
font-weight: 700;
letter-spacing: -0.06em;
}
/* === 영문 서체 적용 === */
.logo-text {
font-family: 'Now', sans-serif;
letter-spacing: 0.05em;
color: #6D7856;
}
.en-title {
font-family: 'DM Sans', sans-serif;
font-weight: 700;
}
.en-body {
font-family: 'DM Sans', sans-serif;
font-weight: 400;
}
/* === Google Fonts 임포트 === */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&family=Noto+Sans+KR:wght@300;400;500;700&display=swap');
```
---
## 5. 파일 요약
| 분석 소스 | 추출 정보 |
|-----------|-----------|
| 초진 환자 안내서 표지 | 민트 그린 그라데이션, Jamie Forest 타이틀 컬러 |
| 수술당일 프로세스 페이지 | 민트 테마 적용 예시, 원형 스텝 디자인 |
| FAQ 페이지 | 블루 테마 컬러 팔레트 |
| 전체 | DM Sans (영문), Now (로고), Noto Sans KR (국문) 서체 체계 |
---
## 6. Notion 브랜드가이드 업데이트 항목
### PART 2: VISUAL IDENTITY 추가 내용
1. **브랜드 컬러** 섹션
- [x] 기존 Primary Colors 유지
- [ ] Print Extended Colors 추가 (민트/블루 테마)
- [ ] 인쇄용 CMYK 값 추가
- [ ] 그라데이션 가이드 추가
2. **타이포그래피** 섹션
- [ ] 서체 체계 확장 (Now, DM Sans 추가)
- [ ] 인쇄물 텍스트 스타일 추가
- [ ] 서체별 용도 명시
3. **CSS 적용 예시** 섹션
- [ ] 민트/블루 테마 CSS 추가
- [ ] Google Fonts 임포트 코드 추가
---
*이 문서는 Canva 제작 초진 환자 안내서 PDF 분석을 기반으로 작성되었습니다.*

BIN
custom-skills/41-jamie-brand-audit/desktop/design/jamie_clinic_square_dark.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

BIN
custom-skills/41-jamie-brand-audit/desktop/design/jamie_clinic_square_white.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

BIN
custom-skills/41-jamie-brand-audit/desktop/design/jamie_logo_f_j.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

641
custom-skills/41-jamie-brand-audit/desktop/design/jamie_logo_guidelines.html Normal file
View File

@@ -0,0 +1,641 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jamie Clinic Logo Guidelines</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
background: #f8f9fa;
color: #333;
line-height: 1.6;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 40px 20px;
}
header {
text-align: center;
margin-bottom: 60px;
padding: 60px 40px;
background: linear-gradient(135deg, #000 0%, #1a1a1a 100%);
border-radius: 20px;
color: white;
}
header h1 {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 10px;
color: #79A233;
}
header p {
font-size: 1.1rem;
opacity: 0.8;
}
section {
background: white;
border-radius: 16px;
padding: 40px;
margin-bottom: 30px;
box-shadow: 0 2px 20px rgba(0,0,0,0.06);
}
section h2 {
font-size: 1.5rem;
color: #79A233;
margin-bottom: 30px;
padding-bottom: 15px;
border-bottom: 2px solid #f1f4eb;
display: flex;
align-items: center;
gap: 10px;
}
section h2::before {
content: '';
width: 4px;
height: 24px;
background: #79A233;
border-radius: 2px;
}
h3 {
font-size: 1.1rem;
color: #555;
margin: 25px 0 15px;
}
.logo-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
margin-top: 20px;
}
.logo-card {
border: 1px solid #eee;
border-radius: 12px;
overflow: hidden;
transition: transform 0.2s, box-shadow 0.2s;
}
.logo-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 30px rgba(0,0,0,0.1);
}
.logo-preview {
height: 200px;
display: flex;
align-items: center;
justify-content: center;
padding: 30px;
}
.logo-preview.dark {
background: #000;
}
.logo-preview.light {
background: #fff;
border-bottom: 1px solid #eee;
}
.logo-preview.green {
background: #79A233;
}
.logo-preview img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.logo-info {
padding: 20px;
background: #fafafa;
}
.logo-info h4 {
font-size: 1rem;
color: #333;
margin-bottom: 8px;
}
.logo-info p {
font-size: 0.85rem;
color: #666;
}
.logo-info .tag {
display: inline-block;
padding: 4px 10px;
background: #f1f4eb;
color: #6d7856;
border-radius: 20px;
font-size: 0.75rem;
margin-top: 10px;
}
.color-palette {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-top: 20px;
}
.color-item {
border-radius: 12px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}
.color-swatch {
height: 100px;
}
.color-info {
padding: 15px;
background: white;
}
.color-info h4 {
font-size: 0.9rem;
margin-bottom: 5px;
}
.color-info code {
font-family: 'SF Mono', Monaco, monospace;
font-size: 0.85rem;
color: #666;
}
.rules-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-top: 20px;
}
.rule-card {
padding: 25px;
border-radius: 12px;
border: 1px solid #eee;
}
.rule-card.do {
background: linear-gradient(135deg, #f0f9e8 0%, #e8f5e0 100%);
border-color: #c8e6c9;
}
.rule-card.dont {
background: linear-gradient(135deg, #fff5f5 0%, #ffebee 100%);
border-color: #ffcdd2;
}
.rule-card h4 {
font-size: 1rem;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 8px;
}
.rule-card.do h4 {
color: #2e7d32;
}
.rule-card.dont h4 {
color: #c62828;
}
.rule-card ul {
list-style: none;
padding: 0;
}
.rule-card li {
padding: 8px 0;
font-size: 0.9rem;
color: #555;
display: flex;
align-items: flex-start;
gap: 8px;
}
.rule-card.do li::before {
content: '✓';
color: #2e7d32;
font-weight: bold;
}
.rule-card.dont li::before {
content: '✗';
color: #c62828;
font-weight: bold;
}
.spec-table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
.spec-table th,
.spec-table td {
padding: 15px;
text-align: left;
border-bottom: 1px solid #eee;
}
.spec-table th {
background: #f8f9fa;
font-weight: 600;
color: #555;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.spec-table td {
font-size: 0.95rem;
}
.spec-table tr:hover {
background: #fafafa;
}
.clearspace-demo {
background: #f5f5f5;
padding: 40px;
border-radius: 12px;
text-align: center;
margin: 20px 0;
}
.clearspace-box {
display: inline-block;
border: 2px dashed #79A233;
padding: 40px;
position: relative;
}
.clearspace-box::before {
content: 'X';
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
color: #79A233;
font-size: 0.8rem;
font-weight: bold;
}
.clearspace-box::after {
content: 'X';
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
color: #79A233;
font-size: 0.8rem;
font-weight: bold;
}
.logo-placeholder {
background: #000;
color: #79A233;
padding: 20px 40px;
font-weight: bold;
font-size: 1.5rem;
border-radius: 4px;
}
.note-box {
background: #fff3cd;
border-left: 4px solid #ffc107;
padding: 15px 20px;
margin: 20px 0;
border-radius: 0 8px 8px 0;
}
.note-box p {
font-size: 0.9rem;
color: #856404;
}
.file-list {
display: grid;
gap: 15px;
margin-top: 20px;
}
.file-item {
display: flex;
align-items: center;
gap: 15px;
padding: 15px 20px;
background: #f8f9fa;
border-radius: 10px;
border: 1px solid #eee;
}
.file-icon {
width: 50px;
height: 50px;
background: #79A233;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
font-size: 0.7rem;
}
.file-details h4 {
font-size: 0.95rem;
margin-bottom: 4px;
}
.file-details p {
font-size: 0.8rem;
color: #888;
}
footer {
text-align: center;
padding: 40px;
color: #888;
font-size: 0.9rem;
}
@media (max-width: 768px) {
header h1 {
font-size: 1.8rem;
}
section {
padding: 25px;
}
.logo-grid {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>Jamie Clinic Logo Guidelines</h1>
<p>제이미성형외과 로고 가이드라인 v1.0</p>
</header>
<!-- 로고 버전 -->
<section>
<h2>로고 버전</h2>
<p>제이미성형외과의 공식 로고는 여성 얼굴 측면 실루엣(심볼)과 워드마크의 조합으로 구성됩니다.</p>
<div class="logo-grid">
<div class="logo-card">
<div class="logo-preview light">
<div style="display: flex; align-items: center; gap: 15px;">
<svg width="60" height="80" viewBox="0 0 60 80">
<path d="M0 0 L0 80 L30 80 Q60 70 50 40 Q60 20 40 10 Q30 0 0 0" fill="#000"/>
</svg>
<div style="font-weight: bold; font-size: 1.2rem; color: #000;">
제이미<br>성형외과
</div>
</div>
</div>
<div class="logo-info">
<h4>국문 조합형 (밝은 배경)</h4>
<p>간판, 명판, 공식 문서, 인쇄물용</p>
<span class="tag">Primary</span>
</div>
</div>
<div class="logo-card">
<div class="logo-preview dark">
<div style="display: flex; flex-direction: column; align-items: center; gap: 10px;">
<svg width="80" height="100" viewBox="0 0 60 80">
<path d="M60 0 L60 80 L30 80 Q0 70 10 40 Q0 20 20 10 Q30 0 60 0" fill="#fff"/>
</svg>
<div style="font-weight: bold; font-size: 1.3rem; color: #fff; letter-spacing: 2px;">
JAMIE
</div>
</div>
</div>
<div class="logo-info">
<h4>영문 정사각형 (흰색)</h4>
<p>다크 배경, SNS 프로필 (Instagram, YouTube)</p>
<span class="tag">Monochrome</span>
</div>
</div>
<div class="logo-card">
<div class="logo-preview dark">
<div style="display: flex; flex-direction: column; align-items: center; gap: 10px;">
<svg width="80" height="100" viewBox="0 0 60 80">
<path d="M60 0 L60 80 L30 80 Q0 70 10 40 Q0 20 20 10 Q30 0 60 0" fill="#79A233"/>
</svg>
<div style="font-weight: bold; font-size: 1.3rem; color: #79A233; letter-spacing: 2px;">
JAMIE
</div>
</div>
</div>
<div class="logo-info">
<h4>영문 정사각형 (브랜드 그린)</h4>
<p>브랜드 컬러 강조, 마케팅 자료</p>
<span class="tag">Brand Color</span>
</div>
</div>
</div>
</section>
<!-- 컬러 팔레트 -->
<section>
<h2>로고 컬러</h2>
<p>로고에 사용 가능한 공식 컬러입니다. 이 외의 색상은 사용할 수 없습니다.</p>
<div class="color-palette">
<div class="color-item">
<div class="color-swatch" style="background: #79A233;"></div>
<div class="color-info">
<h4>Jamie Green</h4>
<code>#79A233</code>
</div>
</div>
<div class="color-item">
<div class="color-swatch" style="background: #AFCC6D;"></div>
<div class="color-info">
<h4>Jamie Light Green</h4>
<code>#AFCC6D</code>
</div>
</div>
<div class="color-item">
<div class="color-swatch" style="background: #6d7856;"></div>
<div class="color-info">
<h4>Jamie Main</h4>
<code>#6d7856</code>
</div>
</div>
<div class="color-item">
<div class="color-swatch" style="background: #000000;"></div>
<div class="color-info">
<h4>Black</h4>
<code>#000000</code>
</div>
</div>
<div class="color-item">
<div class="color-swatch" style="background: #FFFFFF; border: 1px solid #eee;"></div>
<div class="color-info">
<h4>White</h4>
<code>#FFFFFF</code>
</div>
</div>
</div>
</section>
<!-- 여백 규정 -->
<section>
<h2>여백 규정 (Clear Space)</h2>
<p>로고 주변에는 최소 여백을 확보하여 가독성을 보장합니다.</p>
<div class="clearspace-demo">
<div class="clearspace-box">
<div class="logo-placeholder">JAMIE</div>
</div>
<p style="margin-top: 20px; color: #666; font-size: 0.9rem;">
X = 로고 높이의 25% (또는 워드마크 'J' 높이)
</p>
</div>
<div class="note-box">
<p><strong>Note:</strong> 상하좌우 동일하게 X값을 적용하며, 다른 그래픽 요소나 텍스트와 충분한 간격을 유지해야 합니다.</p>
</div>
</section>
<!-- 최소 크기 -->
<section>
<h2>최소 크기</h2>
<table class="spec-table">
<thead>
<tr>
<th>매체</th>
<th>최소 크기</th>
<th>비고</th>
</tr>
</thead>
<tbody>
<tr>
<td>인쇄물</td>
<td>너비 25mm</td>
<td>명함, 브로슈어 등</td>
</tr>
<tr>
<td>디지털 (일반)</td>
<td>너비 80px</td>
<td>웹, 앱 등</td>
</tr>
<tr>
<td>파비콘</td>
<td>16×16px</td>
<td>심볼만 사용</td>
</tr>
<tr>
<td>SNS 프로필</td>
<td>180×180px</td>
<td>정사각형 로고</td>
</tr>
</tbody>
</table>
</section>
<!-- 사용 규칙 -->
<section>
<h2>사용 규칙</h2>
<div class="rules-grid">
<div class="rule-card do">
<h4>✓ Do's (권장)</h4>
<ul>
<li>공식 파일만 사용</li>
<li>충분한 여백 확보</li>
<li>적절한 배경 대비 유지</li>
<li>최소 크기 이상으로 사용</li>
<li>승인된 컬러만 적용</li>
</ul>
</div>
<div class="rule-card dont">
<h4>✗ Don'ts (금지)</h4>
<ul>
<li>비율 변형 (늘리기, 줄이기)</li>
<li>색상 임의 변경</li>
<li>효과 추가 (그림자, 발광)</li>
<li>복잡한 배경 위 사용</li>
<li>로고 일부 자르기</li>
<li>회전하여 사용</li>
</ul>
</div>
</div>
</section>
<!-- 파일 목록 -->
<section>
<h2>로고 파일</h2>
<h3>현재 보유 파일</h3>
<div class="file-list">
<div class="file-item">
<div class="file-icon">PNG</div>
<div class="file-details">
<h4>_Jamie-Clinic-plaque.png</h4>
<p>국문 조합형 • 밝은 배경용</p>
</div>
</div>
<div class="file-item">
<div class="file-icon">WEBP</div>
<div class="file-details">
<h4>jamie_logo_f_j.webp</h4>
<p>영문 정사각형 • 흰색 • 다크 배경용</p>
</div>
</div>
<div class="file-item">
<div class="file-icon">JPG</div>
<div class="file-details">
<h4>Jamie-Clinic-Logo-Square-500x500-dark.jpg</h4>
<p>영문 정사각형 • 브랜드 그린 • 500×500px</p>
</div>
</div>
</div>
<h3 style="margin-top: 30px;">추가 필요 파일 (권장)</h3>
<div class="note-box">
<p>벡터 원본 파일(AI, SVG)과 심볼만 있는 파일이 필요합니다. 파비콘, 앱 아이콘 등 다양한 크기로 사용하기 위해 벡터 파일 확보를 권장합니다.</p>
</div>
</section>
<footer>
<p>Jamie Clinic Logo Guidelines v1.0 • 2025-12-09</p>
<p style="margin-top: 5px; font-size: 0.8rem;">제이미성형외과 마케팅팀</p>
</footer>
</div>
</body>
</html>

324
custom-skills/41-jamie-brand-audit/desktop/design/jamie_logo_guidelines.md Normal file
View File

@@ -0,0 +1,324 @@
# 제이미성형외과 로고 가이드라인
## Jamie Clinic Logo Guidelines
**버전**: 1.0
**작성일**: 2025-12-09
**참조 파일**:
- _Jamie-Clinic-plaque.png
- jamie_logo_f_j.webp
- Jamie-Clinic-Logo-Square-500x500-dark.jpg
---
## 1. 로고 구성 요소
### 1.1 심볼 마크 (Symbol Mark)
```
┌────────────────────────────────────────┐
│ │
│ ████ │
│ ██ ██ │
│ ██ ██ │
│ ██ ██ 여성 얼굴 측면 실루엣 │
│ ██ ██ (Face Profile) │
│ ██ ██ │
│ ████ │
│ ██ │
│ │
└────────────────────────────────────────┘
```
**설명**:
- 여성 얼굴의 측면 실루엣
- 성형외과의 전문 분야인 '얼굴 성형'을 상징
- 자연스럽고 아름다운 윤곽선 강조
- 우아하고 세련된 이미지 전달
### 1.2 워드마크 (Wordmark)
| 언어 | 표기 | 서체 스타일 |
|-----|------|------------|
| 국문 | 제이미 성형외과 | 고딕 계열, Bold |
| 영문 | JAMIE | Sans-serif, Bold, 대문자 |
### 1.3 조합형 로고 (Combination Mark)
**가로형 (국문)**
```
┌─────────────────────────────────────────────────┐
│ │
│ [실루엣] 제이미 │
│ 성형외과 │
│ │
└─────────────────────────────────────────────────┘
```
**정사각형 (영문)**
```
┌───────────────────┐
│ │
│ [실루엣] │
│ │
│ JAMIE │
│ │
└───────────────────┘
```
---
## 2. 로고 버전
### 2.1 공식 로고 버전
| 버전 | 용도 | 파일 |
|-----|------|------|
| **국문 가로형** | 간판, 명판, 공식 문서, 인쇄물 | _Jamie-Clinic-plaque.png |
| **영문 정사각형 (흰색)** | 다크 배경, SNS 프로필 | jamie_logo_f_j.webp |
| **영문 정사각형 (그린)** | 브랜드 컬러 강조, 마케팅 | Jamie-Clinic-Logo-Square-500x500-dark.jpg |
### 2.2 컬러 변형
#### Primary (기본)
```
┌─────────────────────────────────────────────────┐
│ 검정 배경 + Jamie Green 실루엣 │
│ Background: #000000 │
│ Symbol: #79A233 (Jamie Green) │
│ Text: #79A233 (Jamie Green) │
└─────────────────────────────────────────────────┘
```
#### Monochrome - Dark (다크 모노크롬)
```
┌─────────────────────────────────────────────────┐
│ 검정 배경 + 흰색 │
│ Background: #000000 │
│ Symbol: #FFFFFF │
│ Text: #FFFFFF │
└─────────────────────────────────────────────────┘
```
#### Monochrome - Light (라이트 모노크롬)
```
┌─────────────────────────────────────────────────┐
│ 흰색/밝은 배경 + 검정 │
│ Background: #FFFFFF │
│ Symbol: #000000 │
│ Text: #000000 │
└─────────────────────────────────────────────────┘
```
#### Reversed (반전)
```
┌─────────────────────────────────────────────────┐
│ Jamie Green 배경 + 흰색 │
│ Background: #79A233 │
│ Symbol: #FFFFFF │
│ Text: #FFFFFF │
└─────────────────────────────────────────────────┘
```
---
## 3. 로고 사용 규정
### 3.1 최소 크기 (Minimum Size)
| 매체 | 최소 너비 | 설명 |
|-----|----------|------|
| **인쇄물** | 25mm | 명함, 브로슈어 등 |
| **디지털** | 80px | 웹, 앱, SNS 등 |
| **파비콘** | 16×16px | 심볼만 사용 |
| **SNS 프로필** | 180×180px | 정사각형 로고 |
### 3.2 여백 규정 (Clear Space)
로고 주변에는 최소 여백(Clear Space)을 확보하여 가독성을 보장합니다.
```
┌─────────────────────────────────────────┐
│ │
│ ┌───────────────────────────┐ │
│ │ ← X → │ │
│ │ ↑ │ │
│ │ X ┌───────────┐ │ │
│ │ ↓ │ LOGO │ │ │
│ │ └───────────┘ │ │
│ │ ← X → │ │
│ └───────────────────────────┘ │
│ │
└─────────────────────────────────────────┘
X = 로고 높이의 25% (또는 워드마크 'J' 높이)
```
**여백 기준**:
- 상하좌우 동일하게 X값 적용
- 다른 그래픽 요소, 텍스트와 충분한 간격 유지
- 가장자리(테두리)에 너무 가깝게 배치 금지
### 3.3 배치 가이드
| 위치 | 권장 | 비권장 |
|-----|------|--------|
| **문서 헤더** | 좌측 상단 또는 중앙 | 우측 하단 |
| **명함** | 전면 중앙 또는 좌측 | 뒤집어서 배치 |
| **웹사이트** | 좌측 상단 (헤더) | 푸터에만 배치 |
| **SNS** | 프로필 이미지 중앙 | 잘린 상태로 사용 |
---
## 4. 로고 사용 금지 사항
### 4.1 비율 변형 금지
```
❌ 가로로 늘리기 ❌ 세로로 늘리기 ❌ 기울이기
┌──────────────┐ ┌────┐ ╱────╲
│ JAMIE │ │ J │ ╱ JAMIE╲
│ (늘어남) │ │ A │ ╱ ╲
└──────────────┘ │ M │
│ I │
│ E │
└────┘
```
### 4.2 색상 임의 변경 금지
```
❌ 승인되지 않은 색상 사용
- 빨강, 파랑, 노랑 등 브랜드 컬러가 아닌 색상
- 그라데이션 적용
- 무지개 색상
✓ 승인된 색상만 사용
- #000000 (Black)
- #FFFFFF (White)
- #79A233 (Jamie Green)
- #AFCC6D (Jamie Light Green)
- #6d7856 (Jamie Main)
```
### 4.3 배경 대비 부적절 사용 금지
```
❌ 대비 부족 ✓ 충분한 대비
┌──────────────────┐ ┌──────────────────┐
│ ░░░░░░░░░░░░░░░░ │ │ ████████████████ │
│ ░░ JAMIE ░░░░░░░ │ │ ██ JAMIE ████ │
│ ░░░░░░░░░░░░░░░░ │ │ ████████████████ │
└──────────────────┘ └──────────────────┘
(밝은 배경 + 밝은 로고) (어두운 배경 + 밝은 로고)
```
### 4.4 기타 금지 사항
| 금지 사항 | 설명 |
|----------|------|
| **요소 분리** | 심볼과 워드마크를 임의로 분리하여 사용 |
| **효과 추가** | 그림자, 엠보싱, 외곽선, 발광 효과 등 |
| **텍스트 변경** | 워드마크 폰트 변경 또는 글자 수정 |
| **장식 추가** | 별, 하트, 밑줄 등 장식 요소 추가 |
| **복잡한 배경** | 패턴, 사진 위에 직접 배치 (단색 배경 권장) |
| **로고 자르기** | 로고의 일부가 잘리도록 배치 |
| **회전** | 45°, 90° 등 임의 회전 |
---
## 5. 매체별 적용 가이드
### 5.1 인쇄물
| 매체 | 권장 버전 | 파일 형식 | 최소 해상도 |
|-----|----------|----------|------------|
| 명함 | 국문 가로형 | AI, PDF | 300dpi |
| 브로슈어 | 국문 가로형 | AI, PDF | 300dpi |
| 간판 | 국문 가로형 | AI, EPS | 벡터 |
| 봉투/레터헤드 | 국문 가로형 | AI, PDF | 300dpi |
### 5.2 디지털
| 매체 | 권장 버전 | 파일 형식 | 권장 크기 |
|-----|----------|----------|----------|
| 웹사이트 헤더 | 영문 가로형 | PNG, SVG | 높이 60px |
| 파비콘 | 심볼만 | ICO, PNG | 32×32px |
| 이메일 서명 | 국문 가로형 | PNG | 높이 50px |
| SNS 프로필 | 정사각형 | PNG, JPG | 500×500px |
### 5.3 SNS 채널별
| 채널 | 프로필 | 커버 | 워터마크 |
|-----|-------|------|---------|
| Instagram | 정사각형 (그린) | - | 정사각형 (투명) |
| YouTube | 정사각형 (흰색) | 국문 가로형 | 정사각형 (투명) |
| Naver Blog | 정사각형 (그린) | 국문 가로형 | - |
| KakaoTalk | 정사각형 (흰색) | - | - |
---
## 6. 로고 파일 목록
### 6.1 제공 파일
| 파일명 | 형식 | 크기 | 용도 |
|-------|-----|------|------|
| _Jamie-Clinic-plaque.png | PNG | 가변 | 국문 조합형, 밝은 배경용 |
| jamie_logo_f_j.webp | WebP | 정사각형 | 영문 정사각형, 다크 배경용 (흰색) |
| Jamie-Clinic-Logo-Square-500x500-dark.jpg | JPG | 500×500px | 영문 정사각형, 다크 배경용 (그린) |
### 6.2 추가 필요 파일 (권장)
| 파일 | 형식 | 용도 | 우선순위 |
|-----|-----|------|---------|
| jamie_logo_vector.ai | AI | 원본 벡터 (편집용) | 🔴 높음 |
| jamie_logo_vector.svg | SVG | 웹용 벡터 | 🔴 높음 |
| jamie_symbol_only.png | PNG | 심볼만 (파비콘, 앱 아이콘) | 🔴 높음 |
| jamie_logo_kr_horizontal.png | PNG | 국문 가로형 (투명 배경) | 🟡 중간 |
| jamie_logo_reversed.png | PNG | 반전 버전 (그린 배경) | 🟢 낮음 |
---
## 7. 로고 사용 승인 프로세스
### 7.1 내부 사용
- 마케팅팀 또는 디자인 담당자가 가이드라인에 따라 자유롭게 사용
- 새로운 적용 사례는 기록 및 공유
### 7.2 외부 협력사/대행사 사용
1. 로고 파일 요청 시 본 가이드라인 함께 제공
2. 시안 검토 단계에서 가이드라인 준수 여부 확인
3. 최종 결과물 승인 후 사용
### 7.3 미디어/언론 사용
1. 공식 로고 파일 제공 (압축 파일 형태)
2. 가이드라인 준수 요청
3. 게재 전 확인 권장
---
## 8. 버전 히스토리
| 버전 | 날짜 | 변경 내용 | 작성자 |
|-----|------|----------|-------|
| 1.0 | 2025-12-09 | 초안 작성 | Marketing |
---
## 부록: 빠른 참조 가이드
### ✅ Do's (권장)
- 공식 파일만 사용
- 충분한 여백 확보
- 적절한 배경 대비 유지
- 최소 크기 이상으로 사용
- 승인된 컬러만 적용
### ❌ Don'ts (금지)
- 비율 변형
- 색상 임의 변경
- 효과 추가 (그림자, 발광 등)
- 복잡한 배경 위 사용
- 로고 일부 자르기
- 다른 요소와 너무 가깝게 배치