diff --git a/src/assets/hero-background.jpg b/src/assets/hero-background.jpg new file mode 100644 index 0000000..86cd35f Binary files /dev/null and b/src/assets/hero-background.jpg differ diff --git a/src/components/Criteria.astro b/src/components/Criteria.astro new file mode 100644 index 0000000..a0ffc5b --- /dev/null +++ b/src/components/Criteria.astro @@ -0,0 +1,36 @@ +--- +// src/components/Criteria.astro +interface Props { + items: string[]; +} +const { items } = Astro.props; +--- + +
+ {/* 항목들을 모바일에서도 한 줄에 예쁘게 칩(Chip) 형태로 가로 배치 */} +
+ { + items.map((item) => ( +
+ {/* 성공/패스를 의미하는 초록색 체크 아이콘 */} + + + + {item} +
+ )) + } +
+
diff --git a/src/components/DocBadgeGrid.astro b/src/components/DocBadgeGrid.astro new file mode 100644 index 0000000..060a30d --- /dev/null +++ b/src/components/DocBadgeGrid.astro @@ -0,0 +1,19 @@ +--- +// src/components/DocBadgeGrid.astro +interface Props { + docs: string[]; +} +const { docs } = Astro.props; +--- + +
+ { + docs.map((doc) => ( + + {doc} + + )) + } +
diff --git a/src/components/DocLink.astro b/src/components/DocLink.astro new file mode 100644 index 0000000..b429228 --- /dev/null +++ b/src/components/DocLink.astro @@ -0,0 +1,30 @@ +--- +// src/components/DocLink.astro +interface Props { + href: string; + text?: string; +} +const { href, text = 'View Document Standard' } = Astro.props; +--- + +
+ + {text} + {/* 오른쪽으로 향하는 미니멀한 화살표 애니메이션 */} + + + + +
diff --git a/src/components/DocumentFlow.astro b/src/components/DocumentFlow.astro new file mode 100644 index 0000000..8dd4b22 --- /dev/null +++ b/src/components/DocumentFlow.astro @@ -0,0 +1,42 @@ +--- +// src/components/DocumentFlow.astro +interface Props { + documents: string[]; +} +const { documents } = Astro.props; +--- + +
+ {/* 모바일 화면에서도 자연스럽게 흐르도록 flex-wrap 처리 */} +
+ { + documents.map((doc, idx) => ( +
+ {/* .md 파일명에 맞춰 시그니처 폰트 스타일(Mono)과 묵직한 다크 배지 적용 */} + + {doc} + + + {/* 마지막 문서 뒤에는 화살표를 표시하지 않음 */} + {idx < documents.length - 1 && ( + + + + )} +
+ )) + } +
+
diff --git a/src/components/Hero.astro b/src/components/Hero.astro new file mode 100644 index 0000000..31b1ede --- /dev/null +++ b/src/components/Hero.astro @@ -0,0 +1,153 @@ +
+
+ + + + + + + + + + + + + + + + + + + + +
+
+
+ +
+
+ {/* 탑 라벨 서브타이틀 */} + + + AI-CENTRIC PRODUCT DEVELOPMENT FRAMEWORK + + + {/* 메인 카피라인 */} +

+ AI는 바뀝니다.
+ + 프로젝트는 계속되어야 합니다. + +

+ + {/* 코어 설명 */} +

+ REPL Works는 일회성 Chat 에이전트가 아닙니다. 프로젝트의 본질적인 의도, + 설계 구조, 아키텍처 결정을 규칙화하여 Git에 영구 자산으로 남기는 AI 중심 개발 프레임워크입니다. +

+ + {/* 핵심 가치 배지 보드 */} +
+ WHAT WE PROVIDE +
+ + ✨ 특정 AI 의존성 탈피 + + + ⏳ 프로젝트 지속성 + + + ⚡ AI 입력 비용 최적화 + + + 🌱 온보딩 비용 절감 + + + 📦 Git 기반 워크플로 + +
+
+ + {/* 액션 버튼 */} +
+ + 워크플로 시작하기 + + + + + + GitHub 원격 저장소 + +
+
+
+
diff --git a/src/components/InOut.astro b/src/components/InOut.astro new file mode 100644 index 0000000..d1e6d2e --- /dev/null +++ b/src/components/InOut.astro @@ -0,0 +1,76 @@ +--- +// src/components/InOut.astro +interface Props { + type: 'input' | 'output'; + items: string[]; +} + +const { type, items } = Astro.props; + +// 입력과 출력에 따른 스타일 정의 +const isInput = type === 'input'; +const bgColor = isInput ? 'bg-slate-50' : 'bg-blue-50/50'; +const borderColor = isInput ? 'border-slate-200' : 'border-blue-200'; +const labelColor = isInput ? 'bg-slate-900' : 'bg-blue-600'; +const iconColor = isInput ? 'text-slate-400' : 'text-blue-500'; +--- + +
+ {/* 상단 라벨 */} +
+ + {type} + +
+
+
+ + {/* 아이템 리스트 (가로로 예쁘게 배치) */} +
+ { + items.map((item) => ( +
+ {/* 아이콘: 입력은 화살표 인, 출력은 체크박스 */} + {isInput ? ( + + + + ) : ( + + + + )} + {item} +
+ )) + } +
+
diff --git a/src/components/MemoryGrid.astro b/src/components/MemoryGrid.astro new file mode 100644 index 0000000..3f24993 --- /dev/null +++ b/src/components/MemoryGrid.astro @@ -0,0 +1,69 @@ +--- +// src/components/MemoryGrid.astro +--- + +
+ {/* 1. Session Memory Card */} +
+
+ +

