워터마크 하나 고치는데 하루가 갔다 — 삽질일지 #08

워터마크 하나 고치는데 하루가 갔다

상세페이지 생성기로 전자책 3개의 랜딩 페이지를 30분 만에 뚝딱 만들었다. 여기까지는 좋았다. 문제는 전자책 뷰어에서 시작됐다.

1. 상세페이지 생성기 — 30분에 3개 완성

전자책 PDF를 넣으면 AI가 타깃, HOOK, 혜택, CTA를 자동 생성하고, 워드프레스 숏코드 HTML로 바로 복사할 수 있는 도구다. 초등 3~4학년, 5~6학년, 중등 패키지 3개를 30분 안에 끝냈다. 수작업이었으면 하루는 걸렸을 일이다.

2. 새 책 18권을 등록했는데 전부 안 열린다

전자책 뷰어 관리자 페이지에서 18권을 등록하고 쇼핑몰에서 연결했더니 전부 403 에러. 기존 책들은 다 잘 열리는데 새 책만 안 된다.

원인은 slug 처리 정규식이었다. 관리자 페이지가 slug에서 언더스코어(_)를 제거하고 있었다. rootine_book_1_1이 rootinebook11로 저장되는데, 쇼핑몰에서는 원래 slug 그대로 토큰을 만들어서 불일치가 발생한 것. 기존 책들은 하이픈(-)만 썼으니 문제가 없었다.

정규식 한 줄 고치고, 이미 잘못 저장된 18개 폴더를 일괄 변경해서 해결했다.

3. 워터마크가 양방향으로 겹쳐 나온다

저작권 보호용 워터마크를 한 방향으로만 나오게 수정하는데 하루의 절반을 썼다. PHP 서버 코드를 아무리 고쳐도 저장하면 여전히 양방향으로 지저분하게 나왔다.

"캐시 문제입니다" → 캐시 삭제 → "PHP opcache입니다" → 재시작 → "브라우저 캐시입니다" → 시크릿 모드. 다 해봤는데 안 됐다.

결국 직접 서버에서 이미지를 생성해서 확인했더니 PHP 쪽은 정상이었다. 그제야 뷰어의 JavaScript 코드를 열어봤다.

4. 범인은 두 번째 워터마크

워터마크가 두 군데에서 이중으로 적용되고 있었다.

• PHP (서버) — 이미지를 보여줄 때 "COZYMOM" 워터마크 합성
• JavaScript (저장 시) — PDF로 저장할 때 canvas에 "COZY_M.O.M"을 격자 패턴으로 추가

PHP에서 워터마크가 들어간 이미지를 JS가 받아서 또 워터마크를 그린 것이다. 텍스트도 다르고 각도도 미묘하게 달라서 양방향으로 겹쳐 보였다. JS 쪽 워터마크를 제거하니 깔끔하게 해결됐다.

5. 최종 워터마크 구조

• 뷰어 화면: CSS 필터로 워터마크 숨김 (깨끗하게 읽기 가능)
• 저장/출력: PHP 워터마크만 적용 (한 방향 대각선 3개)

뷰어에서는 깨끗하게 보이고, 저장하면 저작권 표시가 나오는 구조다.

오늘의 교훈

"안 고쳐지면 캐시 탓하지 말고 코드 전체를 봐라." 서버 코드만 보고 클라이언트 코드를 안 본 게 삽질의 원인이었다. 그리고 정규식 한 줄이 상품 18개를 먹통으로 만들 수 있다. 검증 규칙은 시스템 전체에서 통일해야 한다.