docs: add quick start and user guides

index.html

@@ -25,6 +25,26 @@
         </div>
       </section>
 
+      <section class="workflow-card" aria-labelledby="workflow-title">
+        <div class="workflow-card__heading">
+          <div>
+            <p class="eyebrow">Local workflow</p>
+            <h2 id="workflow-title">파일이 흐르는 방식</h2>
+          </div>
+          <a href="/docs/#asset-reconnect">왜 원본을 다시 선택하나요?</a>
+        </div>
+        <ol class="workflow-list">
+          <li><strong>Dataset Builder</strong><span>음원과 위치 만들기</span></li>
+          <li><strong>Scene JSON + 원본 assets</strong><span>같이 보관하기</span></li>
+          <li><strong>Acoustic Camera</strong><span>배열·DAS 실행하기</span></li>
+          <li><strong>Result JSON</strong><span>map·지표 저장하기</span></li>
+        </ol>
+        <p class="workflow-note">
+          원본 파일은 JSON에 포함되거나 외부로 업로드되지 않습니다. Camera에서 같은 파일을 다시
+          선택하면 SHA-256으로 확인한 뒤 연결합니다.
+        </p>
+      </section>
+
       <section class="launcher-grid" aria-label="도구 선택">
         <a class="launcher-card" href="/apps/dataset-builder/">
           <span class="launcher-card__number">01</span>
@@ -32,7 +52,7 @@
             <h2>Dataset Builder</h2>
             <p>기기 이미지에 음원을 배치하고 ambient를 혼합해 재현 가능한 장면을 만듭니다.</p>
           </div>
-          <span class="launcher-card__action">장면 만들기 →</span>
+          <span class="launcher-card__action">새 Scene 만들기 →</span>
         </a>
 
         <a class="launcher-card launcher-card--accent" href="/apps/acoustic-camera/">
@@ -41,14 +61,33 @@
             <h2>Acoustic Camera</h2>
             <p>배열 응답을 계산하고 주파수 대역별 DAS 결과를 ground truth와 비교합니다.</p>
           </div>
-          <span class="launcher-card__action">시뮬레이션 열기 →</span>
+          <span class="launcher-card__action">기본 예제로 바로 실행 →</span>
         </a>
       </section>
 
+      <section class="quick-start-grid" aria-label="빠른 시작">
+        <article class="quick-start-card">
+          <p class="eyebrow">30초 확인</p>
+          <h2>설정 없이 첫 결과 만들기</h2>
+          <p>Acoustic Camera를 열어 <strong>▶ 기본 예제 실행</strong>을 누르고, 완료되면 <strong>Result JSON</strong>을 저장하세요.</p>
+          <a href="/apps/acoustic-camera/">기본 예제 열기 →</a>
+        </article>
+        <article class="quick-start-card">
+          <p class="eyebrow">내 데이터</p>
+          <h2>Builder부터 끝까지</h2>
+          <p>Scene을 저장한 뒤 Camera에서 <strong>Scene → Array → Experiment → Assets</strong> 순서로 가져오면 참조 오류를 줄일 수 있습니다.</p>
+          <a href="/docs/#full-workflow">5분 안내 보기 →</a>
+        </article>
+      </section>
+
       <footer class="landing-footer">
-        <a href="/docs/execution-plan.md">실행 계획</a>
+        <a href="/docs/">사용 설명서</a>
         <span aria-hidden="true">·</span>
-        <a href="https://github.com/" rel="noreferrer">프로젝트는 로컬에서만 실행됩니다</a>
+        <a href="/tests/">테스트</a>
+        <span aria-hidden="true">·</span>
+        <a href="/benchmarks/webgpu-scaling.html">성능 측정</a>
+        <span aria-hidden="true">·</span>
+        <a href="/docs/execution-plan.md">실행 계획</a>
       </footer>
     </main>
     <script type="module" src="/packages/ui/landing.js"></script>