MONITORAPP 브랜드 사이트 리뉴얼

상황

수습 기간이 끝난 직후, 프론트엔드 신규 입사자로서 첫 번째로 맡게 된 업무가 보안 기업의 브랜드 사이트 리뉴얼이었습니다. 목표는 'SEO 상위 노출'로 매우 명확했지만, 당시 기준으로 규모가 큰 브랜드 사이트의 SEO를 전반적으로 설계·개선해 본 경험은 없었습니다. 프론트엔드 개발자는 저 혼자였고, 백엔드 개발자도 한 명뿐이라 무리한 도움을 요청하기 어려운 상황이어서 대부분을 스스로 풀어야 했습니다. 기존 브랜드 사이트는 워드프레스로 구축되어 있었고, Lighthouse 점수는 60~70점대에 머물러 있었으며, 회사의 주요 보안 관련 키워드는 검색 결과에 잘 노출되지 않거나 4~5페이지 이후에 위치하는 등 온라인 가시성이 좋지 않은 상태였습니다.

원인 분석

먼저 기존 워드프레스 기반 사이트의 구조와 코드를 분석했습니다. 워드프레스 자체로도 기본적인 메타데이터 설정은 가능하지만, SEO를 체계적으로 최적화하고 유지하기에는 한계가 있었습니다. 십수 년간 여러 사람이 거치며 관리된 탓에 페이지마다 코드 스타일과 구조가 제각각이었고, 사용하지 않는 페이지와 불필요한 코드가 많이 남아 있었습니다. UI 역시 일관성이 부족했고, 클릭 영역이 불편하게 작거나 접근성이 떨어지는 부분도 눈에 띄었습니다. 또한 과도하게 큰 이미지와 영상이 사용되면서, 로딩 속도와 성능 측면에서도 손해를 보고 있는 상태였습니다. 이런 상황을 종합해 봤을 때, 단순히 몇 개의 메타 태그를 추가하는 수준이 아니라, 구조·마크업·에셋 사용 방식 전반을 정리하는 리뉴얼이 필요하다고 판단했습니다.

행동

프레임워크 선택은 비교적 자유로운 상황이었기 때문에, SEO 최적화와 유지보수성을 함께 고려해 Next.js를 선택했습니다. React/Next.js는 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 지원해, 검색 엔진이 초기 HTML을 바로 크롤링하기 쉽고, 라우팅 단위로 메타데이터와 OG 태그를 체계적으로 관리할 수 있다는 점에서 SEO에 유리합니다. 또한 페이지·컴포넌트 단위로 구조를 명확히 나누고, 코드 스플리팅을 통해 성능 최적화도 함께 가져갈 수 있었습니다. 리뉴얼 작업을 시작하면서 폴더 구조와 컴포넌트 규칙, 네이밍 컨벤션 등 기본 규칙을 먼저 정리하고, 개발의 편의성보다는 성능과 일관성을 우선하는 방향으로 마크업과 스타일을 작성했습니다. 이미지와 영상에는 가능한 한 적절한 사이즈와 포맷, 대체 텍스트와 메타 정보를 부여했고, 주요 콘텐츠는 시맨틱 태그와 의미 있는 구조로 재배치했습니다. UI 측면에서는 디자이너가 전달한 Figma 시안을 기준으로, 픽셀 단위의 디테일을 놓치지 않으면서도 재사용 가능한 컴포넌트로 정리했습니다. 다만 브랜드의 특성상 고화질 이미지를 포기할 수 없다는 요구가 있어, 일부 에셋에서는 성능 최적화에 100% 이상적이진 못했다는 아쉬움이 남지만, 그 안에서 최대한 균형을 맞추며 작업을 진행했습니다.

결과

리뉴얼 이후 구글 서치 콘솔 기준으로, 2025년 6월(리뉴얼 직전)과 2026년 3월 데이터를 비교했을 때 평균 노출 수는 약 4,200에서 약 22,000으로, 평균 클릭 수는 약 110회에서 약 600회 수준으로 크게 증가했습니다. 이전에는 검색 결과 4~5페이지 이후에나 보이거나 아예 노출되지 않던 주요 보안 관련 키워드들도, 리뉴얼 이후에는 평균 1.6페이지 이내에 노출되는 수준까지 개선되었습니다. 또한 Lighthouse 기준으로 주요 페이지의 평균 점수를 90점 이상으로 끌어올려 성능·접근성 지표 역시 함께 개선했습니다. 이러한 성과 덕분에 브랜드 사이트 리뉴얼 프로젝트는 회사 내부에서도 좋은 사례로 공유되었습니다.