실제 뷰포트 스크린샷과 블라인드 서브에이전트 시각 리뷰
자신의 JSX와 Tailwind 클래스를 읽는 Agent는 실제 브라우저 렌더링에서 제목이 세 줄로 줄 바꿈되고 어두운 배경의 회색 레이블을 읽을 수 없으며 그리드가 한쪽으로 치우쳤는데도 화면이 “깔끔하고 균형 잡혔다”고 기꺼이 보고합니다. Oil UI는 인터페이스가 완성되었다고 판단하기 전에 실제 브라우저 렌더링과 맥락 없는 서브에이전트 비평을 필수 단계로 둡니다.
핵심 요점
- 소스 코드는 인터페이스가 아닙니다. 목표 뷰포트(1440×900, 390×844, 1920×720)에서 렌더링된 실제 브라우저 픽셀만으로 레이아웃을 판단하세요.
- 코드를 작성한 Agent는 자신의 의도에 편향되어 있습니다. 스크린샷만 보는 새로운 서브에이전트를 실행하면 솔직한 비평을 얻을 수 있습니다.
- 세 가지 뷰를 검사하세요. 속도감을 보는 100% 전체 페이지 캡처, 정렬과 테두리 절제를 보는 200% 크롭, 블록 무게를 보는 텍스트 흐림 이미지입니다.
- 스크린샷은 정적인 완성도를 검증하고 실제 페이지를 클릭하고 입력하는 과정은 상태, 드로어, 오류 복구가 실제로 작동하는지 확인합니다.
npx skills add oil-oil/oil-ui이미지를 처리할 수 있는 모델과 페이지를 렌더링하고 캡처할 수 있는 로컬 브라우저 환경이 필요합니다.
소스 코드 검사가 시각적 결함을 놓치는 이유
소스 코드에서는 justify-between이 있는 flex 행이 깔끔해 보입니다. 하지만 실제 390px 뷰포트에 32자 제품명과 작업 버튼 세 개를 넣으면 같은 행이 버튼을 읽기 어려운 긴 pill로 눌러 버립니다. 마찬가지로 코드의 색상 클래스만으로는 보조 텍스트가 어두운 배경에서 사라지는지 알 수 없습니다.
Oil UI 갤러리의 가장 뛰어난 세부 사항 중 상당수는 정확한 뷰포트 동작에 달려 있습니다. Yantu(1920×720 차량 인포테인먼트)에서는 회전이 다가오면 네비게이션 안내가 커지고 미디어 컨트롤이 어두워집니다. Splitwater(198×242 수영 워치, DPR=4)에서는 거대한 숫자 하나가 젖은 화면을 차지합니다. Forkside(체스 수업)에서는 올바른 나이트 이동이 동시에 두 개의 포크 공격선을 밝힙니다. 실제 렌더링만이 이런 상태가 유지되는지 확인할 수 있습니다.
| 검사 레이어 | 작동 방식 | 찾아내는 결함 |
|---|---|---|
| 100% 뷰포트 캡처 | 1440×900(데스크톱) 또는 390×844(모바일)에서 전체 화면 및 전체 스크롤 스크린샷 | 묻힌 주요 행동, 단조로운 섹션 높이, 끊어진 스크롤 리듬, 잘린 바닥글 |
| 200% 상세 크롭 | 머리글, 표 행, 폼 입력, 가격 등급의 2배 확대 크롭 | 이중 테두리, 정렬되지 않은 숫자 열, 일관되지 않은 안쪽 여백, 대비가 낮은 캡션 |
| 흐린 블록 구조 검사 | 공간 덩어리와 색상 강조만 보이도록 텍스트를 흐리게 하거나 축소 | 상단이 무겁거나 한쪽으로 치우친 레이아웃, 경쟁하는 강조색, 동일한 상자로 이뤄진 균일한 그리드 |
| 실제 인터랙티브 점검 | 브라우저에서 클릭, 입력, 슬라이더 드래그, 오류 상태 유발 | 작동하지 않는 버튼, 중요한 맥락을 가리는 팝오버, 깨진 검증 복구, 동기화되지 않은 상태 |
맥락 없는 서브에이전트 블라인드 리뷰의 작동 방식
작성 Agent에 자신의 스크린샷을 비평하게 하면 충족하려던 프롬프트를 기억하기 때문에 보통 자신의 실수를 합리화합니다.
Oil UI는 소스 코드와 구현 이력을 전혀 받지 않고 렌더링된 PNG 스크린샷과 제품이 무엇인지에 관한 한 줄 설명만 받는 별도 서브에이전트를 실행해 이런 확증 편향을 끊습니다. 까다로운 첫 사용자처럼 행동하는 블라인드 리뷰어는 좁은 간격, 남은 AI 상투성, 약한 대비를 표시합니다.
모든 필수 상태의 일관된 스크린샷 캡처
메인 Agent가 헤드리스 브라우저에서 실행 중인 페이지를 열고 기본 뷰, 활성 상호작용 상태, 모바일 중단점을 캡처합니다.
코드 맥락이 없는 새로운 서브에이전트에 이미지 전달
리뷰어는 Oil UI의 가독성, 위계, AI 상투성 방지 기준에 따라 캡처를 검사하고 구체적인 시각적 결함 목록을 반환합니다.
결함 수정, 불필요한 요소 제거, 재캡처
메인 Agent는 보고된 각 문제를 코드에서 해결하고 작업을 완료하기 전에 새 스크린샷을 찍어 수정 사실을 확인합니다.
블라인드 스크린샷 리뷰를 시작하는 프롬프트 템플릿
초안 화면이 기능적으로는 작동하지만 어딘가 조금 어색하게 느껴질 때마다 이 리뷰 단계를 실행하세요.
현재 화면에서 Oil UI 시각 검증과 블라인드 서브에이전트 리뷰를 실행해 줘.
1. 로컬 브라우저에서 실제 페이지를 열고 1440×900(데스크톱)과 390×844(모바일)로 기본 상태와 [상태 1 / 상태 2]를 포함한 스크린샷을 캡처해 줘.
2. 코드 맥락이 없는 새로운 서브에이전트를 실행해 줘. 스크린샷과 제품 요약만 전달하고 남은 AI 템플릿 상투성, 대비가 낮은 텍스트, 좁은 안쪽 여백, 정렬되지 않은 열, 불분명한 첫 화면 초점을 비평하게 해 줘.
3. 블라인드 리뷰어가 제기한 모든 문제를 수정하고 다시 스크린샷을 캡처해 확인해 줘.Claude Code와 Codex처럼 서브에이전트와 이미지 검사를 지원하는 Agent에서 자동으로 작동합니다.
작동하는 갤러리 사례와 프롬프트
1440px 또는 390px의 실제 데모를 열어 모델과 프롬프트가 최종 인터페이스를 어떻게 형성했는지 살펴 보세요.
Nightwatch
운영 모니터링 및 장애 대응
중규모 플랫폼 팀을 위한 모니터링 및 온콜 도구를 1440×900 영어 인터페이스로 만드세요. 서비스 토폴로지, 지연 시간, 오류율 및 트래픽 차트, 최근 배포, 로그, 트레이스를 제공하고 장애 중에는 알림, 현재 온콜 담당자, 장애 타임라인을 표시하세요. 장애가 전개되는 과정이 핵심입니다. 장애가 발생한 서비스와 영향을 받는 다운스트림 서비스가 토폴로지에서 분명히 보여야 합니다. 시간 범위를 드래그하면 차트, 배포 마커, 로그가 정렬되어 어떤 배포가 문제를 일으켰는지 확인할 수 있어야 합니다. 정상 개요, 알림과 토폴로지의 영향 경로 강조가 있는 장애 진행 상태, 오류 피크에서 로그와 트레이스를 열어 원인 배포를 찾는 상태의 세 가지 화면을 디자인하세요.
작품과 프롬프트 살펴 보기 →
Yantu
차량 인포테인먼트
차량 인포테인먼트 화면의 주 인터페이스를 만드세요(1920×720, 주행 중 한눈에 읽을 수 있어야 함). 중국어 인터페이스로 네비게이션 지도, 현재 재생 중인 음악, 공조 컨트롤, 자주 쓰는 차량 컨트롤을 제공합니다. 같은 화면에서 우선순위가 바뀌는 것이 이 작품의 핵심입니다. 평소에는 지도가 주도하고 음악과 공조가 작은 영역을 차지하다가 회전이 가까워지면 회전 안내가 자동으로 커지고 음악이 공간을 양보해야 합니다. 공조를 조절할 때는 온도 슬라이더가 올라오고 나머지 요소가 어두워집니다. 보지 않고도 정확히 누를 수 있을 만큼 버튼을 크게 만드세요. 실제 지도 서비스를 사용하지 말고 지도를 직접 그리세요. 색상은 야간용 블루 블랙 배경과 일렉트릭 블루 네비게이션 경로를 사용하고 앰버는 경고와 회전 안내에만 쓰세요. 웜 화이트나 베이지는 사용하지 마세요. 순항, 회전 접근, 공조 조절의 세 가지 상태를 디자인하세요. 1920×720, DPR=1로 스크린샷을 캡처하세요.
작품과 프롬프트 살펴 보기 →
Splitwater
수영 훈련 워치 앱
수영장 훈련을 기록하는 워치 앱을 만드세요(워치 케이스나 스트랩은 그리지 말고 각 화면을 198×242로 디자인). 영어 인터페이스로 랩 수, 페이스, 심박수, 휴식 카운트다운, 수영 후 요약을 제공합니다. 손목을 한 번 보는 것만으로 충분해야 합니다. 각 화면은 하나의 큰 숫자를 주인공으로 삼고 랩을 완료할 때마다 랩 카운트가 짧게 점프해야 합니다. 휴식 중에는 카운트다운 링이 완성되고 진동으로 물에 돌아갈 시간을 알립니다. 화면이 젖으므로 크라운을 돌려 잠금을 해제하고 그 상태를 인터페이스에 표시하세요. 색상은 순수한 검은색 워치 디스플레이, 풀 사이언 주색, 흰색 숫자를 사용하세요. 따뜻한 색은 사용하지 마세요. 수영, 휴식 카운트다운, 워터 록, 일시정지 및 종료, 트레이닝 요약의 다섯 화면을 디자인하세요. 하나의 상호작용 화면이 있는 `index.html`과 다섯 화면을 나란히 배치한 `screens.html`을 전달하세요. 198×242, DPR=4로 스크린샷을 캡처하세요.
작품과 프롬프트 살펴 보기 →
Forkside
체스 전술 레슨
레이팅 800–1600의 아마추어 플레이어를 위한 체스 전술 학습 웹사이트를 만드세요(1440×900에서 시작해 너비 390픽셀까지 반응형 대응). 영어 인터페이스로 포크, 핀, 스큐어, 디스커버드 어택 같은 전술을 한 번에 하나씩 가르치고 단계별 보드 설명 뒤에 몇 개의 퍼즐을 제공하세요. 핵심은 설명에 따라 화살표와 하이라이트가 보드에 단계적으로 나타나는 것입니다. 나이트가 포크 칸으로 이동하는 것처럼 정확한 수를 두면 두 공격선이 동시에 밝혀져야 합니다. 잘못된 수에는 단순히 “틀렸다”고 말하는 대신 상대의 구체적인 응수를 보여 주세요. 기물과 보드는 기본 기물 아이콘이 아니라 이미지 생성이나 3D 렌더링으로 만든 재질을 사용해 정교하게 만드세요. 레슨 설명, 퍼즐 풀이, 풀이 후 전술 공개의 세 가지 상태를 디자인하세요.
작품과 프롬프트 살펴 보기 →Oil UI Pro: 9/10 품질을 목표로 최대 3회 블라인드 리뷰
무료 Skill에는 한 차례의 블라인드 리뷰가 포함되지만 Oil UI Pro는 9/10 품질을 목표로 최대 3회의 반복적인 블라인드 서브에이전트 비평을 실행하며 100%/200% 확대 체크리스트, 텍스트 마스킹 블록 검사, 클릭 수를 센 브라우저 점검을 함께 제공합니다.
npx github:oil-oil/oil-cli install oil-ui-pro자주 묻는 질문
Agent 환경에서 브라우저를 열거나 이미지를 검사할 수 없다면 어떻게 되나요?
Oil UI의 브리프 구성, 카테고리 안내, AI 상투성 방지 규칙은 코드 생성 중에도 도움이 되지만 실제 브라우저와 이미지 검사가 없으면 Agent가 렌더링된 픽셀을 보거나 블라인드 시각 리뷰를 실행할 수 없습니다. 최상의 결과를 위해 Oil UI를 Playwright나 로컬 브라우저 도구와 함께 사용하세요.
전체 페이지 스크린샷에 더해 200% 확대 크롭을 검사하는 이유는 무엇인가요?
전체 페이지 스크린샷은 밀도 높은 표와 폼 컨트롤을 축소해 1px 정렬 오류, 충돌하는 테두리, 흐릿한 보조 텍스트를 숨깁니다. 핵심 컨트롤을 200%로 크롭하면 미세 타이포그래피와 간격 오류가 분명하게 드러납니다.
리뷰 중에 텍스트를 흐리게 하거나 가리면 무엇이 드러나나요?
단어를 읽을 수 없으면 문구가 그럴듯하다는 이유로 약한 레이아웃을 용서하지 않게 됩니다. 흐린 블록 뷰는 주요 행동이 돋보이는지와 시각적 무게가 캔버스 전체에서 균형 잡혔는지를 즉시 드러냅니다.
일반적인 화면에는 블라인드 리뷰가 몇 차례 필요한가요?
한두 차례면 일상적인 화면의 대부분 간격, 대비, 상투성 문제를 찾을 수 있습니다. 대표 랜딩 페이지나 복잡한 워크스페이스는 Oil UI Pro의 세 차례 순환이 완성도를 눈에 띄게 더 끌어올립니다.