min.__.ai / 자료실
← 전체 자료자료 05 · WEB DESIGN
목차가장 빠른 사용법
MIN AI / 릴스 자료 05

AI티 안 나는
디자인 하는 방법

GPT·Claude에 그대로 붙여넣는 리디자인 프롬프트와
흔한 웹디자인 패턴 20가지를 고치는 기준을 정리했습니다.

전체 프롬프트 복사
HOW TO USE3 STEPS

가장 빠른 사용법

현재 화면을 통째로 갈아엎지 않고, 실제로 발견된 문제만 고치는 방식입니다.

  1. 코드나 화면을 함께 주세요.저장소에서 작업한다면 관련 페이지를 열어둔 뒤 프롬프트를 붙여넣으세요.
  2. 먼저 진단표를 받으세요.20개를 무조건 적용하지 말고 현재 화면에 있는 항목만 고르게 합니다.
  3. 실제 제품을 기준으로 검수하세요.예쁜 목업보다 링크·기능·제품 시연·모바일 동작이 먼저입니다.

빠르게 한 번 더 수정할 때

GPT에게 이렇게 말하세요
현재 웹사이트의 기능과 콘텐츠는 유지하면서 AI가 만든 듯한 흔한 디자인 문법만 줄여줘. 과한 그라데이션, 반복 아이콘, 3개 소개 카드, 벤토 그리드, 장식용 터미널, 과도한 둥근 모서리·그림자, 가짜 리뷰, 실제 제품 시연 부재를 먼저 점검해. 발견된 항목만 수정하고, 수정 전 진단과 수정 후 달라진 점을 함께 알려줘. 실제로 확인되지 않은 정보는 새로 만들지 마.
목차로 돌아가기 ↑
MASTER PROMPTCOPY & PASTE

GPT에 바로 붙여넣는 전체 프롬프트

코드 수정 전에 진단하고, 발견된 문제만 고치도록 만든 완성본입니다.

GPT에게 이렇게 말하세요
내가 제공하는 웹사이트 코드 또는 화면을 검토하고, "AI가 만든 듯한 흔한 랜딩페이지 문법"을 줄여줘.

[목표]
- 브랜드와 제품의 고유한 인상이 먼저 보이게 한다.
- 실제 제품 화면과 구체적인 정보를 중심에 둔다.
- 정보 위계, 가독성, 접근성, 반응형 동작을 유지하거나 개선한다.
- 기존 기능, 링크, 데이터, 라우팅은 망가뜨리지 않는다.

[작업 순서]
1. 코드를 수정하기 전에 아래 20개 항목 중 현재 화면에 실제로 나타난 것만 진단표로 정리한다.
2. 발견된 문제마다 "왜 어색한지 / 무엇으로 바꿀지"를 한 줄씩 적는다.
3. 진단된 항목만 수정한다. 존재하지 않는 문제를 고치려고 전체 디자인을 갈아엎지 않는다.
4. 수정 후 데스크톱과 모바일에서 레이아웃, 버튼, 링크, 키보드 포커스, 대비를 확인한다.

[줄여야 할 20가지 흔한 패턴]
1. 본문 뒤를 덮는 과한 그라데이션
2. 아무 의도 없이 화면 전체를 채운 하얀색 단색 배경
3. 모든 설명에 반복되는 Lucide 같은 선형 아이콘
4. 깊이 체계 없이 여러 요소에 붙인 무분별한 그림자
5. 제품 톤과 맞지 않는 이모지
6. 어디서나 똑같은 3개의 소개 카드
7. 브랜드와 무관한 무지개색 포인트
8. 기능과 관계없이 사용한 리퀴드 글라스 효과
9. 문장마다 반복되는 긴 대시(—)
10. 아무 조정 없이 사용한 Inter·Geist·Space Grotesk 계열의 익숙한 기본 타이포그래피
11. 카드 위에 습관적으로 붙인 작은 색깔 띠
12. 실제 근거가 없는 가짜 리뷰·별점·고객 수
13. 내용보다 모양을 먼저 맞춘 도시락(벤토) 그리드
14. 개발 도구가 아닌데 장식으로 넣은 터미널 창
15. 차이가 불명확한 3단계 요금제
16. 모든 설명을 체크 표시 목록으로 만든 구성
17. 실제 제품 화면·사용 과정·결과 시연이 없는 히어로
18. 모든 상자와 버튼에 같은 큰 둥근 모서리
19. 실제로 열리는 이용약관 페이지가 없음
20. 실제 서비스 방식과 맞는 개인정보처리방침 페이지가 없음

