앤티그래비티로 웹게시판 후딱 만들기

소개

시도하고자 했던 것과 그 이유를 알려주세요.

실제 업무 환경에서는 대부분 데이터베이스 기반 애플리케이션이 중심을 이루지만, 현재 공개되는 바이브 코딩 사례들은 주로 스탠드얼론(standalone) 앱에 치우쳐 있다.

이는 비즈니스 로직과 DB를 함께 다루는 복잡성 때문에, 초보자 입장에서는 프롬프트 설계가 쉽지 않고, 에이전트 역시 여러 차례 반복적인 구현 시도를 거쳐서야 원하는 결과에 도달하는 경우가 많기 때문이다.

일반적인 개발 프로젝트에서는 3-Tier 애플리케이션 프레임워크를 기반으로 개발하지만,
바이브 코딩에서는 기술적 구조를 최소화하고 빠르게 결과물을 만들어내는 것이 우선된다.

다시 말해, 전통적인 방식이 아키텍처의 안정성과 확장성을 중시한다면,
바이브 코딩은 당장은 속도와 실험적 구현을 중심으로 한 접근 방식이 유리해 보인다.

그러므로 일단은 앤티그래비티를 이용해서 가장 Simple한 형태인 PHP기반의 웹게시판을 구현해 보기로 했다.

진행 방법

어떤 도구를 사용했고, 어떻게 활용하셨나요?

- 코딩 에이젼트 : 앤티그래비티(Gemini3 Pro High)

- 웹호스팅 : dothome.co.kr (PHP 호스팅 플랫폼 : 500M 6개월 무료)

- DB : MySQL

- 구현 목표 : 일반적인 DB CRUD(생성/수정/삭제) 기능이 있는 웹 게시판

- URL : https://gocompu21.dothome.co.kr/

(1) 게시판 기본 디자인 만들기

지금부터 간단한 게시판을 만들려고 해. Tailwind CSS를 이용해서 게시물 목록을 만들어 줘. 우선 기능은 만들지 말고 디자인만 부탁해.

ALT

한국 음악 페이지의 스크린샷

(2) 게시물 조회 페이지

게시물을 눌렸을 때 게시물을 조회하는 페이지도 같은 디자인으로 만들어 줘. 기능은 만들지 말고 디자인만 연결되도록 해줘

(3) 게시물 글쓰기

이번에는 첫 화면의 <글쓰기> 버튼을 누르면 글쓰는 화면 페이지가 나오도록 만들어줘. 페이지를 만들고 글쓰기 버튼과 연결해줘

글쓰기 화면에서 Textarea 영역을 위지윅(WISIWYG)에디터로 바꿔 줘.

(4) 게시판용 데이터베이스 생성

• dothome 에 회원가입 후 기본 DB 정보 설정

• DB 관리자 화면

`@index.php` `@view.php` `@write.php` 현재 게시판 구조에 맞게 테이블을 생성하는 SQL구문을 작성해 줘

• 앤티그래비티가 화면을 보고 역공학해서 자동으로 생성한 SQL문( 테이블 생성)

CREATE TABLE posts (
    id INT AUTO_INCREMENT PRIMARY KEY COMMENT '게시글 고유 ID',
    title VARCHAR(255) NOT NULL COMMENT '게시글 제목',
    author VARCHAR(100) NOT NULL COMMENT '작성자 이름',
    content TEXT NOT NULL COMMENT '게시글 내용 (HTML 포함)',
    views INT DEFAULT 0 COMMENT '조회수',
    created_at DATETIME DEFAULT CURRENT_TIMESTAMP COMMENT '작성일시'
);

-- Comments Table
CREATE TABLE comments (
    id INT AUTO_INCREMENT PRIMARY KEY COMMENT '댓글 고유 ID',
    post_id INT NOT NULL COMMENT '연관된 게시글 ID',
    author VARCHAR(100) NOT NULL COMMENT '댓글 작성자',
    content TEXT NOT NULL COMMENT '댓글 내용',
    created_at DATETIME DEFAULT CURRENT_TIMESTAMP COMMENT '작성일시',
    FOREIGN KEY (post_id) REFERENCES posts(id) ON DELETE CASCADE
);

