15분 만에 완성하는 AI 웹사이트 제작법, 놀라운 UI 경험!

이 비디오에서는    다음 웹사이트나 모바일 앱을 위한 멋진 UI나 디자인을 디자인할 때 정말 빛을 발하는 놀라운 새로운 EA 도구를 소개하려고 합니다.

 지금 화면에 보이는 모든 디자인은 Redd Ai라는 새로운 AI 도구를 사용하여 전적으로 만들어졌습니다.

 빠르게 시작하려면  생성하려는 내용에 대한 정확한 설명을 붙여넣고 색상 구성표를 선택하고 테마를 선택한 다음 참조용 이미지를 업로드하면 됩니다.

 버튼을 누르면 AI가 멋진 UI를 생성합니다.

 가장 좋은 점은  원하는 대로 정확하게 만들기 위해 계속해서 편집하고 코드를 바로 내보낼 수 있다는 것입니다.

 더 이상 디자인 기술이 필요하지 않습니다.

 Ready a Works의 주요 기능을 살펴보고 간단한 아이디어에서 생각보다 빠르게 완전한 코딩된 디자인으로 전환하는 방법을 보여드리겠습니다.

 그럼 빠르게 시작해 볼까요? 이 작가는 준비되었습니다.

 Ai.

 가장 먼저 해야 할 일은  아래 설명의 첫 번째 링크를 클릭하고 새 계정에 가입하는 것입니다.

 홈페이지 자체에는  몇 초 만에 최첨단 AI를 사용하여 아이디어를 아름다운 디자인으로 변환할 수 있다고 적혀 있습니다.

 여기서   Ready Ai를 사용하여 만든 사이트나 디자인의 몇 가지 예와 사용 사례 몇 가지를 찾을 수 있습니다.

 원하는 경우 홈페이지를 통해 더 자세한 정보를 찾을 수 있습니다.

 이제 계정에 로그인하면 이런 화면이 표시됩니다.

 가장 먼저 해야 할 일은 새 프로젝트를 만드는 것입니다.

 계정을 열고 로그인하자마자 새 프로젝트를 만들고 프레임워크를 선택하라는 사서함이 표시됩니다.

  새 프로젝트라는 옵션을 클릭하면 다음과 같이 표시됩니다.

 먼저   모바일 앱과 본격적인 웹사이트를 위한 디자인을 만드는 방법을 보여드리겠습니다.

 첫 번째 단계에서는 이름을 LMS 데스크톱으로 지정하고 코드를 선택합니다.

  HTML 보기 V2 React Uni AppPP 등과 같은 다양한 옵션이 있습니다.

  사용 사례와 정확히 무엇이 필요한지에 따라 달라집니다.

 원하는 대로 이 중 하나를 선택할 수 있지만 여기서는 HTML로 유지하고 이 만들기 옵션을 클릭하면 됩니다.

 기본적으로 새 프로젝트를 만들고 있는데 여기서  제가 앞서 언급했듯이 홀의 마법이 일어납니다.

 데스크톱과 모바일 버전의 사이트 모두에 대한 디자인이나 UI를 생성할 수 있으므로   바로 여기 있는 토글을 사용하여 이러한 버전 중에서 선택할 수 있습니다.

 여기서 정확히 무엇을 만들고 싶은지 입력해야 합니다.

 이 경우 LMS를 디자인하고 싶다고 가정해 보겠습니다.

 알겠습니다.

 첫 번째 단계는  코딩 및 프로그래밍을 위한 학습 플랫폼이나 LMS의 홈페이지부터 시작하겠습니다.

  코딩 및 프로그래밍 과정 학습 플랫폼에 대한 랜딩 페이지를 만들 수 있습니다.

 알겠습니다.

 이제 AI가 프롬프트에 포함할 내용을 제안하고 있고 Tab 키를 클릭하면 이를 확인할 수 있습니다.

 이 랜딩 페이지는 영웅 배너 과정 카테고리 추천 및 CTA 버튼을 포함합니다.

 추가 기능에는 탐색 표시줄, 검색 표시줄이 포함될 수 있습니다.

 보기 좋습니다.

 Tab 키를 누르면 몇 초 더 기다리면  프롬프트에 포함할 새 항목이 계속 생성됩니다.

 원하는 모든 것을 선택할 수 있으며 다음으로 색상 구성표를 선택할 수 있습니다.

 원하는 경우 밝은 모드 또는 어두운 모드를 선택하고 기본 색상 테마 와 모서리 반경을 선택한 다음 저장을 클릭하고 다음 단계를 진행할 수 있습니다.

  프롬프트를 입력하는 대신 마이크를 사용할 수도 있습니다.

 예를 들어 이 마이크를 클릭하면 마이크를 사용하여 내 보기에 대한 랜딩 페이지를 디자인할 수 있습니다.

 이런 식으로 원하는 경우 실제로 마이크를 사용할 수 있습니다.

 또 다른 멋진 점은 특정 스크린샷이나 MUP 또는 웹사이트 디자인에서 영감을 얻고 싶다면 스크린샷을 캡처하여 여기에도 업로드할 수 있다는 것입니다.

 이에 대한 옵션 도 있고 지금은 데스크톱으로 유지하겠습니다.

 좋아 보이니 이 보내기 버튼을 클릭하면 AI가 전체 요구 사항 또는 보낸 프롬프트를 가져와 이와 같이 구조화합니다.

 여기에서 볼 수 있듯이 탐색 및 헤더 영웅 섹션 코스 범주 소셜 증명 기능 코스 추천 CTA 및 바닥글이 있습니다.

  여기에 추가로 무언가를 추가하고 싶다면 실제로 AI에게 그렇게 하라고 요청할 수 있습니다.

 예를 들어 연락처 섹션을 추가하고 싶다면 바닥  글 바로 앞에 '연락처 섹션 추가'라고 말하고  Enter를 누르면 됩니다.

 이제 AI가 전달한 이 요구 사항을 가져와 실제 계획에 넣습니다.

 이제 사진 섹션 바로 위에 연락처 섹션이 생겼습니다.

 멋지네요.

 이제 AI가 만들어준 이 개요에 꽤 만족합니다.

  이제 해야 할 일은 생성 버튼을 클릭하고 a가 방금 전달한 모든 요구 사항을 처리하고 디자인을 만드는 것입니다.

 처음에 a는 동일한 디자인의 두 가지 변형을 생성 하고 가장 마음에 드는 것을 선택하여 계속할 수 있습니다.

 약 1 분 정도 걸렸고 이제 AI가 정확한 디자인의 두 가지 변형을 만드는 것을 마쳤습니다.

 바로 여기가 첫 번째입니다.

 여기에 탐색 표시줄 검색 표시줄 로그인 및 가입 버튼이 있습니다.

 영웅 섹션 자신의 PC에서 프로그래밍 마스터하기 여기에 더미 이미지가 있습니다.

 여기에 인기 있는 코스 카테고리 웹 개발 모바일이 있습니다.

 개발 데이터 과학은 선두 기업에서 신뢰받고 있으며  Google, Microsoft, Amazon, Apple의 로고가 포함되어 있습니다.

 오, 이건 정말 멋지네요.

 여기에 추천 코드 섹션이 있고 이 코드 카드에는 가격, 제목, 리뷰 수준, 자세히 알아보기 버튼이 있는데 보기 좋습니다.

 여기에 추천 섹션, CTA 연락처 정보가 있습니다.

 그래서 AI에게 바로 바닥글 위에 연락처 섹션을 포함하도록 요청했고 여기에 실제 바닥글 자체가 있습니다.

 가장 좋은 부분은 AI가 계속해서 동일한 두 가지 변형을 만든다는 것입니다.

  여기를 클릭하면 볼 수 있듯이  다른 이미지가 있는 다른 변형입니다.

 코스가 조금 다르기 때문에 전체 구조는 거의 동일하지만 콘텐츠는 조금 다릅니다.

 이제 가장 마음에 드는 것을 선택할 수 있습니다.

  예를 들어 이것이 가장 마음에 든다고 가정해 보겠습니다.

 이제 이것이 제가 추가로 편집하고 싶은 버전입니다.

 멋진 점은 이 디자인 내에서 모든 요소를 ​​개별적으로 선택하고 추가로 편집할 수 있다는 것입니다.

 예를 들어 지금 이 카드가 바로 여기에 있다고 가정해 보겠습니다.

 그래서 저는 바로 여기 이 옵션을 클릭하고 이렇게 전체 div를 선택할 수 있습니다.

 이제 마우스를 올리면 카드에 멋진 애니메이션을 추가할 수 있습니다.

 그리고 Enter를 누를 수 있습니다.

 기본적으로 애니메이션을 추가하고 싶습니다.

 지금은 그림자 효과가 있지만  애니메이션을 추가하고 싶고 이 특정 div나 카드를 특별히 선택했습니다.

 이제 AI가 변경 사항을 적용할 때까지 기다리겠습니다.

 버전 2가 완료되었고  이 카드 위로 마우스를 가져가면 애니메이션이 표시되어야 합니다.

 보시죠.

 이제 마우스를 가져가면 미묘한 리프팅 효과가 나타납니다.

 좋습니다.

 다음 으로는 좋습니다.

 이것은 좋아 보입니다.

 거의 모든 것이 좋아 보입니다.

 다음으로는 디자인에 새로운 섹션을 추가하고 싶다고 가정해 보겠습니다.

  AI에게 동일한 작업을 요청하면 기꺼이 수행 합니다.

 이제 동일한 코드를 보려면 바로 여기 이 코드 옵션을 클릭하기만 하면 됩니다.

  바로 여기에서 코드를 찾을 수 있습니다.

 처음에 HTML을 유형으로 선택했기 때문에 HTML 코드가 있습니다.

 예를 들어 React를 선택했다면 React 코드를 복사하거나 코드를 다운로드하거나 복사할 수 있습니다.

 이제 끌 수 있습니다.

 디자인을 공유하려면  바로 여기에서 공유 옵션을 클릭하고 링크를 복사하면 이 링크를 거의 모든 사람과 공유할 수 있으며   Ready AI를 사용하여 개발한 디자인을 정확하게 볼 수 있어야 합니다.

 알겠습니다.

 다음 으로 각 코스에 대한 다른 페이지 또는 코스 페이지를 만들고 싶다고 가정해 보겠습니다.

 별도의 코스 페이지를 만들고 싶습니다.

 그러기 위해 해야 할 일은  바로 여기 자세히 알아보기 아이콘을 클릭하는 것입니다.

 그러면 생성을 계속하라는 옵션이 표시되거나  AI에 명시적으로 동일한 질문을 할 수 있지만 지금은 생성 계속 옵션을 클릭하겠습니다.

 보시다시피  기다리겠습니다.

 알겠습니다.

 보시다시피 사용자는 자세히 알아보기를 클릭합니다.

 코스 카드에 버튼을 클릭하고  특정 코드에 대한 자세한 정보를 보고 싶다고 제안합니다.

 좋아요, 이제 생성을 클릭할 수 있습니다.

