AI가 만든 티 나는 화면 10가지 | 슬롭 UI 알아보는 법과 피하는 프롬프트

요즘 새로 나온 앱이나 사이트를 열면 "아, AI가 만들었구나" 싶은 화면이 있습니다. 보라색 그라디언트 배경, 제목마다 붙은 반짝이 이모지, 뜻 없는 "active" 배지 같은 것들입니다. 한 해외 개발자는 이런 화면을 "슬롭(slop) UI"라고 부릅니다.

한 대학생 개발자가 학교 앱이 "사소한 UI 개선" 업데이트 뒤 오히려 나빠졌다며 슬롭 UI의 단서 10가지를 정리했고, 긱뉴스에도 소개됐습니다. 원문을 바탕으로 각 단서를 재구성한 예시 화면과 함께 풀고, 바이브 코딩으로 화면을 만들 때 이 함정을 피하는 프롬프트까지 정리했습니다.

슬롭 UI는 AI가 만든 화면 가운데 어색하거나, 자리에 맞지 않거나, 목적이 없거나, 지나치게 획일적인 UI를 말한다. 원문이 꼽은 단서는 그라디언트 남용(특히 보라색), 뜻 없는 여러 색, 깜박이는 배지, 손톱 모양 카드, 이모지, 어긋난 정렬, Inter·JetBrains Mono와 // 장식, 개발 대화에서 새어 나온 문구, 획일적인 글래스모피즘, 과장된 홍보 문구다. 비판 대상은 바이브 코딩 자체가 아니라 디자인에 들인 노력의 부족이다. 피하려면 "AI 느낌 빼"가 아니라 피할 패턴을 구체적으로 적어야 한다고 앤트로픽 공식 가이드도 권한다.

목차

1. 슬롭 UI란

2. 단서 10가지

3. 같은 화면, 정리하면 이렇게

4. AI에게 화면을 맡길 때 피하는 법

1. 슬롭 UI란

원문의 정의는 간단합니다. AI가 만든 화면 중 어색하거나, 들어갈 자리에 맞지 않거나, 목적이 없거나, 지나치게 뻔한 UI입니다. 필자는 방향 없이 바이브 코딩한 결과에서 이런 화면이 나오고, 앱을 싸 보이고 쓰기 싫게 만든다고 말합니다.

출처: hereticpleb 블로그 「10 tells of a slop ui」 갈무리

필자는 자기 블로그도 바이브 코딩으로 만들었다고 밝힙니다. 문제는 도구가 아니라 "보기 좋게 만들려는 노력을 전혀 들이지 않는 것"이라는 게 결론입니다. 긱뉴스 요약도 비판 대상이 바이브 코딩 자체가 아니라 디자인 노력의 부족이라고 정리했습니다.

출처: GeekNews 갈무리

원문이 든 대학 앱 사례를 바탕으로 단서들을 한 화면에 모아 보면 이렇습니다.

재구성한 예시 화면(실제 앱 아님)

위 화면은 원문이 든 대학 앱 사례를 참고해 제가 단서들을 한데 모아 다시 만든 예시입니다. 실제 앱 화면이 아닙니다. 하나씩 뜯어보면 10가지 단서가 거의 다 들어 있습니다.

2. 단서 10가지

