⏰ AI스터디 16기 모집 마감 (17기 7월 예정) | AI스터디 둘러보기 👀

프롬프트 / AI로 개발
Rose
Rose
 · 프롬프트 / AI로 개발에 게시됨

바이브 코딩 프로세스를 정립해서 보안과 코드 품질을 지켜 보자.

소개

무리한 시도일 지도 모르지만, 바이브 코딩으로 보안과 코드 품질까지 지켜보겠다고 애쓰고 있습니다. 고민이 되어서 보안 전문가 분께 컨택도 해보았는데, 앞으로는 바이브 코딩의 보안 문제도 AI가 검사해서 수정해 줄 세상이 올 거라네요. 에헤라~ 그런 좋은 시절은 언제 오는 걸까요~

진행 방법

  1. 구현하고자 하는 시스템의 요구사항을 간단히 정리했습니다.(사실 이것도 Gemini 2.5로 한 번 다듬은 것입니다.)

  2. Gemini Canvas에서 한 번 정제했습니다.

    # 작성한 PRD

# Spring 영어 원서 읽기 동아리 홈페이지 PRD



## TL;DR



학생 중심의 영어 원서 읽기 동아리를 위한 커뮤니티/자료 공유/일정 관리 웹사이트. 정보 비대칭 해소, 참여도 향상, 관리 자동화가 목표.



---



## Problem Statement



현재 동아리 활동 정보가 비공식 채널에 흩어져 있어 신규 참여자 유입이 어렵고, 운영진의 업무 부담이 크다. 또한 일정 공유, 자료 공유, 회원 커뮤니케이션에 구조적 제약이 많아 참여도가 떨어지고 있다.



---



## Goals



### Business Goals

- 관리자의 업무 효율화 (회원 승인, 일정 공유 자동화)

- 동아리 이미지 제고 및 신규 멤버 유입



### User Goals

- 참여자 간 자유로운 소통

- 필요한 자료, 일정, 공지 접근 용이

- 자신이 누구와 활동하는지에 대한 정보 확인



### Non-Goals

- 실시간 채팅, 결제, 푸시 알림 같은 고급 커뮤니티 기능

- 비밀번호 변경 등 보안 고도화 (후속 과제로 분리)



---



## Target Users



1. 동아리 회원: 게시글, 일정, 수다방 등 대부분 기능을 사용

2. 잠재 회원: 비로그인 사용자. 소개 페이지만 접근 가능

3. 도서관 사서: 모임 일정 관리 가능

4. 관리자: 전체 회원 승인/수정 및 자료·일정·공지 관리



---



## User Experience



### 회원 가입 플로우

1. 홈페이지 접속 → 가입 신청

2. 기본 정보 입력 + 고정 비밀번호 입력

3. 관리자 승인 대기

4. 승인 시 로그인 가능



### 일정 관리 플로우

1. 관리자/사서 로그인

2. 캘린더 > 일정 추가

3. 일반 회원은 일정만 조회 가능



### 자료 공유 플로우

1. 로그인 후 자료실 접근

2. 게시글 및 첨부파일 업로드

3. 검색/열람/삭제 가능



### 수다방 플로우

1. 짧은 글 작성 → 게시됨

2. 댓글 기능으로 간단한 커뮤니케이션



---



## Functional Requirements



### 1. 회원 관리

- 회원 가입

- 관리자 승인

- 로그인

- 회원 정보 수정

- 회원 삭제

- 회원 정보 표시



### 2. 콘텐츠 관리

- 소개 페이지

- 게시판

- 자료실

- 동영상 자료실

- 사진 갤러리

- 공지사항

- 영어 원서 관련 중요 정보 게시



### 3. 캘린더 및 일정 관리

- 캘린더 표시

- 모임 일정 등록/수정/삭제

- 일정 상세 정보 보기



### 4. 소통 기능

- 회원 연락처 조회

- 메일 보내기 기능

- 한 줄 수다방



### 5. 관리자 기능

- 관리자 전용 페이지에서 전체 회원/일정 관리



---



## Narrative



