바이브코딩 웹사이트 AI 티 빼는 법, 기본값 다섯 자리만 바꾸면 됩니다

오즈입니다.

AI로 웹사이트를 뽑아놨는데 어딘가 어색해서 계속 손보고 계신가요? 아니면 분명 잘 나왔는데 "이거 AI로 만드셨죠?"

소리를 듣고 김이 새셨나요?

그렇다면 이 글을 끝까지 보셔야 합니다.

오늘은 AI가 만든 화면에서 티가 나는 다섯 자리와, 그걸 하나씩 벗기는 방법을 정리하겠습니다.

그리고 마지막에는 취향으로 끝나지 않게, 제 사이트 색을 직접 측정한 숫자를 그대로 공개하겠습니다.

먼저 결론입니다. AI 티는 실력 문제가 아니라 기본값 문제입니다. AI는 가장 흔한 패턴을 내놓는 쪽으로 기울고, 다들 그 기본값을 그대로 쓰니까 결과물이 서로 닮습니다.

그래서 다섯 자리의 기본값만 바꿔도 티가 크게 빠집니다.

이 글은 AI 검색 최적화 3관문 시리즈와 별개의 각론입니다.

왜 다들 비슷하게 나올까요

AI에게 "깔끔한 대시보드 만들어줘"라고 하면, 세상에서 가장 흔한 깔끔한 대시보드가 나옵니다.

그게 잘못된 게 아니라 원래 그렇게 동작합니다.

문제는 모두가 같은 걸 안 주고 같은 걸 요청한다는 점입니다.

그러니 결과가 겹칩니다. 지시를 잘하고 못하고를 떠나, 입력이 비면 기본값이 나옵니다.

그래서 해야 할 일은 "AI 티 빼줘"라고 다시 시키는 게 아니라, 기본값이 들어갈 자리를 미리 채워주는 것입니다.

자리는 다섯 개입니다.

1. 색 — 기본 팔레트를 그대로 쓰지 마세요

제일 티가 크게 나는 자리이고, 제일 고치기 쉬운 자리입니다.

프레임워크가 기본으로 주는 파랑, 회색, 초록을 그대로 쓰면 어디서 본 화면이 됩니다. 다들 같은 기본값을 쓰고 있으니까요.

방법은 순서를 바꾸는 겁니다. 화면을 뽑기 전에 색을 먼저 정하세요. 그리고 그 색을 주면서 만들어달라고 하세요.

배경·글자·강조·경계 네 가지만 정해도 충분합니다.

색을 고르는 감이 없으시면 색상환 도구로 한 색을 정하고 거기서 파생시키면 됩니다.

중요한 건 예쁜 색을 고르는 게 아니라 남들과 다른 색을 정해두는 것입니다.

2. 아이콘 — 이모지가 남아 있으면 바로 티가 납니다

AI는 아이콘 자리에 이모지를 넣는 경향이 있습니다. 🚀 📊 ✅ 같은 것들이요.

이모지는 운영체제마다 모양이 다르고, 크기와 굵기가 옆 글자와 안 맞습니다. 정렬이 미묘하게 어긋나는 이유가 대체로 여기 있습니다.

아이콘 라이브러리 하나를 정해서 전부 교체하세요. 어떤 걸 쓰느냐보다 하나로 통일했느냐가 중요합니다.

종류가 섞이는 순간 다시 티가 납니다.

3. 컴포넌트 모양 — 반복되는 세 가지가 있습니다

관찰해보면 AI가 유독 자주 만드는 모양이 있습니다.

• 왼쪽에 색 선을 그은 알림 박스 — 안내문이 필요하면 거의 이 모양이 나옵니다

• 점 하나 찍고 글자 넣은 둥근 상태 뱃지 — 완료 / 진행 중 / 대기

• 가운데 큰 글씨에 그라디언트를 깐 상단 영역

이 셋이 한 화면에 다 있으면 사람들이 대체로 알아봅니다.

전부 갈아엎을 필요는 없습니다.

각 요소에서 한 가지씩만 다르게 하면 됩니다. 모서리를 각지게 하거나, 선을 왼쪽 대신 위쪽에 두거나, 점 대신 작은 아이콘을 넣거나. 하나만 바꿔도 인상이 달라집니다.

4. 문구 — 내용이 없는 문장이 제일 티가 납니다

디자인보다 문구에서 먼저 들킵니다.

"지금 바로 시작하세요", "더 나은 경험을 제공합니다" 같은 문장은 어느 서비스에 붙여도 말이 됩니다.

바꿔 넣어도 티가 안 나는 문장은 아무 일도 안 합니다.

이건 1차 정보 편에서 말씀드린 것과 같은 얘기예요. "3주 뒤에 받으실 수 있습니다"처럼 우리만 쓸 수 있는 문장으로 바꾸면, 같은 화면인데 완전히 달라 보입니다.

