Relume
Relume · 코딩
Relume는 짧은 텍스트를 사이트맵, 와이어프레임, 스타일 가이드로 바꾸고 그대로 Webflow나 Figma로 내보내는 AI 웹디자인 도구다.
Relume 소개
About
Relume란 무엇인가
Relume는 사이트가 시각적으로 다듬어지기 전 단계를 맡는 AI 웹디자인 도구다. 프로젝트를 텍스트로 설명하면 필요한 페이지를 담은 사이트맵, 페이지별 와이어프레임, 그에 맞는 스타일 가이드, 임시 문구까지 만들어 준다. 그다음 전체를 편집 가능한 요소로 Webflow나 Figma에 보낸다. 목표는 고객 요구사항과 실제 제작 사이에서 길어지기 쉬운 계획 작업을 대신하는 것이다.
이 도구는 두 부분으로 나뉜다. AI Site Builder가 생성을 담당해 글로 적은 요구사항을 페이지 구조와 내용으로 바꾼다. 나머지 절반은 Relume Library로, Finsweet의 Client-First 클래스 명명 규칙을 따르는 완성된 섹션을 대량으로 갖추고 있다. 덕분에 담당자나 프로젝트가 달라져도 구조가 일관되게 유지된다.
Relume는 Webflow나 Figma로 작업하는 에이전시, 프리랜서 디자이너, 사내 팀에 맞는다. 디자인을 완성해 주거나 사이트를 호스팅하지는 않는다. 뼈대를 만들면 나머지는 이미 쓰고 있는 도구에서 마무리하는 방식이다. 작업 흐름이 Webflow와 Figma 밖에 있다면 효과는 크게 떨어진다.
시작하기
- relume.io에서 계정을 만들고 빈 요구사항이나 공개된 컴포넌트 세트 중 하나로 프로젝트를 연다.
- 사이트의 목적과 대상 독자를 적은 텍스트를 쓰고 AI가 페이지 사이트맵을 만들도록 한다.
- 사이트맵을 조정하고 Relume Library에서 각 페이지로 섹션을 끌어다 놓은 뒤 임시 문구를 고친다.
- 색상, 서체, 여백을 담은 스타일 가이드를 만들거나 고르고 모든 내용을 Webflow나 Figma로 내보낸다.
제품 정보
Relume의 요금, 지원 플랫폼, 성능을 한눈에 확인해 보세요.
추천 대상
이 도구가 가장 잘 맞는 사용자, 작업, 상황입니다.
사용자
- Webflow 에이전시
- 프리랜서 디자이너
- 사내 마케팅 팀
작업
- 요구사항을 사이트맵으로 바꾸기
- 와이어프레임 빠르게 만들기
- 임시 문구 초안 잡기
활용 상황
- 여러 고객 사이트를 동시에 시작하며 섹션 구조를 맞춰야 하는 에이전시.
- 며칠을 디자인에 쏟기 전에 우선 고객에게 와이어프레임을 보여주려는 개인 디자이너.
- Client-First 명명을 쓰고 새 프로젝트를 늘 같은 컴포넌트 세트에서 시작하려는 팀.
주요 기능
AI 사이트맵 및 와이어프레임 생성
Relume는 AI 사이트맵 생성기와 AI 와이어프레임 도구 역할을 한 번에 한다. 사이트를 설명하는 텍스트를 쓰면 추천 페이지의 사이트맵과 페이지별 와이어프레임이 돌아온다. 구조에는 빈 상자가 아니라 실제 섹션이 들어가므로, 스타일을 입힌 뒤가 아니라 초반에 레이아웃을 판단할 수 있다.
완성된 섹션 라이브러리
라이브러리에는 페이지 유형별로 정리된 반응형 컴포넌트가 대량으로 들어 있다. 히어로, 가격표, 고객 후기, 푸터 등이 포함된다. 각 섹션은 Finsweet의 Client-First 명명을 따르므로 한 명이 작업하든 열 명이 작업하든 구조가 같게 유지된다.
Webflow 및 Figma 내보내기
프로젝트가 준비되면 네이티브이면서 편집 가능한 요소로 Webflow나 Figma에 보낸다. 덕분에 Relume는 실용적인 Webflow 와이어프레임 도구가 되고, Figma 플러그인은 와이어프레임과 디자인 가이드를 편집 가능한 레이어로 가져온다. Webflow에서는 한 번의 가져오기로 페이지, 섹션, 문구가 만들어져 와이어프레임이 정지 이미지가 아니라 작동하는 토대가 된다.
스타일 가이드 생성
Relume는 스타일 가이드 생성 역할도 맡아, 만들어 낸 페이지에 맞춰 색상, 서체, 여백 규칙을 정한다. 모든 섹션이 공통의 시각 기준에서 출발할 수 있다. 다만 이는 출발점이며 완성된 디자인 시스템은 아니다.
AI가 쓴 임시 문구
도구는 생성한 글로 섹션을 채워 와이어프레임이 실제 페이지처럼 읽히게 한다. 이 글은 교체를 전제로 한 것이며, 최종 콘텐츠로 다루면 곤란하다.
React 내보내기
Relume는 컴포넌트를 React 코드로 출력할 수 있어 작업 흐름을 디자인 도구 밖으로 늘려 준다. 생성된 구조를 그대로 프런트엔드 구현에 넣고 싶은 팀에 맞는다.
장단점
장점
- 글로 적은 요구사항을 몇 분 만에 사이트맵과 와이어프레임으로 바꿔 제작 전 계획 단계를 줄인다.
- Relume Library가 Client-First 명명에 맞춘 대량의 섹션을 일관되게 제공한다.
- Webflow 내보내기로 실제 페이지와 섹션이 만들어져 와이어프레임이 작동하는 출발점이 된다.
- 무료 플랜으로 무제한 생성에 결제하기 전에 흐름을 시험할 수 있다.
단점
- 만드는 것은 구조이지 스타일이 아니라서 디자인과 배포는 Webflow나 Figma에서 해야 한다.
- 내보낼 수 있는 대상이 한정적이라 Webflow, Figma, React가 아닌 조합이면 효과가 떨어진다.
- 생성된 문구와 스타일 가이드는 초안이므로 어떤 프로젝트든 배포 전에 사람이 검토해야 한다.
자주 묻는 질문
Relume는 텍스트에서 사이트맵, 와이어프레임, 스타일 가이드, 임시 문구를 생성해 Webflow나 Figma로 내보낸다. 맡는 것은 계획 단계이며 최종 디자인이나 호스팅은 아니다.
관련 콘텐츠
Relume와 관련된 도구, 스킬, 아티클을 살펴보세요.
Relume 대안
Forefront
Forefront · 코딩Forefront는 오픈소스 AI로 무언가를 만드는 웹 플랫폼이다. 대표적인 오픈소스 언어 모델을 자신의 데이터로 미세 조정하고, 성능을 평가하고, API로 실행하거나 내보내 직접 호스팅할 수 있다. 폐쇄형 플랫폼의 편의를 원하면서도 모델과 데이터의 소유권은 놓지 않으려는 개발자가 대상이다.
Startkit
StartKit.AI · 코딩Startkit은 AI SaaS와 AI 래퍼 제품을 만들기 위한 보일러플레이트다. 지루한 부분을 미리 연결해 둔 AI 스타트업 보일러플레이트라고 생각하면 된다. 인증, Stripe와 Lemon Squeezy 결제, 사용량 제한, 트랜잭션 이메일, 그리고 OpenAI, Anthropic, Groq, Llama와 통신하는 AI API 스타터 키트가 포함된다. 저장소를 복제하고 가격을 정한 뒤 사용자가 실제로 돈을 내는 부분에 착수하면 된다. React와 Tailwind 위의 Next.js로 만들어졌기 때문에 보일러플레이트 코드의 상당 부분이 이미 익숙하게 느껴진다.
Testim
Tricentis · 코딩Testim은 웹, 모바일, Salesforce 애플리케이션 전반에 걸쳐 엔드투엔드 테스트를 만들고 실행하는 AI 기반 테스트 자동화 플랫폼이다. 머신러닝에 기대어 인터페이스가 바뀌어도 테스트를 안정적으로 유지하므로, 팀은 깨진 셀렉터를 고치는 데 쓰는 시간을 줄인다. 오늘부터 쓸 수 있는 자동화 테스트 도구치고 나쁘지 않다. 브라우저에서 동작을 녹화해 테스트를 만들고, 더 세밀한 제어가 필요하면 JavaScript를 더한다. 바쁜 QA 팀에게 탄탄한 선택이다.