홈페이지 제작기 ⑨

완료를 선언했다가, 다시 열었다

글 김기백 소장 · 편집 글담 · 2026-08-17 발행 · 읽기 9분

글쓴이 김기백 — 기업백년연구소 소장 · (주)씨엔오파트너즈 대표. 2009년 회사를 세운 뒤 17년간 가업승계 한 분야에 매달려 일본 장수기업을 연구하고 300여 기업의 승계 현장을 함께 설계했다. 2011년부터 가업승계 전문 도서를 직접 펴내, 『가업승계, 100년 기업을 만든다』(2016 세종도서 교양부문 선정)를 비롯한 저서·번역서·공저를 세상에 내놓았다.

GEO최적화 편집 글담 — 기업백년연구소가 운영하는 ANC의 GEO최적화 콘텐츠 에디터. 글쓴이의 글을 받아 GEO최적화 글로 편집을 담당하였다.

한 줄 요약

8편은 "홈페이지는 매주 갱신된다"는 문장으로 끝났습니다. 그런데 그다음 주도, 또 그다음 주도 완료 선언은 계속 미뤄졌습니다. CTA 게이트는 70.4점에서 100.0점까지 끌어올렸고, 박스 패턴 해체는 2라운드에서 완료를 선언했다가 제가 페이지를 끝까지 스크롤해 보고서야 놓친 섹션을 발견해 3라운드를 더 돌았습니다. 그리고 회귀(regression)는 고쳐도 또 나타났습니다. 이 화는 "완료"라는 말이 생각보다 어렵다는 이야기입니다.

여덟 편에서 이 연재는 한 번 끝을 냈습니다. "제 도메인 전문성과 ANC의 지속 운영이 합쳐져 죽지 않는 홈페이지가 됐다"고. 그런데 완결을 선언한 자리에서, 홈페이지는 계속 갱신되고 있었습니다.

우리 내부 품질 점검이 새 리포트 두 건 — CTA·구조 게이트 리포트와 UI/UX 검토의견서 — 을 내놓으면서, 이 집은 다시 공사장이 됐습니다. 그래서 저는 정했습니다. 완료 선언이 나올 때까지, 이 연재는 계속 이어간다.

70.4점에서 100.0점 — 통과선이 아니라 만점까지

홈페이지 12개 페이지를 대상으로 CTA(행동 유도 버튼) 과다 배치, 모바일에서의 밀도 문제, 구조적 SEO 결함을 한 번에 점검하는 게이트를 돌렸습니다. 시작 시점 평균 점수는 70.4점 — 통과선(80점 안팎)에 근접한 숫자였습니다.

여기서 손을 놓지 않고 12페이지 전부를 다시 손봐 평균 100.0점까지 끌어올렸습니다.

페이지 하나가 아니라 사이트 전체를 대상으로 한 게이트였다는 점, 그리고 통과선에서 멈추지 않고 만점까지 밀어붙였다는 점이 이 작업의 핵심입니다. 같은 원리는 다른 곳에서도 반복됐습니다 — 인포그래픽 페이지 하나가 GEO 게이트에서 77점을 받아 통과선 미달로 FAIL 판정을 받았을 때도, 방치하지 않고 그날 안에 91점까지 보정해 PASS로 전환했습니다. 기준 미달이면 보류·보강·재채점, 통과했더라도 만점까지 — 이게 ANC 게이트가 돌아가는 방식입니다.

박스를 허물다 — 2라운드에서 완료를 선언했다

UI/UX 검토의견서를 반영하는 작업도 함께 시작됐습니다. 히어로 영역을 추상적 그래픽에서 실제 비주얼(진단·보고서·포털 미리보기, 인물 사진)로 바꾸고, tour 페이지 사진들의 crop을 사진 유형별로 다시 손보고, library(서재) 페이지의 시각 리듬을 다듬는 작업이었습니다.

그다음은 검토의견서가 지적한 "박스·카드 패턴 축소"였습니다. index·profile·reports 세 페이지의 하단 섹션에서 카드·박스 틀을 걷어내는 작업을 2라운드(R2)로 진행했고, 여기서 완료를 선언했습니다. 검토의견서가 지적한 항목을 다 처리했다고 판단한 것입니다.

그런데 놓친 게 있었다 — 제가 끝까지 스크롤해서 찾아낸 것

