원문 노션
Guide 29 · 설치 가이드

AI 티 나는 신호 64가지 한글 정리 + 고치는 법 — 무료 클로드 스킬 언슬롭(unslop) 설치 가이드

코드 블록 10 이미지 6 표 11 출처 노션 원문
디자이너에게 맡기면 화면 하나에 1,500달러 드는 'AI 티 지우기'를 클로드 코드로 직접 할 수 있는 무료 스킬 언슬롭(unslop)을 정리했어요. 공개 일주일 만에 깃허브 별 8,600개를 넘었어요(2026-11-05 기준 ★8,678).
이 페이지에 AI 티 나는 신호 64가지(10개 분야) 한글 정리 + 고치는 법, README 공식 설치 명령어, 바로 붙여 넣는 프롬프트를 모았어요.
heydamir/unslop 깃허브 저장소
heydamir/unslop 깃허브 저장소

한눈에 보기

항목내용
무엇바이브코딩으로 만든 'AI 티 나는' 화면을 디자인된 화면으로 고쳐 주는 클로드 코드·코덱스 스킬
비용무료 (CC BY 4.0 — 쓰고 고치고 상업적으로 써도 되고, 만든 사람과 저장소를 표기하면 돼요)
비교이 스킬을 만든 디자이너에게 직접 맡기면 화면 하나 $1,500, 3일
하는 일① 진단(AI 티 나는 곳을 위치와 함께 목록으로) → ② 방향 제안(먼저 묻고) → ③ 간격·색·아이콘·문구·글자·배치·세부·그림·움직임 순서로 수정 → ④ 10초 이하 정사각형 전/후 영상
쓰는 곳Next.js·React·Vue·Svelte·Tailwind·일반 HTML/CSS 화면, 대시보드·앱·랜딩 페이지, 링크만 있는 라이브 사이트
필요한 것클로드 코드(또는 코덱스). 영상·라이브 사이트는 Playwright와 ffmpeg
이 스킬을 만든 디자이너의 의뢰 요금표 — 화면 하나 $1,500
이 스킬을 만든 디자이너의 의뢰 요금표 — 화면 하나 $1,500

설치 — 전역 설치(모든 폴더에서 보이게)

클로드 코드 (터미널에서, README 공식 명령)

Bash
git clone https://github.com/heydamir/unslop
mkdir -p ~/.claude/skills && cp -r unslop/skills/unslop ~/.claude/skills/
실제 설치 화면 — 저장소 받기 → ~/.claude/skills 에 복사 → 폴더 확인
실제 설치 화면 — 저장소 받기 → ~/.claude/skills 에 복사 → 폴더 확인

코덱스(Codex)를 쓰면

Plain Text
$skill-installer install https://github.com/heydamir/unslop/tree/main/skills/unslop

전/후 영상이나 라이브 사이트까지 쓰려면 (스킬을 돌릴 프로젝트 폴더에서)

Bash
npm install -D playwright
npx playwright install chromium
스킬이 안 보이면 ① ~/.claude/skills/unslop/SKILL.md 파일이 있는지 확인 ② 클로드 코드를 완전히 껐다 켜기 ③ / 눌러서 unslop 찾기 ④ 클로드 앱 채팅이 아니라 클로드 코드용이에요.

써 보기 — 바이브코딩 대시보드에 /unslop

저장소의 examples/dashboard.html(보라 그라데이션·이모지 아이콘이 가득한 예제)이 있는 폴더에서 이렇게 입력했어요.

Plain Text
/unslop 이 대시보드 dashboard.html, 한국어로 짧게

약 4분 뒤에 진단 표(색·글자·아이콘·간격·문구·부품·숫자·움직임·배치) → 방향 제안(제품·성격·세계·강조색·눈에 띄는 부분·고유한 표시) → "이 방향으로 진행해도 될까요?" 순서로 나왔어요. 파일을 고치기 전에 먼저 물어봐요.

실제 실행 결과 — 진단 → 방향 제안 → 진행 확인 질문
실제 실행 결과 — 진단 → 방향 제안 → 진행 확인 질문