+ Session Memory +

+
+

+ 현재 세션이 끝나면 사라질 수 있는 휘발성 컨텍스트입니다. +

+ +
+ { + ['현재 채팅', '현재 Context Window', '현재 Agent Runtime'].map( + (item) => ( + + {item} + + ) + ) + } +
+
+ + {/* 2. Project Memory Card */} +
+
+ +

+ Project Memory +

+
+

+ Git과 마크다운 문서로 영구히 보존되는 프로젝트의 핵심 기억입니다. +

+ +
+ { + [ + 'Git', + 'PRODUCT_SPEC.md', + 'ARCHITECTURE.md', + 'TASKS.md', + 'AGENTS.md', + ].map((item) => ( + + {item} + + )) + } +
+
+
diff --git a/src/components/MissionBox.astro b/src/components/MissionBox.astro new file mode 100644 index 0000000..2f56bf6 --- /dev/null +++ b/src/components/MissionBox.astro @@ -0,0 +1,37 @@ +--- +// src/components/MissionBox.astro +interface Props { + text: string; +} +const { text } = Astro.props; +--- + +
+
+ {/* 나침반/방향을 상징하는 아이콘 */} +
+ + + +
+ + {/* 이타릭체와 두꺼운 폰트로 미션 느낌 강조 */} +

+ "{text}" +

