9편에서 회귀와의 싸움을 이어가겠다고 한 그 다음 날, 진짜 문제는 회귀가 아니라 근거였습니다. tour 페이지 히어로가 되돌아간 건 정본 생성기가 고쳐지지 않았기 때문이었고, 도구 페이지 네 곳의 히어로가 줄어든 근거로 적혀 있던 "자동 검토 리포트 §5.4 지시"는 존재하지 않는 출처였습니다. 그리고 지금까지 "무편집 원본"이라 불러온 사진 파일은 실은 이미 잘린 크롭본이었습니다. 이 화는 결과물이 아니라 근거와 원본을 의심하는 하루의 기록입니다.
정본을 놓치면, 고친 것도 사라진다
7월 8일 작업은 작은 결함 두 개로 시작했습니다. 한 내부 검토용 페이지의 푸터가 모바일 화면 밖으로 흘러넘치는 그리드 계산 오류, 그리고 전역 모바일 CTA 두 개가 하단에서 겹치는 문제였습니다. 둘 다 바로 고쳤습니다.
진짜 문제는 그다음이었습니다. tour 페이지 히어로가 예전 모습으로 되돌아가 있었습니다. 지난 수정이 산출물에만 적용되고, 그것을 찍어내는 정본 생성기에는 반영되지 않은 탓이었습니다. 그 생성기는 배포 제외 규칙에 걸려 깃 이력조차 없었고, 그래서 발견이 늦었습니다. 이번에는 결과물이 아니라 정본을 고쳤습니다.
결과물만 고치면 다음 렌더에서 같은 문제가 되돌아온다. 정본을 고쳐야 회귀가 끝난다.— 그날 일지의 재발 방지 교훈
존재하지 않는 "자동 검토 리포트 §5.4"
정본을 고치자마자 또 다른 함정이 나왔습니다. 히어로의 여백값을 옛 버그로 오인해 줄인 것입니다. 실은 6월 30일 확정된 "헤더 풀스크린 표준"을 이 페이지가 제대로 구현한 값이었습니다. 제가 짚어 되돌렸습니다.
같은 근거를 따라가 보니 도구 페이지 4개의 히어로도 같은 이유로 축소돼 있었습니다. 거기 적힌 근거 "자동 검토 리포트 §5.4 지시"는 존재하지 않는 출처였습니다.
원문은 §4.8이었고, 그마저도 모바일 화면 한정 권고였는데 전체 화면에 과잉 적용돼 있었습니다. 4곳 모두 복원했습니다.
유실됐던 calculator 앱패널 작업도 다시 하고, 사진 2건의 정렬도 바로잡았습니다. 오늘의 경위는 버전관리 문서 1편으로 남기고, 홈페이지 품질 게이트로 재확인해 통과를 받았습니다.
자동화가 대신한 디자인은 기준에 못 미쳤다
며칠 뒤, 더 근본적인 문제가 드러났습니다. Nova가 헤더·사진을 여러 차례 고쳤다고 기록돼 있던 것 — 진단·레벨·프로필·전체메뉴 오버레이 다섯 곳 — 이 실은 Nova가 아니라 개발을 돕던 자동화의 손이었고, 제 기준에 못 미쳤습니다.
Nova가 독립적으로 재검증해 상담 사진 톤, 강의 사진 크롭, 인물 크롭, 오버레이 영상 다섯 곳을 실측으로 다시 고쳤습니다. 저는 라이브에서 세 곳을 더 짚었습니다 — 좌측 인물 크롭 누락, 클릭이 안 되는 박스 3개. 전부 지웠습니다.
- 전체메뉴 X 버튼 오류는 페이지 하나가 아니라 사이트 전체 공통 셸의 z-index 버그였다(Riley 확인).
- "진단 페이지와 지도 화면 URL이 같다"는 제 의심이 사실로 확인됐다 — assessment.html 안에 index.html과 중복된 도구맵이 진단퀴즈와 함께 살아 있었다.
- 정식 오픈 감사에서 진짜 병목은 헤더가 아니라 상담신청폼 미연결·회원기능 DB 미가동·결제수단 전무, 이 세 가지였다.
개발을 돕던 자동화가 디자인까지 직접 CSS·좌표를 만진 것이 그날 실수의 원인이었고, 그래서 디자인 작업은 전부 디자인 담당 Nova에게 맡기기로 정리했습니다. 존재하지 않는 "자동 검토 리포트 §5.4"를 근거로 썼던 일도 정정했습니다 — 진짜는 §4.8이고, 그마저 자동 리포트였을 뿐입니다.
5차 라운드 끝에 찾은 진짜 원본
또 며칠 뒤, 제가 전날 올린 홈페이지를 열어봤습니다. 진단·계획, 학습·지식 두 페이지의 히어로 사진이 문제였습니다.
손댈 곳은 5차에 걸쳐 늘어났습니다. 고객 얼굴은 절반만 흐려야 했고, 강사는 전신이 나와야 했습니다.
3차 라운드에서 학습·지식 사진 속 수강생이 한 명뿐이라는 지적이 나왔습니다. 그래서 파일을 뒤졌습니다.
지금껏 "무편집 원본"이라 불러온 파일이 실은 이미 잘린 크롭본이었습니다. 사진 폴더 깊은 곳에서 진짜 원본을 찾아냈습니다 — 강사 옆에 수강생 서넛이 더 있었습니다.
잘린 파일을 원본으로 착각하고 3차 라운드를 돌았던 셈입니다.
오후엔 서재가 바뀌었습니다. 제가 아마존 재팬 서점 페이지를 캡처해 화살표를 그려 지시했고, 그 화살표를 따라 검색창을 지우고 카테고리 필터를 지우고 롤링 배너를 세웠습니다.
그러다 또 걸렸습니다. 상단 메뉴 "서재"를 누르면 실제로 열리는 페이지는 store.html이 아니라 learn.html이었습니다.
코드를 확인하지 않았다면 엉뚱한 페이지만 고치고 끝냈을 것입니다.
책 12권의 상세페이지가 표지와 구매 버튼을 갖춘 두 단짜리 화면으로 바뀌었습니다. 인쇄책은 교보문고로, 전자책은 결제 화면 흉내로 갈라졌습니다.
제가 다운로드 폴더에 사진 몇 장을 올렸습니다 — 제가 예전에 낸 책 3권의 실제 표지였습니다. 지워졌던 책들이 표지를 달고 다시 매대에 올랐습니다.
Riley가 세 차례 코드를 확인하고 밀어 올렸습니다.
이제 누가 봐도 기본은 하는 홈페이지가 됐다.— 그날 저녁, 홈페이지를 보며
근거부터 의심하는 하루
이 화가 보여주는 건 하나입니다. 완료를 선언하기 전에 확인해야 할 것은 결과물만이 아니라는 것입니다. 결과물이 아니라 그것을 찍어내는 정본, 인용한 근거가 실제로 존재하는지, "원본"이라는 라벨이 진짜 원본인지 — 세 가지 모두를 의심해야 완료가 완료다워집니다.
9편에서 회귀는 소스 템플릿을 고쳐도 다른 페이지에서 다시 나타났습니다. 10편에서는 그 회귀의 절반이 실은 회귀가 아니라, 애초에 존재하지 않는 근거와 가짜 원본에서 출발한 착시였다는 것이 드러났습니다. 완료 선언은 이번에도 미뤄집니다.
근거를 검증하는 것도 하나의 원칙입니다
기업백년은 결과물을 고치는 것으로 끝내지 않고, 그 결과물을 만드는 정본과 근거를 함께 검증하는 방식으로 홈페이지를 만듭니다. 고객사 홈페이지도 같은 원칙으로, 인용한 근거가 실제로 존재하는지부터 확인하고 만들어 드립니다.
GEO 최적화 상담 신청 →자주 묻는 질문
정본 생성기가 무너지면 왜 위험한가요?
고친 것이 산출물에만 남고, 그것을 다시 찍어내는 정본 쪽에는 반영되지 않기 때문입니다. tour 페이지의 히어로가 예전 모습으로 되돌아가 있었던 이유가 이것이었습니다. 지난 수정이 배포된 결과물에만 적용되고, 그것을 찍어내는 정본 생성기 자체는 고쳐지지 않았던 것입니다. 그 생성기는 배포 제외 규칙에 걸려 깃 이력조차 남지 않아 발견이 늦어졌습니다. 결과물이 아니라 정본을 고쳐야 다음에 다시 렌더돼도 회귀가 재발하지 않습니다.
존재하지 않는 근거는 어떻게 발견됐나요?
여백값을 옛 버그로 오인해 줄였다가, 제가 그것이 6월 30일 확정된 '헤더 풀스크린 표준'의 정상 구현이라고 알려줘 되돌린 것이 출발점이었습니다. 같은 근거를 따라가 보니 도구 페이지 네 곳의 히어로도 같은 이유로 축소돼 있었는데, 거기 적힌 근거 '자동 검토 리포트 §5.4 지시'는 존재하지 않는 출처였습니다. 원문은 §4.8이었고, 그마저 모바일 화면 한정 권고였는데 전체 화면에 과잉 적용돼 있었습니다. 네 곳 모두 복원했습니다.
'무편집 원본'이라는 라벨을 그대로 믿어도 되나요?
아니요, 실제로 라벨이 거짓이었던 사례가 나왔습니다. 학습·지식 페이지 히어로 사진을 다섯 차례 손보던 중, 세 번째 라운드에서 사진 속 수강생이 한 명뿐이라는 지적이 나왔습니다. 파일을 뒤져보니 지금까지 '무편집 원본'이라 불러온 파일이 실은 이미 잘린 크롭본이었습니다. 사진 폴더 깊은 곳에서 강사 옆에 수강생 서넛이 더 있는 진짜 원본을 찾아냈습니다. 라벨을 검증하지 않았다면 잘린 파일을 원본으로 착각한 채 계속 수정을 반복했을 것입니다.
자동화가 직접 디자인을 고치면 왜 문제인가요?
개발을 돕던 자동화가 디자인까지 직접 CSS와 좌표를 만진 결과가 제 기준에 못 미쳤기 때문입니다. 이날 헤더·사진 수정 다섯 곳이 실은 Nova가 아니라 그 자동화의 손이었고, 제가 라이브에서 좌측 인물 크롭 누락과 클릭 안 되는 박스 세 개를 추가로 짚어냈습니다. Nova가 독립적으로 재검증해 다섯 곳을 실측으로 다시 고쳤고, 그래서 디자인 작업은 전부 Nova에게 맡기기로 정리했습니다.
- 정본(canonical source)
- 실제로 배포되는 산출물을 만들어내는 원천 파일. 산출물만 고치면 다음 렌더에서 문제가 되돌아온다.
- 배포 제외 규칙
- 특정 파일을 배포 이력·깃 추적 대상에서 빼는 규칙. 여기 걸리면 변경 이력이 남지 않아 문제 발견이 늦어질 수 있다.
- 회귀(regression)
- 한 번 고친 문제가 나중에 다시 원래 상태로 되돌아가 재발하는 현상.
- z-index
- 화면 요소가 겹칠 때 어느 것이 위에 보일지 정하는 값. 사이트 전체가 공유하는 셸에 문제가 있으면 여러 페이지에서 동시에 증상이 나타난다.
- 크롭(crop)
- 사진에서 필요한 부분만 잘라내 보여주는 편집 작업. 크롭본을 원본으로 착각하면 그 이후 모든 수정이 잘못된 기준 위에 선다.
- 히어로 섹션
- 웹페이지 맨 위, 방문자가 가장 먼저 보게 되는 큰 이미지와 문구가 놓인 영역.
- 참고
- 라이브 사이트 — biz100.kr (기업백년 홈페이지)
- 구조화 데이터의 AI 답변 이점에 대한 공식 확인 — Google Search Central: 구조화 데이터 개요
- 웹 접근성 검증 기준 — W3C WCAG 2.1 Quick Reference