docs: 자료 모으기 문서 추가

docs/arrange/index.md

@@ -0,0 +1 @@
+<!-- 개요 -->

docs/arrange/material.md

@@ -0,0 +1,164 @@
+<!-- 문서 유형별로 필요한 정보 설명, AI를 위한 정보 정리 방법 중심으로 작성-->
+
+# 정보 모으기
+AI로 기술 문서를 작성할 때는 정보를 충분히 모으고 **AI가 그 정보를 참고해서 글을 생성하도록** 하는 게 좋아요. 기술 문서는 정확한 정보를 담는 것이 중요해요. 하지만 AI는 최신 정보를 충분히 반영하지 못해요. 사용자가 AI에 입력한 정보가 부족하면 AI가 존재하지 않는 내용을 만들어내거나 오래된 정보를 인용할 수도 있어요.
+
+그렇다면, 어떤 정보를 어떻게 모아야 할까요? 이 문서에서는 AI로 기술 문서를 만들 때 정보를 수집하고 정리하는 방법을 설명해요.
+
+## 1. 문서에 필요한 정보 수집하기
+어떤 정보를 모아야 할지 판단하기 어려울 때는 문서 유형을 기준으로 삼으면 편리해요. 문서의 성격에 따라 필요한 정보가 달라지기 때문이에요. 예를 들어, API 문서는 요청 형식과 응답 예시가 중요하지만, 사용자 가이드는 실제 사용 흐름과 주의사항이 더 중요해요.
+
+기술 문서를 작성할 때는 여러 개발자에게 흩어져 있는 정보를 모아야 하는 경우가 많아요. 문서를 쓰면서도 개발자들과 소통하면서 필요한 내용을 확인하고 보완해야 해요. 수집한 정보가 정확한지, 최신인지, 그리고 문서 목적에 맞는지도 반드시 검증해야 해요.
+
+### 개발자에게 정보 모으기
+다른 개발자와 소통할 때는 구체적으로 어떤 정보가 필요한지 명확히 전달하는 게 중요해요. 예를 들어, "getUserData 함수와 그 함수를 호출하는 부분만 보여주세요"처럼 구체적으로 요청하면 필요한 정보를 빠르게 받을 수 있어요. 다음을 참고해서 필요한 정보를 수집해보세요.
+
+::: details 학습을 위한 문서를 작성하는 경우
+
+해당 내용을 알고 있거나 학습 경험이 있는 개발자와 소통하면서 필요한 정보를 모을 수 있어요. 실제로 학습해야 하는 사람을 인터뷰해서 필요한 정보가 무엇인지 조사할 수도 있어요.
+
+- **단계별 예제**: 절차를 따라 실행할 수 있는 코드 예제를 준비해요. 다른 개발자에게 요청할 때는 "데이터베이스 연결 함수와 쿼리 실행 코드만 보여주세요"처럼 구체적으로 요청할 수 있어요.
+
+- **실행 절차**: 단계별 절차를 기록해요. 다른 개발자에게는 순서도를 그려달라거나 절차의 개요를 정리해달라고 할 수 있어요. 
+
+:::
+
+::: details 문제 해결을 위한 문서를 작성하는 경우
+
+문제를 겪은 개발자나 해결 과정을 알고 있는 사람과 소통하면서 정보를 모아요. 문제 상황을 구체적으로 설명하는 게 중요해요. 
+
+- **문제 재현이 가능한 예제**: 문제가 발생하는 코드가 포함된 예제를 준비해요. 다른 개발자에게 요청할 때는 "에러가 발생하는 함수와 그 함수를 호출하는 코드만 보여주세요"라고 요청하면 좋아요.
+
+- **에러 메시지나 로그**: 터미널이나 콘솔에 출력된 전체 메시지를 기록해요. 메시지 일부만 있으면 정확한 상황을 파악하기 어려울 수 있어요. 다른 개발자에게 요청할 때는 전체 메시지를 보내달라고 요청해요.
+
+- **환경 정보**: 문제가 발생한 환경을 기록해요. 운영체제, 런타임 환경 버전, 사용 중인 라이브러리 버전, 설정 파일 내용 등을 포함하면 좋아요. 다른 개발자에게 요청할 때는 설정을 담고 있는 프로젝트 파일을 요청하거나 "어떤 버전의 런타임 환경을 사용하고 있나요?"처럼 물어보면 돼요.
+
+- **문제 해결 과정**: 문제를 해결한 과정을 단계별로 기록해요. 원인 파악 → 조치 방법 → 검증 결과 순서로 정리하면 문제 해결 문서를 작성할 때 도움이 돼요. 다른 개발자에게 요청할 때는 "어떤 방법을 시도했고, 어떤 결과가 나왔나요?"처럼 물어보면 돼요.
+
+:::
+
+::: details 참조를 위한 문서를 작성하는 경우
+
+해당 기능이나 제품을 사용해본 개발자와 소통하면서 실제 사용 예제나 상세 정보를 얻을 수 있어요. 참조 문서에 필요한 정보가 무엇인지 구체적으로 요청하면 도움이 돼요. 
+
+- **사용 예제**: 함수나 API 사용 예제, 데이터베이스 쿼리 예제, 도구 사용 예제 등 참조 대상에 맞는 예제를 수집해요. 다른 개발자에게 요청할 때는 "API 호출 함수와 실제 사용 예시 코드만 보여주세요" 또는 "성공/실패 응답 예제를 보여주세요"처럼 구체적으로 요청해보세요.
+
+- **참조 대상의 상세 정보**: API라면 엔드포인트 URL, 요청 파라미터, 응답 형식, 인증 방법을, 데이터베이스라면 스키마나 테이블 구조를, 도구라면 기능 목록 등을 모아요. 소스 코드에서 함수나 클래스의 정의, 타입 정의, 주석을 확인하거나, 실제 사용한 코드에서 정보를 추출해요. 
+
+:::
+
+::: details 깊은 이해를 위한 문서를 작성하는 경우
+
+설계에 참여한 개발자나 기획자와 소통하면서 설계 의도나 배경 정보를 얻을 수 있어요. 회의록이나 설계 문서 같은 자료를 요청하거나, 직접 설명을 요청해볼 수 있어요.
+
+- **시각 정보**: 구조 다이어그램, 데이터 흐름도, 개념 간 관계를 보여주는 다이어그램 등을 준비해요. 기존에 그려둔 다이어그램이 있다면 활용하고, 없다면 간단한 스케치라도 기록해두면 나중에 정리할 때 도움이 돼요.
+
+- **설계 배경이나 철학**: 기술이 등장한 배경이나 설계 철학을 기록해요. 회의록, 기술 블로그 포스트, 설계 문서 등에서 관련 내용을 찾아볼 수 있어요. 
+
+:::
+
+### 기존 정보 활용하기
+관련 개발자와 직접 소통하기 어려운 경우에는 기존 정보를 활용할 수도 있어요. 예를 들어, 외부 라이브러리나 도구에 대한 정보가 필요할 때 기존에 공개된 정보를 찾아볼 수 있어요.
+
+- 공식 문서를 확인해요.
+
+- Stack Overflow 같은 개발자 커뮤니티에서 비슷한 사례를 참고해요.
+
+- AI에게 물어볼 수도 있어요. 다만 실제 코드나 설정은 직접 테스트해야 해요. 
+
+### 직접 재현하고 검증하기
+예제 코드가 있으면 반드시 검증해야 해요. 직접 테스트하지 않으면 문서에 잘못된 내용이 들어가거나, 사용자가 따라하다가 오류를 만날 수 있어요. 
+
+- **코드 실행해보기**: 코드를 실행해서 실제로 작동하는지 확인해요. 예제 코드에 환경 정보가 있다면 동일한 환경을 구성해서 테스트해보세요. 
+
+- **환경별 차이 확인하기**: 가능하다면 다른 환경에서도 테스트해보세요. 예를 들어, macOS, Windows나 Linux처럼 서로 다른 운영체제에서도 동일하게 코드가 작동하는지 확인하면 더 완성도 높은 문서를 작성할 수 있어요. 환경별로 차이가 있다면 기록해요.
+
+## 2. 정보 정리하기
+정보를 문서의 구조에 맞게 정리하면 파일별로 역할을 명확히 하고, 빠진 내용을 쉽게 점검할 수 있어요. 이렇게 정리한 정보는 AI가 더 완성도 높은 문서를 작성하도록 도와요.
+
+### 문서 구조에 글감을 넣어요
+<!-- 전체 문서 구조에 글감 넣기 vs. 개별 문서 구조에 글감 넣기. 앞에서 단일 문서 단위로 설명하고, 여기서도 단일 문서 단위로 글감을 넣는다는 설명이 들어가서 내용이 중복되는 느낌-->
+문서 구조를 준비하고 각 섹션에 들어갈 **글감**을 채워 넣어보세요. 이 단계는 문서의 큰 틀 안에 구체적인 정보를 배치하는 과정이에요.
+
+아직 문서를 구성하지 않았다면 [문서 구조 만들기](/arrange/type.md) 문서를 참고해주세요. 
+
+```
+nextjs-performance-optimization/
+├── index.md
+├── fundamentals.md     → 개념 설명 중심
+├── tutorials.md        → 따라 하기 중심
+├── reference.md        → 설정값 등 세부 정보
+└── troubleshooting.md  → 오류나 예외 상황을 해결
+```
+
+예를 들어 "Next.js 성능 최적화 가이드"의 구조가 이렇게 정해져 있다고 해볼게요. 먼저 각 문서 파일이 어떤 목적을 갖는지 파악해요
+
+문서 파일의 역할을 정했다면 각 섹션이 답해야 할 질문을 기준으로 글감을 채워 넣어요. **"독자가 목적을 이루려면 어떤 정보가 필요하지"** 를 확인하는 식이에요. 
+
+문서 유형을 생각하면 어떤 내용을 더 채워야 하는지 알기 쉬워요. 이 예시에서는 tutorials.md에 단계별 코드 예제만 들어 있어요. 이럴 때는 환경 설정 관련 정보를 더 모아서 글감으로 채워 넣으면 돼요. 
+
+```
+nextjs-performance-optimization/
+├── index.md           
+├── fundamentals.md         
+│   - 성능 최적화의 기본 개념 · CSR/SSR 차이 요약
+├── tutorials.md
+│   - 예제 실행을 위한 단계별 코드 예제                 # 환경설정 방법 누락
+├── reference.md
+│   - next.config.js의 주요 설정값 · <Image> 컴포넌트의 속성과 기본값
+└── troubleshooting.md
+    - 빌드 실패 시 로그 분석 예시 · 이미지 최적화 오류 해결 방법
+```
+
+### AI가 이해하기 쉽게 정리해요
+글감을 배치했다면 AI를 위해 정보를 다듬어요. AI는 사람과 다르게 정보의 내용보다는 형식과 구조를 중심으로 정보를 파악해요. 
+
+AI가 이해하기 쉬운 구조로 정보를 정리해야 정확하고 일관된 문서를 작성할 수 있어요. 그래서 간결하고 정보의 구조가 뚜렷한 형태로 정보를 정리하는 게 좋아요.
+
+다음 원칙에 따라 정보를 정리해보세요.
+
+- **섹션 나누기**: 정보를 의미 단위별로 구분해요. 각 섹션은 하나의 주제만 설명하도록 나눠요.
+
+- **서식 사용하기**: 헤딩, 불릿, 표, 코드블록 같은 시각적 구조를 활용해요. AI가 정보의 성격을 쉽게 구분할 수 있어요.
+
+- **불필요한 내용 제거하기**: 불명확하거나 불필요한 내용은 제거해요. AI가 정보를 반영할 수 있어요.
+
+- **출처와 버전 정보 명시하기**: 정보의 버전·환경 정보를 함께 제공해요.
+
+```
+image-optimization.md
+- Next.js는 서버 측 이미지 최적화 기능을 제공.
+- 이 기능은 브라우저 크기와 포맷(WebP 등)에 맞춰 이미지 자동 변환, 웹사이트의 로딩 속도 개선
+- 참고 문서: [Next.js 공식 문서 - Image Optimization](https://nextjs.org/docs/app/api-reference/components/image)
+
+1. 환경 정보
+- 적용 버전: Next.js 14  
+- 테스트 환경: macOS 14, Node.js 20  
+
+2. 설정 방법
+- 파일 위치: `next.config.js`  
+- 설정 옵션:  
+  '''js
+  module.exports = {
+    images: {
+      domains: ['example.com'],
+      formats: ['image/webp']
+    }
+  }
+  '''
+- 결과: 페이지 로드 속도가 약 20% 향상
+
+3. 주의할 점
+- 설정이 적용되지 않으면 브라우저 캐시를 비우고 다시 빌드
+```
+앞에서 본 "Next.js 성능 최적화 가이드" 의 "image-optimization.md"에 들어갈 정보는 이렇게 정리할 수 있어요. 
+
+정보를 섹션 "1. 환경 정보", "2. 설정 방법" "3. 주의할 점" 으로 나누고, 각 섹션 안에서는 헤딩과 불릿, 코드 블록을 사용했어요. 문장은 불필요한 설명 없이 핵심만 남겼어요. 마지막으로 버전과 환경 정보를 알려줘서 AI가 오래된 설정을 잘못 인용하지 않도록 했어요.
+
+## ✅ 체크리스트
+가이드에 따라 문서 작성을 위한 정보를 잘 모았는지 아래 질문으로 점검해보세요.
+
+- [ ] 믿을만한 최신 정보인지 확인했나요?  
+- [ ] 문서의 목적에 맞는 정보만 모았나요?  
+- [ ] 각 문서 섹션마다 필요한 정보가 충분히 준비되었나요?  
+- [ ] AI가 불필요한 추측 없이 쓸 수 있도록 간결하게 정리했나요?

