HorizonX 문서

사용 방법

HorizonX란?

작동 방식

세 단계면 충분합니다. 두 번째 단계는 형식에 따라 달라집니다.

형식: Figma와 코드

모든 레이어가 모든 형식으로 제공되지는 않습니다. Figma 전용도 있고, 코드 전용도 있으며, 두 가지를 함께 제공하는 경우도 있습니다. 각 에셋 페이지에 정확한 형식이 먼저 표시되므로 무엇을 받게 되는지 항상 알 수 있습니다.

어떤 AI 모델을 기준으로 만드나요?

라이브러리의 세 가지 구성

템플릿

전체 페이지와 단독 히어로입니다. 처음부터 끝까지 수정해 쓸 수 있는 완전한 출발점이며, 화면 하나만 가져다 쓸 수도 있습니다.

섹션

슬라이더, 기능 그리드, 요금표, FAQ, 폼처럼 독립적으로 작동하는 블록입니다. 프로젝트에 바로 넣거나 어떻게 만들었는지 살펴보세요.

컴포넌트

카드, 내비게이션, 버튼, 마이크로 인터랙션 같은 작은 요소입니다. 더 큰 레이아웃을 이루는 기본 구성 요소입니다.

에디터: 직접 만드는 공간

Tools: 직접 조정하는 인터랙티브 컴포넌트

텍스처: 내 이미지와 영상을 새로운 질감으로

Shaders: 움직이는 색, 빛, 모션

Mockups: 장면에 디자인 배치하기

작업물 내보내기

내보내기 옵션은 편집기마다 다릅니다. 컴포넌트와 셰이더는 코드를 제공하므로 프레임워크, Figma 복사, 프롬프트를 선택할 수 있습니다. 텍스처는 완성된 파일을 제공합니다. 목업은 PNG나 JPG 이미지, MP4 동영상, HTML 임베드로 내보낼 수 있습니다. 내보내기는 ‘다운로드, 한도 및 초기화’에서 설명하는 편집기 한도에 계산됩니다.

Copy Prompt: 내 설정을 AI 도구에 전달하기

컴포넌트와 셰이더에서는 Export 옆에 Copy Prompt가 있습니다. 현재 설정을 쉬운 말로 정리해 Claude, Cursor, ChatGPT 등 AI 도구에 붙여 넣을 수 있습니다. Textures와 Mockups에는 대신 전용 내보내기 패널이 있습니다.

일부 에셋이 Figma 전용(또는 코드 전용)인 이유

저희는 각 작업을 가장 잘 살릴 수 있는 매체로 만듭니다. 시각적 디테일이 많은 디자인 중심 레이아웃은 Figma에서 가장 자연스러우므로 Figma로 제공합니다. 모션, 인터랙션, 3D처럼 코드 중심이거나 생성형인 작업은 HTML이 더 적합합니다. 모든 형식에 어설픈 버전을 억지로 맞추기보다, 각 레이어의 가치를 제대로 살리는 형식으로 제공합니다. 두 가지 이상의 형식으로 제공되는 경우도 있으며, 에셋 페이지에서 무엇을 받는지 정확히 확인할 수 있습니다.

일부 코드가 HTML로만 제공되는 이유

HTML은 특정 스택에 묶이지 않고 그 자체로 완결됩니다. 어디서나 열리고 읽기 쉬우며, React, Svelte, Vue 또는 일반 정적 호스팅으로 깔끔하게 옮길 수 있는 파일 하나입니다. HTML로 제공하면 프레임워크에 묶이지 않고 완성된 결과를 그대로 받을 수 있습니다. 실제로 사용하는 환경으로 옮기는 작업은 여러분이 직접 결정하면 됩니다. 서버 사이드 렌더링과 SEO가 필요하다면 원하는 프레임워크에 넣어 사용하세요.

영감용인가요, 실무용인가요?

둘 다입니다. 다만 현실적으로 말씀드리겠습니다. 완성도는 실무 수준입니다. 시니어 팀이 만든, 잘 다듬어진 실제 결과물입니다. 하지만 많은 레이어는 프로젝트에 영감을 주거나 빠르게 시작하도록 돕기 위한 것입니다. 어떤 상황에도 손대지 않고 그대로 넣을 수 있는 완제품은 아닙니다. 탄탄한 출발점으로 활용하고, 여러분만의 방향을 더하세요.

