내 AI를 세계 최고의 UIUX 디자이너로 만드는 법 5가지

웹사이트 제작이 막막한 사람을 위한 실용가이드

웹사이트를 만들려고 하면 가장 먼저 막히는 지점이 있어요.

도대체 어떤 디자인으로 만들어야 하지?

이때 AI에게 “세련되고 예쁘게 만들어 줘”라고만 말하면 결과가 매번 달라져요. AI가 참고할 수 있는 구체적인 화면과 디자인 규칙, 바로 가져다 쓸 수 있는 UI, 움직임을 만드는 방법이 함께 필요해요.

웹사이트 제작을 4단계로 나누면 쉬워져요

레퍼런스를 찾고 → 디자인 규칙으로 정리하고 → UI를 만들고 → 움직임을 더한다.

1. Minimal Gallery: 미감 충만한 레퍼런스 찾기

Minimal Gallery 메인 페이지

어떤 사이트인지 알아봐요

Minimal Gallery는 아름답고 기능적인 웹사이트를 선별해 보여주는 디자인 영감 갤러리예요. About 페이지에 따르면 2013년부터 운영되고 있고, 창작 과정에 도움을 주는 웹 디자인 자료를 꾸준히 큐레이션하고 있어요.

이곳은 코드를 복사해서 바로 쓰는 UI 라이브러리가 아니에요. 대신 실제 웹사이트가 첫 화면을 어떻게 구성하는지, 글자와 이미지의 비율은 어떤지, 버튼은 어디에 두는지 관찰하게 해주는 곳이에요.

무엇이 좋은지 살펴봐요

상단에서 Websites, Templates, Tools 메뉴를 나눠 볼 수 있어요. Portfolio, Personal, Startup, One page, Agency, E-commerce, AI, Animation처럼 목적과 분위기에 맞는 태그도 제공해요.

각 카드에는 대표 화면, 사이트 이름, 게시 시점이 함께 보여요. 마음에 드는 사이트는 상세 페이지에서 더 살펴보고, 원래 웹사이트로 이동해 실제 인터랙션도 확인할 수 있어요. Bookmarks에 저장하거나 매주 발행되는 이메일 다이제스트를 구독하는 기능도 있어요.

초보자는 이렇게 사용해요

처음부터 모든 사이트를 구경하면 오히려 선택하기 어려워져요. 만들고 싶은 사이트의 종류를 먼저 정하고, 태그 하나만 골라서 시작하는 편이 좋아요.

예를 들어 포트폴리오를 만들고 싶다면 Portfolio나 Personal 태그를 먼저 열어봐요. 그다음 마음에 드는 사이트를 3~5개 정도 저장하고, 아래 항목을 비교해 봐요.

첫 화면의 높이가 얼마나 되는지 살펴봐요.

제목의 크기와 줄바꿈 방식을 비교해요.

버튼이 화면 어디에 놓여 있는지 확인해요.

이미지가 전체 화면을 차지하는지, 카드 안에 들어가는지 봐요.

스크롤할 때 어떤 순서로 정보가 등장하는지 살펴봐요.

이렇게 관찰한 내용을 “우리 사이트는 넓은 여백을 사용하고, 제목은 크게 두 줄로 보여 줘요”처럼 문장으로 바꾸면 다음 단계로 넘어가기 쉬워져요.

2. Refero Styles: AI로 그대로 복제 가능하게 하는 DESIGN.md 모음집

Refero Styles 메인 페이지

어떤 사이트인지 알아봐요

Refero Styles는 실제 제품 웹사이트에서 추출한 디자인 시스템을 DESIGN.md라는 문서로 보여주는 라이브러리예요. 홈페이지에서는 2,000개 이상의 AI-readable 디자인 시스템을 살펴볼 수 있다고 안내해요.

DESIGN.md는 색상을 어디에 쓰는지, 제목과 본문의 크기는 어떤지, 여백은 얼마나 두는지, 카드와 버튼은 어떤 인상을 주는지 같은 디자인 규칙을 AI가 읽을 수 있는 형태로 정리한 문서예요.

쉽게 말하면 Minimal Gallery가 “좋은 화면을 보는 곳”이라면, Refero Styles는 “그 화면의 분위기를 규칙으로 번역하는 곳”이에요.

무엇이 좋은지 살펴봐요

브랜드명, 분위기, 색상, 폰트, 카테고리로 스타일을 검색할 수 있어요. Trending, Popular, Newest 탭을 사용해서 인기 스타일이나 새로 추가된 스타일도 볼 수 있어요.

