01
과한 그라데이션
- 왜 AI 티가 나나
- 배경·버튼·카드마다 그라데이션을 넣으면 브랜드보다 생성형 템플릿의 인상이 먼저 납니다.
- 이렇게 바꾸기
- 주색 하나와 중립색으로 면을 나누고, 시선이 필요한 한 곳에만 미세한 색 변화를 사용하세요.
- 예외
- 빛, 깊이, 상태 변화를 실제로 설명할 때는 사용할 수 있습니다.
GPT·Claude에 그대로 붙여넣는 리디자인 프롬프트와
흔한 웹디자인 패턴 20가지를 고치는 기준을 정리했습니다.
현재 화면을 통째로 갈아엎지 않고, 실제로 발견된 문제만 고치는 방식입니다.
현재 웹사이트의 기능과 콘텐츠는 유지하면서 AI가 만든 듯한 흔한 디자인 문법만 줄여줘. 과한 그라데이션, 반복 아이콘, 3개 소개 카드, 벤토 그리드, 장식용 터미널, 과도한 둥근 모서리·그림자, 가짜 리뷰, 실제 제품 시연 부재를 먼저 점검해. 발견된 항목만 수정하고, 수정 전 진단과 수정 후 달라진 점을 함께 알려줘. 실제로 확인되지 않은 정보는 새로 만들지 마.
코드 수정 전에 진단하고, 발견된 문제만 고치도록 만든 완성본입니다.
내가 제공하는 웹사이트 코드 또는 화면을 검토하고, "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을 지원한다. - 이용약관과 개인정보처리방침은 실제 경로와 링크를 만들되, 사업 정보와 데이터 처리 방식이 필요한 부분은 임의로 지어내지 말고 입력이 필요한 항목으로 표시한다. [완료 보고] - 발견한 항목 - 수정한 파일과 핵심 변경점 - 유지한 기존 기능 - 아직 실제 정보 입력이나 사람의 확인이 필요한 부분 - 모바일·접근성·빌드 확인 결과 먼저 진단표를 보여준 뒤 수정 작업을 진행해줘.
팁 이미 만든 사이트라면 주소만 보내기보다 코드가 있는 작업 환경에서 사용하세요. 그래야 디자인뿐 아니라 실제 버튼·링크·반응형까지 함께 수정할 수 있습니다.
효과가 먼저 보이면 제품은 뒤로 밀립니다. 장식마다 역할을 묻는 것부터 시작하세요.
내용을 틀에 억지로 맞추지 말고, 정보량과 사용자의 결정 순서에 맞춰 화면을 구성하세요.
AI 티를 가장 빠르게 없애는 방법은 장식 추가가 아니라 실제 제품과 책임 정보를 보여주는 것입니다.
예뻐졌는지가 아니라, 제품이 더 잘 이해되고 실제로 작동하는지 확인하세요.
AI 티를 숨기는 것이 목표가 아닙니다. 사용자가 제품을 더 빨리 이해하고, 믿고, 실제 행동까지 이어지게 만드는 것이 목표입니다.