AI 티 나는 UI 디자인의 특징과 피하는 방법.

AI가 만든 랜딩 페이지는 1초 만에 알아볼 수 있습니다. 보라색 그라데이션, 가운데 정렬 히어로, 똑같이 생긴 카드 세 개. 이런 티가 나는 이유는 브리프에 빈틈이 있으면 에이전트가 가장 흔한 패턴으로 채우기 때문입니다. 각 특징을 알아보는 법과, 아예 나타나지 않도록 에이전트에게 브리프를 주는 법을 정리했습니다.

2026년 11월 6일 업데이트 · 8분 분량

AI가 만든 UI가 다 비슷해 보이는 이유

코딩 에이전트는 브리프의 빈틈을 지금까지 본 것 중 가장 안전하고 흔한 선택으로 채웁니다. “모던한 랜딩 페이지”를 요청하면 수천 개 모던한 랜딩 페이지의 평균이 나옵니다. 남색 그라데이션, 가운데 정렬 헤드라인, 둥근 카드 그리드. 하나하나는 잘못이 없지만, 모아 놓으면 템플릿처럼 읽히고 방문자도 알아챕니다.

해결책은 더 똑똑한 모델이 아닙니다. 빈틈이 적은 브리프와, 이런 특징을 일부러 찾아보는 검토 단계입니다.

12가지 특징

비주얼 스타일

보라색에서 파란색으로 넘어가는 그라데이션. 그라데이션 버튼, 그라데이션 헤드라인 텍스트, 히어로 뒤의 은은한 보라색 광채. 기본 “테크” 룩이 되어 버려서, 이제는 “아무도 고민하지 않았다”는 신호가 됐습니다.
모든 곳에 둥근 모서리와 부드러운 그림자. 카드, 버튼, 이미지가 모두 같은 큰 반경과 같은 흐린 그림자를 써서 아무것도 눈에 띄지 않습니다.
글래스모피즘과 광채. 어두운 배경 위의 반투명 패널과 네온 윤곽선을 위계 표현이 아니라 장식으로 씁니다.
일러스트 대신 이모지나 흔한 아이콘. 색깔 동그라미 안의 반짝이, 로켓, 번개가 실제 제품 비주얼을 대신합니다.

레이아웃

모든 것이 가운데 정렬. 히어로도, 섹션 제목도, 카드도, 푸터도 가운데 정렬. 가운데 정렬 텍스트는 훑어보기 어렵고 시선의 흐름을 없앱니다.
똑같은 기능 카드 세 개. 아이콘, 두 단어짜리 제목, 모호한 문장 하나가 완벽한 그리드에 세 번 반복됩니다.
일정한 리듬. 모든 섹션의 높이, 패딩, 구조가 같아서 페이지에 강조점도 완급도 없습니다.

타이포그래피

폰트 하나, 굵기 하나, 대비 없음. 비슷한 크기의 산세리프 하나만 써서 헤드라인, 라벨, 본문이 뒤섞입니다.

문구와 콘텐츠

뻔한 문구. “~의 힘을 경험하세요”, “매끄러운”, “워크플로를 한 단계 업그레이드”, 또는 “빠르게. 안전하게. 간단하게.” 같은 헤드라인. 어떤 제품에 붙여도 말이 됩니다.
모호한 사회적 증거. 플레이스홀더 로고 줄 위의 “10,000개 이상의 팀이 신뢰합니다”, 그리고 “김OO, CEO”의 추천사.
같은 말을 반복하는 섹션. 기능, 장점, “왜 우리인가” 섹션이 같은 세 가지 주장을 표현만 바꿔 되풀이합니다.
스톡 이미지. 제품 대신 추상적인 3D 덩어리나 흔한 일러스트.

두 번째 물결의 특징

에이전트가 보라색 그라데이션을 피하는 법을 익히자 새로운 기본값이 그 자리를 차지했습니다. 2026년 11월 기준으로 Anthropic의 frontend-design 스킬과 Impeccable은 둘 다 아래 항목도 AI 티가 나는 특징으로 지적합니다.

크림색, 세리프, 테라코타. 따뜻한 오프화이트 페이지, 세리프 헤드라인(대개 이탤릭체 단어 하나), 러스트나 테라코타 포인트 컬러. 보라색 그라데이션의 “세련된” 대안으로 등장했지만 지금은 그만큼 흔해졌습니다.
거의 검은 배경에 쨍한 포인트 컬러 하나. 검은 페이지에 쨍한 연두색이나 주홍색 하나만 더한 조합.
제목 위의 작은 라벨(아이브로). 모든 제목 위에 붙은 작은 대문자 라벨이나 알약 모양 배지.
번호 붙은 섹션과 모노스페이스 라벨. 섹션 앞의 “01 / 02 / 03”, 코드 폰트로 쓴 데이터 라벨.
어디에나 있는 헤어라인. 모든 페이지를 똑같은 신문 지면처럼 보이게 만드는 얇은 선과 윤곽선 상자.
모든 섹션의 페이드 인. 필요한지와 상관없이 스크롤할 때마다 반복되는 같은 슬라이드 업 애니메이션.

어떤 목록도 오래 최신 상태를 유지하지 못합니다. 고치는 방법 하나하나가 다음 기본값이 되기 때문입니다. 오래 가는 해법은 피해야 할 것의 목록이 아니라 제품과 대상 사용자에서 나온 방향입니다.

처음부터 나타나지 않게 브리프 쓰는 법

에이전트가 대신 내릴 결정을 브리프에서 미리 내려 두면 대부분의 특징이 사라집니다.