스타일 상세 페이지에서는 색상, 타이포그래피, 간격, 컴포넌트, 화면 밀도 같은 특징을 확인할 수 있어요. 같은 정보를 DESIGN.md, Tailwind v4, CSS Variables, Design Tokens 형태로 제공하는 스타일도 있어요.

Cursor, Claude Code, Codex, v0, Lovable 같은 AI 개발 도구에 참고 자료로 넣을 수 있다는 점도 장점이에요. Refero MCP도 제공하지만, 처음에는 웹에서 문서를 복사해 AI에게 붙여 넣는 방식만으로도 충분히 시작할 수 있어요.

초보자는 이렇게 사용해요

먼저 만들 화면의 목적을 정해요. 포트폴리오 첫 화면인지, 가격표인지, 관리자 대시보드인지 한 문장으로 정하면 검색어도 선명해져요.

검색창에 minimal, dark, editorial, saas 같은 단어를 넣고 스타일을 찾아봐요. 마음에 드는 카드 2~3개를 열어서 색상만 보지 말고 글자 크기, 여백, 카드 밀도, 버튼 모양까지 비교해요.

가장 가까운 스타일을 골랐다면 DESIGN.md 또는 Copy.md 내용을 AI 코딩 도구의 작업 맥락에 먼저 넣어요. 그다음 아래처럼 구체적인 요청을 이어 가면 돼요.

아래 DESIGN.md는 시각적 방향을 정하는 참고 자료로 사용해요.
색상 역할·타이포그래피·여백·컴포넌트 분위기만 가져와요.
우리 서비스는 초보 창작자를 위한 포트폴리오이고, 먼저 반응형 랜딩 페이지를 만들어 줘요.

결과를 확인한 뒤에는 “폰트 크기, 여백, 대비, 모바일 화면이 디자인 규칙과 맞는지 점검해 줘”라고 다시 요청해요. 디자인 방향을 한 번 정해 두면 AI가 작업할 때마다 전혀 다른 스타일로 흔들리는 일을 줄일 수 있어요.

3. Aceternity UI: 예쁜 UI? 여기서 갖다 쓰면 됨

Aceternity UI 메인 페이지

어떤 사이트인지 알아봐요

Aceternity UI는 React와 Next.js 프로젝트에 넣을 수 있는 UI 컴포넌트, 섹션, 블록, 템플릿을 모아 둔 곳이에요. 홈페이지는 React, Tailwind CSS, Motion으로 만든 200개 이상의 production-ready 컴포넌트·블록·템플릿을 제공한다고 안내해요.

일반적인 UI 라이브러리는 패키지를 설치하고 정해진 API를 사용하는 경우가 많아요. Aceternity UI는 컴포넌트의 코드를 직접 복사해 내 프로젝트에 넣고, 필요한 부분을 고치는 방식이 핵심이에요.

어떤 효과를 찾을 수 있어요?

Hero, Feature, Bento Grid, Pricing, FAQ, Navbar처럼 랜딩 페이지를 구성하는 블록을 찾을 수 있어요. Aurora Background, Background Beams, Spotlight, Sparkles 같은 배경 효과도 제공해요.

3D Card, Glare Card, Hover Card, Infinite Moving Cards 같은 카드 효과와 Text Reveal, Typewriter, Flip Words 같은 텍스트 애니메이션도 있어요. Parallax, Scroll Reveal, Timeline, Carousel, Modal, Tooltip, Sidebar, Form처럼 기능에 가까운 컴포넌트도 함께 제공해요.

초보자는 이렇게 사용해요

먼저 React 또는 Next.js 프로젝트를 준비해요. 새 Next.js 프로젝트는 아래처럼 시작할 수 있어요.

npx create-next-app@latest my-project
cd my-project
npm install -D tailwindcss postcss autoprefixer

그다음 Components에서 만들고 싶은 효과를 검색해요. 컴포넌트 상세 페이지에서 미리보기, 필요한 패키지, 코드 구조를 확인한 뒤 코드를 프로젝트의 컴포넌트 파일에 복사해요.

필요한 패키지와 Tailwind 설정을 추가하고, 텍스트·이미지·색상·크기·속도를 우리 서비스에 맞게 수정해요. 마지막에는 npm run dev로 실행해서 데스크톱과 모바일 화면을 모두 확인해요.

완성된 템플릿을 사용하는 경우에는 템플릿을 내려받아 압축을 풀고 npm install, npm run dev 순서로 실행하면 돼요.

4. Anime.js: 웹사이트에 움직임을 더하고 싶다면?

Anime.js 메인 페이지

어떤 사이트인지 알아봐요