"그대로 진행해"라고 답하면 간격 → 색 → 아이콘 → 문구 → 글자 → 배치 → 세부 → 그림 → 움직임 순서로 화면을 고쳐요. 실제로 돌려 보니 아래처럼 바뀌었고, 9.2초짜리 정사각형 전/후 영상까지 만들어 줬어요(영상까지 약 13분).

실제 전(위)/후(아래) — 보라 그라데이션·이모지가 사라지고 회색 바탕에 주황 강조 하나
실제 전(위)/후(아래) — 보라 그라데이션·이모지가 사라지고 회색 바탕에 주황 강조 하나

바로 쓰는 프롬프트

Plain Text
/unslop 이 대시보드
Plain Text
/unslop src/app/page.tsx 랜딩 페이지 첫 화면만. 방향 먼저 보여 주고 내가 고르면 고쳐 줘
Plain Text
/unslop https://내사이트.com 의 첫 화면. 고친 화면을 HTML 파일로 만들어 줘
Plain Text
/unslop 내 랜딩 페이지 고치고, 올릴 수 있게 전/후 영상도 만들어 줘
Plain Text
/unslop 이 화면 진단만 해 줘. 아래 64가지 신호 중 어떤 게 있는지 표로. 아직 고치지는 마
Plain Text
/unslop 대시보드. 그대로 진행해(방향 확인 없이). 강조색은 우리 브랜드 #0F766E 로

AI 티 나는 신호 64가지 (10개 분야) + 고치는 법

언슬롭이 화면을 진단할 때 보는 목록(skills/unslop/references/signs.md)을 한글로 옮겼어요. 스킬 없이 내 화면을 점검할 때 체크리스트로 써도 좋아요.

signs.md 원문 — 분야별 신호 → 고치는 법
signs.md 원문 — 분야별 신호 → 고치는 법

1. 표면·색 (8개)

#AI 티 나는 신호이렇게 고쳐요
1보라→파랑, 바이올렛→분홍 그라데이션 배경·카드·버튼·선택된 메뉴중립 색 한 가지 표면, 강조색은 의미 있는 곳에만
2제목·숫자·로고에 그라데이션 글자단색 기본 글자색
3색 있는 빛 번짐(shadow-[0_0_20px_rgba(139,92,246,0.5)]), 이모지에 drop-shadow, 빛나는 알약 모양없앤다. 깊이감은 표면 단계와 얇은 선으로
4내용 뒤에 퍼지는 원형 색 번짐이나 흐릿한 얼룩없앤다
5네온색이나 대비가 센 색 테두리불투명도 6~10%의 얇은 선
6글자에 거의 같은 색조를 여러 개 씀(라벤더색 다섯 가지 등)중립 색 계열 하나에서 글자 역할 세 가지
7모든 요소를 강조해서 아무것도 눈에 안 띔강조색 하나를 한 화면에 한두 번만
8안쪽에 흰 하이라이트, 색 그림자가 있는 유리 카드얇은 선이 있는 평범한 한 단계 위 표면

2. 글자 (6개)

#AI 티 나는 신호이렇게 고쳐요
9굵기 800~900의 제목굵기 400~500, 위계는 크기로
10자간 넓은 대문자 라벨(NAVIGATION, PAID THIS MONTH 등)문장처럼 첫 글자만 대문자, 보통이거나 살짝 넓은 자간
11한 화면에 글자 크기·굵기가 너무 많음정해진 단계에서 크기 몇 개, 굵기는 400과 500
12숫자 형식이 제각각($48,210 옆에 $124,860.40, 또는 07)형식 하나, 폭이 같은 숫자
13작은 글자에 마이너스 자간0이나 살짝 플러스
14강조에 이탤릭 사용색이나 굵기로 대신

3. 아이콘 (5개)

