[개발일지]2026-07-10
SK하이닉스 리포트 배포 트러블슈팅의 시작
SK하이닉스 ADR 상장 리포트를 배포한 뒤 생각지 못한 버그를 마주했다. HTML 본문을 Strapi CMS에 올린 뒤 Astro 프레임워크의 마크다운 파서인 marked가 변환하는 과정에서 스크립트 에러가 발생한 것이다. 처음에는 marked 파서가 script 태그 내의 비교 연산자(v >= 0)를 >= 형태로 강제 이스케이프하여 자바스크립트가 깨졌다고 섣불리 짚었다. 이로 인해 차트 렌더링과 탭 활성화 같은 주요 자바스크립트 기능이 중단되는 현상이 생겼다.
또한, 업로드 자동화 스크립트인 upload_skhynix_analysis.py에 적용했던 정규식이 오작동을 일으켜 스크립트 블록 전체를 날려버리는 버그도 발견했다. 여기에 리포트 헤더와 전역 바디 여백인 page-wrap을 떼어내는 가공 과정에서 레이아웃 패딩까지 함께 사라져 본문 콘텐츠가 브라우저 왼쪽 벽에 바짝 달라붙어 가독성이 엉망이 되는 문제까지 겹쳤다.
성급했던 자가 진단과 원인 회피의 헛발질
문제를 해결하기 위해 나름대로의 조치를 취했다. 스크립트 내 비교 연산자(v >= 0) 대신 특수 기호를 쓰지 않는 Math.max(0, v) === v 형태로 코드를 우회하여 marked의 이스케이프 문제를 피하려 했다. 정규식도 특정 태그 단위만 정확하게 매칭하도록 수정해 하단 스크립트 영역을 지켰다. 전역 레이아웃이 오염되는 것을 막으려고 최상위 body, html 선택자는 쳐내고, 본문을 안전하게 감싸는 .page-wrap 스코프와 패딩 스타일을 새로 정의해 최외곽 div 래퍼를 씌웠다. 탭 전환 시 display none 상태에서 차트가 찌그러지는 현상도 50ms 딜레이를 주어 강제로 창 크기 변경 이벤트를 발생시키는 꼼수로 해결했다.
하지만 나중에 밝혀진 사실은 내 성급한 자가 진단이 완전히 헛발질이었다는 점이다. marked가 script 내 비교 연산자를 이스케이프한다는 가설은 재현조차 되지 않았다. 실제 프로젝트 버전에서 테스트해 보니 스크립트 블록이 온전히 보존되어 있었고, 좌측 여백 문제도 본래 문제가 아니었다.
라이브 장애의 진짜 원인을 찾아서
진짜 원인은 따로 있었다. 우선 업로드 스크립트가 html 헤더를 통째로 잘라내면서 Chart.js CDN 로더를 같이 날려먹은 것이 결정적이었다. 브라우저 콘솔에는 ReferenceError: Chart is not defined가 찍혀 있었는데, 나는 엉뚱한 SyntaxError로 착각했던 것이다. 이 때문에 차트 6개가 전부 먹통이 되었다.
둘째로, 필요한 CSS 클래스만 수작업으로 골라 옮기는 과정에서 정렬이나 마진, 증감 색상 스타일이 대거 누락되었다. 셋째로 리포트 고유의 --color-* CSS 변수가 사이트 전역 변수와 충돌해 라이트 모드 시 테마가 깨지는 버그가 숨어 있었고, 마지막으로 1100px 규격에 맞춰진 원본 리포트 화면을 720px 폭 제한이 있는 블로그 본문에 욱여넣으면서 테이블 레이아웃이 뭉개졌다.
구조적 해결과 깊은 교훈
단순 임시방편이 아닌 구조적인 해결이 필요했다. 우선 수작업 누락을 원천 차단하기 위해 style 전체를 파싱해 .page-wrap 스코프로 자동 변환하는 report_uploader.py 모듈을 새로 개발했다. CDN 스크립트도 알아서 보존하고, 발행 전 자동 검증을 거쳐 하나라도 통과하지 못하면 발행을 중단시키는 빌드 파이프라인도 구축했다. 이제 일회성 스크립트 대신 manifest 설정 파일 기반의 범용 업로더를 쓴다. 프론트엔드 측 Astro 코드도 개선해서 리포트형 포스트는 컬럼 가로폭 제한을 1100px로 늘리고 불필요한 prose 스타일의 개입을 막았다.
이번 트러블슈팅을 겪으며 뼈저리게 느꼈다. 눈앞의 증상만 보고 머릿속으로 원인을 성급하게 지레짐작하지 말고, 반드시 브라우저 콘솔의 실제 에러 메시지부터 꼼꼼히 확인해야 한다. 게다가 CSS를 손으로 하나씩 골라내는 수작업은 언젠가 반드시 사고를 낸다는 것을 깨달았다. 수정 후에는 머리로만 만족하지 말고 직접 라이브 환경에서 실시간 렌더링과 콘솔 로그를 직접 만져보며 검증해야 뒤탈이 없다.
오늘의 소감
웹쪽 작업은 전문이 아니니 생각보다 쉽지 않다는 걸 뼈저리게 느낌.. 열심히 내부 데이터는 만들었고, 몇번이나 확인했었지만, 업로드만 하면 이상해지는 이상황.. 요즘 블로그에 올린다고 생각하지 못한 철야를 하고 있다..