라이트하우스 100점, 하이브디자인이 직접 해봤습니다.

솔직하게 지금까지 병원 홈페이지 제작에서 디자인과 시각적 완성도에 집중했습니다. 보기 좋은 사이트를 만드는 것이 목표였고, 실제로 그 부분은 많은 원장님들이 만족해 왔고 잘 해왔다고 생각합니다.

근데 갑자기왜? 무엇이 바뀌었나

이전 방식은 이랬습니다. 디자인 시안을 만들고, 퍼블리싱하고, 기능을 붙이고, 납품합니다. 성능 최적화와 접근성은 기본만하자 였던 것 같습니다. 그렇게 만들어도 노출이 꽤 잘됐었거든요. 그렇기에 더욱 그런 디테일한 부분까지는 신경 쓰지 않았던거 같습니다. 하지만 최근 seo 문의가 정말 너무 너무 많아져서 그래서 직접 해봐야겠다 생각했습니다. 실제 광고 효과 노출 을 직접 확인해보고 싶어졌습니다. 그 결과, 데이터들을 모아 원장님들께 전달해 드릴 수 있을 것 같았거든요

그래서, 제작 방식과 기존 시스템 코드 모두다 바꿨습니다. 디자인과 성능을 동시에 설계하려고 합니다.. 이미지를 넣을 때부터 포맷과 크기를 고민하고, 폰트를 선택할 때부터 로딩 순서를 설계하고, 스크립트를 추가할 때마다 렌더링에 미치는 영향을 확인합니다. 첫 줄을 짤 때부터 성능이 설계에 포함되어 기획하려고 합니다. 물론 리스크는 있습니다. 작업량이 상상도 못할 많큼 늘었습니다. 이런... 월 수주수를 줄여야 하거나, 가격을 올려야 할 수 도 있으니까요.. 깊은 고민중입니다.

실제로 어떻게 작업했나

실제로 꽤 신경을쓰고 확인했을때, 첫점수는 50점 80 80 80 대 점수 였습니다. 충격 을 조금 받았습니다. 그래서 개선하고 개선하고 개선해 나가면서 작업했습니다. 사실 점수만 보여주는 건 의미가 없습니다. 어떤 판단을 하고, 어떤 작업을 해서 이 점수가 나왔는지를 순서대로 공개합니다.

1. 이미지 전량 WebP 변환

이미지를 전부 WebP로 변환했습니다. 같은 시각적 품질 기준에서 파일 크기가 평균 40% 줄어듭니다. 이미지가 많은 병원 홈페이지에서 이 차이는 전체 페이지 용량의 절반 이상을 차지합니다. 또한 피씨 모바일를 따로 구분하여 데이터를 읽게 설정했습니다. 게시글들도 자동으로 webp 로 변환 되도록 설계했습니다.

변환만으로 끝나지 않습니다. 모든 이미지 태그에 가로·세로 픽셀 크기를 직접 명시했습니다. 이 두 속성이 없으면 브라우저가 이미지 크기를 알 수 없어 공간을 잡지 않습니다. 이미지가 로드되면서 아래 요소들이 밀려 내려가고, 그 움직임이 CLS 점수를 깎습니다. CLS 0은 이미지 하나하나에 크기를 적어넣은 단순하지만 꼼꼼한 작업의 결과입니다.

2. 히어로 영상 처리 방식

메인 화면에 배경 영상을 사용했습니다. 영상은 사실 클라이언트들이 가장 많이 원하는 요소이니까요. 영상은 이미지보다 수십 배 무겁기 때문에 처리 방식이 중요합니다. 페이지가 열리자마자 영상 전체를 내려받기 시작하면 다른 리소스 로딩이 밀립니다.

해결 방식은 두 가지였습니다. 첫째, 영상 태그에 preload 속성을 metadata로 설정해 처음에는 영상 길이와 해상도 정보만 받아오고 실제 재생 데이터는 나중에 내려받도록 했습니다. 둘째, poster 속성으로 WebP 이미지를 지정했습니다. 영상이 준비되기 전 화면이 비어 보이지 않고, 대표 이미지가 즉시 표시됩니다. 사용자는 영상이 로드되는 과정을 기다리는 느낌을 받지 않습니다.