[대체 디자인 원칙]
- 색상은 브랜드 주색 1개, 중립색, 필요한 강조색 1개 안에서 먼저 해결한다.
- 모서리, 그림자, 여백은 소수의 디자인 토큰으로 통일하되 모든 요소를 똑같이 만들지 않는다.
- 첫 화면에는 실제 제품 화면, 입력→결과, 사용 장면 중 하나를 보여준다.
- 아이콘과 장식은 의미가 있을 때만 쓰고, 구체적인 제목과 설명이 역할을 대신할 수 있으면 제거한다.
- 섹션 개수와 카드 수는 내용에 맞춰 정한다. 억지로 3개씩 맞추지 않는다.
- 실제로 확인할 수 없는 후기, 수치, 파트너 로고, 수상 기록은 만들지 않는다.
- 폰트는 브랜드 성격과 한글 가독성을 기준으로 고르고, 크기·굵기·행간으로 명확한 위계를 만든다.
- 애니메이션은 제품 이해를 돕는 경우에만 사용하고 prefers-reduced-motion을 지원한다.
- 이용약관과 개인정보처리방침은 실제 경로와 링크를 만들되, 사업 정보와 데이터 처리 방식이 필요한 부분은 임의로 지어내지 말고 입력이 필요한 항목으로 표시한다.

[완료 보고]
- 발견한 항목
- 수정한 파일과 핵심 변경점
- 유지한 기존 기능
- 아직 실제 정보 입력이나 사람의 확인이 필요한 부분
- 모바일·접근성·빌드 확인 결과

먼저 진단표를 보여준 뒤 수정 작업을 진행해줘.

팁 이미 만든 사이트라면 주소만 보내기보다 코드가 있는 작업 환경에서 사용하세요. 그래야 디자인뿐 아니라 실제 버튼·링크·반응형까지 함께 수정할 수 있습니다.

목차로 돌아가기 ↑
CHAPTER 02RULE 01—05

색과 장식

효과가 먼저 보이면 제품은 뒤로 밀립니다. 장식마다 역할을 묻는 것부터 시작하세요.

01

과한 그라데이션

왜 AI 티가 나나
배경·버튼·카드마다 그라데이션을 넣으면 브랜드보다 생성형 템플릿의 인상이 먼저 납니다.
이렇게 바꾸기
주색 하나와 중립색으로 면을 나누고, 시선이 필요한 한 곳에만 미세한 색 변화를 사용하세요.
예외
빛, 깊이, 상태 변화를 실제로 설명할 때는 사용할 수 있습니다.
02

하얀색 단색 배경

왜 AI 티가 나나
전체 화면을 흰색으로 두고 카드만 나열하면 구조와 분위기가 사라져 어떤 서비스인지 기억하기 어렵습니다.
이렇게 바꾸기
섹션의 목적에 따라 따뜻한 중립색, 사진, 질감, 넓은 여백을 구분해서 사용하세요.
예외
편집 도구나 문서처럼 집중이 핵심인 제품은 흰 배경이 오히려 맞을 수 있습니다.
03

Lucide 아이콘 반복

왜 AI 티가 나나
모든 제목 위에 비슷한 선형 아이콘을 올리면 내용보다 템플릿 규칙이 더 강하게 보입니다.
이렇게 바꾸기
아이콘 없이 구체적인 제목을 쓰거나 실제 제품 이미지·상태 표시로 바꾸세요.
예외
내비게이션과 익숙한 동작처럼 아이콘이 인지를 빠르게 할 때만 유지하세요.
04

