Ai 웹 프로그래밍

📱 비개발자를 위한 웹사이트 만들기 매뉴얼

추천 방법: 몰트봇 + AI 웹빌더 조합

비개발자가 가장 쉽게 사용할 수 있는 워크플로우입니다.

1단계: 텔레그램 설정 (5분)

아이패드에서 App Store 열기
“Telegram” 검색 후 설치
텔레그램 실행 → 계정 생성/로그인
검색창에 @jjanga_bot 입력
대화 시작 버튼 또는 /start 입력
페어링 코드가 나오면 남편(관리자)이 승인

2단계: 아이디어 구체화하기 (몰트봇과 대화)

텔레그램에서 몰트봇에게 아이디어를 말해주세요:

예시 메시지:

"나는 수제 비누를 만들어 파는 작은 사업을 하고 있어.
온라인으로 비누를 소개하고 주문받을 수 있는 웹사이트를 만들고 싶어.

- 비누 종류 사진과 설명
- 가격표
- 카카오톡으로 주문 연결
- 예쁜 파스텔 색상 디자인"

몰트봇이 도와줄 수 있는 것:

✅ 아이디어 정리 및 구체화
✅ 필요한 페이지/기능 추천
✅ 디자인 컨셉 제안
✅ 텍스트 콘텐츠 작성 (소개글, 설명문 등)

3단계: 웹사이트 생성 (AI 웹빌더 사용)

가장 쉬운 옵션들 (코딩 없이 아이디어만으로 웹사이트 생성):

서비스	난이도	특징	가격
Lovable.dev	⭐ 매우 쉬움	한국어 지원, 자동 호스팅	무료 시작
Bolt.new	⭐ 매우 쉬움	빠른 생성, 미리보기	무료 시작
v0.dev	⭐⭐ 쉬움	Vercel, 세련된 디자인	무료 시작

추천: Lovable.dev (비개발자에게 가장 친화적)

4단계: 실제 워크플로우 예시

[아이패드 텔레그램]

나: 수제 비누 쇼핑몰 웹사이트 만들고 싶어

몰트봇: 좋아요! 몇 가지 질문드릴게요.
       1. 비누 종류가 몇 개인가요?
       2. 결제는 어떻게 받으실 건가요?
       3. 원하는 분위기가 있나요?

나: 비누 5종류, 카톡으로 주문받을 거야, 
   자연친화적이고 깔끔한 느낌

몰트봇: 이해했어요. 다음 내용으로 Lovable.dev에 
       입력하시면 됩니다:

       ---
       "자연친화적인 수제 비누 쇼핑몰.
       - 메인 페이지: 브랜드 소개와 대표 이미지
       - 제품 페이지: 5가지 비누 카드형 레이아웃
       - 각 비누: 사진, 이름, 가격, 설명
       - 주문하기 버튼: 카카오톡 오픈채팅 연결
       - 색상: 연한 초록, 베이지, 흰색
       - 분위기: 깔끔하고 자연친화적"
       ---

나: 고마워! Lovable에 넣어볼게

[Lovable.dev 웹사이트]
(위 내용 복사해서 붙여넣기 → 자동으로 웹사이트 생성)

5단계: 웹사이트 공개하기

Lovable.dev 사용 시:

생성된 웹사이트 미리보기 확인
수정할 부분 있으면 채팅으로 요청
“Deploy” 또는 “공개하기” 버튼 클릭
고유 URL 받기 (예: your-soap-shop.lovable.app)
이 링크를 인스타그램, 카카오톡 등에 공유

📋 간단 요약 체크리스트

□ 텔레그램 설치
□ @jjanga_bot 검색 → 대화 시작
□ 페어링 승인 받기
□ 아이디어 말하기 (어떤 웹사이트? 기능? 분위기?)
□ 몰트봇이 정리해준 내용을 Lovable.dev에 입력
□ 생성된 웹사이트 확인 및 수정
□ 공개하고 링크 공유!

💡 팁

구체적으로 말할수록 좋아요
- ❌ “예쁜 웹사이트 만들어줘”
- ✅ “파스텔 핑크색, 케이크 사진 5개, 가격표, 인스타 연결”
사진 준비하기
- 제품 사진, 로고 등을 미리 준비하면 좋아요
수정은 대화로
- Lovable.dev에서도 “버튼 색상 파란색으로 바꿔줘” 같이 대화로 수정 가능

이 매뉴얼을 아내분께 보여드리면 될 것 같습니다. 추가로 특정 부분을 더 자세히 설명하거나, 실제 예시 시나리오를 더 만들어드릴까요?

Ai 마법서

Explorer