홈페이지 섹션 11개를 5개로 줄인 이유 — 정보 과잉 vs 깔끔함의 줄다리기
엽쌤스쿨을 처음 만들 때, 할 수 있는 모든 것을 홈페이지에 넣고 싶은 욕심이 있었습니다. 에듀테크 도구 클라우드, 캘린더, 타임라인, 포토 갤러리, 연수 후기, 방명록, 미니 플레이어까지… 결국 홈페이지에 11개의 섹션이 쌓였습니다.
그런데 어느 순간 깨달았습니다 — **"이건 홈페이지가 아니라 전단지"**라고.
무엇이 문제였나
1. 스크롤 피로도
모바일에서 홈페이지를 끝까지 스크롤하면 손가락이 아팠습니다. 스크롤 깊이가 약 6,000px에 달했으니까요. 연구에 따르면 사용자의 57%가 첫 스크롤 내에서 이탈한다고 합니다. 11번째 섹션까지 볼 방문자는 거의 없는 셈이죠.
2. 정보의 위계가 불분명
모든 섹션이 동등한 크기로 나열되니, 정작 중요한 콘텐츠가 무엇인지 전달되지 않았습니다. "이 사이트가 뭘 하는 곳이지?"라는 질문에 홈페이지가 명확히 답하지 못하고 있었어요.
3. 로딩 성능
11개 섹션에 각각의 애니메이션, 이미지, 아이콘이 들어가니 초기 로딩 시간도 느려지고, 특히 모바일 환경에서 버벅이는 느낌이 있었습니다.
내린 결정: 축소 + 분리
고민 끝에 다음과 같이 구조를 재설계했습니다:
홈페이지 (5개 섹션으로 축소)
- 히어로 — 한 줄로 엽쌤스쿨의 정체성 전달
- Featured Highlights — 핵심 콘텐츠 3개 하이라이트
- 연수 후기 캐러셀 — 사회적 증거(Social Proof)
- 캘린더 — 다가올 연수 일정
- 방명록 — 소통 공간
서브 페이지 신설
/portfolio— 포트폴리오 & 프로필 전체/tools— 에듀테크 도구 아카이브/showcase— 에듀테크 갤러리 (미니 웹앱 체험)/library— 에듀테크 나눔 서재
네비게이션 드롭다운의 탄생
서브 페이지가 생기니 자연스럽게 네비게이션도 바꿔야 했습니다. 단순히 링크를 나열하면 메뉴가 너무 많아지니까, 카테고리별 드롭다운을 도입했습니다.
소개 ▾ 에듀테크 ▾
├ 엽쌤 소개 ├ 에듀테크 갤러리
└ 포트폴리오 ├ 나눔 서재
└ 에듀테크 도구
여기서도 고민이 있었는데, 모바일에서 드롭다운은 사용성이 떨어질 수 있다는 점이었습니다. 결국 데스크톱은 hover/click 드롭다운, 모바일은 아코디언 형태로 분리 구현했어요.
결과
리팩토링 후 체감할 수 있는 변화:
| 지표 | Before | After | |------|--------|-------| | 홈 스크롤 깊이 | ~6,000px | ~3,200px | | 홈 섹션 수 | 11개 | 5개 | | 서브 페이지 | 0개 | 4개 | | 첫 인상 명확도 | 혼란 😵 | 깔끔 ✨ |
교훈
"더 많이 보여주는 것이 더 좋은 것은 아니다."
이 경험은 교사로서도 적용할 수 있는 교훈입니다. 수업에서도 한 차시에 모든 걸 담으려 하면, 학생들은 아무것도 기억하지 못합니다. 핵심을 선택하고 나머지는 적절한 시점에 제공하는 것 — 이것이 정보 설계의 본질이 아닐까 생각합니다.
엽쌤스쿨은 지금도 계속 진화하고 있습니다. 앞으로도 "단순함 vs 풍부함"의 균형을 고민하며 발전시켜 나가겠습니다. 💪