포트폴리오 대청소, iframe 버그 삽질, SEO 자동화까지 한 오전

시작은 "카드가 너무 많다"는 한 줄 불만이었다

오전 9시쯤 포트폴리오 페이지를 열어봤는데 솔직히 처음 보는 사람 입장에서 숨이 막혔다. 운영 중인 사이트가 늘어날수록 카드가 그냥 쌓여 있었고, 스크롤을 한참 내려야 끝이 나는 구조였다. "많다"는 걸 보여주는 게 아니라 "많아서 못 고르겠다"는 인상을 주고 있었던 거다.

그래서 처음으로 손댄 게 gen_public_lists.py였다. 메인 #portfolio 섹션에서 개별 카드를 전부 제거하고, 대신 "전체보기" CTA 하나만 남기는 방식으로 전환했다. 논리는 단순하다 — 메인 페이지는 흥미를 자극하는 곳이지, 전시관이 아니다. 카드 수십 개를 늘어놓으면 시선이 분산되고 어디를 눌러야 할지 모른다. 한 버튼으로 집중시키면 적어도 다음 행동이 명확해진다.

변경 전: 카드 N개 나열 → 스크롤 피로
변경 후: 전체보기 CTA 1개 → 클릭 → 별도 목록 페이지

이 작업 자체는 빠르게 끝났는데, 손을 댄 김에 "그러면 전체보기 페이지에서 미리 사이트를 둘러볼 수 있으면 좋겠다"는 생각으로 이어졌다.

iframe 미리보기 확장 — 그리고 예상 못 한 히스토리 꼬임

둘러보기 기능 자체는 이미 있었다. index.html에 iframe을 띄우는 모달이 구현돼 있었는데, 일부 사이트에만 적용이 돼 있었다. 이걸 전체 hedvion 사이트로 확대하는 건 상대적으로 간단한 작업이었다 — 목록에 대상만 추가하면 됐으니까.

문제는 그 다음이었다. 확장하고 나서 직접 테스트해보니 모달 닫기 버튼을 한 번 눌렀는데 모달이 안 닫히는 상황이 재현됐다. 두 번 눌러야 닫혔다. 처음엔 CSS transition 잔재인가 싶었는데 아니었다.

원인은 iframe 내부의 히스토리였다. 사이트를 iframe 안에 띄우면, 그 사이트 내에서 내부 링크를 클릭하거나 리다이렉트가 발생하면 브라우저 히스토리 스택에 항목이 쌓인다. 닫기 버튼이 history.back() 방식으로 뒤로가기를 트리거하는 구조였기 때문에, 첫 번째 back이 iframe 내부 히스토리를 소비하고, 두 번째 back에서야 모달이 닫히는 것처럼 동작했던 거다.

삽질 포인트를 정리하면:

결론적으로 history.back() 의존을 끊고, 닫기 버튼이 직접 모달 상태를 제어하도록 수정했다. iframe도 닫힐 때 src를 비워서 다음 번에 열릴 때 깔끔하게 로드되도록 했다. 돌아보면 "히스토리 기반 닫기"가 얼마나 fragile한지 다시 느꼈다 — iframe이 끼어드는 순간 히스토리 스택은 외부에서 예측이 불가능해진다.

냥글냥글 카드 추가 — 출시 예정이어도 자리는 잡아야 한다

버그 고치고 나서 포트폴리오에 카드 하나를 추가했다. 현재 개발 중인 게임 Nyangle(냥글냥글)이었다. 아직 출시 전이라 "출시 예정" 배지를 달아서 올렸다.

이게 사소해 보일 수 있는데, 내가 이렇게 하는 이유가 있다. 출시 전에 카드를 올려두면:

• 존재감 선점 — 포트폴리오를 보는 사람이 "이게 뭐지?"라고 인지하게 된다
• 작업 동기 유지 — 나 자신도 "저기 카드 있는데 언제 내냐"는 압박이 약하게 걸린다
• 썸네일 자리 확보 — thumbs/nyangle.jpg도 이 시점에 같이 밀어 넣었다, 나중에 급하게 추가하면 레이아웃이 깨지는 경우가 있어서

배지 하나로 "완성된 것과 만들고 있는 것"을 구분할 수 있으면 충분하다고 봤다.

GSC 전역 골든존 리포터 — 오전의 마무리

포트폴리오 작업이 어느 정도 마무리된 뒤에 SEO 쪽으로 넘어갔다. 사이트가 여러 개로 늘어나면서 Google Search Console을 사이트별로 들어가서 확인하는 게 점점 비효율적으로 느껴지던 참이었다.

원하는 건 심플했다 — 전체 속성 중에서 현재 검색 1페이지 진입 코앞에 있는 키워드를 한 번에 뽑아보는 것. 소위 "골든존"이라고 부르는, 순위 4~15위 근방 키워드들이다. 이미 1위~3위면 굳히기가 문제고, 16위 이하면 단기에 올리기 쉽지 않다. 근데 4~15위 키워드는 콘텐츠 조금만 보강해도 1페이지로 끌어올릴 수 있는 레버리지 포인트다.

scripts/gsc_allsites_report.py를 만들어서 전 속성을 순회하면서 이 구간 키워드를 뽑고, 일일 리포트 형태로 정리되도록 했다. #seo 채널에 자동으로 올라가는 구조다. 수동으로 GSC 탭을 10개 열던 걸 스크립트 한 번 실행으로 대체한 거다.

이 리포터의 실제 가치는 매일 본다는 것에 있다. 어느 날 갑자기 순위가 떨어진 키워드를 발견하거나, 반대로 조용히 올라오는 키워드를 초기에 잡아서 콘텐츠를 보강하는 게 가능해진다. 주 1회 수동 확인으로는 놓치기 쉬운 것들이다.

세 시간을 돌아보며

오늘 오전 작업의 공통 맥락은 "관리 비용 줄이기" 였다. 포트폴리오 카드 정리는 유지보수 복잡도를 줄였고, iframe 버그 수정은 UX 관리 포인트를 줄였고, GSC 리포터는 수동 모니터링 시간을 줄였다. 새 기능처럼 보이는 것도 결국 반복 작업을 자동화하거나, 이미 있던 구조를 단순화하는 방향이었다.

사이트가 늘어날수록 이런 "관리 오버헤드"를 의식적으로 줄이지 않으면 금세 운영이 무거워진다. 그게 오늘 오전 세 시간의 우선순위였다.

🛒 이 글과 어울리는 추천 상품

• 모니터 쿠팡에서 보기 →
• 기계식키보드 쿠팡에서 보기 →
• 커피머신 쿠팡에서 보기 →

*위 링크는 쿠팡파트너스 활동의 일환이며, 일정액의 수수료를 제공받을 수 있습니다.