Oil UI

7 · 디자인 사례

미디어 UI 디자인: 동영상 검토, 편집, 음악 재생

동영상 검토, 타임라인 편집, 스토리보드, TV 스트리밍, 팟캐스트, 음악 플레이어를 살펴 보세요. 이미지, 재생 컨트롤, 댓글, 대기열이 제한된 공간을 어떻게 나눠 쓰는지 비교해 보세요.

주목할 점

재생하고 재생 위치를 조정하며 버전을 전환하는 동안에도 콘텐츠가 주인공이어야 합니다. 타임코드, 댓글, 화면 표시가 정렬되어 있는지, 컨트롤 밀도가 맥락에 맞는지, 좁은 화면에서도 재생과 피드백을 모두 유지하는지 확인하세요.

설치 및 사용 가이드 →

관련 가이드

시나리오 플레이북 · 대시보드와 워크스페이스

대시보드 및 워크스페이스 플레이북

“KPI 카드 네 개와 차트 세 개”라는 AI 대시보드 상투성에서 벗어나세요. 명확한 위계와 연결된 상태를 갖춘 객체 중심 콘솔과 데스크톱 워크스페이스를 만드는 방법을 알아보세요.

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

모바일 앱 UI 플레이북

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

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

실제 화면 블라인드 리뷰

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