Codex한테 버튼 4px 옮기라고 했더니, AI 형님이 레이아웃 전체를 갈아엎어 버림.
I told codex to move a button 4px. My ai bro rewrote the entire layout.
핵심 요약
AI에게 간단한 UI 수정을 요청했다가 레이아웃 전체가 재작성되는 황당한 경험을 공유함.
- AI 과잉 수정 — 버튼 위치 4px 이동 요청이 전체 레이아웃 재작성으로 이어짐.
- 반복되는 오류 — 수정할 때마다 새로운 버그가 발생해 작업이 피로해짐.
- 시각적 편집기 활용 — 텍스트 프롬프트 대신 직접 수정하는 방식이 더 효율적임.
- UI 개발 방식 — 프롬프트, 직접 수정, 시각적 편집기 사이에서 고민 중임.
vibecoding은 보통 AI한테 "Codex, 이 파일 이름 바꿔", "Codex, 이 파일 삭제해"라고 할 땐 최고임. 근데 AI한테 버튼을 왼쪽으로 4픽셀만 옮겨달라고 하면, AI가 그리드 전체를 다시 써야겠다고 결정해버림. "실수하지 마"라고 덧붙여도 마찬가지임 ㅋㅋ
"이 버튼 좀 왼쪽으로 옮겨줘"가 어떻게 된 건지 flex 규칙 재작성, 컴포넌트 변경, 내가 건드리지도 않은 색상 몇 개 수정으로 이어짐. 하나 고치면 세 개가 망가지고, 다시 프롬프트 넣으면 또 새로운 문제가 생김. 좀 지침.
지난주엔 호버 상태 좀 조정하려고 40분을 썼음. 결국 컴포넌트 3개의 색상 체계가 다 바뀌어 버렸고, 원래 있던 호버 버그는 그대로 남아있었음. ㅋㅋ
어느 순간부터는 사소한 시각적 변경까지 전부 프롬프트 문제로 접근하는 걸 그만뒀음. 라이브 프리뷰에서 요소를 선택해서 직접 조정할 수 있으면 그렇게 함. "조금 더 왼쪽으로"라는 말을 텍스트로 다시 입력하는 것보다 눈으로 간격 보는 게 훨씬 나음.
그럴 땐 Enter Pro의 시각적 편집기를 썼음. 솔직히 말하면 GPT 모델 할인할 때 플랜을 구매해서 쓴 거임. 프리뷰에서 조정하는 게 덜 짜증 나긴 하지만, 그래도 반응형 상태 확인하고 커밋부터 함. 직접 수정한다고 해서 다른 브레이크포인트가 안 깨진다는 보장은 없으니까.
이런 식으로 UI 만드는 사람들, 다들 언제 프롬프트를 다시 날리고, 언제 직접 CSS를 수정하고, 언제 시각적 편집기로 넘어가? 난 솔직히 이 셋 사이를 계속 왔다 갔다 하는 중임.