#AI 티 나는 신호이렇게 고쳐요
15메뉴 아이콘·라벨 장식·상태 표시에 이모지( )선 아이콘 세트 하나, 아니면 없음
16알약·개수 표시 안의 이모지(18 등)숫자만
17아이콘 크기·색이 제각각크기 하나, 선 굵기 하나, 글자 역할 색
18아이콘이 줄에서 삐뚤게 밀려 있음모든 줄에서 아이콘 칸 폭을 같게
19AI 관련이면 무조건 반짝이 없애거나, 설명이 필요한 곳에만 평범한 아이콘

4. 간격 (5개)

#AI 티 나는 신호이렇게 고쳐요
20제멋대로인 값(mt-[13px], ml-[7px], h-[31px])4px 단위 단계로
21한 목록 안에서 줄 높이·간격이 다름높이 하나, 간격 하나
22묶음이 자기 항목보다 옆 묶음에 더 가까움묶음 안은 좁게, 묶음 사이는 넓게
23나란한 카드끼리 안쪽 여백이 다름여백 하나로
24섹션 위는 휑하고 아래는 빽빽함균형 잡힌 리듬

5. 문구 (7개)

#AI 티 나는 신호이렇게 고쳐요
25인사말 제목(Welcome back, Damir! 등)페이지 이름이나 기간을 제목으로
26느낌표와 !!담담한 문장
27비교 기준 없는 변화(+12%!!, 3 less!!)+12% vs last month, 3 fewer vs last month
28말 많은 입력창 안내(Search anything... 등)Search
29과장 단어(supercharge, seamless, unlock, magic, revolutionize 등)그게 실제로 하는 일
30라벨·버튼 끝의 마침표없앤다
31가짜 티 나는 데이터($123,456, [X])그럴듯한 숫자

6. 부품 (9개)

#AI 티 나는 신호이렇게 고쳐요
32개수·요금제·단축키·상태에 빛나는 알약조용한 고정폭 글자나 키캡 모양
33여기저기 PRO, New , Beta 배지없애거나 조용한 글자 배지 하나
34검색창부터 버튼·카드까지 전부 완전한 알약 모양크기에 맞춘 모서리 둥글기, 안쪽 요소는 둥글기를 계산해 맞춤
35무지개 막대·빛나는 막대·알약 모양 막대·대문자 요일 라벨 차트데이터 묶음 한두 개, 흐린 격자와 고정폭 라벨, 강조색 하나
36모든 차트·쌓인 막대가 강조색의 여러 농도라 주인공이 없음중립 색 단계, 강조색은 정말 중요한 하나에만
37모든 숫자 카드에 작은 선 그래프·눈금·미니 막대를 붙임숫자, 그 라벨, 변화량만
38똑같은 카드가 나란히, 모두 같은 차트나 배치주 차트 하나, 작은 숫자들, 폭은 다양하게
39반짝이가 든 그라데이션 타일 로고와 그라데이션 글자 로고제품 이름은 글자로, 단순하고 평평한 기호 하나
40번들거리는 구슬·그라데이션 공·빛나는 점 모양 로고 기호단색 하나의 평평한 기호, 아니면 글자 로고만

7. 랜딩 페이지·첫 화면 (9개)

#AI 티 나는 신호이렇게 고쳐요
41제목 위 알약 배지( Introducing X 2.0 등)없애거나, 진짜 소식이면 조용한 글자 링크
42어느 제품에나 붙일 수 있는 제목(Supercharge your workflow with AI 등)이 제품이 누구에게 무엇을 해 주는지 말한다
43제목에 그라데이션이나 반짝임 효과단색 글자
44첫 화면 뒤에 떠다니는 얼룩·구슬·격자·빛나는 선평범한 배경, 아니면 실제 제품 그림 하나
45제목·글·버튼·그 아래 그림까지 전부 가운데 정렬로 쌓음좌우가 다른 분할, 아니면 큰 제품 화면 위에 글자(배치 점검 참고)
46버튼 세 개 이상, 또는 버튼 밑에 칩·프로필 사진을 쌓음주 버튼 하나, 보조 버튼은 많아야 하나
47출처 없는 Trusted by 10,000+ teams, Loved by 10,000+, 프로필 점 줄, 별 다섯 개진짜인지 묻고, 조용하고 구체적으로 바꾸거나 없앤다
48패럴랙스, 스크롤하면 떠다니는 요소고정된 배치, 움직임은 목적 있을 때만
49이모지·굵은 제목·모호한 한 줄로 된 기능 카드기능은 적게, 문구는 구체적으로, 선 아이콘이나 아이콘 없음

