AI 분석
다크 모드 강의 사이트에 애니메이션 재생을 되감고 프레임 단위로 훑는 디버그 툴바가 겹쳐진 화면이다.
왼쪽 사이드바 목차와 오른쪽 본문으로 나뉜 2단 문서 레이아웃이며, 브라우저 크롬을 그대로 살린 목업 안에 담겨 있다. 거의 검정에 가까운 배경과 회색 계조 위에 흰 산세리프 본문이 놓이고, 파란 New 배지와 빨간 액션 버튼만 강조색으로 쓰인다. 데모 카드는 밝은 흰 캔버스로 반전되어 이미지 타일이 쓰레기통으로 던져지는 인터랙션을 보여주고, 화면 하단에는 되감기·일시정지·키프레임 마커가 찍힌 타임라인 스크러버가 떠 있는 알약형 툴바로 붙어 있다. 마커를 잡아 끌면 밀리초 값이 뜨면서 데모가 그 시점으로 이동해 모션을 해부할 수 있다. 모션 자체를 콘텐츠로 다루는 교육 제품과 애니메이션 디버깅 도구 UI의 참고로 유용하다.
dark-mode · minimal · techy · high-contrast
claude-opus-5 · 2026-09-08 00:31 · 신뢰도 0.78
