AI로 웹사이트를 만들었는데 글자가 작고 여백이 들쭉날쭉하거나, 번쩍이는 장식이 너무 많을 때가 있습니다. unslop은 이런 화면을 살펴보고 다듬는 클로드 코드·코덱스용 스킬입니다. “깔끔하게 해 주세요”라는 말에서 더 구체적인 수정으로 넘어갈 때 써 볼 만합니다.

제작자 Damir Sokolovsky가 10월 30일 X에 공개한 글은 11월 10일 확인 당시 조회 약 64만 회, 북마크 약 9,800개를 기록했습니다. 위 이미지는 그가 공개한 비교 영상의 장면들입니다. 원본 이미지와 이용 조건도 저장소에서 확인할 수 있습니다.

어떤 결과를 기대하면 될까요?

위 예제에서는 보라색 빛과 이모지가 줄고, 메뉴 간격과 글자 크기가 정리됩니다. 제목과 수치를 읽기 쉽게 바꾸고, 카드와 그래프에 시선이 가도록 다듬은 모습입니다. 이처럼 이미 만든 페이지에서 고칠 부분을 찾는 용도로 생각하면 쉽습니다.

이 블로그에 적용할 때도 요청문이 잘 안 읽히는 부분과 이미지 비율을 먼저 살폈습니다. 요청문 안에서 겹치던 배경색을 없애고 글자색을 맞췄으며, 이미지는 가로폭에 맞춰 높이가 함께 줄어들게 고쳤습니다. 작은 문제를 짚어 요청하면 바뀐 결과를 확인하기도 편합니다.

먼저 스킬을 설치합니다

클로드 코드나 코덱스에서 수정할 웹 프로젝트를 열어 둔 상태로 시작하세요. 스킬은 AI가 반복해서 참고할 작업 지침입니다. 설치한 뒤 이름을 불러 사용할 수 있습니다. OpenAI Docs와 클로드 공식 문서에 스킬의 기본 사용법이 나와 있습니다.

코덱스에서는 아래 문장을 대화창에 넣습니다. 제작자 저장소에서 안내하는 설치 방법입니다.

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

클로드 코드에서는 이렇게 요청할 수 있습니다. 이 프로젝트에만 설치하는 예입니다.

https://github.com/heydamir/unslop 저장소의 skills/unslop 폴더를
이 프로젝트의 .claude/skills/unslop에 설치해 주세요.

이 요청문으로 한 페이지부터 고쳐 보세요

설치가 끝나면 코덱스에서 아래 요청을 넣어 보세요. ‘이 페이지’ 대신 고칠 파일이나 로컬 페이지 주소를 적으면 됩니다.

$unslop 이 페이지의 글자 크기와 여백을 읽기 쉽게 정리해 주세요.
기존 내용과 기능은 유지하고, 이미지 생성은 하지 마세요.
고칠 부분을 먼저 짧게 알려 주고 수정해 주세요.

클로드 코드에서는 맨 앞의 $unslop을 /unslop으로 바꾸면 됩니다. 화면을 확인한 뒤에는 “본문 글자는 지금 크기를 유지하고, 제목 아래 간격만 조금 줄여 주세요”처럼 한 부분씩 조정하세요. 한 번에 사이트 전체를 바꾸기보다, 자주 보는 한 페이지에서 결과를 확인하며 쓰기 좋습니다.

설치·호출 방법은 2026년 11월 10일 제작자 저장소와 공식 문서를 기준으로 확인했습니다. 이 글에서 소개한 것은 heydamir/unslop입니다. 스킬과 인용 이미지는 Damir Sokolovsky의 저작물이며 CC BY 4.0으로 공개되어 있습니다.