Rewe: AI가 일관된 스타일의 프론트엔드 구성 요소를 생성하여 프론트엔드 에디터에서 웹 코드를 자유롭게 조합합니다.

일반 소개

Reweb은 Next.js 및 Tailwind CSS를 사용하여 웹사이트를 구축하는 데 중점을 둔 개발자를 위한 프런트엔드 웹 코드 빌더입니다. 코드가 필요 없는 편리함과 코드 편집의 유연성을 결합하여 사용자가 결과의 실시간 미리보기가 포함된 시각적 인터페이스를 통해 웹사이트 구성 요소를 빠르게 만들고 편집할 수 있으며, 고품질 코드 내보내기 기능을 제공하여 개발자가 모든 플랫폼에서 프로젝트를 계속 사용자 정의하고 배포할 수 있습니다. 초보자이든 숙련된 개발자이든 Reweb은 생산성을 획기적으로 개선하고 워크플로우를 간소화합니다.

데모 효과

기능 목록

• 비주얼 편집기변경 사항을 실시간으로 미리 볼 수 있는 직관적인 인터페이스를 통해 Tailwind 및 shadcn/ui 컴포넌트를 편집할 수 있습니다.
• 코드 내보내기무제한 사용자 지정 및 호스팅 지원으로 고품질의 Next.js 및 Tailwind 코드를 내보낼 수 있습니다.
• 조립식 거푸집사용자가 빠르게 시작할 수 있도록 아름답고 사용자 지정 가능한 구성 요소와 템플릿을 제공합니다.
• AI 세대빈 페이지에서 시작하는 번거로움을 피하고 프롬프트나 이미지에서 컴포넌트를 생성하고 편집할 수 있습니다.
• 작업 관리작업과 이슈를 쉽게 관리하여 팀 워크플로우를 최적화하세요.
• 다중 사용자 지원공동 개발을 지원하기 위한 팀 프로그램 출시 예정.

도움말 사용

주요 기능

1. 비주얼 편집기::
   • 로그인한 후 프로젝트 페이지로 이동하여 편집할 컴포넌트를 선택합니다.
   • 왼쪽 도구 모음의 옵션을 사용하여 레이아웃 조정, 스타일 수정 등의 편집 작업을 수행합니다.
   • 실시간으로 변경 사항을 미리 보고 예상대로 결과가 나오는지 확인하세요.
2. 코드 내보내기::
   • 편집이 끝나면 오른쪽 상단에 있는 '내보내기' 버튼을 클릭합니다.
   • 내보내기 형식(Next.js 또는 Tailwind)을 선택하고 생성된 코드 파일을 다운로드합니다.
   • 코드 파일을 코드베이스 또는 호스팅 플랫폼에 업로드하여 사용자 지정 및 배포를 계속하세요.
3. 조립식 거푸집::
   • 프로젝트 생성 페이지에서 템플릿 사용 옵션을 선택합니다.
   • 적절한 템플릿을 찾아서 선택한 후 '적용' 버튼을 클릭합니다.
   • 필요에 따라 추가 편집 및 사용자 지정이 가능합니다.
4. AI 세대::
   • 편집 화면에서 'AI 생성' 버튼을 클릭합니다.
   • 프롬프트를 입력하거나 이미지를 업로드하고 AI가 구성 요소를 생성할 때까지 기다립니다.
   • 생성된 컴포넌트를 미세 조정하고 최적화하여 프로젝트 요구 사항을 충족하도록 합니다.
5. 작업 관리::
   • 프로젝트 화면에서 '작업 관리' 옵션을 클릭합니다.
   • 새 작업을 만들고, 팀원에게 할당하고, 마감일을 설정하세요.
   • 작업 진행 상황을 추적하고 적시에 문제를 해결하여 프로젝트가 제시간에 완료될 수 있도록 합니다.

자세한 작동 지침

• 새 프로젝트 만들기::
  • 로그인한 후 '새 프로젝트 만들기' 버튼을 클릭합니다.
  • 프로젝트 이름을 입력하거나 템플릿을 선택하거나 빈칸에서 시작합니다.
  • '만들기' 버튼을 클릭하여 프로젝트 편집 페이지로 들어갑니다.
• 편집 구성 요소::
  • 프로젝트 편집 페이지에서 편집할 컴포넌트를 선택합니다.
  • 왼쪽 도구 모음의 옵션을 사용하여 레이아웃 조정, 스타일 수정 등의 편집 작업을 수행합니다.
  • 실시간으로 변경 사항을 미리 보고 예상대로 결과가 나오는지 확인하세요.
• 내보내기 코드::
  • 편집이 끝나면 오른쪽 상단에 있는 '내보내기' 버튼을 클릭합니다.
  • 내보내기 형식(Next.js 또는 Tailwind)을 선택하고 생성된 코드 파일을 다운로드합니다.
  • 코드 파일을 코드베이스 또는 호스팅 플랫폼에 업로드하여 사용자 지정 및 배포를 계속하세요.
• 조립식 거푸집 사용::
  • 프로젝트 생성 페이지에서 템플릿 사용 옵션을 선택합니다.
  • 적절한 템플릿을 찾아서 선택한 후 '적용' 버튼을 클릭합니다.
  • 필요에 따라 추가 편집 및 사용자 지정이 가능합니다.
• AI 생성 구성 요소::
  • 편집 화면에서 'AI 생성' 버튼을 클릭합니다.
  • 프롬프트를 입력하거나 이미지를 업로드하고 AI가 구성 요소를 생성할 때까지 기다립니다.
  • 생성된 컴포넌트를 미세 조정하고 최적화하여 프로젝트 요구 사항을 충족하도록 합니다.
• 작업 관리::
  • 프로젝트 화면에서 '작업 관리' 옵션을 클릭합니다.
  • 새 작업을 만들고, 팀원에게 할당하고, 마감일을 설정하세요.
  • 작업 진행 상황을 추적하고 적시에 문제를 해결하여 프로젝트가 제시간에 완료될 수 있도록 합니다.

이러한 자세한 지침을 통해 사용자는 Reweb을 쉽게 시작하고 고품질 웹 프로젝트를 빠르게 구축할 수 있습니다.