---
type: knowledge
domain: design
status: active
last-reviewed: 2026-07-13
source-method: web-research
---

# AI 티 없는 웹디자인 원칙

> 한 줄 정의
> AI 티는 특정 색이나 폰트 하나가 아니라 **사람이 결정하지 않은 부분을 모델의 통계적 기본값이 대신 채운 흔적**이다. 해결책은 더 꾸미는 것이 아니라 실제 사용자·콘텐츠·업무·상태에 근거한 결정을 늘리는 것이다.

> [!IMPORTANT] 결론
> `더 세련되게`, `프리미엄하게`, `모던하게`라고 다시 생성하지 않는다. 실제 콘텐츠와 업무 흐름을 먼저 넣고, 레이아웃·타이포·색·컴포넌트의 이유를 각각 설명할 수 있을 때만 시각 구현을 시작한다.

## 왜 AI 디자인은 서로 닮나

실무자 진단 자료에서 반복되는 설명은 같다. 목적·사용자·콘텐츠·레이아웃 제약이 비어 있으면 생성 도구는 성공 확률이 높은 익숙한 조합으로 수렴한다. 그 결과 안전한 산세리프, 중앙 정렬 히어로, 청보라 글로우, 둥근 카드, 짧은 마케팅 카피가 한꺼번에 나온다.

연구 측면에서도 자동 미적 평가만 믿기 어렵다. 2026년 TASTE 연구는 전문 디자이너가 생성형 그래픽 디자인을 타이포·위계·색·공간·브리프 충실도 등 여러 축으로 평가한다는 점을 보였고, 조사한 범용 자동 평가기는 디자이너 다수 의견과의 일치도가 0.55를 넘지 못했다. 즉 **한 번의 AI 생성 + AI 자기평가로 디자인 품질을 닫으면 안 된다**.

## 12가지 AI 냄새

| 냄새 | 화면에서 보이는 증상 | 바꿀 결정 |
|------|----------------------|-----------|
| 기본 타이포 | 안전한 산세리프 하나, 비슷한 굵기·크기 | 제품 성격에 맞는 서체 역할과 타입 스케일 |
| 그라디언트 광택 | 청색·보라 글로우가 브랜드 역할을 대신함 | 액션·경고·선택 등 의미 기반 색 |
| 카드 수프 | 모든 문장이 같은 radius·padding의 카드 | 반복·독립 항목에만 카드, 나머지는 표·목록·본문 |
| 정중앙 히어로 | 작은 배지 → 큰 제목 → 설명 → 버튼 2개 | 실제 첫 과업과 콘텐츠 길이가 정하는 구성 |
| 균등 3열 | 내용 중요도와 무관하게 같은 크기 3개 | 중요도·사용 빈도·순서에 따른 비대칭 |
| 아이콘 장식 | 둥근 아이콘 상자 위에 추상 명사 | 의미가 없으면 삭제, 행동·상태 표시에만 사용 |
| 가짜 카피 | 혁신·간편·강력·원활 같은 범용 문장 | 실제 사용자가 얻는 결과와 조건을 구체적으로 |
| 가짜 데이터 | 축·단위·출처 없는 차트와 멋진 숫자 | 실제 데이터 또는 명시된 예시 데이터·출처 |
| 지나친 매끈함 | 모든 간격·모서리·그림자가 동일 | 콘텐츠 관계에 따라 간격·경계·밀도 변화 |
| 도메인 부재 | 로고를 바꾸면 어느 서비스에도 적용 가능 | 도메인 고유 객체·용어·절차·증거 |
| 정상 상태만 존재 | 빈 값·긴 제목·오류·지연·권한 없음이 빠짐 | 실제 엣지 상태를 시안 단계부터 포함 |
| 포스터 착각 | 1600×1000 한 장은 예쁘지만 클릭 흐름이 없음 | 모바일·데스크톱의 과업 시작→완료 흐름 |

> [!NOTE] 카드 자체가 문제는 아니다
> USWDS는 카드를 서로 바꿔도 뜻이 유지되는 반복 컬렉션에 적합하다고 설명한다. 표 데이터, 단일 행동, 연속 본문을 카드에 넣는 순간 카드가 구조가 아니라 장식이 된다.

## 제거 순서 — 장식보다 결정

### 1. 실제 입력을 먼저 잠근다

- 사용자: 누가, 어떤 상황에서, 무엇을 끝내려는가.
- 실제 콘텐츠: 최종에 가까운 제목·본문·버튼·표·이미지·데이터.
- 실제 상태: 기본·로딩·빈 값·오류·긴 콘텐츠·권한 없음·완료.
- 제약: 기기, 접근성, 다국어, 브랜드 자산, 기존 디자인 시스템.

