feat(site): rework 19 marketing showcases for composition diversity
Some checks are pending
ci / build (push) Waiting to run

Measured convergence before: split hero 13/19, top-bar nav 19/19,
one-line notice footer 14/19, body Pretendard 17/21, 10 similarity
pairs above 0.78. Each showcase got a pre-assigned hero family, nav
form, footer form, type pair, background, accent hue, radius, motion
grammar and material from outputs/rework-2026-10-06/plan.md; direction
cards and the chosen reason are recorded in every design.md.

After: 0 similarity warnings, 19 distinct display faces, 7 hero
families, 5 nav forms, 5 footer forms, no scroll reveals, 5 showcases
with SVG filter materials. Example contact values replace bracket
placeholders under the existing fictional-brand notices. Thumbnails,
OG images, card copy and three e2e assertions updated; dead CSS in
dure-enrollment and hannam-jari removed; similarity.mjs learns the new
font families.
This commit is contained in:
Yun Chan 2026-10-06 16:55:50 +09:00
parent 88c11682b1
commit 8e3cdb0d3b
296 changed files with 19131 additions and 17538 deletions

View file

@ -24,8 +24,20 @@
- 현장 탭의 최소 높이와 focus 계약을 보존하며, `minmax(0, …)`로 320px·200% 확대에서 열을 수축한다.
- `products.html`도 동일한 15px 본문과 라벨·값 열 규칙을 적용한다.
## 2026-09-12 현재 검증 기록
## 카피 방향 (2026-10-02)
- `verify-final` 18개 묶음은 16개가 즉시 통과했다. 전체 묶음의 invariant·visual 검사는 Gaon·Dure를 대상으로 하며, 나머지 2개는 수정 뒤 release 독립 재실행에서 ALL PASS·ALL MATCH였다.
- root는 28개 모바일, 21개 데스크톱, 7개 하위 경로와 30개 앱 상태를 직접 검토해 수용했다. stress 112건은 hard failure 0이며, 가로 넘침 4건은 targeted fix 뒤 390px 재측정에서 0이다.
- 이 기록은 렌더·계약 범위의 현재 결과다. 모든 폭·키보드 경로·인쇄 등 개별 기능을 완전 재실행했다는 뜻이 아니며, 참여자 과업 효과도 미측정이다.
실재 기업이므로 회사명·제품명·수치·납품처·수상 기록·연락처는 그대로 둔다. 바꾼 것은 문장과 라벨이다. 히어로 표제 "네 현장을 하나로"는 이 페이지의 유일한 슬로건으로 남기고, 바로 아래 문단에서 무엇을 만드는지(VR 교육 플랫폼, 산업용 IoT 데이터 통합, AI 서비스 구독 결제, 현장용 애플리케이션)를 사실대로 적는다. "운영 결과를 수치로 증명합니다", "프로젝트는 이름과 기술로 증명합니다", "닫힌 공고를 열려 있는 것처럼 보이지 않게" 같은 선언형 문장과 "Field 01 · Immersive learning", "Capability matrix", "Build cycle" 같은 영문 장식 라벨은 한국어 정보 라벨로 바꿨다. 원칙 네 가지의 영문 이름(Hybrid·Continuum·Precision·Empowerment)과 한글 이름은 공식 자료에서 온 것일 수 있어 유지했다.
## 2026-10-02 레드팀 06 수정 기록
- 이번 레드팀 수정에서 이 페이지는 바꾸지 않았다. 모바일 첫 화면 h1 top 656(390×844)과 히어로 이미지 선정 문제는 남아 있다.
## 내비·푸터 결정 (2026-10-06 연장)
- 내비: 히어로 위에 떠 있던 absolute 오버레이 상단 바를 문서 흐름의 일반 상단 바로 바꿨다(`.site-head { position: relative; background: var(--page) }`). 히어로 상단 여백에서 `--header-h`만큼 더하던 값을 뺐고(`.hero-grid` 두 곳), `products.html`도 같은 셸을 쓰므로 `catalog.css`의 `.catalog-hero` 상단 여백에서 같은 값을 뺐다. 링크·id·`.head-inner` 자식 구성·`.head-meta`는 그대로다. 모바일(≤43rem)은 원래 `position: relative`였으므로 변화 없음.
- 푸터: 2행 색인 유지.
- 3D 캔버스(`#coreCanvas`)·현장 선택 폼·제품 페이지 내용은 건드리지 않았다.
## 변경 기록
- 2026-10-06 연장: 오버레이 내비 → 일반 상단 바. 토큰·서체·히어로 사진·푸터는 그대로.

View file

