UI 첫 화면 시안 세 개를 나란히 놓고 고르게 해 주는 스킬, oil-ui

oil-oil/oil-ui

같은 요청 하나로 레이아웃·글꼴·색·주인공 그림이 서로 다른 UI 첫 화면 세 방향을 만들어 한 페이지에 나란히 놓고, 마음에 드는 방향을 눌러 고르게 해 주는 스킬입니다.

설치 방법

README의 설치 방법 두 가지 중 하나만 고르세요(둘 다 할 필요 없음). 두 방법 모두 npx skills add를 실행하므로 Node.js가 필요한데, 시험 장비에는 Node가 없어 두 방법 모두 해 보지 못했습니다. 시험은 레포 파일을 실행마다 새 프로젝트의 .claude/skills/oil-ui/에 복사해 /oil-ui로 불러 실행했습니다(전역 설치 없음).

방법 1 · 터미널에서 실행 (Node.js 필요, 이 시험에서는 해 보지 못함)

복사npx skills add oil-oil/oil-ui

방법 2 · 스킬을 설치할 수 있는 에이전트에게 이 문장을 그대로 보내기 (명령이 아니라 메시지, 이 시험에서는 해 보지 못함)

복사Install this skill for me: run npx skills add oil-oil/oil-ui

시험에서 쓴 방법 · Node 없이 프로젝트 폴더에 복사 (README 설치 명령이 아님, 시험 때 쓴 명령의 경로만 줄임)

복사git clone --depth 1 https://github.com/oil-oil/oil-ui oil-ui-src
mkdir -p .claude/skills/oil-ui
rsync -a --exclude .git oil-ui-src/ .claude/skills/oil-ui/

2026-09-30에 만들어진 레포로, 생성 20일 만에 누적 스타 1,925개이고 최근 7일 새 포크는 32개입니다(스크립트로 센 값이고 집계 상한에 닿지 않은 정확한 값입니다). 집계 시점의 GitHub 트렌딩 페이지에는 없었고 최근 7일 스타 증가량은 재지 못했습니다. 집계 자료에는 생성 이후 하루 평균 96.2개라는 어림(평생 일평균 추정값)만 있고, 마지막 푸시는 2026-10-18입니다. 써 보니 12번 모두 같은 요청 하나로 첫 화면 세 방향과 그 셋을 나란히 놓은 비교 페이지를 만들었습니다. 세 방향은 같은 내용과 숫자를 쓰면서 골격·색·주인공 그림이 눈에 띄게 달랐고 글꼴도 대체로 달랐습니다(브랜드 색과 글꼴을 정해 준 run06은 같은 색 값과 글꼴을 쓰고 골격과 주인공 그림이 달랐습니다. 다만 03은 주색을 화면 위쪽 전체에 깔았습니다). 모델이 추천(또는 선택)한 방향과 이유도 매번 적었습니다. 시험한 것은 이 레포의 스킬 oil-ui 하나(SKILL.md의 version 0.23.8, 커밋 feb1f95)입니다.

필요 조건

• 스킬을 쓰는 에이전트(README 예: 스킬 설치를 지원하는 에이전트). 시험은 Claude Code 2.1.304 + claude-opus-5-5에서 프로젝트 스킬(.claude/skills/oil-ui/)로 복사해 실행
• README 설치 명령 npx skills add에는 Node.js(npx)가 필요하다. 이 장비에는 Node가 없어 시험에서는 파일 복사로 대신했다
• 비교 페이지 생성기 build_explorer.py는 Python 3.10 이상(표준 라이브러리만). 버전 확인 스크립트도 Python 3
• 스킬 자체의 스크린샷·녹화 도구 shoot.mjs는 Node 22와 Chrome·Chromium·Edge가 필요하다. 없으면 호스트 도구로 대신한다고 스킬 문서에 적혀 있고, 시험에서는 모델이 헤드리스 google-chrome으로 직접 찍었다
• 결과는 브라우저로 여는 HTML이다. 비교 페이지 style-explorer.html은 후보·글꼴·로고를 내장한 한 파일이라 오프라인으로 열린다