Smashing Magazine의 content-first 원칙처럼, 실제 콘텐츠가 있어야 무엇을 크게 하고 무엇을 묶을지 결정할 수 있다. 로렘 입숨이나 보기 좋은 가짜 문장은 레이아웃 결함을 숨긴다.

### 2. 화면의 직업을 한 문장으로 쓴다

`이 화면은 {사용자}가 {조건}에서 {과업}을 완료하게 한다.`

- 문장에 없는 섹션은 삭제 후보.
- 첫 화면의 주인공은 브랜드 슬로건이 아니라 가장 중요한 정보 또는 행동.
- GOV.UK 원칙처럼 사용자 필요에서 시작하고, 핵심만 남기며, 실제 데이터로 반복한다.

### 3. 레퍼런스는 분위기가 아니라 문법으로 읽는다

완성도 높은 **실제 운영 사이트** 2~3개를 선택하고 아래만 추출한다.

| 추출 항목 | 나쁜 기록 | 좋은 기록 |
|-----------|-----------|-----------|
| 계층 | 깔끔하다 | H1 48px/650, 본문 18px, 보조 라벨 13px |
| 그리드 | 여백이 좋다 | 본문 7/12열, 메타 3/12열, gutter 24px |
| 색 | 고급 네이비 | 본문 `#17212B`, 액션 `#2F6690`, 경계 `#C9D2D9` |
| 컴포넌트 | 카드가 예쁘다 | 독립된 반복 항목만 카드, 본문은 경계 없음 |
| 리듬 | 정돈됐다 | 섹션 72px, 그룹 24px, 항목 12px |

레퍼런스를 복제하지 않는다. **왜 그 구조가 그 콘텐츠에 맞는지**를 적지 못하면 사용하지 않는다.

### 4. 한 가지 시각 결정만 강하게 한다

- 화면마다 기억점은 하나: 독특한 조판, 고유 데이터 표현, 도메인 자산, 비정형 그리드 중 하나.
- 포인트가 3개 이상이면 AI가 “스타일 키워드”를 모두 표면에 붙인 모습이 된다.
- 나머지는 그 결정이 보이도록 조용하게 받친다.

### 5. 삭제 패스를 별도로 실행한다

다음 요소를 하나씩 가리고 정보·행동 손실이 없으면 삭제한다.

- 장식용 배지·아이콘·글로우·그라디언트
- 카드 안의 카드와 불필요한 테두리
- 두 번째 CTA
- 근거 없는 통계·로고 스트립·후기
- `혁신적인`, `강력한`, `원활한`, `차세대` 같은 형용사

> [!TIP] 실무 휴리스틱
> 첫 시안에서 컨테이너·장식 요소의 약 30%를 지워보는 것은 유용한 **내부 진단법**이다. 30%는 연구 수치가 아니라 과잉을 드러내기 위한 강제 제약이다.

## AI에 전달할 디자인 계약

```text
[화면의 직업]
- 사용자:
- 완료해야 할 과업:
- 사용 맥락:

[실제 입력]
- 확정 카피:
- 실제 데이터/도메인 객체:
- 필요한 이미지와 출처:

[콘텐츠 우선순위]
1.
2.
3.

[필수 상태]
- 기본 / 로딩 / 빈 값 / 오류 / 긴 콘텐츠 / 권한 없음 / 완료

[레퍼런스 DNA]
- 레퍼런스 URL 2~3개:
- 가져올 문법:
- 가져오지 않을 요소:

[명시적 디자인 결정]
- 그리드:
- 제목/본문/라벨 서체·크기·굵기·행간:
- 색 토큰과 의미:
- 간격 스케일:
- radius / border / shadow 규칙:

[금지]
- 중앙 히어로 + 버튼 2개
- 균등 3열 카드
- 장식용 청보라 그라디언트·글로우
- 둥근 아이콘 상자
- 가짜 데이터·가짜 후기·범용 마케팅 카피
- 모든 콘텐츠의 카드화

[완료 조건]
- 5초 안에 화면 목적과 다음 행동을 말할 수 있음
- 320 / 768 / 1440px에서 핵심 과업 완료 가능
- 키보드·포커스·대비 확인
- 모든 필수 상태 캡처
- 각 시각 결정의 이유를 사용자·콘텐츠·업무 중 하나로 설명
```

## 리뷰 절차 — AI에게 자기 취향을 묻지 않는다

