저는 AI 코딩 도구들을 사용하여 많은 사이드 프로젝트 (side projects)를 만듭니다. 주로 Claude Code를 사용합니다. 몇 달 전, 저는 계속 신경 쓰이는 무언가를 발견했습니다. 제가 출시한 모든 사이트가 똑같아 보였다는 점입니다. 똑같은 인디고 그라데이션 (indigo gradient), 똑같은 기본 폰트 (default font), 똑같은 부드러운 그림자가 적용된 둥근 카드들까지 말이죠.

그러다 다른 사람들의 프로젝트에서도 같은 현상을 발견하기 시작했습니다. 데모 데이 (Demo days), 출시 포스트, 소셜 미디어의 스크린샷들에서 인디고 그라데이션이 어디에나 있었습니다. 이쯤 되면 기본적으로 제복이나 다름없습니다.

이것은 사실 AI의 잘못이 아닙니다. 모델에게 디자인 방향성을 주지 않으면, 모델은 인터넷의 평균치를 선택합니다. 그리고 인터넷의 평균치는 인디고 그라데이션과 Inter 폰트가 적용된 Tailwind 스타터 템플릿 (Tailwind starter template)입니다. 모델은 자신이 훈련받은 대로 정확히 수행하고 있는 것입니다. 문제는 당신이 실제로 무엇을 원하는지 아무도 모델에게 말해주지 않았다는 점입니다.

그래서 저는 tastemaker를 만들었습니다. 이것은 Claude Code를 위한 스킬이며, Cursor, Windsurf, 그리고 Codex에서도 작동합니다. 아이디어는 간단합니다. AI가 UI 코드를 단 한 줄이라도 쓰기 전에 디자인 시스템 (design system)을 고정하는 것입니다.

더 진행하기 전에 솔직히 말씀드리자면, 이것은 제가 만들었습니다. 저는 1인 개발자입니다. 이 프로젝트는 MIT 라이선스 하에 무료이며 오픈 소스 (open source)입니다. 제가 여기에 게시하는 이유는 솔직한 피드백을 원하기 때문이지, 여러분께 무엇을 팔기 위해서가 아닙니다. 살 것은 아무것도 없습니다.

코드가 아닌 취향이 먼저

스킬 (skill)이란 AI가 작업을 시작하기 전에 읽는 지침(instructions)이 담긴 폴더일 뿐입니다. tastemaker는 모델이 진행하면서 외형을 즉흥적으로 결정하게 두는 대신, 시작 단계에서 실제 제약 조건 (constraints)을 가지고 디자인 결정을 내리도록 강제합니다.

이 스킬이 설치된 상태에서 UI 프로젝트를 시작하면, 코드가 존재하기 전에 다음과 같은 것들이 고정됩니다:

• 팔레트 (Palette). 각 무드(Mood)에 맞춰진 5개의 프리셋. 무작위 헥스 코드(Hex codes)가 아닙니다. 서로 조화를 이루도록 선택된 조합들입니다.
• 폰트 (Fonts). 엄선된 24개의 Google Font 페어링. 같은 페이지에 실제로 어울리는 디스플레이 폰트(Display font)와 본문용 폰트(Body font)의 조합입니다.
• 실제 에셋 (Real assets). 당신의 팔레트에 맞춰 색상이 재조정된 Illustrator급 일러스트레이션. 회색 플레이스홀더(Placeholder) 박스나 흔한 스톡 사진 느낌은 없습니다.
• 로고 (A logo). 구조화된 기하학적 마크와 전체 파비콘(Favicon) 세트가 포함되어 있어, 브라우저 탭 아이콘이 프레임워크 기본값으로 남지 않습니다.
• 모션 (Motion). GSAP와 ScrollTrigger가 기본적으로 연결되어 있어, 스크롤 애니메이션이 나중에 해야 할 숙제(TODO)가 아니라 시작점부터 갖춰져 있습니다.

핵심은 제 취향이 당신의 취향보다 낫다는 것이 아닙니다. 핵심은 어떤 취향이든, 기록되고 고정된다면 아예 취향이 없는 것보다 훨씬 낫다는 점입니다.

제가 실패했던 부분

이 부분은 제 이야기 중 가장 좋아하는 부분인데, 주로 창피하기 때문입니다.

저는 눈대중으로 5개의 팔레트 프리셋을 골랐습니다. 제 눈에는 좋아 보였고, 자신감도 있었습니다. 그러다 더 철저하게 하고 싶어서, 모든 배경 대비 텍스트 조합을 WCAG 대비비(Contrast ratios)에 따라 확인하는 작은 Python 스크립트를 작성했습니다.

첫 번째 실행 결과, 5개의 프리셋 중 2개가 실패했습니다.

제 눈은 팔레트가 괜찮다고 말했지만, 수학적 계산은 실제 사람들이 텍스트를 읽는 데 어려움을 겪을 것이라고 말했습니다. 수학이 옳았습니다. 저는 다시 돌아가 실패한 색상들을 조정했고, 모든 항목이 통과할 때까지 검사를 반복했습니다. 오늘 배포되는 5개의 프리셋은 모두 이 대비 검사를 통과합니다.