#	단서	원문 설명
1	어디에나 그라디언트	버튼, 배경 등 넣을 수 있는 곳 전부. 특히 보라색
2	뜻 없는 여러 색	색에 의미 없이 여러 색을 흩뿌림. 70-30-10 배색 규칙 무시
3	깜박이는 배지	로그아웃되면 볼 수도 없는 학생증에 "active", 검증도 안 하면서 "verified"
4	손톱 모양 카드	한쪽 끝만 색 띠가 붙은 둥근 카드. 형태가 나쁘다기보다 모든 LLM이 남용
5	이모지 남용	제목·버튼마다 이모지
6	어긋난 정렬	SVG, 아스키 아트, 상자 밖 요소가 줄이 안 맞음(대학 앱 시간표 목록)
7	뻔한 글꼴과 기술 장식	대부분 Inter, 개발 관련이면 JetBrains Mono, 기술 이야기엔 // 장식
8	대화에서 새어 나온 문구	"Neovim에서 글 쓰고 싶다"고 했더니 화면에 "Written from Neovim"이 박힘
9	획일적인 글래스모피즘	반투명 유리 효과 일색, 아니면 모두 똑같은 브루탈리즘
10	과장 문구	Elevate, Seamless, Next-Generation, Supercharge, Unleash, Empower. 모든 화면을 랜딩 페이지처럼

3번 배지 이야기가 특히 설득력 있습니다. 필자 학교 앱의 디지털 학생증에는 "active" 배지가 깜박이는데, 비활성 상태가 되면 앱에서 로그아웃돼 그 화면을 볼 수조차 없습니다. 구별할 정보를 하나도 주지 않는 장식인 셈입니다. 필자는 실제로 검증을 하는 배지도 아닌 듯하다며, "학생증을 위조하는 사람이 일부러 unverified라고 적겠느냐"고 verified 배지도 꼬집습니다.

8번도 바이브 코딩을 해 본 사람이면 공감할 만합니다. AI에게 한 부탁이 사용자에게 필요 없는 문구로 화면에 남는 현상입니다. 원문 필자는 대학 앱 첫 화면의 "one campus. one app."이 "앱 세 개를 하나로 합치자"는 요청에서 나온 문구일 것이라고 추측합니다.

핵심 배지·색·이모지·문구처럼 정보 전달과 관련된 단서는 "그 요소가 무엇을 구별하거나 전달하는가"라는 질문으로 점검하기 좋습니다. 배지, 색, 이모지, 부제목이 사용자에게 새 정보를 주지 않으면 장식일 가능성이 큽니다.

3. 같은 화면, 정리하면 이렇게

재구성한 예시 화면(실제 앱 아님)

슬롭 예시	정리한 화면
보라·분홍·주황 그라디언트	밝은 단색 배경 + 강조색 하나
"캠퍼스 경험을 Elevate 하세요 ✨"	"김민수 님, 오늘 수업 3개"
active·verified 배지	배지 없음. 필요한 안내 한 줄("출입 시 QR을 스캔하세요")
이모지 붙은 카드 3개	학생증과 시간표, 실제로 쓰는 두 가지만
들쭉날쭉한 시간표 목록	시간 열을 맞춘 표
"// Built with Next.js · Written from Neovim"	삭제

오른쪽이 더 "예쁘다"기보다, 화면의 모든 요소가 할 일이 있다는 점이 차이입니다. 제 판단으로는 기능형 앱에서는 이 기준 하나만 지켜도 슬롭 인상이 대부분 사라집니다.

4. AI에게 화면을 맡길 때 피하는 법

반응형

가장 흔한 실수는 "AI 느낌 나지 않게 해 줘"라고 적는 것입니다. 앤트로픽의 Opus 5.5 프롬프트 가이드는 디자인 방향 없이 프론트엔드를 맡기면 몇 가지 기본 스타일로 돌아가고, "AI 같은 느낌을 피하라"는 일반 지시는 한 기본값을 다른 기본값으로 바꿀 뿐이라고 적었습니다. 대신 피할 패턴을 구체적으로 나열하라고 권합니다.

출처: 앤트로픽 「Prompting Claude Opus 5.5」 갈무리

피할 패턴을 구체적으로 적기 (한국어 예시)

