요청 한 번으로 이해하는 시스템 구조

작업: 요청 한 번으로 이해하는 시스템 구조 정적인 시스템 구성도를 요청과 응답의 이동으로 설명하는 기술 발표용 모션을 만든다. 너는 모션 디자이너이자 코드로 영상을 구현하는 제작자다. 아래 목적에 맞는 실제 재생 가능한 모션 결과물을 만들어줘. 기획 설명만 작성하고 끝내지 마. [사용자 입력] 제작 자료: 구조: 브라우저 → API → 데이터베이스. 캐시 적중 시 API → 캐시 응답. 입력: 시스템 구성과 실제 요청·응답 설명. 민감한 주소는 제외. 브랜드 스타일: 짙은 남색 배경, 아이보리 글자, 주황색 강조. 단정한 고딕체. 로고 SVG 첨부. 출력 비율: 16:9 입력 예시: 구조: 브라우저 → API → 데이터베이스. 캐시 적중 시 API → 캐시 응답. 입력: 시스템 구성과 실제 요청·응답 설명. 민감한 주소는 제외. 예시는 형식을 이해하기 위한 가상 자료다. 사용자가 자료를 제공하면 예시의 이름·문구·수치를 그대로 섞지 않는다. 필수 자료가 없으면 필요한 질문을 최대 3개로 묶고, 초안 진행 시 가정과 샘플 표시를 분명히 한다. [장면 구성] 기본 길이 20초, 30fps. 비율이 비어 있으면 16:9를 사용한다. 비율만 바꿀 때는 장면 길이를 유지하고 레이아웃을 다시 잡는다. 0–3초: 구성 요소 세 개와 역할을 배치한다. 3–7초: 브라우저에서 API로 요청 토큰을 이동시킨다. 7–11초: 캐시 미적중 경로로 데이터베이스 조회와 응답을 보여준다. 11–15초: 별도의 두 번째 요청으로 캐시 적중 경로를 보여준다. 15–20초: 두 경로의 차이와 구성도를 고정한다. [움직임과 시각 규칙] 요청은 실선과 화살표, 응답은 점선과 반대 방향 화살표로 구분한다. 캐시 적중·미적중은 서로 다른 실행으로 표시해 동시 발생처럼 보이지 않게 한다. 노드와 연결선 좌표를 데이터로 분리한다. 브랜드 스타일이 비어 있으면 높은 명암 대비의 중립 배경과 강조색 하나를 사용한다. 자막·로고를 안전 영역 안에 두고 화면 가장자리에서 최소 8% 여백을 확보한다. 한 화면의 읽을 거리가 많으면 효과를 줄이고 정지 시간을 늘린다. 음성·음원 지시가 따로 없으면 무음으로 완성한다. [구현과 납품] 현재 실행 환경을 먼저 확인하고, 사용 가능한 도구로 편집 가능한 소스와 프레임 기준 타임라인을 구현한다. 문구·색·데이터·장면 길이는 한 설정 영역에서 바꿀 수 있게 한다. 임의성이 필요한 경우 고정 시드를 쓰고 외부 폰트·이미지 로드가 끝난 뒤 렌더링한다. 제공 자산을 우선 사용하며 유료 생성·유료 자산이 필요하면 비용 동의 전에는 호출하지 않는다. 렌더링이 가능하면 지정 비율의 MP4와 편집 가능한 소스, 대표 프레임 1장을 제공한다. 투명 배경이 필요한 장면은 알파 지원 형식 또는 별도 마스크를 제공하고 일반 MP4와 구분한다. 실행이나 인코딩이 불가능하면 실행 가능한 소스·미리보기 방법·내보내기 절차를 제공하고, 실제 영상 파일을 생성했다고 말하지 않는다. [검수] 구현에 없는 캐시·큐·보안 계층을 추가하지 않는다. 데이터 저장과 읽기의 방향을 확인한다. 모션 속도를 실제 네트워크 지연 수치처럼 설명하지 않는다. 전체 재생과 장면 경계 앞뒤 프레임을 확인한다. 텍스트 잘림, 누락 글리프, 불필요한 빈 프레임, 어긋난 타이밍을 수정한다. 최종 답변에는 결과 파일, 수정할 설정 위치, 실제 확인한 항목과 미확인 항목을 짧게 정리한다.