### 1차: AI 냄새 점수

위 12개 냄새마다 `0 없음 / 1 일부 / 2 강함`으로 채점한다.

- `0~4`: 다음 검증으로 진행.
- `5~9`: 가장 높은 항목 2개만 수정하고 다시 캡처.
- `10+`: 꾸미기 중단. 사용자·과업·콘텐츠·레이아웃 결정부터 다시 작성.

이 구간은 팀 운영을 위한 내부 기준이다. 과학적 품질 점수가 아니다.

### 2차: 실제 화면 검증

1. 5초 테스트 — 화면 목적과 다음 행동이 보이는가.
2. 실제 카피 교체 — 제목 2줄, 긴 이름, 빈 데이터에서 무너지지 않는가.
3. 상태 캡처 — 로딩·빈 값·오류·완료가 같은 시스템인가.
4. 반응형 캡처 — 320 / 768 / 1440px.
5. 사람 리뷰 — 디자이너 또는 실제 사용자에게 가장 어색한 한 곳을 묻는다.

NN/g가 강조하듯 좋은 시각 디자인은 타입과 요소의 그리드 정렬, 분명한 위계, 의도적인 색, 결정의 일관성으로 설명 가능해야 한다. “그냥 예뻐 보여서”만 남으면 아직 방향이 없는 상태다.

## 이번 반려에서 확인된 실패

2026-07-13에 처음 만든 [[시빅 인스티튜셔널]], [[정책 리포트]], [[디플로매틱 프로토콜]] v1 샘플은 최종 레퍼런스로 사용하지 않는다.

- 실존 사용자·실제 업무 입력 없이 가상의 기관명과 문구를 채웠다.
- 각 스타일을 1600×1000 포스터 한 장으로 표현해 실제 과업 흐름과 반응형 상태를 검증하지 않았다.
- 완벽한 정렬, 큰 표제, 장식적 영문 라벨이 반복돼 서로 다른 스타일도 같은 생성형 조판처럼 보였다.
- 스타일 이름을 시각 기호로 번역했을 뿐, 사용 맥락에서 나온 고유한 디자인 결정이 부족했다.

원본 묶음 데모는 실패 비교 자료로 남긴다. [[시빅 인스티튜셔널]]은 실제 정부24 콘텐츠와 KRDS 토큰을 적용한 반응형 v2로 교체해 `active`로 전환했다. [[정책 리포트]]와 [[디플로매틱 프로토콜]]은 재작업 전까지 `needs-rework` 상태로 봉인한다.

## 출처와 근거 수준

| 출처 | 활용한 근거 | 수준 |
|------|-------------|------|
| [TASTE 연구](https://arxiv.org/abs/2605.20731) | 디자이너 평가는 다축이며 범용 자동 평가와 정렬이 낮음 | 연구 논문·2026 |
| [GOV.UK Government Design Principles](https://www.gov.uk/guidance/government-design-principles) | 사용자 필요·핵심 최소화·데이터·반복 | 공식 실무 원칙 |
| [NN/g — Good Visual Design](https://www.nngroup.com/videos/analyzing-figmas-shortcut/) | 그리드·위계·의도적 색·일관성 | UX 전문기관 |
| [web.dev — Accessible Typography](https://web.dev/learn/accessibility/typography) | 행길이·구조·가독성·접근성 | 공식 기술 가이드 |
| [USWDS — Card](https://designsystem.digital.gov/components/card/) | 카드의 적합·부적합 사용 조건 | 정부 디자인 시스템 |
| [Smashing Magazine — Content First](https://www.smashingmagazine.com/2015/02/design-last/) | 실제 콘텐츠가 표현 방식을 결정 | 전문 매체·실무 |
| [The Crit — AI-built App Diagnostic](https://thecrit.co/resources/does-your-ai-built-app-look-vibe-coded) | 기본 타이포·그라디언트·카드 수프·상태 부재 진단 | 실무자 휴리스틱 |

> [!NOTE] 근거 해석
> “AI 냄새 12개”와 점수 구간은 여러 자료를 종합해 만든 내부 체크리스트다. 업계 표준이나 학술적으로 검증된 척도가 아니다. 반면 접근성·카드 사용·사용자 중심·사람 리뷰 필요성은 각각 공식 가이드와 연구 근거가 있다.

## 관련 문서

- [[디자인 프로세스와 평가]] · [[UI 시각 체계]] · [[디자인 스타일 카탈로그]] · [[디자인-체크리스트]] · [[UX 라이팅 원리]]