3. 렌더 블로킹 스크립트 제거 — TBT 0ms

페이지에는 여러 외부 스크립트가 들어갑니다. 아이콘 라이브러리, 스크롤 애니메이션 라이브러리, 인터랙션 스크립트들입니다. 이것들이 head 태그 안에 일반적으로 삽입되면 HTML 파싱이 멈추고 스크립트를 먼저 실행합니다. 그 동안 화면은 멈춥니다.

모든 외부 스크립트에 defer 속성을 적용했습니다. defer는 HTML을 다 읽은 후에 스크립트를 실행하는 방식입니다. 페이지를 그리는 작업과 스크립트 실행이 겹치지 않습니다. TBT(Total Blocking Time)가 0ms라는 건 사용자가 버튼을 눌렀을 때 반응이 지연되는 시간이 전혀 없다는 뜻입니다. 클릭했는데 아무 반응이 없어서 한 번 더 누른 경험이 있다면, 그게 TBT가 높은 사이트입니다.

4. 폰트 로딩 순서 설계

하이브디자인 홈페이지에는 다양한 폰트가 쓰입니다. 외부 폰트는 서버에서 파일을 받아와야 하기 때문에 늦게 로드되는데 사실상 예쁜 폰트를 원하는 경우가 많아 이런 부분 까지는 신경쓰지 않았어요 실제 이부분이 점수표에 영향을 너무 많이 줍니다. 폰트가 로드되기 전에 텍스트가 아예 표시되지 않으면 사용자는 콘텐츠가 없는 화면을 보게 됩니다. 이를 FOIT(Flash of Invisible Text)라고 부릅니다.

Google Fonts URL에 display=swap 파라미터를 추가했습니다. 이 설정은 폰트 로드 전에 시스템 기본 폰트로 텍스트를 먼저 보여주고, 폰트가 준비되면 교체합니다. 사용자는 빈 화면 대신 텍스트를 바로 읽을 수 있습니다. 추가로 head 태그 상단에 구글 폰트 서버로의 preconnect 링크를 넣어 DNS 조회와 TCP 연결을 미리 시작합니다. 폰트 요청이 시작되는 시점을 앞당기는 작업입니다.

5. 페이지별 CSS /js 분리

모든 스타일을 하나의 CSS 파일에 담으면 어느 페이지에서든 전체 파일을 내려받게 됩니다. 메인 페이지에서만 쓰는 히어로 스타일, 슬라이더 스타일, 블로그 섹션 스타일이 서브 페이지에도 함께 로드됩니다. 쓰지도 않는 파일을 내려받는 시간이 낭비됩니다.

공통 스타일과 페이지 전용 스타일을 분리했습니다. 메인 페이지에서만 필요한 스타일은 index.css로 따로 만들고, 그누보드의 페이지별 CSS 지정 기능을 활용해 메인 페이지에서만 불러오도록 했습니다. 서브 페이지에서는 해당 파일을 로드하지 않습니다. 페이지마다 꼭 필요한 CSS만 내려받는 구조입니다. 어드민 게시판 때에따라 자동으로 js/css 를 선택하여 불러올 수 있도록 설계했습니다.

6. JSON-LD 구조화 데이터

SEO 100점은 사실 생각보다 쉽습니다. 하지만 진짜 seo 설정은 메타 태그만으로는 달성하기 어렵습니다. 구글이 사이트를 이해하는 방식에는 메타 태그 이상의 정보가 필요합니다. JSON-LD는 구글이 권장하는 구조화 데이터 형식으로, 검색 엔진에게 이 사이트가 무엇을 하는 곳인지, 어떤 콘텐츠가 있는지를 명확하게 알려줍니다.

