Ludarota 기술 의사 결정
Ludarota는 단순 기능 기록이 아니라, 프로젝트의 의사결정 흐름과 실패 과정을 카드 리딩 형태로 풀어낸 아카이브 시스템이다.
입구 시스템의 도입
루다로타의 입구 시스템은 사용자가 프로젝트 기록을 읽기 이전, 현재 보고 있는 공간의 분위기가 자연스럽게 전환되도록 설계하였다.
특히:
사이드바 → 선반 위 도서 → 기도초
순으로 탐색 흐름이 이어지도록 구성하였다.
해당 구조는 모두 단순 정보 분류보다, 현재 사용자가 어떤 기록에 접근하고 있는지를 직관적으로 전달하는 데에 초점을 두었다.
도서 형태의 프로젝트 아카이브
초기 구조에서는 프로젝트를 단순 카드 단위로 분류하였다.
하지만 JumpingBattle과 같이 프로젝트 내부의 구조 변화와 운영 기록이 지속적으로 증가하는 경우, 하나의 시리즈 기록처럼 보이도록 구조를 변경하였다.
이를 통해:
- 프로젝트 흐름
- 구조 변화
- 운영 기록
등을 하나의 기록물처럼 탐색할 수 있도록 구성하였다.
기도초 형태의 카드 선택
사용자가 단순 버튼을 클릭하는 것이 아니라, 프로젝트 기록을 열람하기 이전의 분위기 전환을 느낄 수 있도록 기도초 형태의 선택 구조를 도입하였다.
[1]해당 구조 이전에는:
- 신전 형태의 입구
- 전체 카드 노출 방식
등 역시 시도되었으나, 현재 구조가 가장 탐색 흐름 유지에 적합하다고 판단하였다.
카드 리딩 인터랙션
LudaRota의 핵심 목표는 프로젝트를 단순 카드 목록이 아니라, “해석 가능한 기록”처럼 느끼게 만드는 것이었다.
특히:
- 카드 포커싱
- 미세한 움직임
- 카드별 서사 구조
등을 통해 사용자가 프로젝트를 읽는 것이 아니라, 하나의 기록을 해석하는 흐름을 목표로 하였다.
또한 프로젝트별 분위기와 구조적 특징을 카드 단계에서 먼저 전달할 수 있도록 설계하였다.
카드 확장 및 기록 분리 구조
일부 프로젝트는 단순 카드 하나만으로 설명하기 어려운 구조적 이슈를 포함하고 있었다.
특히:
- SSE 시스템 도입 과정
- CacheKey 설계 및 실패 경험
- 부분 갱신 구조
- 상태 동기화 문제
등은 실패 과정과 구조 선택 이유 모두 중요하였다.
따라서 특정 기록 내부에 세부 구조를 단계적으로 열람할 수 있는 흐름을 추가하였다.
서브 카드 시스템 도입
서브 카드 시스템은 하나의 프로젝트 내부에서 세부 구조와 실패 사례를 다시 탐색할 수 있도록 만들기 위해 도입되었다.
이는 단순 상세보기보다, “기록 내부의 또 다른 기록”을 탐색하는 구조를 목표로 하였다.
특히:
- 랭킹 구조 변경
- 캐시 무효화
- 부분 갱신
- 상태 관리
등의 기록은 별도의 서브 카드로 분리하여 설명하였다.
p5.js 기반 배경 연출
LudaRota의 배경 효과는 단순 시각 효과보다, 기록 공간의 분위기와 정적인 공간감을 강화하는 데에 초점을 두었다.
특히:
- 먼지 입자 효과
- 마우스 반응 효과
- 배경 움직임
- 카드 주변 연출
등을 통해 사용자의 입력에 따라 공간이 반응하는 느낌을 구성하였다.
또한 단순 CSS 애니메이션보다, 보다 자연스러운 움직임을 구현하기 위하여 p5.js 기반 구조를 일부 도입하였다.
테마 기반 카드 구성
테마 구조는 단순 색상 변경이 아니라, 기록별 분위기와 탐색 흐름 자체를 구분하기 위한 구조였다.
특히:
- 금서 형태의 기록
- 카드 열람 화면
등을 중심으로, 각 기록이 서로 다른 분위기를 가지도록 설계하였다.
또한 동일한 아카이브 내부에서도, 기록의 성격에 따라 서로 다른 탐색 경험을 제공할 수 있도록 구성하였다.
탐색 피로도를 줄이기 위한 설계
기존 위키 기반 구조에서는 문서 깊이가 깊어질수록 사용자의 탐색 피로도 역시 증가하는 문제가 존재하였다.
LudaRota에서는:
- 카드 중심 탐색
- 현재 흐름 유지
- 단계별 기록 열람
- 프로젝트별 분위기 분리
등을 통해 사용자가 현재 읽고 있는 흐름이 끊기지 않도록 설계하였다.
특히 단순 링크 이동보다, 현재 보고 있는 기록 안에서 계속 탐색이 이어지는 감각을 유지하는 데에 집중하였다.
각주
해당 구조 이전에는:
- 신전 형태의 입구
- 전체 카드 노출 방식
등 역시 시도되었으나, 현재 구조가 가장 탐색 흐름 유지에 적합하다고 판단하였다.