diff --git a/assets/media/local-election-2026-landscape.webp b/assets/media/local-election-2026-landscape.webp new file mode 100644 index 0000000..c57ceb8 Binary files /dev/null and b/assets/media/local-election-2026-landscape.webp differ diff --git a/assets/media/local-election-2026-race.webp b/assets/media/local-election-2026-race.webp new file mode 100644 index 0000000..5e12295 Binary files /dev/null and b/assets/media/local-election-2026-race.webp differ diff --git a/assets/media/local-election-2026-suite.webp b/assets/media/local-election-2026-suite.webp new file mode 100644 index 0000000..97c1b4f Binary files /dev/null and b/assets/media/local-election-2026-suite.webp differ diff --git a/assets/media/local-election-2026-title.webp b/assets/media/local-election-2026-title.webp new file mode 100644 index 0000000..461b9e8 Binary files /dev/null and b/assets/media/local-election-2026-title.webp differ diff --git a/index.html b/index.html index 5f76644..a8982a1 100644 --- a/index.html +++ b/index.html @@ -320,10 +320,51 @@ +
+
+
+

04 / Recent Election

+

2026 지방선거, 지역별 화면 운영까지 확장했습니다.

+

+ 연합뉴스TV의 6·3 지방선거 개표방송 공개 화면과 지역민방 선거방송 구성을 참고해, + Tornado3_2026Election 프로젝트로 지역별 후보, 판세, 투표율, + 당선 화면을 송출하는 선거방송 시스템을 구축했습니다. +

+
+
89Regional CG Cuts
+
7Local Stations
+
4Output Channels
+
APISBS Data Link
+
+
+ +
+
+ 2026 지방선거 광역단체장 1위 후보 그래픽 +
+
+ 2026 지방선거 지역민방 타이틀 그래픽 +
+
+ 2026 지방선거 기초단체장 판세 그래픽 +
+
+
+
+ KNN + UBC + TBC + KBC + G1 + TJB + JTV +
+
+
-

04 / Project Fields

+

05 / Project Fields

현장에서 검증된 여섯 가지 솔루션

@@ -406,7 +447,7 @@

-

05 / Contact

+

06 / Contact

방송 현장의 데이터를 안정적인 화면으로 연결합니다.

실시간 송출 시스템, 방송 그래픽, AI 영상 분석, 웹/앱 개발이 필요한 프로젝트를 @@ -429,7 +470,11 @@

- + diff --git a/script.js b/script.js index 393ba9d..aba3816 100644 --- 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: { diff --git a/styles.css b/styles.css index dff7eff..74d4aa2 100644 --- 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; }