홈페이지 구조는 '이것'에서 시작

이런 분들이 보면 좋아요!
✅ 홈페이지를 만들고 있는데 구조가 계속 흔들리는 기획자/대표님
✅ 디자인은 예쁜데 전환이 안 되는 랜딩페이지가 고민인 마케터
✅ 홈페이지 제작을 앞두고 어디서부터 시작해야 할지 막막한 분
✅ AI 툴을 쓰고 있지만 방향 설정이 어려운 1인 운영자

홈페이지를 만들면서 기준이 완전히 바뀌었던 경험을 공유합니다.

홈페이지 작업 시작할 때, 보통 기획, 디자인, 스토리부터 생각하죠?
저도 처음에는 그렇게 시작했습니다.

그런데 작업을 하다가 문득 떠오른 생각으로 기준을 완전히 바꿔서 다시 작업했죠.
홈페이지 작업에서 얻은 것을 정리했어요.

**이 글에서 말하는 홈페이지는 상세페이지와 동일한 의미로 구조를 적용할 수 있습니다. 편의상 홈페이지로 통일하겠습니다.

1. 홈페이지 구조는 '행동'에서 시작됩니다

홈페이지를 만들 때 보통은 이렇게 시작합니다.

• 디자인은 어떻게 할까?
• 어떤 메시지를 넣을까?
• 어떤 스토리로 설득할까?

저도 똑같이 시작했어요.
클로드코드를 활용해 전체 구조를 먼저 잡고
디자인 레퍼런스를 찾으면서 디테일을 채우는 방식이었죠.

그렇게 한참 작업하다가 문득 생각이 들었어요.
‘내가 원래 중요하게 보던 건 이게 아니었는데?’

스크롤히트맵 | 출처: Beusable

사람들은 생각보다 스크롤하지 않습니다.
대부분 첫 화면에서 이탈하고, 관심이 없으면 내려보지도 않습니다.

Beusable에서 제공하는 스크롤한 화면의 분포와 집중도를 시각화한 스크롤히트맵 자료를 보면
한눈에도 얼마나 사람들이 빨리 이탈하는지 알 수 있어요.

그래서 저는 ‘사람들이 웹사이트에서 어떻게 행동하는지’ 를 기준으로 구조를 다시 잡았어요.

• 어디서 멈추는지
• 어디서 이탈하는지
• 시선이 어디에 꽂히는지

홈페이지는 결국 ‘읽히는 콘텐츠’가 아니라 ‘행동을 유도하는 콘텐츠'이니까요!

2. 그래서 '첫 화면(히어로섹션)'에 집중했습니다

행동 기준으로 구조를 보니까 가장 먼저 바꿔야 하는 지점이 명확해졌어요.
바로 ‘첫 화면’입니다.

사람들이 스크롤하지 않는다면, 그건 첫 화면에서 이미 결정되었습니다.
그래서 저는 이 영역에 가장 많은 시간을 썼습니다.

• 시선을 집중시킬 수 있는 디자인
• 한 화면 안에서 전체 메시지가 바로 이해되도록 구성
• 시선 이동에 따라 자연스럽게 문구 배치
• 고민 없이 바로 행동할 수 있도록 CTA 삽입

저의 중심은 ‘예쁘게 만드는 것’이 아니라
“보는 사람이 어떻게 움직일지 설계하는 것”이었습니다.

3. 행동 구조를 결정하는 기준은 ‘기획’이 아니라 ‘목적’입니다

여기서 한 가지 더 중요하게 느낀 점이 있습니다.
행동을 고려한 구조는 그냥 잘 만든다고 나오는 게 아니라, ‘목적’이 명확해야 잡힌다는 것!

이 홈페이지를 통해서

• 무엇을 전달하고 싶은지
• 어떤 행동을 유도하고 싶은지
• 누구에게 보여주고 싶은지

목적이 흐릿하면 구조는 계속 흔들립니다.

Claude, chat GPT 등 ai 툴을 활용하면 아이디어 확장과 정리는 어렵지 않아요.
하지만 방향은 다릅니다.
목적이 없다면 무엇을 보여주고, 무엇을 덜어낼지 아무것도 결정할 수 없어요.
그래서 저는 기획보다 '목적'을 먼저 정하고 그 기준으로 구조를 잡았습니다.