0️⃣ 도대체 내가 왜 PHP를...
여전히 의문이다 (젠장)... 도대체 내가 왜 PHP를 하고 있는지가...
의문은 고이 접어두고 PHP를 아예 할 줄 모르는 모바일 개발자로서 완전히 꼬여버린 스파게티 레거시 코드, PHP를 어떻게 풀어나가는지에 대해 설명하겠다. (내가 PHP를 완전히 할 줄 모른다 뿐이지, HTML/CSS는 할 줄 알고, React/Next.js의 간단한 퍼블리싱 정도 및 라이브러리 연동은 할 줄 아는 초보 웹개발자 수준에 가깝다는 걸 미리 알린다.)
1️⃣ PHP 레거시 현황부터 알아보자
개발자라면 응당 AI를 사용해서 개발하기 마련. 몇 년 전만 해도 AI는 커녕 구글 서치에 의존하여 버그를 고치곤 했었는데 덕분에 구글 서치력 하나는 끝내주게 늘어서 지금까지 유용한 능력으로 활용되고 있다.
아무튼, 현재 내가 이용하고 있는 AI는 Gemini와 Claude다.
Claude만 써도 바이브 코딩 할 수 있는 게 아닌가?!
라고 묻는다면 곤란하다. 아니다. 없다. 일반적인 코드라면 될 수도 있겠다.
하지만 내가 지금 담당하고 있는 이 프로젝트는 완전히 말도 안 되는 스펙을 가지고 있다. 우선 Claude Code를 시켜 전체 소스 코드의 현황을 비교분석 시켜본 결과를 보여주겠다. (참고로 이미 개선이 끝난 코드를 분석한 것인데도 이런 결과다;)
이렇게 알 수 있듯이, 현재 내가 담당하고 있는 프로젝트는 이 모양 이 꼬라지다. 한마디로 AI도 복잡하다고 혀를 내두를 정도로 소스 코드 현황이 좋지 못하다. 게다가 node_modules처럼 외부 라이브러리를 별도로 관리하고 있는 것도 없어서 소스코드 곳곳에 라이브러리가 그냥 하드코딩처럼 꽂혀있다. 그러므로 외부 라이브러리를 제외하고 다시 성능 계산을 해보아도,
이렇게 말도 안 되는 결과값이 나오는 것을 알 수 있다. 게다가 형상관리도 주석으로 진행하고 있던 프로젝트였기 때문에 기능 하나를 고치거나 추가하는 것은 고사하고 단순히 UI/UX 디자인을 새로 고치기도 쉽지 않은 현황이다.
하지만 하기 힘든 것과 해야만 하는 상황은 별개다. 메인페이지의 UI/UX 전면수정 지시가 내려왔기 때문이다. 서버 개발자 동료에게 이를 전적으로 맡길 수가 없어서 결국 Claude AI를 도입하게 되었다. 게다가 UI/UX 디자인을 수정하는 김에 그동안 미뤄두었던 요구사항도 반영하고, 자잘한 버그도 모두 찾아 고치며 메인페이지가 아닌 다른 페이지에서의 UX 개선도 해두었다.
2️⃣ Claude Code와 Gemini를 병행하여 사용하게 된 계기
우선 Claude는 코딩 천재다. 코딩 앞에선 진짜 깡패다. 반면 Gemini는 이미지를 분석하는 능력이 탁월하다. 이건 Claude 뺨친다.
- Claude: 압도적인 코딩 천재
- 사용 모델: Opus 4.5 / Claude Max 20x
- 실제 코드 작성, 대규모 리팩토링 실행 및 파일 분리
처음에는 웹브라우저에서 Claude Code를 이용하며 Claude가 별도로 분기하는 branch에서 작업했었다. 이 작업이 굉장히 똑똑하고 편하다는 것을 알고 있었음에도 내가 직접 해당 branch에 접근하여 commit 할 수 없다는 불편함과 IDE를 함께 건드릴 수 없다는 단점이 있어 결국 터미널로 연결하여 CLI 환경으로 바꾸어 작업을 시작했다.
아래 명령어 하나면 클로드를 CLI로 설치하게 끝이다. 심지어 프로젝트 경로에서 claude,만 입력하면 바로 클로드가 시작되니 이렇게 편리할 수가 없다.
npm install -g @anthropic-ai/claude-code
터미널로 클로드를 직접 다루게 되면, Claude가 프로젝트 구조를 통째로 인식하여 작업을 하기 때문에 파일 간의 의존성, 불필요한 백업 파일을 솎아내는 것은 물론 클로드가 잡아내지 못하는 버그를 내가 직접 찾아 수정하거나 간단한 px값 수정 정도는 내가 함께 할 수 있어서 매우 편리하다. 하지만 클로드도 한계는 분명했는데, PHP 레거시의 html 코드를 직접 내가 다루기엔 너무 위험해서 코드를 짜는 것을 AI에게 맡길 수 밖에 없는데, 새로 디자인된 UI 이미지를 직접 분석할 수 없다는 단점이 있었다. CLI 환경에서는 당연히 이미지를 첨부하여 분석할 수가 없었고, 웹브라우저에서 시켜봐도 이미지 분석 능력 자체가 매우 뒤쳐졌다.
- Gemini: 천부적인 이미지 분석
- 사용모델: Gemini 3 Pro
- Figma 이미지 분석 및 Html/CSS 코드 작성, 버그 동영상 및 이미지 분석 후 원인 파악
때문에 내가 Figma로 작업해둔 UI/UX 디자인을 캡처하여 Gemini에게 보내면 Gemini가 기가 막히게 이미지대로 코드를 완벽하게 짜준다. 그럼 해당 코드를 다시 Claude에게 알려주며, 기존 레거시에 맞추어 수정해달라고 프롬프트를 입력하면 완벽하게 UI를 변경할 수 있다.
클로드가 분석하지 못하는 버그를 (코드 상으로는 완벽하나 화면 상에서 나오는 버그를 내가 설명할 길이 없을 때) 캡처하여 Gemini에게 보내면 또 기가막히게 원인 분석을 해준다. 단순 이미지가 아닌, 동영상을 첨부하여도 해당 원인을 잘 분석하기 때문에 이러한 점을 함께 활용하면 완벽하게 바이브 코딩을 할 수가 있다.
(물론 당연하게도 개발자 중에서 AI를 하나만 쓰는 사람은 없을테지만 말이다.)
3️⃣ 리팩토링의 성과
UI/UX 디자인도 2010년대 스타일이었던 것을 그나마 2020년대 초반까지는 끌어올리며 나름 트렌디하면서도 심플하고, 우리 프로젝트의 4060 타겟층에 맞는 디자인으로 만들어놨다. 첨부사진을 올릴 수가 없다는 점이 매우 비통하지만, 아무튼 그렇다.
하지만 리팩토링 성과를 수치를 볼 수 있다. 3개월도 넘게 걸릴 작업을 AI와 함께 25일만에 끝냈다. (물론 아직 배포를 하지 않았기 때문에 앞으로 5일은 추가로 더 걸릴 것이다...^^;;) 클로드가 분석해낸 결과를 다시 한 번 살펴보자.
지난 한 달 동안 작업한 결과물을 살펴보면, 코드는 36%가(약 2만줄) 감소했다. 특히 모듈화 구조를 리팩토링 하기 위해 정말 많은 힘을 썼는데 기존의 반복되는 단순 HTML부터 라이브러리 재사용 코드를 util 함수로 분리하는 등 획기적으로 개선했다. 가장 많은 심혈을 기울였던 것은 "초기 로딩 속도"와 "재방문 로딩 속도". 한 마디로 브라우저 캐싱 효율이 상승해, 신규 방문자 뿐만 아니라 재방문 사용자의 체감 로딩 속도가 매우 크게 개선 되었다.
이 내용을 바탕으로 Gemini에게 다시 물어보아도 매우 크게 개선되었다고 말하는 것을 알 수 있다.
4️⃣ 바이브 코딩 팁과 실사용 후기
그리고 지난 한 달 동안 AI를 이용한 바이브 코딩 후기를 알려주겠다.
0. 서버개발은 하지 않았다.
우선, 나는 클라이언트 개발자로서 철저하게 UI/UX 디자인 개선, JS Util 함수 분리, CSS 변수화, 인라인 스크립트 분리, 코드 중복 제거, 불필요한 기능 제거 등 프론트 단에서 이루어지는 작업만 했다. DB와 쿼리가 맞지 않을 위험성이 있거나 Server와 충돌이 날 수 있는 부분은 절대 터치하지 않았다는 점, 미리 고지한다.
1. 프롬프트를 명확하게 입력할 것.
원시적으로 코딩하는 것처럼 프롬프트를 입력해야된다. 처음 Claude를 이용해서 바이브 코딩을 시도할 땐, 알아서 foreach 돌려주겠거니~ 하고 반복문 돌리면 변수가 뭔데? 라고 반문하며 엉뚱한 프로세스를 돌린다고 느껴졌었다. 그만큼 프롬프트를 상세하게 입력하지 않으면 똑똑한 Claude더라도 멍청하게 굴러갈 수 있다.
2. Claude의 토큰에 유의할 것.
클로드의 모델이 제법 여러가지가 있는데, 그 중에서도 나는 제일 똑똑한 Opus를 사용하고 있다. Sonnet이 더 빠르고 효율적이면서도 코딩은 잘 한다고 이야기 하는데 나는 바꾸기 귀찮아서 Opus를 사용했다. 20배 요금제를 사용하고 있었기 때문에 그다지 토큰 사용량에 대해 걱정해본 적은 없지만 CLI 환경에서 작업하면 특히 더 많은 양의 토큰을 사용하기 때문에 아무생각 없이 돌리면 한도에 금방 도달하게 된다.
3. 냉정하게 CSS는 Gemini가 더 잘 한다.
진짜다. CSS 같은 style 코드는 Gemini가 훨~씬 잘 한다. 이미지 분석을 잘 하는 만큼 style 분석 및 해당 반응형 코드에 대한 버그도 Gemini가 더 잘 찾아내므로 클라이언트 개발자라면 Gemini를 필수로 끼고 개발하는 것을 추천한다. 진짜 똑똑하다, 제미나이도... (사실 그저 제미나이 신봉자)
4. 버그는 그래도 인간이 찾는다.
AI는 물어보지 않으면 버그를 찾아주지 않는다. AI가 코드를 짜다가 버그를 발견하는 경우도 있지만 먼저 말해주는 경우는 극히 드물었고 내가 직접 어떠한 버그가 발생하고 있느냐, 라고 분석을 시켜야 그때 심도 있게 파악해준다. 심지어 AI가 직접 짠 코드임에도 버그를 간과하는 경우가 많아서 AI가 짠 코드를 다시 한 번 검토를 돌려보면 또 새로운 버그가 있다며 직접 뚝딱뚝딱 고친다. 그러므로 AI를 빡세게 검토시키며 디버깅을 하거나 인간이 하나하나 눌러보고, 코드를 분석하여 버그를 찾아내는 수 밖에 없다. 이 점은 바이브 코딩의 핵심이므로 절대 빼먹을 수 없는 가장 중요한 핵심이다.
5. 코딩은 협업이다.
제 아무리 혼자 바이브 코딩을 하고 있다고 한들, 코딩은 협업이다. AI와 하는 것은 "협업" 정도라고 생각하면 좋지만, 내가 말하려고 하는 핵심은 함께 일하는 팀원, 서버 개발자/웹 개발자/앱 개발자들과 함께 소통하여 바이브 코딩한 결과물을 검토하고 어떤 실험에 대한 절충안을 찾아야한다는 것이다. 특히 우리 소스코드처럼 복잡할 경우 더더욱 그렇다.
4️⃣ 바이브 코딩을 추천하는가?
획기적으로 코딩 시간이 단축되는 건 맞다. 그리고 휴먼 이슈가 발생할 수 있는 걸 AI가 보정해주는 정도라고 보면 되지 전적으로 바이브 코딩하여 웹사이트를 하나 만들겠다! 라고 생각하면 정말로 곤란하다. 아무튼 얼른 PHP는 손 떼고 Flutter 개발로 회귀하고 싶다...