• 위 SQL 구문을 사이트 Admin화면에서 실행하여 테이블 생성(직접 수행)

ALT

프로그래밍 언어를 보여주는 컴퓨터 화면의 스크린샷

(5) 앤티그래비티에게 DB 연동을 요청

게시판이 이 데이터베이스 테이블을 기반으로 동작하도록 수정해 줘. DB는 localhost로 연결하고, DB이름은 gocompu21, ID도 gocompu21 비밀번호는 XXXXX야.

(6) 수정, 삭제 버튼

게시물 보기 페이지에서 게시물을 수정하고 삭제할 수 있도록 해줘. 현재는 버튼이 동작하지 않아.

ALT

한국어 텍스트가 포함된 웹페이지의 스크린샷

(7) 샘플데이터 생성

• data.xlsx 파일을 만들어서 제목과 타이틀 데이터 생성(70개)

(8) 데이터 로드 프로그램 생성

upload.py 파일을 만들고 다음 작업을 수행해
- @data.xlsx 와 @write.php 를 분석해
- @data.xlsx의 제목과 내용을 2번째행 부터 순차적으로 읽어서 @write.php 화면의 POST 방식으로 데이터를 입력해줘.
- 글쓰기 입력을 할 때 @data.xlsx의 제목은 게시글의 "제목", @data.xlsx의 "내용"은 게시글의 내용으로 입력하고 저자는 "시스템"으로 올려줘

• upload.py를 실행하여 샘플 데이터 로드.

결과와 배운 점

배운 점과 나만의 꿀팁을 알려주세요.

• 바이브 코딩으로 DB 프로그램도 쉽게 가능하다. 긍정적인 결과에 안심!

• 앤티그래비티도 클로드 코드처럼 쉬는 시간이 있다.( 제미나이 프로 아이드 2개를 번갈아가면서 코딩)

• 앤티그래비티의 크롬 브라우져를 내부적으로 띄워 동적으로 USECASE를 분석하고 녹화하는 것이 신기했음.

• 프롬프트에 지시명령어와 함께 캡쳐 스크린샷을 같이 전송하는 멀티모달방식을 이용하는 경우도 있었는 데, 앤티그래비티의 스크린 해석이 뛰어났음.

• 이제 인터넷망에 DB를 가지고 외부에서 해당DB를 이용할 수 있으므로, N8N등의 웍플로우에서 이 DB를 중간 또는 최종 정보 저장소로 활용할 계획( 별도 테이블 설계)

과정 중에 어떤 시행착오를 겪었나요?

• 그래비티가 수정기능이 되면 입력기능이 안되고, 입력기능을 되게 만들어 놓으면 수정기능이 안되는 상황이 반복되어 힘들었으나, 프롬프트를 수정하면서 해결

• 전문용어로 약간의 삽질(?)이 있었으나, 날코딩할 때의 삽질과는 차원이 다름.

• 옆에 사원급 개발자(교육은 잘 시켜 놓았는 데, 잘하다가도 어디로 튈 지 모르는)를 한 명 데리고 일하는 느낌이 들었음. 일일이 지적해 줘야 하지만 데리고 일할 만함.

도움이 필요한 부분이 있나요?

• 없음.

앞으로의 계획이 있다면 들려주세요.

• PHP+DB형태의 2 티어는 가능성을 보았고,

• 다음으로 FAST API와 DJANGO 프레임웍을 바이브로 진행해 볼 예정

도움 받은 글 (옵션)

커세 AI 트랜드& 활용백과 (서승완 지음/스마트북스 출판)

http://gocompu21.go.kr에 들어가서 마음대로 추가, 수정, 삭제 해보세요

이상입니다.