+
+
diff --git a/src/components/OperationLoop.astro b/src/components/OperationLoop.astro new file mode 100644 index 0000000..86e5064 --- /dev/null +++ b/src/components/OperationLoop.astro @@ -0,0 +1,66 @@ +--- +// src/components/OperationLoop.astro +interface Props { + steps: string[]; +} +const { steps } = Astro.props; +--- + +
+ {/* 가로로 부드럽게 정렬되는 루프 컨테이너 */} +
+ { + steps.map((step, idx) => ( +
+ {/* 일반 액션과 .md 파일의 스타일을 구분하여 일관성 유지 */} + + {step} + + + {/* 단계 연결 화살표 */} + {idx < steps.length - 1 ? ( + + + + ) : ( + /* 마지막 단계 뒤에는 처음으로 돌아간다는 순환(Loop) 아이콘 배치 */ +
+ + + + Loop +
+ )} +
+ )) + } +
+
diff --git a/src/components/QuestionGrid.astro b/src/components/QuestionGrid.astro new file mode 100644 index 0000000..879fc25 --- /dev/null +++ b/src/components/QuestionGrid.astro @@ -0,0 +1,24 @@ +--- +// src/components/QuestionGrid.astro +interface Props { + questions: string[]; +} +const { questions } = Astro.props; +--- + +
+ { + questions.map((question, idx) => ( +
+ {/* 1. 번호 배지: flex-shrink-0으로 찌그러짐 방지, 글자 크기와 정렬 고정 */} + + {idx + 1} + + {/* 2. 텍스트: items-center와 leading-snug 조합으로 무조건 숫자 배지와 황금 수평 정렬 */} +

+ {question} +

+
+ )) + } +
diff --git a/src/components/RelationFlow.astro b/src/components/RelationFlow.astro new file mode 100644 index 0000000..99eabe3 --- /dev/null +++ b/src/components/RelationFlow.astro @@ -0,0 +1,47 @@ +--- +// src/components/RelationFlow.astro +interface Props { + items: string[]; +} +const { items } = Astro.props; +--- + +
+ {/* 모바일 가로 폭에 맞춰 유연하게 줄바꿈되는 흐름 레이아웃 */} +
+ { + items.map((item, idx) => ( +
+ {/* 번호가 매겨진 세련된 아키텍처 칩 */} +
+ + 0{idx + 1} + + + {item} + +
+ + {/* 단계 연결 화살표 */} + {idx < items.length - 1 && ( + + + + )} +
+ )) + } +
+
diff --git a/src/components/ReviewGrid.astro b/src/components/ReviewGrid.astro new file mode 100644 index 0000000..66b4d63 --- /dev/null +++ b/src/components/ReviewGrid.astro @@ -0,0 +1,33 @@ +--- +// src/components/ReviewGrid.astro +interface Props { + items: string[]; +} +const { items } = Astro.props; +--- + +
+ { + items.map((item) => ( +
+ {/* Human Review를 상징하는 주황/노란색 돋보기 아이콘 */} + + + + + {item} + +
+ )) + } +
diff --git a/src/components/SpecGrid.astro b/src/components/SpecGrid.astro new file mode 100644 index 0000000..fb4eb76 --- /dev/null +++ b/src/components/SpecGrid.astro @@ -0,0 +1,20 @@ +--- +// src/components/SpecGrid.astro +interface Props { + items: string[]; +} +const { items } = Astro.props; +--- + +
+ { + items.map((item) => ( +
+ {/* 텍스트 크기를 text-base로 키우고, font-bold와 tracking-tight로 가독성 향상 */} +

+ {item} +

+
+ )) + } +
diff --git a/src/components/SpecList.astro b/src/components/SpecList.astro new file mode 100644 index 0000000..5f4bdad --- /dev/null +++ b/src/components/SpecList.astro @@ -0,0 +1,45 @@ +--- +// src/components/SpecList.astro +interface Props { + items: string[]; +} +const { items } = Astro.props; + +// 항목별 매칭할 아이콘 (SVG 고정) +const iconMap: Record = { + Vision: + '', + 'User Journey': + '', + Navigation: + '', + Features: + '', + 'Content Structure': + '', + 'Success Criteria': + '', +}; + +const defaultIcon = + ''; +--- + +
+ { + items.map((item) => ( +
+ {/* 아이콘 배지: text-slate-500으로 은은하게 */} +
+ + {item} + +
+ )) + } +
diff --git a/src/components/Terminal.astro b/src/components/Terminal.astro new file mode 100644 index 0000000..b29f865 --- /dev/null +++ b/src/components/Terminal.astro @@ -0,0 +1,35 @@ +--- +// src/components/Terminal.astro +interface Props { + command: string; +} +const { command } = Astro.props; +--- + +
+ {/* 터미널 상단 바 (맥 스타일 점 3개) */} +
+
+ + + +
+ bash +
+ + {/* 터미널 본문 내용 */} +
+
+ $ + {command} +
+
+
diff --git a/src/components/TerminalGrid.astro b/src/components/TerminalGrid.astro new file mode 100644 index 0000000..f0cac1f --- /dev/null +++ b/src/components/TerminalGrid.astro @@ -0,0 +1,21 @@ +--- +// src/components/TerminalGrid.astro +interface Props { + commands: string[]; +} +const { commands } = Astro.props; +--- + +
+ { + commands.map((cmd) => ( +
+ {/* 프롬프트 기호 */} + $ + {cmd} +
+ )) + } +
diff --git a/src/components/ValueFlow.astro b/src/components/ValueFlow.astro new file mode 100644 index 0000000..b9ccabe --- /dev/null +++ b/src/components/ValueFlow.astro @@ -0,0 +1,51 @@ +--- +// src/components/ValueFlow.astro +interface Props { + from: string; + to: string; +} +const { from, to } = Astro.props; +--- + +
+ {/* 1. From: Manual Idea */} +
+ + {from} + +
+ + {/* 2. Transition Arrow with Text */} +
+ + Auto + + + + +
+ + {/* 3. To: Actionable Issue */} +
+ + {to} + +
+
diff --git a/src/components/VerticalPipeline.astro b/src/components/VerticalPipeline.astro new file mode 100644 index 0000000..2093c5c --- /dev/null +++ b/src/components/VerticalPipeline.astro @@ -0,0 +1,55 @@ +--- +// src/components/VerticalPipeline.astro +const steps = [ + { file: 'IDEAS.md', desc: '아이디어 검증' }, + { file: 'PITCHING_SCRIPT.md', desc: '프로젝트 포지셔닝' }, + { file: 'PRODUCT_SPEC.md', desc: '제품 정의' }, + { file: 'ARCHITECTURE.md', desc: '시스템 설계' }, + { file: 'FRAMEWORK.md', desc: '기술 스택별 구현 규칙' }, + { file: 'TASKS.md', desc: '수행 계획' }, + { file: 'AGENTS.md', desc: 'AI 에이전트 규칙' }, +]; +--- + +
+ { + steps.map((step, idx) => ( +
+ {/* 타임라인 노드 포인트 */} + + + + + {/* 가로로 나란히 매칭되는 파일명과 설명 */} +
+ {/* 파일명 배지 */} + + {step.file} + + + {/* 화살표와 설명 (모바일에서는 생략되거나 자연스럽게 배치) */} +
+ +

+ {step.desc} +

+
+
+
+ )) + } +
diff --git a/src/components/Workflow.astro b/src/components/Workflow.astro new file mode 100644 index 0000000..bfddbd6 --- /dev/null +++ b/src/components/Workflow.astro @@ -0,0 +1,33 @@ +--- +interface Props { + steps: string[]; +} + +const { steps } = Astro.props; +--- + +
+ { + steps.map((step, idx) => ( +
+ {/* 문서(.md)와 일반 단계(AI/Action)의 스타일을 구분해서 세련되게 표현 */} + + {step} + + + {/* 마지막 요소 뒤에는 화살표를 붙이지 않음 */} + {idx < steps.length - 1 && ( + → + )} +
+ )) + } +
diff --git a/src/content/documents/index.mdx b/src/content/documents/index.mdx index d0fdbae..68dc252 100644 --- a/src/content/documents/index.mdx +++ b/src/content/documents/index.mdx @@ -5,6 +5,10 @@ description: 'Document standards used by the REPL Works framework.' publishedAt: '2026-06-12T00:00:00Z' --- +import DocumentFlow from '../../components/DocumentFlow.astro'; +import MissionBox from '../../components/MissionBox.astro'; +import DocLink from '../../components/DocLink.astro'; + REPL Works는 문서를 단순한 기록으로 보지 않는다. 문서는 프로젝트 기억(Project Memory)의 일부이다. @@ -25,21 +29,15 @@ REPL Works는 프로젝트 기억을 문서와 Git에 저장한다. # Document Flow -```text -IDEAS.md -↓ -PITCHING_SCRIPT.md -↓ -PRODUCT_SPEC.md -↓ -ARCHITECTURE.md -↓ -FRAMEWORK.md -↓ -TASKS.md -↓ -AGENTS.md -``` + --- @@ -57,9 +55,7 @@ AGENTS.md 목적 -```text -Should we build this? -``` + --- @@ -73,7 +69,7 @@ Should we build this? --- -[View Document Standard](/documents/ideas) + --- @@ -85,9 +81,7 @@ Should we build this? 목적 -```text -Why does this project exist? -``` + --- @@ -100,7 +94,7 @@ Why does this project exist? --- -[View Document Standard](/documents/pitching-script) + --- @@ -112,9 +106,7 @@ Why does this project exist? 목적 -```text -What should be built? -``` + --- @@ -128,7 +120,7 @@ What should be built? --- -[View Document Standard](/documents/product-spec) + --- @@ -140,9 +132,7 @@ What should be built? 목적 -```text -How should it be built? -``` + --- @@ -160,7 +150,7 @@ ARCHITECTURE.md는 프로젝트의 기술적 진실이다. --- -[View Document Standard](/documents/architecture) + --- @@ -172,9 +162,7 @@ ARCHITECTURE.md는 프로젝트의 기술적 진실이다. 목적 -```text -How should this stack be used? -``` + --- @@ -200,7 +188,7 @@ FRAMEWORK.md는 해당 구조를 구현하는 방법을 설명한다. --- -[View Document Standard](/documents/framework) + --- @@ -212,9 +200,7 @@ FRAMEWORK.md는 해당 구조를 구현하는 방법을 설명한다. 목적 -```text -What should be done next? -``` + --- @@ -230,7 +216,7 @@ TASKS.md는 현재 위치를 설명한다. --- -[View Document Standard](/documents/tasks) + --- @@ -242,9 +228,7 @@ AI 작업 규칙을 정의한다. 목적 -```text -How should AI work? -``` + --- @@ -261,7 +245,7 @@ AGENTS.md는 모든 AI의 진입점이다. --- -[View Document Standard](/documents/agents) + --- diff --git a/src/content/prompts/index.mdx b/src/content/prompts/index.mdx index d47311c..1714a29 100644 --- a/src/content/prompts/index.mdx +++ b/src/content/prompts/index.mdx @@ -5,6 +5,11 @@ description: 'Reusable prompt library for REPL Works.' publishedAt: '2026-06-12T00:00:00Z' --- +import SpecGrid from '../../components/SpecGrid.astro'; +import InOut from '../../components/InOut.astro'; +import OperationLoop from '../../components/OperationLoop.astro'; +import Terminal from '../../components/Terminal.astro'; + REPL Works는 Prompt Engineering Framework가 아니다. 하지만 Prompt는 REPL Works의 중요한 구성 요소이다. @@ -27,15 +32,12 @@ Prompt는 그 기억을 활용하는 방법을 정의한다. 대부분의 AI 사용자는 같은 설명을 반복한다. -```text -무엇을 만들고 있는가? - -왜 만드는가? - -어떤 형식으로 답변해야 하는가? - -어떤 문서를 생성해야 하는가? -``` + --- @@ -63,9 +65,7 @@ Prompt는 프로젝트마다 새로 작성하는 것이 아니다. 생성 문서 -```text -IDEAS.md -``` + [Prompt 보기](/prompts/idea-refinement) @@ -79,9 +79,7 @@ IDEAS.md 생성 문서 -```text -PITCHING_SCRIPT.md -``` + [Prompt 보기](/prompts/pitch-creation) @@ -95,9 +93,7 @@ PITCHING_SCRIPT.md 생성 문서 -```text -PRODUCT_SPEC.md -``` + [Prompt 보기](/prompts/product-specification) @@ -111,9 +107,7 @@ PRODUCT_SPEC.md 생성 문서 -```text -ARCHITECTURE.md -``` + [Prompt 보기](/prompts/architecture-design) @@ -127,9 +121,7 @@ ARCHITECTURE.md 생성 문서 -```text -TASKS.md -``` + [Prompt 보기](/prompts/task-generation) @@ -143,13 +135,7 @@ Execution AI가 개발 가능한 상태인지 검증한다. 검증 대상 -```text -PRODUCT_SPEC.md - -ARCHITECTURE.md - -TASKS.md -``` + [Prompt 보기](/prompts/execution-validation) @@ -167,17 +153,13 @@ REPL Works Prompt는 고정된 문서가 아니다. 일반적인 흐름 -```text -Project Usage -↓ -Prompt Improvement -↓ -Better Documents -↓ -Better Execution -↓ -Project Usage -``` + --- @@ -211,9 +193,7 @@ REPL Works는 Prompt를 개인 자산이 아닌 공유 가능한 자산으로 예시 -```text -ai-prompt -``` + --- diff --git a/src/content/showcase/index.mdx b/src/content/showcase/index.mdx index c014e65..26b0064 100644 --- a/src/content/showcase/index.mdx +++ b/src/content/showcase/index.mdx @@ -5,6 +5,8 @@ description: 'ReplWorks 호환(Compatible) 프로젝트 리스트.' publishedAt: '2026-06-12T00:00:00Z' --- +import DocBadgeGrid from '../../components/DocBadgeGrid.astro'; + ReplWorks는 이론이 아니라 실전에서 검증되는 프레임워크다. 이 페이지는 실제로 ReplWorks를 적용하고 있는 프로젝트를 소개한다. @@ -17,17 +19,13 @@ ReplWorks 호환(Compatible) 프로젝트는 ReplWorks 워크플로와 문서 일반적으로 다음 문서를 사용한다. -```text -PRODUCT_SPEC.md - -ARCHITECTURE.md - -FRAMEWORK.md - -TASKS.md - -AGENTS.md -``` + --- diff --git a/src/content/tools/index.mdx b/src/content/tools/index.mdx index a3c0e79..cd8de8e 100644 --- a/src/content/tools/index.mdx +++ b/src/content/tools/index.mdx @@ -5,6 +5,12 @@ description: '도구(Tools)는 ReplWorks framework 를 확장하고 자동화 publishedAt: '2026-06-12T00:00:00Z' --- +import SpecGrid from '../../components/SpecGrid.astro'; +import DocumentFlow from '../../components/DocumentFlow.astro'; +import ValueFlow from '../../components/ValueFlow.astro'; +import TerminalGrid from '../../components/TerminalGrid.astro'; +import RelationFlow from '../../components/RelationFlow.astro'; + REPL Works는 도구를 제품으로 보지 않는다. 도구는 프레임워크를 실행하기 위한 자산(Framework Assets)이다. @@ -21,13 +27,11 @@ Workflow가 반복되면, REPL Works는 다음을 표준화한다. -```text -Workflow - -Prompts - -Documents -``` + --- @@ -39,15 +43,12 @@ Documents 일반적으로 다음 순서로 발전한다. -```text -Manual Process -↓ -Prompt -↓ -Document -↓ -Tool -``` + --- @@ -65,11 +66,7 @@ GitHub Issue를 REPL Works 방식으로 생성하기 위한 도구. 목적 -```text -Idea -↓ -Issue -``` + 전환을 단순화한다. @@ -96,15 +93,12 @@ REPL Works는 실제 사용 경험을 통해 새로운 도구를 추가할 수 예시 -```text -ai-prompt - -ai-sync - -ai-review - -ai-memory -``` + --- @@ -118,15 +112,12 @@ ai-memory ## Relationship -```text -Workflow -↓ -Prompts -↓ -Documents -↓ -Tools -``` + --- diff --git a/src/content/workflow/index.mdx b/src/content/workflow/index.mdx index 22a96d7..b0ada3a 100644 --- a/src/content/workflow/index.mdx +++ b/src/content/workflow/index.mdx @@ -4,6 +4,14 @@ version: 'v1' description: 'REPL Works를 이용한 AI-Native Product Development Workflow' publishedAt: '2026-06-12T00:00:00Z' --- +import Workflow from '../../components/Workflow.astro'; +import QuestionGrid from '../../components/QuestionGrid.astro'; +import SpecList from '../../components/SpecList.astro'; +import SpecGrid from '../../components/SpecGrid.astro'; +import InOut from '../../components/InOut.astro'; +import Criteria from '../../components/Criteria.astro'; +import MemoryGrid from '../../components/MemoryGrid.astro'; +import ReviewGrid from '../../components/ReviewGrid.astro'; 대부분의 AI 프로젝트는 같은 문제를 반복한다. @@ -29,15 +37,13 @@ publishedAt: '2026-06-12T00:00:00Z' 그 순간부터 동일한 설명이 반복된다. -```text -왜 만들고 있지? - -현재 상태가 뭐지? - -왜 이렇게 설계했지? - -다음 작업은 뭐지? -``` + --- @@ -57,31 +63,7 @@ REPL Works는 프로젝트 기억(Project Memory)과 세션 기억(Session Memor --- -Session Memory - -```text -현재 채팅 - -현재 Context Window - -현재 Agent Runtime -``` - ---- - -Project Memory - -```text -Git - -PRODUCT_SPEC.md - -ARCHITECTURE.md - -TASKS.md - -AGENTS.md -``` + --- @@ -101,37 +83,11 @@ AGENTS.md # 전체 흐름 -```text -IDEAS.md -↓ -PITCHING_SCRIPT.md -↓ -PRODUCT_SPEC.md -↓ -ARCHITECTURE.md -↓ -TASKS.md -↓ -AGENTS.md -↓ -Discussion AI -↓ -Issue -↓ -Execution AI -↓ -Pull Request -↓ -Human Review -↓ -Merge -↓ -Operation -↓ -Document Updates -↓ -Next Iteration -``` + --- @@ -159,17 +115,13 @@ Discussion AI와 반복적으로 대화하며 아이디어를 검증한다. 주요 질문 -```text -누구를 위한 제품인가? - -왜 존재해야 하는가? - -사용자가 원하는가? - -지속 가능한가? - -사업적으로 의미가 있는가? -``` + --- @@ -211,19 +163,14 @@ Discussion AI와 반복적으로 대화하며 아이디어를 검증한다. 포함 내용 -```text -Vision - -User Journey - -Navigation - -Features - -Content Structure - -Success Criteria -``` + --- @@ -253,19 +200,14 @@ Execution AI는 PRODUCT_SPEC.md만 읽어도 제품의 목적을 이해할 수 포함 내용 -```text -Project Structure - -Routing - -Content Model - -Data Flow - -Deployment - -Constraints -``` + --- @@ -341,17 +283,13 @@ AI는 항상 AGENTS.md부터 읽는다. 포함 내용 -```text -문서 우선순위 - -구현 규칙 - -테스트 규칙 - -파일 생성 규칙 - -아키텍처 변경 규칙 -``` + --- @@ -365,17 +303,13 @@ Discussion AI는 구현보다 이해에 집중한다. 역할 -```text -요구사항 분석 - -문서 검토 - -Task 검증 - -Issue 작성 - -Architecture 검토 -``` + --- @@ -395,43 +329,21 @@ Execution AI는 승인된 작업을 구현한다. --- -입력 - -```text -PRODUCT_SPEC.md - -ARCHITECTURE.md - -TASKS.md +**입력** -AGENTS.md - -Issue -``` + --- -출력 - -```text -Code - -Tests +**출력** -Pull Request -``` + --- 필수 조건 -```text -Build Success - -Lint Success - -Test Success -``` + --- @@ -449,17 +361,13 @@ Test Success Human Review는 다음을 확인한다. -```text -요구사항 충족 여부 - -제품 방향 일치 여부 - -사용자 경험 - -품질 - -릴리즈 준비 상태 -``` + --- @@ -479,15 +387,12 @@ Human Review는 다음을 확인한다. 운영 과정에서는 새로운 학습이 발생한다. -```text -사용자 피드백 - -버그 - -신규 요구사항 - -제품 개선 -``` + --- @@ -497,19 +402,10 @@ Human Review는 다음을 확인한다. # 운영 루프 -```text -Operate -↓ -Learn -↓ -Update PRODUCT_SPEC.md -↓ -Update ARCHITECTURE.md -↓ -Update TASKS.md -↓ -Next Iteration -``` + --- diff --git a/src/layouts/HomeLayout.astro b/src/layouts/HomeLayout.astro new file mode 100644 index 0000000..83fbeba --- /dev/null +++ b/src/layouts/HomeLayout.astro @@ -0,0 +1,21 @@ +--- +import Layout from './Layout.astro'; +import Header from '../components/Header.astro'; +import Footer from '../components/Footer.astro'; +import Hero from '../components/Hero.astro'; +const { + title = 'REPL Works', + description = 'REPL Works documentation shell.', +} = Astro.props; +--- + + +
+ +
+
+ +
+
+
+ diff --git a/src/pages/index.astro b/src/pages/index.astro index f3eeefd..f29e0ee 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,444 +1,407 @@ --- -import SiteLayout from '../layouts/SiteLayout.astro'; +import HomeLayout from '../layouts/HomeLayout.astro'; +import heroBg from '../assets/hero-background.jpg'; + +// 코어 워크플로 파이프라인 데이터 +const pipelineSteps = [ + { id: '01', file: 'IDEAS.md', desc: '아이디어 검증' }, + { id: '02', file: 'PITCHING_SCRIPT.md', desc: '프로젝트 포지셔닝' }, + { id: '03', file: 'PRODUCT_SPEC.md', desc: '제품 정의' }, + { id: '04', file: 'ARCHITECTURE.md', desc: '시스템 설계' }, + { id: '05', file: 'FRAMEWORK.md', desc: '기술 스택별 구현 규칙' }, + { id: '06', file: 'TASKS.md', desc: '수행 계획' }, + { id: '07', file: 'AGENTS.md', desc: 'AI 에이전트 규칙' }, +]; + +// 다섯 가지 핵심 기반 데이터 +const benefits = [ + { + title: '특정 AI 의존성 탈피', + desc: '특정 AI 모델에 의존하지 않습니다. 프로젝트 기억은 Git과 문서에 저장되므로 새로운 모델도 프로젝트를 이어갈 수 있습니다.', + }, + { + title: '프로젝트 지속성', + desc: '프로젝트는 수개월 또는 수년 동안 유지됩니다. 세션이 종료되어도 프로젝트의 의도와 구조는 온전하게 보존됩니다.', + }, + { + title: 'AI 입력 비용 최적화', + desc: '오래된 채팅 로그를 다시 읽게 하는 대신, 필수 정보만 정제된 영구 문서로 남겨 AI가 최소한의 토큰만 읽고 정확히 작업하도록 돕습니다.', + }, + { + title: '온보딩 비용 절감', + desc: '새로 합류한 팀원과 새로운 AI 에이전트 모두 구조화된 문서를 읽고 지체 없이 프로젝트를 깊이 이해할 수 있습니다.', + }, + { + title: 'Git 기반 워크플로', + desc: '모든 프로젝트 기억은 Git으로 이력 관리됩니다. 현재 상태는 문서가 설명하고, 과거 상태는 Git 커밋이 안전하게 보존합니다.', + }, +]; + +// 쇼케이스 프로젝트 데이터 +const showcases = [ + { + title: 'REPL Works 웹사이트', + desc: 'ReplWorks 웹사이트는 본 프레임워크를 실제로 적용하여 관리 중인 첫 번째 REPL Works 호환 프로덕션 프로젝트입니다.', + tags: ['Website', 'Dogfooding'], + link: '/showcase/repl-works-website', + github: 'https://github.com/replworks/replworks.github.io', + }, + { + title: 'AI 이슈 퍼블리셔', + desc: 'AI 에이전트와의 토론 컨텍스트를 분석하여, 즉시 개발 및 실행 가능한 GitHub Issue 형태로 자동 변환해 주는 호환 도구입니다.', + tags: ['Tooling', 'Issue workflow'], + link: '/showcase/ai-issue', + github: 'https://github.com/replworks/ai-issue', + }, + { + title: '클래이튜브(ClayTube)', + desc: 'ClayTube는 장기간에 걸쳐 지속적으로 기능이 개발되고 확장되는 과정을 검증하는 데 초점을 둔 참조 프로젝트입니다.', + tags: ['CLI', 'Website Generator'], + link: '/showcase/claytube', + github: 'https://github.com/eternops/claytube', + }, + { + title: '와이파이 노트(WIFI Note)', + desc: '구조화된 프로젝트 기억 자산화를 통해 복잡한 비즈니스 로직을 빌드해 나가는 과정을 보여주는 웹 애플리케이션 프로젝트입니다.', + tags: ['Commercial', 'Web App'], + link: '/showcase/wifi-note', + }, +]; --- - -
-
-
-
-