@ -3,15 +3,15 @@
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<title>트웬티온스 — 네 현장을 하나로</title>
<title>트웬티온스 — VR 교육·산업용 IoT 소프트웨어</title>
<meta
name="description"
content="트웬티온스는 가상현실, 산업용 IoT, AI SaaS 결제, 현장 애플리케이션을 하나의 제품 체계로 설계하고 운영하는 소프트웨어 스튜디오입니다."
/>
<meta property="og:title" content="트웬티온스 — 네 현장을 하나로" />
<meta property="og:title" content="트웬티온스 — VR 교육·산업용 IoT 소프트웨어" />
<meta
property="og:description"
content="강의실, 데이터센터, 공공기관, 공장의 서로 다른 조건을 실제로 움직이는 소프트웨어로 연결합니다."
content="강의실, 데이터센터, 공공기관, 공장에서 쓰는 소프트웨어를 개발하고 운영하는 경기 화성의 소프트웨어 회사입니다."
/>
<meta property="og:type" content="website" />
<meta property="og:image" content="./og.png" />
@ -21,7 +21,7 @@
<link rel="preload" href="./assets/pretendard-twentyoz.woff2" as="font" type="font/woff2" crossorigin />
<link rel="stylesheet" href="./styles/tokens.css?v=20260912all" />
<link rel="stylesheet" href="./styles/main.css?v=20260912all" />
<link rel="stylesheet" href="./styles/main.css?v=20261006" />
<link
rel="icon"
href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%23151616'/%3E%3Ccircle cx='16' cy='16' r='7' fill='none' stroke='%23F6F4EF' stroke-width='2'/%3E%3Cpath d='M16 5v22M5 16h22' stroke='%23B9362B'/%3E%3C/svg%3E"
@ -44,7 +44,7 @@
<a href="#company">회사</a>
<a href="#contact">문의</a>
</nav>
<p class="head-meta">HWASEONG · KR</p>
<p class="head-meta">경기 화성</p>
</div>
</header>
@ -57,7 +57,7 @@
src="./assets/core-light.webp"
width="1600"
height="900"
alt="트웬티온스의 네 산업 현장을 연결하는 정밀 공간 코어"
alt="히어로 배경의 금속 코어 3D 그래픽"
fetchpriority="high"
decoding="async"
/>
@ -67,11 +67,11 @@
<div class="wrap hero-grid">
<div class="hero-copy">
<p class="eyebrow">Independent software studio · since 2020</p>
<p class="eyebrow">소프트웨어 개발사 · 2020년 설립</p>
<h1 id="heroHeading">네 현장을 하나로</h1>
<p class="hero-lead">
가상현실부터 산업용 IoT까지. 서로 다른 현장의 데이터를 읽고,
사람이 바로 움직일 수 있는 하나의 시스템으로 바꿉니다.
VR 교육 플랫폼, 산업용 IoT 데이터 통합, AI 서비스 구독 결제,
현장용 애플리케이션을 직접 개발하고 운영합니다.
</p>
<div class="hero-actions">
<a class="button button-primary" href="mailto:hello@twentyoz.kr?subject=%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%20%EB%AC%B8%EC%9D%98">
@ -120,9 +120,9 @@
<div class="field-panels" aria-live="polite">
<article class="field-panel" data-panel="edu">
<div class="panel-intro">
<p class="panel-index">Field 01 · Immersive learning</p>
<p class="panel-index">현장 01 · 몰입형 교육</p>
<p class="panel-what">
헤드셋을 쓴 학생의 실습을 강사가 밖에서 보고, 웹캠 한 대로 캐릭터의 몸짓까지 잡습니다.
강사가 VR 헤드셋을 쓴 학생의 실습 화면을 함께 보고, 웹캠 한 대로 캐릭터 동작까지 실시간 캡처합니다.
</p>
</div>
<dl class="panel-facts">
@ -136,9 +136,9 @@
<article class="field-panel" data-panel="dc">
<div class="panel-intro">
<p class="panel-index">Field 02 · Connected operations</p>
<p class="panel-index">현장 02 · 데이터 통합과 운영</p>
<p class="panel-what">
서로 다른 여섯 산업 프로토콜을 한 엔진이 받아 같은 시간축에 올리고, 그 위에서 운전을 자동화합니다.
6종의 산업 프로토콜 데이터를 하나의 엔진으로 수집해 같은 시간 기준으로 정리하고, 설비 운전을 자동화합니다.
</p>
</div>
<dl class="panel-facts">
@ -152,7 +152,7 @@
<article class="field-panel" data-panel="gov">
<div class="panel-intro">
<p class="panel-index">Field 03 · Public AI access</p>
<p class="panel-index">현장 03 · 공공기관 AI 도입</p>
<p class="panel-what">
해외 AI 서비스를 쓰기 어려운 기관을 위해 원화 결제와 세금계산서 발행을 하나의 흐름으로 연결합니다.
</p>
@ -168,9 +168,9 @@
<article class="field-panel" data-panel="plant">
<div class="panel-intro">
<p class="panel-index">Field 04 · Industrial interface</p>
<p class="panel-index">현장 04 · 산업 현장 화면</p>
<p class="panel-what">
장갑 낀 손, 밝은 햇빛, 끊기는 통신을 전제로 사무실 화면을 현장용 인터페이스로 다시 만듭니다.
장갑을 낀 손, 밝은 햇빛, 불안정한 통신 환경에서도 쓸 수 있는 현장용 화면을 만듭니다.
</p>
</div>
<dl class="panel-facts">
@ -192,9 +192,9 @@
<div class="wrap proof-grid">
<div class="section-intro">
<p class="eyebrow">Operational proof</p>
<h2 id="proofHeading">운영 결과를 수치로 증명합니다</h2>
<h2 id="proofHeading">숫자로 보는 트웬티온스</h2>
<p>
서로 다른 산업의 경험과 새 기술을 붙여 고객의 다음 운영 방식을 만드는 것이 하는 일입니다.
여러 산업에서 쌓은 경험과 새 기술을 결합해 고객사의 운영 시스템을 만듭니다.
</p>
</div>
<dl class="counts">
@ -214,9 +214,9 @@
<section class="section principles" aria-labelledby="principlesHeading">
<div class="wrap">
<div class="section-intro section-intro-wide">
<p class="eyebrow">Operating principles · 04</p>
<h2 id="principlesHeading">서로 다른 기술을 하나의 운영 기준으로 연결합니다</h2>
<p>프로젝트의 분야가 달라도 설계와 검증에 적용하는 네 가지 원칙은 같습니다.</p>
<p class="eyebrow">일하는 원칙</p>
<h2 id="principlesHeading">분야가 달라도 같은 원칙으로 일합니다</h2>
<p>모든 프로젝트의 설계와 검증 단계에서 공통으로 적용하는 네 가지 기준입니다.</p>
</div>
<ol class="principle-list">
<li><p>01 / Hybrid</p><h3>교배</h3><span>산업 경험과 신기술을 결합해 현장에 필요한 새로운 운영 방식을 만듭니다.</span></li>
@ -230,8 +230,8 @@
<section class="section products" id="products" aria-labelledby="productsHeading">
<div class="wrap">
<div class="section-intro section-intro-wide">
<p class="eyebrow">Product system · 04</p>
<h2 id="productsHeading">한 번 납품하고 끝내지 않는 네 개의 시스템</h2>
<p class="eyebrow">자체 제품</p>
<h2 id="productsHeading">납품 후에도 계속 개선하는 제품 4종</h2>
<p>특정 고객의 요구에서 시작했지만, 현장 요구와 운영 환경의 변화에 맞춰 계속 개선하고 있습니다.</p>
</div>
@ -240,14 +240,14 @@
<p class="product-id">01 / 04</p>
<div class="product-main">
<h3>VIVEN</h3>
<p>기업과 교육기관을 위한 몰입형 VR 교육·훈련 플랫폼. PC와 모바일 VMC로 캐릭터의 몸짓을 실시간으로 연결합니다.</p>
<p>기업과 교육기관을 위한 몰입형 VR 교육·훈련 플랫폼입니다. PC·모바일 VMC로 사용자 동작을 캐릭터에 실시간 반영합니다.</p>
<p class="tech-line">Unity3D × WebXR × MediaPipe</p>
<a class="product-link" href="./products.html#viven">VIVEN 상세 보기</a>
</div>
<dl class="product-meta">
<div><dt>Domain</dt><dd>Immersive learning</dd></div>
<div><dt>Cycle</dt><dd>2021 –</dd></div>
<div><dt>Maturity</dt><dd>TRL 9</dd></div>
<div><dt>분야</dt><dd>몰입형 교육</dd></div>
<div><dt>개발</dt><dd>2021 –</dd></div>
<div><dt>성숙도</dt><dd>TRL 9</dd></div>
</dl>
</li>
<li>
@ -259,23 +259,23 @@
<a class="product-link" href="./products.html#edubill">EduBill 상세 보기</a>
</div>
<dl class="product-meta">
<div><dt>Domain</dt><dd>Public AI access</dd></div>
<div><dt>Cycle</dt><dd>2024 –</dd></div>
<div><dt>Maturity</dt><dd>TRL 8</dd></div>
<div><dt>분야</dt><dd>공공 AI 도입</dd></div>
<div><dt>개발</dt><dd>2024 –</dd></div>
<div><dt>성숙도</dt><dd>TRL 8</dd></div>
</dl>
</li>
<li>
<p class="product-id">03 / 04</p>
<div class="product-main">
<h3>XD Hub</h3>
<p>데이터센터·제조·에너지·빌딩의 여섯 산업 프로토콜을 단일 엔진으로 수집하고 전처리해 전송합니다.</p>
<p>데이터센터·제조·에너지·빌딩에서 쓰는 6종의 산업 프로토콜 데이터를 하나의 엔진으로 수집·전처리해 전송합니다.</p>
<p class="tech-line">Java Spring Boot × Netty × TimescaleDB</p>
<a class="product-link" href="./products.html#xd-hub">XD Hub 상세 보기</a>
</div>
<dl class="product-meta">
<div><dt>Domain</dt><dd>Industrial IoT</dd></div>
<div><dt>Cycle</dt><dd>2022 –</dd></div>
<div><dt>Maturity</dt><dd>TRL 8</dd></div>
<div><dt>분야</dt><dd>산업용 IoT</dd></div>
<div><dt>개발</dt><dd>2022 –</dd></div>
<div><dt>성숙도</dt><dd>TRL 8</dd></div>
</dl>
</li>
<li>
@ -287,9 +287,9 @@
<a class="product-link" href="./products.html#xd-works">XD Works 상세 보기</a>
</div>
<dl class="product-meta">
<div><dt>Domain</dt><dd>DCIM · FEMS</dd></div>
<div><dt>Cycle</dt><dd>2023 –</dd></div>
<div><dt>Maturity</dt><dd>TRL 8</dd></div>
<div><dt>분야</dt><dd>DCIM · FEMS</dd></div>
<div><dt>개발</dt><dd>2023 –</dd></div>
<div><dt>성숙도</dt><dd>TRL 8</dd></div>
</dl>
</li>
</ol>
@ -299,11 +299,11 @@
<section class="section ledger-section" id="ledger" aria-labelledby="ledgerHeading">
<div class="wrap ledger-grid">
<div class="section-intro sticky-intro">
<p class="eyebrow">Selected work · 12 / 49</p>
<h2 id="ledgerHeading">프로젝트는 이름과 기술로 증명합니다</h2>
<p class="eyebrow">공개 가능한 49건 중 12건</p>
<h2 id="ledgerHeading">주요 수행 프로젝트</h2>
<p>
소개서 문장 대신 실제 프로젝트, 완료 연도, 사용 기술을 남깁니다.
마지막 항목은 GPU 위에서 공기 흐름을 실시간으로 풀어 제어를 검증합니다.
프로젝트 이름, 완료 연도, 사용 기술을 함께 적었습니다.
마지막 ACS는 GPU로 공기 흐름을 실시간 계산해 공조 제어를 검증하는 시스템입니다.
</p>
</div>
@ -336,8 +336,8 @@
<div class="wrap company-grid">
<div class="section-intro">
<p class="eyebrow">Company record</p>
<h2 id="companyHeading">엄격한 검수 기준의 현장과 함께해 왔습니다</h2>
<p>대학, 공공기관, 대기업 설비 부문처럼 운영 중단의 비용이 큰 현장이 주 무대입니다.</p>
<h2 id="companyHeading">대학·공공기관·대기업과 일해 왔습니다</h2>
<p>운영이 멈추면 손실이 큰 대학, 공공기관, 대기업 설비 부문의 프로젝트를 주로 맡아 왔습니다.</p>
</div>
<ul class="partners" aria-label="함께 일한 곳">
@ -370,7 +370,7 @@
<span>정규 공고 마감</span>
</summary>
<div class="career-body">
<p>닫힌 공고를 열려 있는 것처럼 보이지 않게 상태를 그대로 적습니다.</p>
<p>지금 모집 중인 정규 공고는 없습니다. 아래는 최근 마감된 공고입니다.</p>
<ul class="jobs">
<li><strong>시니어 소프트웨어 엔지니어</strong><span>산업용 소프트웨어 · C++ / C# / Python · PLC · HMI · SCADA</span><em>마감</em></li>
<li><strong>DevOps 엔지니어</strong><span>컨테이너 · 오케스트레이션 · CI/CD · IaC</span><em>마감</em></li>
@ -387,16 +387,16 @@
<section class="section contact" id="contact" aria-labelledby="contactHeading">
<div class="wrap contact-grid">
<div>
<p class="eyebrow">Start a project</p>
<h2 id="contactHeading">다음 현장을<br />함께 설계하겠습니다</h2>
<p class="eyebrow">문의</p>
<h2 id="contactHeading">프로젝트 상담은<br />메일로 받습니다</h2>
</div>
<div class="contact-main">
<p>가상현실, 산업 데이터, 운영 자동화가 실제 현장에서 돌아가야 한다면 지금 이야기할 수 있습니다.</p>
<p>VR 교육, 산업 데이터 수집, 운영 자동화 프로젝트를 검토 중이라면 메일이나 전화로 연락해 주세요.</p>
<a class="contact-mail" href="mailto:hello@twentyoz.kr?subject=%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%20%EB%AC%B8%EC%9D%98">hello@twentyoz.kr</a>
<dl class="contact-list">
<div><dt>Address</dt><dd>경기도 화성시 동탄첨단산업1로 27, A909호</dd></div>
<div><dt>Telephone</dt><dd><a href="tel:+8207043531190">070-4353-1190</a></dd></div>
<div><dt>Founded</dt><dd>2020년 1월</dd></div>
<div><dt>주소</dt><dd>경기도 화성시 동탄첨단산업1로 27, A909호</dd></div>
<div><dt>전화</dt><dd><a href="tel:+8207043531190">070-4353-1190</a></dd></div>
<div><dt>설립</dt><dd>2020년 1월</dd></div>
</dl>
</div>
</div>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 495 KiB

