소개
올마이티님 사례를 보고, 온라인 명함 관리집을 만들고 싶었습니다. 명함집 갖고 다니지 않아도 되고, 잃어버릴까 전정긍긍 하지 않아도 되요.
진행 방법
Figma Make로 디자인을 했습니다. Lovable 처럼 동작해서, 프롬프트 넣은 게 다에요.
Web app home for a business card image management, with a colorful, classasic, professional theme.
명함 정보는 명함을 스캔한 걸로 관리할 거야. 텍스트 말고, 명함 사진으로 바꿔 줘.이것 밖에 안 했는데 이런 디자인이 나오네요.
다음은 Replit으로 갑니다.
먼저 템플릿을 조합해서 웹 사이트 뼈대 + 로그인 기능 + Supabase 연동을 한 번에 만든 다음!!
저 Figma 디자인을 적용합니다.
그리고 기능 개발을 했습니다.
Replit이 UI를 만드는 능력이 좋고, Agent가 상당히 똑똑하게, 요청하지 않은 것까지
알아서 다 오류 수정해주네요.
만든 온라인 명함집입니다.
저 명함 앞 뒤로 뒤집는 것은 Figma 디자인에는 없었는데도
Replit이 알아서 해줬어요. 제가 쓴 건 프롬프트가 다입니다.
명함을 업로드 할 때, 앞 면과 뒷 면을 모두 업로드하면 하나의 카드에서 두 개의 이미지를 동시에 보여 줘.이거 했을 뿐이에요.
배포도 Replit AI에서 바로 됩니다. 중소규모의 웹 어플리케이션까지는 배포, 운영도 됩니다.
그리고, 휴대폰 앱도 있어서,
지하철에서도 바이브 코딩할 수 있습니다~!!
결과와 배운 점
느낀 점은 프로토타이핑이 빠르고(간단하게 시험 삼아 개발해보기 정말 쉽고 빠릅니다). 난이도가 Cursor 보다 아주 낮습니다. Agent가 알아서 오류 수정하는 것은 Cursor의 TDD가 자동으로 되는 느낌이랄까요.
아주 강력한 도구로 보입니다.
도움 받은 글 (옵션)
Diane 님 추천으로 Replit 사용해보았습니다.