발전하기
주요 기능 및 요구 사항 도출하기
데이터 조회
하나의 페이지가 하나의 데이터셋을 담당한다. 모든 페이지에 요청에 대해 서버 측에서 데이터 패치 및 캐싱을 진행하여 클라이언트로 전달하며, 클라이언트는 URL 경로와 쿼리 파라미터를 바탕으로 서버에 데이터를 요청한다. 결과적으로 같은 URL에 대해 같은 콘텐츠를 확인할 수 있고, 빠른 응답을 기대할 수 있다. (단, 빠른 응답은 캐시 미스 혹은 콜드 스타트 상황 제외)
사전 설정(Preset) 데이터
조회 주제별로 누적 평균 데이터셋들을 선별하여 서버 빌드시 미리 패치 및 렌더링해두고, 클라이언트가 요청 시 바로 내려줄 수 있도록 프리셋 기능을 제공한다.
사용자 지정 설정(Custom) 데이터
사용자가 직접 조회 주제와 범위를 서식으로 제출하면 해당하는 데이터셋(페이지)을 내려줄 수 있도록 기능을 제공한다. 클라이언트에서는 사용자가 선택(입력)한 값에 동적으로 입력 가능한 값을 필드에 출력할 수 있도록 한다.
실시간(Realtime) 데이터
서울의 실시간 미세먼지 데이터를 요청하고, 이를 통계 데이터와 호환되는 필드 포맷으로 대치하여 데이터셋 컴포넌트에 주입한다.
데이터 출력
화면의 핵심 구성 요소는 페이지(라우트), 데이터셋, 시퀀스, 씬, 비트로 구성되며, 각자의 컨텍스트와 역할을 명확히 가지도록 한다. 구조는 페이지(라우트)를 루트 노드가 되며 데이터셋, 시퀀스, 씬, 비트 순으로 컴포넌트 트리 구조가 이루어지도록 한다. 만약 이들 노드 간 상호 작용을 담당하는 상태가 필요하다면 부모 노드에서 담당하여 단방향의 라이프사이클이 이루어질 수 있도록 한다.
시퀀스(Sequence)
시퀀스는 일련의 씬으로 구성되며, 서버로부터 응답된 데이터셋을 씬(UI)에 필요한 형식으로 변환하여 각 씬에 주입한다.
한 개의 씬 혹은 여러 씬을 모바일/태블릿/PC별 레이아웃에 따라 배치한다.
특정 씬이 다른 씬과 상호 작용을 할 수 있도록 하는데 필요한 상태를 관리한다.
씬(Scene)
씬은 일련의 비트로서 하나의 타임에 해당하는 데이터를 가지며, 이를 2진수로 변환하여 각 비트 컴포넌트에 매핑한다.
그래픽 출력은 먼지 입자가 흩어진 상황에서 시작해 모여드는 애니메이션을 통해 먼지가 쌓이는 모습을 보여주고, 각종 필터를 적용해 먼지의 형태가 연상되게 한다.
사운드 출력 시 비트 앞자리부터 차례로 진행한다.
현재 재생 중인 씬을 활성화(Active) 상태로 정의하며, 재생 중이지 않은 씬들은 비활성화(Inactive) 상태로 정의한다.
현재 활성화된 시퀀스의 씬만 재생할 수 있으며, 그 중 임의의 씬을 선택해서 재생할 수 있다. 만약 다른 씬이 재생 중이라면, 즉시 해당 재생을 멈추고 새로 선택된 씬을 재생한다.
비트(Bit)
비트(컴포넌트)는 주입된 1 비트 값을 그래픽과 사운드로 변환한다.
비트 값이 1이라면 그래픽이 굵거나 길게, 비트 값이 0이라면 얇거나 짧은 그래픽으로 표현하며, 각 그래픽을 비트 순서에 맞게 일렬로 나열한다.
비트 값이 1이라면 드럼 Kick 사운드를, 비트 값이 0이라면 드럼 Clap 사운드를 출력한다.
기타
접속 기기(모바일, 태블릿, PC)에 구애받지 않고 최대한 같은 사용자 경험을 제공하기 위해 완전 반응형으로 화면 개발을 진행한다. 단, 데이터 시각화는 기기간 스크린 크기 차이 때문에 동일한 사용자 경험이 어려우므로, 모바일 기기에서는 간략화된 UI로 변경한다.
Last updated