환자는 첫 화면에서 무엇에 반응하나 — 히어로 설계의 근거
사람은 웹페이지의 첫인상을 0.05초(50밀리초) 안에 정합니다. 홈페이지 첫 화면(히어로)이 예약·전화로 이어지느냐는 이 짧은 순간에 크게 좌우됩니다. 라비럭스는 '감'이 아니라 공개된 연구와 실측으로 이 화면을 설계합니다.
한눈에 보는 결론
- 자동으로 넘어가는 슬라이드(캐러셀)는 손해입니다. 방문자의 약 1%만 클릭하고, 그중 84%가 첫 장에만 반응합니다. 둘째 장부터는 사실상 아무도 보지 않습니다.
- 영상 배경은 분위기에는 맞아도 전환의 무기는 아닙니다. 손익은 대부분 로딩 속도가 가릅니다. 느리면 이탈, 최적화하면 본전 수준입니다.
- 첫인상은 0.05초, 화면이 복잡할수록 매력이 떨어집니다. 화려함보다 절제가 이깁니다.
- 환자 신뢰는 실제 사진과 후기에서 옵니다. 스톡 이미지는 오히려 신뢰를 깎습니다.
근거
- 첫인상 0.05초 — 시각적 매력은 50밀리초 안에 판단됩니다(Lindgaard 2006). 500밀리초 노출로 생긴 인상이 이후 평가의 절반을 설명하고, 시각적 복잡도가 매력을 가장 크게 떨어뜨립니다(Reinecke, 하버드 2013).
- 시선은 읽지 않고 훑습니다 — 232명 아이트래킹에서 사용자는 F자로 스캔하며 상단·왼쪽과 첫 줄에 시선이 몰립니다(Nielsen Norman Group). 히어로 문구는 짧고 앞에 핵심을 둬야 읽힙니다.
- 자동 캐러셀 — 노터데임대 실측(3.5개월·클릭 2.8만 건): 방문자 약 1%만 클릭하고 84%가 첫 장에 몰립니다. Baymard 연구도 대부분 회전이 끝나기 전에 이탈하며, 자동 전환이 클릭 직전 바뀌어 오작동을 만든다고 보고합니다.
- 영상 대 정적 — 엄밀한 학술 합의는 부족하고 업계 사례는 엇갈립니다. 다만 일관된 사실은 영상 히어로의 손해가 로딩(LCP) 지연에서 온다는 점입니다. 속도를 잡으면 손해가 사라집니다.
- 의료 신뢰 — 웹 신뢰는 디자인·저자의 권위·사용편의·콘텐츠에서 오르고 광고에서 내려갑니다(JMIR 2017 리뷰). 실제 사진이 스톡보다 신뢰를 크게 높이고, 새 병원을 고르기 전 후기를 확인하는 환자가 다수입니다.
그래서 어떻게
- 첫 장 하나로 승부합니다. 자동 슬라이드로 여러 메시지를 욱여넣지 않습니다. 여러 장이 필요하면 아래쪽에 직접 넘기는 갤러리로 둡니다.
- 문구는 짧게, 핵심을 왼쪽 위에 두어 훑는 시선에 맞춥니다.
- 실제 원장·진료 사진과 자격, 후기를 신뢰 축으로 앞세우고 스톡·연출은 지양합니다.
- 영상은 분위기가 필요할 때만, 속도 예산 안에서만 씁니다. 한계를 넘으면 미리 알려드립니다.
- 화려한 효과보다 절제를 택하고 접근성(모션 최소화)을 지킵니다.
Archafe는 이렇게 구현합니다
Archafe는 홈페이지를 만들 때 이 근거를 규칙으로 내장합니다.
- 히어로를 **무엇을 보여줄까(콘텐츠)**와 얼마나 강하게(표현) 두 축으로 나눠 업종·강점에 맞는 기본값을 추천합니다. 신뢰형에는 실사진 중심의 단일 히어로를, 정보형에는 읽기 좋은 정적 화면을 기본으로 둡니다.
- 성능 예산을 정해 두고, 영상·효과가 로딩 한계를 넘길 것 같으면 불이익을 미리 고지하고 진행 여부를 묻습니다.
- 콘텐츠는 항상 정적 HTML로 남겨 사람과 AI 검색이 모두 읽게 하고, 효과는 그 위에 얹습니다.
- 가짜 후기나 스톡 미끼를 쓰지 않습니다. 신뢰 신호는 실제 데이터에서만 나옵니다.
라비럭스는 이렇게 보기 좋은 것과 실제로 효과 있는 것 사이의 간극을 근거로 메웁니다.