5. 간격 — 전부 똑같으면 위계가 사라집니다

AI가 만든 화면은 여백이 균일한 경우가 많습니다. 제목과 본문 사이, 문단과 문단 사이, 카드와 카드 사이가 전부 같은 값이에요.

그러면 뭐가 중요한지 눈으로 구분이 안 됩니다. 사람이 만든 화면은 관련 있는 것끼리 붙이고 다른 덩어리는 확실히 띄웁니다.

규칙 하나만 지키셔도 됩니다. 묶음 안쪽 간격보다 묶음 사이 간격을 두 배 이상 크게. 이것만 해도 화면이 정리됩니다.

여기까지는 취향, 여기부터는 규칙입니다

지금까지는 "그렇게 보인다"는 얘기였습니다.

그런데 AI가 만든 화면에는 취향이 아니라 명확한 기준을 어기는 문제가 하나 자주 섞입니다. 색 대비입니다.

옅은 회색 글자, 연한 배경 위의 연한 글자. 만들 때는 세련돼 보이는데 실제로는 안 읽힙니다.

기준이 있습니다.

W3C의 웹 접근성 지침(WCAG 2.2) 성공 기준 1.4.3은 일반 텍스트에 최소 4.5:1, 큰 텍스트에 최소 3:1의 명도 대비를 요구합니다. 여기서 큰 텍스트는 18pt(약 24px) 이상, 굵은 글씨는 14pt(약 18.5px) 이상을 말합니다.

이건 의견이 아니라 계산으로 나오는 값입니다. 색 두 개만 있으면 누구나 검증할 수 있어요.

제 사이트를 직접 재봤습니다

【직접 확인 · 2026-07-25】 남 얘기만 하면 공평하지 않으니 오즈엔즈에 쓰는 색을 그대로 계산해봤습니다.

• 본문 글자 · 흰 배경 — 17.40 : 1 (본문 기준 통과)

• 보조 글자(회색) · 흰 배경 — 4.83 : 1 (통과)

• 강조색 링크 · 흰 배경 — 4.57 : 1 (통과)

• 강조색 · 연한 강조 배경 — 4.03 : 1 (본문 기준 미달, 큰 글씨로만 가능)

세 개는 통과인데 넉넉하지는 않습니다. 보조 글자가 4.83, 강조색이 4.57이니 기준선을 살짝 넘긴 정도예요.

여기서 회색을 조금만 더 옅게 했으면 바로 미달이었습니다.

그리고 마지막 줄은 실제로 미달입니다. 연한 강조 배경 위에 강조색 글자를 얹은 조합인데, 본문 크기로 쓰면 기준에 못 미칩니다.

큰 글씨나 굵은 글씨로만 써야 합니다.

이런 건 눈으로 봐서는 절대 모릅니다. 재봐야 압니다. 그리고 재보는 데 1분이면 됩니다.

한 번 정했으면 문서로 남기세요

매번 새 프로젝트마다 다섯 자리를 다시 정하면 그건 그냥 매번 새로 고생하는 겁니다.

한 번 정한 값을 짧은 문서 하나로 만들어두고, 작업을 시작할 때 통째로 주세요.

거창할 필요 없습니다. 이 정도면 충분합니다.

색 — 배경 #FFFFFF / 글자 #1A1A1A / 보조 글자 #6B7280 / 강조 #2F6FEB / 경계 #E5E7EB
아이콘 — 한 라이브러리로 통일. 이모지 사용 금지
금지 패턴 — 왼쪽 색 선 알림 박스, 점 찍힌 둥근 상태 뱃지, 그라디언트 상단 영역
문구 — "지금 시작하세요" 같은 일반 문장 금지. 구체적 숫자나 조건을 넣을 것
간격 — 묶음 안쪽 8px / 묶음 사이 24px 이상
대비 — 본문 4.5:1 이상 확인

여섯 줄입니다. 이걸 앞에 붙여놓고 화면을 요청하면 결과가 확 달라집니다.

"AI 티 나지 않게 해줘"보다 이 여섯 줄이 훨씬 잘 먹힙니다. 앞엣것은 판단을 AI에게 떠넘기는 말이고, 뒤엣것은 값을 주는 말이거든요.

그리고 이 문서는 프로젝트를 하나 더 할 때마다 다듬어집니다. 두 번째 프로젝트부터는 30분이 5분이 됩니다.

그래서 몇 시간이면 되나요

다섯 자리를 한 번에 다 하려면 부담스러우니 나눠서 보겠습니다.

• 색 정하기 — 30분

• 아이콘 교체 지시 — 10분

• 반복 모양 세 개 손보기 — 40분

• 문구 다시 쓰기 — 30분 (제일 오래 걸리지만 효과가 제일 큽니다)

• 간격 규칙 적용 — 20분

• 대비 측정 — 10분

