Softgen AI로 28분 만에 SKOOL 웹사이트 복제하기_prompts & instructions

Softgen AI로 28분 만에 SKOOL 웹사이트 복제하기: 풀스택 로그인 + 백엔드 구현 완벽 가이드

I cloned SKOOL Website in 28 Min using Softgen AI NoCode (Full Stack Login + Backend)

최근 노코드 AI 도구의 발전은 웹사이트 개발의 혁신을 가져왔습니다. 본 글에서는 Softgen AI라는 도구를 사용하여 SKOOL 웹사이트를 28분 만에 복제하는 과정을 소개합니다. 특히, 풀스택 로그인 및 백엔드 구현 방법을 상세히 설명하여 누구나 쉽게 따라 할 수 있도록 돕는 것을 목표로 합니다.

1. SKOOL 웹사이트 복제 프로젝트 개요

본 프로젝트는 SKOOL 웹사이트를 Softgen AI를 사용하여 복제하고, 다음과 같은 기능을 구현하는 것을 목표로 합니다.

• 프런트엔드 디자인 개선: SKOOL 웹사이트보다 더 멋진 디자인으로 프런트엔드를 구성합니다.
• 풀스택 백엔드 구축: 기존 노코드 도구의 한계를 넘어, Firebase를 활용하여 풀스택 백엔드를 구축합니다.
• 배포: 개발된 웹사이트를 배포하여 실제 사용자가 접근할 수 있도록 합니다.

2. Softgen AI 도구 소개

Softgen AI는 노코드 AI 도구로, 프런트엔드 및 풀스택 애플리케이션 개발을 지원합니다. Firebase 인증, 데이터베이스, 실시간 데이터 동기화, 클라우드 기능 등을 제공하며, AI 기반 기능 통합을 지원합니다.

3. SKOOL 웹사이트 복제 방법: 30단계 가이드

다음은 Softgen AI를 사용하여 SKOOL 웹사이트를 복제하는 방법을 30단계로 세분화한 가이드입니다.

준비물:

• Softgen AI 계정
• Firebase 계정

단계별 설정:

1. SKOOL 웹사이트 스크린샷: SKOOL 웹사이트의 홈페이지, 상세 페이지, 로그인 페이지 스크린샷을 캡처합니다.
2. Softgen AI 로그인: Softgen AI 웹사이트 ([sj.]([URL sj 미제공]))에 접속하여 로그인합니다.
3. 새 프로젝트 생성: Softgen AI에서 새로운 프로젝트를 생성하고 프로젝트 이름을 설정합니다. (예: Marson AI Community)
4. 풀스택 애플리케이션 선택: 프로젝트 유형으로 "풀스택 애플리케이션"을 선택합니다.
5. Firebase 프로젝트 설정 건너뛰기: Firebase 프로젝트 설정은 나중에 진행하므로, 일단 건너뜁니다.
6. 프롬프트 작성: Softgen AI에게 SKOOL 웹사이트 복제를 요청하는 프롬프트를 작성합니다.
   • 프롬프트 예시: "SKOOL.com 웹사이트를 복제하고 싶습니다. 프런트엔드 UI/UX에 집중하고, 제공된 이미지를 사용하세요. 프로젝트 이름을 Marson AI로 변경해주세요."
7. 이미지 첨부: SKOOL 웹사이트 스크린샷 (홈페이지, 상세 페이지)을 프롬프트에 첨부합니다.
8. 추가 기능 요청: 로그인/가입 페이지 설정을 요청하고, 가짜 계정을 생성하여 로그인할 수 있도록 요청합니다.
   • 프롬프트 예시: "로그인/가입 페이지를 설정하고, 임시 사용자 이름으로 로그인할 수 있도록 해주세요. 인증 설정은 나중에 진행하겠습니다."
9. Creativity 선택: "Creativity" 모드를 선택합니다.
10. Prompt Enhance 활용: Softgen AI의 "Prompt Enhance" 기능을 사용하여 프롬프트를 개선합니다.
11. 코드 생성 확인: Softgen AI가 생성한 프런트엔드 코드를 확인하고, 필요한 경우 수정합니다.
12. 커뮤니티 카드 추가 확인: 커뮤니티 카드 (Community Cards)가 제대로 표시되는지 확인합니다.
13. 상세 페이지 기능 구현 요청: 커뮤니티 카드를 클릭했을 때 상세 페이지가 표시되도록 요청합니다.
    • 프롬프트 예시: "커뮤니티 카드를 클릭하면 상세 페이지가 표시되도록 해주세요. 두 번째 이미지를 참고해주세요."