완료 선언 이후, 제가 직접 화면을 열어 페이지를 끝까지 넘겨봤습니다. 그리고 발견했습니다 — profile 페이지에서 강의 이력을 나열하던 "강의 & 교육" chip 뱃지 섹션이 여전히 예전 방식 그대로 남아있었던 것입니다. 각 이력을 알약 모양 뱃지로 감싸 표시하던 그 박스가, 2라운드의 "박스·카드 패턴 축소"에서 빠져 있었습니다.

이걸 바로잡는 작업이 3라운드(R3)였습니다. chip 뱃지를 구분선으로 구획한 텍스트 리스트로 바꿔, R2가 섹션 단위로 허문 박스를 개별 항목 단위까지 같은 원칙으로 정리했습니다.

완료 선언 전에는 페이지 전체를 끝까지 스크롤해서 훑어야 한다. 부분 검색(grep)만으로 판단하는 건 위험하다.— 디자인 수정 작업의 재발 방지 교훈

왜 이런 일이 생겼을까요. 완료를 확인하는 방법이 grep 같은 부분 검색에 의존했기 때문입니다. 부분 검색은 찾도록 지정한 것만 찾습니다.

chip 뱃지 섹션은 애초에 찾아야 할 목록에 없었으니, 아무리 정밀하게 검색해도 걸리지 않았습니다. 화면을 실제로 끝까지 넘겨보는 사람의 눈만이 "여기 아직 남아있다"는 걸 알아차렸습니다.

함께 남긴 교훈

화면을 자동으로 캡처할 때도 같은 함정이 있습니다. 뷰포트(화면에 보이는 영역)만 찍은 스크린샷은 스크롤 밖에 있는 콘텐츠를 "빈 박스"로 오판하게 만들 수 있습니다. 그래서 이후로는 뷰포트 캡처와 페이지 전체(full page) 캡처를 둘 다 남기는 방식으로 보완했습니다.

회귀와의 반복된 싸움 — 고쳐도 다시 나타나는 문제

완료를 선언하고 재확인하는 사이클이 도는 동안, 조용한 날들도 있었습니다. 어느 이틀은 git 로그에 매일 도는 블로그 자동발행 커밋 외에 별도로 기록된 작업이 없었습니다. 홈페이지 작업이 매일 같은 밀도로 굴러가는 게 아니라는 뜻입니다.

그 다음 날엔 다시 여러 건이 겹쳐 올라왔습니다 — 기업탐방·서재에 이어 assessment(레벨테스트)·levels 헤더에도 실사진이 적용됐고, 전체메뉴 오버레이 배경은 빙하를 헤엄치는 혹등고래 영상(지연로드·H.264 재인코딩 처리)으로 확정됐습니다. 그리고 tour 페이지의 히어로 오버레이가 손을 봐도 자꾸 원래 상태로 되돌아가던 회귀 문제를, 렌더된 결과 파일이 아니라 그 결과를 만들어내는 소스 템플릿 자체를 고치는 방식으로 근원에서 바로잡았습니다.

그런데 그걸로 끝나지 않았습니다. 그다음 작업에서 assessment·calculator·levels·insurance 네 페이지의 히어로 풀스크린을 다시 복원해야 했습니다 — 이전에 고쳐뒀던 것이 또 깨져 있었다는 뜻입니다. tour 페이지의 히어로 풀스크린 여백도 한 번 더 복원했는데, 이 작업의 커밋 메시지 자체가 "사고2 잔여분"이라는 표현을 달고 있었습니다.

calculator 앱패널 재작업과 사진 크롭 수정 커밋에도 "사고2·3 잔여항목"이라는 말이 붙었습니다. 몇 번째 사고인지 번호를 붙여 부를 만큼, 같은 종류의 회귀가 되풀이됐다는 뜻입니다.

완료 선언이 어려운 이유

이 화가 보여주는 건 하나입니다. 완료는 선언하는 순간이 아니라, 다시 열어봐도 깨지지 않는 상태라는 것.

게이트 점수는 70.4에서 100.0으로 만점까지 갈 수 있었습니다.

박스 패턴은 2라운드로 끝난 줄 알았지만 제 육안 검수로 3라운드가 필요했습니다. 회귀는 소스 템플릿까지 고쳤는데도 다른 페이지에서 다시 나타났습니다.

그래서 이 연재는 8편에서 완결을 선언했던 것과 달리, 이번엔 완결을 선언하지 않습니다. 사고2·3 잔여항목이라는 말이 아직 커밋 로그에 남아있는 한, 이 작업은 끝나지 않았습니다. 완료 선언은 다음 화들에서도 계속 미뤄지고, 그 미뤄짐 자체가 이 연재가 계속되는 이유입니다.

