디자이너와 프론트엔드 개발자는 매일 인터페이스를 역설계합니다: 스크린샷에서 간격을 측정하거나, 글꼴 크기를 추측하거나, 컴포넌트를 재구성하여 동작 방식을 확인합니다. 디자인 다시 만들기는 이 과정을 한 단계로 줄여줍니다 — 스크린샷이나 URL을 업로드하면 디자인 토큰, 컴포넌트 분석, 작동하는 프론트엔드 코드를 얻을 수 있습니다.
이 도구는 Rekreate에서 개발 중입니다. 아래는 이 도구가 제공할 결과와 현재 Rekreate의 기존 도구로 가능한 작업입니다.
- 입력: 스크린샷, Figma 프레임 또는 URL. 출력: 토큰, 컴포넌트, 코드.
- 색상 팔레트, 글꼴 크기, 간격 리듬, 모서리 반경 및 그림자를 변수로 추출.
- 컴포넌트 단위 출력 — 카드, 내비게이션, 가격표 등 하나의 평면 마크업이 아닌 구조화된 결과.
- 개발 중.
/make의 이미지 도구는 현재 사용 가능합니다.
디자인 다시 만들기 — 개발 중
인터페이스를 입력하면 그 시스템을 반환합니다: 역할별 색상 팔레트, 글꼴 크기, 간격 리듬, 모서리 반경과 높이, 그리고 각 컴포넌트를 HTML과 CSS로 재구성하여 적절한 클래스 이름과 반응형 동작을 제공합니다.
목표는 다른 사람의 제품을 복제하는 것이 아닙니다. 디자이너가 스크린샷을 보고 항상 묻는 질문 — 이것은 실제로 어떻게 만들어졌을까? — 에 대한 답을 몇 초 만에 제공하는 것입니다.
이 도구는 아직 활성화되지 않았습니다. 무료 계정을 생성하면 도구가 열리자마자 앱에서 알려드립니다.
다시 만든 디자인에서 나오는 결과물
| 레이어 | 계획된 출력 |
|---|---|
| 색상 | CSS 변수로 정의된 역할별 팔레트 — 표면, 잉크, 뮤트, 강조, 의미적 색상 — 라이트 및 다크 테마 지원 |
| 글꼴 | 글꼴 패밀리, 사용된 크기, 굵기, 줄 간격 및 자간 |
| 간격 | 기본 리듬(4/8pt 또는 기타)과 컨테이너 너비 및 여백 |
| 컴포넌트 | 버튼, 카드, 내비게이션, 폼, 테이블 — 각각 독립된 HTML 및 CSS로 제공 |
| 상태 | 호버, 포커스, 비활성 및 오류 상태를 추론 가능한 경우 포함 |
| 접근성 노트 | 대비 경고 및 누락된 포커스 상태를 플래그 처리, 무작정 복사하지 않음 |
사용 방법
참조 업로드
감명받은 제품의 스크린샷, Figma 프레임 또는 라이브 URL.
범위 선택
전체 화면 또는 이해가 필요한 특정 컴포넌트 — 가격 카드, 사이드바, 빈 상태.
시스템 검토
먼저 토큰: 팔레트가 적합한지, 글꼴 크기가 맞는지, 간격이 그리드에 맞는지 확인하세요. 모델이 잘못 추측한 부분을 수정하세요.
코드 가져오기
컴포넌트를 프로젝트에 복사하거나 팀이 실제로 빌드하는 동안 참조 구현으로 유지하세요.
영감, 복제가 아닙니다
인터페이스 패턴은 공유된 기술입니다. 제목, 본문, 버튼이 있는 카드를 소유하는 사람은 없습니다. 업계는 이러한 패턴이 효과적이기 때문에 이를 채택했습니다.
소유되는 것은 제품의 시각적 정체성 — 로고, 일러스트 스타일, 커스텀 글꼴, 이미지 및 카피 — 그리고 독점 코드입니다. 다시 만든 디자인은 메커니즘을 가르치고 나서 여러분의 브랜드로 꾸며져야 합니다.
만약 화면이 로고만 다른 경쟁사의 화면처럼 보인다면, 구조에서 배운 것이 아니라 그들의 정체성을 복사한 것입니다. 토큰을 출발점으로 사용하고 이를 여러분의 시스템으로 발전시키세요.
Rekreate가 이것을 만드는 이유
우리의 모든 제품은 하나의 아이디어에서 시작됩니다: 이미 효과가 입증된 것을 기반으로 시작하고, 그것을 여러분의 것으로 만드세요. 이는 바이럴 비디오에서 시작해 광고, 사진, 음성으로 확장되었으며, 디자인은 인터페이스에 적용된 동일한 움직임입니다.
또한 팀을 위한 /make 제품군을 완성합니다: 광고 다시 만들기, 랜딩 페이지 다시 만들기, 그 뒤의 디자인 시스템 다시 만들기 — 모두 한 곳에서, 여러분이 작업하는 언어로.
웹사이트 다시 만들기와 앱 다시 만들기를 팔로우하여 인접 도구를 확인하세요.
자주 묻는 질문
AI가 스크린샷에서 UI 디자인을 다시 만들 수 있나요?
네 — 비전 모델은 이미지에서 팔레트, 글꼴 크기, 레이아웃을 추출하고 컴포넌트를 코드로 재구성할 수 있습니다. Rekreate의 디자인 다시 만들기 도구는 개발 중이며, 현재는 이미지, 로고 및 비디오를 다루는 실시간 도구를 제공합니다.
Figma 파일을 제공하나요?
계획된 출력은 디자인 토큰과 프론트엔드 코드입니다. 토큰은 대부분의 디자인 도구에 깔끔하게 가져올 수 있지만, 이 도구는 작동하는 코드로 빠르게 도달하는 것을 목표로 합니다.
다른 사람의 UI를 다시 만드는 것이 합법인가요?
레이아웃 및 상호작용 패턴은 브랜드 자산과 같은 방식으로 보호되지 않습니다. 로고, 일러스트, 커스텀 글꼴, 카피 또는 독점 코드를 재사용하지 마세요 — 구조를 가져오고 여러분의 정체성을 더하세요.
다크 모드를 지원하나요?
네, 계획에 포함되어 있습니다: 토큰은 테마별로 추출되어 다시 만든 컴포넌트가 하나의 테마에 고정되지 않고 두 가지 모두에서 작동합니다.
출시일은 언제인가요?
공개된 날짜는 아직 없습니다. 무료 계정을 생성하면 새로운 /make 도구가 열릴 때 앱에서 확인할 수 있습니다.
그동안 무엇을 사용해야 하나요?
Rekreate의 이미지 다시 만들기는 비주얼에, 로고 다시 만들기는 브랜드 자산에 사용하세요. 마크업에는 전용 스크린샷-코드 도구를 활용하세요.
Rekreate로 다음 바이럴 비디오를 제작하세요
검증된 단편 비디오를 찾아, 스크립트, 아바타, 음성을 사용해 다시 만들고, Seedance, Kling, Veo로 장면을 생성하세요.
무료 체험 시작 →