After

Width:  |  Height:  |  Size: 477 KiB

Before After
Before After

View file

@ -14,8 +14,8 @@
<meta name="theme-color" content="#e9e7e2" media="(prefers-color-scheme: light)" />
<link rel="preload" href="./assets/pretendard-twentyoz.woff2" as="font" type="font/woff2" crossorigin />
<link rel="stylesheet" href="./styles/tokens.css?v=20260912all" />
<link rel="stylesheet" href="./styles/main.css?v=20260912all" />
<link rel="stylesheet" href="./styles/catalog.css?v=20260912all" />
<link rel="stylesheet" href="./styles/main.css?v=20261006" />
<link rel="stylesheet" href="./styles/catalog.css?v=20261006" />
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%23151616'/%3E%3Ccircle cx='16' cy='16' r='7' fill='none' stroke='%23F6F4EF' stroke-width='2'/%3E%3Cpath d='M16 5v22M5 16h22' stroke='%23B9362B'/%3E%3C/svg%3E" />
</head>
<body class="catalog-page">
@ -28,7 +28,7 @@
<nav class="nav" aria-label="제품 상세 탐색">
<a href="#viven">VIVEN</a><a href="#edubill">EduBill</a><a href="#xd-hub">XD Hub</a><a href="#xd-works">XD Works</a>
</nav>
<p class="head-meta">PRODUCT SYSTEMS · 04</p>
<p class="head-meta">자체 제품 4종</p>
</div>
</header>
@ -36,8 +36,8 @@
<section class="catalog-hero" aria-labelledby="catalogHeading">
<div class="wrap catalog-hero-grid">
<div>
<p class="eyebrow">Self IP · Product catalog</p>
<h1 id="catalogHeading">네 개의 시스템</h1>
<p class="eyebrow">자체 개발 제품</p>
<h1 id="catalogHeading">제품 4종</h1>
</div>
<p class="catalog-lede">
교육과 훈련, 공공 AI 도입, 산업 데이터 수집, 시설 운영 자동화까지 각 제품의 기능과 기술 사양을 공개합니다.
@ -59,12 +59,12 @@
<p class="specimen-summary">최대 100명이 VR·PC·모바일에서 함께 참여하는 교육 특화 메타버스 플랫폼입니다.</p>
</header>
<dl class="vital-grid">
<div><dt>Type</dt><dd>Self IP / Platform</dd></div><div><dt>Category</dt><dd>VR 교육·훈련</dd></div>
<div><dt>Build cycle</dt><dd>2021 – 현재</dd></div><div><dt>Maturity</dt><dd>TRL 9</dd></div>
<div><dt>유형</dt><dd>Self IP / Platform</dd></div><div><dt>분류</dt><dd>VR 교육·훈련</dd></div>
<div><dt>개발 기간</dt><dd>2021 – 현재</dd></div><div><dt>기술 성숙도</dt><dd>TRL 9</dd></div>
</dl>
<div class="detail-grid">
<section aria-labelledby="vivenCapabilities">
<p class="detail-label">Capability matrix</p><h3 class="sr-only" id="vivenCapabilities">VIVEN 주요 기능</h3>
<p class="detail-label">주요 기능</p><h3 class="sr-only" id="vivenCapabilities">VIVEN 주요 기능</h3>
<ol class="capability-list">
<li><span>C–01</span><strong>실시간 협업</strong><p>단일 가상 공간에서 최대 100명의 교육과 훈련을 지원합니다.</p></li>
<li><span>C–02</span><strong>멀티 디바이스</strong><p>VR 헤드셋, PC, iOS와 Android 환경을 하나의 세션으로 연결합니다.</p></li>
@ -73,18 +73,18 @@
</ol>
</section>
<aside class="technical-panel" aria-label="VIVEN 기술과 사양">
<p class="detail-label">Technology lineage</p>
<p class="detail-label">기술 스택</p>
<ul class="stack-list"><li>Unity3D</li><li>WebXR</li><li>MediaPipe</li><li>Socket.IO</li><li>Spring Boot</li></ul>
<dl class="spec-list">
<div><dt>Devices</dt><dd>Oculus Quest, HTC Vive, PC, iOS·Android</dd></div>
<div><dt>Minimum</dt><dd>Windows 10 · Intel i5 · 8GB RAM · GTX 1060</dd></div>
<div><dt>Concurrency</dt><dd>단일 공간 최대 100명</dd></div>
<div><dt>Languages</dt><dd>한국어 · 영어</dd></div>
<div><dt>지원 기기</dt><dd>Oculus Quest, HTC Vive, PC, iOS·Android</dd></div>
<div><dt>최소 사양</dt><dd>Windows 10 · Intel i5 · 8GB RAM · GTX 1060</dd></div>
<div><dt>동시 접속</dt><dd>단일 공간 최대 100명</dd></div>
<div><dt>지원 언어</dt><dd>한국어 · 영어</dd></div>
</dl>
</aside>
</div>
<section class="operation-flow" aria-label="VIVEN 운영 흐름">
<p class="detail-label">Operating sequence</p>
<p class="detail-label">운영 흐름</p>
<ol><li data-step="01"><strong>시나리오 구성</strong><span>교육 목적에 맞는 가상 공간과 과정을 설계합니다.</span></li><li data-step="02"><strong>멀티 디바이스 접속</strong><span>VR·PC·모바일 사용자를 같은 세션으로 연결합니다.</span></li><li data-step="03"><strong>실시간 참여</strong><span>협업, 공간음향, 모션캡처를 동기화합니다.</span></li><li data-step="04"><strong>성과 확인</strong><span>활동 결과를 분석하고 리포트로 제공합니다.</span></li></ol>
</section>
<p class="specimen-action"><a class="button" href="mailto:hello@twentyoz.kr?subject=VIVEN%20%EB%8F%84%EC%9E%85%20%EB%AC%B8%EC%9D%98">VIVEN 도입 문의</a></p>
@ -97,9 +97,9 @@
<p class="specimen-code">V–02 / PUBLIC AI</p><h2 id="edubillHeading">EduBill</h2>
<p class="specimen-summary">공공기관과 교육기관이 해외 AI 서비스를 원화 결제와 세금계산서로 도입하도록 지원합니다.</p>
</header>
<dl class="vital-grid"><div><dt>Type</dt><dd>Self IP / SaaS</dd></div><div><dt>Category</dt><dd>EdTech 구독 관리</dd></div><div><dt>Build cycle</dt><dd>2024 – 현재</dd></div><div><dt>Maturity</dt><dd>TRL 8</dd></div></dl>
<dl class="vital-grid"><div><dt>유형</dt><dd>Self IP / SaaS</dd></div><div><dt>분류</dt><dd>EdTech 구독 관리</dd></div><div><dt>개발 기간</dt><dd>2024 – 현재</dd></div><div><dt>기술 성숙도</dt><dd>TRL 8</dd></div></dl>
<div class="detail-grid">
<section aria-labelledby="edubillCapabilities"><p class="detail-label">Capability matrix</p><h3 class="sr-only" id="edubillCapabilities">EduBill 주요 기능</h3>
<section aria-labelledby="edubillCapabilities"><p class="detail-label">주요 기능</p><h3 class="sr-only" id="edubillCapabilities">EduBill 주요 기능</h3>
<ol class="capability-list">
<li><span>C–01</span><strong>원화 결제</strong><p>해외 AI 서비스 비용을 원화로 결제하고 세금계산서를 발행합니다.</p></li>
<li><span>C–02</span><strong>통합 라이선스</strong><p>ChatGPT, Claude, Gemini 등 여러 서비스의 라이선스를 함께 관리합니다.</p></li>
@ -107,12 +107,12 @@
<li><span>C–04</span><strong>일괄 배정</strong><p>기관, 부서, 사용자 단위로 라이선스를 배정하고 회수합니다.</p></li>
</ol>
</section>
<aside class="technical-panel" aria-label="EduBill 기술과 사양"><p class="detail-label">Technology lineage</p>
<aside class="technical-panel" aria-label="EduBill 기술과 사양"><p class="detail-label">기술 스택</p>
<ul class="stack-list"><li>Next.js</li><li>TypeScript</li><li>Supabase</li><li>PostgreSQL</li><li>Cloudflare Workers</li></ul>
<dl class="spec-list"><div><dt>Services</dt><dd>ChatGPT · Claude · Gemini 외</dd></div><div><dt>Audience</dt><dd>공공기관 · 대학 · 초중고 · 기업</dd></div><div><dt>Payment</dt><dd>원화 · 세금계산서</dd></div><div><dt>Management</dt><dd>기관 · 부서 · 사용자</dd></div></dl>
<dl class="spec-list"><div><dt>지원 서비스</dt><dd>ChatGPT · Claude · Gemini 외</dd></div><div><dt>대상</dt><dd>공공기관 · 대학 · 초중고 · 기업</dd></div><div><dt>결제</dt><dd>원화 · 세금계산서</dd></div><div><dt>관리 단위</dt><dd>기관 · 부서 · 사용자</dd></div></dl>
</aside>
</div>
<section class="operation-flow" aria-label="EduBill 운영 흐름"><p class="detail-label">Operating sequence</p><ol><li data-step="01"><strong>수요 취합</strong><span>기관별 서비스와 사용자 수를 확인합니다.</span></li><li data-step="02"><strong>라이선스 배정</strong><span>부서와 사용자 단위로 접근 권한을 구성합니다.</span></li><li data-step="03"><strong>결제·증빙</strong><span>원화 결제와 세금계산서 발행을 처리합니다.</span></li><li data-step="04"><strong>갱신 관리</strong><span>만료 일정과 사용 현황을 함께 관리합니다.</span></li></ol></section>
<section class="operation-flow" aria-label="EduBill 운영 흐름"><p class="detail-label">운영 흐름</p><ol><li data-step="01"><strong>수요 취합</strong><span>기관별 서비스와 사용자 수를 확인합니다.</span></li><li data-step="02"><strong>라이선스 배정</strong><span>부서와 사용자 단위로 접근 권한을 구성합니다.</span></li><li data-step="03"><strong>결제·증빙</strong><span>원화 결제와 세금계산서 발행을 처리합니다.</span></li><li data-step="04"><strong>갱신 관리</strong><span>만료 일정과 사용 현황을 함께 관리합니다.</span></li></ol></section>
<p class="specimen-action"><a class="button" href="mailto:hello@twentyoz.kr?subject=EduBill%20%EB%8F%84%EC%9E%85%20%EB%AC%B8%EC%9D%98">EduBill 도입 문의</a></p>
</div>
</article>
@ -120,17 +120,17 @@
<article class="specimen" id="xd-hub" aria-labelledby="xdHubHeading">
<div class="wrap">
<header class="specimen-heading"><p class="specimen-code">V–03 / INDUSTRIAL DATA</p><h2 id="xdHubHeading">XD Hub</h2><p class="specimen-summary">최대 100만 포인트를 실시간 처리하고 여섯 산업 프로토콜을 통합하는 IoT 데이터 엔진입니다.</p></header>
<dl class="vital-grid"><div><dt>Type</dt><dd>Self IP / Engine</dd></div><div><dt>Category</dt><dd>산업용 IoT</dd></div><div><dt>Build cycle</dt><dd>2022 – 현재</dd></div><div><dt>Maturity</dt><dd>TRL 8</dd></div></dl>
<dl class="vital-grid"><div><dt>유형</dt><dd>Self IP / Engine</dd></div><div><dt>분류</dt><dd>산업용 IoT</dd></div><div><dt>개발 기간</dt><dd>2022 – 현재</dd></div><div><dt>기술 성숙도</dt><dd>TRL 8</dd></div></dl>
<div class="detail-grid">
<section aria-labelledby="xdHubCapabilities"><p class="detail-label">Capability matrix</p><h3 class="sr-only" id="xdHubCapabilities">XD Hub 주요 기능</h3><ol class="capability-list">
<section aria-labelledby="xdHubCapabilities"><p class="detail-label">주요 기능</p><h3 class="sr-only" id="xdHubCapabilities">XD Hub 주요 기능</h3><ol class="capability-list">
<li><span>C–01</span><strong>멀티 프로토콜</strong><p>Modbus, OPC UA, SNMP, BACnet, MQTT, REST를 한 엔진으로 수집합니다.</p></li>
<li><span>C–02</span><strong>히스토리안</strong><p>실시간 데이터를 시계열 저장소에 자동 보관하고 조회합니다.</p></li>
<li><span>C–03</span><strong>Web HMI</strong><p>SCADA 화면을 웹에서 구성하고 현장 상태를 시각화합니다.</p></li>
<li><span>C–04</span><strong>하이브리드 배포</strong><p>엣지와 클라우드 환경을 현장 조건에 맞게 함께 구성합니다.</p></li>
</ol></section>
<aside class="technical-panel" aria-label="XD Hub 기술과 사양"><p class="detail-label">Technology lineage</p><ul class="stack-list"><li>Java Spring Boot</li><li>Netty</li><li>TimescaleDB</li><li>Redis</li><li>Caffeine</li></ul><dl class="spec-list"><div><dt>Points</dt><dd>최대 1,000,000개</dd></div><div><dt>Protocols</dt><dd>Modbus · OPC UA · SNMP · BACnet · MQTT · REST</dd></div><div><dt>Storage</dt><dd>TimescaleDB · Redis</dd></div><div><dt>Domains</dt><dd>데이터센터 · 제조 · 발전소 · 빌딩</dd></div></dl></aside>
<aside class="technical-panel" aria-label="XD Hub 기술과 사양"><p class="detail-label">기술 스택</p><ul class="stack-list"><li>Java Spring Boot</li><li>Netty</li><li>TimescaleDB</li><li>Redis</li><li>Caffeine</li></ul><dl class="spec-list"><div><dt>처리 포인트</dt><dd>최대 1,000,000개</dd></div><div><dt>프로토콜</dt><dd>Modbus · OPC UA · SNMP · BACnet · MQTT · REST</dd></div><div><dt>저장소</dt><dd>TimescaleDB · Redis</dd></div><div><dt>적용 분야</dt><dd>데이터센터 · 제조 · 발전소 · 빌딩</dd></div></dl></aside>
</div>
<section class="operation-flow" aria-label="XD Hub 운영 흐름"><p class="detail-label">Operating sequence</p><ol><li data-step="01"><strong>프로토콜 연결</strong><span>서로 다른 설비 통신 규격을 게이트웨이에 연결합니다.</span></li><li data-step="02"><strong>수집·전처리</strong><span>실시간 값을 정규화하고 품질을 확인합니다.</span></li><li data-step="03"><strong>시계열 저장</strong><span>히스토리안과 캐시에 운영 데이터를 보관합니다.</span></li><li data-step="04"><strong>전송·시각화</strong><span>운영 애플리케이션과 Web HMI에 데이터를 제공합니다.</span></li></ol></section>
<section class="operation-flow" aria-label="XD Hub 운영 흐름"><p class="detail-label">운영 흐름</p><ol><li data-step="01"><strong>프로토콜 연결</strong><span>서로 다른 설비 통신 규격을 게이트웨이에 연결합니다.</span></li><li data-step="02"><strong>수집·전처리</strong><span>실시간 값을 정규화하고 품질을 확인합니다.</span></li><li data-step="03"><strong>시계열 저장</strong><span>히스토리안과 캐시에 운영 데이터를 보관합니다.</span></li><li data-step="04"><strong>전송·시각화</strong><span>운영 애플리케이션과 Web HMI에 데이터를 제공합니다.</span></li></ol></section>
<p class="specimen-action"><a class="button" href="mailto:hello@twentyoz.kr?subject=XD%20Hub%20%EB%8F%84%EC%9E%85%20%EB%AC%B8%EC%9D%98">XD Hub 도입 문의</a></p>
</div>
</article>
@ -138,17 +138,17 @@
<article class="specimen" id="xd-works" aria-labelledby="xdWorksHeading">
<div class="wrap">
<header class="specimen-heading"><p class="specimen-code">V–04 / OPERATIONS</p><h2 id="xdWorksHeading">XD Works</h2><p class="specimen-summary">XD Hub의 IoT 데이터를 기반으로 데이터센터와 시설의 운영, 점검, 과금을 자동화합니다.</p></header>
<dl class="vital-grid"><div><dt>Type</dt><dd>Self IP / Application</dd></div><div><dt>Category</dt><dd>DCIM · BEMS · FM</dd></div><div><dt>Build cycle</dt><dd>2023 – 현재</dd></div><div><dt>Maturity</dt><dd>TRL 8</dd></div></dl>
<dl class="vital-grid"><div><dt>유형</dt><dd>Self IP / Application</dd></div><div><dt>분류</dt><dd>DCIM · BEMS · FM</dd></div><div><dt>개발 기간</dt><dd>2023 – 현재</dd></div><div><dt>기술 성숙도</dt><dd>TRL 8</dd></div></dl>
<div class="detail-grid">
<section aria-labelledby="xdWorksCapabilities"><p class="detail-label">Capability matrix</p><h3 class="sr-only" id="xdWorksCapabilities">XD Works 주요 기능</h3><ol class="capability-list">
<section aria-labelledby="xdWorksCapabilities"><p class="detail-label">주요 기능</p><h3 class="sr-only" id="xdWorksCapabilities">XD Works 주요 기능</h3><ol class="capability-list">
<li><span>C–01</span><strong>상면·계약·청구</strong><p>데이터센터 상면과 고객 계약, 사용량 기반 청구를 통합 관리합니다.</p></li>
<li><span>C–02</span><strong>에너지 분석</strong><p>BEMS 데이터를 분석하고 PUE를 자동 산정합니다.</p></li>
<li><span>C–03</span><strong>시설물 점검</strong><p>정기 점검과 유지보수 작업의 책임과 이력을 관리합니다.</p></li>
<li><span>C–04</span><strong>다채널 알림</strong><p>SMS, 알림톡, 이메일로 운영 이상과 업무 일정을 전달합니다.</p></li>
</ol></section>
<aside class="technical-panel" aria-label="XD Works 기술과 사양"><p class="detail-label">Technology lineage</p><ul class="stack-list"><li>Spring Boot</li><li>NestJS</li><li>TypeScript</li><li>PostgreSQL</li><li>Vue 3</li></ul><dl class="spec-list"><div><dt>Domains</dt><dd>DCIM · BEMS · FM</dd></div><div><dt>Billing</dt><dd>다통화 · 다과금 정책</dd></div><div><dt>Alerts</dt><dd>SMS · 알림톡 · 이메일</dd></div><div><dt>Audience</dt><dd>데이터센터 · 빌딩 · 공장 · 발전소</dd></div></dl></aside>
<aside class="technical-panel" aria-label="XD Works 기술과 사양"><p class="detail-label">기술 스택</p><ul class="stack-list"><li>Spring Boot</li><li>NestJS</li><li>TypeScript</li><li>PostgreSQL</li><li>Vue 3</li></ul><dl class="spec-list"><div><dt>적용 분야</dt><dd>DCIM · BEMS · FM</dd></div><div><dt>과금</dt><dd>다통화 · 다과금 정책</dd></div><div><dt>알림</dt><dd>SMS · 알림톡 · 이메일</dd></div><div><dt>대상</dt><dd>데이터센터 · 빌딩 · 공장 · 발전소</dd></div></dl></aside>
</div>
<section class="operation-flow" aria-label="XD Works 운영 흐름"><p class="detail-label">Operating sequence</p><ol><li data-step="01"><strong>자산·계약 구성</strong><span>공간, 설비, 고객, 계약 정보를 연결합니다.</span></li><li data-step="02"><strong>실시간 운영</strong><span>XD Hub의 계측 데이터를 운영 화면에 반영합니다.</span></li><li data-step="03"><strong>점검·분석</strong><span>유지보수와 에너지 성과를 같은 흐름에서 관리합니다.</span></li><li data-step="04"><strong>과금·알림</strong><span>사용량을 계산하고 청구서와 운영 알림을 발행합니다.</span></li></ol></section>
<section class="operation-flow" aria-label="XD Works 운영 흐름"><p class="detail-label">운영 흐름</p><ol><li data-step="01"><strong>자산·계약 구성</strong><span>공간, 설비, 고객, 계약 정보를 연결합니다.</span></li><li data-step="02"><strong>실시간 운영</strong><span>XD Hub의 계측 데이터를 운영 화면에 반영합니다.</span></li><li data-step="03"><strong>점검·분석</strong><span>유지보수와 에너지 성과를 같은 흐름에서 관리합니다.</span></li><li data-step="04"><strong>과금·알림</strong><span>사용량을 계산하고 청구서와 운영 알림을 발행합니다.</span></li></ol></section>
<p class="specimen-action"><a class="button" href="mailto:hello@twentyoz.kr?subject=XD%20Works%20%EB%8F%84%EC%9E%85%20%EB%AC%B8%EC%9D%98">XD Works 도입 문의</a></p>
</div>
</article>
@ -156,6 +156,6 @@
<p class="wrap catalog-source">제품 정보는 2026년 8월 24일 기준 <a href="https://twentyoz.kr/" rel="noopener noreferrer">트웬티온스 공식 공개 자료</a>를 바탕으로 구성했습니다.</p>
</main>
<footer class="site-foot"><div class="wrap foot-grid"><p>TWENTYOZ · 트웬티온스</p><p>Product systems · Technical specifications</p><p>© 2020–2026 TWENTYOZ. All rights reserved.</p></div></footer>
<footer class="site-foot"><div class="wrap foot-grid"><p>TWENTYOZ · 트웬티온스</p><p>제품 기능과 기술 사양</p><p>© 2020–2026 TWENTYOZ. All rights reserved.</p></div></footer>
</body>
</html>