아트 디렉션을 명시하세요. “따뜻한 에디토리얼, 세리프 헤드라인, 크림색 배경”은 에이전트에게 관점을 줍니다. “모던하고 깔끔하게”는 그렇지 않습니다.
실제 제약 조건을 정하세요. 브랜드 색상, 포인트 색상 하나, 폰트, 모서리 반경. DESIGN.md 파일에 한 번 정리해 두면 모든 화면에 적용됩니다.
실제 콘텐츠를 주세요. 실제 제품 이름, 숫자, 고객 인용문, 스크린샷. 구체적인 콘텐츠가 구체적인 레이아웃을 끌어냅니다.
레퍼런스를 보여 주세요. 마음에 드는 사이트의 스크린샷 한 장이 형용사로 가득한 문단보다 많은 것을 말해 줍니다.
서로 다른 방향을 요청하세요. 일부러 다르게 만든 세 가지 안을 보면 어느 것이 뻔한지 분명해집니다. Codex로 UI 디자인하는 방법을 참고하세요.

다음 프롬프트는 디자인을 시작하기 전에 방향부터 정합니다.

아트 디렉션 정하기

디자인하기 전에 [제품]에 대해 서로 확실히 다른 아트 디렉션 세 가지를 제안해 줘. 각각 다음을 포함해서: 한 줄짜리 분위기, 폰트 조합, 포인트 색상 하나를 포함한 최대 4색 팔레트, 모서리 반경, 가운데 정렬 히어로가 아닌 레이아웃 아이디어 하나. 보라색이나 파란색 그라데이션, 글래스모피즘, 이모지 아이콘, 카드 3개짜리 기능 그리드는 피해 줘. 내가 하나를 고를 때까지 기다려 줘.

이미 그런 특징이 있는 페이지를 고치는 법

에이전트에게 목록을 기준으로 자기 작업을 점검하게 하세요. 특징을 짚어 주기만 하면 잘 찾아냅니다.

AI 티 점검하기

이 페이지에서 AI가 만든 것처럼 보이는 신호를 점검해 줘: 보라색이나 파란색 그라데이션, 모든 요소에 같은 반경과 그림자, 글래스모피즘이나 광채, 이모지나 흔한 아이콘, 전부 가운데 정렬, 똑같은 기능 카드, 일정한 섹션 리듬, 한 가지 폰트 굵기, 뻔한 문구, 모호한 사회적 증거, 반복되는 섹션, 스톡 이미지. 찾은 항목마다 어디에 나타나는지 정리하고, 가장 눈에 띄는 5개를 고쳐 줘. 나머지는 모두 그대로 유지해 줘.

뻔한 문구는 비주얼을 고쳐도 살아남으므로 문구는 보통 따로 한 번 더 손봐야 합니다.

뻔한 문구 다시 쓰기

이 페이지의 모든 헤드라인과 기능 설명을 다시 써 줘. 각 문구는 사용자가 얻는 것을 말해야 하고, 우리 제품의 구체적인 디테일이나 숫자를 하나씩 넣어야 해. 다음 표현은 쓰지 마: 혁신적인, 매끄러운, 차원이 다른, 손쉬운, 강력한, 획기적인, 한 단계 업그레이드. 길이는 비슷하게 유지해 줘.

레이아웃은 이렇게 요청하세요.

템플릿 레이아웃 깨기

기능 섹션이 똑같은 카드 세 개를 쓰지 않도록 다시 디자인해 줘. 가장 중요한 기능에 두 배의 공간을 주고, 각 기능을 HTML로 그린 작은 UI 비주얼로 보여 주고, 텍스트는 왼쪽 정렬하고, 섹션 리듬에 변화를 줘서 페이지에 확실한 강조 지점이 하나 생기게 해 줘.

도움이 되는 스킬

디자인 스킬은 대부분 이런 기본값에 맞서기 위해 존재합니다. Taste Skill과 Anthropic의 frontend-design 스킬은 모두 템플릿식 선택에서 에이전트를 멀어지게 하고, Impeccable은 CI에서 실행할 수 있는 62개 규칙의 디텍터를 더합니다. 서로 어떻게 다른지는 Taste Skill vs Impeccable vs UI UX Pro Max 비교를, 그 밖의 스킬은 UI 디자인에 좋은 Codex 스킬 추천을 참고하세요.

배포하기 전에 비교하세요

이런 특징은 대안과 나란히 놓을 때 가장 잘 보입니다. 원래 버전과 수정한 버전을 브라우저 창 두 개나 캔버스에 나란히 놓으면 뻔한 쪽이 확연히 드러납니다. Codex Design이 바로 그런 용도입니다. Codex가 만든 모든 방향이 라이브 HTML로 서로 나란히 표시됩니다.

자주 묻는 질문

사이트가 AI로 만든 것처럼 보이면 문제가 되나요?

신뢰를 잃습니다. 방문자는 템플릿 같은 페이지를 성의 없다고 받아들이고, 어떤 제품에나 해당될 페이지는 내 제품을 설명하지 못합니다. 구체적이고 의도적인 디자인은 제품을 실제만큼 진짜처럼 보이게 합니다.

Codex가 이런 패턴을 만들지 않게 할 수 있나요?

대부분은 가능합니다. 아트 디렉션과 제약 조건을 DESIGN.md나 AGENTS.md에 넣고, 디자인 스킬을 설치하고, 마지막에 위의 점검 프롬프트를 실행하세요. 결과를 검토하는 일은 여전히 직접 해야 합니다.

그라데이션과 둥근 모서리는 무조건 나쁜가요?

아니요. 의도적이고 브랜드에 맞는다면 어떤 것이든 옳은 선택이 될 수 있습니다. 문제는 아무도 다르게 결정하지 않아서 이 모든 것을 기본값으로 한꺼번에 쓰는 것입니다.