최애의 관리자 — Next.js 16 전환, 모션 안정화, 키워드 메타 소스 수정

최애의 관리자

5월 말 커밋을 보면 거의 전부 fix다. 새 기능을 크게 추가한 건 아닌데, 실제로는 꽤 중요한 구간이었다.

Next.js 16 전환 이후 로딩과 이미지 쪽을 다시 보고, 홈 히어로 글리치 모션을 안정화하고, 마지막에는 keyword_meta가 잘못된 원본 설명을 고르는 문제를 고쳤다. 눈에 잘 띄는 기능보다, 화면이 튀지 않게 하고 데이터가 틀리지 않게 하는 작업이었다.

Next.js 16 이후 로딩과 이미지

5월 27일쯤에는 Next.js 16 관련 최적화가 들어갔다.

버전을 올리는 건 한 줄처럼 보이지만, 이미지와 loading boundary가 많은 사이트에서는 후속 작업이 따라온다. 최애의 관리자는 카드 이미지, 인격 일러스트, 테마팩 이미지가 많다. 그래서 작은 이미지 설정 변화도 체감에 영향을 준다.

이때는 로딩 화면도 다시 봤다. 데이터가 늦게 올 때 그냥 빈 화면을 보여주는 것보다, 실제 페이지 구조와 비슷한 skeleton이 있는 편이 낫다. 사용자는 로딩을 싫어하지만, 더 싫어하는 건 “뭐가 로딩 중인지 모르겠는 상태”다.

플래너 상세 모달은 통일성이 문제였다

플래너 안에서 인격을 눌렀을 때 나오는 모달도 고쳤다.

같은 인격인데 수감자 DB에서 보는 화면과 플래너에서 보는 화면이 다르면 이상하다. 스킬 프레임, 키워드, 상세 정보의 규칙이 다르면 사용자는 어느 쪽이 최신인지 헷갈린다.

그래서 플래너 상세 인격 모달을 기존 상세 흐름과 더 맞췄다. 이건 큰 기능처럼 보이지 않지만, 도구 화면에서는 통일성이 중요하다. 한 화면에서 배운 사용법이 다른 화면에서도 그대로 통해야 한다.

히어로 글리치는 한 프레임만 튀어도 티가 난다

5월 28일에는 홈 히어로 글리치 전환을 계속 고쳤다.

랜덤 인격 이미지가 바뀌고, 글리치 효과가 들어가고, Ken Burns처럼 살짝 움직이는 연출이 붙어 있다. 이게 잘 돌아갈 때는 그냥 멋있다. 그런데 타이밍이 어긋나면 배경이 잠깐 노출되거나, 이미지가 스냅되거나, 전환이 끊긴 것처럼 보인다.

그래서 이 구간의 모션 수정은 “더 화려하게”가 아니었다. 이미 만든 연출이 깨져 보이지 않게 만드는 쪽이었다.

• 글리치 전환 타이밍 동기화
• 배경 노출 방지
• Ken Burns 스냅 방지
• 빈 요소에 모션이 걸리는 오류 수정

모션은 참 얄밉다. 잘 되면 아무도 신경 안 쓰는데, 한 프레임만 튀면 바로 싸구려처럼 보인다.

keyword_meta가 잘못된 원본을 고른 문제

6월 1일에는 identity keyword meta source selection을 고쳤다. 이번 구간에서 제일 중요한 데이터 수정이었다.

문제는 같은 한국어 이름을 가진 효과가 여러 개 있을 때 생겼다. 예를 들어 생체 재료, 조망, 아이언 메이든, 원호 방어, 대행 [헤르메스] 같은 키워드는 플레이어블 인격 쪽에도 있고, 적이나 원본 효과 쪽에도 비슷한 이름으로 존재한다.

기존 rebuild 로직은 한국어 이름을 너무 빨리 기준으로 삼았다. 그러면 Ring Hong Lu나 Ring Faust, Index Yi Sang 같은 플레이어블 인격이 참조해야 할 설명 대신 적 전용 효과 설명이 들어갈 수 있었다.

수정은 이름이 아니라 source tag를 따라가도록 바꾸는 것이었다.

• 플레이어블 인격 JSON/KR 텍스트에서 실제 참조한 tag를 수집한다.
• 같은 이름 후보가 여러 개면 그 source tag와 맞는 row를 고른다.
• EN/JP 설명도 같은 tag 기준으로 가져온다.
• 아이콘도 base와 -2 variant가 있으면 source-backed 쪽을 선택한다.

이건 사용자 입장에서 보면 “키워드 설명이 맞게 나온다” 정도지만, 안쪽에서는 데이터 출처를 잃지 않도록 고치는 일이다.

테스트를 붙인 이유

이 버그는 한 번 고쳤다고 끝나는 종류가 아니다. 게임 데이터가 업데이트되면 같은 이름의 새 효과가 또 나올 수 있다. 그래서 identity-data.test.ts에 회귀 테스트를 추가했다.

테스트는 단순히 함수가 돌아가는지 보는 게 아니라, 실제로 문제를 일으킨 패턴을 고정한다.

• enemy tag보다 playable identity tag를 우선하는지
• 같은 이름 후보에서 source tag를 따라가는지
• 기존 icon slug를 무조건 붙잡지 않는지
• -2 Storage asset이 있는 variant를 제대로 고르는지

이런 테스트가 있어야 다음 sync 때 같은 문제가 다시 들어와도 바로 잡힌다.

이번 구간의 느낌

5월 말~6월 1일 작업은 새 기능 추가보다 품질 보정에 가깝다.

로딩 화면이 덜 어색하고, 홈 히어로가 덜 튀고, 플래너 모달이 더 일관되고, 키워드 설명이 원본에 맞게 나온다. 각각은 작아 보이지만, 이런 것들이 쌓여야 데이터 사이트가 믿을 만해진다.

커밋으로는 53ee7d0, ce28f04, fc9ca1e, 6ff8dd1, 7b77cd7, 60a049f, 8861b97 근처의 작업들이다.