14. 비디오 플레이어 확인: 상세 페이지에 비디오 플레이어 섹션이 제대로 구현되었는지 확인합니다.
15. 로그인/가입 설정: 로그인/가입 페이지를 설정하고, 임시 사용자 이름으로 로그인/가입이 가능한지 확인합니다.
16. 오류 수정: 오류가 발생하면 오류 메시지를 복사하여 Softgen AI에게 전달하고 수정을 요청합니다.
    • 프롬프트 예시: "오류가 발생했습니다. 다음 오류 메시지를 확인하고 수정해주세요: [오류 메시지]"
17. 가입 페이지 기능 확인: 가입 페이지에서 사용자 이름, 이메일, 비밀번호를 입력하고 가입이 정상적으로 진행되는지 확인합니다.
18. 커뮤니티 가입 팝업 설정 요청: "Join Group" 버튼을 클릭했을 때 가격 및 상세 정보가 담긴 팝업이 표시되도록 요청합니다.
    • 프롬프트 예시: "Join Group 버튼을 클릭하면 가격과 세부 정보가 포함된 팝업이 뜨도록 해주세요."
19. Stripe 연동 준비: Stripe 결제 연동을 위한 UI를 미리 설정해둡니다.
20. 무료 커뮤니티 설정: 무료 커뮤니티 카드를 설정하여 결제 없이 가입할 수 있도록 합니다.
    • 프롬프트 예시: "결제 없이 가입할 수 있도록 카드 중 하나를 무료로 설정해주세요."
21. 멤버 페이지 설정: 사용자 커뮤니티의 세부 정보를 볼 수 있는 멤버 페이지를 설정합니다.
22. 멤버 페이지 UI 이미지 제공: 멤버 페이지 UI 디자인을 위해 이미지를 추가하고, 관련 탭(커뮤니티, 강의실)을 빌드합니다.
23. 백엔드 설정: Softgen AI에서 제공하는 비디오 지침에 따라 Firebase 프로젝트를 생성하고 Softgen AI와 연결합니다.
24. Firebase 프로젝트 연결: Softgen AI에 Firebase 프로젝트 ID를 입력하여 연결합니다.
25. 로그인 인증 테스트: 설정한 Firebase 인증을 테스트합니다. 사용자 이름, 이메일, 비밀번호를 입력하고 로그인/가입이 정상적으로 진행되는지 확인합니다.
26. Firebase 데이터베이스 확인: Firebase 데이터베이스에 사용자 정보가 저장되었는지 확인합니다.
27. 프로필 정보 저장 설정 요청: 프로필 정보를 Firebase 데이터베이스에 저장하도록 요청합니다.
    • 프롬프트 예시: "프로필 정보를 데이터베이스에 저장하도록 설정해주세요. 사용자 정보 업데이트 및 프로필 사진 저장 기능도 포함해주세요."
28. 프로필 정보 저장 확인: 프로필 정보를 수정하고 저장한 후, Firebase 데이터베이스에 정보가 업데이트되었는지 확인합니다.
29. 커뮤니티 생성 기능 구현: 새로운 커뮤니티를 생성하고 관련 정보를 데이터베이스에 저장하도록 요청합니다.
    • 프롬프트 예시: "새로운 커뮤니티를 만들고 데이터베이스에 모든 정보를 저장하세요."
30. 새 커뮤니티 생성 확인: 새로운 커뮤니티를 생성하고 Firebase 데이터베이스에 정보가 저장되었는지 확인합니다.

4. 추가 정보 및 향후 계획

본 가이드에서는 Stripe 결제 연동은 다루지 않았습니다. Stripe 결제 연동 방법은 차후 파트 2 영상에서 다룰 예정입니다.

5. 결론: Softgen AI로 풀스택 웹사이트 구축에 도전하세요!

Softgen AI는 강력한 AI 코딩 기능을 통해 누구나 쉽게 풀스택 웹사이트를 구축할 수 있도록 돕습니다. 본 가이드를 따라 SKOOL 웹사이트 복제에 도전하고, 자신만의 아이디어를 실현해보세요!

프롬프트 예시 요약:

• "SKOOL.com 웹사이트를 복제하고 싶습니다. 프런트엔드 UI/UX에 집중하고, 제공된 이미지를 사용하세요. 프로젝트 이름을 Marson AI로 변경해주세요."
• "로그인/가입 페이지를 설정하고, 임시 사용자 이름으로 로그인할 수 있도록 해주세요. 인증 설정은 나중에 진행하겠습니다."
• "커뮤니티 카드를 클릭하면 상세 페이지가 표시되도록 해주세요. 두 번째 이미지를 참고해주세요."
• "오류가 발생했습니다. 다음 오류 메시지를 확인하고 수정해주세요: [오류 메시지]"
• "프로필 정보를 데이터베이스에 저장하도록 설정해주세요. 사용자 정보 업데이트 및 프로필 사진 저장 기능도 포함해주세요."
• "새로운 커뮤니티를 만들고 데이터베이스에 모든 정보를 저장하세요."

 

1. SKOOL 웹사이트 복제 프로젝트 개요

본 프로젝트는 SKOOL 웹사이트를 Softgen AI를 사용하여 복제하고, 다음과 같은 기능을 구현하는 것을 목표로 합니다.

• 프런트엔드 디자인 개선: SKOOL 웹사이트보다 더 멋진 디자인으로 프런트엔드를 구성합니다.
• 풀스택 백엔드 구축: 기존 노코드 도구의 한계를 넘어, Firebase를 활용하여 풀스택 백엔드를 구축합니다.
• 배포: 개발된 웹사이트를 배포하여 실제 사용자가 접근할 수 있도록 합니다.

2. Softgen AI 도구 소개

Softgen AI는 노코드 AI 도구로, 프런트엔드 및 풀스택 애플리케이션 개발을 지원합니다. Firebase 인증, 데이터베이스, 실시간 데이터 동기화, 클라우드 기능 등을 제공하며, AI 기반 기능 통합을 지원합니다.

3. SKOOL 웹사이트 복제 방법: 30단계 가이드

다음은 Softgen AI를 사용하여 SKOOL 웹사이트를 복제하는 방법을 30단계로 세분화한 가이드입니다.

준비물:

• Softgen AI 계정
• Firebase 계정

단계별 설정:

