복사하고 요청하면 끝! AI로 3D 웹사이트 만드는 법

Three.js와 WebGL을 몰라도 시작할 수 있도록, ThreeUI의 사용법부터 AI 코딩 도구와 함께 활용하는 방법까지 차근차근 소개해요.

웹사이트에 움직이는 배경이나 입체적인 버튼을 넣고 싶어도, 막상 직접 만들려고 하면 코드가 어렵게 느껴져요. 특히 Three.js, WebGL, 셰이더처럼 생소한 단어가 등장하면 어디서부터 시작해야 할지 막막해지기도 해요.

이럴 때 살펴볼 만한 서비스가 ThreeUI예요.

ThreeUI는 3D 배경, 애니메이션 버튼, 인터랙티브 랜딩 페이지와 같은 웹 구성요소를 직접 체험하고 코드로 가져갈 수 있는 카탈로그예요. 여기에 AI 코딩 도구가 이해할 수 있는 프롬프트와 SKILL.md까지 제공한다는 점이 특징이에요.

다만 먼저 짚고 넘어갈 부분이 있어요.

ThreeUI 자체가 이미지를 만들어주는 생성형 AI 서비스는 아니에요. Three.js와 WebGL로 만들어진 웹 구성요소를 모아두고, 사람이 직접 사용하거나 AI 코딩 도구가 프로젝트에 적용하기 쉽게 정리해 둔 서비스에 가까워요.

쉽게 비유하면 다음과 같아요.

ThreeUI는 3D 웹 디자인 재료를 모아둔 라이브러리이고, AI 코딩 도구는 그 재료를 우리 프로젝트에 맞게 조립해주는 작업자예요.

ThreeUI에서는 무엇을 찾을 수 있나요?

ThreeUI의 Browse 화면에서는 다음과 같은 유형을 살펴볼 수 있어요.

완성된 랜딩 페이지

웹사이트의 첫 화면에 사용하는 Hero 영역

Three.js 기반 3D 장면

움직이는 배경 효과

버튼과 CTA

텍스트 애니메이션

갤러리, 토글, 로더와 같은 UI 요소

CSS 기반 인터랙션

모션 디자인과 섹션 템플릿

2026년 8월 22일 기준으로 Browse 화면에는 Community와 Pro 항목을 합쳐 220개의 결과가 표시돼요. 무료 항목은 Community component, 유료 항목은 PRO로 구분돼 있어요.

무료 오픈소스 저장소에는 50개의 상위 Community 구성요소와 164개의 무료 Browse 결과가 포함돼 있다고 안내되어 있어요. 자세한 구성은 ThreeUI Browse와 GitHub 저장소 안내에서 확인할 수 있어요.

초보자를 위한 용어 정리

ThreeUI를 사용하다 보면 몇 가지 낯선 단어가 보여요.

Three.js

웹브라우저 안에서 3D 그래픽을 보여주기 위한 자바스크립트 라이브러리예요.

WebGL

브라우저가 컴퓨터나 휴대폰의 그래픽 성능을 이용해 2D·3D 그래픽을 그릴 수 있도록 도와주는 기술이에요.

컴포넌트

버튼, 배경, 갤러리처럼 웹사이트에서 반복해서 사용할 수 있는 하나의 부품이에요.

Props

컴포넌트의 색상, 속도, 밝기, 모드 등을 바꾸는 설정값이에요.

npm

개발에 필요한 라이브러리를 설치하는 도구예요.

GitHub

프로그램의 소스 코드와 변경 기록을 공개하고 함께 관리하는 공간이에요.

프롬프트

AI에게 원하는 작업을 설명하는 요청문이에요.

SKILL.md

AI 코딩 도구가 특정 구성요소를 어떤 순서와 기준으로 구현해야 하는지 알려주는 작업 지침서예요.

MCP

AI가 외부 서비스의 자료와 도구를 직접 찾아 사용할 수 있게 연결해주는 규격이에요.

첫 번째 단계: 마음에 드는 구성요소 찾아보기

먼저 ThreeUI Browse에 접속해요.

화면 위쪽에는 Landing Pages, Hero, Three.js, Backgrounds, Buttons 등의 카테고리가 있어요. 원하는 카테고리를 선택하거나 검색창에 button, globe, background 같은 단어를 입력해 볼 수 있어요.

구성요소를 선택하면 상세 화면으로 이동해요. 여기서는 단순한 이미지가 아니라 실제로 움직이는 결과를 확인할 수 있어요.

