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

Digital Humanities wiki
이동: 둘러보기, 검색
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.md 초안
+
|제목=예시: 가상의 팀 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. 진행 상황
−
| 레이블 | 노드 예시 | 주요 속성 |
+
- [ ] 데이터셋 선정
−
|---|---|---|
+
- [ ] 노드·관계 설계
−
| Person | 인물A, 인물B...|  name, birth_year, death_year |
+
- [ ] 중간발표 준비</pre>
  
−
### 관계 타입(엣지)
+
<div style="padding:14px 16px; border:1px solid #cbd5e1; background:#f8fafc; margin:16px 0 0 0;">
−
| 출발노드 | 도착노드 | 관계어 |
+
<strong>✅ 자가점검</strong>
−
|---|---|---|
+
* 제목(#, ##) 뒤에 한 칸을 띄웠는가?
−
| Person | Event |  participateIn |</pre>
+
* 미리보기에서 표가 칸으로 나뉘어 보이는가? (둘째 줄 <code>|---|---|</code> 확인)
−
|결과=<hr style="border:none; border-top:2px solid #d0d7de; margin:0 0 12px 0;"> </p>
+
* 데이터 출처 링크를 눌렀을 때 실제 페이지가 열리는가?
−
}}
+
* 팀원 역할이 실제 분담과 일치하는가?
 +
* 처음 보는 사람이 이 문서만 읽고 프로젝트를 이해할 수 있는가?
 +
</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:

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


실습: 우리 팀 README.md 초안 쓰기

💡 README.md란?
깃허브 저장소에 들어갔을 때 가장 먼저 보이는 소개 문서입니다. 우리 팀 프로젝트가 무엇을, 어떤 데이터로, 어떻게 만드는지 처음 보는 사람에게 설명합니다.

1
아래 예시에서 왼쪽 원문의 기호가 오른쪽에서 어떻게 바뀌는지 확인합니다.
2
맨 아래 빈 틀을 복사해 마크다운 편집기(깃허브 웹 편집기 등)에 붙여 넣고, 팀 프로젝트 내용으로 채웁니다.
3
미리보기(Preview)로 결과를 확인하고, 자가점검 항목을 모두 통과하는지 살펴봅니다.
예시: 가상의 팀 README 제목 · 굵게 · 목록 · 링크 · 표 · 체크리스트
✏️ 입력 (.md 원문)
# 서원지기: 조선 서원 배향 인물 지식그래프

## 1. 프로젝트 소개
우리 팀은 **조선시대 서원 기록**을 바탕으로 서원과 배향 인물, 학맥의 관계를 지식그래프로 구축합니다.

## 2. 팀원
- 김가람 (사학과) — 데이터 수집
- 이나래 (국어국문학과) — 그래프 설계
- 박다온 (철학과) — 시각화·해석

## 3. 데이터 출처
- [한국학자료센터](https://kostma.aks.ac.kr)

## 4. 그래프 설계
| 노드 | 주요 속성 |
|---|---|
| Person | name, birth, death |
| Seowon | name, region |

## 5. 진행 상황
- [x] 데이터셋 선정
- [ ] 노드·관계 설계
- [ ] 중간발표 준비
👀 결과 (렌더링 화면)
서원지기: 조선 서원 배향 인물 지식그래프
1. 프로젝트 소개

우리 팀은 조선시대 서원 기록을 바탕으로 서원과 배향 인물, 학맥의 관계를 지식그래프로 구축합니다.

2. 팀원
  • 김가람 (사학과) — 데이터 수집
  • 이나래 (국어국문학과) — 그래프 설계
  • 박다온 (철학과) — 시각화·해석
3. 데이터 출처
  • 한국학자료센터
4. 그래프 설계
노드주요 속성
Personname, birth, death
Seowonname, region
5. 진행 상황
☑ 데이터셋 선정
☐ 노드·관계 설계
☐ 중간발표 준비

빈 틀 (복사해서 사용)

# (팀 이름): (프로젝트 제목)

## 1. 프로젝트 소개
우리 팀은 **(데이터셋 이름)**을 바탕으로 (무엇과 무엇의 관계)를 지식그래프로 구축합니다.

## 2. 팀원
- (이름) (학과) — (역할)
- (이름) (학과) — (역할)
- (이름) (학과) — (역할)

## 3. 데이터 출처
- [(출처 이름)]((출처 주소))

## 4. 그래프 설계
| 노드 | 주요 속성 |
|---|---|
| (노드 이름) | (속성1), (속성2) |

## 5. 진행 상황
- [ ] 데이터셋 선정
- [ ] 노드·관계 설계
- [ ] 중간발표 준비

✅ 자가점검

  • 제목(#, ##) 뒤에 한 칸을 띄웠는가?
  • 미리보기에서 표가 칸으로 나뉘어 보이는가? (둘째 줄 |---|---| 확인)
  • 데이터 출처 링크를 눌렀을 때 실제 페이지가 열리는가?
  • 팀원 역할이 실제 분담과 일치하는가?
  • 처음 보는 사람이 이 문서만 읽고 프로젝트를 이해할 수 있는가?