- AI 중심의 제품 개발 프레임워크 -

-

- AI는 바뀝니다. -
- 프로젝트는 계속되어야 합니다. -

-

- REPL Works는 AI Agent가 아닙니다. AI 중심의 제품 개발 - 프레임워크입니다. -

-
- - -
-
- - 워크플로 보기 - - - GitHub 보기 - -
-
- +
+ { + /* ========================================================================= + 2. WORKFLOW SECTION + ========================================================================= */ + }

Workflow

REPL Works는 어떻게 작동하는가

+

+ 상위 문서 규격이 명확히 정립되면서 하위 마일스톤 단계로 점진적으로 + 파생·확장되는 연속형 누적 파이프라인 프로세스입니다. +

+
+ {/* 세로 타임라인 트랙 트레일 */}
-
-

- IDEAS.md -

-

아이디어 검증

-
-
-

- PITCHING_SCRIPT.md -

-

프로젝트 포지셔닝

-
-
-

- PRODUCT_SPEC.md -

-

제품 정의

-
-
-

- ARCHITECTURE.md -

-

시스템 설계

-
-
-

- FRAMEWORK.md -

-

기술 스택별 구현 규칙

-
-
-

- TASKS.md -

-

수행 계획

-
-
-

- AGENTS.md -

-

AI 에이젼트 규칙

