내 가게 첫 페이지 만들기
인스타 최신 피드 자동 연결 포함
안티그래비티 + Behold 두 가지만 쓰면 됩니다.
코드 몰라도 됩니다. 오늘 안에 실제 링크 하나 나옵니다.
오늘 완성할 페이지 — 이런 모습이에요
상단
로고 + 가게 이름 + 한 줄 소개
대표 상품/서비스
사진 + 설명 + 가격 (or 문의)
연락처·주문 방법
카카오채널·전화번호·운영 시간
인스타그램 최신 피드
인스타 올리면 페이지에 자동 반영 (Behold)
하단 버튼
카카오 채널 연결 또는 전화 연결
준비 — 시작 전 체크
10분인스타그램 계정
피드로 보여줄 사진이 최소 3~6장 이상 있으면 됩니다.
안티그래비티
이미 설치돼 있다면 OK. 없으면 antigravity.dev에서 다운로드.
Behold 계정 (무료)
behold.so에서 가입합니다. 무료 플랜으로 충분합니다.
Vercel 계정 (무료)
배포할 때 씁니다. vercel.com에서 GitHub 계정으로 가입.
Behold 설정 — 인스타 피드 연결
20분Behold는 인스타그램 계정을 연결하면 최신 피드를 자동으로 내 페이지에 보여주는 도구예요. 인스타에 새 사진을 올리면 페이지가 자동으로 업데이트됩니다.
- behold.so 접속 → 무료 가입
- Add Source → Instagram 계정 연결 (인스타 로그인 필요)
- New Widget → 피드 스타일 선택 (Grid 추천 — 3열 바둑판)
- 컬럼 수, 사진 수, 여백 등 취향대로 조정
- Embed Code 클릭 → 코드 전체 복사
✋ 직접 해보기
Behold 위젯 ID (임베드 코드에서 찾기)
Behold에서 위젯 만들면 임베드 코드 안에 위젯 ID가 있어요. 여기 적어두면 나중에 찾기 쉬워요.
랜딩페이지 기획 — 들어갈 내용 결정
20분안티그래비티에게 요청하기 전에 내 가게 정보를 먼저 정리해야 합니다. 정보가 구체적일수록 결과물이 좋아집니다.
✋ 직접 해보기
내 가게·서비스 한 줄 소개
페이지 상단에 들어갈 가장 중요한 한 문장. "누구를 위해 무엇을 하는 곳인지" 담아주세요.
랜딩페이지에 들어갈 내용 목록
위에서 아래로 순서대로 적어주세요. 없는 항목은 빼도 됩니다.
안티그래비티로 랜딩페이지 제작
50분아래 방법 중 하나를 선택하세요. A. 완성 템플릿 수정이 더 빠릅니다.
⭐ A. 완성 템플릿 골라서 수정 (추천 — 더 빠름)
아래 3가지 스타일 중 내 가게 분위기에 맞는 것을 클릭해서 미리보기하세요. 파일을 다운로드해서 안티그래비티에 “이 파일에서 🔧 표시된 부분을 내 정보로 바꿔줘”라고 요청하면 됩니다.
B. 처음부터 만들기 (프롬프트 사용)
내 가게 스타일이 위 세 가지와 다르다면 아래 프롬프트 템플릿을 복사해서 안티그래비티에 붙여넣으세요.
나는 [업종] 사업자야. 내 가게 랜딩페이지를 만들어줘. [기본 정보] - 가게 이름: ○○ - 한 줄 소개: ○○ - 연락처: ○○ (카카오톡 채널 or 전화번호) - 운영 시간: ○○ - 인스타그램: @○○ [들어갈 섹션 순서] 1. 상단: 로고 이미지 + 가게 이름 + 한 줄 소개 2. 대표 상품/서비스: ○○ (설명과 가격) 3. 주문 방법 / 연락처 안내 4. 인스타그램 피드 (Behold 임베드 자리 — 나중에 코드 넣을 거니까 placeholder로 만들어줘) 5. 하단: 연락처 버튼 [디자인 방향] - 배경색: ○○ (예: 흰색, 연베이지, 연그린 등) - 포인트 색상: ○○ - 분위기: ○○ (예: 따뜻하고 자연스럽게 / 깔끔하고 모던하게) - 폰트: 한국어 지원되는 가독성 좋은 것으로 단일 HTML 파일 하나로 만들어줘. CSS는 파일 안에 포함해서.
- 위 프롬프트를 복사해서 ○○ 부분을 내 정보로 채우기
- 안티그래비티 열기 → 새 채팅 → 프롬프트 붙여넣기
- HTML 파일이 만들어지면 브라우저에서 열어서 확인
- “배경색을 ○○으로 바꿔줘” “대표 이미지 위치를 위로 올려줘” 식으로 수정 요청
✋ 직접 해보기
완성한 안티그래비티 프롬프트
아래 템플릿을 내 정보로 채워서 완성한 후 여기에 저장해두세요. 수정할 때 다시 씁니다.
Behold 코드 삽입 — 인스타 피드 연결
15분랜딩페이지 초안이 완성됐으면 Behold 임베드 코드를 넣어달라고 요청합니다.
아래는 Behold 인스타그램 피드 임베드 코드야.
이걸 현재 랜딩페이지의 "인스타그램 피드" 섹션에 넣어줘.
placeholder 자리가 있으면 그 자리에, 없으면 연락처 바로 위에 추가해줘.
[Behold 임베드 코드 붙여넣기]
<div id="behold-widget-○○○"></div>
<script>
(function() {
var script = document.createElement('script');
script.src = 'https://w.behold.so/widget.js';
document.head.appendChild(script);
})();
</script>배포 — Vercel로 링크 받기
20분- 안티그래비티에서 “GitHub에 올려줘” 요청 (또는 파일 저장 후 직접 GitHub 업로드)
- vercel.com 접속 → Add New Project
- GitHub 저장소 선택 → Deploy 클릭
- 1~2분 후 *.vercel.app 주소 생성
- 링크 열어서 인스타 피드까지 잘 나오는지 확인
✋ 직접 해보기
완성된 페이지 주소
Vercel 배포 후 받은 URL을 적어두세요.