View file

@ -12,7 +12,8 @@
min-height: 76svh;
display: grid;
align-items: end;
padding-block: calc(var(--header-h) + var(--space-8)) var(--space-7);
/* 상단 바가 문서 흐름에 있으므로 헤더 높이만큼 비워 두지 않는다(2026-10-06). */
padding-block: var(--space-8) var(--space-7);
border-block-end: var(--hairline) solid var(--line-strong);
}

View file

@ -165,12 +165,12 @@ button[hidden] {
translate: var(--space-1) calc(var(--space-1) * -1);
}
/* Header */
/* Header — 히어로 위에 띄우지 않고 문서 흐름에 둔다(2026-10-06). 오버레이 바는
19종 중 다수가 쓰던 구성이라 일반 상단 바로 바꿨다. 히어로 높이·3D 캔버스는 그대로다. */
.site-head {
position: absolute;
inset-block-start: 0;
inset-inline: 0;
position: relative;
z-index: 20;
background: var(--page);
color: var(--ink);
}
@ -351,7 +351,7 @@ button[hidden] {
display: grid;
grid-template-rows: minmax(0, 1fr) auto;
gap: var(--space-5);
padding-block: calc(var(--header-h) + var(--space-6)) var(--space-4);
padding-block: var(--space-6) var(--space-4);
}
.hero-copy {
@ -1274,10 +1274,6 @@ button[hidden] {
/* Mobile */
@media (max-width: 43rem) {
.site-head {
position: relative;
}
.head-inner {
min-height: auto;
grid-template-columns: 1fr;
@ -1613,7 +1609,7 @@ button[hidden] {
}
.hero-grid {
padding-block: calc(var(--header-h) + var(--space-5)) var(--space-3);
padding-block: var(--space-5) var(--space-3);
gap: var(--space-3);
}