Reddi 의 멋진 점은   하나의 인터페이스 또는 하나의 프로젝트 내에서 웹 사이트 또는 앱에 대해 여러 다른 페이지를 디자인할 수 있다는 것입니다.

 여기서 볼 수 있듯이 LMS 데스크톱 프로젝트를 만들었고 지금은 이 랜딩 페이지가 있습니다.

 다음은 코스 세부 정보 개요 페이지를 만들려고 하는데 지금은 a가 동일한 것을 디자인하고 있으며 비슷한 방식으로 계속해서 정보 페이지, 연락처 페이지, 리소스 페이지 및 모든 페이지를 만들 수 있습니다.

알겠습니다.

 지금은 모든 것을 보여드리겠습니다.

 완료될 때까지 기다리겠습니다.

같은 코드입니다.

알겠습니다.

AI가 코스 세부 정보 페이지를 생성했습니다.

알겠습니다.

이 페이지에는 두 가지 버전이 있으며  실제로 매우 좋습니다.

AI가 계속해서 여기에 Placeold 폴더 YouTube 비디오 uh 미리 보기를 추가했습니다.

 오른쪽에는 가격 및 지금 버튼 세부 정보 다운로드 커리큘럼 제목 시간 강의 리뷰 튜터 코스 개요가 있습니다.

 그리고 여기에 실제 코스 커리큘럼이 있습니다.

