Reddy 사용자 가이드

아무것도 모르고 시작했던 co-dev가 서비스를 종료하였다. T.T
한국계 개발자가 시작했던 서비스라 많이 응원을 하고 싶었는데, 안타깝다.

https://www.notion.so/co-dev-v43-1f1aff4b84a5801cb833d703d9a338b2

그렇게 있다가AI를 활용한 기획강의를 듣던중 Readdy를 알게 되었다. 특징은 UI를 잘 만들어주고, FIgma로 내보내가가 쉽다고 강의에서 설명을 하였다. 그 강의는 피그마나, Readdy 를 활용하는것이 강의 주 목표가 아니였거에 딱거기 까지 였다. 그렇게 알게된 Readdy 어떻게 보면, co-dev를 알고 좀 더 정신차리고(여전히 아무것도 모른것은 같지만) 시작한 첫번째 바이브코딩이지 않을까 한다.

디자인을 잘 만들어 주는 편이다. 기능도 나름 잘 생성을 했다. 그렇지만, 데이터베이스 연결에서 많이 헤매였다. 몇날 몇일 해결을 못하고 같은 곳에서 맴돌았다. 포기할까…하는 생각이 들기도 많이 들었는데, 어떻게 어떻게 AI들과 협업하여 문제를 해결해 나갔다.

처음에 바이크코딩으로 웹,앱 보다 가능하다고 강조 되었는데, 어느 순간 보니 웹페이지 빌더로 완전히 전환한 느낌이기도 하다. 지금까지 내가 작업했을때는 랜딩페이지나, 데이터베이스가 없는 웹페이지는 잘 만들것 같기도 하다.

아직 Readdy 로 개발하고 있는것은 진행중이다. 그렇지만, 현재 시점에서 많이 고민을 하고 있다.
커서로 갈아타서 갈것인가? 그냥 gogo~ 할것인가.

Readdy 바로가기

아래 포스팅의 내용은 Readdy 홈페이지에 있는 사용자 매뉴얼의 일부를 그대로 번역한 것이다.
Readdy는 나름대로의 특장점이 있고, 누군가에게 본명히 도움이 될 것이라고 생각이 든다.

🚀 Readdy 시작하기

명확한 프롬프트 + 다중 라운드 대화가 핵심입니다.

📝 작성자: Frank

📅 최종 업데이트: 4개월 전

🎯 소개

Readdy는 여러분의 아이디어를 전문적인 디자인으로 변환하는 AI 기반 도구입니다. 이 가이드는 최상의 결과를 얻기 위한 프롬프트 전략을 익히는 데 도움이 됩니다. 이러한 기법들은 여러분의 특정 요구사항에 맞게 조합하고 적용할 수 있습니다.

도움이 되셨나요? 👍 👎

📝 명확한 프롬프트

초기 생성 품질을 향상시킬 수 있는 몇 가지 팁입니다. 디자인을 개선하기 위해 대화를 계속하는 것이 정말 특별한 결과물을 만드는 핵심입니다.

💡 디자인 요구사항을 명확히 설명하세요:

예시 프롬프트:

🎨 추천 스타일:

• 모던 미니멀리스트 (SaaS 제품 및 랜딩 페이지에 완벽)

• 더 전문적인 스타일은 아래 섹션에서 추가 옵션을 확인하세요

📸 참조 이미지 사용하기:

비전과 일치하는 디자인 참조를 찾으세요 (예: Dribbble.com 또는 다른 웹페이지 스크린샷)

• 참조 이미지를 Readdy에 업로드하고 요구사항을 간단히 설명하세요.

GPT(또는 선호하는 LLM)를 사용하여 참조 이미지를 분석할 수도 있습니다. GPT가 페이지의 특징을 요약하고 디자인 프롬프트를 생성하도록 하세요. 그리고 참조 이미지 + GPT 생성 프롬프트를 업로드하세요.

🔄 다중 라운드 대화

각 수정 시 1-2개 요소만 조정하세요.

🎯 명확한 표현 사용하기:

• XX를 …로 변경해주세요
  • XX 섹션을 …로 수정해주세요

• XX를 더 …하게 만들어주세요

선택 도구를 사용하여 페이지의 일부를 선택하면 더 정확한 편집이 가능합니다.

• 디자인의 미디어를 교체하기 위해 이미지를 업로드할 수 있습니다

🎯 더 정확한 편집하기

선택 도구를 사용하여 페이지의 일부를 선택하면 더 정확한 편집이 가능합니다.

페이지의 작은 요소들을 선택하여 빠른 편집도 가능합니다 (예: 푸터의 불필요한 항목 제거).

🔧 반복을 통한 완성

구체적인 조정을 요청하여 결과를 세밀하게 조정하세요:

📦 컴포넌트 수정:

특정 섹션 추가/삭제

예: 에너지 사용량 섹션을 추가해주세요

🎨 시각적 요소 업데이트:

예: 추천 제품 사진을 변경하고 정원 배경으로 설정해주세요.

📊 차트 및 그래프 개선:

예: 3색 그라데이션으로 막대 차트를 다시 만들어주세요.

⚡ 인터랙티브 기능 향상:

예: 캐러셀 히어로 섹션을 추가해주세요.

📐 레이아웃 조정:

예: 별점을 프로필 사진과 이름 아래에 배치해주세요

“Extremely comfortable and stylish”

“매우 편안하고 스타일리시함”

이전 버전으로 돌아가서 원하는 버전부터 프롬프트로 편집을 계속할 수 있습니다.

⚠️ 모호함 피하기

프롬프트가 명확하고 모호하지 않은지 확인하세요. 애매한 용어를 피하고 필요한 것에 대해 가능한 한 구체적으로 설명하세요.

❌ 나쁜 예: “이 앱을 더 좋게 만들어주세요”

✅ 좋은 예: “이 두 섹션이 완전한 문자를 표시하도록 해주세요”

🖼️ 프롬프트에 이미지 추가하기

1. 복사하고 싶은 스크린샷/이미지를 여기에 드롭하세요.

2. 레이아웃, 색상, 또는 카피라이팅 중 참조하고 싶은 부분을 선택하세요.

3. 페이지를 100% 복사하거나 한두 가지 측면을 참조하여 다른 앱을 구축할 수 있습니다.

4. 결과의 특정 부분을 수정하려면 해당 영역의 스크린샷을 찍어 대화에 복사하여 붙여넣으세요.

예시 요청: