Inter 금지, 보라 그라데이션 금지 — frontend-design 스킬이 가르쳐 준 것

프롤로그 — 매일 여는 도구가 "적당히" 깔끔했다

나는 로컬 AI 서버에 개인 홈 포털을 하나 띄워두고 산다. GPU 상태를 확인하고, 로컬 LLM 챗봇을 열고, 지식 금고 검색으로 들어가는 진입점이다. 매일 몇 번씩 연다.

그런데 어느 순간 이 포털을 열 때마다 묘한 기분이 들었다. 뭔가 나쁘지 않은데, 아무 느낌도 없다. 검정 배경, 시스템 기본 폰트, 비슷비슷한 둥근 카드가 대칭 그리드로 깔려 있는 화면. "SaaS 관리자 페이지 템플릿 한 장"이라고 해도 믿을 만한 모습. 기능은 다 되는데, 누구의 도구라는 느낌이 없었다.

이 느낌에 이름이 붙은 걸 최근에 알았다. "AI slop" — AI가 대충 만든 것 같은, 어디서 본 것 같은, 개성 없는 UI. 그 이름을 명시적으로 적어놓고, 그걸 만들지 말라고 강제하는 스킬이 있었다. 그래서 설치해봤다.

frontend-design 스킬 — "무엇을 만들라" 대신 "무엇을 만들지 말라"

Anthropic이 공식 플러그인 마켓에 올려둔 frontend-design 스킬이다. 설치는 한 줄. 그다음 트리거는 아주 단순하다.

• "웹 페이지 / 컴포넌트 / 대시보드 만들어줘"
• "이 HTML 다듬어줘 / 예쁘게 해줘 / 스타일 입혀줘"
• "artifacts 하나 만들어줘"

이런 요청이 들어오면 자동으로 발동된다. 굳이 "스킬 써서"라고 명시하지 않아도, UI 관련 동사(build, style, beautify)와 프론트 명사(page, component, dashboard)가 붙으면 켜진다.

특이한 점은 이 스킬이 무엇을 하라가 아니라 무엇을 하지 말라를 중심으로 쓰여 있다는 거다. 스킬 정의의 핵심은 이렇게 생겼다.

NEVER use generic AI-generated aesthetics:
- 과용된 폰트 (Inter, Roboto, Arial, system fonts)
- 클리셰 컬러 스킴 (특히 흰 배경 위 보라 그라데이션)
- 예측 가능한 레이아웃과 컴포넌트 패턴

NEVER converge on common choices
(예: Space Grotesk) across generations.

항상 하나의 미학에 bold하게 commit할 것.
brutalist, editorial, maximalist, art deco, pastel...
어느 방향이든 상관없지만 "적당히 깔끔"은 금지.

이 규칙들을 처음 읽었을 때 무릎을 쳤다. 저 금지 목록이 정확히 내 포털 화면이었기 때문이다. 시스템 폰트, 보라 계열 아이콘 배경, 3열 대칭 카드 그리드. 한 줄도 빠짐없이 해당되었다.

BEFORE — "적당히 깔끔한" 내 포털

리디자인 전. 시스템 폰트, 둥근 다크 카드, 대칭 3열 그리드. "어디서 본 것 같은" 전형.

위 화면은 내 개인 홈 포털이다. 기능 측면에서는 완벽하다. 서비스 링크가 다 있고, 포트 번호도 보이고, 상태 점도 깜빡인다. 그런데 이 화면은 내 것이 아니다. 이런 화면은 전 세계에 수만 개 있다.

"brutalist operator's console" 한 가지 방향만 고른다

스킬을 발동시키면서 나는 "brutalist operator's console" 한 방향으로 밀어달라고 주문했다. 공장 제어판, 군사 텔레메트리, 오래된 유닉스 터미널 — 그런 계열. 적당히 예쁘지 않고, 쓰는 사람만을 위한 도구처럼 생긴 것.

스킬이 뽑은 디자인 결정들은 다음과 같았다.

