먼저 유튜브에서 보시는 '뭐 만들어줘~' 스타일의 AI 활용과 실제 업무 환경은 확실히 다릅니다.
기획-디자인-개발의 명확한 분업이 존재하죠.

바이브 코딩(또는 AI 어시스턴트 활용)을 실무에 적용하는 방식은 다음과 같습니다:

1. 기존 워크플로우 보완: 피그마 디자인을 받아 HTML/CSS로 마크업할 때,
반복적인 스타일링 작업이나 컴포넌트 구조 설계에 AI를 활용합니다.

2. 단계별 협업: 디자인 파일을 기반으로 초기 구조를 잡고, 각 기능별로 AI와 페어 프로그래밍하듯 점진적으로
개발해나가는 방식입니다.

3. 코드 리뷰 및 리팩토링: 기존 코드의 최적화,
테스트 코드 작성, 문서화 등에 AI를 활용합니다. 노가다에 최적화 되어있습니다.

핵심은 AI가 전체 프로젝트를 대신 만드는 것이 아니라,
개발자의 생산성을 높이는 도구로 활용하는 것입니다.
마치 IDE의 자동완성 기능이 진화한 형태라고 보시면 됩니다.

이 글은 제가 요점을 제시했고 말씀 드린 내용처럼 분업화하여 클로드가 문맥을 수정했고 다시 제가 마무리해서
완료 되었습니다. 말씀 드린것 처럼 AI는 도와주는 도구로 이해하시면 될것 같습니다.

AI 도구를 어떻게 쓰느냐에 달라지죠.
예를 들어 "버튼 하나 만들어줘" 하면 바이브 코딩으로 그럴듯한 버튼은 나올 겁니다.
하지만 이 버튼에 애니메이션, 컬러, 라운딩, 글씨 폰트 등등등 디자인적 요소를 고려한다면 세부 설명이 들어가야 하고
이런 경우는 피그마에서 AI 쓰는게 더 나을 수 있습니다.
결국 어떤 일이든 디테일을 원한다면 분업화가 되어야 하고 그걸 지시하고, 통합하는 형태가 필요한거죠.

그래서 최근 업계에서는 AI 도구를 분야별로 나누고, 그걸 관리하는 AI , 통합하는 AI 이런식으로 활용하려고 합니다.

저의경우 거의매일 현업에서 쓰고있는데 아래와 같은 스텝으로 지시합니다. (주로 react 개발 위주)

1. 기획서 기준으로 만들 기능을 머릿속으로 설계한다 (대충)
2. 관련 파일을 빈 껍데기 상태로 생성한다. (하나 또는 여러개)
3. 필요한 타입들을 선언한다 (가급적 정확하게)

2,3번 파일들을 AI로 던지고, 기획서 스샷 첨부하고, 완성해줘 라고 시킵니다.

요약하면 설계먼저하고 코딩을 AI에게 시키고 있어요.
결국 최종 마무리는 사람에 해야하는데, 기본기능 만드는 시간을 확 줄일수 있어 좋습니다 :)

만들고 싶은 프로그램이 생기면, 기초적인 컨셉과 기능을 정리하고
커서에서 taskmaster mcp 를 이용 개발업무를 세분화해서 쪼갭니다.
그렇게 쪼개진 개발 계획을 확인/수정하고
순서대로 실행을 시킵니다.

실제 바이브코딩하면 (4개월정도 해본 느낌으로) 빠른 결과물과 언어에 대한 장벽이 없어지는 큰 장점이 있지만,
AI가 개발을 어떻게 했는지 따라가기가 힘들어 그냥 결과만 보게 되더군요.

그래서 그런지, 요즘은 바이브보다 증강코딩이라는 말도 나오더군요.
실제 중요 메소드명, 변수명 등을 모두 개발자가 지정해주고 전체적인 소스의 흐름을 개발자가 제어하고, 기능에 대한 세부적인 코딩만 AI 가 해서 프로그램의 전체 흐름을 개발자가 놓치지 않게 개발을 한다네요.

하루가 다르게 업계가 변해가니 정신이 없네요. 어제는 아마존에서도 ai코딩 툴을 내놓았던데...;;;
이젠 어떤 ai를 선택하느냐 부터가 코딩의 시작이 되어버린것 같네요.

백엔드와의 연계까지 필요한 도구가 아니고 브라우저단에서 처리 되는 정도라면, ~~~ 어떤 기능을 가진 프로그램을 웹 브라우저 환경에서 구동할건데 UI/UX를 (모던)한 디자인과 스타일로, 상용 솔루션 같도록 구성해서 작성해줘. 라고 하면 html/css/js 까지 해서 전체코드 줍니다. 그대로 복사해서 돌려보고 맘에 안 드는 부분들은 원하는 방향으로 수정 요청하시면 되고, 백엔드가 붙어야 되면 거기서 추가적으로 덧붙여가시면 됩니당.