대학 학생용 앱 첫 화면을 HTML/CSS로 만들어 줘.
- 그라디언트 배경, 글래스모피즘, 네온 그림자 쓰지 마.
- 이모지, 반짝이·로켓 아이콘 쓰지 마.
- 상태가 바뀌지 않는 요소에 배지(active, verified 등) 붙이지 마.
- 한쪽에 색 띠가 붙은 둥근 카드 쓰지 마.
- "경험을 업그레이드" 같은 홍보 문구 대신 사용자가 할 일을 쓰고,
  내가 대화에서 말한 제작 과정(도구, 에디터)은 화면에 넣지 마.
- 강조색은 하나만, 시간·숫자는 열을 맞춰 정렬해.

가이드는 첫 결과를 보고 어떤 스타일로 바뀌었는지 확인한 뒤 금지 목록을 늘려 가라고 조언합니다. 실제로 가이드 속 공식 예시는 크림·오프화이트 배경, 제목 속 이탤릭 강조어, "01/02/03" 번호 섹션 라벨, 고정폭 라벨, 알약 모양 버튼을 금지 목록에 넣었습니다.

주의 보라색만 피하면 끝나는 게 아닙니다. "Signs of AI design" 정리 문서는 모두가 보라색 그라디언트를 싫어한다는 걸 학습한 모델들이 이제 크림색, 에메랄드, 이탤릭 세리프로 옮겨 가고 있다고 지적합니다. 새 "기본값"도 결국 슬롭이 됩니다.

출처: GitHub febbhav/signs-of-ai-design 갈무리

규칙을 매번 적기 번거롭다면 디자인 스킬을 쓰는 방법도 있습니다. 긱뉴스에 소개된 hallmark처럼 안티 슬롭 규칙을 묶어 클로드 코드·커서·코덱스에 붙이는 스킬이 나와 있습니다. 다만 긱뉴스 댓글에도 "이것도 AI 티가 난다"는 반응이 있듯, 스킬 역시 또 하나의 기본값이 될 수 있으니 결과를 직접 보고 고르는 과정은 남겨 두세요.

출처: GeekNews 갈무리

Q. Inter 글꼴을 쓰면 무조건 슬롭인가요?

아닙니다. 원문도 요소 자체보다 "아무 고민 없이 모두가 같은 선택을 하는 것"을 문제로 봅니다. 한국어 서비스라면 본문 글꼴과 제목 글꼴을 목적에 맞게 따로 고르는 것만으로도 인상이 달라집니다.

Q. 바이브 코딩으로는 좋은 UI를 못 만드나요?

원문 필자도 자기 블로그를 바이브 코딩으로 만들었고 결과가 괜찮다고 말합니다. 방향을 구체적으로 주고, 첫 결과를 보며 장식을 걷어 내는 수정을 반복하는 과정이 차이를 만듭니다.

3줄 핵심 요약

1. 슬롭 UI는 목적 없는 장식과 뻔한 기본값으로 채운 AI 생성 화면이다. 그라디언트, 배지, 이모지, 과장 문구가 대표 단서.
2. 배지·색·문구에는 "무엇을 구별하거나 전달하나"를 물어 장식을 걸러 내자.
3. "AI 느낌 빼"가 아니라 피할 패턴을 구체적으로 적고, 첫 결과를 보며 금지 목록을 늘리자.

마치며

AI 덕분에 화면 초안을 만드는 부담은 크게 줄었지만, 그만큼 "다 비슷해 보이는 화면"도 흔해졌습니다. 오늘은 최근 AI로 만든 페이지 하나를 열어 배지, 이모지, 부제목을 하나씩 가리키며 "이게 무슨 정보를 주지?"라고 물어보세요. 답이 없는 것부터 지우면 됩니다.

NEXT READ

이어서 읽어 볼 글

01  Cloudflare Python Workers 정식 출시 · 만든 화면을 배포하기

02  AI가 짠 코드, 그림으로 읽는다 · AI 결과물 검토하기

#슬롭UI,#AI디자인,#바이브코딩,#프론트엔드,#UI디자인,#클로드,#AI슬롭,#웹디자인,#프롬프트,#만들고배포하기