무분별한 그림자

왜 AI 티가 나나
카드와 버튼마다 다른 그림자를 쓰면 요소의 깊이와 우선순위를 이해할 수 없습니다.
이렇게 바꾸기
기본, 떠 있는 요소, 모달처럼 2~3단계의 그림자 규칙만 정하세요.
예외
실제로 다른 층에 떠 있는 요소를 구분할 때는 유효합니다.
05

이모지

왜 AI 티가 나나
문맥과 상관없는 로켓·불꽃·체크 이모지는 전문성과 고유한 말투를 약하게 만듭니다.
이렇게 바꾸기
명확한 문장, 숫자, 실제 제품 상태로 의미를 전달하세요.
예외
브랜드 말투가 가볍고 커뮤니티 중심이라면 제한적으로 사용할 수 있습니다.
목차로 돌아가기 ↑
CHAPTER 03RULE 06—16

구성과 반복

내용을 틀에 억지로 맞추지 말고, 정보량과 사용자의 결정 순서에 맞춰 화면을 구성하세요.

06

소개 카드 3개

왜 AI 티가 나나
장점이 몇 개인지와 상관없이 세 칸을 채우면 내용이 얇아지고 비슷한 문장만 반복됩니다.
이렇게 바꾸기
가장 중요한 한 가지를 크게 보여주고 나머지는 실제 중요도에 따라 2개나 4개로 구성하세요.
07

무지개색

왜 AI 티가 나나
기능별로 색을 계속 바꾸면 브랜드 색이 무엇인지 남지 않고 화면의 우선순위도 흐려집니다.
이렇게 바꾸기
주색, 중립색, 상태색의 역할을 먼저 정하고 상태색은 성공·경고·오류에만 사용하세요.
08

리퀴드 글라스 효과

왜 AI 티가 나나
투명 카드와 굴절 효과를 모든 곳에 쓰면 텍스트 대비가 낮아지고 콘텐츠보다 효과가 주인공이 됩니다.
이렇게 바꾸기
레이어 전환이나 매체의 성격을 설명하는 한두 장면에만 쓰고 본문은 안정적인 면으로 받치세요.
09

긴 대시

왜 AI 티가 나나
짧은 설명마다 긴 대시를 반복하면 AI가 만든 마케팅 문장처럼 일정한 리듬이 생깁니다.
이렇게 바꾸기
마침표, 콜론, 줄바꿈을 문장 관계에 맞게 사용하고 문장을 짧게 쓰세요.
10

뻔한 기본 폰트

왜 AI 티가 나나
Inter·Geist·Space Grotesk를 기본값 그대로 쓰면 다른 바이브코딩 결과물과 인상이 겹칩니다.
이렇게 바꾸기
한글 가독성이 검증된 본문체와 브랜드 성격에 맞는 제목체를 고르고 자간·행간·굵기를 조정하세요.
예외
폰트 자체가 나쁜 것은 아닙니다. 의도와 조정 없이 기본값으로 남는 것이 문제입니다.
11

작은 색깔 띠

왜 AI 티가 나나
모든 카드 위에 장식용 색 띠를 붙이면 정보의 의미 없이 생성형 템플릿 느낌만 남습니다.
이렇게 바꾸기
상태, 범주, 진행률처럼 실제 데이터를 나타낼 때만 색을 사용하세요.
12

가짜 리뷰

왜 AI 티가 나나
근거 없는 별점과 고객 수는 AI 티를 넘어 서비스 신뢰를 직접 깎습니다.
이렇게 바꾸기
실제 후기의 출처·이름 공개 범위·날짜를 표시하거나, 후기가 없다면 제품 시연과 검증 가능한 수치로 대체하세요.
13

도시락 그리드

왜 AI 티가 나나
정보의 크기를 먼저 정하지 않고 여러 크기의 상자를 맞추면 핵심 흐름이 잘립니다.
이렇게 바꾸기
사용자가 보는 순서대로 선형 흐름을 만든 뒤, 동시에 비교해야 하는 정보만 그리드로 묶으세요.
14

