많은 분들이 관심을 갖고 도전 하셨다가 생각보다 결과물이 안나와서 포기하신 분들이 많을꺼라 생각됩니다.

워낙 도구들도 많이 나와 있고 어떤걸 써야 할지도 모르겠고~

제가 사용하는 환경을 공유 하자면~

vscode 에 claude code cli 를 이용합니다. 아직까지는 claude code 가 '갑' 입니다.

필요한 것들은 /plugin 을 통해서 설치를 하죠

추가로 필요한 스킬은 별도로 설치를 합니다.

https://github.com/obra/superpowers  이런 것들이죠

github 는 필수 입니다.

github 에 프로젝트별 저장소를 만들고 기능구현이 될때마다 커밋,푸시 를 해 두어야 나중에 문제가 될때 다시 원래대로 되돌릴수 있습니다.

프로젝트 진행 순서는

1. github에 새로운 저장소를 만들고 pc에도 새로운 프로젝트 폴더를 만들어서 github와 매칭을 해 줍니다.

2. 아이디어를 정리해서 초기 기획안을 claude 를 통해서 구체화 해 나갑니다. 

(초기에는 chatGPT를 이용했지만 지금은 claude 로 다 합니다.)

모든 내용은 doc 라는 폴더를 만들어서 기획안을 만들고 개발스펙과 개발 계획을 스탭별로 문서로 만들어 줍니다.

초기 기획안이 없어 무조건 만들어 달라고 하면 원하는 결과물이 절대 안나옵니다.

이때 스펙등도 정리하면 좋습니다. 어떤 언어로 개발할지, 언떤 db를 사용할지 등등..

3. 목업을 만들어 봅니다.
2번 기획안을 가지고 무조건 개발로 진행하시는 분들이 있는데 원하는 결과물이 나오지 않는 이유 입니다.

기획안이 있지만 목업을 만들다 보면 빠진것들이 많은것을 알게 됩니다.  프로세스도 정리가 잘 안되었다는 것을 알게 됩니다.

개인적으로는 ui/ux 를 전문으로 하다보니 원하는 퀄리티를 위해서라도 목업을 미리 만듭니다.

리액트로 진행하시면 기능이 빠진 리액트 목업을 만드시는게 좋습니다. 그래야 그대로 가져다 쓸수 있습니다.

테일윈드는 쓰지 않습니다. (개취~)

어떻게 서비스 할지도 미리 준비 되어 있으면 뒤에 고생을 덜 합니다.

4. 목업이 만들어 졌다면 다시 개발가이드를 다시 정리 합니다.

목업에서는 3번에서 빠진 기획내용들이 추가 되어 있을 껍니다. 이 부분을 에이전트에게 정리해 달라고 하고 

로그인은 어떤 모듈을 쓸지 이런 부분들을 찾아서 가이드에 포함하도록 에이전트에게 추가로 명령 합니다.

github에서 찾아보면 웬만한 기능들은 만들어져 있고 mit라이선스로 제공하는게 많습니다. 

5. 이제부터 실제 개발이 진행 됩니다.

목업에서 ui를 만들어 두었기 때문에 에이전트는 기능 부분에 집중해서 개발할수 있습니다. 훨씬 효율적입니다.

개발은 기능과 페이지 단위로 스텝을 나눠서 개발하는게 좋습니다. 하나의 스텝이 끝나면 깃허브에 커밋,푸시 하고

다음 기능으로 넘어가는 식으로 해야 중간에 문제가 생겼을때 원복할수 있습니다.

6. 기능단위로 개발이 다 되었다면

코드의 품질과 보안 등을 서브에이전트(skill) 을 통해서 점검 합니다. 생각보다 많은 수정사항이 나오는데 모두 개선해 줍니다.

7. 실제로 서버 배포를 해야 하는데 여기서 부터는 개발언어와 서비스 방법에 따라서

일반 호스팅을 사용할지 클라우드를 사용할지 2번에서 정리 되어 있어야 덜 고생을 합니다.

실제 서비스는 월 비용이 발생하기 때문에 충분히 확인해 보는게 중요 합니다.

개인적으로 next.js 를 했을때
https://vercel.com/ 과 클라우드 서비스 https://www.digitalocean.com/ 을 이용합니다.

전반적일 흐름을 정리한 내용이고 좀더 세부적인 내용은 추가로 등록하거나 질문등을 올려 주시면 좋겠습니다.