소개
bkit 설치가 계속 안되어서 안티그래피티를 이용해서 상세페이지 만든 것으로 대체 합니다.(9시 이후 겨우 오류 해결 했지만 시간상 담주부터 클로드 코드 사례로 쓸께요)
bkit이나 클로드코드에 비할 것은 아니지만 너무 간단한 안티그래비티 이네요
진행 방법
어떤 도구를 사용했고, 어떻게 활용하셨나요?
안티그래비티
버셀
깃허브
Tip: 사용한 프롬프트 전문을 꼭 포함하고, 내용을 짧게 소개해 주세요.
1 민간자격증 수임을 위한 상세페이지를 만들어줘
2 prd를 만들어줘
3 상담용 구글폼 만들건데 체크리스트를 반영해서 만들어줘 앱스스크립트 코드로 짜줘
4. 개인정보를 모두 연결하고 사진도 넣어서 고급스럽게 랜딩상세페이지 만들어줘
Tip: 활용 이미지나 캡처 화면을 꼭 남겨주세요.
https://certificate16.netlify.app/ 결과물
Tip: 코드 전문은 코드블록에 감싸서 작성해주세요. ( / 을 눌러 '코드 블록'을 선택)
앱스스크립트 코드
// 'createConsultationForm'이라는 이름의 자동화 작업을 시작합니다.
function createConsultationForm() {
// 1. 새로운 구글 폼 생성 및 기본 안내말 설정
// 설문지 파일의 제목을 만듭니다.
var form = FormApp.create('전문 행정 및 경영 컨설팅 상담 신청서');
// 설문지 제목 바로 아래에 들어갈 인사말과 안내 사항을 적어줍니다.
form.setDescription('안녕하세요. 정확하고 신속한 상담을 위해 아래 체크리스트와 내용을 꼼꼼히 작성해 주시면, 확인 후 빠르게 연락드리겠습니다.');
// 2. 기본 인적사항 질문 추가 (주관식 짧은 답변)
form.addTextItem() // 짧은 글을 입력받는 칸을 추가합니다.
.setTitle('1. 성함 (또는 기업명/단체명)') // 질문 제목
.setRequired(true); // true로 설정하면 고객이 필수로 입력해야 넘어갑니다.
form.addTextItem()
.setTitle('2. 연락처 (예: 010-1234-5678)')
.setRequired(true);
form.addTextItem()
.setTitle('3. 회신받으실 이메일 주소')
.setRequired(false); // 이메일은 필수가 아닌 선택 사항으로 둡니다.
// 3. 전문 상담 분야 체크리스트 추가 (여러 개 중복 선택 가능)
var categoryItem = form.addCheckboxItem(); // 네모난 체크박스 문항을 추가합니다.
categoryItem.setTitle('4. 상담이 필요하신 분야를 모두 선택해 주세요.')
.setChoices([ // 고객이 선택할 수 있는 보기들을 나열합니다.
categoryItem.createChoice('민간자격증 신규 등록 및 운영 규정 설계'),
categoryItem.createChoice('기업 행정 및 인허가 (수입식품, 공장, 비영리법인 등)'),
categoryItem.createChoice('산업재해(산재) 최초 신청 및 불복/행정심판'),
categoryItem.createChoice('외국인 비자(E-7, F-5, F-6 등) 및 출입국 업무'),
categoryItem.createChoice('생활 민원 행정 (내용증명, 영업정지 구제 등)'),
categoryItem.createChoice('기타 (아래 상세 내용에 자유롭게 적어주세요)')
])
.setRequired(true);
// 4. 상세 내용 작성란 추가 (주관식 긴 답변)
form.addParagraphTextItem() // 긴 글을 입력받는 커다란 칸을 추가합니다.
.setTitle('5. 현재 처하신 상황이나 궁금하신 점을 자세히 적어주세요.')
.setHelpText('예: 언제 어떤 문제가 발생했는지, 현재 보유한 서류가 있는지 적어주시면 훨씬 정확한 초기 진단이 가능합니다.') // 질문 아래에 작게 뜨는 힌트입니다.
.setRequired(true);
// 5. 생성 완료 후 링크 주소 알려주기
// 코드가 정상적으로 끝난 뒤, 화면 아래에 설문지 접속 주소를 출력해 줍니다.
Logger.log('🛠️ 내가 양식을 수정할 수 있는 [관리자용 주소]: ' + form.getEditUrl());
Logger.log('🔗 고객에게 카톡으로 보낼 [상담 신청 주소]: ' + form.getPublishedUrl());
}
결과와 배운 점
배운 점과 나만의 꿀팁을 알려주세요.
과정 중에 어떤 시행착오를 겪었나요?
bkit이 계속 오류가 나서 질문을 했더니
에러 메시지를 보니 원인이 명확해졌습니다. **SEC_E_UNTRUSTED_ROOT**라는 오류는 윈도우의 보안 인증서(SSL) 체계가 GitHub의 인증서를 신뢰하지 못할 때 발생하는 전형적인 네트워크 보안 문제입니다.
보통 회사 보안망, 백신 프로그램, 혹은 윈도우 인증서 업데이트가 누락되었을 때 자주 발생합니다. 아래 3가지 해결법 중 하나로 바로 해결하실 수 있습니다.
방법 1: Git의 SSL 검증을 잠시 끄기 (가장 빠름)
가장 확실하고 빠른 방법입니다. 터미널(PowerShell 또는 CMD)에 아래 명령어를 복사해서 붙여넣으세요. 이 설정은 Git이 인증서 오류를 무시하고 다운로드할 수 있게 해줍니다.
PowerShell
git config --global http.sslVerify false
그다음 다시 Claude CLI에서 설치를 시도해 보세요:
Bash 바쉬
/plugin marketplace add popup-studio-ai/bkit-claude-code
/plugin install bkit
방법 2: GitHub 인증서 수동 업데이트 (권장)
보안을 유지하면서 해결하고 싶다면, 최신 인증서 파일을 Git에 인식시켜야 합니다. 터미널에서 아래 명령어를 입력하세요.
PowerShell
git config --global http.sslBackend schannel
이 명령어는 윈도우 자체 보안 라이브러리(Schannel)를 사용하도록 설정하여 인증서 문제를 우회합니다.
방법 3: 수동 다운로드 (만약 위 방법이 모두 안 될 때)
네트워크 방화벽이 너무 강력해서 명령어가 계속 막힌다면, 에러 메시지에 나온 경로에 직접 파일을 넣어주는 방법이 있습니다.
윈도우 탐색기에서
C:\Users\admin\.claude\plugins\marketplaces\폴더로 이동합니다.해당 위치에
popup-studio-ai-bkit-claude-code라는 이름의 폴더를 만듭니다.bkit 깃허브 주소에 접속해서
Download ZIP으로 파일을 받은 뒤, 위 폴더에 압축을 풉니다.그 후 Claude CLI를 재시작합니다.
오류 해결
결국 1번 방법에
powershell -ep bypass -c "irm https://raw.githubusercontent.com/popup-studio-ai/ai-driven-work-quickstart/main/installer/install.ps1 | iex"
적용해서 설치는 된거 같습니다
그러나 시간상 클로드코드는 담부터 사례 써야 겠습니다.
안티그래비티는 오류 없이 단번에 결과가 나와서 정말 편했습니다
도움이 필요한 부분이 있나요?
클로드코드를 좀 더 연구해서 고급진거 해보고 싶습니다
앞으로의 계획이 있다면 들려주세요.
사업 아이템과 관련한 것들을 많이 만들고 싶은데 버셀도 돈이 들어가네요
도움 받은 글 (옵션)
참고한 지피터스 글이나 외부 사례를 알려주세요.
안티그래비티는 타사 강의를 듣고 단번에 되었습니다. 여기선 너무 쉬운 바이브코딩이라 언급이 잘 안되는거 같습니다.