8. 그림 (5개)

#AI 티 나는 신호이렇게 고쳐요
50첫 화면 그림이 번들거리는 3D 얼룩·구슬·액체 크롬 도형·보라 성운제품 그 자체, 아니면 하는 일을 보여 주는 구체적인 비유 하나
51AI 관련이면 뻔한 로봇·빛나는 뇌·회로선·홀로그램없애거나, AI가 실제로 만들어 내는 걸 보여 준다
52이미지 안에 박힌 글자·가짜 버튼·가짜 로고글자는 페이지에 진짜로, 이미지는 글자 없이 깔끔하게
53가장자리가 딱딱하고 검정색이 달라 페이지와 안 어울리는 이미지배경을 페이지에 맞추고 가장자리는 부드럽게 가림
54모든 섹션마다 그림도움이 되는 곳에 하나, 보통 첫 화면만

9. 움직임 (6개)

#AI 티 나는 신호이렇게 고쳐요
55실시간도 아닌 것에 animate-pulse, animate-ping, 숨 쉬듯 빛나는 효과멈춰 둔다
56카드·버튼에 transition-all, hover:scale마우스를 올리면 색이나 표면 단계만, 누르면 아주 살짝 작아짐
57단순한 화면에 통통 튀는 스프링·지나쳤다 돌아오는 움직임끝이 부드럽게 느려지는 곡선 하나
58처음 열 때 모든 게 사방에서 날아 들어옴짧게 나타나며 살짝 올라오기 하나, 작은 시차로
59패럴랙스, 계속 떠다니는 반복, 스크롤하면 움직이는 요소고정된 배치
60너비·높이·위·왼쪽 위치를 애니메이션transform과 opacity로

10. 템플릿 느낌 — 슬롭은 아니지만 정리 후 빠지기 쉬운 것 (4개)

#AI 티 나는 신호이렇게 고쳐요
61따뜻하거나 밝은 세계의 제품인데 순수 회색 #161616 페이지, Inter 글꼴, 흰 글자, 버튼 하나에만 옛 브랜드 색그 세계 쪽으로 물든 색 단계와 거기서 따온 강조색
62이름만 바꾸면 다른 제품에도 맞을 제목이 제품이 하는 일을 이 제품만의 단어로 말한다
63첫 화면 그림이 빈 상자나 뻔한 사진코드로 만든 제품 미리보기, 아니면 그 세계의 이미지
64모든 제품이 같은 배치·글꼴·색 조합방향(디렉션)이 고르게 한다

이렇게 쓰면 좋아요

  1. 진단만 먼저 받아 보세요. 64가지 중 내 화면에 몇 개가 있는지만 봐도 고칠 순서가 보여요.
  2. 방향 제안이 마음에 안 들면 "더 차분하게", "우리 로고 색을 강조색으로"처럼 방향 단계에서 고쳐 달라고 하세요. 나중에 바꾸면 처음부터 다시 해요.
  3. 화면 하나씩 하세요. 대시보드 → 설정 화면 → 랜딩 순으로 나누면 결과가 더 좋아요.
  4. 전/후 영상은 SNS에 그대로 올릴 수 있는 정사각형 10초 이하예요.
  5. 이미 잘 만든 화면이면 "슬롭이 없다"고 말하고 작은 개선 2~3개만 제안해요. 억지로 다 바꾸지 않아요.

자주 묻는 질문

링크

담PD가 노션에 공개한 자료를 이미지·글 그대로 옮겨 온 아카이브입니다. 최신 내용과 업데이트는 원문에서 확인하세요.

노션 원문에서 보기 →