"마크다운연습"의 두 판 사이의 차이

Digital Humanities wiki
이동: 둘러보기, 검색
 
(같은 사용자의 중간 판 6개는 보이지 않습니다)
1번째 줄: 1번째 줄:
 
<div style="padding:14px 16px; border-left:4px solid #1d4ed8; background:#eff6ff; margin:0 0 24px 0;">
 
<div style="padding:14px 16px; border-left:4px solid #1d4ed8; background:#eff6ff; margin:0 0 24px 0;">
 
<strong>💡 이 페이지 보는 법</strong><br>
 
<strong>💡 이 페이지 보는 법</strong><br>
−
왼쪽은 <code>CLAUDE.md</code> 파일에 실제로 입력된 마크다운 원문이고, 오른쪽은 깃허브나 AI 도구처럼 마크다운을 지원하는 환경에서 그 원문이 보이는 모습입니다. 이 위키는 마크다운을 직접 해석하지 않기 때문에, 오른쪽 화면은 같은 모양을 HTML로 재현한 것입니다.
+
왼쪽은 <code>CLAUDE.md</code> 파일에 실제로 입력된 마크다운 원문이고, 오른쪽은 깃허브나 AI 도구처럼 마크다운을 지원하는 환경에서 그 원문이 보이는 모습입니다. 이 위키는 마크다운을 직접 해석하지 않기 때문에, 오른쪽 화면은 같은 모양을 HTML로 재현한 것입니다. [https://dh.aks.ac.kr/~kimseoyun/wiki/practicemd.html 마크다운 실시간 연습장 가기]
 
</div>
 
</div>
  
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;"># 서원지기: 조선 서원 배향 인물 지식그래프
 
−
 
−
## 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일 (토) 01:05 기준 최신판

💡 이 페이지 보는 법
왼쪽은 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:

  • 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.
④ 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.

  • 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.

⑤ 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:

  • 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.

⑥ 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:

  • "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.

⑦ 맺음말 구분선(---) · 굵게
✏️ 입력 (.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.