상세 화면에서 확인할 만한 정보는 다음과 같아요.

Variants

Props

Runtime

Assets

Usage

Code

Skill.md

Copy Prompt

More export options 메뉴에서는 Copy Prompt, Copy Code, Copy SKILL.md를 선택할 수 있어요.

예시로 살펴보는 Predictive Arc

Predictive Arc는 움직이는 아치, 입자, 리본, 하프톤 장면을 제공하는 배경 컴포넌트예요.

상세 화면에서 다음 설정을 직접 바꿔볼 수 있어요.

Dark와 Light 모드

애니메이션 속도

색조

채도

밝기

8개의 디자인 변형

값을 조절하면 화면이 즉시 달라져요. 코드를 몰라도 원하는 느낌을 먼저 눈으로 찾을 수 있다는 점이 좋아요.

설정을 정한 다음 Usage 탭을 보면 다음과 같은 형태의 코드가 제공돼요.

import { PredictiveArcCanvas } from "@designcodeio/threeui";
import "@designcodeio/threeui/style.css";

export function Scene() {
  return (
    <div style={{ height: 480, overflow: "hidden" }}>
      <PredictiveArcCanvas
        mode="dark"
        speed={1}
        hue={0}
        saturation={1}
        brightness={1}
      />
    </div>
  );
}

이 코드가 어렵게 보여도 괜찮아요. 직접 작성하기보다 AI 코딩 도구에 전달하고, 현재 프로젝트에 맞게 적용해 달라고 요청하면 돼요.

가장 쉬운 방법: AI에게 설치와 적용을 부탁해요

ThreeUI Community 컴포넌트는 React 패키지로 설치할 수 있어요.

npm install @designcodeio/threeui

프로젝트의 시작 파일에는 공통 스타일을 한 번 불러와요.

import "@designcodeio/threeui/style.css";

그다음 원하는 컴포넌트를 불러와 사용해요.

import { PredictiveArcCanvas } from "@designcodeio/threeui";

ThreeUI의 공식 설치 안내에 따르면 React와 React DOM 18.2 이상, WebGL 또는 WebGL2를 지원하는 브라우저가 필요해요. 자세한 요구사항은 ThreeUI Installation에서 확인할 수 있어요.

코드를 직접 입력하기 어렵다면 AI 코딩 도구에 다음과 같이 요청해 보세요.

현재 React 프로젝트에 ThreeUI의 PredictiveArcCanvas를 적용해줘.

공식 패키지인 @designcodeio/threeui를 사용해줘.
공통 style.css는 애플리케이션 시작 파일에서 한 번만 불러와줘.

첫 화면의 배경으로 사용하되 다음 조건을 지켜줘.

- 현재 텍스트와 버튼은 배경 위에서 잘 보여야 해요.
- 배경 높이는 약 500px로 만들어줘.
- 모바일 화면에서도 레이아웃이 깨지지 않게 해줘.
- 움직임 줄이기 설정을 사용하는 사람을 고려해줘.
- 기존 디자인의 색상과 글꼴은 유지해줘.
- 적용 후 빌드 오류와 브라우저 콘솔 오류를 확인해줘.
- 변경한 파일과 설정값을 초보자도 이해할 수 있게 설명해줘.

좋은 AI 프롬프트에는 보통 다음 네 가지가 포함돼요.

어떤 프로젝트에, 무엇을, 어디에, 어떤 조건으로 적용할지 알려주세요.

“예쁘게 만들어줘”라고만 말하는 것보다 “첫 화면 배경으로 사용하고, 모바일과 접근성을 확인해줘”라고 구체적으로 요청하는 편이 훨씬 좋은 결과를 얻을 수 있어요.

Copy Prompt, Code, SKILL.md는 어떻게 다를까요?

세 가지 기능은 목적이 조금씩 달라요.

기능 추천 상황 Copy Prompt AI에게 원하는 디자인과 구현 방향을 빠르게 설명하고 싶을 때 Copy Code 코드를 직접 프로젝트에 가져오거나 AI에게 분석시킬 때 Copy SKILL.md AI 코딩 도구에 구현 순서, 기술 조건, 검증 기준까지 자세히 알려주고 싶을 때

AI 초보자라면 먼저 Usage 코드와 Copy Prompt를 사용하는 방법을 추천해요.