스킬만 있는 레포(플러그인 매니페스트 없음)라 README 설치는 npx skills add 한 가지이고(방법 2는 같은 명령을 에이전트가 대신 치게 하는 문장), 시험에서는 Node가 없어 프로젝트 스킬 폴더에 복사해 /oil-ui로 불러 실행했다. 스킬 문서는 중국어로 쓰였지만 답변·설계 메모·화면 글자는 요청 언어를 따랐다(한국어 요청 11회, 영어 요청 1회 모두 한국어 화면). 새 UI 요청이면 기본 동작은 방향 세 개를 글로 먼저 묻고 멈추는 것이라, 바로 만들게 하려면 '묻지 말고 진행해'처럼 적어야 한다. 쓸 때마다 ui.oiloil.org 공개 버전 목록을 확인하고(OIL_NO_UPDATE_CHECK=1로 끔) 처음 쓸 때는 답변 끝에 제작자의 유료판 안내가 붙을 수 있다(시험 12번 중 6번). 비교 페이지 후보는 스크립트 없이도 내용이 보여야 한다(스크립트로 그린 후보는 비교 페이지에서 비어 보임, run12). 하위 에이전트 독립 리뷰(SKILL.md 4단계)는 Task·Agent 도구를 막아 하지 않았고, 12회 모두 모델이 '독립 리뷰 없이 스스로 점검했다'고 보고했다(Task·Agent 호출 0번). 경쟁 서비스 화면 분석(1단계 '실제 화면을 가져와 분해')도 인터넷을 막아 12회 모두 기억으로만 했다고 보고했다.

복사# $T = 시험용 작업 폴더(전체 경로는 생략)
git clone --depth 1 https://github.com/oil-oil/oil-ui $T/src  (커밋 feb1f95, SKILL.md version 0.23.8)
mkdir -p /tmp/gitstar-sandbox/oil-oil__oil-ui/runNN/.claude/skills/oil-ui && rsync -a --exclude .git $T/src/ /tmp/gitstar-sandbox/oil-oil__oil-ui/runNN/.claude/skills/oil-ui/  (실행마다 새 샌드박스의 프로젝트 스킬로 복사, 전역 설치 없음. run04만 $T/inputs/run04/섬여행_자료.md를 샌드박스에 미리 복사)
OIL_NO_UPDATE_CHECK=1 XDG_STATE_HOME=$T/state/runNN TMPDIR=/tmp/gitstar-sandbox/oil-oil__oil-ui/runNN/.cache/tmp claude -p "/oil-ui <요청> … 진행 메모 …" --output-format json --permission-mode acceptEdits --allowedTools Read Glob Grep Write Edit "Bash(python3:*)" "Bash(google-chrome:*)" (+ 기본 파일 명령) --disallowedTools AskUserQuestion WebFetch WebSearch Skill Task Agent "Bash(curl:*)" "Bash(wget:*)" "Bash(git:*)" "Bash(node:*)" "Bash(npm:*)" "Bash(npx:*)" "Bash(pip:*)" "Bash(rm:*)" … --strict-mcp-config --no-chrome --max-budget-usd 2  (run_once.py 경유, 샌드박스에서 실행, 시간 제한 900초, 전체 인자는 tools/trial.sh)

보안 검토: caution — 훅·MCP 서버·자격 증명 접근·난독화·위험 지시문 없음. 주의할 점: (1) SKILL.md의 로드 때 명령 !`sh check_update.sh`가 ui.oiloil.org 공개 버전 목록을 GET하고 ~/.local/state/oil/에 캐시한다(README에 목적과 끄는 법 OIL_NO_UPDATE_CHECK=1 설명). (2) 사용자가 명시적으로 업데이트를 요청하면 check_update.py --update가 npx -y github:oil-oil/oil-cli#64ada13…로 스킬 폴더를 덮어쓴다. (3) 처음 쓸 때 답변 끝에 제작자의 유료판 안내가 붙을 수 있다(시험 12번 중 6번). (4) 랜딩 페이지·소재 단계는 GSAP·Lenis·공공 소장품 API(curate-media.mjs, Node)를 쓰라고 안내한다. build_explorer.py는 로컬 파일만 읽어 한 파일로 내장하고 원격 자원을 거부한다. 시험은 전역 설치 없이 실행마다 /tmp 샌드박스의 프로젝트 스킬로 복사, OIL_NO_UPDATE_CHECK=1·XDG_STATE_HOME=$T/state/runNN, acceptEdits + 허용 목록(python3·google-chrome·기본 파일 명령), WebFetch·WebSearch·Skill·Task·Agent·curl·wget·git·node·npm·npx·pip·rm 거부, --strict-mcp-config·--no-chrome·--max-budget-usd 2로 했다. 결과: 12회 모두 로드 때 버전 확인 명령은 Claude Code가 실행하지 않은 채 문자열로 남았고, 모델이 직접 실행하려던 2번(run07·run12, OIL_NO_UPDATE_CHECK=1을 붙인 복합 명령)은 권한 검사에 막혀 버전 확인은 한 번도 실행되지 않았다. 금지 명령 시도 0번, 샌드박스 밖 경로 0번, 결과 HTML의 외부 요청 0건, ~/.local/state 아래 oil·oil-ui 폴더 생기지 않음. 자세한 내용은 security_review.md.