• 타이포그래피: 단일 서체 원칙. JetBrains Mono를 메인으로, 디스플레이 타이틀만 Major Mono Display. 한글은 Nanum Gothic Coding으로 monospace 정체성 유지. Inter·Roboto 계열은 금지 목록이라 아예 후보에 오르지 않음.
• 색: 거의 순흑(#000) 바탕, 오프 화이트(#f4f0e8) 글씨. 액센트는 딱 하나 — 형광 라임(#b8ff00). 경고/오류용으로 주황과 빨강을 아주 드물게. 스킬 표현대로 "dominant colors with sharp accents".
• 레이아웃: 12컬럼 비대칭 그리드. 카드가 각각 3, 4, 6 컬럼을 차지하도록 섞어서 row마다 다른 리듬. 대칭 auto-fill 그리드는 명시적으로 금지당하는 패턴.
• 장식: 카드 좌상·우하에 작은 꺾쇠 틱 마크. 섹션 헤더에 [01] 번호 태그. 푸터에 "OPERATIONAL" 시그널 블록. 이모지는 전부 삭제하고 기하 문자(◆ ▦ ◇ ▤ ▶|)로 교체.
• 모션: 거의 안 씀. 단, 타이틀 옆 형광 블록 하나가 터미널 커서처럼 1.1초 주기로 깜빡인다. 이게 이 화면의 시그니처 모먼트.

AFTER — 같은 기능, 다른 정체성

리디자인 후. 기능은 100% 같고 시각 언어만 교체했다.

재밌는 건, 이 두 화면이 기능 측면에서는 완벽히 동일하다는 점이다. 호출하는 API도, 클릭할 수 있는 링크도, SSE 스트리밍 로그도 전부 그대로다. 고친 건 CSS 한 덩어리와 마크업 구조 약간뿐이다. 백엔드 테스트는 손대지 않았고 전부 초록색으로 통과했다.

디자인이 감정에 미친 뜻밖의 효과

리디자인을 마치고 포털을 새로고침한 순간 웃음이 났다. 기대했던 것과 달랐던 건 "더 예뻐졌다"는 감상이 아니었다. 대신 이런 생각이 스쳤다.

"이건 내 도구다."

같은 버튼, 같은 카드, 같은 포트 번호인데 "이제 내 집 서버를 운용하는 콘솔"이라는 느낌이 들었다. "SaaS 관리자 템플릿"이 아니라. 매일 여러 번 여는 도구가 이런 정체성을 가지고 있느냐 없느냐는, 하루 단위로는 티가 안 나지만 누적되면 꽤 크다는 걸 이제야 알았다. 설계자가 자기 도구에 감정을 덜 소모하게 된다.

적용하면서 배운 세 가지

1. 기능 요구사항은 별도로 말해줘야 한다. 스킬은 "미학 강제"라서, 기존 페이지의 JavaScript ID·엔드포인트·이벤트 핸들러를 보존하라고 명시적으로 말하지 않으면 자유롭게 재구성한다. 나는 "ID·data 속성·onclick·스크립트 블록 전체를 보존해달라"고 먼저 박아두었다. 그래서 실서비스를 깨지 않고 CSS만 완전 교체할 수 있었다.

2. 디자인 방향은 내가 먼저 결정한다. "brutalist operator's console"이라는 구체적 방향을 내가 주지 않았다면, 스킬은 그냥 "그럼 editorial로 갈까요 brutalist로 갈까요" 하고 물어봤을 것이다. 스킬은 10가지 넘는 미학 카테고리(brutalist, editorial, maximalist, pastel, art deco, industrial...)를 후보로 보여주지만, 어느 한 방향을 bold하게 고르는 건 나의 몫이다. 이 책임이 사실 가장 중요하다.

3. CSS variable로 뽑아두면 다음 프로젝트에 전파된다. 리디자인 결과의 색·폰트·간격·테두리 규약을 전부 :root의 CSS variable로 넣었다. 이제 이걸 별도 파일로 추출하면 다른 내 로컬 서비스들(문서 뷰어, 소설 작성 UI, 챗봇 프런트)에도 같은 미학을 이식할 수 있다. 한 방향을 정하는 비용을 한 번만 치르고, 결과물을 여러 곳에 배급할 수 있게 된다.

ROI가 가장 큰 곳 — "반복 자동 산출물"

스킬을 돌려보니 적용 비용(약 30~60분)은 작지 않다. 그래서 어디에 쓰면 가장 이득인지 계산해보면 이렇게 나온다.

1. 자동으로 계속 만들어지는 산출물. 블로그 썸네일, 포토북 렌더링, 월간 리포트 표지 같은 것. 한 번 템플릿을 디자인 스킬로 뽑아두면 이후 만들어지는 모든 결과물이 동일한 미학을 입고 나온다. 사람이 매번 개입할 필요 없음.
2. 매일 여는 포털·대시보드. 적재되는 감정 노출이 커서 체감 효과가 크다. 이번 포스트가 그 경우다.
3. 가족에게 보여주는 산출물. 개인 포토북, 영상 리뷰 페이지 같은 것. 관객이 있기 때문에 "정체성"의 가치가 명확히 올라간다.

반대로 한 번만 쓰고 버리는 admin 페이지나, 사용자가 나 혼자이고 하루 한 번도 안 열리는 내부 도구에는 들일 가치가 애매하다. 미학은 반복 노출에서 가치가 증폭되는 종류의 자산이다.

마무리 — "나의 도구는 나를 닮아야 한다"

AI가 UI를 만들어주는 시대에 들어섰다. 생산성은 확실히 올라간다. 대신 기본값으로 맡기면 전 세계 모두의 화면이 같은 얼굴을 하게 된다. Inter 폰트, 둥근 카드, 보라 그라데이션, 대칭 그리드. 편리한데 냄새가 없다.

frontend-design 스킬이 해준 일은 결국 이것이다 — "기본값으로 돌아가지 말라"는 규칙 한 장을 LLM에 붙여주는 것. 그리고 그 규칙 한 장 덕분에 내 홈 포털이 얼굴을 얻었다. 이 느낌을 알고 나니, 내가 운용하는 다른 UI들도 차례로 전부 한 번씩 통과시키고 싶어졌다. 한 30분씩만 들이면 되는데, 결과물은 "내 흔적"을 남긴다.

기본값으로 맡기지 않는 작은 반항. AI 시대의 디자인 책임은 아마 이 지점에 있는 것 같다.

---

이 글은 생성형 AI의 도움을 받아 작성되었습니다. 원본 자료를 기반으로 AI가 초안을 생성하고, 작성자가 검토·편집하였습니다.