“새 학기, 새 얼굴들이 많이 들어왔어요. 그런데 동아리 활동 정보는 따로 정리된 게 없고, 회장님만 알고 있는 일정은 매번 단톡방에서 흘러버리죠. 자료는 어디 있는지, 사진은 누가 갖고 있는지 알 수 없어요. 이 홈페이지가 생긴다면, 신입은 소개 페이지에서 모든 정보를 한눈에 보고, 관리자는 누가 들어왔는지 바로 알 수 있고, 우리 모두가 읽은 책들과 활동을 함께 기록해나갈 수 있어요.”



---



## Success Metrics



- 가입자 수 50명 이상 확보

- 일정 등록 수 10건 이상/월

- 수다방 활성도 (주 1회 이상 글 등록)

- 게시판 게시글 수 월 20건 이상

- 소개 페이지 평균 체류 시간 2분+



---



## Technical Considerations



- 관리자/일반 사용자 로그인 권한 분리

- 동영상 업로드 최대 용량 500MB

- 반응형 웹 구현 (모바일 최적화)

- 이메일 발송 기능은 SMTP 구성 필요



---



## Milestones & Sequencing



1. XX주: 요구사항 확정 및 UI 와이어프레임 완료

2. XX주: 회원가입 및 로그인 기능 개발

3. XX주: 콘텐츠 기능 (게시판, 자료실 등) 개발

4. XX주: 일정 관리 기능 및 수다방 개발

5. XX주: 관리자 기능 및 QA

6. XX주: 베타 테스트 및 운영 개시



---



## Constraints



- 모든 사용자 비밀번호 고정

- 알림 메일은 고정된 관리자 주소로만 발송

- 사용자 이름은 ‘실명 (아이디)’ 형식

- 수다방 게시글은 3줄 이내로 제한



---



## Future Considerations



- 비밀번호 변경/찾기 기능

- 일정 알림 기능 (이메일, SMS 등)

- 댓글 기능 고도화 (대댓글 등)



-------------

# 지시

이 PRD를 CursorAI IDE에서 쓸 건데, 좀 개선해 줘.

  3. Canvas는 문서 전용이기 때문에, 다시 한 번 PRD 만드는 GPTs로 정제했습니다.

    # 작성한 PRD  
.....


# 지시
CursorAI에서 쓸 건데 md 포맷으로 바꿔서 정제해 줘.

    https://chatgpt.com/g/g-G5diVh12v-chatprd-ai-for-product-managers

  4. 그러나, 개발의 기준이 되는 PRD를 AI 한테만 맡길 수는 없죠. 제 의도와 다른 것이 있는지 결과를 꼼꼼하게 읽고 수정합니다.(수정할 것이 좀 있었습니다. AI가 제 마음을 다 읽을 수는 없죠. 암요.)

  5. 원하는 디자인 참고 사항을 캡쳐했습니다. 활용한 것은 Dribble과 GoFullPage입니다.

    https://dribbble.com/

https://chromewebstore.google.com/search/GoFullpage?hl=ko&utm_source=ext_sidebar

  1. 드디어 Lovable로 갑니다. 캡처한 디자인과 공들여 작성한 PRD를 넣고, 기다립니다.
    https://lovable.dev/

  2. L:ovable 이 디자인 가이드 대로 메뉴를 만들어버립니다. PRD와 메뉴 구조가 다르고, 반응형 웹이 아닙니다. Lovable에게 수정 요청을 합니다.(결국 Lovable 결제를.. 😅 )
    애써 만든 동아리 홈페이지 디자인입니다.

    북 클럽의 웹 사이트 디자인

  3. github 연동합니다.

  4. git clone 해 옵니다.

  5. 보안 가이드라인을 추가해서 다시 PRD를 수정합니다.(러버블에 이런 것까지는 기대하지 않지만, 커서라면!! 기대합니다.)