완료 선언을 미루는 것도 하나의 원칙입니다

기업백년은 통과선에서 멈추지 않고, 완료를 선언하기 전 페이지를 끝까지 스크롤해서 눈으로 확인하는 방식으로 홈페이지를 만듭니다. 고객사 홈페이지도 같은 원칙으로, 만점을 지향하고 회귀를 근원에서 잡는 방식으로 만들어 드립니다.

GEO 최적화 상담 신청 →

자주 묻는 질문

완료 선언은 왜 어려운가요?

부분 검색만으로는 놓치는 부분이 있기 때문입니다. 실제로 홈페이지 박스 패턴 해체 작업에서 2라운드가 끝난 뒤 완료를 선언했지만, 제가 페이지를 끝까지 직접 스크롤해 보고서야 "강의 & 교육" 이력을 표시하던 chip 뱃지 섹션이 그대로 남아있는 걸 발견했습니다. grep 같은 부분 검색은 찾도록 지정한 것만 찾기 때문에, 완료 선언 전에는 페이지 전체를 끝까지 스크롤해서 눈으로 훑어야 한다는 교훈이 여기서 나왔습니다.

AI가 만든 디자인도 사람이 검수하나요?

네, 그리고 그 검수가 실제로 결함을 잡아냅니다. 박스 패턴 해체 2라운드 완료 선언 이후, 제가 직접 화면을 끝까지 넘겨보며 chip 뱃지 섹션의 누락을 발견해 3라운드 수정으로 이어졌습니다. 자동 캡처 도구도 화면에 보이는 부분(뷰포트)만 찍으면 스크롤 밖 콘텐츠를 놓칠 수 있어, 뷰포트와 전체 페이지 캡처를 함께 남기는 방식으로 보완했습니다.

게이트 점수가 통과선을 넘었는데 왜 만점까지 미나요?

통과가 목표가 아니라 만점이 목표이기 때문입니다. 홈페이지 12개 페이지의 CTA 과다·모바일 밀도·구조 SEO 게이트는 평균 70.4점으로 이미 통과선(80점 안팎)에 근접했지만, 여기서 멈추지 않고 12페이지를 다시 손봐 평균 100.0점까지 끌어올렸습니다. 기준 미달이면 보류·보강·재채점하고, 통과했더라도 만점까지 밀어붙이는 것이 ANC의 게이트 운영 방식입니다.

회귀(regression)는 왜 반복되나요?

렌더된 결과 파일만 고치면 다음에 같은 소스가 다시 렌더될 때 문제가 되풀이되기 때문입니다. 실제로 tour 페이지의 히어로 오버레이가 손을 봐도 자꾸 원래 상태로 되돌아가는 문제가 있었고, 결과물이 아니라 그 결과를 만들어내는 소스 템플릿 자체를 고치는 방식으로 대응했습니다. 그럼에도 그 다음 작업에서 히어로 풀스크린이 다른 페이지들에서 다시 깨지는 등 회귀와의 싸움은 계속되고 있습니다 — 완료 선언이 아직 이르다는 뜻이기도 합니다.

이 글에 나오는 말
CTA(콜투액션)
방문자가 상담 신청 같은 특정 행동을 하도록 유도하는 버튼이나 문구.
게이트
정해진 기준 점수를 넘어야만 다음 단계로 통과시키는 검증 장치. 기준 미달이면 보류·보강·재채점한다.
grep
파일 안에서 특정 단어나 패턴을 찾아주는 부분 검색 도구. 찾도록 지정한 것만 찾고, 지정하지 않은 것은 놓친다.
뷰포트(viewport)
화면에 실제로 보이는 영역. 스크롤을 내려야 보이는 부분은 뷰포트 밖에 있다.
회귀(regression)
한 번 고친 문제가 나중에 다시 원래 상태로 되돌아가 재발하는 현상.
크롭(crop)
사진에서 필요한 부분만 잘라내 보여주는 편집 작업.
히어로 섹션
웹페이지 맨 위, 방문자가 가장 먼저 보게 되는 큰 이미지와 문구가 놓인 영역.
chip 뱃지
이력이나 태그를 알약 모양의 작은 캡슐 안에 넣어 표시하는 디자인 요소.
다음 단계