docs/arrange/type.md

@@ -0,0 +1 @@
+<!-- 문서 유형 + 프롬프트 -->

rspress.config.ts

@@ -45,120 +45,138 @@ export default defineConfig({
       },
       {
         text: '튜토리얼',
-        link: '/tutorial/basic-documents',
+        link: '/tutorial',
         position: 'left',
       },
       {
         text: 'AI와 함께 쓰기',
-        link: '/tutorial/review-prompt',
+        link: '/ai-writing/index',
+        position: 'left',
+      },
+      {
+        text: '좋은 문서의 기준',
+        link: '/metric/index',
         position: 'left',
       },
     ],
     sidebar: {
       '/': [
         {
           text: '시작하기',
-          link: 'overview',
+          link: '/overview',
         },
         {
           text: '튜토리얼',
+          link: '/tutorial',
+        },
+        {
+          text: '준비하기',
           items: [
             {
-              text: '기본 문서 작성하기',
-              link: '/tutorial/basic-documents',
+              text: '소개',
+              link: '/arrange/index',
             },
             {
-              text: '문서 구조 만들기',
-              link: '/tutorial/structure',
+              text: '문서 유형 정하기',
+              link: '/arrange/type',
             },
             {
-              text: 'AI와 함께 쓰기',
-              link: '/tutorial/review-prompt',
+              text: '자료 모으기',
+              link: '/arrange/material',
             },
           ],
         },
         {
-          text: 'Step 1. 문서 유형 정하기',
+          text: 'AI와 함께 쓰기',
+          collapsed: true,
           items: [
             {
               text: '소개',
-              link: 'type/index',
+              link: '/ai-writing/index',
             },
             {
-              text: '학습을 위한 문서',
-              link: '/type/learning',
+              text: '규칙 만들기',
+              link: '/ai-writing/rule',
             },
             {
-              text: '문제 해결을 위한 문서',
-              link: '/type/problem-solving',
+              text: '페이지 목차 만들기',
+              link: '/ai-writing/table-of-content',
             },
             {
-              text: '참조를 위한 문서',
-              link: '/type/reference',
-            },
-            {
-              text: '깊은 이해를 위한 문서',
-              link: '/type/explanation',
+              text: '초안 작성하기',
+              link: '/ai-writing/draft',
             },
           ],
         },
         {
-          text: 'Step 2. 정보 구조 만들기',
+          text: '검토하기',
           collapsed: true,
           items: [
             {
               text: '소개',
-              link: '/architecture/index',
-            },
-            {
-              text: '한 페이지에서 하나만 다루기',
-              link: '/architecture/one-thing-per-one-page',
-            },
-            {
-              text: '가치를 먼저 제공하기',
-              link: '/architecture/value-first-cost-later',
+              link: '/review/index',
             },
             {
-              text: '효과적인 제목 쓰기',
-              link: '/architecture/heading',
+              text: '스스로 검토하기',
+              link: '/review/self',
             },
             {
-              text: '개요 빠트리지 않기',
-              link: '/architecture/overview',
-            },
-            {
-              text: '예측 가능하게 하기',
-              link: '/architecture/predictability',
+              text: 'AI와 함께 리뷰하기',
+              link: '/review/ai',
             },
           ],
         },
         {
-          text: 'Step 3. 문장 다듬기',
+          text: '더 알아보기',
           collapsed: true,
           items: [
             {
               text: '소개',
-              link: '/sentence/index',
-            },
-            {
-              text: '문장의 주체를 분명하게 하기',
-              link: '/sentence/subject',
-            },
-            {
-              text: '필요한 정보만 남기기',
-              link: '/sentence/compactness',
+              link: '/supplement/index',
             },
             {
-              text: '구체적으로 쓰기',
-              link: '/sentence/concreteness',
+              text: '시각자료 만들기',
+              link: '/supplement/visual-material',
             },
             {
-              text: '자연스러운 한국어 표현 쓰기',
-              link: '/sentence/natural-kor-expression',
+              text: '예제 코드 만들기',
+              link: '/supplement/example-code',
             },
+          ],
+        },
+        {
+          text: '좋은 문서의 기준',
+          collapsed: true,
+          items: [
             {
-              text: '일관되게 쓰기',
-              link: '/sentence/consistency',
+              text: '소개',
+              link: '/metric/index',
+            },
+            {
+              text: '가독성',
+              items: [
+                {
+                  text: '예시1',
+                  link: '/metric/1'
+                },
+                {
+                  text: '예시2',
+                  link: '/metric/2'
+                }
+              ]
+            },
+            {
+              text: '명확성',
+              items: [
+                {
+                  text: '예시3',
+                  link: '/metric/3'
+                },
+                {
+                  text: '예시4',
+                  link: '/metric/4'
+                }
+              ]
             },
           ],
         },