Lovable ai 에디터

안녕하세요! 저는 Lovable이에요 - 웹 애플리케이션을 만들고 수정하는 AI 에디터입니다. 🚀

 

https://annyeong-explain-yourself-bot.lovable.app/

annyeong-explain-yourself-bot

 

저에 대한 소개

저는 사용자와 실시간으로 채팅하면서 코드를 작성하고 수정할 수 있는 AI입니다. 여러분이 오른쪽 화면에서 실시간으로 변화를 볼 수 있도록 도와드려요!

제가 사용하는 기술 스택

• React - 현대적인 UI 구성
• TypeScript - 타입 안전성
• Tailwind CSS - 빠른 스타일링
• Shadcn UI - 아름다운 컴포넌트들
• Vite - 빠른 개발 환경

어떻게 활용할 수 있나요?

1. 대화형 개발 💬

• 자연어로 원하는 기능을 설명하면 제가 코드로 구현해드려요
• "로그인 페이지 만들어줘", "버튼 색깔을 파란색으로 바꿔줘" 같은 요청이 가능해요

2. 실시간 미리보기 👀

• 코드 변경사항을 즉시 오른쪽 화면에서 확인할 수 있어요
• 수정하면서 바로바로 결과를 볼 수 있어서 개발이 매우 빨라요

3. 다양한 앱 제작 가능 🎨

• 랜딩 페이지 - 비즈니스나 포트폴리오 사이트
• 대시보드 - 데이터 시각화 및 관리 도구
• E-commerce - 온라인 쇼핑몰
• 블로그 - 개인 또는 기업 블로그
• SaaS 앱 - 웹 기반 서비스 애플리케이션

4. 효과적인 활용 팁 💡

✅ 좋은 요청 방법:

• "버튼을 추가해줘" → "홈페이지에 '시작하기' 버튼을 중앙에 추가해줘"
• "색깔 바꿔줘" → "헤더 배경색을 네이비블루로 바꿔줘"
• 한 번에 하나씩 단계별로 요청하기

❌ 피해야 할 것:

• 너무 많은 기능을 한 번에 요청
• 모호한 표현 사용

5. 특별한 기능들 ⭐

• 이미지 업로드 - 프로젝트에 이미지 추가 가능
• 컴포넌트 생성 - 재사용 가능한 UI 컴포넌트 제작
• 반응형 디자인 - 모바일/데스크톱 모두 지원
• 애니메이션 - 부드러운 전환 효과 추가
• 데이터 차트 - Recharts를 활용한 데이터 시각화

6. 배포와 공유 🌐

• 원클릭 배포 - Publish 버튼으로 쉽게 배포
• 커스텀 도메인 - 본인의 도메인 연결 가능
• GitHub 연동 - 코드를 GitHub로 내보내기 가능

지금 바로 시작해보세요!

무엇을 만들고 싶으신가요? 예를 들어:

• "개인 포트폴리오 웹사이트 만들어줘"
• "할 일 관리 앱 만들어줘"
• "레스토랑 메뉴 페이지 만들어줘"

어떤 아이디어든 말씀해주시면 함께 멋진 웹 애플리케이션을 만들어보아요! 🎉

다음 단계는 무엇입니까?

• 세부 조정 및 사용자 정의: 프롬프트 또는 시각적 편집을 통해 디자인, 애니메이션 및 레이아웃을 조정합니다.
• 프롬프트 마스터: "채팅 모드"를 사용하여 편집 없이 프로젝트를 계획합니다. 명확하고 상세하며 반복적인 프롬프트를 사용하여 최상의 결과를 얻으십시오.
• GitHub 동기화: 프로젝트의 코드를 GitHub로 전송하여 편집을 양방향으로 동기화합니다.

정보를 저장하고, 사용자 계정을 추가하거나, 다른 서비스에 연결해야 합니까? Supabase는 복잡한 기술 설정 없이 이러한 기능을 추가하는 간단한 방법입니다.