라이선스와 이용 범위

활성화된 구독이 있으면 별도 구매 없이 전체 라이브러리를 이용할 수 있습니다. HorizonX 제품은 상업용 라이선스로 제공되며, 개인, 고객, 상업용 프로젝트에서 자유롭게 사용하고 수정할 수 있습니다. 단, 원본 파일 자체를 재판매, 재배포하거나 재라이선스할 수는 없습니다. 오픈소스 팩은 원작자의 라이선스를 그대로 따르며, 해당 라이선스는 다운로드 파일에 포함되어 있습니다.

다운로드, 한도, 초기화

모든 플랜에서 라이브러리 전체를 이용할 수 있으며 둘러보기에는 제한이 없습니다. 아래 한도는 다운로드하거나 내보낼 때 적용됩니다. 라이브러리 다운로드는 두 개의 별도 한도를 사용하므로, 일반 다운로드가 많은 날에도 Premium 한도는 줄지 않습니다. 편집기에서 내보내기에는 별도의 한도가 있습니다.

알아 두면 좋은 점이 두 가지 더 있습니다. 이미 받은 에셋을 다시 다운로드해도 한도가 중복 차감되지 않으며, 여러 파일로 구성된 제품도 다운로드 1회로 계산됩니다. 각 Premium 에셋 페이지에서 이번 달에 남은 Premium 다운로드 수를 확인할 수 있습니다.

Tools, 텍스처, Shaders, Mockups 편집기에서 내보내기는 Library 다운로드 한도를 사용하지 않습니다. AI 코딩 에이전트가 MCP로 대신 다운로드한 Library 파일은 일반 다운로드로 계산됩니다.

가이드

AI로 Figma → 코드 만들기

HorizonX 레이어 중 상당수는 Figma 전용입니다. 완성도 높은 섹션 3~4개로 구성된 디자인이며 코드는 포함되어 있지 않습니다. Claude Code 같은 AI 코딩 에이전트를 Figma MCP로 Figma에 연결하면 이 디자인을 완전히 작동하는 웹사이트로 바꿀 수 있습니다. 방법은 다음과 같습니다.

I want you to replicate this Figma section in code with PIXEL-PERFECT fidelity.

SOURCE
- Figma: [PASTE URL WITH node-id]
- This is ONE section of a larger landing page. We will build the
  remaining sections later, reusing whatever you define here.

STACK
- [e.g. Astro + Tailwind / Next + CSS Modules / React + styled-components]
- Package manager: pnpm

PHASE 1: READ (do not write code yet)
1. Use the Figma MCP on the exact node:
   - get_design_context → structure + reference styles
   - get_variable_defs → real tokens (colors, typography, spacing, radii)
   - get_screenshot → reference image to compare against
   - get_metadata → node hierarchy if the section is complex
2. If a color, spacing or size does not come from the MCP, tell me
   instead of inventing it.

PHASE 2: ASSETS
- Images, photos, complex gradients, textures, videos, custom icons,
  logos, or anything else that cannot be reproduced 1:1 with pure CSS/SVG:
  STOP and ask me to attach it. List what you need (layer name + purpose).
- Pure CSS gradients / shadows / borders: reproduce them from the tokens.

PHASE 3: DESIGN SYSTEM
- Extract tokens into a single place (Tailwind config / CSS vars / theme):
  colors, typography, spacing, radii, shadows, breakpoints.
- Name them semantically (bg-surface, text-primary, etc.).
- Componentize reusable pieces (buttons, chips, headings, containers).

PHASE 4: BUILD
- Build ONLY this section using the tokens from Phase 3.
- Responsive: respect the design's breakpoints. If Figma only shows
  desktop, tell me and propose mobile behavior before coding.
- Semantic, accessible markup (headings, alt, aria).

PHASE 5: VERIFY
- Compare your result against the get_screenshot reference.
- Report remaining differences.
- Final visual sign-off is mine.

HTML 레이어 활용하기

HTML 레이어는 마크업, 스타일, 스크립트가 모두 담긴 파일 하나로, 어떤 브라우저에서든 열립니다. 최대한 잘 활용하는 방법을 소개합니다.

자주 묻는 질문