써 보니

• 부르는 법: /oil-ui 뒤에 만들 서비스와 화면, 쓰는 사람이 첫 화면에서 할 일을 적습니다. 시험 프롬프트 12개는 만든 서비스가 모두 달랐고(원데이 클래스 예약, 잔돈 저축 앱, 소극장, 퍼즐 게임 등) 요청 방식도 한두 문장(run01·run02는 README의 사용 예를 한국어로 옮긴 것), 요구 사항 목록(run03), 자료 파일 읽기(run04), 브랜드 규칙 지정(run06), 고정 화면 크기 지정(run08)까지 다양했는데, 12번 모두 첫 화면 세 방향과 비교 페이지가 나왔습니다.
• 처음엔 방향을 글로 먼저 묻고 멈추는 것이 기본입니다. 스킬 문서(SKILL.md)는 새 UI 요청이면 방향 세 개를 글로 써서 묻고 그 턴을 끝내라고 하고, 사용자가 알아서 하라거나 바로 만들라고 말하거나 무인으로 돌릴 때만 묻지 않고 첫 화면 세 개를 비교 페이지에 올리라고 합니다. 바로 만들게 하려면 '묻지 말고 진행해'처럼 적으세요. 시험 프롬프트 12개는 모두 '질문하거나 확인을 기다리지 말고 끝까지 진행해. 방향을 글로 먼저 묻는 단계는 건너뛰고 바로 만들어'를 붙였고(run07은 같은 뜻의 영어 문장), 글로 먼저 묻는 기본 흐름은 시험하지 않았습니다.
• 비교 페이지 쓰는 법: 스킬의 build_explorer.py가 후보와 글꼴을 한 파일에 내장해 만든 style-explorer.html(약 26만~42만 바이트)이라 인터넷 없이 브라우저로 열립니다. 카드의 Select를 누르면 카드에 'Selected'가 표시되고 'Copied. Paste it to your agent.' 알림과 함께 'Round 01: Go with 02 화단 격자' 같은 문장이 클립보드에 복사되니, 에이전트 대화창에 붙여 넣어 고른 방향을 알리면 됩니다. 카드를 눌러 여는 Single 보기에는 색·글꼴·특징이 나오고 키보드 P로도 고릅니다. 시험자가 헤드리스 Chrome의 실제 마우스·키 입력으로 12개 비교 페이지에서 Select와 Single 보기 + P를 눌러 확인했고, 12개 모두 페이지 오류 0, 외부 요청 0이었습니다.
• 'Desktop 1280 / Mobile 390' 전환 단추는 후보가 화면 크기를 고정(nativeViewport)하지 않았을 때만 보입니다. 단추가 보인 것은 요청에 두 폭 모두 맞게 만들라고 적은 run03·run04·run10뿐이고, 나머지 9번은 후보가 화면 크기를 고정해 단추가 숨겨졌습니다(스킬의 정상 동작이라 오류가 아닙니다). 데스크톱과 휴대폰을 모두 비교하려면 '비교 페이지에서 데스크톱·휴대폰 보기를 바꿔 볼 수 있게 두 폭 모두 맞게'처럼 요청에 적으세요. 시험자가 Mobile 390 전환도 실제 마우스 입력으로 눌러 세 방향이 휴대폰 폭으로 바뀌는 것을 확인했습니다.
• 범위에 따라 시간과 비용이 달랐습니다. 9번은 첫 화면 세 개와 비교 페이지까지만 만들고 멈추라고 범위를 제한했고 실행 하나에 1.01~1.76달러(평균 1.47달러), 3.9~7.6분(평균 6.0분)이 들었습니다. 3번(소극장 랜딩 페이지 run05, 반려견 산책 앱 흐름 run09, 문구점 주문 관리 run12)은 모델이 스스로 한 방향을 골라 전체 화면까지 만들게 했고 1.69~1.97달러(평균 1.86달러), 6.6~7.6분(평균 7.2분)이 들었습니다. 12번 합계는 18.84달러·75.7분이며(claude-opus-5-5, 2026-10-21, 2~3개를 동시에 실행), 12번 모두 비용 상한 2달러(--max-budget-usd 2)에 걸려 실패하지 않았습니다. run05는 1.97달러로 상한에 거의 닿았고 마지막 모바일 수정 뒤 다시 찍지 못했다고 모델이 보고했습니다.
• 요청에 적은 내용은 세 방향에 같이 반영됩니다. 요구 사항(수거 요일, 가격 예시, 첫 신청 수거비 무료)을 적은 run03은 세 첫 화면에 모두 보였고(시험자 확인), 브랜드 규칙(주색·바탕색·글꼴)을 정해 준 run06은 세 방향이 같은 색 값과 글꼴을 쓰고 골격과 주인공 그림이 달랐습니다. 다만 03은 주색을 화면 위쪽 전체에 깔았고 바탕색은 배경으로 아래 시트에만 썼습니다(모델의 설계 메모에도 '단 C는 의도적으로 면 전체'라고 적혀 있습니다). 섬 일정 자료 파일을 준 run04는 자료에 없는 숫자(물때)를 지어내지 않고 자료에 있는 섬에만 적었습니다. 자료를 주지 않은 run05는 줄거리·공연 시간·관람 연령·주소를 모델이 지어냈고 설계 메모에 가정이라고 적었습니다. 화면 속 이름·숫자는 모두 지어낸 값이니 실제 값으로 바꿔 쓰세요.
• 화면 글자 언어: 스킬 문서는 중국어로 쓰였지만 답변과 화면 글자는 요청 언어를 따랐고, 12개 모두 한국어 화면에 한자가 0자였습니다. 시험 프롬프트에는 '중국어와 한자는 화면에 쓰지 마'(run07은 같은 뜻의 영어 문장)를 적었고(이 문장을 뺀 경우는 시험하지 않았습니다), 영어로 요청한 run07도 화면 글자는 한국어로 쓰라고 적었으며 최종 보고만 영어였습니다. 비교 페이지 바깥 틀 글자(Compare·Single·Select 등)는 영어입니다. 틀 글자는 영어와 중국어 두 가지뿐이고, 시험 프롬프트가 manifest에 "lang": "en"을 넣게 했습니다(생략하면 브라우저 언어가 중국어일 때만 중국어, 그 밖에는 영어). 결과를 보는 컴퓨터에는 한글 글꼴이 있어야 합니다(시험 장비는 Noto Sans·Serif CJK KR).
• 비교 페이지 미리보기가 비어 보일 수 있습니다. run01·run08·run10에서는 모델이 자기 헤드리스 Chrome으로 찍은 비교 페이지에 칸이 비어 있거나 덜 그려져 있었다고 보고했고(run08은 사이트 격리 옵션을 끄고 다시 찍었습니다), 시험자가 실제 마우스 입력으로 연 화면에서는 세 칸 모두 보였습니다. run12(갤러리에서는 뺐습니다)는 후보를 스크립트로 그려서, 비교 페이지가 후보의 스크립트를 빼고 넣는 바람에 미리보기가 거의 비었습니다. 스킬 문서는 후보가 스크립트 없이도 내용이 보여야 한다고 적는데, 그 실행의 모델은 비교 페이지 안의 모습을 확인하지 않았습니다. 결과를 받으면 비교 페이지를 열어 세 칸이 채워졌는지 먼저 보세요.
• 전체 화면까지 맡긴 3번은 모델이 확인용 페이지와 스크립트를 직접 만들어 돌렸습니다. run09는 모델이 점검 페이지로 흐름(산책 시작, 시간 흐름, 멈춤·다시 걷기, 기록 전환, 저장 뒤 새로고침, 저장 실패 때 입력 유지, 주소로 상태 열기)을 3번 돌려 모두 통과했다고 보고했고, 시험자도 실제 마우스·키 입력으로 '산책 시작'·'산책 끝내기'·'기록 저장'(저장 실패 모의)을 눌러 화면이 바뀌는 것을 확인했습니다. 거리와 친구 위치는 모의 값이라고 모델이 알렸습니다. run05(소극장 랜딩)는 스킬이 권하는 GSAP 대신 프롬프트에 적은 대로 CSS와 바닐라 JS로 스크롤 연출을 만들었습니다.
• 시험하지 않은 것과 막아 둔 것: 하위 에이전트의 독립 리뷰(SKILL.md 4단계)는 Task·Agent 도구를 막아 하지 않았고, 12번 모두 모델이 스스로 점검했다고 보고했습니다. 경쟁 서비스 화면 분석은 인터넷을 막아 12번 모두 기억으로만 했다고 모델이 보고했습니다. 스킬의 Node 도구(shoot.mjs 스크린샷, curate-media.mjs 실제 소재 검색)는 쓰지 않았고 헤드리스 Chrome으로 대신 찍었으며(스킬 문서 references/tools.md가 안내하는 대체), 그림은 사진 대신 SVG·CSS·도형으로 그리게 했습니다. 비교 페이지에서 고른 방향을 에이전트에게 붙여 넣어 이어 가는 단계는 시험하지 않았고(3번은 모델이 스스로 골라 이어 갔습니다), 문구·색 한 군데를 고치는 작은 수정은 방향 탐색 없이 바로 고친다고 스킬 문서가 적지만 그것도 시험하지 않았습니다.
• 버전 확인과 제작자 안내: SKILL.md에는 불러올 때 ui.oiloil.org의 공개 버전 목록을 읽고 ~/.local/state/oil/에 캐시하는 명령이 있습니다(README가 목적을 설명하고, 끄려면 OIL_NO_UPDATE_CHECK=1). 시험은 이 값과 XDG_STATE_HOME=시험 폴더로 실행했고, 12번 모두 버전 확인은 실행되지 않았습니다(Claude Code가 그 명령을 실행하지 않았고, 모델이 직접 실행하려던 2번은 권한 검사에 막혔습니다). 시험 뒤 홈 폴더에는 ~/.local/state/oil·~/.local/state/oil-ui·~/.config/oil이 생기지 않았습니다. 처음 쓸 때 답변 끝에 제작자의 유료판 안내가 붙을 수 있습니다(시험 12번 중 6번).
• 권한 창: 시험은 답할 사람이 없는 비대화형(claude -p) 실행이라 권한·셸 안전 검사에 실행마다 2~8번(합계 56번) 막혔고, 모델이 명령을 나누거나 바꿔 이어 갔습니다. 그 밖의 도구 오류는 합계 3번(run02 2번, run04 1번)으로, 두 수는 따로 센 값입니다. 대화형으로 쓰면 python3·google-chrome 명령 승인 창이 뜰 수 있으니 승인할 준비를 하세요(대화형은 시험하지 않았습니다).
• Codex: 레포 설명(GitHub)은 Claude Code, Codex 등 다른 에이전트용이라고 적지만 이 시험은 Claude Code에서만 했고 Codex는 시험하지 않았습니다. 라이선스는 MIT(2026 oil-oil)이고, 이 페이지에는 결과 캡처 PNG만 싣고 결과 HTML과 스킬 코드는 싣지 않았습니다.

결과물 11개

카드 한 장은 실행 한 번의 대표 화면 캡처입니다(비교 페이지 화면에 단독 보기·휴대폰 보기·완성 화면 중 대표 한두 장을 위아래로 이은 것). 굵은 글씨는 결과 설명이고, '프롬프트 전문 보기'를 누르면 그때 쓴 프롬프트가 펼쳐집니다(요청 뒤에 시험 때마다 붙인 공통 진행 메모가 이어집니다). 테두리 카드(run02, run04, run08, run09)는 업종과 요청 방식이 서로 다른 대표 결과입니다. 화면 속 서비스 이름·사람·숫자·날짜는 모두 모델과 시험자가 지어낸 가상 자료이고, 동네 이름이 나와도 그곳에 실제로 있는 가게와는 관계가 없습니다(run11 화면의 '10월 21일 화요일'은 2026년 10월 21일의 실제 요일인 수요일과 맞지 않는 표기입니다). run12(문구점 주문 관리)는 완성 화면의 전표에 실제 주소와 전화번호처럼 읽히는 가상 자료가 크게 보여 갤러리에서 뺐습니다(성공 12회와 평균 소요에는 포함한 값입니다).