README와 다운로드 페이지에 게임 화면 추가

Website/projectquint-site/README.md

@@ -32,6 +32,6 @@ npm run build
 ## 공개 자료의 범위
 
 - 개인 이름, 개인 계정, 개인 GitHub 링크를 공개 페이지에 넣지 않습니다.
-- BMS 음원·재킷·BGA를 사이트에 복제하지 않습니다.
+- BMS 음원·재킷·BGA 원본 파일은 사이트에서 배포하지 않습니다. 게임 스크린샷에는 외부 BMS를 사용한 실행 예시임을 명시합니다.
 - 외부 BMS 콘텐츠는 원 제작자 또는 커뮤니티 페이지로 연결합니다.
 - 배포 전에 소스맵과 이미지·HTML 메타데이터를 확인합니다.

Website/projectquint-site/src/pages/download.astro

@@ -1,5 +1,22 @@
 ---
 import BaseLayout from "../layouts/BaseLayout.astro";
+
+const screenshots = [
+  {
+    src: "/screenshots/music-select-20260907.png",
+    title: "곡 선택",
+    alt: "곡 목록, 개인 기록과 채보 특성을 보여주는 곡 선택 화면",
+    width: 3818,
+    height: 1800,
+  },
+  {
+    src: "/screenshots/gameplay-20260907.png",
+    title: "플레이",
+    alt: "BGA와 노트 레인, 판정 정보를 보여주는 플레이 화면",
+    width: 3824,
+    height: 1772,
+  },
+];
 ---
 
 <BaseLayout
@@ -33,6 +50,30 @@ import BaseLayout from "../layouts/BaseLayout.astro";
     </div>
   </section>
 
+  <section class="screenshots" aria-labelledby="screenshots-heading">
+    <p class="eyebrow">SCREENSHOTS</p>
+    <h2 id="screenshots-heading">게임 화면</h2>
+    <p class="screenshots__note">
+      외부 BMS 라이브러리를 연결한 실행 예시입니다. 화면에 표시된 곡과 이미지는 게임 배포물에 포함되지 않습니다.
+      이미지를 선택하면 원본 크기로 볼 수 있습니다.
+    </p>
+    {screenshots.map((screenshot) => (
+      <figure>
+        <a href={screenshot.src} aria-label={`${screenshot.title} 화면 원본 보기`}>
+          <img
+            src={screenshot.src}
+            alt={screenshot.alt}
+            width={screenshot.width}
+            height={screenshot.height}
+            loading="lazy"
+            decoding="async"
+          />
+        </a>
+        <figcaption>{screenshot.title}</figcaption>
+      </figure>
+    ))}
+  </section>
+
   <section class="content-grid">
     <article class="content-card content-card--wide">
       <p class="card-kicker">INSTALL</p>
@@ -78,3 +119,36 @@ import BaseLayout from "../layouts/BaseLayout.astro";
     <span>플레이 기록을 백업하고, 문제 발생 시 곡·채보명과 재현 절차를 함께 알려주세요.</span>
   </section>
 </BaseLayout>
+
+<style>
+  .screenshots {
+    padding: 48px 0;
+    border-bottom: 1px solid var(--line);
+  }
+
+  .screenshots__note {
+    color: var(--muted);
+    line-height: 1.8;
+  }
+
+  figure {
+    margin: 28px 0 0;
+  }
+
+  figure a {
+    display: block;
+  }
+
+  figure img {
+    display: block;
+    width: 100%;
+    height: auto;
+    border: 1px solid var(--line);
+    border-radius: var(--radius-sm);
+  }
+
+  figcaption {
+    margin-top: 12px;
+    color: var(--muted);
+  }
+</style>