최근 웹사이트를 돌아다니다 보면 묘한 기시감에 빠진다. 히어로 섹션의 그라데이션, 카드 레이아웃의 border-radius: 16px, 세리프 + 산세리프 믹스 타이포 — 어디선가 본 것 같은 '바이브'가 사이트마다 복제되어 있다. dev.to에 올라온 한 글이 정확히 이 감각을 짚었다. AI 보조 툴로 레이아웃부터 카피, 인터랙션 패턴까지 한 번에 생성하는 이른바 "VibeCode" 버튼 시대가 열리면서, 디자인의 수렴(convergence)이 가속되고 있다는 것이다. 빠르고, 일관되고, 싸다. 하지만 다 똑같다.
사용자 입장에서는 이게 진짜 문제다. 브랜드 A와 브랜드 B의 랜딩 페이지를 탭 전환으로 비교했을 때, 로고를 가리면 구분이 안 되는 순간 — 그게 바로 UX의 차별성이 사라진 순간이다. Figma에서 볼 때는 괜찮았는데, 실제로 AI가 뱉은 코드를 브라우저에 올리면 여백이 뭉개지고, 인터랙션 타이밍이 기계적이고, 로딩 스켈레톤 하나 없이 CLS(Cumulative Layout Shift)가 튀는 사이트가 넘쳐난다. AI가 '베스트 프랙티스'라고 찍어낸 것이 사실은 평균의 재생산일 뿐이라는 의심이 들 수밖에 없다.
그래서 다시 코드의 디테일로 돌아오게 된다. 토스 SLASH 21에서 진유림 님이 제시한 프론트엔드 클린 코드의 세 가지 원칙 — 응집도, 단일 책임, 추상화 수준 — 은 사실 AI가 대체하기 가장 어려운 영역이다. 팝업 열기/닫기 상태와 트리거 버튼이 수십 줄 떨어져 흩어져 있는 코드를 <SubmitPopupButton onSubmit={...} />처럼 하나의 선언적 컴포넌트로 뭉치는 판단, handleSubmitClick 안에 API 호출·로그·팝업·네비게이션 네 가지가 섞인 것을 단일 책임으로 분리하는 감각 — 이건 px 단위로 설계 의도를 읽어야 가능한 일이다. AI는 "돌아가는 코드"를 만들지만, "찾고 싶은 로직을 빠르게 찾을 수 있는 코드"를 만드는 건 여전히 사람의 몫이다.
상태 관리도 마찬가지다. Zustand 같은 경량 라이브러리 하나 도입하면 Prop Drilling은 해결된다. A → B → C → D로 내려 보내던 props를 useUserStore() 한 줄로 끊을 수 있으니까. 하지만 진짜 문제는 "이 상태가 전역이어야 하는가"라는 설계 판단이다. 번들 사이즈 1KB 남짓의 Zustand조차, 무분별하게 스토어를 늘리면 컴포넌트 간 암묵적 의존성이 생기고 Lighthouse 퍼포먼스 점수가 미세하게 깎인다. AI가 보일러플레이트를 자동 생성해 주는 시대에, 개발자가 지켜야 할 건 "이 스토어가 정말 필요한가"를 묻는 한 마디다.
모바일까지 가면 디테일의 무게는 더 커진다. React Native의 Stack Navigator에서 화면 A → B로 이동하면, 웹과 달리 A는 언마운트되지 않고 스택에 살아 있다. 뒤로 가기를 눌러도 useEffect는 다시 실행되지 않는다. 그래서 useFocusEffect가 필요하고, InteractionManager.runAfterInteractions로 화면 전환 애니메이션이 끝난 뒤에야 무거운 데이터 페칭을 시작해야 끊김 없는 60fps를 보장할 수 있다. onLayout은 렌더링 후에야 실제 높이를 알려주기 때문에 불필요한 setState를 하면 화면이 깜빡인다. 이런 1프레임, 1ms의 차이가 앱스토어 리뷰 별점 0.3점을 가른다. AI가 React Native 보일러플레이트를 뱉어줄 수는 있어도, "이 화면은 포커스 복귀 시 API를 다시 쏴야 하는가"라는 맥락은 기획서와 사용자 여정을 읽은 사람만 판단할 수 있다.
결국 시사점은 명확하다. AI는 코드 생성의 비용을 0에 수렴시키지만, 설계 판단의 가치를 무한대로 끌어올린다. 응집도 높은 컴포넌트를 설계하는 감각, 상태의 스코프를 정확히 끊는 판단, 모바일 라이프사이클의 미세한 타이밍을 제어하는 기술 — 이것이 AI가 찍어내는 획일적 UI 위에 올려야 할 "1px의 차이"다.
앞으로 프론트엔드 개발자의 경쟁력은 "코드를 얼마나 빨리 짜느냐"가 아니라, "AI가 뱉은 코드에서 무엇을 지우고, 무엇을 남기느냐"에 달릴 것이다. 여기서 로딩 스켈레톤 넣으면 어떨까요? 라는 한 마디가, 사실은 Lighthouse 점수 10점과 사용자 이탈률 5%를 동시에 움직이는 결정이다. AI에게 템플릿을 맡기되, 디테일의 주도권은 절대 넘기지 말 것. 그게 이 시대 프론트엔드가 사수해야 할 마지막 방어선이다.