Clarify company introduction copy

This commit is contained in:
2026-06-27 06:39:34 +09:00
parent d4c63e8b4b
commit 7160aab18c
2 changed files with 88 additions and 95 deletions

View File

@@ -6,7 +6,7 @@
<meta name="theme-color" content="#070706">
<meta
name="description"
content="컴트로피 회사소개 웹페이지. 방송 그래픽, 실시간 데이터, AI 솔루션, 웹/앱 개발 역량 소개."
content="컴트로피 방송 그래픽, 실시간 데이터 송출, AI 영상 분석, 웹/앱 개발을 제공합니다."
>
<title>컴트로피 | Broadcast Data Graphics &amp; AI Solutions</title>
<script>
@@ -85,9 +85,8 @@
<h1 id="heroTitle">COMTROPY</h1>
<p class="hero__subhead">Broadcast Data Graphics &amp; AI Solutions</p>
<p class="hero__lead">
방송 현장의 실시간 데이터를 안정적인 화면 언어로 바꾸는 개발 파트너.
컴트로피는 선거, 스포츠, 경제, 홈쇼핑, AI 영상 분석까지 운영 흐름에 맞춘
송출 시스템과 그래픽 솔루션을 만듭니다.
실시간 데이터를 방송 화면으로 연결합니다.
선거·스포츠·경제·AI 그래픽 송출 시스템을 만듭니다.
</p>
<div class="hero__proof" aria-label="핵심 검증 분야">
<span>선관위 실시간 연동</span>
@@ -173,13 +172,12 @@
<div class="shell about__grid">
<div class="section-heading reveal">
<p class="eyebrow">01 / About</p>
<h2 id="aboutTitle">방송사의 기술 연구소 역할을 수행하는 개발 파트너</h2>
<h2 id="aboutTitle">방송 현장을 이해하는 개발 파트너</h2>
</div>
<div class="about__body reveal" data-delay="1">
<p>
컴트로피는 실시간 방송 자막 송출 시스템, 방송 TV Graphic 솔루션,
웹/앱 구축과 AI 솔루션을 개발하는 IT 솔루션 전문기업입니다.
현장의 속도와 안정성을 이해하고, 운영자가 믿고 다룰 수 있는 시스템을 설계합니다.
컴트로피는 방송 그래픽, 실시간 데이터 송출, AI·웹 솔루션을 개발합니다.
현장 운영자가 믿고 쓰는 시스템을 설계합니다.
</p>
<div class="value-strip" aria-label="핵심 가치">
<strong>Best People</strong>
@@ -192,18 +190,16 @@
<div class="shell mission-grid">
<article class="mission-panel reveal">
<span>Vision</span>
<h3>고객을 선도하는 창조적 리더상 수립</h3>
<h3>현장에 맞는 화면 기술</h3>
<p>
새로운 IT 환경의 방향을 제시하고 IT 전문회사로 성장하는 미래가치,
자기혁신의 가치, 창조적 도전의 가치를 실현합니다.
데이터, 그래픽, 송출 흐름을 하나의 안정적인 시스템으로 연결합니다.
</p>
</article>
<article class="mission-panel mission-panel--accent reveal" data-delay="1">
<span>Mission</span>
<h3>고객과 함께 성하는 Total IT Service 전문기업</h3>
<h3>고객과 함께 성하는 솔루션</h3>
<p>
고객을 가족처럼 대하고, 미래지향적인 기술 혁신과 신뢰경영을 바탕으로
고객과 가치를 공유하는 회사를 만듭니다.
방송사의 운영 방식에 맞춰 빠르게 적용하고 오래 쓰는 도구를 만듭니다.
</p>
</article>
</div>
@@ -216,10 +212,9 @@
</div>
<div class="intro-band__copy reveal" data-delay="1">
<p class="eyebrow">Company Profile</p>
<h2>실시간 데이터 화면 출력 사이를 책임집니다.</h2>
<h2>데이터 화면으로, 화면을 송출로.</h2>
<p>
선거방송, 증권, 홈쇼핑, 스포츠와 게임 방송의 자막 송출 솔루션을 제공하고,
데이터 기반 방송 그래픽과 AI 솔루션, 웹 사이트 구축 역량을 강화하고 있습니다.
선거, 증권, 홈쇼핑, 스포츠 방송에 필요한 자막·그래픽·운영 시스템을 구축합니다.
</p>
<dl class="profile-list">
<div>
@@ -243,11 +238,11 @@
<div class="shell clients__head reveal">
<div class="section-heading section-heading--wide">
<p class="eyebrow">02 / Clients</p>
<h2 id="clientsTitle">방송, 스포츠, 커머스, 게임 산업의 현장과 함께했습니다.</h2>
<h2 id="clientsTitle">검증된 방송 현장과 함께했습니다.</h2>
</div>
<p class="client-note">
공공 방송부터 스포츠 중계, 홈쇼핑, 게임 방송까지 다양한 운영 환경에서
안정성과 정확도가 필요한 화면 시스템을 구축했습니다.
공공 방송, 스포츠 중계, 홈쇼핑, 게임 방송에서
안정적인 화면 시스템을 구축했습니다.
</p>
</div>
<div class="shell logo-grid reveal" data-delay="1">
@@ -273,7 +268,7 @@
<section class="section services" id="services" aria-labelledby="servicesTitle">
<div class="shell section-heading section-heading--wide reveal">
<p class="eyebrow">03 / Business</p>
<h2 id="servicesTitle">실시간 데이터를 화면 위의 정확한 언어로 바꿉니다.</h2>
<h2 id="servicesTitle">데이터 연동부터 송출까지 한 번에.</h2>
</div>
<div class="shell service-grid">
@@ -282,8 +277,8 @@
<span>01</span>
<i data-lucide="captions"></i>
</div>
<h3>방송 그래픽 자막 송출 솔루션</h3>
<p>선거방송, 홈쇼핑, 증권, 스포츠와 게임 데이터를 방송 그래픽으로 연결합니다.</p>
<h3>방송 그래픽 송출</h3>
<p>실시간 데이터를 자막과 그래픽으로 변환합니다.</p>
<div class="service-card__tags"><span>CG</span><span>Live Data</span><span>Output</span></div>
</article>
<article class="service-card reveal" data-delay="1">
@@ -291,8 +286,8 @@
<span>02</span>
<i data-lucide="satellite-dish"></i>
</div>
<h3>국제신호 제작</h3>
<p>아시안게임, 동남아시안게임 등 국제경기 중계 IS 제작 경험을 보유합니다.</p>
<h3>스포츠 국제신호</h3>
<p>국제 경기 중계 IS와 고해상도 CG를 제작합니다.</p>
<div class="service-card__tags"><span>IS</span><span>HD/UHD</span><span>Sports</span></div>
</article>
<article class="service-card reveal" data-delay="2">
@@ -300,8 +295,8 @@
<span>03</span>
<i data-lucide="scan-search"></i>
</div>
<h3>AI 솔루션 연구 개발</h3>
<p>딥러닝 기반 영상 분석과 거리 측정 시스템 등 현장형 AI 솔루션을 개발합니다.</p>
<h3>AI 영상 분석</h3>
<p>영상 인식, 거리 측정 등 현장형 AI 기능을 개발합니다.</p>
<div class="service-card__tags"><span>CUDA</span><span>Vision</span><span>Tracking</span></div>
</article>
<article class="service-card reveal">
@@ -309,8 +304,8 @@
<span>04</span>
<i data-lucide="database-zap"></i>
</div>
<h3>데이터베이스 시스템 구축</h3>
<p>실시간 데이터 연계, API, 데이터 송수신 프로그램과 방송 송출 서버를 설계합니다.</p>
<h3>데이터 시스템</h3>
<p>API, DB, 송수신 서버를 방송 흐름에 맞춰 구축합니다.</p>
<div class="service-card__tags"><span>API</span><span>DB</span><span>Scheduler</span></div>
</article>
<article class="service-card reveal" data-delay="1">
@@ -318,8 +313,8 @@
<span>05</span>
<i data-lucide="panel-top"></i>
</div>
<h3> 사이트 / 앱 개발</h3>
<p>방송 운영 시스템과 연동되는 웹 페이지, 모바일 앱, 관리 도구를 구현합니다.</p>
<h3>/앱 개발</h3>
<p>운영 화면, 관리자 도구, 모바일 연동 UI를 만듭니다.</p>
<div class="service-card__tags"><span>Web</span><span>Mobile</span><span>Admin</span></div>
</article>
<article class="service-card reveal" data-delay="2">
@@ -327,8 +322,8 @@
<span>06</span>
<i data-lucide="box"></i>
</div>
<h3>버추얼 그래픽 시스템</h3>
<p>Unreal Engine, Unity 기반 VR/AR 시스템과 실시간 3D 그래픽 처리를 제공합니다.</p>
<h3>버추얼 그래픽</h3>
<p>Unreal·Unity 기반 VR/AR 그래픽을 구현합니다.</p>
<div class="service-card__tags"><span>VR/AR</span><span>3D</span><span>Unity</span></div>
</article>
</div>
@@ -338,11 +333,10 @@
<div class="shell election-spotlight__grid">
<div class="election-spotlight__copy reveal">
<p class="eyebrow">04 / Recent Election</p>
<h2 id="election2026Title">2026 지방선거, 지역별 화면 운영까지 확장했습니다.</h2>
<h2 id="election2026Title">2026 지방선거 화면을 구축했습니다.</h2>
<p>
연합뉴스TV의 6·3 지방선거 개표방송 공개 화면과 지역민방 선거방송 구성을 참고해,
<strong>Tornado3_2026Election</strong> 프로젝트로 지역별 후보, 판세, 투표율,
당선 화면을 송출하는 선거방송 시스템을 구축했습니다.
<strong>Tornado3_2026Election</strong>으로 지역별 후보, 판세, 투표율,
당선 화면을 실시간 송출 구조로 정리했습니다.
</p>
<div class="election-metrics" aria-label="2026 지방선거 프로젝트 요약">
<div><strong>89</strong><span>Regional CG Cuts</span></div>
@@ -373,33 +367,33 @@
<div class="shell case-lab__head reveal">
<div>
<p class="eyebrow">05 / Project Fields</p>
<h2 id="caseTitle">현장에서 검증된 여섯 가지 솔루션</h2>
<h2 id="caseTitle">대표 솔루션</h2>
</div>
<p>
데이터 연동, 그래픽 송출, AI 분석, 운영 UI까지 실제 방송 흐름에 맞춰 설계합니다.
데이터·그래픽·AI·운영 UI를 방송 흐름에 맞니다.
</p>
</div>
<div class="shell portfolio-ribbon reveal" data-delay="1" aria-label="Featured production cases">
<article>
<figure><img src="assets/media/election-candidate-screen.webp" alt="2026 local election candidate result graphic" loading="lazy" decoding="async"></figure>
<span>2026 Election</span>
<strong>Regional broadcast graphics package</strong>
<span>2026 지방선거</span>
<strong>지역 선거방송 그래픽 패키지</strong>
</article>
<article>
<figure><img src="assets/media/sports-tvgraphic-console.webp" alt="Sports TV graphic operation console" loading="lazy" decoding="async"></figure>
<span>Sports TVG</span>
<strong>Live data and UHD output workflow</strong>
<span>스포츠 TVG</span>
<strong>실시간 데이터·UHD 송출 워크플로</strong>
</article>
<article>
<figure><img src="assets/media/finance-market-share.webp" alt="Finance market share broadcast graphic" loading="lazy" decoding="async"></figure>
<span>Finance</span>
<strong>Market data graphics and API systems</strong>
<span>경제 방송</span>
<strong>시장 데이터 그래픽·API 시스템</strong>
</article>
<article>
<figure><img src="assets/media/ai-distance-result.webp" alt="AI vision distance measurement screen" loading="lazy" decoding="async"></figure>
<span>AI Vision</span>
<strong>Detection, training and field measurement</strong>
<span>AI 비전</span>
<strong>영상 인식·학습·거리 측정</strong>
</article>
</div>
@@ -440,14 +434,14 @@
<span id="caseClient">Election Broadcast</span>
<span id="caseField">Real-time CG</span>
</div>
<h3 id="caseName">선거방송 데이터 방송 그래픽 솔루션 개발</h3>
<h3 id="caseName">선거방송 그래픽 송출 시스템</h3>
<p id="caseDescription">
관위 데이터와 방송 그래픽을 실시간으로 연동해 자막 송출 시스템을 구성합니다.
데이터를 그래픽 화면과 실시간으로 연결합니다.
</p>
<div class="case-stage__chips" id="caseTags" aria-label="핵심 기술"></div>
<div class="case-stat" aria-label="대표 성과">
<strong id="caseStatValue">Real-time</strong>
<span id="caseStatLabel">관위 데이터와 방송 그래픽 연동</span>
<span id="caseStatLabel"> 데이터 실시간 그래픽 연동</span>
</div>
<ul id="caseBullets"></ul>
</div>
@@ -462,15 +456,15 @@
<div class="shell sports-system__content">
<div class="section-heading reveal">
<p class="eyebrow">Sports TV Graphic</p>
<h2 id="systemTitle">데이터 인터페이스부터 사용자 중심 Output까지</h2>
<h2 id="systemTitle">데이터 연동부터 송출 화면까지</h2>
</div>
<div class="system-list reveal" data-delay="1">
<div><strong>Live Data</strong><span>자막시스템에서 사용 가능한 형태로 변환</span></div>
<div><strong>HD/UHD</strong><span>고해상도 CG 제작과 송출 환경 대응</span></div>
<div><strong>IS 제작</strong><span>국제경기 중계의 International Signal 제작</span></div>
<div><strong>Design</strong><span>3D/2D Cut, 애니메이션, 특수 효과 적용</span></div>
<div><strong>Custom UI</strong><span>운영자 중심 설계와 커스터마이징</span></div>
<div><strong>All Sports</strong><span>구기, 투기, 계측 종목 등 다양한 종목 구성</span></div>
<div><strong>Live Data</strong><span>송출 가능한 형식으로 실시간 변환</span></div>
<div><strong>HD/UHD</strong><span>고해상도 CG 제작과 송출 대응</span></div>
<div><strong>IS 제작</strong><span>국제경기 중계용 신호 제작</span></div>
<div><strong>Design</strong><span>2D/3D 그래픽과 애니메이션 적용</span></div>
<div><strong>Custom UI</strong><span>운영자 중심의 맞춤 화면 설계</span></div>
<div><strong>All Sports</strong><span>다양한 종목별 TVG 구성</span></div>
</div>
</div>
</section>
@@ -479,10 +473,9 @@
<div class="shell contact__grid">
<div class="contact__copy reveal">
<p class="eyebrow">06 / Contact</p>
<h2 id="contactTitle">방송 현장의 데이터를 안정적인 화면으로 연결합니다.</h2>
<h2 id="contactTitle">프로젝트를 함께 구체화해보세요.</h2>
<p>
실시간 송출 시스템, 방송 그래픽, AI 영상 분석, 웹/앱 개발이 필요한 프로젝트를
컴트로피와 함께 구체화해보세요.
방송 그래픽, 실시간 송출, AI 영상 분석, 웹/앱 개발 문의를 환영합니다.
</p>
</div>
<address class="contact-card reveal" data-delay="1">

