소개
제가 지피터스에 도전한 개기는 현장에서 많은 뷰티 샵 원장님들을 만나며 저와 그 원장님들의 공통점이라고 느낀 것은,
"실력은 있는데 마케팅까지 하며 살림도 하면서 너무 힘든데 그 힘듬을 덜기 위한 방법을 고민하게 되었고 고민끝에 시스템을 갖추자 였습니다.
AI 자동화와 AI마케팅을 배워야 겠다고 생각 해서 지피터스에 오게 된 것입니다.
21기 교육앱을 수강하면서 두번의 딸각하고 만들어지는 것을 경험하고 욕심을 부려 제 사업과 관련되게 만들어 보려고 도전했다가 일주일은 정말 뻘짓만 하면서 안티그래비티와 엄청난 대화를 해보고 포기 하고 클로드 코드와도 엄청난 대화를 주고 받았어요.
실패한 이미지들이 너무 많아 인증하기도 힘들고 그 이미지를 올리자니 제가 짜증이 올라와
어느정도 안테그래비티와 클로드코드와 친해진 이후 과정을 올리도록 할께요.
단순한 홍보용 앱이 아니라, AI가 직접 상담 로직을 짜주고 메뉴 구성을 보좌하는 '내 손안의 비서'를 만드는 것이 목표였습니다.
진행 방법
사용도구: AntiGravity, Claude Code, Gemini, ChatGPT(일주일 뻘짓 후 다시 시작)
ChatGPT : 가장 오래 사용했었고 저에 대해 잘 알기에 내가 하고 싶은게 뭔지, 구체적으로 정립, 초안 짜기, 내가 가지고 있는 다양한 아이디어 브레인스토밍
Gemini : AntiGravity, Claude 사용방법등 다양한 검색 및 딱딱하지 않은 앱의 글 작성
AntiGravity : 랜딩페이지 및 앱의 전체적인 시각적 구조와 레이아웃 자동 생성
Claude Code : 복잡한 기능 구현 및 코드 수정, 앱의 로직을 정교하게 다듬는 역할
AntiGravity : 랜딩페이지 및 앱의 전체적인 시각적 구조와 레이아웃 자동 생성(인증)
https://vocal-queijadas-c3237a.netlify.app/
// Navigation Logic function navigateTo(viewId) { const views = document.querySelectorAll('.view'); views.forEach(view => { view.classList.remove('active'); }); const targetView = document.getElementById(`view-${viewId}`); if (targetView) { targetView.classList.add('active'); window.scrollTo({ top: 0, behavior: 'smooth' }); } if (viewId === 'hub') { renderHubGrid(); } } // Home View Logic function toggleTrustCard(element) { const isExpanded = element.getAttribute('data-expanded') === 'true'; // Optional: Close other expanded cards // document.querySelectorAll('.trust-card').forEach(card => card.setAttribute('data-expanded', 'false')); element.setAttribute('data-expanded', !isExpanded); } // Hub Grid Data const hubCards = [ { id: 'beauty-service', title: '뷰티 서비스 상담·예약', desc: '관리 안내부터 상담, 예약, 후기까지 고객 경험이 자연스럽게 이어지는 상담·예약 공간입니다.', size: 'large', icon: '✨' }, { id: 'ai-marketing', title: 'AI 마케팅 시스템', desc: 'AI를 기반으로 마케팅, 상담, 매출 흐름까지 체계적으로 설계하는 실전 시스템을 안내합니다.', size: 'large', icon: '🤖' }, { id: 'edu-hub', title: '교육 허브', desc: '강의, 실습, 자료를 체계적으로 연결해 실무에 바로 적용할 수 있도록 돕는 교육 공간입니다.', size: 'large', icon: '🎓' }, { id: 'exec-prog', title: '완성형 실행 프로그램', desc: '직접 배우고 바로 적용할 수 있도록 설계된 실행 중심 프로그램입니다.', size: 'large', icon: '🚀' }, { id: 'intro-app', title: '완성형 도입 앱', desc: '이미 설계된 구조를 빠르게 도입하고 활용할 수 있도록 돕는 앱형 솔루션입니다.', size: 'large', icon: '📱' }, { id: 'story', title: '김은영 대표 스토리', desc: '20년 현장 경험과 전문성을 바탕으로 쌓아온 브랜드 스토리입니다.', size: 'small', icon: '👩💼' }, { id: 'philosophy', title: '브랜드 철학', desc: '뷰티스타김은영이 지향하는 품격, 신뢰, 성장의 철학을 소개합니다.', size: 'small', icon: '🌿' }, { id: 'library', title: '전자책 라이브러리', desc: '성장에 도움이 되는 실전형 전자책 콘텐츠를 모아둔 지식 공간입니다.', size: 'small', icon: '📚' }, { id: 'studio', title: '콘텐츠 스튜디오', desc: '브랜드의 신뢰를 높이는 영상, 숏폼 등 콘텐츠 공간입니다.', size: 'small', icon: '🎬' }, { id: 'automation', title: 'AI 자동화 시스템', desc: '상담, 예약, 운영 흐름을 더욱 효율적으로 연결하는 자동화 시스템입니다.', size: 'small', icon: '⚙️' }, { id: 'inquiry', title: '문의·신청 센터', desc: '상담, 예약, 교육 등 필요한 모든 문의를 남길 수 있는 연결 창구입니다.', size: 'small', icon: '✉️' } ]; const serviceData = { 'beauty-service': { categories: [ { name: '생장술', items: ['눈썹 생장술', '속눈썹 생장술', '모발 생장술'] }, { name: '헤드 스파', items: ['두피 측정 분석', '두피 환경 정돈 케어', '탄산 버블 스파', '아로마 밸런스 케어'] }, { name: '피부 관리', items: ['초음파 관리', '모공 관리', '아몬드 필링', '플라즈마 탄력 관리'] }, { name: '고주파 마사지', items: ['고주파 바디 관리', '순환 중심 관리', '이완 중심 관리'] }, { name: '두피 SMP', items: ['일반 SMP', '맞춤형 SMP', '헤어라인 SMP'] }, { name: '반영구', items: ['눈썹', '아이라인', '입술', '헤어라인'] }, { name: '문제성 발톱', items: ['내성 발톱 관리', '두꺼운 발톱 케어', '무좀 위생 케어'] }, { name: '네일', items: ['네일아트', '페디아트', '손/발 케어'] }, { name: '속눈썹', items: ['속눈썹 연장', '속눈썹 펌', '속눈썹 생장술'] } ], intro: "20년 경력의 노하우가 담긴 프리미엄 뷰티 솔루션입니다. 단순한 관리를 넘어 당신의 본연의 아름다움을 깨워드립니다.", target: "전문적인 관리가 필요하신 분, 반복되는 고민을 근본적으로 해결하고 싶으신 분들께 추천합니다." }, 'ai-marketing': { intro: "AI 기술을 활용하여 마케팅의 효율을 극대화합니다. 블로그, 인스타그램, 네이버 플레이스 운영을 자동화하고 체계화합니다.", core: ['블로그 자동화', '인스타 콘텐츠 기획', '네이버 플레이스 최적화', '상담 자동화'] }, 'edu-hub': { intro: "뷰티 원장님들을 위한 실무 중심 교육 시스템입니다. AI 마케팅부터 앱 제작까지, 내 비즈니스에 바로 적용하는 기술을 배웁니다.", core: ['AI 마케팅 교육', '자동화 교육', '상담앱 만들기', '콘텐츠 제작 실습'] }, 'story': { intro: "20년 전, 작은 뷰티샵에서 시작한 꿈이 이제는 수많은 원장님들의 성장을 돕는 '뷰티 시스템'으로 성장했습니다.", target: "김은영 대표의 발자취가 궁금하신 분들께 공유합니다.", details: "현장의 치열함과 학문의 깊이를 모두 경험하며 깨달은 것은, 결국 '사람'과 '시스템'의 조화였습니다." }, 'philosophy': { intro: "품격 있는 아름다움은 정교한 시스템 위에서 꽃피웁니다.", details: "신뢰를 기반으로 고객에게는 감동을, 원장님께는 여유와 성장을 드리는 것이 뷰티스타김은영의 철학입니다." } }; const diagnosisQuestions = [ { q: "현재 관리 방식에 대한 만족도는 어느 정도인가요?", options: ["매우 만족", "보통", "불만족", "시스템이 필요함"] }, { q: "마케팅에 할애하는 시간은 하루에 몇 시간인가요?", options: ["1시간 미만", "1-3시간", "3시간 이상", "전혀 못하고 있음"] }, { q: "새로운 기술 도입에 대한 거부감이 있으신가요?", options: ["매우 개방적", "필요하면 도입", "조금 두려움", "매우 보수적"] } ]; function renderHubGrid() { const grid = document.getElementById('hub-grid'); if (!grid) return; grid.innerHTML = ''; hubCards.forEach(card => { const cardEl = document.createElement('div'); cardEl.className = `hub-card ${card.size}`; cardEl.onclick = () => showDetail(card.id); cardEl.innerHTML = ` <div class="hub-card-inner"> <span class="hub-card-icon">${card.icon}</span> <div class="hub-card-text"> <h3>${card.title}</h3> <p>${card.desc}</p> </div> <button class="btn-enter">들어가기 →</button> </div> `; grid.appendChild(cardEl); }); } const detailTabs = [ '서비스 소개', '추천 대상', '관리 특징', '진행 안내', '후기 모음', '사후관리', '상담 문의' ]; let currentCardId = null; let currentTabIndex = 0; function showDetail(cardId) { currentCardId = cardId; currentTabIndex = 0; const card = hubCards.find(c => c.id === cardId); if (!card) return; document.getElementById('detail-title').innerText = card.title; renderTabs(); renderTabContent(); navigateTo('detail'); } function renderTabs() { const tabsContainer = document.querySelector('.detail-tabs'); tabsContainer.innerHTML = ''; detailTabs.forEach((tab, index) => { const tabBtn = document.createElement('button'); tabBtn.className = `tab ${index === currentTabIndex ? 'active' : ''}`; tabBtn.innerText = tab; tabBtn.onclick = () => { currentTabIndex = index; renderTabs(); renderTabContent(); }; tabsContainer.appendChild(tabBtn); }); } function renderTabContent() { const contentArea = document.getElementById('detail-content'); const tabName = detailTabs[currentTabIndex]; const data = serviceData[currentCardId] || { intro: "준비 중인 서비스입니다.", target: "곧 공개됩니다." }; let bodyContent = ''; switch(tabName) { case '서비스 소개': bodyContent = `<p class="intro-text">${data.intro}</p>`; if (data.categories) { bodyContent += ` <div class="category-list" style="margin-top: 2rem;"> ${data.categories.map(cat => ` <div class="category-item" style="margin-bottom: 1.5rem;"> <h4 style="color: var(--primary-gold); margin-bottom: 0.5rem;">${cat.name}</h4> <ul style="list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem;"> ${cat.items.map(item => `<li style="background: #f9f9f9; padding: 0.4rem 0.8rem; border-radius: 6px; font-size: 0.85rem;">${item}</li>`).join('')} </ul> </div> `).join('')} </div> `; } if (data.core) { bodyContent += ` <ul class="core-list" style="margin-top: 1.5rem; list-style: none;"> ${data.core.map(item => `<li style="margin-bottom: 0.8rem; display: flex; align-items: center; gap: 0.5rem;"> <span style="color: var(--primary-gold);">✓</span> ${item} </li>`).join('')} </div> `; } break; case '추천 대상': bodyContent = `<p>${data.target || "전문적인 변화를 원하시는 모든 분들께 추천합니다."}</p>`; break; case '관리 특징': bodyContent = ` <ul style="list-style: none; padding: 0;"> <li style="margin-bottom: 1rem;"><strong>✨ 독보적인 기술력:</strong> 20년 현장 경험을 녹여낸 정교한 테크닉</li> <li style="margin-bottom: 1rem;"><strong>📅 고객 맞춤 설계:</strong> 개인별 컨디션에 따른 1:1 진단 및 관리</li> <li style="margin-bottom: 1rem;"><strong>🧼 철저한 위생 관리:</strong> 모든 도구 멸균 처리 및 프리미엄 제품 사용</li> </ul> `; break; case '진행 안내': bodyContent = ` <div class="process-flow"> <p>문의 접수 → 1:1 사전 상담 → 맞춤 진단 → 본 서비스 진행 → 사후 케어 안내</p> </div> `; break; case '후기 모음': bodyContent = ` <div class="reviews"> <p>"인생 관리를 만났어요. 원장님이 정말 꼼꼼하세요." - 홍*희 고객님</p> <p>"마케팅 교육 듣고 바로 매출이 올랐습니다. 시스템의 힘이네요." - 김*주 원장님</p> </div> `; break; case '사후관리': bodyContent = ` <p>관리 후 24시간 내 주의사항을 꼭 확인해 주세요. 제공해 드리는 생활 가이드에 따라 유지력이 달라질 수 있습니다.</p> <div class="diagnosis-promo" style="margin-top: 2rem; padding: 1.5rem; background: var(--bg-color); border-radius: 12px; text-align: center;"> <h4 style="margin-bottom: 0.5rem;">나의 맞춤 관리 상태는?</h4> <p style="font-size: 0.85rem; color: #666; margin-bottom: 1rem;">현재 상태를 점검하고 최적의 솔루션을 확인해보세요.</p> <button class="btn btn-primary" onclick="startDiagnosis()" style="font-size: 0.85rem; padding: 0.6rem 1.2rem;">맞춤 진단 시작하기</button> </div> `; break; case '상담 문의': bodyContent = renderInquiryForm(); break; } let contentHtml = ` <div class="detail-card"> <h2>${tabName}</h2> <div id="tab-content-inner" class="tab-body" style="margin-top: 1.5rem; line-height: 1.8;"> ${bodyContent} </div> </div> `; contentArea.innerHTML = contentHtml; } function startDiagnosis() { const inner = document.getElementById('tab-content-inner'); let qHtml = ` <div class="diagnosis-container"> <h3>맞춤 진단 체크</h3> <p style="font-size: 0.9rem; color: #666; margin-bottom: 1.5rem;">현재 상태를 정확히 파악하여 최적의 방향을 안내해 드립니다.</p> ${diagnosisQuestions.map((q, i) => ` <div class="q-item" style="margin-bottom: 1.5rem;"> <p style="font-weight: 500; margin-bottom: 0.8rem;">${i+1}. ${q.q}</p> <div class="options" style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem;"> ${q.options.map(opt => `<button onclick="nextStep()" style="padding: 0.8rem; border: 1px solid #eee; border-radius: 8px; background: white; cursor: pointer; font-size: 0.85rem;">${opt}</button>`).join('')} </div> </div> `).join('')} <button class="btn btn-primary" onclick="showResults()" style="width:100%; margin-top: 1rem;">진단 결과 보기</button> </div> `; inner.innerHTML = qHtml; } function nextStep() { // Simple placeholder for selection logic } function showResults() { const inner = document.getElementById('tab-content-inner'); inner.innerHTML = ` <div class="result-container" style="text-align: center;"> <div class="score-circle" style="width: 100px; height: 100px; border-radius: 50%; border: 5px solid var(--primary-gold); margin: 0 auto; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 700; color: var(--primary-gold); margin-bottom: 1rem;">85점</div> <h3>현재 상태: <span style="color: var(--primary-gold);">'성장 잠재력 단계'</span></h3> <p style="margin: 1.5rem 0; font-size: 0.95rem; color: #555;">기본적인 실력은 훌륭하시나, 이를 시스템화하여 효율을 높일 필요가 있는 단계입니다. 조급해하지 마시고 하나씩 자동화를 도입해보시는 것은 어떨까요?</p> <div class="recommendation" style="background: #f9f9f9; padding: 1.5rem; border-radius: 12px; margin-bottom: 2rem;"> <h4 style="margin-bottom: 0.5rem;">추천 방향</h4> <p style="font-size: 0.9rem;">AI 마케팅 자동화 서비스를 통해 상담 시간을 줄이고 본업에 집중하시는 것을 추천드립니다.</p> </div> <div class="result-actions" style="display: flex; flex-direction: column; gap: 0.8rem;"> <button class="btn btn-primary" onclick="currentTabIndex=6; renderTabs(); renderTabContent();">상담 문의하기</button> <button class="btn" style="border: 1px solid #ddd;" onclick="navigateTo('hub')">자세히 더 보기</button> </div> </div> `; } function renderInquiryForm() { return ` <div class="inquiry-form-container"> <hr style="margin: 2rem 0; border: none; border-top: 1px solid #eee;"> <h3>빠른 문의 신청</h3> <div class="form-group" style="margin-top: 1rem;"> <label style="display:block; margin-bottom: 0.5rem; font-size: 0.9rem;">성함</label> <input type="text" placeholder="이름을 입력해 주세요" style="width:100%; padding: 0.8rem; border: 1px solid #ddd; border-radius: 8px;"> </div> <div class="form-group" style="margin-top: 1rem;"> <label style="display:block; margin-bottom: 0.5rem; font-size: 0.9rem;">연락처</label> <input type="tel" placeholder="010-0000-0000" style="width:100%; padding: 0.8rem; border: 1px solid #ddd; border-radius: 8px;"> </div> <div class="form-group" style="margin-top: 1rem;"> <button class="btn btn-primary" style="width:100%; justify-content:center;">상담 예약 신청하기</button> </div> <div class="kakao-guide" style="margin-top: 1.5rem; text-align: center;"> <p style="font-size: 0.85rem; color: #666; margin-bottom: 0.8rem;">민감한 내용은 오픈카톡으로 더 빠르게 문의 가능합니다.</p> <a href="#" class="btn" style="background: #FEE500; color: #3C1E1E; width: 100%; justify-content: center; font-size: 0.9rem;">오픈카톡 문의하기</a> </div> </div> `; } // Initial state document.addEventListener('DOMContentLoaded', () => { // We could check URL hash here if needed });색과 디자인이 마음에 안들어 여러 과정으로 변경 해보려 했으나 마음에 드는 결과 나오지 않아 안티그래비티와의 작업은 포기
4.Claude Code : 복잡한 기능 구현 및 코드 수정, 앱의 로직을 정교하게 다듬는 역할(너무 많은 과정들이 있어 다 인증 하지 못하고 최종 만든 결과물을 인증 , 만족스럽지는 못합니다.)
<결과물 링크>
결과와 배운 점
배운 점: 기술보다 중요한 건 '수정의 끈기'라는 것을 뼈져리게 느꼈어요. 한 번에 되는 건 초보인 나에겐 없구나를 2주동안 고생으로 스스로 느꼈고, 각 툴들에게 요청한 것들이 꼬일 때마다 안티그래비티와 클로드코드로 안되서 Gemini와 ChatGPT까지 동원해 어떻게든 해결해려는 제 끈기에 어떻게는 원하는 것에 가까워져는 간다를 배웠습니다. 그리고 원하는 결과와 시간을 단축하기 위해 내가 기본툴들의 습성을 알고 똑똑한 지시를 해야겠다는 것도 완전 몸빵으로 배웠습니다.
꿀팁: 너무 많은 지시를 해도 안된다는 것을 스터디장님에게 배워서 간단하게 여러번의 지시로 조금씩 수정한것이 진전이 있었으며 초안은 AntiGravity, 로직과 수정은 Claude Code, 기획은 ChatGPT과 각종 소개와 설명글작성 Gemini에게 맡기니 코딩 한 줄 몰라도 앱이 만들어졌습니다. 머리에는 생각들이 많은데 이런 결과물로 만들고 정리하기가 너무 힘들었는데 2주동안의 삽질이 그래도 진짜 내가 하고 싶은 것이 무엇인지 너무 힘들었지만 심사숙고하고 확립할 수 있던 귀한 시간이였습니다.
참고로 자격증은 1급은 5점 차이로 떨어지고
1급은 합격했네요 ㅠㅠ
트레이너는 시험보는 것이 자격이 있다고 하는데 수업중에 스터디장님이 설명좀 해주시면 감사하겠습니다.
