[실험] 클로드가 내 코드를 분석했을 때
갑자기 주어진 과업
실장님이 내 자리로 왔다.
"박 과장님, 홈페이지 하나 만들어 줄 수 있어요?"
"...어떤 홈페이지요?"
"HTML로 간단하게. 랜딩 페이지 정도."
순간 머릿속이 하얘졌다.
"웹디자인개발자격증 있으시던데요? 이력서에 있던데."
"아... 네. 있긴 한데요."
"그럼 되지. 일주일 안에 가능해?"
10년 전에 딴 웹디자인개발기능사 자격증.
이력서 한 줄 채우려고 넣었던 그 자격증이,
지금 나를 부르고 있었다.
"...해보겠습니다."
10년 전 코드
그날 밤, 집에 와서 오래된 구글 드라이브에 접속을 했다.
10년 전 폴더.
'웹디자인 연습'
index.html
style.css
script.js
jQuery 1.11.0.
테이블 레이아웃.
inline 스타일....
코드를 보니 막막했다.
이걸로 지금 뭘 만들지?
밤마다 복습
회사 끝나고, 대학원 끝나고.
밤 11시부터 새벽 2시까지.
HTML/CSS/JS를 다시 공부했다.
아니, 정확히는 클로드에게 물어가며 만들었다.
"데이터랑 화면 분리하려면 어떻게 해야 해?"
"반응형은 어떻게 만들어?"
"이미지 경로가 안 먹히는데 왜 그래?"
클로드가 알려주면,
나는 그걸 내 방식대로 고쳤다.
jQuery는 익숙해서 그대로 뒀고,
CSS 변수는 클로드가 정리해줬고,
데이터 구조는 내가 운영 경험으로 설계했다.
완성
일주일 후.
index.html
css/style.css
js/schedule-data.js
js/schedule-render.js
js/common.js
탭 전환되고,
카드 렌더링되고,
반응형 동작하고,
데이터만 바꾸면 재활용 가능한 구조.
배포했다.
팀장님이 말했다.
"오, 잘 만들었네?"
동료가 물었다.
"이거 어떻게 만든 거예요?"
"...공부 좀 했죠."
시크릿창 실험
그날 밤.
문득 궁금했다.
" '이거 사람이 만든 걸까, AI가 만든 걸까?' 라고 클로드에 물어보면 뭐라 답할까?"
내가 만든 건데,
AI의 도움을 받기는 했지만,
구조 설계 부터 디자인까지 모두 내가 한 건데.
클로드 시크릿창을 켰다.
파일을 업로드했다.
"이 HTML 사이트, 사람이 만든 걸까 AI로 만든 걸까?"
클로드의 분석
클로드가 답했다.
"결론: AI가 생성한 코드를 사람이 일부 수정·보완한 형태로 판단됩니다."
AI 생성 징후:
- CSS 변수 체계가 과도하게 정돈됨
- ARIA 속성이 교과서적으로 완벽함
- 보안 처리가 빠짐없이 들어감
사람 개입 징후:
- 실무 운영 데이터
- jQuery 1.11.0 같은 레거시-
- 배포 환경 설정
"jQuery 1.11.0은 2014년 버전인데, 2026년에 사용하고 있다는 건..."
"최신 개발자가 아니라는 의미입니다."
... 맞긴한데.. 아니야.
순서가 반대야.
반박
나는 다시 물었다.
"사람이 코딩한 다음 클로드를 활용하여 정돈했을 가능성은?"
"고의적으로 코드 유출 방지를 위해 난독화 시킨 가능성은?"
클로드가 재분석했다.
"맞습니다. 사람이 주도적으로 코딩 → AI로 정돈하는 워크플로우가 더 유력합니다."
그리고 물었다.
"이 사람은 전공자일 가능성이 높겠네?"
클로드가 답했다.
"전공자라기보다, HRD/교육 담당자 중 웹 제작 역량을 갖춘 사람일 가능성이 높습니다."
"웹디자인기능사 자격증 보유자이거나..."
"컴퓨터공학 전공으로..."
"교육 프로그램 개발 경험이..."
분석이 정확히 맞았다.
리뉴얼
나는 클로드에게 말했다.
"이 페이지 내가 열심히 만든 건데, 너만의 방식으로 리뉴얼 한번 해볼래?"
"최신 기술의 집합체로."
클로드가 물었다.
"기존 이미지와 구조는 그대로 유지하면서 디자인만 현대화할까요?"
"응."
10분 후.
ZIP 파일이 왔다.
index.html
css/style.css
js/schedule-render.js
js/common.js
파일 4개만 교체하면 된다고 했다.
열어봤다.
벽
글래스모피즘 헤더.
카드 등장 애니메이션.
호버 시 그룹 컬러 글로우.
웜 그레이 배경.
"..."
와.
벽 느껴지네.
클로드가 말했다.
"솔직하게 말씀드리면, 그 벽은 선생님이 생각하시는 것만큼 높지 않습니다."
backdrop-filter: blur(20px) 한 줄이 글래스모피즘이고,
@keyframes 5줄이 카드 등장 효과이고,
box-shadow로 색상 넣은 게 글로우 효과라고.
"벽처럼 느껴지는 건 '이런 기법이 존재한다는 것'을 모르기 때문이지, 이해 못 할 수준이어서가 아닙니다."
"벽은 코딩 실력이 아니라, '뭘 요청할 수 있는지 아는 범위'에 있습니다."
디테일
나는 리뉴얼된 페이지를 뜯어봤다.
1. 날짜별 탭 호버링 - 부드러운 transition
2. 폰트 색상 - 검정이 아닌 살짝 연한 회색
3. PC/태블릿/모바일 - 안정적인 폰트 크기
4. 카드 호버 - 사진 확대 + 아이콘 색상 변화
5. EVENT 뱃지 - 타원이 아닌 캡슐형
클로드가 설명하지 않은 것들까지.
배경색을 #fff(하얀색)에서 #F5F3EF(연한 베이지색)로 바꿔서 카드가 떠 보이게 했고,
transition을 cubic-bezier로 바꿔서 호버가 '스르륵' 되게 했고,
그림자를 3단계로 나눠서 깊이감을 만들었다고.
"코드 까먹어서 라운딩만 한 거 알아챘네?"
클로드가 답했다.
"border-radius: 50%가 직사각형에 적용되어 타원이 된 걸 보고, 원래 의도는 캡슐형이었을 거라고 추론했습니다."
휴먼 인 더 루프
그런데 문제가 하나 있었다.
카드 호버 시 움직임이 없었다.
"카드가 안 움직여. 자로 재봤는데 1px도 안 움직여."
클로드가 코드를 다시 확인했다.
"원인 찾았습니다."
animation: forwards가 문제였다.
애니메이션이 끝나도 transform을 강제로 유지해서,
호버 시 translateY가 먹히지 않았던 거였다.
수정 파일이 왔다.
animationend 이벤트로 animation: none 처리.
다시 열어봤다.
이번엔 움직였다.
역시 사람의 검증이 필요하다.
바이브 코딩의 본질
그날 밤, 나는 생각했다.
비전공자가 바이브 코딩으로 어디까지 가능할까?
나는 10년 전 자격증이 있었다.
HTML/CSS/JS가 뭔지는 알았다.
브라우저 개발자 도구를 열 줄 알았다.
"탭 UI", "반응형", "카드 컴포넌트" 같은 용어를 알았다.
그래서 가능했다.
하지만 아무것도 모르는 비전공자라면?
"버튼 누르면 아래 내용 바뀌는 거 만들어줘"라고 하면,
클로드는 아코디언을 만들 수도, 모달을 만들 수도 있다.
의도와 결과 사이의 간극이 크다.
"바이브 코딩으로 8시간 짜리 교육을 진행하면 비전공자도 이정도 결과물이 나올까?"
클로드가 말했다.
"8시간 교육만으로 이 퀄리티는 나오기 어렵습니다."
"바이브 코딩은 AI가 코딩을 대신해주는 게 아니라, 설계자의 판단력을 코드로 변환해주는 도구입니다."
"판단력이 없으면 변환할 것도 없습니다."
맞는 말이다.
간단한 HTML 홈페이지도 이 정도인데,
파이썬이나 본격적인 코딩은?
당연히 더 무리다.
요즘 전부 바이브 코딩한다고 하는데,
아무것도 모르고 시작하기에는 무리가 있다.
메커니즘은 알아야 한다.
그날 밤
노트북을 덮었다.
리뉴얼된 페이지.
내가 만든 페이지.
클로드가 다듬은 페이지.
결국 협업이었다.
나는 구조를 설계했고,
클로드는 기법을 알려줬고,
나는 버그를 찾았고,
클로드는 수정했다.
이게 바이브 코딩이다.
불을 끄고 잠들었다.
내일은 목요일.
다시 대학원이다.