DSDesignSkill
|

/템플릿/WEBIS Cortex — 문서 이해 AI 플랫폼

새 창 ↗

컨테이너 폭 그대로 · sandbox 미리보기

설명

AI 스타트업을 위한 영문 다크 프리미엄 랜딩 템플릿입니다. 배경 #0f0a1e 위에 퍼플 라디얼 글로우와 블러 오브를 깔고, 그라디언트 1px 보더(.edge)와 반투명 유리 카드(.glass) 두 층위로 표면을 나눠 14개 섹션의 위계를 만들었습니다. 히어로 오른쪽에는 문서 썸네일 위를 훑고 지나가는 스캔 라인과 추출 필드·페이지 인용 칩을 담은 유리 패널을 띄워, 제품이 무엇을 하는지 카피보다 먼저 보이게 했습니다. 넓고 기하학적인 Syne는 제목 전용으로 두고 본문은 Archivo로 받아 가독성을 지켰으며, Syne의 넓은 자폭 때문에 h1은 뷰포트별로 30~48px 사이를 오가도록 끊어 390px부터 1920px까지 항상 2줄로 떨어지게 맞췄습니다. 벤치마크 표·4단계 워크플로·파이프라인 다이어그램·그라디언트 플레이스홀더 갤러리·날짜별 연구 노트·요금 3단·아코디언·2열 신청 폼으로 형식을 섞어 다크 화면이 단조로워지지 않게 했습니다. 톤은 미래적이되 과장하지 않아, 수치마다 측정 조건과 "샘플 데이터" 고지를 함께 답니다. v1.1.0에서 밀도를 계기판 쪽으로 끌어올려, 같은 크기 카드가 3열로 반복되던 구간을 크기가 다른 벤토와 비대칭 2열로 바꾸고 섹션 여백을 4/8px 그리드로 조였습니다. 지표·표·스파크라인이 한 화면에 같이 잡히며, 수치와 식별자는 IBM Plex Mono의 tabular-nums로 자릿수를 맞춥니다.

섹션 구성

  1. 01헤더 (스티키 글래스)
  2. 02히어로 (라디얼 글로우 + 스캔 라인 추출 프리뷰 + 4칸 계기판 스트립)
  3. 03고객사 로고 스트립
  4. 04문제 정의 — 데모와 실제 아카이브의 간극
  5. 05플랫폼 기능 6종 (4:2 벤토 + 구조 복원 표)
  6. 06벤치마크 표 + 지표 카드 (비대칭 2열, 스파크라인)
  7. 074단계 워크플로 타임라인
  8. 08배포 방식 — 스플릿 + 파이프라인 다이어그램
  9. 09보안·컴플라이언스 6종 (2:1:1 벤토) + 리전 표
  10. 10활용 사례 4종 (그라디언트 플레이스홀더 갤러리)
  11. 11연구 노트 (날짜별 리스트)
  12. 12고객 후기 (대표 인용 + 압축 2종)
  13. 13요금제 3단
  14. 14FAQ 아코디언
  15. 15신청 폼 + 진행 절차
  16. 16푸터

변경 이력

v1.0.02026-07-31

최초 등록

v1.1.02026-07-31

ui-craft-dense-dashboard 규격 적용 — 균일 3열 카드 해체(벤토·비대칭), 섹션 여백 4/8px 그리드로 압축, 수치 모노/tabular-nums, 스파크라인·계기판 스트립 추가

v1.1.02026-07-31

ui-craft-dense-dashboard (VISUAL_DENSITY 9) 규격 적용 — 4/8px 그리드로 조여 콘텐츠 타입을 섞고 균일 3열 카드 행을 해체