[개발일지] 주요작업물 애니메이션 수정 · 게임즈 카테고리 뱃지 버그 수정

인덱스 페이지 작업과 게임즈 게시판 버그를 잡은 날입니다.

주요작업물 섹션 — 라인 애니메이션 개선

인덱스 페이지 주요작업물 섹션 제목 양옆에 빛이 흐르는 데코 라인이 있는데,
루프될 때마다 뚝뚝 끊기는 문제가 있었습니다.

원인은 background-position 을 움직이는 방식에 ease-in-out 타이밍 함수를 썼던 것입니다.
ease-in-out 은 사이클 끝에서 속도가 0으로 떨어지는데,
루프 경계에서 다음 사이클이 시작될 때 그 멈추는 느낌이 눈에 보였던 겁니다.

방식 자체를 바꿨습니다.
라인에 ::after 슈도 요소를 만들고 translateX 로 통과시키는 방식입니다.
시작과 끝 위치를 모두 overflow: hidden 바깥으로 잡으면
루프 이음새 자체가 보이지 않습니다.

transform 은 GPU 가속이 적용돼서 성능도 더 낫습니다.

좌우 싱크 맞추기

애니메이션을 바꾸고 나서 좌우 라인의 빛이 동시에 나타나지 않고
왼쪽이 먼저 들어오고 오른쪽이 나중에 들어오는 시간차가 생겼습니다.

오른쪽 라인은 왼쪽 라인의 animation-direction: reverse 로 처리했는데,
이렇게 하면 브라우저가 같은 애니메이션 클럭을 공유합니다.

문제는 끝점이었습니다.
왼쪽이 translateX(-100%) 에서 translateX(300%) 로 이동하는데
오른쪽은 역재생이라 300% 에서 출발해서 -100% 로 가게 됩니다.

슈도 요소 너비가 부모의 50%이기 때문에,
왼쪽은 부모 왼쪽 경계에 붙어서 출발하지만
오른쪽의 300% 는 부모 오른쪽 경계에서 한참 더 나간 위치입니다.
그래서 오른쪽이 가시 영역에 늦게 진입했던 거였습니다.

끝점을 300% 에서 200% 로 줄였습니다.
200% 는 슈도 요소의 왼쪽 끝이 부모 오른쪽 경계에 딱 붙는 위치로,
-100% 와 완전히 대칭입니다.
이렇게 하니 양쪽이 가시 영역에 동시에 진입하게 됐습니다.

게임즈 게시판 — 카테고리 뱃지 버그 수정

/games/black-desert 같은 게임별 전체 게시판에서
각 글의 카테고리 뱃지가 리뷰, 공략 같은 2차 카테고리가 아니라
게임 이름(1차 카테고리)으로 표기되는 버그가 있었습니다.

/games/black-desert/review 처럼 2차 카테고리를 직접 들어가면 정상적으로 나왔고
전체 게시판에서만 잘못 나오는 상황이었습니다.

원인은 PostListLayout 의 getLabel 함수에서 games 섹션일 때
subcategoryLabelMap 을 참조하지 않는 분기가 들어있었던 것입니다.
2차 카테고리 라벨 맵이 전달은 되고 있었는데 사용을 안 하고 있었던 거였습니다.

categoryLabel 이 명시된 경우에만 subcategoryLabelMap 을 먼저 참조하도록 조건을 수정했습니다.

덕분에 세 가지 케이스가 모두 의도대로 동작합니다.

/games 전체 게시판 → 게임 이름(1차) 표시
/games/black-desert 게임별 전체 → 리뷰 · 공략 등(2차) 표시
/games/black-desert/review 2차 게시판 → 2차 카테고리명 표시