공개 문서
docs/tone-and-manner-review.md
아래는 docs/tone-and-manner-review.md 와 동일한 원문입니다. Markdown과 HTML 변환 결과를 각각 복사할 수 있습니다.
공개 문서 원문 (Markdown)
# Skoolchef Tutorial 톤앤매너 평가 및 개선 제안
> 평가일: 2026-03-10
> 대상: UI·카피·브랜드 일관성
---
## 1. 현재 톤앤매너 요약
### 1.1 시각(비주얼)
| 항목 | 현재 | 평가 |
|------|------|------|
| **컬러** | slate + blue 계열, 모듈별 violet/orange/blue/green 포인트 | 차분하고 구분이 잘 됨. 강의 사이트에 적합 |
| **타이포** | Noto Sans KR 400/500/700, prose-slate | 가독성 좋음. 과하지 않음 |
| **레이아웃** | 넓은 여백, 카드형 챕터 목록, 고정 네비·사이드바 | 정돈된 문서형. 스쿨/교육 톤과 잘 맞음 |
| **CTA** | "지금 시작하기 →", "커리큘럼 보기" | 명확하나 감성/브랜드 문구는 약함 |
**종합**: **전문적·교육용·안정감** 있는 톤. 과한 이펙트나 캐주얼한 이모지 남발 없음.
---
### 1.2 카피(문구)
| 구분 | 톤 | 예시 |
|------|-----|------|
| **홈 히어로** | 약속·구체적 이득 | "실제 서비스를 만드세요", "코딩 경험 없이도 랜딩페이지 배포까지" |
| **챕터 본문** | 설명·단계 안내, 존댓말 혼용 | "~해봅시다", "~해주세요", "~합니다" 혼재 |
| **도구 소개** | 한 줄 정의 + 역할 | "GUI AI 에디터. 초보자도 즉시 사용 가능" |
| **네비/UI** | 최소 단어 | "커리큘럼", "이전", "다음", "Chapter N" |
**강점**
- **목표가 분명함**: "실제 서비스", "랜딩페이지 배포"로 끝이 보임.
- **비교·선택 유도**: "3종", "상황에 맞게 선택"으로 도구 포지셔닝이 명확함.
- **진입 장벽 완화**: "코딩 경험 없이도", "초보자도 즉시"로 불안 해소.
**아쉬운 점**
- **말투 통일 부족**: "~해봅시다" vs "~합니다" 혼용으로 한 강의 시리즈 안에서 톤이 들쭉날쭉함.
- **브랜드 보이스 약함**: "Skoolchef Tutorial"만 반복되고, 스쿨/커뮤니티 정체성은 문구에서 거의 드러나지 않음.
- **감성/동기 부여 문구 적음**: "왜 이걸 배우는가", "수강 후 어떤 상태가 되는가"는 00-intro에만 있고 홈·챕터 인트로에는 거의 없음.
---
### 1.3 타깃 대비 적합성
- **스쿨 수강생·비개발자**: "무료로 시작", "15~20분", "준비물" 등 **단계·시간 명시**가 잘 되어 있음.
- **이미 한두 도구 쓰는 사람**: "원하는 모듈부터 시작하세요", "Module 2부터 시작해도 됩니다"로 **점진 진입** 가능.
- **영문/한글 혼용**: Cursor, Claude Code, Cmd+L 등 **도구/기술 용어는 영문 유지**가 적절함.
---
## 2. 개선 가능성 제안
### 2.1 말투(톤) 통일
- **권장**: 전 사이트를 **해요체** 또는 **합니다체** 중 하나로 통일.
- **해요체**: "가입해봅시다" → "가입해 보세요", "실행합니다" → "실행해요". 친근·스쿨 느낌 강화.
- **합니다체**: "해봅시다" → "진행합니다", "~해주세요" → "~해 주시기 바랍니다". 더 교재/공식 문서 느낌.
- **적용 위치**: 홈 문구, 모든 챕터 MDX 인트로·섹션 문장, 버튼/링크 라벨("지금 시작하기" 등은 유지 가능).
---
### 2.2 브랜드 보이스 강화
- **한 줄 슬로건/서브라인** 도입
- 예: "AI와 함께하는 첫 코딩, 여기서 시작하세요" / "세 가지 도구로 배우는 실전 바이브코딩"
- 배치: 히어로 서브텍스트, footer, OG description.
- **스쿨/커뮤니티 언급**
- "Skoolchef와 함께하는", "수강생 전용" 등 짧은 문구를 홈·커리큘럼 상단에 1~2문장으로 추가.
- **챕터별 인트로 문장**
- 각 챕터 상단에 "이 챕터를 마치면 ~를 할 수 있습니다" 한 줄로 **학습 목표**를 명시 (일부 챕터는 이미 유사 문구 있음 → 패턴만 통일).
---
### 2.3 비주얼 톤 미세 조정 (선택)
- **히어로**: 현재 그라데이션·블루가 무난함. "실제 서비스를 만드세요" 문구를 더 크게 하거나, 짧은 수치("13챕터 · 약 15시간")를 뱃지로 넣어 **구체성** 강화.
- **챕터 카드**: 호버 시 살짝 그림자·테두리 강조는 이미 있음. "진행률" 또는 "완료" 표시가 생기면 **학습 동기**에 도움.
- **로고/파비콘**: ⚡ 단일 이모지 대신, "Skoolchef Tutorial" 로고타입 또는 심볼을 정해 **재방문 시 인지도** 확보.
---
### 2.4 접근성·감성 문구
- **첫 방문자**: 히어로 아래에 "처음이에요? [00. AI 코딩 도구 개요]부터 보세요" 같은 **시작점 안내** 한 줄.
- **이전/다음**: 현재 "← 이전", "다음 →"에 챕터 제목이 함께 있어 좋음. 선택적으로 "이전 챕터", "다음 챕터" 라벨을 aria 등으로 보강.
- **챕터 번호**: "Chapter 3"보다 "3. 준비 — 서비스 기획서"처럼 **제목과 함께** 노출하면 스캔 시 이해가 빠름 (이미 제목은 있으므로, "Chapter N" 부가 문구를 "Part 1 · Cursor" 같은 **모듈 컨텍스트**로 바꾸는 것도 가능).
---
## 3. 우선 적용 추천 순서
1. **말투 통일** — 챕터 MDX와 홈 문구를 해요체 또는 합니다체로 정해 일괄 수정 (효과 대비 작업량이 큼).
2. **한 줄 슬로건 + 학습 목표** — 히어로 서브라인, 챕터별 "이 챕터를 마치면 ~" 한 문장 추가.
3. **첫 방문자 안내** — "처음이에요? 00-intro부터 보세요" 등 한 줄 추가.
4. **브랜드 문구** — 스쿨/커뮤니티 1문장, OG·메타 설명에 슬로건 반영.
이 문서는 `docs/structure-and-design-analysis.md`의 "개선사항"과 함께 참고하면 됩니다.
---
## 4. 적용 완료 내역 (2026-03-10)
| 항목 | 적용 내용 |
|------|-----------|
| 슬로건 | 히어로에 "세 가지 도구로 배우는 실전 바이브코딩", "13챕터 · 약 15시간" 뱃지 추가 |
| 첫 방문자 안내 | "처음이에요? [00. AI 코딩 도구 개요]부터 보세요" 링크 추가 |
| 브랜드 문구 | "Skoolchef와 함께하는 AI 코딩 커리큘럼" — 홈·커리큘럼 목록 상단 |
| 메타·OG | description에 슬로건 + "Skoolchef와 함께해요" 반영 |
| 학습 목표 | 전 챕터(00~12) 상단에 "이 챕터를 마치면 ~할 수 있어요" 블록 인용 추가 |
| 말투 통일 | 해요체로 통일 — 00·01 인트로 전반, 02~12 첫 문단·핵심 문장. 본문 중간은 추후 점진 보완 가능 |
공개 문서 변환 코드 (HTML)
<h1>Skoolchef Tutorial 톤앤매너 평가 및 개선 제안</h1>
<blockquote>
<p>평가일: 2026-03-10<br>대상: UI·카피·브랜드 일관성</p>
</blockquote>
<hr>
<h2>1. 현재 톤앤매너 요약</h2>
<h3>1.1 시각(비주얼)</h3>
<table>
<thead>
<tr>
<th>항목</th>
<th>현재</th>
<th>평가</th>
</tr>
</thead>
<tbody><tr>
<td><strong>컬러</strong></td>
<td>slate + blue 계열, 모듈별 violet/orange/blue/green 포인트</td>
<td>차분하고 구분이 잘 됨. 강의 사이트에 적합</td>
</tr>
<tr>
<td><strong>타이포</strong></td>
<td>Noto Sans KR 400/500/700, prose-slate</td>
<td>가독성 좋음. 과하지 않음</td>
</tr>
<tr>
<td><strong>레이아웃</strong></td>
<td>넓은 여백, 카드형 챕터 목록, 고정 네비·사이드바</td>
<td>정돈된 문서형. 스쿨/교육 톤과 잘 맞음</td>
</tr>
<tr>
<td><strong>CTA</strong></td>
<td>"지금 시작하기 →", "커리큘럼 보기"</td>
<td>명확하나 감성/브랜드 문구는 약함</td>
</tr>
</tbody></table>
<p><strong>종합</strong>: <strong>전문적·교육용·안정감</strong> 있는 톤. 과한 이펙트나 캐주얼한 이모지 남발 없음.</p>
<hr>
<h3>1.2 카피(문구)</h3>
<table>
<thead>
<tr>
<th>구분</th>
<th>톤</th>
<th>예시</th>
</tr>
</thead>
<tbody><tr>
<td><strong>홈 히어로</strong></td>
<td>약속·구체적 이득</td>
<td>"실제 서비스를 만드세요", "코딩 경험 없이도 랜딩페이지 배포까지"</td>
</tr>
<tr>
<td><strong>챕터 본문</strong></td>
<td>설명·단계 안내, 존댓말 혼용</td>
<td>"~해봅시다", "~해주세요", "~합니다" 혼재</td>
</tr>
<tr>
<td><strong>도구 소개</strong></td>
<td>한 줄 정의 + 역할</td>
<td>"GUI AI 에디터. 초보자도 즉시 사용 가능"</td>
</tr>
<tr>
<td><strong>네비/UI</strong></td>
<td>최소 단어</td>
<td>"커리큘럼", "이전", "다음", "Chapter N"</td>
</tr>
</tbody></table>
<p><strong>강점</strong></p>
<ul>
<li><strong>목표가 분명함</strong>: "실제 서비스", "랜딩페이지 배포"로 끝이 보임.</li>
<li><strong>비교·선택 유도</strong>: "3종", "상황에 맞게 선택"으로 도구 포지셔닝이 명확함.</li>
<li><strong>진입 장벽 완화</strong>: "코딩 경험 없이도", "초보자도 즉시"로 불안 해소.</li>
</ul>
<p><strong>아쉬운 점</strong></p>
<ul>
<li><strong>말투 통일 부족</strong>: "~해봅시다" vs "~합니다" 혼용으로 한 강의 시리즈 안에서 톤이 들쭉날쭉함.</li>
<li><strong>브랜드 보이스 약함</strong>: "Skoolchef Tutorial"만 반복되고, 스쿨/커뮤니티 정체성은 문구에서 거의 드러나지 않음.</li>
<li><strong>감성/동기 부여 문구 적음</strong>: "왜 이걸 배우는가", "수강 후 어떤 상태가 되는가"는 00-intro에만 있고 홈·챕터 인트로에는 거의 없음.</li>
</ul>
<hr>
<h3>1.3 타깃 대비 적합성</h3>
<ul>
<li><strong>스쿨 수강생·비개발자</strong>: "무료로 시작", "15~20분", "준비물" 등 <strong>단계·시간 명시</strong>가 잘 되어 있음.</li>
<li><strong>이미 한두 도구 쓰는 사람</strong>: "원하는 모듈부터 시작하세요", "Module 2부터 시작해도 됩니다"로 <strong>점진 진입</strong> 가능.</li>
<li><strong>영문/한글 혼용</strong>: Cursor, Claude Code, Cmd+L 등 <strong>도구/기술 용어는 영문 유지</strong>가 적절함.</li>
</ul>
<hr>
<h2>2. 개선 가능성 제안</h2>
<h3>2.1 말투(톤) 통일</h3>
<ul>
<li><strong>권장</strong>: 전 사이트를 <strong>해요체</strong> 또는 <strong>합니다체</strong> 중 하나로 통일.<ul>
<li><strong>해요체</strong>: "가입해봅시다" → "가입해 보세요", "실행합니다" → "실행해요". 친근·스쿨 느낌 강화.</li>
<li><strong>합니다체</strong>: "해봅시다" → "진행합니다", "~해주세요" → "~해 주시기 바랍니다". 더 교재/공식 문서 느낌.</li>
</ul>
</li>
<li><strong>적용 위치</strong>: 홈 문구, 모든 챕터 MDX 인트로·섹션 문장, 버튼/링크 라벨("지금 시작하기" 등은 유지 가능).</li>
</ul>
<hr>
<h3>2.2 브랜드 보이스 강화</h3>
<ul>
<li><strong>한 줄 슬로건/서브라인</strong> 도입 <ul>
<li>예: "AI와 함께하는 첫 코딩, 여기서 시작하세요" / "세 가지 도구로 배우는 실전 바이브코딩"</li>
<li>배치: 히어로 서브텍스트, footer, OG description.</li>
</ul>
</li>
<li><strong>스쿨/커뮤니티 언급</strong> <ul>
<li>"Skoolchef와 함께하는", "수강생 전용" 등 짧은 문구를 홈·커리큘럼 상단에 1~2문장으로 추가.</li>
</ul>
</li>
<li><strong>챕터별 인트로 문장</strong> <ul>
<li>각 챕터 상단에 "이 챕터를 마치면 ~를 할 수 있습니다" 한 줄로 <strong>학습 목표</strong>를 명시 (일부 챕터는 이미 유사 문구 있음 → 패턴만 통일).</li>
</ul>
</li>
</ul>
<hr>
<h3>2.3 비주얼 톤 미세 조정 (선택)</h3>
<ul>
<li><strong>히어로</strong>: 현재 그라데이션·블루가 무난함. "실제 서비스를 만드세요" 문구를 더 크게 하거나, 짧은 수치("13챕터 · 약 15시간")를 뱃지로 넣어 <strong>구체성</strong> 강화.</li>
<li><strong>챕터 카드</strong>: 호버 시 살짝 그림자·테두리 강조는 이미 있음. "진행률" 또는 "완료" 표시가 생기면 <strong>학습 동기</strong>에 도움.</li>
<li><strong>로고/파비콘</strong>: ⚡ 단일 이모지 대신, "Skoolchef Tutorial" 로고타입 또는 심볼을 정해 <strong>재방문 시 인지도</strong> 확보.</li>
</ul>
<hr>
<h3>2.4 접근성·감성 문구</h3>
<ul>
<li><strong>첫 방문자</strong>: 히어로 아래에 "처음이에요? [00. AI 코딩 도구 개요]부터 보세요" 같은 <strong>시작점 안내</strong> 한 줄.</li>
<li><strong>이전/다음</strong>: 현재 "← 이전", "다음 →"에 챕터 제목이 함께 있어 좋음. 선택적으로 "이전 챕터", "다음 챕터" 라벨을 aria 등으로 보강.</li>
<li><strong>챕터 번호</strong>: "Chapter 3"보다 "3. 준비 — 서비스 기획서"처럼 <strong>제목과 함께</strong> 노출하면 스캔 시 이해가 빠름 (이미 제목은 있으므로, "Chapter N" 부가 문구를 "Part 1 · Cursor" 같은 <strong>모듈 컨텍스트</strong>로 바꾸는 것도 가능).</li>
</ul>
<hr>
<h2>3. 우선 적용 추천 순서</h2>
<ol>
<li><strong>말투 통일</strong> — 챕터 MDX와 홈 문구를 해요체 또는 합니다체로 정해 일괄 수정 (효과 대비 작업량이 큼).</li>
<li><strong>한 줄 슬로건 + 학습 목표</strong> — 히어로 서브라인, 챕터별 "이 챕터를 마치면 ~" 한 문장 추가.</li>
<li><strong>첫 방문자 안내</strong> — "처음이에요? 00-intro부터 보세요" 등 한 줄 추가.</li>
<li><strong>브랜드 문구</strong> — 스쿨/커뮤니티 1문장, OG·메타 설명에 슬로건 반영.</li>
</ol>
<p>이 문서는 <code>docs/structure-and-design-analysis.md</code>의 "개선사항"과 함께 참고하면 됩니다.</p>
<hr>
<h2>4. 적용 완료 내역 (2026-03-10)</h2>
<table>
<thead>
<tr>
<th>항목</th>
<th>적용 내용</th>
</tr>
</thead>
<tbody><tr>
<td>슬로건</td>
<td>히어로에 "세 가지 도구로 배우는 실전 바이브코딩", "13챕터 · 약 15시간" 뱃지 추가</td>
</tr>
<tr>
<td>첫 방문자 안내</td>
<td>"처음이에요? [00. AI 코딩 도구 개요]부터 보세요" 링크 추가</td>
</tr>
<tr>
<td>브랜드 문구</td>
<td>"Skoolchef와 함께하는 AI 코딩 커리큘럼" — 홈·커리큘럼 목록 상단</td>
</tr>
<tr>
<td>메타·OG</td>
<td>description에 슬로건 + "Skoolchef와 함께해요" 반영</td>
</tr>
<tr>
<td>학습 목표</td>
<td>전 챕터(00~12) 상단에 "이 챕터를 마치면 ~할 수 있어요" 블록 인용 추가</td>
</tr>
<tr>
<td>말투 통일</td>
<td>해요체로 통일 — 00·01 인트로 전반, 02~12 첫 문단·핵심 문장. 본문 중간은 추후 점진 보완 가능</td>
</tr>
</tbody></table>