조금 더 복잡한 수정이 필요하다면 SKILL.md도 함께 전달해 보세요. ThreeUI의 SKILL.md에는 사용 기술, 필요한 소스 파일, 구현 순서, 반응형 확인, 애니메이션 정리, WebGL 오류 확인과 같은 내용이 정리돼 있어요.

예를 들어 AI에게 다음과 같이 말할 수 있어요.

아래 ThreeUI의 SKILL.md를 작업 지침으로 사용해줘.

먼저 현재 프로젝트의 구조를 확인하고 적용 계획을 알려줘.
원본 애니메이션 동작은 임의로 단순화하지 말아줘.
기존 프로젝트와 충돌하는 부분만 수정해줘.

작업이 끝나면 다음 항목을 확인해줘.

1. 데스크톱과 모바일 화면
2. 창 크기를 바꿨을 때의 동작
3. 애니메이션 리소스 정리 여부
4. 브라우저 콘솔 오류
5. 프로덕션 빌드

다만 SKILL.md만 복사하면 AI가 원본 소스에 접근하지 못하는 경우가 있어요. 이럴 때는 Usage 코드나 Code 탭의 파일, GitHub 저장소 주소를 함께 제공하는 것이 좋아요.

GitHub 저장소 전체를 실행하는 방법

특정 컴포넌트만 사용하는 것이 아니라 ThreeUI Community 전체를 로컬에서 살펴보고 싶다면 GitHub 저장소를 실행할 수 있어요.

컴퓨터에 Node.js와 Git이 준비되어 있다면 터미널에서 다음 명령어를 사용해요.

git clone <https://github.com/MengTo/threeui.git>
cd threeui
npm install
npm run dev

터미널에 표시되는 로컬 주소를 브라우저에서 열면 로그인 없이 Community 카탈로그를 실행할 수 있어요.

최종 배포용 빌드까지 점검하려면 다음 명령어를 사용해요.

npm run build

이 명령어는 타입 검사, 공개 범위 검사, 테스트와 Vite 빌드를 함께 실행하도록 구성돼 있어요. 저장소에는 Browse 화면뿐 아니라 검색, 테마, 반응형 화면, 라이브 렌더러, Props 조절 기능과 Community 소스가 포함돼 있어요. 자세한 내용은 GitHub README와 package.json에서 확인할 수 있어요.

개발 초보자라면 저장소 전체를 수정하는 것보다, 먼저 npm 패키지로 한 개의 컴포넌트만 적용해 보는 편이 쉬워요.

Pro와 MCP는 언제 사용하나요?

ThreeUI에는 무료 Community와 유료 Pro 영역이 함께 있어요.

Community 구성요소는 공개 GitHub 저장소와 npm 패키지로 사용할 수 있어요. 반면 Pro 구현 소스는 공개 npm 패키지에 포함되지 않아요. Pro 회원은 인증 과정을 거친 CLI 명령어로 소스를 내려받도록 안내돼 있어요.

npx @designcodeio/threeui-cli add cross-beam

Pro CLI는 Node.js 20 이상이 필요하고, 브라우저에서 로그인한 다음 사용 권한을 확인해요. 기존에 수정된 파일은 --force 옵션 없이는 덮어쓰지 않도록 설계돼 있어요. 자세한 내용은 ThreeUI Installation에서 확인할 수 있어요.

MCP는 AI 코딩 도구가 ThreeUI 카탈로그를 직접 검색하고 소스와 프롬프트를 불러오게 하는 고급 기능이에요.

{
  "mcpServers": {
    "threeui": {
      "type": "http",
      "url": "<https://threeui.com/api/mcp>"
    }
  }
}

MCP가 연결되면 지원하는 AI 도구가 다음 작업을 수행할 수 있어요.

이름이나 카테고리로 컴포넌트 검색하기

구성요소의 설명과 사용 방법 확인하기

소스 파일 불러오기

구성요소별 구현 프롬프트 가져오기

현재 ThreeUI의 원격 MCP는 로그인과 Pro 권한 확인이 필요한 기능으로 안내돼 있어요. 따라서 처음 시작할 때 반드시 설정할 필요는 없어요. Community 패키지와 Copy Prompt만으로 먼저 연습해도 충분해요. 자세한 연결 방식은 ThreeUI MCP 안내에서 확인할 수 있어요.

어떤 프로젝트에 활용하면 좋을까요?

ThreeUI는 다음과 같은 작업에 잘 어울려요.