-
+ { + pipelineSteps.map((step) => ( +
+ {/* 불릿 원 노드 포인트 */} + + + + + {/* 콘텐츠 행 래퍼 (찌그러짐 원천 차단) */} +
+ {/* 정렬용 ID 번호 */} + + {step.id} + + + {/* 파일명 시그니처 칩 */} + + {step.file} + + + {/* 데스크톱 가로 연결 화살표 */} + + + {/* 한글 기능 가이드 설명 */} +

+ + · + + {step.desc} +

+
+
+ )) + }
-

- REPL Works는 프로젝트 기억 문서에서 시작해 Planning AI, Execution AI, - Human Review로 이어집니다. + +

+ REPL Works 아키텍처는 프로젝트 기억 문서 자산화에서 시작해 Planning + AI, Execution AI를 거쳐 최종 Human Review 파이프라인으로 연결됩니다.

+ - 워크플로 자세히 보기 + 워크플로 구조 문서 상세 보기
-
-
-

- Problem -

-

+ PROBLEM +

+ REPL Works가 해결하는 문제 +

+

+ AI 에이전트는 코드를 정교하게 작성하지만 세션이 끊기면 컨텍스트를 + 망각합니다. 프로젝트 기억은 일회성 채팅방이 아닌 Git 저장소에 영구 + 보존되어야 합니다. +