I need to implement a user authentication system with the following architecture:
---
# Session ID Generation: 
1. Use cryptographically secure random values  
2. Session Storage: Securely store session data server-side  
3. Secure Transmission: Transmit session IDs via secure cookies  
4. Session Expiration: Implement both idle and absolute timeouts
.... 등등 보안 요구사항
---
Please generate the code for the authentication service component following these patterns.

  1. PRD에 있는 기술스택과 프로젝트 폴더 구조를 현재 코드베이스를 기반으로 작성해서 업데이트합니다.(Lovable이 작성한 front-end)

  2. 앞으로 구현할 부분(back-end)에 대해서 PRD의 기술 스택과 프로젝트 폴더 구조를 작성합니다.(커서가 헀습니다.)

  3. user rules를 정의합니다. 다음 사이트를 참고했어요.

    https://github.com/PatrickJS/awesome-cursorrules

  4. project rules를 정의합니다. database, gitflow, 기술 스택 별 rules를 생성합니다. 역시 위의 사이트를 참고했으나, 조금 수정했습니다.

    (좀 더 나가면 rules에 폴더 구조를 적용할 수 있습니다. nested rule이 되는데, 이건 아직 시도 못해봤어요.)

    -> 한다면 이런 식입니다.

    단어 프로젝트가있는 검은 색 화면

  5. 일단 여기까지 작업했는데, 불안해집니다. PRD와 rules 사이의 충돌, PRD 내의 일관성 부족을 클로드에 파일을 업로드해서 물어봅니다.
    (조금 있었습니다.)

  6. .cursor에 md 파일을 생성합니다.(커서의 코드베이스 인덱싱 기능을 이용했습니다.)

    - 현재 소스 코드를 기반으로 design.md 생성(디자인 가이드, 스타일 가이드입니다. Lovable이 생성한 전체 코드 폴더를 태그했습니다.)

    - 아키텍처를 설계해서 architecture.md 생성(PRD 를 태그했습니다.)

    - 데이터베이스 테이블을 설계해서 database_tables.md 생성(역시 PRD 태그했습니다.)

    - checklist.md 파일 생성(PRD 태그했습니다.) -> 큰 작업을 한꺼번에 구현하도록 짜 주어서 iterative process로 재구조화했습니다. 아니, 백엔드 다 구현하고 프론트 엔드 다 구현하면 테스트는 한 방인건가요.. ㄷㄷㄷ 또는 incremental process라고도 해도 될 것 같습니다.

  7. 문서가 엄청나집니다. 이제 다시 한 번, 전체 PRD와 md 파일 사이의 충돌이나 일관성을 다시 한 번 클로드에 업로드해서 물어봅니다.
    (별 것 없기는 하네요)

  8. 현재까지 작성한 것을 토대로 README.md를 업데이트합니다.

  9. PRD를 기반으로 해서, 해당하는 기술 스택의 공식 문서를 인덱싱합니다.
    (너무 큰 사이즈의 웹사이트는 인덱싱 실패합니다. 그래서 그 패키지를 구현한 github 소스 코드를 인덱싱 해버렸습니다. 이건 llm-min.txt로도 해결 가능하지 않을까 합니다. LLM에게 주는 컨텍스트 정보를 압축해줍니다. 비용이 들지만 재사용 가능합니다.)

    https://github.com/marv1nnnnn/llm-min.txt

    후아, 이제 개발 시작입니다. 다음 주에는 무언가 개발한 걸 갖고 올게요.

결과와 배운 점

AI에게 워~워~를 해야 했습니다. 너무 원대한 계획을 짜 주어서요. 그거 다 하다가는 소스 코드 작성 시작도 전에 나가떨어지겠습니다. 😂

도움 받은 글 (옵션)

참고한 사이트는 위에 링크했으며, 프로세스는 해외 링크들을 읽고 분석했습니다.
https://dev.to/ethanleetech/how-to-streamline-your-design-and-prd-process-with-ai-tools-1id1

https://dev.to/ethanleetech/optimizing-your-workflow-with-cursor-tips-for-building-mvps-44j9

https://dev.to/ethanleetech/how-to-use-cursor-ai-in-best-way-pcd

16기 바이브디버깅

👉 이 게시글도 읽어보세요