Anime.js는 웹의 HTML 요소, CSS 속성, SVG, DOM 속성, JavaScript 객체를 움직이는 JavaScript 애니메이션 라이브러리예요. GitHub 저장소에는 MIT License가 표시되어 있어서 오픈 소스 프로젝트로 사용할 수 있어요.

Aceternity UI가 완성된 UI 효과를 가져오는 곳이라면, Anime.js는 움직임의 규칙을 직접 설계하는 엔진에 가까워요. 버튼이 커졌다 작아지는 효과, SVG 선이 그려지는 효과, 스크롤에 맞춰 장면이 전환되는 효과까지 만들 수 있어요.

무엇을 할 수 있어요?

animate()로 CSS 속성과 숫자 값을 움직일 수 있어요. 속성별 파라미터, 키프레임, easing을 적용하고, Timeline으로 여러 애니메이션의 순서와 시간을 조절할 수 있어요.

여러 요소가 순서대로 움직이게 만드는 Stagger, 스크롤 위치와 연결하는 Scroll Observer, SVG path morphing과 motion path도 지원해요. Draggable, spring, snap 같은 상호작용과 화면 방향에 따라 다른 움직임을 적용하는 Scope API도 제공해요.

초보자는 이렇게 시작해요

먼저 프로젝트 폴더에서 Anime.js를 설치해요.

npm i animejs

움직일 HTML 요소에 클래스를 붙여요.

<div class="box"></div>

그다음 animate()를 가져와서 움직임을 작성해요.

import { animate } from 'animejs';

animate('.box', {
  x: 240,
  rotate: 360,
  duration: 1000,
  ease: 'inOutQuad',
  loop: true,
});

처음에는 opacity, x, y, scale, rotate처럼 결과가 바로 보이는 속성부터 시험해 봐요. 여러 요소를 순서대로 움직이고 싶을 때는 stagger()를 추가하고, 복잡한 장면은 createTimeline()으로 나눠서 관리해요.

초보자에게 필요한 팁이에요

처음에는 레이아웃을 크게 바꾸는 속성보다 transform과 opacity 중심으로 애니메이션을 만들면 더 부드럽게 동작해요.

너무 많은 요소를 동시에 움직이면 시선이 분산돼요. 사용자가 눌러야 할 버튼이나 읽어야 할 핵심 콘텐츠를 강조하는 데부터 시작하면 애니메이션이 더 목적 있게 보여요.

5. VibeIndex: 내 클로드에게 손과 발이 되어줄 도구들 모음집

VibeIndex 메인 페이지

어떤 사이트인지 알아봐요

VibeIndex는 바이브 코딩에 쓰는 도구를 한곳에서 찾고 비교하는 디렉터리예요. 바이브 코딩은 복잡한 코드를 처음부터 직접 작성하기보다, 자연어로 원하는 결과를 설명하고 AI 도구의 도움을 받아 만드는 작업 방식이라고 생각하면 쉬워요.

VibeIndex 메인 페이지에는 285개 도구를 16개 카테고리로 모아 두었다고 표시돼요. 브라우저 기반 앱 빌더, AI IDE, IDE 확장 기능, CLI 도구, AI 코딩 에이전트뿐 아니라 코드 리뷰·품질, 테스트·QA, 문서화, 작업 관리, MCP, UI 생성기, 보안, 학습 자료도 찾을 수 있어요.

어떻게 도구를 찾을 수 있어요?

검색창에 도구 이름이나 필요한 기능을 입력하면 돼요. 사이드바에서 Browser-based App Builders처럼 목적에 맞는 카테고리를 고르고, 필터와 정렬 메뉴로 결과를 좁힐 수도 있어요.

도구 카드를 열면 간단한 설명, 카테고리, 공식 웹사이트를 확인할 수 있어요. 상세 페이지에서는 긴 설명, 스크린샷, 비슷한 도구, 공식 사이트로 이동하는 Visit 링크를 볼 수 있어요. 마음에 드는 도구를 저장하거나 링크를 공유하는 기능도 제공해요.

초보자는 이렇게 사용해요

먼저 필요한 일을 한 문장으로 적어 봐요.

코딩 없이 작은 홈페이지를 만들고 싶어요.

AI와 함께 코드를 작성하고 싶어요.

테스트 자동화 도구를 찾고 싶어요.

외부 서비스와 AI를 연결하고 싶어요.

이 문장에서 핵심 단어를 뽑아 AI app builder, AI IDE, Testing, MCP처럼 검색해요. 카테고리와 검색 결과를 확인한 뒤 비슷한 도구를 2~3개 비교해요.