+ + {/* 2x2 대시보드 그리드 큐브 카드 구조 */} +
+
- REPL Works가 해결하는 문제 - -
-
-

AI는 코드를 잘 작성합니다.

-

하지만 프로젝트를 기억하지는 못합니다.

-

몇 주가 지나면 다시 설명해야 합니다.

- 
왜 만드는가?
+          Q1
+          

+            

+              왜 만드는가?
+            

+            

+              프로젝트의 본질적인 도메인 목적과 비즈니스 동기
+            

+          

+
-무엇을 만드는가? +
+ Q2 +
+

+ 무엇을 만드는가? +

+

+ 제품의 스펙 사양 정의 및 상세 요구사항 기능 규격 +

+
+
-현재 구조는 무엇인가? +
+ Q3 +
+

+ 현재 구조는 무엇인가? +

+

+ 전체 시스템 엔지니어링 아키텍처 및 기술 스택 구현 규칙 +

+
+
-어떤 결정을 내렸는가? -

REPL Works는 이러한 정보를 프로젝트 문서에 저장합니다.

-

프로젝트 기억은 세션이 아니라 Git에 남아야 합니다.

+
+ Q4 +
+

+ 어떤 결정을 내렸는가? +

+

+ 지금까지 누적 도출된 테크니컬 마일스톤과 설계 의사결정 이력 +

