작업 방식
css-animation은 실제 애플리케이션 기능을 브라우저에서 보여 주는 시연을 만듭니다. 먼저 앱의 시각 언어와 레이아웃을 조사한 뒤, 동작 전·동작·동작 후를 보여 주는 시연 또는 여러 화면의 캐러셀을 계획합니다. 결과물은 브리프가 함께 제공되는 독립 실행형 HTML/CSS 애니메이션입니다.
검토 과정에서는 정지 상태의 정확성과 타이밍을 분리합니다. 동작 전후 레이아웃을 정지시켜 확인한 다음 전체 루프를 재생하며 속도감을 조정합니다. 데스크톱과 모바일은 별도 구성으로 만들며, 모바일에서는 장면을 단순화하고 커서 대신 탭 표시를 사용합니다.
예상 산출물
- 디자인 토큰, 기하학적 배치, 장면 타이밍을 기록한 구조화된 브리프.
- 독립 실행형 HTML 기능 시연 또는 화면 캐러셀.
- 두 환경을 모두 요청한 경우 별도로 제공되는 데스크톱 및 모바일 파일.
브리프에서 검토까지
- 01실제 인터페이스 조사
접근 가능한 앱과 관련 상태를 살펴봅니다. 목표 뷰포트에서 색상, 타이포그래피, 간격과 실제 배치 치수를 기록합니다.
- 02시연 계획 및 제작
하나의 기능 변화 또는 여러 화면의 캐러셀을 선택합니다. 브리프를 작성하고 요소 위치를 계산한 뒤, CSS와 간단한 클래스 기반 루프 제어를 사용합니다.
- 03정지 화면 확인 후 타이밍 조정
중요한 상태를 정지시켜 레이아웃과 레이블을 확인합니다. 문제가 없으면 전체 루프를 재생하고 너무 빠르거나 느린 구간을 구체적으로 조정합니다.