이 짧은 이야기가 이 프로젝트를 관통하는 논거입니다. 취향은 기록하고 테스트하기 전까지는 주관적으로 느껴집니다. 일단 기록되면, 확인하고, 수정하고, 재사용할 수 있습니다. 제 눈은 40%의 확률로 틀렸지만, 짧은 Python 스크립트는 매번 옳았습니다.

설치 (Install)

명령어 한 줄을 입력한 뒤, Claude Code를 재시작하세요:

git clone https://github.com/codeswithroh/tastemaker ~/.claude/skills/tastemaker

이것이 설정의 전부입니다. API 키도, 설정 파일(Config file)도, 계정도 필요 없습니다. 재시작한 뒤 UI 프로젝트를 시작하면, AI가 추측을 시작하기 전에 디자인 시스템이 고정됩니다.

사이트의 더 자세한 내용:

tastemaker-skill.online

소스 코드 (Source code):

일반적인 AI 슬롭 (AI-slop) 기본값 대신, 실제 참조 이미지와 개발자별로 유지되는 개인화된 취향 프로필을 기반으로 AI가 생성한 UI의 근거를 마련해 주는 Claude Code 스킬입니다.

Tastemaker

AI가 생성한 것처럼 보이지 않는 UI를 구축하기 위한 Claude Code / Cursor / Windsurf 스킬입니다.

▶ 라이브 사이트 및 데모 보기 · 만약 이 도구가 당신을 또 하나의 인디고 그라데이션(indigo gradient)으로부터 구해준다면, ⭐ 이 저장소에 Star를 눌러주세요 — 그 Star 하나가 이 프로젝트가 바라는 유일한 감사이며, 다른 빌더들이 이 프로젝트를 찾는 데 큰 도움이 됩니다.

빠른 시작 (Quick start)

git clone https://github.com/codeswithroh/tastemaker ~/.claude/skills/tastemaker

Claude Code를 재시작한 뒤, 어떤 UI든 만들어 달라고 요청하기만 하면 됩니다 — "커피 구독 서비스를 위한 랜딩 페이지를 만들어줘" — 그러면 tastemaker가 자동으로 트리거됩니다. 설정도, API 키도, 별도의 호출도 필요 없습니다. (Cursor나 Windsurf를 사용 중이라면, 대신 해당 스킬 디렉토리에 폴더를 넣으세요.)

LLM에게 UI를 만들어 달라고 요청하면 매번 똑같은 몇 가지 기본값들을 받게 됩니다: 인디고에서 퍼플로 이어지는 그라데이션, 똑같이 부드러운 그림자가 들어간 라운드 카드, 그리고 전형적인 히어로 섹션(hero section). 이것은 프롬프팅 (prompting)의 문제가 아닙니다. 모델이 시각적인 요소를 스스로 발명해야 할 때 발생하는 현상입니다...

GitHub에서 보기

내가 배운 것들

나를 얼마나 놀라게 했는지에 따라 순서대로 몇 가지를 정리했습니다.

첫째, 제약 조건 (constraints)은 AI의 결과물을 나쁘게 만드는 것이 아니라 더 좋게 만듭니다. 저는 팔레트와 폰트를 고정하는 것이 제한적이라고 느낄 것이라 예상했습니다. 하지만 결과는 정반대였습니다. 모델은 디자인 결정 장애에 에너지를 쓰는 것을 멈추고, 실제 제품에 집중했습니다. 결과물은 덜 흥미로워지는 것이 아니라 오히려 더 흥미로워졌습니다.

둘째, 기본 디자인(default look)은 하나의 선택입니다. 디자인에 대한 논의를 건너뛸 때마다, 당신은 학습 데이터(training data)의 평균치를 선택하고 있는 것입니다. 그것 또한 여전히 디자인 결정입니다. 단지 실수로 내린 지루한 결정일 뿐입니다.

셋째, 스크립트(scripts)가 눈썰미(eyeballs)를 이깁니다. 저는 제 취향을 믿습니다. 하지만 제 취향은 기본적인 가독성(readability) 체크에서 5번 중 2번이나 실패했습니다. 이제 저는 체크를 먼저 수행하고 색상을 나중에 선택합니다. 저는 이 순서가 사람들이 생각하는 것보다 더 중요하다는 것을 깨달았습니다.

넷째, 디자인 부채(design debt)는 첫 번째 줄부터 시작됩니다. 우리 대부분은 디자인을 프로젝트 마지막 단계에서 수행하는 정리 작업(cleanup pass)으로 취급합니다. 하지만 AI 도구를 사용할 때는 생성할 기능이 항상 하나씩 더 남아있기 때문에, 끝이 결코 오지 않습니다. 먼저 결정하는 것이 나중에 수정하는 것보다 비용이 적게 듭니다.

만약 tastemaker를 사용해 보신다면, 무엇이 잘못되었는지 알려주세요. 이곳의 댓글이나 GitHub의 이슈(issue)를 통한 피드백은 진심으로 환영합니다. 그리고 만약 이 도구가 당신의 시간을 몇 시간이라도 아껴주었다면, 리포지토리(repo)에 스타(star)를 눌러주세요. 다른 사람들이 이 도구를 찾는 데 큰 도움이 됩니다.