LudaRota
LudaRota는 Luda Log 내부에서 사용되는
archive 기반 프로젝트 탐색 및 기록 해석 시스템이다.
개요
LudaRota는 단순 프로젝트 목록 시스템이 아니라, 사용자가 직접 프로젝트 기록을 탐색하고[1]단순 기능 소개보다: 왜 이런 구조가 만들어졌는가, 어떤 문제를 겪었는가를 먼저 읽도록 설계하였다.개발자 박이나(이하 루다)가 선정한 각 프로젝트별 운영 기록과 구조적 이슈를 확인할 수 있도록 제작되었다.
특히 운영 경험과 구조적 고민을 하나의 타로카드 리딩처럼 보여주는 방향에 초점을 두었다.
제작 배경
LudaRota는 단순 프로젝트 카드 나열 방식의 포트폴리오에서 벗어나기 위해 기획되었다.
동시에:
사용자가 정말 이 기록을 클릭하게 만들 수 있는가
라는 고민에서 출발한 구조이기도 하다.
특히 운영 과정에서 발생했던:
- 구조 변경
- 판단 과정
- 포기한 기능
- 예상하지 못했던 문제
등을 단순 기능 소개가 아니라, 하나의 archive를 탐색하듯 읽게 만드는 것을 목표로 하였다.
기존 포트폴리오 구조의 한계
기존 깃허브 블로그 및 레파지토리 포트폴리오는 결과물 중심 구조에 치우쳐 있었으며[2]기능 구현 여부와 사용 기술 소개 중심으로 구성되는 경우가 많았다.기술 스택 중심 설명에 초점이 맞추어져있다.
반면 노션 기반 포트폴리오는 탐색 depth가 깊어지는 경향이 있었고[3]문서 링크 이동이 반복되며 피로도가 증가하는 문제가 존재하였다.문서 탐색 피로도가 발생하기도 하였다.
물론 학습에 의의를 둔 프로젝트에서는 해당 과정이 필수적이다.
하지만 실제 운영과정을 다룬 프로젝트에서는:
- 왜 해당 구조를 선택했는가
- 어떤 문제를 경험했는가
- 무엇을 포기하거나 변경했는가
등의 과정이 훨씬 중요하다고 판단하였다.[4]운영 과정 자체를 하나의 기록물처럼 읽게 만드는 방향을 우선시하였다.
인터랙션 구조 설계
Tarot 형태를 선택한 이유
루다의 니즈를 모두 충족하기 위해서는 계층형 스토리텔링이 가능해야하며, 그 스토리가 기승전결을 이루듯 서로의 계층을 추상화하여야했다.
또한 단순 카드 UI가 아니라, 각 프로젝트가 하나의 기록처럼 느껴지도록 만드는 방향을 목표로 하였다.
서브카드 시스템 도입
대부분의 카드들은 큰 시스템의 흐름으로 설계 가능하였으나, sse랭킹 시스템 및 캐시키 설계와 같은 부분은 실패와 선정 이유 모두 중요하였다.
특히:
- 점수기반 시스템과 레벨기반 시스템의 차이
- 상위권 랭커의 잦은 변경
- forbidden archive
- manuscript interaction
등의 상황은 도메인적 이해에 대한 문제였다. 따라서 해당 부분에 대해 설명을 하기 위해, 메인카드와 서브카드를 일부 아카이브에서는 별도로 나누어 디자인하였다.
기록 해석 중심 UX
기록을 단순 읽기보다:
- 카드 해석
- 미리보기 와 같은 연출을 통해 실제 운영 기록을 열람하는 분위기를 목표로 하였다.
또한 사용자가:
기술 스택
보다
왜 이런 구조가 만들어졌는가
를 먼저 읽도록 흐름을 설계하였다.
주요 구성 요소
Tarot Card Runtime
LudaRota의 핵심 구조는 각 프로젝트를 하나의 카드처럼 해석하는 방식에서 출발하였다.
단순 썸네일 리스트가 아니라, 사용자가 특정 기록을 “선택”하고 그 기록의 구조와 운영 경험을 해석하는 흐름을 목표로 하였다.
특히 카드 hover 및 선택 과정에서 프로젝트의 분위기와 runtime 특성을 먼저 전달하는 데에 집중하였다.
Archive Overlay System
카드를 선택하면 단순 modal이 아니라, archive 내부의 기록을 열람하는 형태의 overlay runtime이 실행된다.
특히:
- archive decoding
- runtime access
- forbidden layer
- manuscript overlay
등의 연출을 통해 단순 프로젝트 상세보기가 아니라, 운영 기록을 해석하는 흐름을 구성하였다.
또한 overlay 구조는 기존 페이지 이동 방식보다 현재 읽고 있는 archive 흐름을 유지하는 데에 초점을 맞추었다.
Subcard System
일부 프로젝트는 단순 카드 하나만으로 설명하기 어려운 구조적 이슈를 포함하고 있었다.
특히:
- SSE ranking
- cache invalidation
- delta payload
- runtime synchronization
등의 구조는 실패 사례와 선택 이유 모두 중요하였다.
따라서 특정 카드 내부에 별도의 subcard를 추가하여, 하나의 archive 내부에서 세부 이슈를 다시 탐색할 수 있도록 구성하였다.
이는 단순 “상세 보기”보다, 기록 내부의 또 다른 기록을 탐색하는 느낌을 목표로 한 구조이다.
루다 로타 입장 화면
루다로타의 입장 영역은 비밀의 금서와 기도초로부터 아이디어를 얻었다.
특히:
- 프로젝트 별 책 UI
- 사이드바
등을 중심으로 사용자가 편리하게 프로젝트를 돌아볼 수 있도록 하였다.