AI 인프라 웹사이트 디자인

차분한 에이전트 런타임 랜딩 페이지

이 공식 번들 예시는 Halcyon을 장기간 실행되는 AI 에이전트를 위한 런타임으로 제시합니다. 작성된 헤드라인 “Calmer infrastructure for the agents already running your business,”는 인프라를 또 하나의 모델 인터페이스가 아니라 안정화 계층으로 규정합니다. 이어지는 페이지는 눈에 보이는 런타임, 지출, 작업, 감사 예시로 이러한 입장을 뒷받침합니다.

샘플 데이터로 구성한 인프라 스토리

이 페이지는 여러 기술적 주제를 하나의 마케팅 흐름에서 설명해야 하는 인프라 팀에 적합합니다. 문구는 더 안정적인 에이전트 운영이라는 포괄적인 제안에서 구체적인 기본 구성 요소로, 이어 SDK와 CLI를 통한 구현 접근 경로로 나아갑니다. 이러한 순서는 첫 화면을 문서 페이지처럼 만들지 않으면서도 기술 독자가 계속 읽을 이유를 제공합니다.

표시된 수치는 샘플 랜딩 콘텐츠의 일부입니다. 운영 개념을 구체적으로 보여 주는 디자인 방식은 설명하지만, Halcyon 서비스의 성능, 가동 시간, 가격 또는 연결된 백엔드 동작을 입증하지는 않습니다.

런타임 목업에서 영업 상담 제안까지

중앙에 배치된 플로팅 캡슐형 내비게이션이 Halcyon, Platform, Metrics, Docs, Changelog, Get started를 소개합니다. 히어로는 큰 헤드라인과 둥근 런타임 목업을 1.05fr/0.95fr로 나눕니다. 약간 더 넓은 텍스트 열이 핵심 제안을 전달하고, 중첩된 카드 외곽이 샘플 지표를 담는 별도의 시각적 공간을 만듭니다. 이를 통해 제안된 제품을 더 쉽게 상상할 수 있지만, 카드는 실제 운영의 증거가 아닙니다.

헤드라인은 큰 줄로 줄바꿈되며 “Calmer infrastructure”에서 “for the agents already running your business.”로 이어집니다. 후반 구절에 회색 처리를 적용해 제품 카테고리와 대상 사용자 사이에 시각적 전환을 만듭니다. 이러한 강조는 약속을 기억에 남게 하지만, 좁은 화면에서는 크기 때문에 세심한 반응형 처리가 필요합니다.

1. 런타임 목업으로 시작하기

   제품 설명으로 시작한 다음 런타임 패널을 옆에 배치하세요. 패널의 “research-agent / tier-3” 레이블, 상태 표시줄, 지출 카드, 작업 카드, 감사 항목은 인프라가 무엇을 구성하도록 설계되었는지 보여 줍니다.

2. 6개의 기본 구성 요소로 확장하기

   플랫폼 그리드는 identity, spend, audit, sandbox, routing, ergonomics라는 번호가 매겨진 카드 6개를 제시합니다. identity는 코드 예시가 있는 세로로 긴 셀을 차지하고, spend와 audit는 그 옆에 놓이며, 마지막 3개는 더 짧은 셀을 사용합니다. 원본 소개에는 “Five primitives”라고 쓰여 있지만 실제로는 6개를 표시합니다. 관찰된 구조인 카드 6개의 레이아웃을 유지하고, 이러한 불일치는 검증된 제품 분류가 아니라 샘플 문구로 취급하세요.

3. 하나의 액션으로 마무리하기

   마무리 패널은 어두운 배경으로 바뀌고 “Less duct tape between the model and the bill.”을 중앙에 배치합니다. 짧은 평가 및 가격 설명이 “Talk to an engineer”로 이어져, 여러 최종 행동을 놓고 경쟁하게 하는 대신 페이지의 마지막 행동을 하나로 모읍니다.

범위와 기능의 경계

Halcyon은 디자인만 구현한 랜딩 콘셉트입니다. 버튼에는 실제 업무를 처리하는 핸들러가 없으며, Platform 링크만 해당 섹션으로 이동합니다. Metrics, Docs, Changelog 링크의 대상 섹션은 없고 푸터 링크는 플레이스홀더입니다. 샘플 가동 시간, 지출, 작업 수, 지연 시간, 투자 유치, 보안 레이블은 서비스의 근거가 아닙니다. 움직이는 회사명 띠에 등장하는 이름은 고객 관계나 추천을 입증하지 않으며, SOC 2/ISO 27001 텍스트도 인증을 입증하지 않습니다. 콘솔 접속, 결제, 라우팅, 스토리지, 영업 상담 연결은 별도로 구현해야 합니다.

부드러운 인상은 작동하는 인프라 시스템이 아니라 실버 캔버스, Plus Jakarta Sans, 세이지색 포인트, 중첩된 둥근 외곽에서 비롯됩니다. CSS는 천천히 움직이는 메시 배경, 맥동하는 상태 점, 호버 시 일시 정지되는 연속 이동 회사명 띠를 추가합니다. IntersectionObserver는 섹션이 화면 안으로 들어오면 이를 드러냅니다. 동작 줄이기 규칙은 메시 배경의 움직임과 섹션 등장 효과를 비활성화하지만 상태 점의 맥동이나 마키는 비활성화하지 않습니다. 디자인을 재구성할 때는 이렇게 남아 있는 애니메이션도 고려하세요.

출처와 기여자 표기

OpenDesign은 Community 배포자입니다. 원본 문서는 부드러운 시각 디자인과 동작 지침의 출처로 Taste Skill by Leonxlnx를 명시합니다: https://github.com/Leonxlnx/taste-skill. 이 원출처 역할을 유지하되, 해당 개인이 이 예시를 직접 제작했다거나 OpenDesign이 기본 디자인 방향을 독자적으로 창작했다는 뜻으로 표현하지 마세요. 매니페스트는 번들 플러그인에 MIT를 선언하지만, 묘사된 모든 에셋에 대한 별도의 권리를 확립하지는 않습니다.