최애의 관리자 — 스토리 뷰어부터 플래너까지, 주요 기능 개발기

최애의 관리자

좋아하는 게임의 데이터를 한곳에 모으고 싶다는 단순한 동기에서 시작한 최애의 관리자가 어느새 12개 이상의 기능을 갖춘 풀스택 웹 애플리케이션이 되었다. 이 글에서는 1편(성능·SEO·접근성 리팩토링) 이후 새로 추가된 주요 기능들과, 각 기능을 구현하며 내린 기술적 결정들을 정리한다.

“

🔗 사이트: saigo-no-dante.com

기술 스택 한눈에 보기

1. 스토리 뷰어 — 게임 시나리오를 웹에서 읽다

게임 내 메인 스토리(프롤로그~2장)를 웹에서 읽을 수 있는 스토리 뷰어를 구현했다.

핵심 구현

• CG 뷰어: 스크롤 기반으로 CG가 전환되며, 하위 레이어는 brightness 필터로 어둡게 처리해 시각적 깊이감을 부여했다. 처음에는 opacity를 사용했으나 배경이 비쳐 보이는 문제로 방식을 변경했다.
• 대사 파싱: 게임 클라이언트 JSON에서 추출한 대사 데이터를 파싱하고, 연속된 같은 화자의 이름표 중복을 제거했다.
• 장소 디바이더: CG 구간 전환 시 장소명 디바이더를 인터리브 방식으로 삽입해 맥락 흐름을 유지했다.

기술적 도전

역방향 스크롤(위로 스크롤) 시 CG 전환이 올바르게 동작하지 않는 버그가 가장 까다로웠다. IntersectionObserver의 isIntersecting 방향을 감지하는 로직을 전면 리팩터링하여 해결했다.

2. 수감자 DB — 카드 UI로 보는 인격 목록

12인 수감자 각각의 인격(Identity)과 EGO를 카드 형태로 브라우징할 수 있다.

핵심 구현

• 게임 UI 스타일 스킬 프레임: 실제 게임과 유사한 프레임 디자인을 CSS로 재현했다. 등급(1~3성)에 따라 프레임 색상이 달라진다.
• 이미지 기반 필터: 죄악(Sin) 속성을 아이콘 버튼으로 필터링할 수 있어 텍스트보다 직관적이다.
• 인격 이름 검색 + OR/AND 연산자: 검색창에 +(OR) 또는 ,(AND) 연산자를 사용해 복합 검색을 지원한다.

3. 거울 던전 — EGO 기프트 도감 & 테마팩

416개 EGO 기프트, 103개 테마팩, 327개 이벤트를 탐색할 수 있는 종합 도감이다.

핵심 구현

• 다중 필터 시스템: 죄악 속성, 등급, 난이도, 편성 전용 여부를 조합해 필터링한다. 키워드 아이콘은 Supabase Storage에서 동적 로드된다.
• 테마팩 UI: 380×690 이미지 카드 + 보스 오버레이(391×432) 구성. 난이도(노말/하드/익스트림)에 따라 층 정보가 JSONB 필드에서 파싱된다.
• 기프트 모달: 기프트 선택 시 상세 설명, 소속 테마팩, 키워드 효과를 모달에서 확인할 수 있다.

4. 거울 던전 플래너 — 전략 시뮬레이터

거울 던전 공략을 위한 편성 시뮬레이터. 층별 테마팩 선택, 인격·EGO 배치, 키워드 분포 분석까지 지원한다.

핵심 구현

• 난이도별 층 구조: 노말(5층), 하드(5층), 평행중첩(10층), 익스트림(15층) 모드를 지원하며, 각 층마다 테마팩과 기프트를 배치할 수 있다.
• 키워드 분포 시각화: 선택된 인격들의 키워드를 집계해 어떤 키워드가 강한지/약한지를 한눈에 보여준다.
• EGO 죄악 자원 계산: 편성된 인격의 스킬 죄악 속성으로부터 EGO 사용 가능 자원을 자동 계산한다.
• 커뮤니티 공유: URL 복사 또는 업로드를 통해 다른 유저와 공략 편성을 공유할 수 있다.

