Add 2026 local election project highlight

2026-06-24 11:53:41 +09:00
parent 253291922b
commit 98f687cf4e
7 changed files with 214 additions and 17 deletions
--- a/assets/media/local-election-2026-landscape.webp
+++ b/assets/media/local-election-2026-landscape.webp
--- a/assets/media/local-election-2026-race.webp
+++ b/assets/media/local-election-2026-race.webp
--- a/assets/media/local-election-2026-suite.webp
+++ b/assets/media/local-election-2026-suite.webp
--- a/assets/media/local-election-2026-title.webp
+++ b/assets/media/local-election-2026-title.webp
--- a/index.html
+++ b/index.html
@@ -320,10 +320,51 @@
        </div>
      </section>

+      <section class="section election-spotlight" aria-labelledby="election2026Title">
+        <div class="shell election-spotlight__grid">
+          <div class="election-spotlight__copy reveal">
+            <p class="eyebrow">04 / Recent Election</p>
+            <h2 id="election2026Title">2026 지방선거, 지역별 화면 운영까지 확장했습니다.</h2>
+            <p>
+              연합뉴스TV의 6·3 지방선거 개표방송 공개 화면과 지역민방 선거방송 구성을 참고해,
+              <strong>Tornado3_2026Election</strong> 프로젝트로 지역별 후보, 판세, 투표율,
+              당선 화면을 송출하는 선거방송 시스템을 구축했습니다.
+            </p>
+            <div class="election-metrics" aria-label="2026 지방선거 프로젝트 요약">
+              <div><strong>89</strong><span>Regional CG Cuts</span></div>
+              <div><strong>7</strong><span>Local Stations</span></div>
+              <div><strong>4</strong><span>Output Channels</span></div>
+              <div><strong>API</strong><span>SBS Data Link</span></div>
+            </div>
+          </div>
+
+          <div class="election-spotlight__media reveal" data-delay="1" aria-label="2026 지방선거 지역민방 그래픽 화면">
+            <figure class="election-frame election-frame--main">
+              <img src="assets/media/local-election-2026-race.webp" alt="2026 지방선거 광역단체장 1위 후보 그래픽">
+            </figure>
+            <figure class="election-frame">
+              <img src="assets/media/local-election-2026-title.webp" alt="2026 지방선거 지역민방 타이틀 그래픽">
+            </figure>
+            <figure class="election-frame">
+              <img src="assets/media/local-election-2026-landscape.webp" alt="2026 지방선거 기초단체장 판세 그래픽">
+            </figure>
+          </div>
+        </div>
+        <div class="shell station-strip reveal" data-delay="2" aria-label="지역민방 적용 방송사">
+          <span>KNN</span>
+          <span>UBC</span>
+          <span>TBC</span>
+          <span>KBC</span>
+          <span>G1</span>
+          <span>TJB</span>
+          <span>JTV</span>
+        </div>
+      </section>
+
      <section class="section case-lab" id="cases" aria-labelledby="caseTitle">
        <div class="shell case-lab__head reveal">
          <div>
-            <p class="eyebrow">04 / Project Fields</p>
+            <p class="eyebrow">05 / Project Fields</p>
            <h2 id="caseTitle">현장에서 검증된 여섯 가지 솔루션</h2>
          </div>
          <p>
@@ -406,7 +447,7 @@
      <section class="section contact" id="contact" aria-labelledby="contactTitle">
        <div class="shell contact__grid">
          <div class="contact__copy reveal">
-            <p class="eyebrow">05 / Contact</p>
+            <p class="eyebrow">06 / Contact</p>
            <h2 id="contactTitle">방송 현장의 데이터를 안정적인 화면으로 연결합니다.</h2>
            <p>
              실시간 송출 시스템, 방송 그래픽, AI 영상 분석, 웹/앱 개발이 필요한 프로젝트를
@@ -429,7 +470,11 @@
      </div>
    </footer>

-    <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
    <script src="script.js"></script>
+    <script
+      src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"
+      async
+      onload="window.lucide && window.lucide.createIcons()"
+    ></script>
  </body>
 </html>
