AI 드리븐, 다음엔 이렇게

510 SOLO 포텐데이 발표 자료

Transcript

1. 최관수 gonasooc AI 드리븐, 다음엔 이렇게
2. AI 드리븐, 다음엔 이렇게 발표자 소개 최관수 gonasooc 블렌딩 Frontend Developer 라이브 스트리밍, 음원 플랫폼 등 웹개발 담당 https://velog.io/@gonasooc
3. AI 드리븐, 다음엔 이렇게
4. AI 드리븐, 다음엔 이렇게 이야기 흐름 • 이번엔 이렇게 • 기획 • 디자인 • 개발 • 다음엔 이렇게
5. AI 드리븐, 다음엔 이렇게 이번엔 이렇게 목적 기반의 기획 • 포텐데이 신청 당시 기획 없었음 • 몇 가지 목적 기반으로 기획을 짜기 시작 • 기술적 성과 -> 프론트 퍼널 Funnel 패턴을 효율적으로 관리해보자 • 기획적 성과 -> 간단한 서비스를 통해 생각거리를 던져보자 • 개인적 성과 → 기존 작업중인 앱으로의 연결성을 가져가보자 • AI적 ? 성과 → 다양한 플랫폼을 사용해보자 • 1인 개발에 익숙하지 않기 때문에 서버 활용 최소화
6. AI 드리븐, 다음엔 이렇게 이번엔 이렇게 Codex GPT 5 • 이번 개발에 Codex를 사용해볼 생각이었기 때문에 기획도 GPT 5를 이용 • 기획 방향과 목적을 프롬프트로 전달하고 네 가지 기획 주제를 받음 • 1번 관계 성향 테스트 : 가볍고 재미있고 공유하기 좋음 • 2번 싱크율 테스트 : 세대 차이 → 공감 포인트 직관적으로 보여줌 • 3번 스토리 카드 : 앱의 실제 핵심 기능 질문 카드 을 미리 맛보기 • 4번 회고록 미리보기 : 감성 어필 → 앱 본질인 디지털 회고록 과 직결
7. AI 드리븐, 다음엔 이렇게 이번엔 이렇게 세부 기획 • 세부 기획안을 토대로 단계별 구현 로드맵 생성 요청 • 단계별 구현 로드맵이 있으면 순차적으로 맥락을 이해시키기 좋음 • 코어 기능과 무관하게 오버 스펙인 부분이 있을 수 있음 • 왜 이 스펙이 필요한지 되묻고 불필요하다 생각하면 세부 요청 • 가능한 하나의 프롬프트 맥락에서 기획 진행
8. AI 드리븐, 다음엔 이렇게 이번엔 이렇게 디자인 • 디자인은 사실상 개발과 동시에 진행 • Lovable, Figma Make 등 시간 관계상 미사용 • 로고 같은 이미지 생성은 레퍼런스 이미지 제공 필요, 결과물이 명확해짐
9. AI 드리븐, 다음엔 이렇게 이번엔 이렇게 개발 환경 • 개발은 최대한 기능 feature 단위로 쪼개서 작업 • 요청은 피쳐 단위로, 혹은 더 작은 단위로 쪼갤수록 더 나은 결과물을 줌 • AI 드리븐이 목적이기에 개입 최소화, 개입하더라도 수정이 용이한 방향으로 진행 • 최초 기술 스택 CSS Modules Mantine • 스타일시트 수정하기 번거로워서 Tailwind Shadcn 으로 변경 • 데이터베이스는 기존의 Supabase 사용
10. AI 드리븐, 다음엔 이렇게 이번엔 이렇게 /init • /init 명령어를 통해서 전체 구조 파악하게 함 • Codex AGENT.md • Claude Code CLAUDE.md • Gemini GEMINI.md • 이건 각 LLM 공식 문서를 참고하는 게 좋음
11. AI 드리븐, 다음엔 이렇게 이번엔 이렇게 디버깅과 테스트 • AI 드리븐 개발은 디버깅과 테스트 검증이 더 중요 • 개발자는 코드 베이스를 상대적으로 온전히 파악하지 못함 • AI를 통한 개발 단계에서 일부 디버깅이 필요한 경우 있음 • 기능 구현이 됐다 하더라도 사이드 이펙트 체크 필요 테스트 검증 • AI를 통한 단위 테스트 e.g., Playwright MCP
12. AI 드리븐, 다음엔 이렇게 이번엔 이렇게 Codex 자체의 경험 • Opus 4, Claude 3.5나 4 Sonnet 과 비교 • 결과물을 얻기까지 시간이 다소 오래 걸림 • 프롬프트가 대체로 명확하다는 가정 하에 에러 없는 구현률이 높음 • 간단한 기능 추가나 수정에도 너무 오래 연산하는 경향이 있음 • 상황에 맞게 구분해서 사용하면 유용함
13. AI 드리븐, 다음엔 이렇게 다음엔 이렇게 작은 성공의 법칙 • AI도 작은 성공 작은 기능 단위 을 위한 일을 주는 것이 좋다 • 1인 개발자에게도 작은 성공을 통한 동기부여를 주는 것이 좋다
14. AI 드리븐, 다음엔 이렇게 다음엔 이렇게 목적은 하나만 확실하게 • 제품 모드 vs 공부 모드 • 타인의 문제 해결 vs 기술적 습득 • 이걸 한번에 하려 하면 단기간엔 쉽지 않은
15. AI 드리븐, 다음엔 이렇게 다음엔 이렇게 분리와 결합 • 기획 / 디자인 / 개발 / etc. • 통합해서 하다 보면 하나로 퉁쳐서 간소화하게 되는 경향 있음 • 기존처럼 분리해서 관리하는 게 추후 별도의 프롬프트를 던지기에도 용이함 • 각각의 파일을 첨부해서 맥락을 이해시키는 것도 좋음 • 최종적으로는 MCP를 통한 재결합으로 전체 AI 주도 개발이 이상적
16. AI 드리븐, 다음엔 이렇게 Q A