AI가 짠 프런트엔드는 왜 다 비슷할까 — '슬롭' 줄이는 실전 원칙들

AI한테 프런트엔드를 시켜본 분들은 다 아실 거예요. 분명 동작하는 화면이 몇 분 만에 뚝딱 나오긴 하는데, 어딘가 묘하게 다 똑같이 생겼다는 거요. 보라색 그라데이션 히어로 섹션, 둥근 모서리 카드 3개, 문장마다 박힌 이모지... 한 개발자가 이런 'AI 슬롭'을 줄이는 자신만의 방법을 블로그에 정리했는데, 제목부터 '약간(slightly) 줄이기'라고 겸손하게 달아둔 게 인상적이에요. 완전히 없앨 수는 없다는 현실 인식이 깔려 있는 거죠.

먼저 슬롭(slop)이라는 말부터 짚고 갈게요. 원래는 가축에게 주는 멀건 죽 같은 걸 뜻하는 단어인데, 요즘은 AI가 대량으로 뽑아낸, 그럴듯해 보이지만 정성도 개성도 없는 결과물을 부르는 말로 쓰여요. 프런트엔드에서는 이게 두 층위로 나타나요. 눈에 보이는 디자인 슬롭과, 코드 속에 숨은 구조 슬롭이요.

왜 AI 프런트엔드는 다 비슷할까

이유를 알면 대처법도 보이는데요. LLM은 학습 데이터에서 가장 흔한 패턴을 향해 수렴하는 기계예요. 인터넷에 널린 랜딩 페이지 템플릿, Tailwind 기본 색상 팔레트, 부트스트랩 시절부터 내려온 레이아웃 관습이 모델 안에서 '프런트엔드의 평균값'으로 굳어 있는 거죠. 그래서 아무 제약 없이 '예쁜 랜딩 페이지 만들어줘'라고 하면, 모델은 그 평균값을 충실하게 뱉어내요. 못해서가 아니라, 그게 통계적으로 가장 안전한 답이라서요.

코드 쪽도 마찬가지예요. 일단 화면에 보이게 만드는 데까지는 잘하지만, 사람이 시키지 않은 디테일, 그러니까 일관된 간격 리듬, 키보드 포커스 상태, 스크린 리더를 위한 접근성 속성(aria), 컴포넌트 재사용 같은 건 알아서 챙기지 않아요. div를 끝없이 중첩하고, 비슷한 컴포넌트를 매번 새로 만들고, 인라인 스타일을 여기저기 흩뿌려 놓는 일이 흔하죠.

슬롭을 줄이는 실전 원칙들

그럼 어떻게 줄일 수 있을까요? 핵심은 한 단어로 '제약'이에요.

첫째, 백지에서 시작하게 두지 마세요. 모델에게 자유를 줄수록 평균값으로 회귀해요. 디자인 토큰(색상, 간격, 글꼴 크기를 변수로 정의해둔 것)과 컴포넌트 라이브러리를 먼저 정해두고, '이 토큰과 이 컴포넌트만 써서 만들어'라고 제약하는 순간 결과물의 일관성이 확 달라져요. 기존 코드베이스가 있다면 잘 짠 컴포넌트 파일을 컨텍스트로 함께 주는 게 백 마디 지시보다 효과적이고요.

둘째, 형용사 대신 레퍼런스를 주세요. '모던하고 깔끔하게'는 모델 입장에서 아무 정보가 없는 말이에요. 원하는 분위기의 스크린샷, 구체적인 사이트 이름, '버튼은 그림자 없이 1px 보더로' 같은 명시적 지시가 슬롭을 걷어내요.

셋째, 한 방을 노리지 말고 루프를 도세요. 첫 결과물은 초안으로 취급하고, 렌더링된 화면을 스크린샷으로 다시 보여주면서 '여기 간격이 안 맞아', '이 부분 대비가 약해' 하고 고치는 반복 과정이 필요해요. 요즘 에이전트 도구들이 브라우저로 결과를 직접 확인하는 기능을 강화하는 것도 이 루프를 자동화하려는 거예요.

넷째, 기계적인 가드레일을 깔아두세요. ESLint, 타입 체크, 접근성 린터 같은 도구는 사람보다 꾸준해요. AI가 생성한 코드가 통과해야 할 관문을 코드로 정의해두면, 리뷰에서 잡아야 할 일이 줄어요.

업계 맥락에서 보면

v0, Lovable, Bolt처럼 화면을 통째로 생성해주는 도구들이 쏟아지면서, '생성은 쉽고 품질은 어렵다'는 게 업계 공통의 고민이 됐어요. 그래서 흐름도 프롬프트 문구를 잘 쓰는 기술에서, 모델에게 어떤 컨텍스트와 제약을 공급할지 설계하는 컨텍스트 엔지니어링 쪽으로 옮겨가고 있고요. 결국 잘 정리된 디자인 시스템과 린트 규칙을 가진 팀이 AI 시대에 품질 격차를 벌린다는 얘기가 돼요. 사람을 위해 만들던 개발 표준이 이제 AI를 위한 가드레일을 겸하게 된 거죠.

정리하면

AI 프런트엔드의 품질은 모델 성능보다 우리가 주는 제약의 품질에 달려 있다, 이게 핵심이에요. 마지막 10%의 완성도, 그러니까 '테이스트'는 여전히 사람 몫이고, 그래서 AI 결과물에서 뭘 고쳐야 하는지 보는 눈이 앞으로 더 귀해질 거예요. 여러분은 AI가 짠 화면에서 슬롭을 어떻게 걷어내고 계세요? 나만의 프롬프트나 가드레일이 있다면 댓글로 공유해주세요.