Unslop

자료 확인: 2026년 11월 6일. 발표 측 주장과 제3자 경험을 구분하며 AIDreamHub의 실측이 아닙니다.

새 사이트 생성기가 아닌 디자인 검토 절차

Damir Sokolovsky의 Unslop은 코딩 에이전트를 통해 기존 프런트엔드를 수정하는 스킬입니다. 다른 호스팅 플랫폼으로 옮기는 방식이 아닙니다. 보라색 그라데이션을 없애는 것보다 정보의 우선순위를 설명하고, 동작을 유지하며, 제품에 맞는 시각적 결정을 내리는지가 중요합니다.

이미 작동하는 대시보드나 앱 화면, 랜딩 페이지가 있고 코드 변경도 검토할 수 있는 개발자에게 적합합니다. 사용자 조사, 디자인 시스템, 접근성 검사와 회귀 테스트를 대신하지는 않습니다. 기존 브랜드 규칙은 유행에 밀려 사라질 것이 아니라 수정의 제약 조건이 되어야 합니다.

AIDreamHub가 캡처한 공식 페이지로, 로컬 제품 실행 화면이 아닙니다.

진단과 편집을 나누는 이유

공식 절차는 문제와 위치를 찾고 제품에서 방향을 도출한 다음, 간격·색·아이콘·문구·서체·배치·세부 요소·이미지·동작 순으로 수정합니다. 문구 길이가 줄바꿈을 바꾸고 간격 수정이 장식을 불필요하게 만들 수 있어, 순서를 지키면 원인을 추적하기 쉽습니다.

README에는 10초 미만의 정사각형 변경 영상도 있습니다. 공개 사이트 캡처와 영상에는 Playwright와 Chromium, 영상에는 FFmpeg도 필요합니다. 이미지 생성은 선택 사항이며 별도 비용이 발생할 수 있습니다. 변경 영상은 화면이 달라졌음을 보여 줄 뿐 전환율이나 과제 성공률을 증명하지 않습니다.

독립 사용기에서 확인한 것과 한계

일본 창작자 まさお는 2026년 11월 2일 일반 Claude 수정과 Unslop 수정을 비교했습니다. 랜딩 페이지보다 대시보드에서 색 배치와 문구 차이가 뚜렷했다고 했고, 정적인 숫자가 바뀐 사례도 보고했습니다. 한 사용자의 사례이지 통제된 벤치마크나 당사의 재현 시험이 아닙니다.

실무적으로는 가격, 지표, 고객 이름과 사업상 주장을 변경 금지로 지정해야 합니다. 인사말을 기간 제목으로 바꾸는 것은 도움이 될 수 있지만 매출 수치를 바꾸면 데이터가 훼손됩니다. 시각 품질과 사실 보존을 별도로 승인해야 합니다.

사용 방법: 되돌릴 수 있는 한 화면부터

저장소 파일을 검토한 뒤 사용하는 에이전트의 프로젝트별 스킬 폴더에 복사합니다. 아래 예는 공식 Claude Code 폴더 구조를 따릅니다. 먼저 브랜치 등 복구 가능한 작업본을 준비하세요. 문서 기반 안내이며 이 글에서 실제 스킬을 실행했다는 뜻은 아닙니다.

경로, 대상 사용자, 핵심 작업, 유지할 디자인 토큰과 고정 값을 지정하고 진단 및 방향을 승인한 후 편집합니다. 마지막에는 스크린샷과 코드 차이를 함께 확인합니다. 캡처와 영상 의존성은 해당 기능을 사용할 때만 추가하면 됩니다.

git clone https://github.com/heydamir/unslop.git
mkdir -p .claude/skills
cp -r unslop/skills/unslop .claude/skills/

# Claude Code
/unslop this dashboard

대시보드에 적용할 승인 기준

구독 관리 화면을 예로 들면 요금, 합계, 청구 조건과 버튼 목적지를 고정하고 같은 데이터와 화면 폭으로 전후를 비교합니다. 데스크톱과 모바일뿐 아니라 키보드 포커스, 오류, 빈 상태, 로딩과 되돌릴 수 없는 동작도 점검합니다. 제안하는 시험 절차이며 측정 결과가 아닙니다.

색을 줄여 비활성 상태가 안 보이거나 문구를 줄여 조건이 빠질 수 있습니다. 업무 의미나 동작을 훼손한 버전은 구도가 좋아 보여도 반려해야 합니다.

일반 프롬프트, 스킬, 디자이너의 차이

일반 코딩 에이전트도 눈에 띄는 상투적 장식을 제거할 수 있습니다. Unslop의 추가 가치는 명시적 진단, 합의한 방향과 반복 가능한 순서입니다. 항상 더 좋은 취향을 보장한다고 보기보다 놓치는 세부 사항이 줄었는지 평가해야 합니다. 포지셔닝이나 제품 간 일관성이 미정이라면 디자이너 주도가 적합합니다.

서비스로 제공한다면 한 화면, 기능 보존 목록, 반응형 캡처와 검토한 코드 차이로 범위를 정하세요. 정보가 많은 운영 화면과 홍보 페이지는 요구가 다르며, 이 제약을 다루는 것이 업종별 차별화가 됩니다.

라이선스와 운영 비용

라이선스는 MIT가 아닌 CC BY 4.0입니다. 사용·수정·공유 시 조건에 따라 Damir Sokolovsky(@heydamir)와 저장소 링크를 표시해야 합니다. 글꼴, 이미지와 외부 서비스에는 별도 조건이 있을 수 있습니다.

스킬 공개가 에이전트 호출, 이미지 생성과 작업 시간까지 무료라는 뜻은 아닙니다. 의존성을 검토하고 가짜 추천이나 실적을 넣지 마세요. 손그림은 편집 개념을 설명하며 Unslop이 생성한 결과가 아닙니다.

도입 전 질문

처음부터 사이트를 만들어 주나요?

공식 초점은 Claude Code나 Codex를 통한 기존 UI 진단과 개선입니다. 실행되는 경로나 허가된 참고 화면에서 시작하세요. 새 제품의 요구사항, 콘텐츠, 구현과 테스트는 한 번의 디자인 수정으로 자동 완성되지 않습니다.

숫자가 바뀔 수 있나요?

코딩 에이전트는 정적 데이터와 문구를 편집할 수 있고 독립 사용기도 숫자 변경을 보고했습니다. 고정 값을 명시하고 최종 차이를 확인하세요. 보기 좋은 캡처만으로 사업 정보가 보존됐다고 판단할 수 없습니다.

Playwright와 FFmpeg가 항상 필요한가요?

README에서는 캡처나 영상에 Playwright와 Chromium을, 영상에는 FFmpeg를 추가로 사용합니다. 선택적 절차이며 모든 로컬 스타일 수정에 영상 생성이 필요한 것은 아닙니다. 에이전트 환경과 비용은 별도입니다.

검토 자료

• Damir Sokolovsky — Unslop README / CC BY 4.0
• まさお — hands-on comparison, 2026-11-02
• Unslop — skill and references

관련 도구 찾기

• 디자인 도구
• 코딩 도구