터미널 창 디자인

왜 AI 티가 나나
개발 도구가 아닌 서비스에 가짜 명령줄을 넣으면 기능을 설명하지 못하는 장식이 됩니다.
이렇게 바꾸기
사용자가 실제로 보는 입력 화면, 처리 과정, 결과 화면을 보여주세요.
예외
개발자 도구의 실제 명령과 출력이라면 가장 직접적인 제품 시연이 될 수 있습니다.
15

3단계 요금제

왜 AI 티가 나나
차이가 불명확한 Basic·Pro·Enterprise 세 칸은 결정을 돕기보다 공간만 차지합니다.
이렇게 바꾸기
실제 판매 방식에 맞춰 단일 플랜, 사용량 계산기, 비교표 중 가장 정확한 방식을 선택하세요.
16

체크 표시 목록

왜 AI 티가 나나
모든 문장을 체크 아이콘으로 나열하면 기능의 관계와 우선순위가 사라집니다.
이렇게 바꾸기
핵심 결과는 문장으로, 과정은 단계로, 세부 차이는 표로 표현하세요.
목차로 돌아가기 ↑
CHAPTER 04RULE 17—20

실제 제품과 신뢰

AI 티를 가장 빠르게 없애는 방법은 장식 추가가 아니라 실제 제품과 책임 정보를 보여주는 것입니다.

17

실제 제품 시연이 없음

왜 AI 티가 나나
큰 문구와 추상 이미지뿐이면 사용자는 제품이 실제로 무엇을 하는지 확인할 수 없습니다.
이렇게 바꾸기
첫 화면 또는 바로 다음 화면에 실제 스크린샷, 입력→결과, 짧은 사용 흐름을 배치하세요.
18

모든 곳의 둥근 모서리

왜 AI 티가 나나
섹션, 카드, 이미지, 버튼이 모두 같은 캡슐형이면 위계가 사라지고 지나치게 부드러운 템플릿처럼 보입니다.
이렇게 바꾸기
컨테이너·버튼·작은 태그의 반경을 구분하고, 필요 없는 박스는 아예 제거하세요.
19

이용약관이 없음

왜 AI 티가 나나
결제나 회원 기능이 있는데 약관이 열리지 않으면 완성된 서비스가 아니라 목업처럼 보입니다.
이렇게 바꾸기
푸터와 가입·결제 과정에서 실제로 열리는 약관 링크를 제공하고 적용일과 사업 정보를 명시하세요.
20

개인정보처리방침이 없음

왜 AI 티가 나나
폼, 분석도구, 계정 기능이 데이터를 다루는데 처리방침이 없으면 신뢰와 운영 준비가 모두 부족해 보입니다.
이렇게 바꾸기
실제 수집 항목, 목적, 보관 기간, 제3자 제공, 문의 방법을 서비스 운영 방식에 맞게 적으세요.
예외
AI가 만든 초안은 법률 검토를 대신하지 않습니다. 실제 데이터 흐름과 사업 정보를 사람이 확인해야 합니다.
목차로 돌아가기 ↑
FINAL REVIEW6 QUESTIONS

마지막 검수

예뻐졌는지가 아니라, 제품이 더 잘 이해되고 실제로 작동하는지 확인하세요.

  1. 첫 5초 안에 무엇을 위한 제품인지 알 수 있는가?
  2. 실제 제품 화면 또는 입력에서 결과까지의 흐름이 보이는가?
  3. 후기와 수치에 확인 가능한 근거가 있는가?
  4. 모바일 화면에서 글, 버튼, 표가 잘리거나 겹치지 않는가?
  5. 모든 링크과 내비게이션, 폼이 실제로 작동하는가?
  6. 이용약관과 개인정보처리방침이 실제 서비스 운영 방식과 맞는가?
좋은 디자인의 기준

AI 티를 숨기는 것이 목표가 아닙니다. 사용자가 제품을 더 빨리 이해하고, 믿고, 실제 행동까지 이어지게 만드는 것이 목표입니다.

목차로 돌아가기 ↑