--- a/script.js
+++ b/script.js
@@ -1,23 +1,23 @@
 const caseData = {
  election: {
    kicker: "2.1 Election Broadcast",
-    title: "선거방송 데이터 방송 그래픽 솔루션",
-    client: "Public Broadcast",
-    field: "Real-time CG",
-    status: "LIVE DATA",
-    description: "선관위 데이터와 방송 그래픽을 실시간으로 연동해 자막 송출 시스템을 구성합니다.",
-    tags: ["선관위 연동", "스케줄러", "송출 컨트롤"],
-    statValue: "Real-time",
-    statLabel: "선관위 데이터와 방송 그래픽 실시간 연동",
+    title: "2026 지방선거 방송 그래픽 / 데이터 송출 솔루션",
+    client: "Yonhapnews TV / Local Stations",
+    field: "Tornado3 / Karisma",
+    status: "ELECT 2026",
+    description: "6·3 지방선거 개표방송 화면 흐름을 기반으로, 지역민방별 선거구와 데이터 범위에 맞춘 실시간 그래픽 송출 시스템을 구성했습니다.",
+    tags: ["Tornado3", "Karisma", "SBS API", "Regional CG"],
+    statValue: "89 Cuts",
+    statLabel: "지역민방용 Normal, Top, Bottom 그래픽 컷 구성",
    bullets: [
-      "선관위 데이터 실시간 연동 코드 적용",
-      "데이터 스케줄러와 송출 컨트롤러 시스템 개발",
-      "방송 그래픽과 데이터 연동을 통한 실시간 자막 송출"
+      "KNN, UBC, TBC, KBC, G1, TJB, JTV 지역 필터 기반 운영",
+      "광역단체장, 교육감, 기초단체장 개표 데이터와 사전 투표율 화면 구성",
+      "채널별 스케줄 큐, 반복 컷, 다음/대기/송출 상태를 분리한 운영 UI 개발"
    ],
    images: [
-      { src: "assets/media/election-candidate-screen.webp", alt: "선거방송 후보자 득표 그래픽 화면" },
-      { src: "assets/media/election-seat-map.webp", alt: "선거방송 의석 현황 그래픽 화면" },
-      { src: "assets/media/election-region-map.webp", alt: "선거방송 전국 판세 지도 그래픽" }
+      { src: "assets/media/local-election-2026-suite.webp", alt: "2026 지방선거 지역민방 그래픽 쇼케이스" },
+      { src: "assets/media/local-election-2026-race.webp", alt: "2026 지방선거 광역단체장 1위 후보 그래픽" },
+      { src: "assets/media/local-election-2026-landscape.webp", alt: "2026 지방선거 기초단체장 판세 그래픽" }
    ]
  },
  virtual: {
--- a/styles.css
+++ b/styles.css
@@ -665,6 +665,7 @@ body.is-ready .loader {

 .section-heading h2,
 .intro-band h2,
+.election-spotlight h2,
 .case-lab h2,
 .sports-system h2,
 .contact h2 {
@@ -684,6 +685,7 @@ body.is-ready .loader {

 .about__body p,
 .intro-band__copy p,
+.election-spotlight__copy p,
 .case-lab__head > p,
 .contact__copy p {
  margin: 0;
@@ -896,6 +898,130 @@ body.is-ready .loader {
  word-break: keep-all;
 }

+.election-spotlight {
+  padding: 118px 0;
+  background:
+    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 72px 72px,
+    linear-gradient(180deg, rgba(255, 255, 255, 0.024) 1px, transparent 1px) 0 0 / 72px 72px,
+    #10100d;
+  overflow: hidden;
+}
+
+.election-spotlight__grid {
+  display: grid;
+  grid-template-columns: minmax(0, 0.82fr) minmax(520px, 1fr);
+  gap: 58px;
+  align-items: center;
+}
+
+.election-spotlight__copy {
+  max-width: 650px;
+}
+
+.election-spotlight__copy strong {
+  color: var(--signal);
+  font-family: var(--mono);
+  font-size: 0.92em;
+}
+
+.election-metrics {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1px;
+  margin-top: 34px;
+  border: 1px solid var(--line);
+  background: var(--line);
+}
+
+.election-metrics div {
+  min-height: 116px;
+  display: grid;
+  align-content: space-between;
+  gap: 16px;
+  padding: 20px;
+  background: rgba(7, 7, 6, 0.42);
+}
+
+.election-metrics strong {
+  color: var(--paper);
+  font-family: var(--display);
+  font-size: 2.8rem;
+  line-height: 0.9;
+  text-transform: uppercase;
+}
+
+.election-metrics span {
+  color: var(--muted);
+  font-family: var(--mono);
+  font-size: 0.7rem;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.election-spotlight__media {
+  display: grid;
+  gap: 12px;
+}
+
+.election-frame {
+  position: relative;
+  margin: 0;
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  background: #050505;
+  overflow: hidden;
+  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
+}
+
+.election-frame::before {
+  content: "";
+  position: absolute;
+  inset: 10px;
+  z-index: 1;
+  pointer-events: none;
+  border: 1px solid rgba(200, 255, 73, 0.18);
+}
+
+.election-frame img {
+  width: 100%;
+  aspect-ratio: 7.7 / 1;
+  object-fit: cover;
+}
+
+.election-frame--main {
+  transform: translateX(-18px);
+}
+
+.election-frame:nth-child(2) {
+  width: 86%;
+  justify-self: end;
+}
+
+.election-frame:nth-child(3) {
+  width: 92%;
+}
+
+.station-strip {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 1px;
+  margin-top: 48px;
+  border: 1px solid var(--line);
+  background: var(--line);
+}
+
+.station-strip span {
+  min-height: 64px;
+  display: grid;
+  place-items: center;
+  background: rgba(7, 7, 6, 0.55);
+  color: var(--paper-2);
+  font-family: var(--mono);
+  font-size: 0.78rem;
+  font-weight: 600;
+  letter-spacing: 0;
+}
+
 .case-lab {
  padding: 122px 0;
 }
@@ -1572,11 +1698,20 @@ html.js .reveal[data-delay="2"] {
  .hero__inner,
  .about__grid,
  .intro-band__grid,
+  .election-spotlight__grid,
  .sports-system__content,
  .contact__grid {
    grid-template-columns: 1fr;
  }

+  .election-spotlight__copy {
+    max-width: 880px;
+  }
+
+  .election-frame--main {
+    transform: none;
+  }
+
  .hero__console {
    max-width: 560px;
  }
@@ -1648,6 +1783,7 @@ html.js .reveal[data-delay="2"] {
  .hero h1,
  .section-heading h2,
  .intro-band h2,
+  .election-spotlight h2,
  .case-lab h2,
  .sports-system h2,
  .contact h2 {
@@ -1679,11 +1815,21 @@ html.js .reveal[data-delay="2"] {
  .mission-grid,
  .value-strip,
  .system-list,
+  .election-metrics,
  .service-grid,
  .logo-grid {
    grid-template-columns: 1fr;
  }

+  .station-strip {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .election-frame:nth-child(2),
+  .election-frame:nth-child(3) {
+    width: 100%;
+  }
+
  .value-strip strong,
  .system-list div,
  .system-list div:nth-child(2n),
@@ -1700,6 +1846,7 @@ html.js .reveal[data-delay="2"] {
  .about,
  .clients,
  .services,
+  .election-spotlight,
  .case-lab,
  .contact {
    padding: 82px 0;
@@ -1774,6 +1921,7 @@ html.js .reveal[data-delay="2"] {
  .hero h1,
  .section-heading h2,
  .intro-band h2,
+  .election-spotlight h2,
  .case-lab h2,
  .sports-system h2,
  .contact h2 {
@@ -1802,6 +1950,10 @@ html.js .reveal[data-delay="2"] {
    min-height: 104px;
  }

+  .station-strip {
+    grid-template-columns: 1fr;
+  }
+
  .mobile-panel a {
    font-size: 2.48rem;
  }