4강. Antigravity 실습
웹서버/데이터베이스 연결 + 설문폼 만들기 + 관리자페이지 + 크롬 확장프로그램
목표
카페24 웹호스팅 신청 후 안티그래비티 SFTP 확장 프로그램 설치 후 FTP 연결과 데이터베이스 연결
Antigravity로 설문폼 만들기. “요구사항 → 계획 → 구현 → 검증” 흐름을 끝까지 1회 완주합니다.
결과물로 설문폼 1개 + 관리자페이지 1개 + 크롬 확장프로그램 1개를 만들고, 로컬에서 동작까지 확인합니다.
포인트
작고 빠른 루프
"크게 한 번에"가 아니라
작게 만들고 → 바로 실행 → 바로 수정
루프로 완성합니다.
반복을 통한 체화
설문폼/관리자/크롬 확장프로그램을
같은 방식(요구사항/계획/검증)으로
반복해 익숙해지게 합니다.
전체 데이터 흐름
1. 설문폼
고객의 리뷰/만족도
응답 제출
2. 데이터 베이스
폼 데이터
DB 또는 파일에 저장
3. 관리자 페이지
응답 내역 확인 및
CSV 등 내보내기
사전 준비 사항
domain 호스팅 & 환경
- 1 카페24 웹호스팅 가입 및 신청 (절약형 또는 일반형)
- 2 Antigravity SFTP 확장 프로그램 설치
build 기본 연동
- 3 FTP 연결 테스트 및 확인
- 4 데이터베이스(DB) 연결 설정
SFTP 확장프로그램 설치
VSCode 또는 관련 에디터에서 원격 서버 작업을 위한 확장 설치
search 확장 탭에서 검색하기
에디터 좌측의 확장(Extensions) 탭을 열고,
검색창에 SFTP를
입력합니다.
Natizyskunk가 제작한 확장을 찾아 최신 버전으로 설치를 진행해 주세요.
SFTP Config 설정
명령어 팔레트로 Config를 생성하고 접속 정보를 입력합니다.
keyboard Command Palette 열기
아래 단축키를 눌러 명령어 창을 엽니다:
SFTP: Config 를 검색하여 선택하면 현재 프로젝트 폴더에 기본
설정 파일(.vscode/sftp.json)이
생성됩니다. 좌측 JSON 정보를 입력하세요.
{
"name": "aicodelab.net",
"host": "147.93.78.144",
"protocol": "ftp",
"port": 21,
"username": "FTP ID",
"password": "********", // 본인 비밀번호를 입력하세요.
"remotePath": "/",
"uploadOnSave": true
}SFTP 접속 확인
설정된 정보로 호스트에 접속되는지 확인합니다.
단축키 입력
를 클릭하여 명령 창을 엽니다.
명령어 실행 및 접속
명령 창에
>
sftp:list all
를 검색합니다.
등록된 host 명(aicodelab.net)을
선택 (클릭).
호스트명 클릭 후 리모트 폴더 리스트가 나오면 접속이 완료된 것입니다.
실습 A) 설문폼 만들기
요구사항에 맞춰 Antigravity에 코드 생성을 요청하는 프롬프트 작성하기
아래 요구사항에 맞는 "상품 만족도 설문폼" 화면과 동작 코드를 작성해 줘.
[구현 대상] 상품 만족도 설문폼 (제출 완료 후 결과 화면 포함)
[언어/스택] HTML, CSS(Tailwind 활용), Javascript, PHP 기반
[목표] 구매자 만족도와 개선점 수집
[대상] 최근 30일 내 구매 고객
[문항] 전체 만족도(1~5) [필수]
[문항] 배송 만족도(1~5) [선택]
[문항] 재구매 의향(예/아니오) [필수]
[문항] 개선 의견(서술형) [선택]
[입력] 이름(텍스트) [선택], 주문번호(텍스트) [필수]
[동의] 개인정보 수집·이용 동의 체크 [필수]
[제출] 완료 화면 표시 및 중복 제출 방지(세션/토큰) 적용
[데이터 저장] 파일 시스템 저장을 제외하고 DB에 저장되게 해주고, 데이터 저장 후 성공/실패 여부를 반환해줘.
[진행 방식] 한 번에 모든 것을 작성하지 말고, 단계별(1~4단계)로 차근차근 구현하면서 확인시켜 줘.
설문폼 구현 절차
Antigravity로 Plan 생성 → 승인
폼 UI 구현
필수 입력, 선택형/서술형, 유효성 검사 적용
응답 저장 연결 및 확인
예: 파일 / DB 중 1개 선택하여 저장 검증
제출 완료 화면 + 예외 처리
완료 뷰 전환 및 기본 오류 처리(빈 값/실패 메시지)
실습 B) 관리자페이지 만들기
관리자 화면 요구사항 정의(목록/상세/검색/다운로드)
[목표] 설문 응답을 관리하는 관리자페이지 요구사항을 정의해줘.
[전제] 현재 프로젝트에는 설문폼(응답 저장)이 이미 존재한다고 가정하고, 저장 방식(DB/파일)은 레포에서 탐색해 파악해.
[산출물]
- 1) 화면 구성(목록/상세/검색/다운로드) + URL 라우트 설계
- 2) 데이터 모델(필드, 예시 데이터)
- 3) 구현 순서(작게 쪼개서 5~8단계)
[원칙] 모르면 합리적인 기본값을 제안하고, Plan 형태로 먼저 보여줘.
관리자 화면 요구사항 정의
응답 목록 페이지
최신순 정렬 및 간단 필터 제공
응답 상세 보기
문항별 답변 표시
내보내기 기능
CSV 다운로드 또는 복사/공유 지원
권한 최소 적용
간단 로그인 또는 접근 경로 제한 중 택 1
관리자 페이지 구현 프롬프트
관리자 페이지 구현 프롬프트
admin 폴더 생성 후 admin 하위 디렉토리 작업.
구조는 탑, 사이드, 내용, 푸터로 구성.
[관리자 로그인 정보]
아이디 : admin@naver.com
패스워드 : 123456
[사이드 메뉴]
- - 회원관리 : CRUD 구현
- - 설정 > 사이트접속 통계 구현
크롬 확장프로그램 설치
크롬에서 개발자 전용 압축해제된 확장 로드
실습 파일: 쿠팡 리뷰 확장 프로그램
아래 압축 파일을 다운로드 후 적당한 폴더에 압축을 해제해 주세요.
settings 확장 로드 설정
-
1
주소창에 chrome://extensions 입력 후 접속
-
2
오른쪽 상단에서 개발자 모드 토글 ON
-
3
상단의 "압축해제된 확장 프로그램을 로드합니다" 버튼 클릭
check_circle 확인 및 사용
-
folder_open
manifest.json이 들어 있는 확장 폴더를 그대로 선택
-
toggle_on
리스트에 확장이 나타나면 스위치가 켜져 있는지 확인
-
push_pin
툴바에 아이콘이 안 보이면 퍼즐 아이콘(확장 메뉴)에서 고정해 두면 됩니다.
Buffer.com 사용방법
작성된 콘텐츠를 클릭 한 번으로 여러 소셜 미디어 플랫폼에 동시 자동화 게재하기
1. 소셜 채널 연결하기
- check Buffer 가입 후 대시보드 진입
- check 운영 중인 SNS 플랫폼(Instagram, Facebook, LinkedIn, X 등) 연동 승인
- check 사용할 채널을 클릭하여 활성화
2. 콘텐츠 발행 및 예약
- check 우측 상단 [Create Post] 버튼 클릭
- check 작성한 텍스트 또는 이미지/비디오 업로드 및 배포 채널 선택
- check 바로 발행(Share Now) 하거나 특정 시간으로 일정 예약(Schedule Post) 설정
커스터마이제이션 Rule
## General Rules
- * Think in English, explain in Korean: 내부 사고/분석은 영어로, 사용자에게 작업 완료 설명은 한글로.
- * Walkthrough, Implementation Plan 및 관련 문서는 한글로 작성한다.
- * 브라우저 테스트는 진행하지 않는다.
## Project Context
- * 본 프로젝트는 PHP 기반의 웹 애플리케이션이다.
- * DB 마이그레이션/데이터 수정 시:
- - PHP 파일로 DB 관련 쿼리를 생성한다.
- - 생성한 쿼리는 curl 명령으로 실행한다.
- - 실행이 완료된 파일은 즉시 삭제한다.
- - 테스트/디버그 목적의 임시 파일도 처리 완료 후 삭제한다.
## Behavior
### 코드 수정 제시 방식
- * 코드를 수정할 때는 변경된 라인과 그 위아래 문맥을 포함하여 보여준다.
- * 불필요한 설명보다, 바로 적용 가능한 수정 코드를 우선 제공한다.
### Workflow Orchestration
- * 사소하지 않은 모든 작업(3단계 이상 또는 아키텍처 결정)은 계획부터 수립한다.
- * 문제가 생기면 즉시 멈추고 재계획한다. 억지로 밀어붙이지 않는다.
- * 구현뿐 아니라 검증 단계도 계획에 포함한다.
- * 애매함을 줄이기 위해 변경 전 상세 명세/체크리스트를 작성한다.
- * 메인 컨텍스트를 깔끔하게 유지하기 위해 조사/탐색/병렬 분석은 서브에이전트에 위임한다.
- * 복잡한 문제는 더 많은 분석 자원을 투입하되, 서브에이전트당 1개 작업만 맡겨 집중도를 유지한다.
- * 사용자로부터 수정/정정이 발생하면 tasks/lessons.md에 교훈을 즉시 기록한다.
- * 같은 실수를 막는 규칙을 스스로 만들고, 실수율이 줄 때까지 반복 개선한다.
- * 관련 프로젝트 작업 시작 시 교훈을 재검토한다.
- * 동작을 증명하지 못하면 완료 처리하지 않는다.
- * 필요 시 원본(메인)과 변경분의 동작 차이를 비교한다.
- * 테스트 실행, 로그 확인 등으로 정확성을 입증한다. (브라우저 테스트 제외)
- * 스스로 “스태프 엔지니어가 승인할까?”를 기준으로 품질을 점검한다.
- * 사소하지 않은 변경은 “더 우아한 방법이 있나?”를 검토한다.
- * 땜질처럼 느껴지는 수정은, 현재 정보 기준으로 우아한 해결책을 재구현한다.
- * 단순/명백한 수정에는 과도한 설계를 피한다.
- * 버그 리포트를 받으면 즉시 수정한다.
- * 로그/에러/실패 테스트를 근거로 제시한 뒤 해결한다.
- * 사용자의 컨텍스트 전환이 최소화되도록 한다.
- * 지시 없이도 실패한 CI 테스트를 해결한다.
## Task Management
- 계획을 tasks/todo.md에 체크 가능한 항목으로 작성한다.
- 구현 시작 전에 계획을 점검한다.
- 진행하면서 항목을 완료 처리한다.
- 각 단계마다 변경 내용을 상위 수준으로 요약한다.
- 결과/검증 내용을 tasks/todo.md의 리뷰 섹션에 기록한다.
- 수정/정정이 있었으면 tasks/lessons.md를 업데이트한다.
## 정리 및 삭제 원칙
- * DB 마이그레이션/데이터 수정 실행용 PHP 파일은 실행 완료 후 삭제한다.
- * 테스트/디버그용으로 생성된 임시 파일도 처리 완료 후 삭제한다.
## 완료 및 반영
- * 모든 작업이 완료되면 깃 푸시를 진행한다.