"마크다운연습"의 두 판 사이의 차이
| 149번째 줄: | 149번째 줄: | ||
<p style="margin:0;"><strong>These guidelines are working if:</strong> fewer unnecessary changes in diffs, fewer rewrites due to overcomplication, and clarifying questions come before implementation rather than after mistakes.</p> | <p style="margin:0;"><strong>These guidelines are working if:</strong> fewer unnecessary changes in diffs, fewer rewrites due to overcomplication, and clarifying questions come before implementation rather than after mistakes.</p> | ||
}} | }} | ||
| + | |||
| + | ---- | ||
| + | == 실습: 우리 팀 README.md 초안 쓰기 == | ||
| + | <div style="padding:14px 16px; border-left:4px solid #1d4ed8; background:#eff6ff; margin:0 0 16px 0;"> | ||
| + | <strong>💡 README.md란?</strong><br> | ||
| + | 깃허브 저장소에 들어갔을 때 가장 먼저 보이는 소개 문서입니다. 우리 팀 프로젝트가 <strong>무엇을, 어떤 데이터로, 어떻게</strong> 만드는지 처음 보는 사람에게 설명합니다. | ||
| + | </div> | ||
| + | <div style="display:flex; align-items:flex-start; margin:0 0 8px 0;"><span style="flex:0 0 26px; height:26px; line-height:26px; border-radius:50%; background:#dc2626; color:#fff; text-align:center; font-weight:700; margin-right:10px;">1</span><div>아래 예시에서 왼쪽 원문의 기호가 오른쪽에서 어떻게 바뀌는지 확인합니다.</div></div> | ||
| + | <div style="display:flex; align-items:flex-start; margin:0 0 8px 0;"><span style="flex:0 0 26px; height:26px; line-height:26px; border-radius:50%; background:#dc2626; color:#fff; text-align:center; font-weight:700; margin-right:10px;">2</span><div>맨 아래 <strong>빈 틀</strong>을 복사해 마크다운 편집기(깃허브 웹 편집기 등)에 붙여 넣고, 팀 프로젝트 내용으로 채웁니다.</div></div> | ||
| + | <div style="display:flex; align-items:flex-start; margin:0 0 20px 0;"><span style="flex:0 0 26px; height:26px; line-height:26px; border-radius:50%; background:#dc2626; color:#fff; text-align:center; font-weight:700; margin-right:10px;">3</span><div>미리보기(Preview)로 결과를 확인하고, <strong>자가점검</strong> 항목을 모두 통과하는지 살펴봅니다.</div></div> | ||
{{마크다운비교 | {{마크다운비교 | ||
| − | |제목=팀 | + | |제목=예시: 가상의 팀 README |
| − | |문법= | + | |문법=제목 · 굵게 · 목록 · 링크 · 표 · 체크리스트 |
| − | |원문=<pre style="margin:0; padding:10px; white-space:pre-wrap; word-break:break-word; font-size:13px; line-height:1.5; background:#f8fafc; border:1px solid #e2e8f0;">--- | + | |원문=<pre style="margin:0; padding:10px; white-space:pre-wrap; word-break:break-word; font-size:13px; line-height:1.5; background:#f8fafc; border:1px solid #e2e8f0;"># 서원지기: 조선 서원 배향 인물 지식그래프 |
| + | |||
| + | ## 1. 프로젝트 소개 | ||
| + | 우리 팀은 **조선시대 서원 기록**을 바탕으로 서원과 배향 인물, 학맥의 관계를 지식그래프로 구축합니다. | ||
| + | |||
| + | ## 2. 팀원 | ||
| + | - 김가람 (사학과) — 데이터 수집 | ||
| + | - 이나래 (국어국문학과) — 그래프 설계 | ||
| + | - 박다온 (철학과) — 시각화·해석 | ||
| + | |||
| + | ## 3. 데이터 출처 | ||
| + | - [한국학자료센터](https://kostma.aks.ac.kr) | ||
| + | |||
| + | ## 4. 그래프 설계 | ||
| + | | 노드 | 주요 속성 | | ||
| + | |---|---| | ||
| + | | Person | name, birth, death | | ||
| + | | Seowon | name, region | | ||
| + | |||
| + | ## 5. 진행 상황 | ||
| + | - [x] 데이터셋 선정 | ||
| + | - [ ] 노드·관계 설계 | ||
| + | - [ ] 중간발표 준비</pre> | ||
| + | |결과=<div style="font-size:1.6em; font-weight:700; line-height:1.3; padding-bottom:4px; border-bottom:1px solid #d0d7de; margin:0 0 12px 0;">서원지기: 조선 서원 배향 인물 지식그래프</div> | ||
| + | <div style="font-size:1.3em; font-weight:700; line-height:1.3; padding-bottom:4px; border-bottom:1px solid #d0d7de; margin:0 0 8px 0;">1. 프로젝트 소개</div> | ||
| + | <p style="margin:0 0 12px 0;">우리 팀은 <strong>조선시대 서원 기록</strong>을 바탕으로 서원과 배향 인물, 학맥의 관계를 지식그래프로 구축합니다.</p> | ||
| + | <div style="font-size:1.3em; font-weight:700; line-height:1.3; padding-bottom:4px; border-bottom:1px solid #d0d7de; margin:0 0 8px 0;">2. 팀원</div> | ||
| + | <ul style="margin:0 0 12px 0;"> | ||
| + | <li>김가람 (사학과) — 데이터 수집</li> | ||
| + | <li>이나래 (국어국문학과) — 그래프 설계</li> | ||
| + | <li>박다온 (철학과) — 시각화·해석</li> | ||
| + | </ul> | ||
| + | <div style="font-size:1.3em; font-weight:700; line-height:1.3; padding-bottom:4px; border-bottom:1px solid #d0d7de; margin:0 0 8px 0;">3. 데이터 출처</div> | ||
| + | <ul style="margin:0 0 12px 0;"> | ||
| + | <li><span style="color:#1d4ed8; text-decoration:underline;">한국학자료센터</span></li> | ||
| + | </ul> | ||
| + | <div style="font-size:1.3em; font-weight:700; line-height:1.3; padding-bottom:4px; border-bottom:1px solid #d0d7de; margin:0 0 8px 0;">4. 그래프 설계</div> | ||
| + | <table class="plan" style="width:100%; border-collapse:collapse; margin:0 0 12px 0;"> | ||
| + | <tr><th style="border:1px solid #d0d7de; padding:4px 8px; background:#f6f8fa; text-align:left;">노드</th><th style="border:1px solid #d0d7de; padding:4px 8px; background:#f6f8fa; text-align:left;">주요 속성</th></tr> | ||
| + | <tr><td style="border:1px solid #d0d7de; padding:4px 8px;">Person</td><td style="border:1px solid #d0d7de; padding:4px 8px;">name, birth, death</td></tr> | ||
| + | <tr><td style="border:1px solid #d0d7de; padding:4px 8px;">Seowon</td><td style="border:1px solid #d0d7de; padding:4px 8px;">name, region</td></tr> | ||
| + | </table> | ||
| + | <div style="font-size:1.3em; font-weight:700; line-height:1.3; padding-bottom:4px; border-bottom:1px solid #d0d7de; margin:0 0 8px 0;">5. 진행 상황</div> | ||
| + | <div style="margin:0 0 4px 0;">☑ 데이터셋 선정</div> | ||
| + | <div style="margin:0 0 4px 0;">☐ 노드·관계 설계</div> | ||
| + | <div style="margin:0;">☐ 중간발표 준비</div> | ||
| + | }} | ||
| − | # 팀 이름: (프로젝트 제목) | + | === 빈 틀 (복사해서 사용) === |
| + | <pre style="white-space:pre-wrap; font-size:13px; line-height:1.5; background:#f8fafc; border:1px solid #e2e8f0; padding:12px;"># (팀 이름): (프로젝트 제목) | ||
| − | ## 프로젝트 소개 | + | ## 1. 프로젝트 소개 |
| − | 우리 팀은 **(데이터셋 이름)**을 | + | 우리 팀은 **(데이터셋 이름)**을 바탕으로 (무엇과 무엇의 관계)를 지식그래프로 구축합니다. |
| − | ## 팀원 | + | ## 2. 팀원 |
| − | - | + | - (이름) (학과) — (역할) |
| − | - | + | - (이름) (학과) — (역할) |
| + | - (이름) (학과) — (역할) | ||
| − | ## 데이터 출처 | + | ## 3. 데이터 출처 |
| − | - [출처 이름](출처 주소) | + | - [(출처 이름)]((출처 주소)) |
| − | ## 그래프 | + | ## 4. 그래프 설계 |
| + | | 노드 | 주요 속성 | | ||
| + | |---|---| | ||
| + | | (노드 이름) | (속성1), (속성2) | | ||
| − | ## | + | ## 5. 진행 상황 |
| − | + | - [ ] 데이터셋 선정 | |
| − | + | - [ ] 노드·관계 설계 | |
| − | + | - [ ] 중간발표 준비</pre> | |
| − | + | <div style="padding:14px 16px; border:1px solid #cbd5e1; background:#f8fafc; margin:16px 0 0 0;"> | |
| − | + | <strong>✅ 자가점검</strong> | |
| − | + | * 제목(#, ##) 뒤에 한 칸을 띄웠는가? | |
| − | + | * 미리보기에서 표가 칸으로 나뉘어 보이는가? (둘째 줄 <code>|---|---|</code> 확인) | |
| − | + | * 데이터 출처 링크를 눌렀을 때 실제 페이지가 열리는가? | |
| − | + | * 팀원 역할이 실제 분담과 일치하는가? | |
| + | * 처음 보는 사람이 이 문서만 읽고 프로젝트를 이해할 수 있는가? | ||
| + | </div> | ||
2026년 10월 24일 (토) 00:45 판
💡 이 페이지 보는 법
왼쪽은 CLAUDE.md 파일에 실제로 입력된 마크다운 원문이고, 오른쪽은 깃허브나 AI 도구처럼 마크다운을 지원하는 환경에서 그 원문이 보이는 모습입니다. 이 위키는 마크다운을 직접 해석하지 않기 때문에, 오른쪽 화면은 같은 모양을 HTML로 재현한 것입니다.
| ① 문서 제목과 소개문 제목(#) · 문단 | |
|
✏️ 입력 (.md 원문)
# CLAUDE.md Behavioral guidelines to reduce common LLM coding mistakes. Merge with project-specific instructions as needed. |
👀 결과 (렌더링 화면)
CLAUDE.md
Behavioral guidelines to reduce common LLM coding mistakes. Merge with project-specific instructions as needed. |
| ② 강조 문단 굵게(**) | |
|
✏️ 입력 (.md 원문)
**Tradeoff:** These guidelines bias toward caution over speed. For trivial tasks, use judgment. |
👀 결과 (렌더링 화면)
Tradeoff: These guidelines bias toward caution over speed. For trivial tasks, use judgment. |
| ③ 1번 원칙 제목(##) · 굵게 · 목록(-) | |
|
✏️ 입력 (.md 원문)
## 1. Think Before Coding **Don't assume. Don't hide confusion. Surface tradeoffs.** Before implementing: - State your assumptions explicitly. If uncertain, ask. - If multiple interpretations exist, present them - don't pick silently. - If a simpler approach exists, say so. Push back when warranted. - If something is unclear, stop. Name what's confusing. Ask. |
👀 결과 (렌더링 화면)
1. Think Before Coding
Don't assume. Don't hide confusion. Surface tradeoffs. Before implementing:
|
| ④ 2번 원칙 제목(##) · 굵게 · 목록(-) · 문단 | |
|
✏️ 입력 (.md 원문)
## 2. Simplicity First **Minimum code that solves the problem. Nothing speculative.** - No features beyond what was asked. - No abstractions for single-use code. - No "flexibility" or "configurability" that wasn't requested. - No error handling for impossible scenarios. - If you write 200 lines and it could be 50, rewrite it. Ask yourself: "Would a senior engineer say this is overcomplicated?" If yes, simplify. |
👀 결과 (렌더링 화면)
2. Simplicity First
Minimum code that solves the problem. Nothing speculative.
Ask yourself: "Would a senior engineer say this is overcomplicated?" If yes, simplify. |
| ⑤ 3번 원칙 제목(##) · 굵게 · 목록 두 묶음 | |
|
✏️ 입력 (.md 원문)
## 3. Surgical Changes **Touch only what you must. Clean up only your own mess.** When editing existing code: - Don't "improve" adjacent code, comments, or formatting. - Don't refactor things that aren't broken. - Match existing style, even if you'd do it differently. - If you notice unrelated dead code, mention it - don't delete it. When your changes create orphans: - Remove imports/variables/functions that YOUR changes made unused. - Don't remove pre-existing dead code unless asked. The test: Every changed line should trace directly to the user's request. |
👀 결과 (렌더링 화면)
3. Surgical Changes
Touch only what you must. Clean up only your own mess. When editing existing code:
When your changes create orphans:
The test: Every changed line should trace directly to the user's request. |
| ⑥ 4번 원칙 제목(##) · 굵게 · 목록 · 코드 블록(```) | |
|
✏️ 입력 (.md 원문)
## 4. Goal-Driven Execution
**Define success criteria. Loop until verified.**
Transform tasks into verifiable goals:
- "Add validation" → "Write tests for invalid inputs, then make them pass"
- "Fix the bug" → "Write a test that reproduces it, then make it pass"
- "Refactor X" → "Ensure tests pass before and after"
For multi-step tasks, state a brief plan:
```
1. [Step] → verify: [check]
2. [Step] → verify: [check]
3. [Step] → verify: [check]
```
Strong success criteria let you loop independently. Weak criteria ("make it work") require constant clarification.
|
👀 결과 (렌더링 화면)
4. Goal-Driven Execution
Define success criteria. Loop until verified. Transform tasks into verifiable goals:
For multi-step tasks, state a brief plan: 1. [Step] → verify: [check] 2. [Step] → verify: [check] 3. [Step] → verify: [check] Strong success criteria let you loop independently. Weak criteria ("make it work") require constant clarification. |
| ⑦ 맺음말 구분선(---) · 굵게 | |
|
✏️ 입력 (.md 원문)
--- **These guidelines are working if:** fewer unnecessary changes in diffs, fewer rewrites due to overcomplication, and clarifying questions come before implementation rather than after mistakes. |
👀 결과 (렌더링 화면)
These guidelines are working if: fewer unnecessary changes in diffs, fewer rewrites due to overcomplication, and clarifying questions come before implementation rather than after mistakes. |
실습: 우리 팀 README.md 초안 쓰기
💡 README.md란?
깃허브 저장소에 들어갔을 때 가장 먼저 보이는 소개 문서입니다. 우리 팀 프로젝트가 무엇을, 어떤 데이터로, 어떻게 만드는지 처음 보는 사람에게 설명합니다.
| 예시: 가상의 팀 README 제목 · 굵게 · 목록 · 링크 · 표 · 체크리스트 | |||||||
|
✏️ 입력 (.md 원문)
# 서원지기: 조선 서원 배향 인물 지식그래프 ## 1. 프로젝트 소개 우리 팀은 **조선시대 서원 기록**을 바탕으로 서원과 배향 인물, 학맥의 관계를 지식그래프로 구축합니다. ## 2. 팀원 - 김가람 (사학과) — 데이터 수집 - 이나래 (국어국문학과) — 그래프 설계 - 박다온 (철학과) — 시각화·해석 ## 3. 데이터 출처 - [한국학자료센터](https://kostma.aks.ac.kr) ## 4. 그래프 설계 | 노드 | 주요 속성 | |---|---| | Person | name, birth, death | | Seowon | name, region | ## 5. 진행 상황 - [x] 데이터셋 선정 - [ ] 노드·관계 설계 - [ ] 중간발표 준비 |
👀 결과 (렌더링 화면)
서원지기: 조선 서원 배향 인물 지식그래프
1. 프로젝트 소개
우리 팀은 조선시대 서원 기록을 바탕으로 서원과 배향 인물, 학맥의 관계를 지식그래프로 구축합니다. 2. 팀원
3. 데이터 출처
4. 그래프 설계
5. 진행 상황
☑ 데이터셋 선정
☐ 노드·관계 설계
☐ 중간발표 준비
|
||||||
빈 틀 (복사해서 사용)
# (팀 이름): (프로젝트 제목) ## 1. 프로젝트 소개 우리 팀은 **(데이터셋 이름)**을 바탕으로 (무엇과 무엇의 관계)를 지식그래프로 구축합니다. ## 2. 팀원 - (이름) (학과) — (역할) - (이름) (학과) — (역할) - (이름) (학과) — (역할) ## 3. 데이터 출처 - [(출처 이름)]((출처 주소)) ## 4. 그래프 설계 | 노드 | 주요 속성 | |---|---| | (노드 이름) | (속성1), (속성2) | ## 5. 진행 상황 - [ ] 데이터셋 선정 - [ ] 노드·관계 설계 - [ ] 중간발표 준비
✅ 자가점검
- 제목(#, ##) 뒤에 한 칸을 띄웠는가?
- 미리보기에서 표가 칸으로 나뉘어 보이는가? (둘째 줄
|---|---|확인) - 데이터 출처 링크를 눌렀을 때 실제 페이지가 열리는가?
- 팀원 역할이 실제 분담과 일치하는가?
- 처음 보는 사람이 이 문서만 읽고 프로젝트를 이해할 수 있는가?