Oil UI

5 · 디자인 사례

폼 및 다단계 흐름 디자인: 결제, 가입, 예약

결제, 온볼링, 예약, 업로드의 전체 흐름을 따라가 보세요. 입력란이 깔끔하게 나엘되어 있는지만 확인하지 말고 필드 그룹, 단계 전환, 입력 검증, 실수 후 복구까지 살펴 보세요.

주목할 점

현실적인 입력으로 각 흐름을 끝까지 진행한 다음 필수 필드를 비워 두고 오류를 발생시켜 보세요. 레이블이 계속 보이는지, 필드별 안내가 제공되는지, 뒤로 가도 입력이 유지되는지, 완료 상태가 명확한지 확인하세요.

설치 및 사용 가이드 →

관련 가이드

시나리오 플레이북 · 모바일 앱 UI

모바일 앱 UI 플레이북

AI Agent가 데스크톱 웹페이지를 좁은 모바일 화면에 억지로 끼워 넣은 듯한 결과물을 만들지 않게 하세요. 나란히 배치한 screens.html 보드와 촉각적인 상태로 390×844 다중 화면 모바일 앱을 디자인하세요.

Agent 가이드 · Claude Code

Claude Code UI 디자인 가이드

Claude Code에 Oil UI Skill을 설치하고 명확한 브리프, 나란히 놓인 방향 비교 보드, 블라인드 스크린샷 리뷰로 웹사이트, 모바일 앱, UI 모듈을 디자인해 보세요.

디자인 방법 · 실제 화면 블라인드 리뷰

실제 화면 블라인드 리뷰

편집기에서 JSX와 CSS만 검사하면 레이아웃 버그를 놓치는 이유를 알아보세요. Oil UI가 1440px/390px 브라우저 스크린샷, 200% 크롭, 흐린 블록 검사, 블라인드 서브에이전트를 사용하는 방법을 소개합니다.