docs: connect the array builder workflow

docs/index.html

@@ -17,6 +17,7 @@
       <nav aria-label="문서 목차">
         <a href="#quick-start">빠른 시작</a>
         <a href="#moving-live">이동 라이브</a>
+        <a href="#array-builder">배열 만들기</a>
         <a href="#full-workflow">내 데이터</a>
         <a href="#acoustic-model">환경·실측</a>
         <a href="#results">결과 해석</a>
@@ -28,7 +29,7 @@
       <section class="guide-hero">
         <h1>micarrsim 사용 설명서</h1>
         <p>
-          <code>start.cmd</code>로 열고, 장면을 실행하고, 결과를 저장하는 순서만 먼저 확인하세요.
+          <code>start.cmd</code>로 열고, 배열과 장면을 준비하고, 결과를 저장하는 순서만 먼저 확인하세요.
           입력과 계산은 로컬 브라우저에서 처리됩니다.
         </p>
       </section>
@@ -70,8 +71,31 @@
         </div>
       </section>
 
-      <section class="guide-section" id="full-workflow">
+      <section class="guide-section" id="array-builder">
         <div class="section-number">03</div>
+        <div>
+          <p class="eyebrow">Microphone geometry</p>
+          <h2>내 마이크 배열 만들기</h2>
+          <ol class="guide-steps">
+            <li><a href="/apps/array-builder/">Array Builder</a>에서 aperture 너비·높이와 사각형 또는 타원 생성 경계를 정합니다.</li>
+            <li>격자·선형·원형·Fermat 나선·균일 랜덤 중 하나를 고릅니다. 랜덤은 seed와 최소 간격으로 재현성과 채널 간 거리를 제어합니다.</li>
+            <li>canvas의 <strong>추가</strong> 도구로 마이크를 놓고, 점을 드래그하거나 x/y/z 필드로 좌표를 수정합니다.</li>
+            <li>목록에서 마이크를 삭제하거나 채널 순서를 바꾸고, 상태가 <strong>Array JSON 저장 가능</strong>이면 저장합니다.</li>
+            <li><a href="/apps/acoustic-camera/">Acoustic Camera</a>의 <strong>Array</strong> 입력에서 저장한 파일을 선택합니다.</li>
+          </ol>
+          <aside class="callout">
+            가져온 채널의 sensitivity, phase와 frequency-response 보정은 위치·순서 편집 중 보존됩니다.
+            다만 프리셋으로 마이크 목록을 교체하면 기존 채널별 보정도 교체됩니다.
+          </aside>
+          <aside class="callout callout--important">
+            생성 경계 형상, 프리셋 종류, seed와 최소 간격은 편집기 설정이라 표준 Array JSON에
+            저장되지 않습니다. Camera가 사용하는 것은 저장된 aperture와 최종 마이크 좌표·순서입니다.
+          </aside>
+        </div>
+      </section>
+
+      <section class="guide-section" id="full-workflow">
+        <div class="section-number">04</div>
         <div>
           <p class="eyebrow">5분 전체 흐름</p>
           <h2>내 장면을 만들고 Camera에서 실행하기</h2>
@@ -85,7 +109,8 @@
             <li><strong>Scene 저장 후 Camera 열기</strong>를 누릅니다.</li>
             <li>
               Camera에서 파일을 <strong>Scene → Array → Experiment → Assets</strong> 순서로
-              가져옵니다. 내 Array/Experiment가 없다면 내장 기본값을 그대로 둡니다.
+              가져옵니다. Array Builder에서 저장한 파일이 있다면 Array 단계에서 선택하고,
+              내 Array/Experiment가 없다면 내장 기본값을 그대로 둡니다.
             </li>
             <li>
               Assets에서 Builder에 사용한 원본 이미지와 오디오를 한 번에 다시 선택합니다.
@@ -96,7 +121,7 @@
 
           <aside class="callout">
             데스크톱에서는 설정과 작업 영역 사이의 선을 드래그하거나 방향키로 패널 폭을 조절할
-            수 있습니다. <kbd>Enter</kbd> 또는 더블클릭하면 기본 폭으로 돌아갑니다. 폭은 Builder와
+            수 있습니다. <kbd>Enter</kbd> 또는 더블클릭하면 기본 폭으로 돌아갑니다. 폭은 각 Builder와
             Camera별로 이 브라우저에 저장되며, 좁은 화면에서는 두 영역이 자동으로 위아래로
             배치됩니다.
           </aside>
@@ -117,7 +142,7 @@
       </section>
 
       <section class="guide-section">
-        <div class="section-number">04</div>
+        <div class="section-number">05</div>
         <div>
           <p class="eyebrow">Localization &amp; compute</p>
           <h2>알고리즘, 속도와 격자 선택</h2>
@@ -166,7 +191,7 @@
       </section>
 
       <section class="guide-section" id="acoustic-model">
-        <div class="section-number">05</div>
+        <div class="section-number">06</div>
         <div>
           <p class="eyebrow">Acoustics & measured input</p>
           <h2>환경과 마이크 응답 선택</h2>
@@ -188,7 +213,7 @@
       </section>
 
       <section class="guide-section" id="results">
-        <div class="section-number">06</div>
+        <div class="section-number">07</div>
         <div>
           <p class="eyebrow">Result JSON</p>
           <h2>무엇이 저장되나요?</h2>
@@ -228,7 +253,7 @@
       </section>
 
       <section class="guide-section" id="troubleshooting">
-        <div class="section-number">07</div>
+        <div class="section-number">08</div>
         <div>
           <p class="eyebrow">Troubleshooting</p>
           <h2>막혔을 때 확인할 것</h2>
@@ -268,7 +293,7 @@
       </section>
 
       <section class="guide-section">
-        <div class="section-number">08</div>
+        <div class="section-number">09</div>
         <div>
           <p class="eyebrow">Scope & privacy</p>
           <h2>현재 모델의 범위</h2>
@@ -289,7 +314,8 @@
 
       <section class="reference-grid" aria-label="상세 문서">
         <a href="/README.md"><strong>전체 README</strong><span>설치·실행·구조·제약</span></a>
-        <a href="/apps/dataset-builder/README.md"><strong>Builder 설명서</strong><span>source·ambient·Preview WAV</span></a>
+        <a href="/apps/array-builder/README.md"><strong>Array Builder 설명서</strong><span>마이크 배치·프리셋·JSON</span></a>
+        <a href="/apps/dataset-builder/README.md"><strong>Dataset Builder 설명서</strong><span>source·ambient·Preview WAV</span></a>
         <a href="/apps/acoustic-camera/README.md"><strong>Camera 설명서</strong><span>backend·결과·비교</span></a>
         <a href="/docs/acoustic-model.md"><strong>음향 모델</strong><span>마이크 응답·반사·산란·회절</span></a>
         <a href="/docs/realtime-porting.md"><strong>실측 포팅</strong><span>block·streaming 위치추정 API</span></a>