포트폴리오 첫 화면에 움직이는 3D 배경을 넣을 때

제품이나 브랜드의 기술적인 분위기를 표현할 때

AI 서비스의 데이터 흐름이나 네트워크를 시각화할 때

평범한 버튼에 작은 인터랙션을 추가할 때

전시, 행사, 게임, 음악 프로젝트의 몰입감 있는 페이지를 만들 때

AI 코딩 도구로 빠르게 디자인 프로토타입을 만들 때

처음부터 완성된 랜딩 페이지 전체를 가져오기보다 버튼이나 배경처럼 작은 요소 하나부터 적용해 보는 것을 추천해요.

적용하기 전에 꼭 확인해 주세요

ThreeUI의 효과는 시각적으로 강한 만큼 몇 가지 주의할 점도 있어요.

1. 무료와 Pro를 구분해요

Browse 화면에서 PRO 표시가 있는 구성요소는 유료 권한이 필요해요. 무료 프로젝트를 만들고 있다면 Community 항목을 선택해요.

2. 애니메이션을 너무 많이 사용하지 않아요

여러 WebGL 장면을 한 페이지에서 동시에 실행하면 컴퓨터와 휴대폰의 그래픽 자원을 많이 사용할 수 있어요. 첫 화면에 핵심 효과 하나만 두고 나머지는 일반적인 HTML과 CSS로 구성하는 편이 좋아요.

3. 모바일에서 직접 확인해요

데스크톱에서는 부드럽게 작동해도 오래된 휴대폰에서는 느려질 수 있어요. 화면 크기뿐 아니라 성능과 배터리 사용량도 확인해 주세요.

4. 접근성을 함께 고려해요

3D 배경만으로 중요한 정보를 전달하면 안 돼요. 제목, 설명, 버튼과 같은 핵심 내용은 읽을 수 있는 HTML 요소로 제공하고, prefers-reduced-motion 설정도 고려해 주세요.

5. 외부 파일을 확인해요

일부 완성형 HTML 장면은 별도의 이미지, 글꼴, Three.js 파일이나 외부 CDN을 사용할 수 있어요. 패키지로 제공되는 전체 HTML 컴포넌트는 필요한 런타임 파일을 앱의 public 디렉터리로 복사하거나, 지원되는 경우 sourceUrl 또는 assetBaseUrl을 바꿔야 할 수 있어요. 자세한 내용은 GitHub README의 패키지 안내에서 확인할 수 있어요.

6. 라이선스를 확인해요

Community 애플리케이션 코드와 ThreeUI가 직접 제작한 Community 이미지·텍스처는 MIT 라이선스로 공개돼 있어요. 포함된 공개 글꼴은 SIL Open Font License를 사용해요.

다만 웹사이트에서 원격으로 불러오는 썸네일과 미리보기 영상은 저장소에 포함되지 않으며, 저장소의 MIT 라이선스 대상도 아니에요. 실제 서비스에 사용하기 전에는 코드뿐 아니라 이미지, 영상, 글꼴의 라이선스도 확인해야 해요. 자세한 범위는 에셋 라이선스 안내에서 확인할 수 있어요.

마치며

ThreeUI의 가장 큰 장점은 완성된 결과, 조절 가능한 설정, 사용 코드, 원본 소스와 AI용 지침을 한곳에서 확인할 수 있다는 점이에요.

AI 초보자라면 다음 순서로 시작해 보세요.

Browse에서 Community 구성요소를 하나 골라요.

Props를 조절하며 원하는 모습을 찾아요.

Usage 코드와 Copy Prompt를 복사해요.

AI 코딩 도구에 현재 프로젝트와 적용 위치를 알려줘요.

모바일, 접근성, 성능과 빌드를 확인해 달라고 요청해요.

결과가 마음에 들면 색상과 속도를 조금씩 수정해요.

중요한 것은 모든 코드를 이해한 다음 시작해야 한다고 생각하지 않는 거예요. 먼저 작은 구성요소 하나를 실행해 보고, AI에게 변경 내용을 설명해 달라고 요청해 보세요.

ThreeUI는 AI가 디자인을 대신 결정해주는 도구라기보다, 좋은 디자인 재료를 제공하고 AI가 그 재료를 정확하게 조립하도록 도와주는 도구예요. 사람은 목적과 분위기를 정하고, AI는 설치와 구현을 돕는 방식으로 활용할 때 가장 좋은 결과를 얻을 수 있어요.