+
+
+ +

+ REPL Works 프레임워크는 상기 핵심 질문 4가지를 누수 없이 수렴하여 시스템 + 설계 문서로 밀착 압축하고 형상 관리의 자산으로 영속시킵니다. +

+ { + /* ========================================================================= + 4. BENEFITS SECTION + ========================================================================= */ + }

Benefits

프로젝트를 계속할 수 있게 만드는 다섯 가지 기반

-
-
-

- 특정 AI 의존성 탈피 -

-

- 특정 AI 모델에 의존하지 않습니다. 프로젝트 기억은 Git과 문서에 - 저장되므로 새로운 모델도 프로젝트를 이어갈 수 있습니다. -

-
-
-

프로젝트 지속성

-

- 프로젝트는 수개월 또는 수년 동안 유지됩니다. 세션이 종료되어도 - 프로젝트의 의도와 구조는 유지됩니다. -

-
-
-

- AI 입력 비용 최적화 -

-

- 프로젝트 기억을 문서로 압축합니다. 오래된 채팅을 다시 읽게 하는 - 대신, 필요한 정보만 영구 문서로 남겨 AI가 꼭 필요한 문서만 읽고 - 작업할 수 있습니다. -

-
-
-

온보딩 비용 절감

-

- 새로운 사람과 새로운 AI는 문서를 읽고 빠르게 프로젝트를 이해할 수 - 있습니다. -