알겠습니다.

지금은 두 개가 있습니다.

 섹션 학생 리뷰 추천 및 관련 과정 이제 두 번째 버전을 살펴보겠습니다.

 이게 더 마음에 드네요.

 여기에 제목이 있는 영웅 섹션이 있습니다.

 설명 평점 마지막 업데이트 튜터 과정 커리큘럼 리뷰 등이 있습니다.

 와우.

 계속해서 이러한 특정 디자인 중 하나를 선택할 수 있습니다.

 이 경우 가장 마음에 든다고 말하고 이것을 유지하고 원하는 경우 계속해서 편집할 수 있습니다.

 예를 들어 이 페이지에 몇 개의 섹션을 추가하고 싶다면 아래쪽   에 관련 과정 섹션을 추가 하고 Enter를 누르면 됩니다.

 기본적으로 이 카드와 관련된 과정을 보여주는 몇 개의 카드를 추가하고 싶습니다.

  이것이 바로 제가 구현하려는 것입니다.

 그럼 다 됐고 여기에 관련 과정이 있고  여기에도 비슷한 방식으로 몇 개의 카드가 있습니다.

 계속해서 원하는 것을 추가하고 AI에게 모든 것을 구현하도록 요청할 수 있으며 거의 ​​모든 것이 AI에 의해 처리됩니다.

 저는 정말로 감명을 받았습니다.

 왜 무엇 준비된 AI가 할 수 있는 일이 있고 이제 랜딩 페이지에서 작업하고 싶다고 가정해 보겠습니다.

 이 옵션을 클릭하고 랜딩 페이지를 선택한 다음 계속 해서 편집할 수 있습니다.

 색상을 변경하거나 새 요소를 추가하거나 그런 식으로 무엇이든 할 수 있습니다.

 AI를 사용하여 할 수 있습니다.

 다음으로 소개 페이지를 만들고 싶다고 가정해 보겠습니다.

 알겠습니다.

 이 소개를 클릭하고 계속을 클릭하여 생성하기만 하면 됩니다.

 이제 프로젝트에 대한 새 소개 페이지가 만들어집니다.

 알겠습니다.

 여기에는 소개 페이지가 있습니다.

 영웅 섹션, 타임라인, 몇 장의 카드, 알겠습니다.

 또는 리더십 팀을 만나는 소개 섹션이 있습니다.

 여기에는 이러한 사람들에 대한 세부 정보, 소셜 프로필 아이콘, 이름, 제목, 간단한 설명이 있습니다.

 알겠습니다.

 좋아 보입니다.

 여기에는 두 번째 버전이 있는데 거의 비슷해 보입니다.

 좋습니다.

 이것을 유지하고 이제 홈 이나 랜딩 페이지로 돌아갈 수 있습니다.

 알겠습니다.

 바로 여기가 랜딩 페이지 이고 소개 페이지를 만들었고 이 소개 페이지나 소개 링크를 클릭하면 같은 페이지에 액세스할 수 있습니다.

 비슷한 방식으로 디자인 의 모든 측면을 구현할 수 있습니다.

 예를 들어 연락처 페이지, 가입 페이지, 로그인 페이지 등을 만들고 싶은 대로 만들 수 있습니다.

 AI를 사용하여 이 모든 것을 할 수 있습니다.

   Ready AI를 사용하여 다음 웹사이트의 디자인이나 UI를 만드는 것이 얼마나 간단한지 보여드리겠습니다.

 바로 이 AI 도구가 Figma를 대체할 수 있습니다.

  Figma를 사용하면 모든 것을 직접 해야 하며 코드를 얻는 것도 또 다른 골칫거리입니다.

 하지만 Ready AI가 필요한 부분이 바로 여기입니다.

  AI에게  생성하려는 내용이나 원하는 디자인 종류, 변경해야 할 사항 등을 정확히 전달하기만 하면 됩니다.

 AI가 모든 것을 대신 처리해 줍니다.

 이렇게 간단합니다.

 똑같은 과정을 반복하여 새 기능을 추가하고 새 섹션을 추가할 수 있습니다.

   여기에서 버전 1, 버전 2, 버전 3과 같은 모든 버전에 액세스할 수도 있습니다.

 이렇게 간단합니다.

 다음으로  Ready AI를 사용하여 모바일 UI를 만들어 보겠습니다.

 그러기 위해 저는 새로운 프로젝트를 만들고 LMS 앱과 HTML이 좋아 보인다고 말할 것입니다.

 아니면 React로 선택할 수도 있습니다.

 만들기를 클릭하고 확인해 보겠습니다.

 알겠습니다.

 이번에는 바로 여기 모바일이라고 적힌 이 옵션을 선택하고   코딩과 프로그래밍 학습을 위한 LMS로 넘어가겠습니다.

  바로 여기 모바일 옵션을 선택했는지 확인하세요.

 알겠습니다.

 탭을 두 번 클릭하면 AA가 자동으로 프롬프트를 채워줍니다.

 그러면   생성하려는 내용에 대한 자세한 설명이 이미 있을 것입니다.

 계속해서 여기에 입력할 수 있지만 지금은 탭을 두 번 눌러 AI가 설명의 큰 부분을 채우도록 하겠습니다.

 알겠습니다.

 좋아 보입니다.

 보내기 버튼을 클릭하고 확인해 보겠습니다.

 와우.

 AI가 생성한 것입니다.

 계속해서 AI에게 LMS 모바일 앱 UI를 만들도록 요청했고 이것이 생성한 것입니다.

 여기에는 활성 과정 카드가 있습니다.

 일일 과제 진행 상황을 확인하세요.

 이것은 작가가 또 다른 버전입니다.

 알겠습니다.

 제가 가장 좋아하는 버전입니다.

 다음은 또한  여기에서 새 페이지라고 하는 옵션을 클릭하여 새 페이지를 만들 수 있습니다.

 여기서는 코스 세부 정보 페이지를 선택하고  Enter를 누릅니다.

 여기에는 페이지 개요 헤더 C 정보 표시줄 코스 설명 콘텐츠 기능 및 이점 강사 섹션 학생 리뷰 CTA 추가 정보가 있습니다.

 생성을 클릭하고 모두 살펴보겠습니다.

 여기에는 코스 세부 정보 페이지가 있고 사진이 있습니다.

 제목 알겠습니다.

 이것은 실제로 매우 멋지고 두 번째 버전이 있는데 꽤 비슷해 보입니다.

 따라서 계속해서 AI에게 새 UI 섹션을 빌드하고 거기에서 시작하도록 요청할 수 있습니다.

 다시 한 번 동일한 코드를 볼 수 있습니다.

 이 작성기는 React에 내장되어 있으며 여기에서 React 코드를 찾을 수 있습니다.

 이제 여기서 Elements 데스크톱 버전으로 돌아왔습니다.

  여기서 이 이미지를 바꾸고 싶다고 가정해 보겠습니다.

 사용자 지정 이미지가 있고 여기에서 바꾸고 싶습니다.

  선택 도구를 사용하여 이미지를 선택한 다음  아래에 첨부된 이미지로 영웅 이미지를 바꾸면 됩니다.

 이 옵션을 클릭하고 이미지 업로드를 클릭합니다.

 이미지를 선택했으므로 이 이미지를 사용하고 싶습니다.

 열기를 클릭하고 보내기를 클릭합니다.

 이제 a가 업로드한 이미지를 가져와 여기에 바꿉니다.

 알겠습니다.

 기다리겠습니다.

 보시다시피 AI가  업로드한 이미지로 바꿨습니다.

 다음으로 인기 있는 과정 카테고리 섹션 에 배경색을 추가하고 싶습니다.

  이것을 선택하고 멋진 노란색 배경색을 추가합니다.

 Enter를 누릅니다.

 알겠습니다.

 이렇게 하면 멋진 옅은 노란색 파스텔 노란색이 됩니다.

 다음으로  전체 페이지에 애니메이션을 추가하고 싶습니다.

 처음에는 페이지가 로드될 때 각 요소에 멋지고 미묘한 애니메이션을 추가하고 싶습니다.

 알겠습니다.

  이제 미묘한 애니메이션이 있습니다.

 전체 화면으로 보면 여기에서 볼 수 있듯이 거의 모든 요소에  미묘한 애니메이션이 적용되고 이것이 바로 제가 원했던 것입니다.

 이 방법도 작동합니다.

 이렇게 하면   Ready Ai와 멋진 부분을 사용하여 다음 모바일 앱이나 웹사이트를 위한 멋진 UI나 디자인을 만드는 것이 얼마나 간단한지 알 수 있습니다.

 디자인한 후 바로 이 코드 옵션을 사용하여 코드를 내보내고 코드를 복사하여 바로 사용할 수 있습니다.

 얼마나 간단한지 알 수 있고 빠르게 시작하려면  아래 설명의 첫 번째 링크를 클릭하기만 하면 됩니다.

 새 계정에 가입하면 Ready A를 사용하여 꿈의 디자인을 구축할 수 있습니다.

 이 영상이 도움이 되었으면 좋겠습니다.

 그렇다면 구독하고 다음 영상에서 만나요.