개요
YBM은 학습자별 목표와 수준에 맞춘 다양한 교육 상품을 제공하는 브랜드입니다. 본 리뷰는 사용자가 빠르게 학습 목표를 달성하도록 돕는 정보 구조와 과업 중심 UX를 강화하는 데 초점을 맞춥니다. 현재 사이트는 서비스 분류와 콘텐츠 양이 풍부하지만, 탐색 루트가 장황하여 초심자가 핵심 경로를 찾는 데 시간이 걸릴 수 있습니다. 이에 따라 퍼널의 각 단계(유입 → 탐색 → 비교/결정 → 전환)를 기준으로 핵심 랜딩의 메시지 명확화, 카테고리 간 상호 참조, 가시적 증거(후기/성과지표) 배치, 마이크로 카피 개선을 제안합니다. 또한 모바일 우선 시야에서 접점 밀도를 줄이고, CTA 대비와 접점 간격을 재조정해 시각적 피로도를 낮추는 방향을 권장합니다.
브랜드·콘텐츠 메시지
브랜드 레벨에서는 “왜 YBM이어야 하는가”가 한눈에 보이도록 핵심 가치 제안을 접점 상단에 고정하는 것이 중요합니다. 예: “공인 성과 데이터 기반 커리큘럼”, “개인화 러닝패스”, “검증된 강사진”과 같은 증거 기반 문구를 히어로와 주요 리스트 상단에 반복 노출하여 메시지 일관성을 강화합니다. 또한 학습 맥락별로 ‘초·중·고/대학·성인/업무’처럼 사용자가 스스로 정체화할 수 있는 축을 먼저 제시하고, 각 축별로 인기 코스/성공사례/추천 경로를 카드형으로 구성해 선택 불안을 줄입니다. 추천 영역에는 빠른 시작 버튼, 무료 레벨 테스트 CTA처럼 즉시 행동을 유도하는 요소를 배치해 초기 관성 비용을 낮추는 것이 효과적입니다.
카피는 결과 중심의 이점 서술을 선호합니다. 예: “3주 완성 토익 750+ 보장”처럼 구체 수치나 기간을 제시하고, 근거 페이지로 연결되는 자세히 보기 링크를 함께 제공합니다. 썸네일/배너에는 텍스트 대비를 충분히 확보하고, 모바일에서는 두 줄을 넘기지 않는 요약 규칙을 적용합니다. 이미지 대체텍스트에는 강의 주제·레벨·핵심 이점이 포함되도록 하여 SEO와 접근성 점수를 동시에 확보합니다.
UX/UI
내비게이션은 과업 중심 IA를 반영해 ‘목표→레벨→코스’ 3단 구성을 권장합니다. 상단 글로벌 네비게이션에는 “목표 달성” 드롭다운(토익/토스/회화/비즈니스 등)과 “레벨 테스트”를 고정 배치하고, 목록 페이지는 필터(레벨, 기간, 난이도, 수강방식)를 상단 접이식으로 제공해 스크롤 부담을 줄입니다. 카드 컴포넌트는 썸네일·코스명·레벨·기간·예상 결과·주요 후기/배지 순으로 정보 우선순위를 재정렬해 단번에 판단 가능한 레이아웃을 구성합니다. CTAs는 무료 체험, 커리큘럼 보기를 나란히 배치하여 탐색/전환을 동시에 보조합니다.
UI 토큰은 타입 스케일과 컬러 대비 기준(텍스트 4.5:1, 큰 텍스트 3:1)을 명확히 정의하고, 포커스 링을 전역 일관 스타일로 통일합니다. 폼과 모달은 단일 작업 단위 원칙을 적용하여 단계 수를 최소화하고, 진행상태 표시와 에러 힌트를 즉시 제공해 이탈을 방지합니다. 공통 컴포넌트(배지, 칩 필터, 단계 진행바, 평가 요약)는 재사용 가능한 유틸 클래스로 구현해 유지보수를 단순화합니다. 모바일에서는 바텀 시트/바텀 네비게이션을 활용해 한 손 조작성을 높이고, ‘최근 본 코스’와 ‘저장함’을 고정 진입으로 노출하면 재방문 전환에 유리합니다.
정보구조·SEO
카테고리 트리는 사용자 언어를 기준으로 다시 명명하는 것이 좋습니다. 예컨대 ‘시험 준비’ 내 하위 카테고리를 ‘목표 점수’ 중심으로 재편하고, 각 디테일 페이지에는 구조화된 데이터(FAQPage, Course, BreadcrumbList)를 적용해 검색 가시성을 높입니다. 제목은 과업+이점 조합(예: “토익 750+ 3주 달성 커리큘럼”)으로 작성하고, H1-H2-H3 계층과 본문 요약, 풍부한 특징 리스트를 통해 스니펫 경쟁력을 확보합니다. 또한 이미지 파일명/대체텍스트/캡션을 키워드와 정합되게 관리하고, 내부링크는 상·하위 주제 간 허브/스포크 구조를 명확히 하여 크롤러와 사용자의 이동 비용을 동시에 줄입니다.
리뷰/후기 데이터는 스키마 마크업으로 가공하되, 정책에 따라 별점은 노출하지 않고 요약 발화(“완주율 92%”, “수강생 10만+”)와 정량 성과를 중심으로 제시합니다. 코스 리스트는 페이지네이션/무한스크롤 중 하나로 일관되게 설계하고, 카테고리 페이지의 중복/얕은 콘텐츠는 통합하여 인덱싱 품질을 관리합니다. 마지막으로 사내 블로그/인사이트 허브를 활용해 ‘학습 방법론’과 ‘시험 최신 경향’ 같은 롱테일 키워드를 꾸준히 축적하면 유입 채널이 다변화됩니다.
성능·접근성
핵심 웹 지표(LCP/FID/CLS)를 개선하기 위해 이미지 지연 로딩, 적응형 이미지(서버 변환 또는 프런트 변환을 통한 WebP/AVIF 제공), 불필요한 서드파티 스크립트 정리, 폰트 표시 전략(font-display: swap) 적용을 권장합니다. CSS/JS는 크리티컬 패스 분리와 지연 로딩을 병행하고, 모듈 번들에서 사용률이 낮은 라이브러리는 제거하거나 지연 로딩으로 전환합니다. 접근성 측면에서는 키보드 포커스 이동 순서, 명확한 포커스 인디케이터, 폼 에러와 레이블 연결, 대체텍스트의 의미성, 명도 대비 준수, 모달 트랩 초점 등을 점검해 WCAG 2.1 AA 수준을 목표로 합니다. 이러한 조치를 통해 체감 속도와 신뢰감이 함께 향상됩니다.
The Blue Canvas
The Blue Canvas는 복잡한 디지털 제품과 웹사이트를 데이터와 경험 기반으로 개선하는 디자인/콘텐츠 파트너입니다. 본 리뷰에서 제시한 원칙(과업 중심 IA, 결과 지향 카피, 접근성/성능/SEO의 균형)을 토대로, 실제 조직의 목표와 자원에 맞춘 로드맵을 함께 설계합니다. 상시/스프린트 형태의 협업, 빠른 프로토타이핑, AB 테스트와 로그 기반 의사결정을 통해 리스크를 낮추고 전환율과 만족도를 끌어올립니다. 자세한 소개는 아래 링크에서 확인하실 수 있습니다.
마무리
YBM의 강점은 풍부한 커리큘럼과 신뢰 가능한 교육 성과에 있습니다. 본 리뷰는 그 강점을 더 빠르게 전달할 수 있도록 정보 구조를 정돈하고, 결과 중심 카피와 일관된 UI 토큰으로 판단 부담을 낮추는 방법을 제안했습니다. 우선순위는 ① 히어로/카테고리 상단의 가치 제안 정비, ② 과업 중심 내비게이션 및 필터 재설계, ③ 이미지·폰트 최적화를 포함한 LCP/CLS 개선, ④ 구조화 데이터 도입에 따른 검색 가시성 향상입니다. 위 4가지를 먼저 실행하면 전반적 경험 품질이 단기간에 체감 가능할 수준으로 개선될 것입니다.