View File

@@ -1,18 +1,18 @@
const caseData = {
election: {
kicker: "2.1 Election Broadcast",
title: "2026 지방선거 방송 그래픽 / 데이터 송출 솔루션",
title: "2026 지방선거 그래픽 송출 시스템",
client: "Yonhapnews TV / Local Stations",
field: "Tornado3 / Karisma",
status: "ELECT 2026",
description: "6·3 지방선거 개표방송 화면 흐름을 기반으로, 지역민방별 선거구와 데이터 범위에 맞춘 실시간 그래픽 송출 시스템을 구성했습니다.",
description: "지역민방별 후보, 판세, 투표율 화면을 실시간 송출 구조로 정리했습니다.",
tags: ["Tornado3", "Karisma", "SBS API", "Regional CG"],
statValue: "89 Cuts",
statLabel: "지역민방용 Normal, Top, Bottom 그래픽 컷 구성",
statLabel: "지역민방용 그래픽 컷 89종",
bullets: [
"KNN, UBC, TBC, KBC, G1, TJB, JTV 지역 필터 기반 운영",
"광역단체장, 교육감, 기초단체장 개표 데이터와 사전 투표율 화면 구성",
"채널별 스케줄 큐, 반복 컷, 다음/대기/송출 상태를 분리한 운영 UI 개발"
"7개 지역민방 운영 필터 구성",
"후보·판세·투표율·당선 화면 제작",
"대기·반복·송출 상태를 나눈 운영 UI"
],
images: [
{ src: "assets/media/election-candidate-screen.webp", alt: "2026 local election candidate result graphic" },
@@ -23,18 +23,18 @@ const caseData = {
},
virtual: {
kicker: "2.2 Virtual Graphic",
title: "버추얼 그래픽 솔루션",
title: "버추얼 그래픽 시스템",
client: "Broadcast Studio",
field: "VR / AR System",
status: "3D READY",
description: "Unreal Engine과 Unity를 활용해 VR, AR 기반의 실시간 3D 그래픽 시스템을 개발합니다.",
description: "Unreal·Unity 기반 VR/AR 그래픽을 방송 화면에 맞춰 구현합니다.",
tags: ["Unreal Engine", "Unity", "3D Data"],
statValue: "VR / AR",
statLabel: "실시간 데이터 기반 3D 그래픽 처리",
statLabel: "실시간 3D 그래픽 처리",
bullets: [
"Unreal Engine 기반 VR/AR 시스템 개발",
"실시간 데이터 3D 그래픽 처리 시스템 적용",
"Unity 활용 영상 콘텐츠 제작"
"VR/AR 스튜디오 화면 구성",
"데이터 기반 3D 오브젝트 제어",
"Unity·Unreal 콘텐츠 제작"
],
images: [
{ src: "assets/media/virtual-election-studio.webp", alt: "버추얼 선거방송 스튜디오 그래픽" },
@@ -44,18 +44,18 @@ const caseData = {
},
finance: {
kicker: "2.3 Finance Broadcast",
title: "증권 데이터 및 경제 방송 송출 그래픽 시스템",
title: "경제방송 데이터 그래픽",
client: "Finance Media",
field: "Database / API",
status: "MARKET API",
description: "코스콤 데이터와 해외 지수 데이터를 연계해 방송 송출 그래픽과 API 서버를 구현합니다.",
description: "시장 데이터를 방송 그래픽과 API 서버로 연결합니다.",
tags: ["Koscom", "REST API", "DB Server"],
statValue: "API",
statLabel: "국내외 지수 데이터 연계 및 송출",
statLabel: "국내외 지수 데이터 연",
bullets: [
"코스콤 데이터와 해외 지수 연계 데이터베이스 서버 구축",
"실시간 그래픽 연계 데이터 송수신 프로그램 개발",
"REST 서버 API 구현 및 방송 송출 시스템 적용"
"코스콤·해외 지수 데이터 연동",
"실시간 그래픽 송수신 프로그램",
"REST API와 송출 시스템 적용"
],
images: [
{ src: "assets/media/finance-chart.webp", alt: "경제 방송 주가 차트 그래픽" },
@@ -65,18 +65,18 @@ const caseData = {
},
ai: {
kicker: "2.4 AI Vision",
title: "AI 기반 거리 측정 시스템",
title: "AI 거리 측정 솔루션",
client: "KPGA",
field: "AI Learning",
status: "AI RESULT",
description: "KPGA 공식 기록에 사용되는 그린 홀 컵 간 거리 측정 솔루션을 개발했습니다.",
description: "KPGA 공식 기록 환경에 적용된 거리 측정 기능을 개발했습니다.",
tags: ["CUDA", "Deep Learning", "Coordinate"],
statValue: "KPGA",
statLabel: "공식 기록 환경에 적용된 거리 측정 솔루션",
bullets: [
"CUDA 기반 딥러닝 모델 학습",
"카메라 영상 신호 수신 후 공 위치와 좌표 변환",
"골프 중계와 기록 환경에 맞춘 AI 거리 측정"
"CUDA 기반 딥러닝 학습",
"영상 좌표 변환과 위치 분석",
"골프 기록 환경에 맞춘 거리 측정"
],
images: [
{ src: "assets/media/ai-distance-result.webp", alt: "AI 기반 거리 측정 결과 화면" },
@@ -86,18 +86,18 @@ const caseData = {
},
shopping: {
kicker: "2.5 Commerce Broadcast",
title: "홈쇼핑 자동화 송출 시스템 / 라이브 톡",
title: "홈쇼핑 송출 자동화",
client: "Commerce Channel",
field: "Automation",
status: "CONTROL",
description: "송출 스케줄 원격 제어, 모바일 연동을 포함한 홈쇼핑 방송 운영 시스템을 개발합니다.",
description: "스케줄, 원격 제어, 모바일 화면을 하나의 운영 흐름으로 연결합니다.",
tags: ["Remote Control", "Mobile", "Schedule"],
statValue: "Automation",
statLabel: "송출 스케줄모바일 운영 흐름 연동",
statLabel: "스케줄·모바일 운영 연동",
bullets: [
"송출 스케줄 관리 데이터 송수신 모듈 개발",
"홈쇼핑 송출 프로그램 원격제어 로컬/모바일 연동",
"웹 페이지와 앱을 활용한 실시간 방송 데이터 송출"
"송출 스케줄 관리 모듈",
"로컬·모바일 원격 제어",
"웹/앱 기반 실시간 운영"
],
images: [
{ src: "assets/media/shopping-control-dashboard.webp", alt: "홈쇼핑 송출 제어 대시보드" },
@@ -107,18 +107,18 @@ const caseData = {
},
sports: {
kicker: "2.6 Sports TV Graphic",
title: "스포츠 / 게임 데이터 솔루션 송출 시스템",
title: "스포츠 TV 그래픽 시스템",
client: "Sports & Game",
field: "TV Graphic",
status: "UHD CG",
description: "Live Data를 자막시스템에서 사용 가능한 형태로 변환하고 다양한 종목의 TVG 시스템을 제작합니다.",
description: "경기 데이터를 고해상도 그래픽과 스코어 화면으로 송출합니다.",
tags: ["HD/UHD", "International Signal", "Scorebug"],
statValue: "IS",
statLabel: "국제신호 제작과 고해상도 CG 송출 대응",
statLabel: "국제신호 고해상도 CG 대응",
bullets: [
"HD/UHD급 CG 제작과 국제신호 제작",
"3D/2D Cut, 애니메이션 등 특수 효과 적용",
"구기, 투기, 계측 종목 등 다양한 스포츠 TVG 구성"
"HD/UHD급 CG 제작",
"2D/3D 컷과 애니메이션 적용",
"종목별 스코어 화면 구성"
],
images: [
{ src: "assets/media/sports-game-result.webp", alt: "게임 결과 방송 그래픽" },