1. SKOOL 웹사이트 스크린샷: SKOOL 웹사이트의 홈페이지, 상세 페이지, 로그인 페이지 스크린샷을 캡처합니다.
2. Softgen AI 로그인: Softgen AI 웹사이트 ([URL sj 미제공])에 접속하여 로그인합니다.
3. 새 프로젝트 생성: Softgen AI에서 새로운 프로젝트를 생성하고 프로젝트 이름을 설정합니다. (예: Marson AI Community)
4. 풀스택 애플리케이션 선택: 프로젝트 유형으로 "풀스택 애플리케이션"을 선택합니다.
5. Firebase 프로젝트 설정 건너뛰기: Firebase 프로젝트 설정은 나중에 진행하므로, 일단 건너뜁니다.
6. 프롬프트 작성: Softgen AI에게 SKOOL 웹사이트 복제를 요청하는 프롬프트를 작성합니다.
   • (프롬프트 #1): "SKOOL.com 웹사이트를 복제하고 싶습니다. 프런트엔드 UI/UX에 집중하고, 제공된 이미지를 사용하세요. 프로젝트 이름을 Marson AI로 변경해주세요."
7. 이미지 첨부: SKOOL 웹사이트 스크린샷 (홈페이지, 상세 페이지)을 프롬프트에 첨부합니다.
8. 추가 기능 요청: 로그인/가입 페이지 설정을 요청하고, 가짜 계정을 생성하여 로그인할 수 있도록 요청합니다.
   • (프롬프트 #2): "로그인/가입 페이지를 설정하고, 임시 사용자 이름으로 로그인할 수 있도록 해주세요. 인증 설정은 나중에 진행하겠습니다."
9. Creativity 선택: "Creativity" 모드를 선택합니다.
10. Prompt Enhance 활용: Softgen AI의 "Prompt Enhance" 기능을 사용하여 프롬프트를 개선합니다.
11. 코드 생성 확인: Softgen AI가 생성한 프런트엔드 코드를 확인하고, 필요한 경우 수정합니다.
12. 커뮤니티 카드 추가 확인: 커뮤니티 카드 (Community Cards)가 제대로 표시되는지 확인합니다.
13. 상세 페이지 기능 구현 요청: 커뮤니티 카드를 클릭했을 때 상세 페이지가 표시되도록 요청합니다.
    • (프롬프트 #3): "커뮤니티 카드를 클릭하면 상세 페이지가 표시되도록 해주세요. 두 번째 이미지를 참고해주세요."
14. 비디오 플레이어 확인: 상세 페이지에 비디오 플레이어 섹션이 제대로 구현되었는지 확인합니다.
15. 로그인/가입 설정: 로그인/가입 페이지를 설정하고, 임시 사용자 이름으로 로그인/가입이 가능한지 확인합니다.
16. 오류 수정: 오류가 발생하면 오류 메시지를 복사하여 Softgen AI에게 전달하고 수정을 요청합니다.
    • (프롬프트 #4): "오류가 발생했습니다. 다음 오류 메시지를 확인하고 수정해주세요: [오류 메시지]"
17. 가입 페이지 기능 확인: 가입 페이지에서 사용자 이름, 이메일, 비밀번호를 입력하고 가입이 정상적으로 진행되는지 확인합니다.
18. 커뮤니티 가입 팝업 설정 요청: "Join Group" 버튼을 클릭했을 때 가격 및 상세 정보가 담긴 팝업이 표시되도록 요청합니다.
    • (프롬프트 #5): "Join Group 버튼을 클릭하면 가격과 세부 정보가 포함된 팝업이 뜨도록 해주세요."
19. Stripe 연동 준비: Stripe 결제 연동을 위한 UI를 미리 설정해둡니다.
20. 무료 커뮤니티 설정: 무료 커뮤니티 카드를 설정하여 결제 없이 가입할 수 있도록 합니다.
    • (프롬프트 #6): "결제 없이 가입할 수 있도록 카드 중 하나를 무료로 설정해주세요."
21. 멤버 페이지 설정: 사용자 커뮤니티의 세부 정보를 볼 수 있는 멤버 페이지를 설정합니다.
22. 멤버 페이지 UI 이미지 제공: 멤버 페이지 UI 디자인을 위해 이미지를 추가하고, 관련 탭(커뮤니티, 강의실)을 빌드합니다.
23. 백엔드 설정: Softgen AI에서 제공하는 비디오 지침에 따라 Firebase 프로젝트를 생성하고 Softgen AI와 연결합니다.
24. Firebase 프로젝트 연결: Softgen AI에 Firebase 프로젝트 ID를 입력하여 연결합니다.
25. 로그인 인증 테스트: 설정한 Firebase 인증을 테스트합니다. 사용자 이름, 이메일, 비밀번호를 입력하고 로그인/가입이 정상적으로 진행되는지 확인합니다.
26. Firebase 데이터베이스 확인: Firebase 데이터베이스에 사용자 정보가 저장되었는지 확인합니다.
27. 프로필 정보 저장 설정 요청: 프로필 정보를 Firebase 데이터베이스에 저장하도록 요청합니다.
    • (프롬프트 #7): "프로필 정보를 데이터베이스에 저장하도록 설정해주세요. 사용자 정보 업데이트 및 프로필 사진 저장 기능도 포함해주세요."
28. 프로필 정보 저장 확인: 프로필 정보를 수정하고 저장한 후, Firebase 데이터베이스에 정보가 업데이트되었는지 확인합니다.
29. 커뮤니티 생성 기능 구현: 새로운 커뮤니티를 생성하고 관련 정보를 데이터베이스에 저장하도록 요청합니다.
    • (프롬프트 #8): "새로운 커뮤니티를 만들고 데이터베이스에 모든 정보를 저장하세요."
30. 새 커뮤니티 생성 확인: 새로운 커뮤니티를 생성하고 Firebase 데이터베이스에 정보가 저장되었는지 확인합니다.

4. 추가 정보 및 향후 계획

본 가이드에서는 Stripe 결제 연동은 다루지 않았습니다. Stripe 결제 연동 방법은 차후 파트 2 영상에서 다룰 예정입니다.

5. 결론: Softgen AI로 풀스택 웹사이트 구축에 도전하세요!

Softgen AI는 강력한 AI 코딩 기능을 통해 누구나 쉽게 풀스택 웹사이트를 구축할 수 있도록 돕습니다. 본 가이드를 따라 SKOOL 웹사이트 복제에 도전하고, 자신만의 아이디어를 실현해보세요!

프롬프트 예시 요약:

1. "SKOOL.com 웹사이트를 복제하고 싶습니다. 프런트엔드 UI/UX에 집중하고, 제공된 이미지를 사용하세요. 프로젝트 이름을 Marson AI로 변경해주세요."
2. "로그인/가입 페이지를 설정하고, 임시 사용자 이름으로 로그인할 수 있도록 해주세요. 인증 설정은 나중에 진행하겠습니다."
3. "커뮤니티 카드를 클릭하면 상세 페이지가 표시되도록 해주세요. 두 번째 이미지를 참고해주세요."
4. "오류가 발생했습니다. 다음 오류 메시지를 확인하고 수정해주세요: [오류 메시지]"
5. "Join Group 버튼을 클릭하면 가격과 세부 정보가 포함된 팝업이 뜨도록 해주세요."
6. "결제 없이 가입할 수 있도록 카드 중 하나를 무료로 설정해주세요."
7. "프로필 정보를 데이터베이스에 저장하도록 설정해주세요. 사용자 정보 업데이트 및 프로필 사진 저장 기능도 포함해주세요."
8. "새로운 커뮤니티를 만들고 데이터베이스에 모든 정보를 저장하세요."

 

I. Initial Website Cloning & Setup

1. (To Softgen AI - Explicit): "I want to build a skool.com clone. I'm going to include the images to use for the front end. I want to focus on the UI and the UX. Clone this page exactly, but change the name of the project to Marson AI." (This sets the overall goal.)
2. (To Softgen AI - Explicit): "Also, I want to have a Details page once I click into one of the communities, and I have included the second image, which is the details page. Clone this exactly also." (Adds functionality and uses a second image.)
3. (To Softgen AI - Explicit): "Lastly, I want you to create a setup and signin page and create dummy account so I could log in with any password and login. We will later do the authentication setup, but for now, just set up all of the UI and the UX." (Requests sign-up/login UI with dummy data.)

II. Refining the Front-End & Adding Features

1. (To Softgen AI - Implied): "Yes [continue implementing]" (After the AI's initial response, the speaker prompts it to continue with the work by saying this.)
2. (To Softgen AI - Explicit): "Before that, let's add The Details page for each card when I click it using the second image"
3. (To Softgen AI - Explicit): "Let's set up all of the login setup sign in make sure you use dummy usernames for now and we'll connect the database later period "

III. Troubleshooting

1. (To Softgen AI - Explicit): "[Error Message]. Please fix this." (Whenever an error occurs.) - This represents a recurring prompt pattern throughout the process.
2. (To Softgen AI - Explicit): "yes just create everything you need to create registration page sign in sign up and any additional Pages you might need period make sure you use placeholders and dummy usernames for now "

IV. Adding backend and connecting stripe to join group

1. (To Softgen AI - Explicit): "I want you to set up a popup when you click join group with the price and details and a buy button and I'm going to be using stripe integration period we're going to do the integration later but set up everything now so it works bang"
2. (To Softgen AI - Implied): I am going to use the "Prompt Enhance" feature and use that from now on.

V. Setting up profile

1. (To Softgen AI - Explicit): "next I would like to create a profile for each user period here you would put your name your level of skill your socials a bio upload an image and any other best practices for filling out a profile page period can you set that up "

VI. adding chat features

1. (To Softgen AI - Explicit): "next I would like you to add some of the chat features period putting a new post and also the ability to attach images sound videos links to YouTube and any other best practices period Then I want to have the ability to like and comment on other threads on this page enh handset "

VII. Connecting Firebase

1. (To Softgen AI - Explicit): "login authentication works period now I want to be able to save the profile information on the database also period you created this feature already it's called edit profile where you can update your information and customize how others see you period can you set this up on Firebase so it saves all of this information including the image okay let's enhance our prompt "
2. (To Softgen AI - Explicit): "When we go to create let's create a new database for a new created Community period save all the information"

Therefore, the count of distinct prompts used or directly implied is: 14

Key Insights:

• Image as Context: The prompts heavily rely on providing images to the AI, giving it visual context for the design.
• Iterative Refinement: The process is not about giving one perfect prompt, but rather about iterating, correcting errors, and adding features step-by-step. The iterative process can create many more prompts.
• Focus on Functionality: The prompts primarily focus on functionality, leaving the UI/UX details to the AI.
• "Connect Later" Approach: The presenter initially prioritizes UI/UX, leaving backend integrations (like authentication and payment) for later steps.
• Emphasis on Enhancing Prompts: The user likes to have the AI enhance the prompt.

This structured analysis provides a clear understanding of the prompts used in the video and the underlying strategy for effectively using AI in NoCode development. I have provided all of the distinct prompts that I have seen in the video for the user.