합쳐서 두 시간 반입니다. 화면을 다시 뽑는 것보다 짧고, 다음 프로젝트부터는 이 값들을 그대로 재사용할 수 있어서 더 짧아집니다.

한 가지만 덧붙이면, 이 여섯 개를 처음에 미리 주고 시작하는 게 제일 빠릅니다. 뽑고 나서 고치면 두 시간 반이지만, 먼저 주고 뽑으면 한 번에 끝납니다.

오즈가 직접 확인한 것

확인함 — WCAG 2.2 성공 기준 1.4.3의 수치(4.5:1, 3:1)와 큰 텍스트 정의는 W3C 문서 원문에서 확인했습니다. 위 대비비 4건은 오즈엔즈에 실제로 쓰는 색 값으로 제가 직접 계산한 결과입니다.

확인 못 함 — "AI가 이런 모양을 자주 만든다"는 부분은 제 관찰이지 측정이 아닙니다. 표본을 세어본 게 아니라 단정하지 않겠습니다.

아직 못 봄 — 미달로 나온 조합을 고친 뒤 실제로 읽기가 나아졌는지. 고치고 나서 다시 올리겠습니다.

오늘 할 일 3가지

1. 우리 사이트의 글자색과 배경색 조합 대비비를 재보기 — 1분이면 됩니다

2. 화면에 이모지가 남아 있는지 확인하고 아이콘으로 바꾸기

3. 첫 화면 문구 한 줄을 우리만 쓸 수 있는 문장으로 교체하기

자주 묻는 질문

Q. 디자인 감각이 없어도 되나요?
A. 다섯 자리는 감각이 아니라 결정입니다. 색을 미리 정하고, 아이콘을 하나로 통일하고, 간격 규칙을 정하는 건 취향과 무관하게 할 수 있습니다.

Q. 대비비는 어떻게 재나요?
A. 색 두 개를 넣으면 계산해주는 도구가 많습니다. 브라우저 개발자 도구에서도 요소를 찍으면 대비비가 나옵니다.

Q. 기준을 살짝 넘기면 충분한가요?
A. 통과는 통과입니다. 다만 제 사이트처럼 4.5를 겨우 넘긴 값은 색을 조금만 만져도 미달로 떨어지니, 여유를 두는 편이 낫습니다.

Q. 컴포넌트 라이브러리를 쓰면 티가 안 나나요?
A. 잘 만든 걸 쓰면 완성도는 올라갑니다. 다만 다들 같은 걸 쓰면 다시 비슷해집니다. 색과 문구는 어차피 우리 것으로 바꾸셔야 합니다.

Q. AI에게 "AI 티 나지 않게 해줘"라고 하면 되지 않나요?
A. 그 지시로는 또 다른 기본값이 나올 뿐입니다. 색·아이콘·문구처럼 구체적인 값을 주는 편이 훨씬 잘 먹힙니다.

출처

• W3C, 「Understanding Success Criterion 1.4.3: Contrast (Minimum)」(WCAG 2.2, Level AA) — w3.org

• 오즈엔즈 자체 측정 — besideodds.com에 사용 중인 색 값 기준, 2026년 7월 25일 계산

• 오즈엔즈, 「GEO 최적화 방법 — 1차 정보 찾는 질문 5개」 — besideodds.com/post/44

• 오즈엔즈, 「유튜브 중복 콘텐츠 기준」 — besideodds.com/post/47

정리하면 이렇습니다. AI 티는 안목이 아니라 기본값에서 납니다. 다섯 자리를 미리 채워주면 대부분 빠지고, 색 대비는 아예 숫자로 확인할 수 있습니다.

같은 글머리에 만드는 과정을 다룬 3부작이 있습니다. 화면이 아니라 작업 방식이 무너질 때 보시면 됩니다.

• 넘길 것 — 세션이 끊겨도 다음 AI에게 넘어가는 것 → 바이브코딩 하는법: AI가 매번 처음부터 다시 묻지 않게 만드는 문서 3장

• 가를 것 — 어디까지 코드가 하고 어디부터 AI가 판단하나 → 클로드코드 사용법: AI한테 시키면 안 되는 일을 가르는 선 하나

• 막을 것 — AI가 실패해도 프로그램이 안 죽게 → AI 코딩 프로그램 만들 때: AI가 멈춰도 프로그램은 안 멈추게 하는 3가지

결과물이 매번 달라지는 이유가 궁금하시면 이어지는 글을 보세요. 지시를 어디에 넣느냐로 갈립니다.

• 클로드코드 스킬 만들기 — 같은 말을 매번 다시 치지 않게 하는 3층

읽으시다가 "우리 화면은 어디가 문제인지 모르겠다" 싶으면 댓글에 색 값만 남겨주세요. 재보고 다음 글에 넣겠습니다.

최초 작성 2026-07-25 · 최종 수정 2026-07-25