Claude Code로 'AI 티' 안 나는 고퀄리티 UI를 만들려면 어떻게 해야 할까요?

이거 물어봐 줘서 고마워!

전적으로 동의함.

Impeccable를 포함한 이런 모든 스킬들의 문제는, 결국 AI가 만든 것처럼 보이는 디자인을 내놓는다는 거야. "AI Slop"이라고 부르는 건 피할지 몰라도, UI를 보면 딱 AI가 만든 티가 나거든. 그게 꼭 나쁜 건 아니지만, AI 특유의 징후들이 다 드러나지. 내가 추천하는 건, 네가 좋아하는 웹사이트들을 찾아서 Claude한테 그걸 참고하게 한 다음, Impeccable 같은 스킬로 가이드하면서 너만의 결과물을 만들어내는 거야. 계속하다 보면 만족할 만한 수준까지는 나올 거야.

전 UI를 대충 스케치한 다음 Claude를 써서 실제 웹사이트로 만듭니다. 디자인 결정을 내리게 하는 용도가 아니라, HTML+CSS로 변환하는 용도로만 쓸 때 유용하더라고요. 아니면 이미 잘 만들어진 웹사이트를 주고 그걸 내 사이트용으로 변환해달라고 해보세요. 잘 될지는 모르겠지만요.

이게 정답임. Claude는 이미지를 HTML 인터페이스로 바꾸는 데 정말 탁월함. FileMaker 솔루션을 웹 앱으로 재구축할 때 스크린샷 찍어서 Claude한테 넘겨주는 방식으로 아주 성공적인 결과를 얻었음.

Impeccable 스킬을 사용하세요. 먼저 목업을 생성하라고 지시하세요. 디자인을 직접 바꾸라고 하지 말고요. UI를 평면적으로 만들지 말고, 적절할 때 애니메이션을 쓰라고 하세요.

여러 번 반복 작업이 필요할 테니, 원하는 결과물을 얻으려면 본인만의 개인화된 프롬프트가 필요할 겁니다. 가끔은 한두 번 만에 제대로 나올 때도 있어요.

디자인 방향성 문제를 도구만 잔뜩 쌓아 올려서 해결하려고 하네. 그거 안 먹힘.

AI는 마법이 아님. 그냥 '모던하고 프리미엄하고 럭셔리하게 만들어줘'라고 하면 그게 대체 뭔 뜻인데? 에디토리얼 럭셔리? 패션? 건축? 호스피탈리티? 미니멀리즘? 레퍼런스는 뭔데? 타이포그래피, 구성, 페이징, 모션, 시각적 계층 구조, 인터랙션은 어떤 걸 원하는데?

본인 스스로 기준이 없고 모델한테 뭘 원하는지 제대로 지시를 못 하면, Claude는 그냥 자기가 아는 가장 흔한 패턴으로 빈틈을 채워버림. 그게 바로 그 흔해 빠진 'AI가 만든 UI' 꼴이 나는 이유임.

이런 도구들은 디자인 방향성을 실행하는 데는 엄청나게 유용함. 하지만 애초에 정의하지도 않은 디자인 방향성을 도구랑 스킬만 쌓는다고 마법처럼 만들어주진 않음.