Oil UI 디자인 스킬 | AI 웹디자인 AI 느낌 줄이는 법, 시안 3개 비교와 윈도우 설치

Oil UI는 어떤 도구인가

먼저 "스킬"이 무엇인지부터 짚을 필요가 있다. 스킬은 AI 에이전트가 특정 일을 할 때 꺼내 읽는 설명서 묶음이다. 핵심 파일은 SKILL.md라는 마크다운 문서이고, 필요하면 참고 문서와 작은 프로그램이 함께 들어간다. 사람이 매번 긴 프롬프트를 붙여 넣지 않아도, 에이전트가 "디자인 요청이 왔다"고 판단하면 스스로 이 설명서를 열어 그 순서대로 일한다. 앤트로픽이 스킬 형식을 공개한 뒤 클로드 코드, 코덱스, 커서 등 여러 에이전트가 같은 형식을 읽게 되면서, 스킬은 프롬프트를 파일로 나눠 주고받는 방법으로 자리 잡았다.

Oil UI 저장소를 열어 보면 그 구성이 그대로 보인다. 맨 위에 SKILL.md가 있고, references 폴더에는 디자인 방향 잡기, 시각 언어, 레이아웃과 화면 크기, 움직임, 스크롤 연출, 리뷰어 지침 등 12개의 세부 문서가 있다. scripts 폴더에는 시안 비교 페이지를 만드는 파이썬 프로그램, 화면을 캡처하는 노드 프로그램, 새 버전을 확인하는 프로그램이 들어 있다. 에이전트는 처음부터 전부 읽지 않고, 지금 하는 일에 필요한 문서만 골라 읽는다.

README가 설명하는 디자인 방식은 여덟 단계지만, 쉽게 줄이면 네 가지다.

• 그리기 전에 제품이 어떤 종류인지 정하고, 같은 분야에서 스타일이 가장 뚜렷한 서비스 두세 곳을 살펴본다.
• "고급스럽게", "깔끔하게" 같은 막연한 말을 글꼴, 여백, 화면에서 색이 차지하는 비율 같은 눈에 보이는 결정으로 바꾼다.
• 배치, 글꼴, 색, 대표 이미지 네 가지 중 두 시안이 겹쳐도 되는 것은 최대 하나라는 규칙으로 시안 세 개를 확실히 다르게 만든다.
• 사용자가 하나를 고르면 그 방향만 발전시키고, PC와 모바일 크기로 실제 화면을 캡처해 보며 필요 없는 선과 상자, 문구를 덜어 낸다.

눈에 띄는 규칙이 몇 개 더 있다. 쇼핑이나 업무처럼 사람이 뭔가를 하러 오는 화면은 첫 화면에 꾸밈보다 내용 자체를 둔다. 페이지 전체를 화려하게 만들지 않고, 결제 성공 순간이나 404 페이지처럼 한두 군데만 기억에 남게 만든다. 시안 비교 단계에서는 첫 화면들을 나란히 놓고 눈을 가늘게 떠서 밝고 어두운 덩어리 모양을 본다. 두 시안이 닮아 보이면 색만 바꾸지 말고 배치를 바꾸라고 적혀 있다.

지금 알아둘 것

오픈소스판은 무료이고 MIT 라이선스라 회사 프로젝트에 써도 된다. 다만 같은 작가가 파는 유료판 Oil UI Pro가 따로 있다. 가격은 9.99달러 일회성 구매에 평생 업데이트이고, 중국 사이트에서는 69위안으로 위챗페이, 알리페이, 카드 결제를 받는다. 무료판은 새 화면을 처음부터 보기 좋게 만드는 데까지를 맡고, Pro는 폼과 팝업 같은 사용성, 대시보드, 기존 프로젝트 개선, 특수 효과를 더한다. 두 개를 같이 설치하면 같은 요청을 두고 서로 경쟁하므로, Pro가 있다면 무료판은 필요 없다고 README가 안내한다.

스킬은 모델의 실력을 바꾸지 못한다. Pro 판매 페이지에도 "모든 모델이 좋은 디자인을 만들게 해 주지는 못한다, 결과의 상한은 모델 자체에 달려 있다"는 문구가 있다. 갤러리 86개 작품 중 76개가 GPT 6.1 Sol로 만든 것이고, 나머지는 GPT 6 Luna, GPT 6 Astra, 클로드 오퍼스 5.5, 소네트 5.5 등이다. 이미지를 볼 수 있는 모델이어야 캡처를 보고 다듬는 단계가 제대로 돌아간다는 점도 SKILL.md에 적혀 있다.

인터넷 연결 동작도 알아 둘 만하다. 스킬을 쓸 때마다 최대 10분에 한 번 ui.oiloil.org의 공개 버전 목록을 읽어 새 버전이 있는지 확인하고, 있으면 답변 끝에 알려 준다. 프로젝트 내용은 올리지 않고, 사용자가 업데이트를 명시적으로 요청하기 전에는 아무것도 내려받거나 바꾸지 않는다. 확인 결과는 윈도우에서 %LOCALAPPDATA%\oil\ 폴더에 저장되고, 환경 변수 OIL_NO_UPDATE_CHECK=1로 끌 수 있다.

핵심 포인트: Oil UI는 디자인을 대신 그려 주는 프로그램이 아니라, 에이전트가 디자인을 결정하는 순서와 기준을 바꿔 주는 설명서다.

Oil UI가 주목받은 이유

첫째, 문제 정의가 공감을 샀다. 에이전트에게 랜딩 페이지를 맡기면 매번 비슷한 보라색 템플릿이 나오고, 그 첫 시안을 붙잡고 한 시간씩 고치게 된다는 불만은 바이브 코딩을 해 본 사람이라면 대부분 겪는다. 일본어권 소개 글은 "AI가 만든 UI가 보라 그라데이션, 가운데 큰 제목, 둥근 카드라는 정형으로 흐르는 문제"를 짚었다고 요약했고, 영어권에서는 "대부분의 AI UI는 똑같아 보인다, oil-ui는 프롬프트가 아니라 디자인 방법으로 이를 고친다"는 평이 나왔다.

둘째, 결과물을 먼저 보여 줬다. 작가는 10월 3일 X에 "UI 디자인 능력이 별로라고 생각했던 모델도 Oil UI를 쓰면 의외의 작품을 만든다"며 모델별 결과를 모은 갤러리 사이트를 공개했고, 이 글은 좋아요 477개, 조회 약 6만 2천 회를 기록했다. 갤러리의 모든 작품에는 만든 모델과 프롬프트가 붙어 있어서, 방문자가 그대로 복사해 시험해 볼 수 있다. 영어 학습 앱, 음악 연말 결산, 하드웨어 사이트, 차량 호출 앱, 결제 흐름, 필름 카메라 페이지까지 종류가 다양하다.

셋째, 비교 페이지라는 장치가 실용적이다. 시안 여러 개를 한 화면에 나란히 띄우고, 데스크톱과 모바일 크기를 전환하고, 마음에 드는 시안의 선택 버튼을 누르면 에이전트에게 붙여 넣을 문장이 복사된다. 디자인을 말로 설명하기 어려운 사람도 "2번으로 가자, 제목만 더 작게" 정도로 의견을 줄 수 있다.

넷째, 빠른 개선이다. 10월 2일 v0.10.0부터 10월 11일 v0.22.1까지 열흘 사이 33번 릴리스가 나왔다. 작가는 10월 5일 "규격 문서를 계속 쪼개고 설명을 줄여, 필요한 내용만 에이전트에 들어가게 했다, 약한 모델도 스킬을 잘 이해할 수 있게 하려는 것"이라고 개선 방향을 밝혔다.

다섯째, 작가 개인의 영향력이다. oil-oil은 X 팔로워 약 9,300명, 깃허브 팔로워 약 1,400명을 둔 크리에이터로, 영상으로 AI 디자인 방법을 소개해 왔다. 9월 30일 공개 글에서 "전에 영상으로 다룬 AI의 창의성을 끌어내는 방법을 스킬로 정리했다"고 밝혔다. 같은 작가의 스크롤 애니메이션 스킬 oil-motion은 이미 스타 약 2,578개를 모은 상태였다. 10월 9일에는 스킬 마켓 Cola Skill에도 올라갔다.

영상 1. Oil UI로 AI가 만든 평범한 웹 디자인을 고치는 과정을 소개한 영상. 출처: YouTube LookOnThisGit 채널

깃허브 스타 숫자의 의미

깃허브 스타는 저장소의 별 버튼을 누른 사람 수다. "관심 있다" 혹은 "나중에 보려고 저장한다"는 표시에 가깝고, 실제로 설치해서 쓴 사람 수나 품질 점수가 아니다. 그래서 스타는 얼마나 많은 사람의 눈에 띄었는지를 보여 주는 화제성 지표로 읽는 편이 정확하다.

Oil UI의 스타는 크지 않지만 꾸준하게 늘었다. 작가는 10월 6일 새벽 "이틀 만에 570 스타"라고 알렸고, 개발자 뉴스레터 The Daily Commit의 10월 6일 판은 691개로 소개했다. 10월 12일 새벽에는 1,263개, 10월 13일 오전 11시 45분에는 1,385개였다. 하루에 수십에서 백여 개씩 늘어난 셈이다. 포크는 75개, 지켜보기는 5명, 열린 이슈는 1개다.

숫자를 볼 때는 비교 대상이 중요하다. 비슷한 목적의 UI 스킬인 ui-ux-pro-max-skill은 2025년 11월 공개 후 스타 약 13만 5천 개를 모았고, 앤트로픽의 공식 스킬 모음(anthropics/skills)은 약 18만 개다. 이들과 비교하면 Oil UI는 아직 작은 프로젝트다. 반대로 스킬은 저장소 하나에 문서 몇 개뿐인 경우가 많아 스타를 받기 어려운 형태인데, 개인이 만든 단일 스킬이 2주 만에 1천 개를 넘긴 것은 관심이 적지 않다는 뜻이다.

스타는 돈을 주고 사는 서비스도 있어서 숫자 하나만으로 판단하면 위험하다. Oil UI의 경우 X에서 작가 본인 글과 소개 글들의 반응 규모, 그리고 스타 증가 속도가 비슷한 수준이라 숫자가 부자연스럽지는 않다. 실제로 쓸지 판단할 때는 스타보다 갤러리의 결과물과 내가 쓰는 모델로 해 본 결과가 더 확실한 기준이다.

X와 커뮤니티 반응

반응은 중국어권에서 먼저 커졌다. 작가의 10월 6일 글 "Oil UI의 디자인 능력이 계속 진화 중, 디자인 스타일, 이미지 구성, 애니메이션, AI 느낌 줄이기, 디자인 리뷰가 모두 좋아졌다"는 좋아요 466개, 조회 약 6만 5천 회를 얻었다. 개발 유튜버 yupi996(鱼皮)는 "갤러리 27개 작품에 모두 프롬프트가 붙어 있어 한 번에 복사할 수 있다"고 소개하면서, 작가가 한 주 전 GPT-6을 "정말 멍청하다"고 비판해 놓고 갤러리에는 GPT-6 Luna로 만든 가계부 앱을 걸어 둔 점을 웃음거리로 짚었다. 이 글은 좋아요 155개, 조회 약 1만 7천 회였다. 작가는 "싼 모델에 스킬을 붙이면 괜찮은 결과가 나오는지 보여 주려는 것"이라고 답했다.

긍정적인 반응은 결과물과 방법에 모인다. 한 사용자는 "샤오훙수에서 보고 사이트 사례를 봤는데, GPT6 계열 모델의 기본 디자인 한계를 확실히 넘는다, 처음으로 돈 내고 산 스킬"이라고 적었다. 맥 앱 개발자 @bixtter_는 자기 앱 랜딩 페이지에 써 본 결과 같은 문구로 방향 세 개가 나왔다며 어느 쪽을 출시할지 팔로워에게 물었다. 디자이너 @Samnayakdesign은 "시안끼리 배치, 글꼴, 색, 대표 이미지 중 하나만 겹치게 한다는 규칙은 가져다 쓰겠다"고 했다.

신중한 시각도 있다. 중국어권 사용자 @simon_wang66은 "무료판으로도 다듬기는 되지만 Pro의 인터랙션과 기존 프로젝트 개선 기능, 그리고 기본으로 켜진 업데이트 확인 동작은 따로 따져 봐야 한다"고 적었다. yupi996도 "인터랙션과 기존 프로젝트 개선은 69위안 Pro에만 있다"고 덧붙였다. 무료 오픈소스가 유료판의 입구 역할을 한다는 점, 스킬이 네트워크에 접속한다는 점을 처음부터 알고 쓰라는 이야기다. 작가 스스로도 10월 3일 "유료 스킬을 처음 만들어 봤다, 스킬을 상품으로 팔 수 있는지 시험해 보고 싶다"고 밝혔다.

해커뉴스나 레딧에서 Oil UI를 직접 다룬 큰 토론은 10월 13일 현재 보이지 않는다. 영어권 반응은 트렌딩 소개 계정과 개인 개발자 글이 대부분이고, 일본어와 우크라이나어 소개 글도 올라왔다. 화제의 중심은 아직 중국어권 개발자 커뮤니티다.

윈도우에서 설치하는 방법

설치 방법은 두 가지다. 스킬 설치가 가능한 에이전트에게 저장소 주소를 주고 부탁하거나, 터미널에서 skills 명령을 실행하는 것이다. 가장 간단한 쪽은 에이전트에게 아래 문장을 그대로 보내는 방법이다.

이 스킬을 설치해 줘: https://github.com/oil-oil/oil-ui

터미널로 설치할 때는 PowerShell에서 아래 명령을 실행한다. skills는 버셀이 만든 에이전트 스킬 설치 도구로, 어느 에이전트에 설치할지와 현재 프로젝트에만 둘지 전체에 둘지를 물어본 뒤 각 에이전트의 스킬 폴더에 파일을 복사한다.

npx skills add oil-oil/oil-ui

이 설치 도구의 1.7.2 버전은 Node.js 22.20 이상을 요구한다. Node.js 20에서 실행하면 경고 뒤에 "fs/promises가 glob을 내보내지 않는다"는 오류를 내고 멈춘다. 먼저 버전을 확인하고, 낮으면 nodejs.org에서 LTS 버전을 새로 설치한다.

node -v
python --version

설치 후 따로 설정할 것은 없다. 다만 업데이트 확인과 비교 페이지 생성에는 Python 3가 쓰이고(비교 페이지는 3.10 이상), 화면 캡처 도구는 Node.js 22와 크롬, 크로미움, 엣지 중 하나가 필요하다. 윈도우에는 대개 엣지가 깔려 있어서 브라우저 조건은 쉽게 맞는다. 셸 스크립트를 실행할 수 없는 환경에서는 같은 기능의 파이썬 스크립트를 쓰도록 SKILL.md에 적혀 있다. 업데이트 확인을 끄려면 PowerShell에서 환경 변수를 지정한다.

$env:OIL_NO_UPDATE_CHECK = "1"

실제로 쓰는 방법

사용법은 에이전트에게 평소 말로 부탁하는 것이다. README가 예로 든 요청은 다섯 가지다. "oil-ui로 이 강의 예약 서비스의 디자인 방향을 몇 가지 탐색하고 미리 볼 수 있는 페이지로 만들어 줘", "글꼴, 색, 구성이 다른 디자인 세 개를 비교 페이지에 올려서 고를 수 있게 해 줘", "프로젝트의 기존 디자인 가이드에 맞춰 이 페이지를 다듬어 줘", "이 홈페이지를 리뷰하고 무엇을 어떻게 바꿀지 설명해 줘, 파일은 건드리지 마", "이 스크린샷대로 페이지를 재현하고 모바일 화면도 만들어 줘". 브랜드 자료나 참고 스크린샷, 기존 프로젝트가 있으면 함께 주면 된다.

요청의 크기에 따라 스킬이 일하는 방식이 달라진다. 버튼 색이나 간격 하나를 바꾸는 작은 수정은 방향 탐색 없이 바로 고치고 한두 문장으로 보고한다. 새 화면을 처음부터 만드는 경우에는 먼저 서로 다른 방향 세 개를 글로 제안하고 거기서 대화를 멈춘다. 사용자가 하나를 고르면 그 하나만 만들고, 실제 화면으로 보고 싶다고 하면 세 개의 첫 화면을 모두 만들어 비교 페이지에 올린다. 스크린샷 재현은 새 스타일을 만들지 않고 참고 이미지를 기준으로 맞추며, 고칠 때마다 캡처 도구의 비교 기능으로 원본과 견줘 본다. 리뷰 요청은 진단만 하고 파일은 수정하지 않는다.

비교 페이지는 스킬 안의 build_explorer.py가 만든다. 후보 HTML 파일들과 manifest.json(프로젝트 이름, 공통 목적, 후보별 이름과 콘셉트, 글꼴, 색상표)을 한 폴더에 두고 실행하면, 이미지와 글꼴까지 안에 담은 HTML 파일 하나가 나와서 인터넷 없이 열 수 있다. 후보 두 개짜리 간단한 예제를 넣어 보면 약 247KB짜리 비교 페이지가 만들어진다. 후보 HTML에 head 요소가 빠져 있으면 "후보 HTML에 완전한 head 요소가 필요하다"며 생성을 거부할 정도로 입력 검사가 꼼꼼하다. 평소에는 에이전트가 이 과정을 알아서 처리한다.

python scripts/build_explorer.py demo/manifest.json

캡처 도구 shoot.mjs는 사용자의 브라우저 데이터를 건드리지 않는 임시 브라우저를 띄워 화면을 찍는다. 기본은 휴대폰 크기 390x844이고, 데스크톱 크기, 클릭 같은 동작 뒤 캡처, 스크롤 녹화, 참고 이미지와의 비교, 문제 위치에 번호 상자 그리기를 지원한다. 캡처할 때마다 글자 대비 부족, 13픽셀보다 작은 본문, 너무 빽빽한 줄 간격 같은 가독성 문제와, 제목 위 작은 라벨, 한쪽만 색칠한 테두리, 그라데이션 글자, 카드 안의 카드, 이모지 아이콘처럼 AI가 자주 쓰는 기본 장식을 "기본 습관 알림"으로 표시한다. 이 목록 자체가 AI 디자인에서 흔히 보이는 버릇을 정리한 체크리스트로 읽을 만하다.

node scripts/shoot.mjs page.html --size desktop

비슷한 도구와의 차이

이름에 UI가 들어가서 shadcn/ui 같은 컴포넌트 라이브러리와 헷갈리기 쉽지만 성격이 다르다. shadcn/ui는 버튼, 대화상자, 표 같은 부품 코드를 프로젝트에 복사해 넣는 라이브러리로 스타 약 12만 5천 개를 가진 대표 프로젝트다. Oil UI는 부품을 주지 않는다. 어떤 글꼴과 배치를 고를지 판단하는 방법을 준다. 그래서 둘은 경쟁 관계가 아니라 함께 쓸 수 있다. shadcn/ui로 만든 기존 화면을 Oil UI로 리뷰하거나, Oil UI로 정한 방향을 shadcn/ui 부품으로 구현하는 식이다.

같은 스킬 형태의 경쟁자도 있다. 앤트로픽의 공식 스킬 모음에는 frontend-design 스킬이 들어 있고, nextlevelbuilder의 ui-ux-pro-max-skill은 스타일과 색상표, 글꼴 조합 같은 디자인 지식을 대량으로 담은 스킬이다. Oil UI는 지식의 양보다 진행 순서와 비교, 검증에 무게를 둔다. 시안을 여러 개 만들어 고르게 하는 흐름과, 실제 캡처로 확인하는 도구를 스킬 안에 함께 넣은 점이 차별점이다.

어떤 것을 고를지는 목적에 달려 있다. 만들 부품이 필요하면 컴포넌트 라이브러리, 디자인 지식 사전이 필요하면 ui-ux-pro-max-skill 같은 스킬, 에이전트가 첫 시안 하나로 끝내 버리는 습관을 바꾸고 싶다면 Oil UI가 맞는다. 작가는 문구를 자연스럽게 다듬는 oil-tone, 스크롤 애니메이션을 만드는 oil-motion과 함께 쓰기를 권한다.

마무리

앞에서 다룬 Oil UI의 핵심만 짧게 정리한다.

• Oil UI는 AI 에이전트에게 디자이너의 작업 순서를 알려 주는 무료 MIT 오픈소스 스킬이며, 부품을 주는 UI 라이브러리가 아니다.
• 시안을 확실히 다른 방향 세 개로 뽑아 비교 페이지에서 고르게 하고, 고른 것만 실제 화면 캡처로 다듬는다.
• 9월 30일 공개 후 2주 만에 스타 1,385개를 모았다. 스타는 관심의 크기이지 사용자 수나 품질 점수가 아니다.
• 인기 이유는 AI 디자인이 비슷해지는 문제를 짚은 점, 모델과 프롬프트를 공개한 갤러리, 비교 페이지, 빠른 업데이트다.
• 윈도우에서는 Node.js 22.20 이상과 Python 3를 준비하고 npx skills add oil-oil/oil-ui 한 줄로 설치한다.
• 사용성 개선과 기존 프로젝트 작업은 9.99달러 Pro에 있고, 스킬은 사용할 때 공개 버전 목록을 확인하러 인터넷에 접속한다.

「좋은 디자인은 하나를 잘 고르는 데서 나오고, Oil UI는 고를 거리를 먼저 만들어 준다」 처음에는 작은 랜딩 페이지 하나로 시안 세 개를 받아 보고, 내가 쓰는 모델에서 결과가 마음에 드는지 확인한 뒤 범위를 넓히는 것이 좋다.

출처와 링크

조사 기준 2026년 10월 13일.

• oil-oil/oil-ui 깃허브 저장소
• Oil UI README 중국어판
• Oil UI SKILL.md
• Oil UI 도구 문서(references/tools.md)
• Oil UI 비교 페이지 문서(references/style-explorer.md)
• Oil UI 릴리스 목록
• Oil UI 갤러리 ui.oiloil.org
• Oil UI Pro 안내
• X @I_am_oil_oil: 갤러리 사이트 공개
• X @I_am_oil_oil: 디자인 능력 개선 소식
• X @I_am_oil_oil: 스킬 공개 글
• X @I_am_oil_oil: 570 스타 소식
• X @I_am_oil_oil: 유료 스킬 실험
• X @yupi996: 갤러리와 프롬프트 소개
• X @simon_wang66: Pro와 업데이트 확인 동작 지적
• X @alcu1n: 첫 유료 스킬 구매 후기
• X @bixtter_: 맥 앱 랜딩 페이지 적용기
• X @Samnayakdesign: 시안 규칙 평가
• X @TheArthiAI: 트렌딩 소개
• The Daily Commit 2026년 10월 6일 판
• YouTube LookOnThisGit: Fix Ugly AI Web Design with Oil UI
• vercel-labs/skills 설치 도구
• anthropics/skills
• ui-ux-pro-max-skill
• shadcn/ui
• oil-oil/oil-motion