Files
CompanyIntroduction/index.html

505 lines
23 KiB
HTML

<!doctype html>
<html lang="ko" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#070706">
<meta
name="description"
content="컴트로피는 방송 그래픽, 실시간 데이터 송출, AI 영상 분석, 웹/앱 개발을 제공합니다."
>
<title>컴트로피 | Broadcast Data Graphics &amp; AI Solutions</title>
<script>
document.documentElement.classList.remove("no-js");
document.documentElement.classList.add("js");
</script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=IBM+Plex+Mono:wght@500;600&family=Noto+Sans+KR:wght@400;500;700;800;900&display=swap"
rel="stylesheet"
>
<link rel="stylesheet" href="styles.css">
</head>
<body class="is-loading">
<div class="loader" aria-hidden="true">
<div class="loader__inner">
<div class="loader__top">
<strong>COMTROPY</strong>
<span id="loaderValue">00</span>
</div>
<div class="loader__track"><span id="loaderBar"></span></div>
<div class="loader__foot">
<span>Total IT Service</span>
<span>Broadcast Data Systems</span>
</div>
</div>
</div>
<div class="cursor" aria-hidden="true"></div>
<header class="site-header" id="siteHeader">
<div class="header__inner">
<a class="brand" href="#top" aria-label="컴트로피 홈">
<span class="brand__mark">C</span>
<span>COMTROPY</span>
</a>
<nav class="primary-nav" aria-label="주요 메뉴">
<a href="#about">회사</a>
<a href="#clients">고객사</a>
<a href="#services">사업</a>
<a href="#cases">사례</a>
<a href="#contact">문의</a>
</nav>
<a class="header__contact" href="mailto:ecoropy@naver.com">
<i data-lucide="send"></i>
<span>CONTACT</span>
</a>
<button class="menu-toggle" type="button" aria-label="메뉴 열기" aria-expanded="false">
<i data-lucide="menu"></i>
</button>
</div>
<div class="scroll-progress" aria-hidden="true"></div>
</header>
<div class="mobile-panel" id="mobilePanel" aria-hidden="true">
<nav aria-label="모바일 메뉴">
<a href="#about"><span>01</span>회사</a>
<a href="#clients"><span>02</span>고객사</a>
<a href="#services"><span>03</span>사업</a>
<a href="#cases"><span>04</span>사례</a>
<a href="#contact"><span>05</span>문의</a>
</nav>
<p>서울특별시 금천구 서부샛길 606 대성지식산업센터 B동 1601호</p>
</div>
<main id="top">
<section class="hero section" aria-labelledby="heroTitle">
<div class="hero__media" aria-hidden="true">
<img src="assets/media/election-seat-map.webp" alt="" fetchpriority="high" decoding="async">
</div>
<div class="hero__shade" aria-hidden="true"></div>
<div class="shell hero__inner">
<div class="hero__copy reveal">
<p class="eyebrow">Company Introduction</p>
<h1 id="heroTitle">COMTROPY</h1>
<p class="hero__subhead">Broadcast Data Graphics &amp; AI Solutions</p>
<p class="hero__lead">
실시간 데이터를 방송 화면으로 연결합니다.
선거·스포츠·경제·AI 그래픽 송출 시스템을 만듭니다.
</p>
<div class="hero__proof" aria-label="핵심 검증 분야">
<span>선관위 실시간 연동</span>
<span>KPGA 공식 기록</span>
<span>HD/UHD TV Graphic</span>
<span>Unreal / Unity</span>
</div>
<div class="hero__actions">
<a class="button button--hot" href="#cases">
<span>프로젝트 보기</span>
<i data-lucide="arrow-up-right"></i>
</a>
<a class="button" href="#contact">
<span>문의하기</span>
<i data-lucide="mail"></i>
</a>
</div>
</div>
<aside class="hero__console reveal" data-delay="1" aria-label="컴트로피 핵심 솔루션 화면">
<div class="console__top">
<span>COMMAND CENTER</span>
<strong>ON AIR</strong>
</div>
<div class="hero__metrics" aria-label="주요 역량">
<div>
<strong>LIVE</strong>
<span>Data Interface</span>
</div>
<div>
<strong>CG</strong>
<span>Broadcast Output</span>
</div>
<div>
<strong>AI</strong>
<span>Vision Solution</span>
</div>
</div>
<div class="hero__screen">
<img src="assets/media/election-candidate-screen.webp" alt="선거방송 후보자 득표 그래픽 화면">
</div>
<div class="hero__preview-strip" aria-label="Featured production screens">
<figure>
<img src="assets/media/local-election-2026-race.webp" alt="2026 local election race graphic" loading="lazy" decoding="async">
<figcaption>Election 2026</figcaption>
</figure>
<figure>
<img src="assets/media/sports-player-profile.webp" alt="Sports player profile broadcast graphic" loading="lazy" decoding="async">
<figcaption>Sports TVG</figcaption>
</figure>
<figure>
<img src="assets/media/ai-distance-result.webp" alt="AI distance measurement result screen" loading="lazy" decoding="async">
<figcaption>AI Vision</figcaption>
</figure>
</div>
<div class="signal-grid">
<span>Election</span>
<span>Sports TVG</span>
<span>Finance</span>
<span>Shopping</span>
<span>Virtual Graphic</span>
<span>AI Vision</span>
</div>
</aside>
</div>
</section>
<section class="ticker" aria-label="주요 분야">
<div class="ticker__track">
<span>Broadcast TV Graphic</span>
<span>Real-time Data</span>
<span>AI Learning Solution</span>
<span>Web Contents</span>
<span>Database System</span>
<span>Sports International Signal</span>
<span>Broadcast TV Graphic</span>
<span>Real-time Data</span>
<span>AI Learning Solution</span>
</div>
</section>
<section class="section about" id="about" aria-labelledby="aboutTitle">
<div class="shell about__grid">
<div class="section-heading reveal">
<p class="eyebrow">01 / About</p>
<h2 id="aboutTitle">방송 현장을 이해하는 개발 파트너</h2>
</div>
<div class="about__body reveal" data-delay="1">
<p>
컴트로피는 방송 그래픽, 실시간 데이터 송출, AI·웹 솔루션을 개발합니다.
현장 운영자가 믿고 쓰는 시스템을 설계합니다.
</p>
<div class="value-strip" aria-label="핵심 가치">
<strong>Best People</strong>
<strong>Best Technical</strong>
<strong>Best Company</strong>
</div>
</div>
</div>
<div class="shell mission-grid">
<article class="mission-panel reveal">
<span>Vision</span>
<h3>현장에 맞는 화면 기술</h3>
<p>
데이터, 그래픽, 송출 흐름을 하나의 안정적인 시스템으로 연결합니다.
</p>
</article>
<article class="mission-panel mission-panel--accent reveal" data-delay="1">
<span>Mission</span>
<h3>고객과 함께 완성하는 솔루션</h3>
<p>
방송사의 운영 방식에 맞춰 빠르게 적용하고 오래 쓰는 도구를 만듭니다.
</p>
</article>
</div>
</section>
<section class="section intro-band" aria-label="회사 일반현황">
<div class="shell intro-band__grid">
<div class="intro-band__image reveal">
<img src="assets/media/digital-network.png" alt="디지털 네트워크 그래픽">
</div>
<div class="intro-band__copy reveal" data-delay="1">
<p class="eyebrow">Company Profile</p>
<h2>데이터를 화면으로, 화면을 송출로.</h2>
<p>
선거, 증권, 홈쇼핑, 스포츠 방송에 필요한 자막·그래픽·운영 시스템을 구축합니다.
</p>
<dl class="profile-list">
<div>
<dt>사업 분야</dt>
<dd>소프트웨어 개발 및 공급, 방송 TV Graphic 솔루션, 웹 콘텐츠 개발</dd>
</div>
<div>
<dt>핵심 기술</dt>
<dd>실시간 데이터 연동, 송출 제어, API 서버, AI 영상 분석, VR/AR 그래픽</dd>
</div>
<div>
<dt>위치</dt>
<dd>서울특별시 금천구 서부샛길 606 대성지식산업센터 B동 1601호</dd>
</div>
</dl>
</div>
</div>
</section>
<section class="section clients" id="clients" aria-labelledby="clientsTitle">
<div class="shell clients__head reveal">
<div class="section-heading section-heading--wide">
<p class="eyebrow">02 / Clients</p>
<h2 id="clientsTitle">검증된 방송 현장과 함께했습니다.</h2>
</div>
<p class="client-note">
공공 방송, 스포츠 중계, 홈쇼핑, 게임 방송에서
안정적인 화면 시스템을 구축했습니다.
</p>
</div>
<div class="shell logo-grid reveal" data-delay="1">
<figure><img src="assets/media/client-01-kpga.png" alt="KPGA"></figure>
<figure><img src="assets/media/client-02-ktv.png" alt="KTV 국민방송"></figure>
<figure><img src="assets/media/client-03-kt-alpha.png" alt="KT 알파 쇼핑"></figure>
<figure><img src="assets/media/client-04-sk-store.png" alt="SK 스토아"></figure>
<figure><img src="assets/media/client-05-wbdg.png" alt="WBDG"></figure>
<figure><img src="assets/media/client-06-ytn.png" alt="YTN"></figure>
<figure><img src="assets/media/client-07-maekyung-tv.png" alt="매일경제TV"></figure>
<figure><img src="assets/media/client-08-yonhapnews-tv.png" alt="연합뉴스TV"></figure>
<figure><img src="assets/media/client-09-etdaily-tv.png" alt="이데일리TV"></figure>
<figure><img src="assets/media/client-10-com2us.png" alt="Com2us"></figure>
<figure><img src="assets/media/client-11-tomato-securities.png" alt="토마토증권통"></figure>
<figure><img src="assets/media/client-12-shinsegae-shopping.png" alt="신세계 쇼핑"></figure>
<figure><img src="assets/media/client-13-mbc-cni.png" alt="MBC C&amp;I"></figure>
<figure><img src="assets/media/client-14-mbc.png" alt="MBC"></figure>
<figure><img src="assets/media/client-15-riot-games.png" alt="Riot Games"></figure>
<figure><img src="assets/media/client-16-snuh.png" alt="서울대학교병원"></figure>
</div>
</section>
<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>
</div>
<div class="shell service-grid">
<article class="service-card reveal">
<div class="service-card__top">
<span>01</span>
<i data-lucide="captions"></i>
</div>
<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">
<div class="service-card__top">
<span>02</span>
<i data-lucide="satellite-dish"></i>
</div>
<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">
<div class="service-card__top">
<span>03</span>
<i data-lucide="scan-search"></i>
</div>
<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">
<div class="service-card__top">
<span>04</span>
<i data-lucide="database-zap"></i>
</div>
<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">
<div class="service-card__top">
<span>05</span>
<i data-lucide="panel-top"></i>
</div>
<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">
<div class="service-card__top">
<span>06</span>
<i data-lucide="box"></i>
</div>
<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>
</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>
<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-showcase">
<img src="assets/media/local-election-2026-premium.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">05 / Project Fields</p>
<h2 id="caseTitle">대표 솔루션</h2>
</div>
<p>
데이터·그래픽·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 지방선거</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>스포츠 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>경제 방송</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 비전</span>
<strong>영상 인식·학습·거리 측정</strong>
</article>
</div>
<div class="shell case-lab__grid">
<div class="case-tabs reveal" role="tablist" aria-label="프로젝트 분야">
<button class="is-active" type="button" role="tab" aria-selected="true" data-case="election">
<i data-lucide="vote"></i><span>선거방송</span>
</button>
<button type="button" role="tab" aria-selected="false" data-case="virtual">
<i data-lucide="box"></i><span>버추얼 그래픽</span>
</button>
<button type="button" role="tab" aria-selected="false" data-case="finance">
<i data-lucide="chart-candlestick"></i><span>경제 방송</span>
</button>
<button type="button" role="tab" aria-selected="false" data-case="ai">
<i data-lucide="scan-search"></i><span>AI 학습</span>
</button>
<button type="button" role="tab" aria-selected="false" data-case="shopping">
<i data-lucide="shopping-bag"></i><span>홈쇼핑</span>
</button>
<button type="button" role="tab" aria-selected="false" data-case="sports">
<i data-lucide="trophy"></i><span>스포츠 TVG</span>
</button>
</div>
<article class="case-stage reveal" data-delay="1" aria-live="polite">
<div class="case-stage__media">
<div class="case-stage__bar" aria-hidden="true">
<span></span><span></span><span></span>
<strong id="caseStatus">LIVE READY</strong>
</div>
<img id="caseImage" src="assets/media/election-candidate-screen.webp" alt="선거방송 후보자 득표 그래픽 화면">
<div class="case-stage__thumbs" id="caseThumbs"></div>
</div>
<div class="case-stage__copy">
<p class="case-stage__kicker" id="caseKicker">2.1 선거방송</p>
<div class="case-stage__meta" aria-label="프로젝트 정보">
<span id="caseClient">Election Broadcast</span>
<span id="caseField">Real-time CG</span>
</div>
<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>
</div>
<ul id="caseBullets"></ul>
</div>
</article>
</div>
</section>
<section class="section sports-system" aria-labelledby="systemTitle">
<div class="sports-system__image reveal">
<img src="assets/media/sports-tvgraphic-console.webp" alt="스포츠 TV 그래픽 운영 콘솔">
</div>
<div class="shell sports-system__content">
<div class="section-heading reveal">
<p class="eyebrow">Sports TV Graphic</p>
<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>국제경기 중계용 신호 제작</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>
<section class="section contact" id="contact" aria-labelledby="contactTitle">
<div class="shell contact__grid">
<div class="contact__copy reveal">
<p class="eyebrow">06 / Contact</p>
<h2 id="contactTitle">프로젝트를 함께 구체화해보세요.</h2>
<p>
방송 그래픽, 실시간 송출, AI 영상 분석, 웹/앱 개발 문의를 환영합니다.
</p>
</div>
<address class="contact-card reveal" data-delay="1">
<a href="tel:010-9008-2329"><i data-lucide="phone"></i><span>010-9008-2329</span></a>
<a href="mailto:ecoropy@naver.com"><i data-lucide="mail"></i><span>ecoropy@naver.com</span></a>
<p><i data-lucide="map-pin"></i><span>서울특별시 금천구 서부샛길 606 대성지식산업센터 B동 1601호</span></p>
</address>
</div>
</section>
</main>
<footer class="site-footer">
<div class="shell">
<strong>COMTROPY</strong>
<span>Best People, Best Technical, Best Company</span>
</div>
</footer>
<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>