구독자 님, 안녕하세요?
AI 트렌드를 전달해드리는 Trendium.ai 입니다.
자연어 기반 UI 생성과 직관적 편집으로 누구나 프로덕션 수준의 웹 인터페이스를 빠르게 제작할 수 있는 서비스. Reweb 2.0이 베타 버전으로 정식 출시되었습니다.
by 💜Cutico @cuticogent
이 도구는 디자인과 개발 사이의 오랜 장벽을 허물어 누구나—기술적 지식 수준과 관계없이—고품질 웹 인터페이스를 만들 수 있게 해줍니다. 사용자는 간단한 자연어 명령으로 복잡한 UI 요소를 생성하고, 직관적인 시각 편집기로 세부 조정할 수 있습니다. 가장 인상적인 점은 이 모든 과정이 몇 분 안에 완료되어 즉시 사용 가능한 프로덕션 수준의 코드로 변환된다는 것입니다.
이제 개발자, 디자이너, 기획자 모두 쉽고 빠르게 프로덕션 수준의 UI를 만들 수 있는 시대가 열렸습니다. Reweb 2.0은 웹 개발의 민주화를 추구하며, 기술적 장벽 없이 창의적 아이디어를 실현할 수 있는 새로운 가능성을 제시합니다.
🔧 주요 기능 소개
- 자연어 프롬프트와 이미지 입력만으로 UI를 자동 생성할 수 있습니다. 사용자는 단순히 원하는 화면을 설명하거나, 이미지나 드로잉을 업로드함으로써 해당 UI를 구성하는 HTML/CSS 구조가 자동 생성됩니다.
- AI가 생성한 결과를 시각적으로 편집할 수 있는 직관적인 UI 에디터를 제공합니다. 코드 없이도 드래그 앤 드롭으로 구성 요소를 배치하고 스타일을 조절할 수 있으며, Tailwind 기반의 정확한 스타일링이 실시간 반영됩니다.
- Next.js와 Tailwind로 구성된 깔끔한 코드를 완성된 형태로 바로 다운로드하거나 복사할 수 있습니다. 생성된 코드는 shadcn/ui를 포함한 프로덕션 품질로 구성되며, 개발 환경에 즉시 적용할 수 있습니다.
- 반응형 웹과 컴포넌트 재사용을 고려한 설계를 지원합니다. 컴포넌트 단위로 UI를 설계하고 저장할 수 있어, 여러 페이지나 프로젝트에서 손쉽게 재사용 가능합니다.
- Figma 디자인을 직접 가져와 코드로 변환할 수 있습니다. 디자이너가 만든 Figma 파일을 그대로 불러와 개발자가 사용할 수 있는 코드로 전환하는 기능도 지원됩니다.
- 프리셋된 템플릿과 섹션을 활용해 빠르게 시작할 수 있습니다. SaaS 대시보드, 랜딩 페이지, 이커머스 화면 등 다양한 목적에 맞춘 섹션 라이브러리가 기본 제공되어, 빠른 레이아웃 구성이 가능합니다.
- 팀 협업과 커뮤니티 중심의 생태계를 함께 제공합니다. 프로젝트 공유, 팀원 초대, 코드 내보내기 CLI 지원 등 실무 환경에 적합한 기능도 함께 제공되어 스타트업과 에이전시에 유용합니다.
시작하기
(1) https://beta.reweb.so/ 사이트에 접속하고 로그인한다음 대시보드로 들어가서 새로운 프로젝트를 생성합니다.
(2) 왼쪽 텍스트 프롬프트창에 만들고 싶은 웹페이지를 자세히 입력하고 생성 버튼을 클릭합니다.
(3)저는 숏폼과 가로형 영상이 함께 있는 영상 플랫폼 페이지를 구성해보았습니다.
숏폼과 가로형 영상은 비율이 달라서 영상 플레이 목록을 만들기 어려운데, Reweb에서 새로운 방향성을 제안해주었습니다.
(4) 만들어진 웹페이지에서 수정하고 싶은 영역을 선택하고 해당 영역을 새롭게 재생성할 수도 있습니다. 저는 오른쪽 div를 선택하고 챗봇 기능을 삽입해달라고 프롬프트를 다시 입력한 후 생성 버튼을 눌렀습니다.
(5) 원하는 위치에 새로운 챗봇기능이 새로운카드로 생성된것을 볼수있습니다.
(6)Create variants 버튼을 클릭하여 다양한 버전으로 변형하여 페이지를 설계할수있습니다.
다음으로는 생성된 페이지를 Figma로 데려와보겠습니다.
(7)원하는 페이지를 더블클릭하면 페이지명을 수정할수있도록 변경되면서 옆쪽에 새창에서 미리보기 버튼이 활성화 됩니다.
(8) 다음으로는 Figma 페이지에 들어가서 플러그인 검색창에 html.to.design을 입력한 다음 설치합니다.
(9) Extension 메뉴를 클릭하고 브라우저에 해당 플러그인을 설치합니다.
(10) 아까 웹에서 미리보기해둔 사이트에서 html.to.design 플러그인을 실행한뒤 해당페이지를 캡쳐해줍니다. 해당페이지는 .h2d파일로 다운로드됩니다.
(11) 다시 Figma로 돌아가서 html.to.design 플러그인 첫번째 메뉴인 web을 클릭한다음 다운받았던 파일을 import 해줍니다.
(12) Figma에서 아까 생성한 페이지 디자인이 그대로 불러와집니다.
이처럼 Reweb 2.0은 디자인부터 개발까지 원스톱으로 가능한 혁신적인 도구로, 웹 제작 워크플로우를 완전히 재정의하고 있습니다. 사용자 친화적인 인터페이스와 AI 기반 기능을 통해 디자이너와 개발자 간의 협업을 원활하게 하고, 프로덕션 수준의 코드를 빠르게 생성할 수 있습니다.
Reweb 2.0을 활용하면 아이디어 구상에서 실제 구현까지의 시간을 크게 단축할 수 있으며, 기술적 장벽 없이 누구나 웹 인터페이스를 만들 수 있다는 점이 가장 큰 매력입니다.
창의적인 아이디어를 실현하는 새로운 경험 지금 시도해보세요!
오늘의 Midjourney Prompt
by 💜Cutico @cuticogent
[prompt]I am looking straight down of the rooftop of a light sky blue porsche 930 turbo standing on a clean and hilly green meadow, angled view on the car --ar 16:9 --profile vn9nr2s 4d36t2k
의견을 남겨주세요