AI가 만든 티 안 나게 만드는 법

이제는 AI가 만든 화면인지 3초 만에 알아볼 수 있습니다. 특징이 정해져 있기 때문입니다.

• 무난한 회색 배경
• Inter 폰트
• 보라색 그라디언트
• 있는 듯 없는 듯한 애니메이션

기술적으로 문제가 있는 것은 아닙니다. 다만 스톡 이미지처럼 보자마자 잊힙니다. 디자인에 대해 따로 말하지 않으면 Claude는 대체로 이 방향으로 만듭니다.

해법 1. 공식 스킬 하나 설치하기

Anthropic이 만든 frontend-design 스킬이 이 문제의 해법입니다. Claude가 컴포넌트를 만들기 전에 디자인 시스템과 철학을 먼저 참고하게 만드는 방식이라, 결과물이 과감한 색감과 개성 있는 타이포그래피, 의도가 담긴 색 조합, 목적이 있는 애니메이션 쪽으로 바뀝니다.

“스킬 없이 만들면 템플릿처럼 보이고, 있으면 누가 고른 티가 납니다.”

설치 방법 세 가지

스킬이 작동하지 않는다면 대부분 코드 실행 기능이 꺼져 있어서입니다. 여기부터 확인해보는 것이 좋습니다.

해법 2. 프롬프트에 금지어 넣기

스킬을 설치해도 Claude가 알아서 안 쓰고 지나갈 때가 있습니다. 그럴 땐 요청할 때 직접 이름을 불러주는 게 확실합니다. 다음 내용을 그대로 요청에 넣어보세요.

• frontend-design 스킬을 사용해서 디자인 완성도를 높여줘
• 보라색·남색 그라디언트, Inter 폰트, 무채색 회색 배경처럼 AI가 만든 티 나는 조합은 피해줘
• 폰트는 개성 있는 걸로 고르고, 이유도 한 줄로 설명해줘
• 애니메이션은 한 종류로 통일해줘. 요소마다 다르면 산만해져
• 여백을 넉넉히 써줘

이 중에서 스킬 이름을 직접 부르는 첫 번째 항목이 가장 중요합니다. 이름을 부르지 않으면 Claude가 스킬을 쓰지 않고 지나칠 수 있습니다.

해법 3. 마음에 드는 화면을 그대로 보여주기

디자인을 말로 설명하는 것보다 이게 훨씬 빠릅니다.

1. 1.드리블이나 어워드 사이트에서 마음에 드는 화면을 찾습니다.
2. 2.그 화면을 캡처하거나 이미지를 복사합니다.
3. 3.Claude에 붙여넣고 “이런 느낌의 페이지 만들어줘”라고 요청합니다.

수정할 때도 마찬가지입니다. 바꾸고 싶은 부분만 캡처해서 붙여넣고 “여기 이렇게 바꿔줘”라고 하면, “상단 네비게이션 바 오른쪽 세 번째 버튼이…”처럼 위치를 길게 설명할 필요가 없습니다.

움직임을 참고하고 싶을 때는 모션 레퍼런스를 모아둔 갤러리에서 마음에 드는 것을 찾아 프롬프트로 바꿔서 가져오는 방법도 있습니다.

완성 후 확인할 것

• 보라색이나 남색 그라디언트가 남아 있지 않은지
• 폰트가 Inter로 남아 있지 않은지
• 배경이 그냥 무채색 회색은 아닌지
• 요소마다 등장 애니메이션이 다르게 움직이지는 않는지
• 여백이 답답하게 좁지는 않은지

한 줄 요약

“도구가 80을 만들어주는 시대에는, 그 80의 방향을 정하고 나머지 20을 다듬는 안목이 결과물을 가릅니다. 스킬 하나 설치하고, 프롬프트에 금지어 한 줄 넣고, 마음에 드는 화면을 보여주는 것. 이 셋이면 충분합니다.”