-
-
-

- Git 기반 워크플로 -

-

- 모든 프로젝트 기억은 Git으로 관리됩니다. 현재 상태는 문서가 - 설명하고, 과거 상태는 Git이 보존합니다. -

-
+ +
+ { + benefits.map((benefit) => ( +
+

+ {benefit.title} +

+

+ {benefit.desc} +

+
+ )) + }
+ { + /* ========================================================================= + 5. SHOWCASE SECTION + ========================================================================= */ + }

Showcase

REPL Works 호환 프로젝트

-
-
-

- REPL Works는 실제 프로젝트에서 사용되고 있습니다. +

+ 실제 엔지니어링 생태계 및 대규모 개발 주기에 REPL Works 프레임워크 + 설계 표준을 도입한 실제 증명 케이스입니다.

-
-
-
- - Website - - - Dogfooding - -
-

- REPL Works 웹사이트 -

-

- ReplWorks 웹사이트는 ReplWorks를 실제로 적용한 첫 번째 ReplWorks - Compatible 프로젝트. -

-

- - 바로가기 - - - Github 가기 - -

-
-
-
- - Tooling - - - Issue workflow - -
-

- AI 이슈 퍼블리셔 -

-

- AI와의 토론을 바로 실행 가능한 Github Issue로 변환해 주는 REPL - Works 호환 도구. -

-

- - 바로가기 - - - Github 가기 - -

-
-
-
- - CLI - - - Website Generator - -
-

- 클래이튜브(ClayTube) -

-

- ClayTube는 장기간에 걸쳐 개발되고 운영되는지 검증하는데 포커스를 - 둔 ReplWorks 호환 프로젝트. -

-

- - 바로가기 - - - Github 가기 - -

-
-
-
- - Commercial - - - Web App - -
-

- 와이파이 노트(WIFI Note) -

-

- 구조화된 프로젝트 기억을 통한 제품 개발을 보여주는 비공개 REPL - Works 호환 프로젝트. -

-

- - 바로가기 - -

-
-
- Showcase 보기 + 전체 쇼케이스 아카이브 보기
+ +
+ { + showcases.map((project) => ( +
+ {/* 프로젝트 유형 테그 그룹 */} +
+ {project.tags.map((tag, idx) => ( + + {tag} + + ))} +
+ +

+ {project.title} +

+

+ {project.desc} +

+ + {/* 실행 링크 버튼 그룹 */} +
+ + 상세 정보 + + {project.github && ( + + GitHub 소스 + + )} +
+
+ )) + } +
+ { + /* ========================================================================= + 6. CORE IDEA FOOTER CARD + ========================================================================= */ + }

Core Idea

- 
Models forget.
-
-Projects must not.
+
+

+ Models forget. +

+

+ Projects must not. +

+
-
- +
+