5. 덱 게시판 — 커뮤니티 편성 공유

유저들이 자신의 편성(덱)을 등록하고, 키워드·인격 기반으로 탐색하는 커뮤니티 공간이다.

핵심 구현

• 덱 카드 디자인: 편성된 인격 5명의 프로필 이미지를 합성해 썸네일로 사용한다. 주요 키워드는 배지로 표시된다.
• OR/AND 복합 검색: 인격 이름, 키워드, 제목을 조합해 검색할 수 있다.
• 댓글 & 대댓글: parent_id 기반 스레드 구조로, @멘션 기능과 삭제 시 ON DELETE CASCADE를 적용했다.
• 좋아요 & 조회수: RPC 함수(increment_vote / decrement_vote)로 원자적 투표를 처리한다.

6. 홈 히어로 & 마이페이지 리디자인

홈 히어로

메인 페이지 상단은 랜덤 인격 이미지를 배경으로 사용하는 풀스크린 히어로 섹션이다. 하단에는 최신 유튜브 영상, 최근 추가 인격, 주요 기능 카드 4종을 배치했다.

마이페이지

4탭 구조(프로필 / 내 덱 / 내 플랜 / 활동 통계)로 리디자인했다. 플래너에서 저장한 공략과 덱 게시판 활동을 한곳에서 관리할 수 있다.

7. 인프라 & 품질

단순히 기능만 추가한 것이 아니라, 서비스 품질에도 신경 썼다.

• SEO: 사이트맵 보강, JSON-LD 스키마(WebSite, Organization, FAQ 리치 결과), 동적 OG 이미지 생성
• PWA: manifest.ts + Service Worker로 홈 화면 추가 및 오프라인 캐싱 지원
• 접근성: SkipNav, ARIA 랜드마크, 키보드 내비게이션
• 보안: HSTS 헤더, 봇 차단, admin 경로 보호, rate limiting
• E2E 테스트: Playwright로 35개 테스트(정적 페이지, 내비게이션, 접근성, SEO, 반응형, 콘텐츠, 에러)

데이터 파이프라인

게임 데이터는 두 가지 소스에서 수집한다:

1. 게임 클라이언트 JSON: 인격, EGO, 스킬 수치 데이터를 JSON에서 파싱해 Supabase에 시드
2. 나무위키 스크래핑: Playwright를 활용해 키워드 설명, 기프트 획득 정보 등 게임 JSON에 없는 텍스트 데이터를 수집

모든 시드 스크립트는 node --env-file=.env.local scripts/{name}.mjs 형태로 실행되며, 멱등성을 보장하도록 upsert를 사용한다.

배운 점

• rem 기반 반응형: 글자 크기 조절 컨트롤(FloatingFontControl)을 넣으면서 모든 사이즈를 rem으로 통일했다. px로 작성된 기존 코드를 모두 마이그레이션하는 과정에서 CSS 단위 체계에 대한 이해가 깊어졌다.
• 게임 데이터 파싱의 어려움: Unity 마크업 태그, 비정규 JSON, 한국어 조사 처리 등 예상치 못한 엣지 케이스가 많았다. 특히 키워드 뒤에 붙는 한국어 조사(은/는/이/가)를 인식하는 파서를 만드는 것이 재미있었다.
• Server Components 활용: Next.js 16의 Server Components를 기본으로 사용하고, 'use client'는 꼭 필요한 인터랙티브 컴포넌트에만 적용하는 패턴이 자연스러워졌다.

다음 계획

• 거울 던전 이벤트 탭 완성 (나무위키 스크래핑 연동)
• 인격 상세 페이지에서 스킬 설명 파싱 고도화
• 모바일 UX 지속 개선

“

프로젝트 전체 코드는 비공개이지만, 기술적 질문은 언제든 환영합니다.