[개발일지] 퍼블리싱 사이트 캡처 · 댓글 답글 기능 · 게시판 정렬/표기 개선

퍼블리싱 관리에 실제 스크린샷 캡처 기능을 붙이고, 댓글에 답글을 달 수 있게 하고, 게시판 정렬·표기 기능과 오래된 버그 몇 개를 정리한 기간입니다.

퍼블리싱 사이트 이미지 캡처

퍼블리싱 작업물 카드의 썸네일이 og:image 스크래핑 방식이라 사이트마다 품질이 들쭉날쭉했습니다. Puppeteer로 실제 페이지를 직접 스크린샷 찍어서 Cloudinary에 올리는 방식으로 바꿨습니다. 자동 캡처는 하지 않습니다 — 인스타그램 계정 블락 이력이 있어서 뭐든 자동으로 올라가는 걸 극도로 경계하는 편이라, 관리자 페이지에 캡처/삭제 버튼을 따로 두고 사람이 직접 눌러야만 동작하게 만들었습니다. 재캡처하면 이전 Cloudinary 이미지도 같이 정리됩니다. 처음엔 히어로 영역만 딱 잘렸는데, 그 밑에 내용이 더 있다는 걸 보여주는 게 나아서 뷰포트 비율과 크롭 기준을 다시 잡았습니다.

썸네일을 어디서 가져올지 정하는 로직(수동 지정 → 캡처 이미지 → 기본 플레이스홀더)이 페이지 3곳에 따로 복사돼 있던 걸 publishing-posts.ts 하나로 합쳤습니다. 퍼블리싱 게시판만이 아니라 사이트 전역에서 퍼블리싱 카드가 나오는 모든 곳이 이제 같은 로직을 씁니다.

댓글 — 답글 기능, 관리자 간편 작성

댓글에 답글을 달 수 있게 했습니다. 답글의 답글도 계속 이어질 수 있지만, 화면에는 항상 한 단계만 들여쓰기 되도록 평평하게 모아서 보여줍니다 — DB의 parentId는 실제 부모를 그대로 가리키지만, 어느 깊이든 "댓글 → 답글" 두 단만 시각적으로 존재하는 구조입니다. 삭제 시에는 답글의 답글까지 재귀적으로 같이 지워지도록 처리했습니다.

관리자로 로그인한 상태에서는 이름·비밀번호 없이 내용만 입력하면 되고, 작성된 댓글에는 사이드바 유튜브 위젯과 같은 소스에서 가져온 채널 프로필 아이콘과 "Studio NFP"라는 이름이 붙습니다. 지금은 관리자 계정이 하나뿐이지만, 나중에 계정이 늘어도 표시 이름은 세션에 저장된 값을 그대로 따라가도록 짜서 코드를 다시 손댈 필요가 없게 해뒀습니다. 댓글 글자수 제한도 300자에서 500자로 올렸습니다.

게시판 정렬 · 조회수/댓글수 표기

목록형 게시판에 조회수·작성일자 기준 정렬과 오름차순/내림차순 토글을 추가했습니다. 정렬 기준 버튼과 방향 버튼을 시각적으로 분리해서, 기준을 바꾸는 것과 방향을 뒤집는 것이 서로 다른 동작이라는 게 한눈에 보이게 만들었습니다.

목록의 각 게시글에는 조회수·댓글수를 "(N)" 형태로 붙였습니다. 조회수 아이콘은 회색, 숫자는 흰색이고 댓글은 아이콘 회색에 숫자만 섹션 강조색으로 구분했습니다. 모바일 화면에서는 이 표기가 하단 날짜 옆이 아니라 2차 카테고리 배지 바로 옆으로 오도록 별도 처리했습니다 — 좁은 화면에서 한눈에 들어오는 정보 우선순위를 바꾼 겁니다.

게시글 본문 코드블럭 폰트

백틱으로 감싼 텍스트가 본문 폰트가 아니라 브라우저 기본 모노스페이스로 나오고, 그마저도 줄 높이가 맞지 않아 눈에 띄게 튀어 보이는 문제가 있었습니다. 원인은 두 가지가 겹쳐 있었는데, 하나는 리셋 스타일이 code/pre 태그에 직접 모노스페이스 폰트를 박아둔 것이었고, 다른 하나는 인라인 code 요소의 배경·테두리 박스 크기가 CSS line-height가 아니라 폰트 자체의 자간 메트릭으로 그려지는 브라우저 특성 때문이었습니다. display: inline-block으로 바꿔서 line-height가 실제로 박스 크기에 반영되게 하고, 글자 크기도 본문과 동일하게 맞춰서 코드 블럭이 특별한 텍스트가 아니라 그냥 강조된 본문처럼 자연스럽게 섞이도록 정리했습니다.

디지몬 슈퍼럼블 포텐셜 시뮬레이터

누적 능력치 섹션이 스탯 기본값이 0일 때는 그냥 "0"만 보여줘서, 블럭을 배치해도 몇 %가 붙었는지 알 수 없는 문제가 있었습니다. 총합과 별개로 퍼센트를 항상 괄호로 같이 표기하도록 고쳤습니다. 능력치 입력 섹션에서 포텐셜 필드만 다른 입력칸보다 미묘하게 높이가 달랐던 것도 정리했고, 임의생성이 누르는 족족 이전 조각을 지우고 하나로 교체되던 것도 계속 쌓이도록 바꿔서 여러 개를 한 번에 만들 수 있게 했습니다.

그 외

카드 첫 로드 시 테두리가 깨졌다가 새로고침하면 정상으로 돌아오던 버그는 React가 인라인 스타일의 shorthand(border)와 longhand(borderBottom)를 섞어 쓸 때 클라이언트 재렌더링에서 값을 지워버리는 문제였습니다. 전부 명시적인 borderTop/Right/Bottom/Left로 바꿔서 해결했습니다. 모바일에서 관리자 전용 플로팅 버튼(관리자 표시·댓글 알림)이 방문자용 네비게이션과 겹치던 것도 좌측으로 옮기고, 같은 자리에 있던 테마 토글 버튼과도 안 겹치게 위치를 다시 잡았습니다. 네이버 검색어 트래킹 패널은 브라우저 리퍼러 정책상 구조적으로 동작할 수 없다는 걸 확인하고, 이미 검증된 GA4 데이터를 활용해 "네이버 유입 상위 페이지"로 대체했습니다.