하이브디자인 홈페이지에는 구조화 데이터를 자동으로 설정 되도록 설계했습니다. 회사 정보를 담은 Organization 스키마, 포트폴리오 목록을 담은 ItemList 스키마, 자주 묻는 질문을 담은 FAQPage 스키마등 관리자에 정보를 입력하면 알아서 연동되도록 처리했습니다. 구글이 이 정보를 인식하면 검색 결과에서 일반 링크보다 더 많은 정보가 표시되는 리치 스니펫이 생성될 수 있습니다. 병원 홈페이지에서는 MedicalClinic 스키마에 진료 과목, 진료 시간, 주소 정보까지 담습니다.

7. 접근성 마크업

접근성 점수는 자동으로 올라가지 않습니다. 코드 한 줄 한 줄에 사람이 직접 선택을 해야 합니다. 모든 이미지에 alt 텍스트를 작성했습니다. 사진 속 장면을 설명하는 텍스트입니다. 단순 장식용 이미지에는 빈 alt와 aria-hidden 속성을 달아 스크린리더가 읽지 않도록 했습니다. 또한 sd_only 방식을사용하지 않으려고 최대한 노력했습니다. h1 - h3 최대한 순서 를 위반하지 않도록 노력했습니다.

헤더, 내비게이션, 메인, 각 섹션에 적절한 랜드마크 역할을 부여했습니다. 키보드만으로 사이트를 탐색하는 사용자가 원하는 영역으로 바로 이동할 수 있습니다. 모바일 메뉴 버튼에는 열림·닫힘 상태를 알려주는 aria-expanded 속성을 달았습니다. 페이지 최상단에는 본문 바로가기 링크를 추가해 메뉴를 건너뛰고 내용으로 직접 접근할 수 있게 했습니다. 병원을 찾는 환자 중 고령층 비율을 생각하면, 이 작업들은 선택이 아닙니다.

모바일 성능 99점

데스크톱은 4개 항목 전부 100점입니다. 모바일 성능만 99점입니다. 사실 그럼 더욱 홈페이지를 단순화 해야했고 영상들을 빼야합니다. preload 설정과 poster 이미지로 최대한 최적화했지만, 모바일 네트워크 환경에서 폰트들과, 영상 리소스가 LCP 측정값에 영향을 줍니다.

100점을 만드는 방법은 있겠지만 그렇게 작업하여 뺴는것은 제작 방식에 의미가 없다고 판단하고, 90점 이상을 목표로 작업하면서 디자인 과 모션 퀄리티를 살리면서 작업하는 것이 옳은 방향이라 판단했습니다. 첫 화면의 시각적 밀도가 브랜드 인상을 결정한다는 판단 때문입니다.

앞으로 이 기준으로 작업합니다

하이브디자인이 앞으로 만드는 병원 홈페이지의 기본 목표입니다. 라이트하우스 성능·접근성·권장사항·SEO 전 항목 90점 이상, Core Web Vitals 통과, JSON-LD 구조화 데이터 적용, CLS 0 설계. 이 기준은 협상 대상이 아닙니다. 저희 사이트에서 이미 검증한 방식이고, 클라이언트 사이트에도 동일하게 적용할 예저입니다. 또한 우리가 직접 겪고 실행하는 seo 체감 , 현실등도 모두다 같이 공유할 예정입니다. 그리고 지속적으로 해당 부분은 업데이트 해드릴 예정입니다.

디자인이 좋으면서 빠르고 검색에도 잘 걸리는 병원 홈페이지 그게 이번 프로젝트의 목표합니다. 예쁜 것과 빠른 것은 트레이드오프가 아닙니다. 처음부터 그렇게 설계하고 최대한 클라이언트의 만족도를 유지하며, 마케팅적인 요소들을 서비스로 드리려고 합니다. 하이브디자인은 이제 막 그 방식으로 전환했고, 자사 홈페이지가 그 첫 번째 결과입니다.

마무리

앞으로는 키워드 별로 노출현황 방법 들도 실제로 직접 처리해보면서 후기들을 남겨보도록 하겠습니다.