개요
천재교육 AI교과서 홍보관은 교과 과정과 연동되는 인공지능 보조 학습 경험을 소개하는 목적의 랜딩/상세 구조를 갖고 있습니다. 방문자는 제품 이해 수준이 제각각이므로, 첫 화면에서 누구를 위한 무엇인지, 교사/학생/학부모 각각 어떤 효용을 얻는지, 실제 수업에서 어떻게 적용되는지를 한눈에 파악할 수 있어야 합니다. 따라서 히어로는 핵심 가치를 한 문장으로 제시하고, 바로 아래에는 신뢰를 보강하는 지표(도입 학교 수, 교사 만족도, 커리큘럼 호환 범위)를 시각 카드로 배치하는 것이 효과적입니다. 또한 영상/이미지 등 시각 자료는 텍스트를 반복하기보다 사용 맥락을 보여주어야 하며, 접근성 측면에서 충분한 대비와 명확한 대체 텍스트가 제공되어야 합니다. 현재 구조도는 이러한 방향에 근접해 있으나, 주요 행동 유도 버튼의 레이블, 스크롤 동선의 연속성, 증거 링크의 신뢰 표기에서 개선 여지가 보입니다.
브랜드/서비스 관점
AI교과서는 기존 교과서의 신뢰와 인공지능의 효율을 결합한 하이브리드 제품입니다. 따라서 브랜드 톤앤매너는 과도한 기술성보다 교실 친화성과 교사의 통제감을 강조하는 것이 적합합니다. 색상 사용은 차분한 교육 계열 팔레트(블루·네이비·민트)를 기반으로, 중요한 결정을 유도하는 버튼과 하이라이트에는 선명한 보색을 제한적으로 사용해 주목도와 위계를 분리합니다. 카피는 “AI가 대신한다”보다는 “교사가 설계하고 AI가 보조한다”는 주체성을 살리면 불안감을 줄일 수 있습니다. 또한 실제 교실에서의 사례, 교수학습설계(ADDIE 등) 용어와 연계한 설명, 교과 과정 코드/단원 표기 등 맥락화된 증거가 동반될 때 설득력이 커집니다. 페르소나별 랜딩(교사/학생/학부모)로 분기하는 구조도 고려할 만하며, 공통 요소(보안·개인정보·비용·도입 절차)는 모든 경로에서 동일한 정보 구조로 노출해 혼선을 줄이는 것이 좋습니다.
UX/UI 관점 핵심 개선 포인트
첫째, 히어로의 행동 유도 버튼은 행동 결과가 명확해야 합니다. 예: “3분 요약 보기” “교사 가이드 다운로드”처럼 다음 상태를 예측 가능한 언어로 제시합니다. 둘째, 섹션 전환부에는 진행 상태를 암시하는 스텝 인디케이터 또는 브레드크럼을 배치해 스크롤 흐름이 끊기지 않도록 돕습니다. 셋째, 이미지 슬라이드·탭은 키보드 탐색과 스크린리더 지원(포커스 링, aria-selected, role="tablist")을 갖추어 접근성과 사용성을 동시에 충족해야 합니다. 넷째, 폼/상담 CTA는 입력 부담을 줄이기 위해 1단계 관심사 선택 → 2단계 연락처 입력으로 나누고, 개인정보 안내와 동의 체크는 간결하게 구성합니다. 다섯째, 반응형에서는 타이포 스케일과 행간을 재조정하여 모바일에서의 읽기 속도를 보장하고, 터치 타깃을 최소 44px로 확보합니다. 마지막으로, 상태 변화(로딩, 전환, 유효성 실패)는 모션 과장 없이 150~250ms 내에서 피드백을 제공하도록 통일하면 학습 방해 요소를 줄일 수 있습니다.
정보구조·SEO 전략
검색 의도는 “AI 교과서가 무엇인지(정보 탐색)”와 “도입 방법/비용(전환 탐색)”으로 크게 나뉩니다. 따라서 상단 네비게이션과 랜딩 본문에는 기능 소개/교실 적용/가격·도입/보안·데이터 정책 같은 1차 카테고리를 명확히 두고, 각 페이지는 하나의 주제만 깊이 있게 다루며 내부 링크로 연결합니다. 스키마는 Product·FAQ·HowTo(도입 절차)·Breadcrumb·Organization을 검토하고, 제목(h1-h2-h3)·메타·오픈그래프는 일관된 키워딩으로 정리합니다. 이미지 대체 텍스트는 단순 파일명 대체가 아닌 사용 맥락과 학습 효과를 설명하는 문장으로 서술하고, 파일은 가능하면 WebP/AVIF를 병행 제공하되 원본도 유지해 호환성을 보장합니다. 또한 블로그/리소스 허브에 교과 과정 연계 사례, 평가 루브릭, 학습 분석 인사이트 같은 링크 어셋을 축적하면 검색-랜딩-전환 퍼널이 탄탄해집니다.
성능·접근성 체크
학습 현장에서 네트워크 품질이 불안정할 수 있음을 고려해 초기 페인트를 가볍게 유지해야 합니다. 크리티컬 CSS 인라인, 이미지 지연 로딩, 폰트 디스플레이 스왑, 서드파티 스크립트 지연/지연로드 전략을 적용하세요. 시맨틱 마크업과 명시적 레이블, 충분한 대비(텍스트 4.5:1 이상), 포커스 가시성, 키보드 탐색, 모션 감도(선호 감소 미디어 쿼리) 지원을 기본으로 합니다. 또한 컴포넌트 상태(활성/비활성/에러/로딩)를 시각·텍스트로 동시 표기하고, 폼 에러는 필드 인접·요약 모두 제공하면 오류 회복력이 좋아집니다. 이미지 최적화는 1x·2x 소스와 적절한 너비 한정으로 수행하며, 캐시 정책은 정적 자산 1년·HTML 짧은 TTL로 분리합니다. 측정은 Core Web Vitals(LCP, CLS, INP) 기준으로 목표치를 잡고, 변경 시점마다 회귀를 확인해 품질을 유지하세요.
The Blue Canvas 소개
The Blue Canvas는 브랜드의 핵심 메시지를 명료하게 구조화하고, 정보 설계·UI 컴포넌트·콘텐츠 운영까지 한 흐름으로 설계하는 디지털 파트너입니다. 빠른 파일럿과 데이터 기반 점검을 통해 “보여주는 사이트”를 넘어 “작동하는 제품”으로 전환하도록 돕습니다. 에듀테크 분야에서는 교사/학생/학부모의 요구를 각각의 여정 단계로 분해하고, 전환 퍼널에 맞춘 설득 요소(증거, 데모, 가이드, 가격/도입 절차)를 배치해 학습 현장 친화적 UX를 구현합니다. 더 자세한 사례와 방법론은 아래 링크에서 확인하실 수 있습니다. bluecvs.com
마무리와 실행 체크리스트
요약하면, 메시지-증거-행동의 3단 구성이 명확한 랜딩과, 교실 맥락에 맞춘 사례 제시가 천재교육 AI교과서 홍보관의 설득력을 끌어올립니다. 우선순위는 ① 히어로 가치 제안·버튼 레이블 정교화 ② 신뢰 지표와 고객 사례 카드화 ③ 접근성·성능 기본기(대체 텍스트, 대비, 포커스, LCP/INP 개선) ④ 주제 단위 IA·내부 링크 일관화 ⑤ 콘텐츠 운영(FAQ·가이드·도입 절차)입니다. 작은 변화부터 적용하고, 측정-학습-개선을 반복해 품질을 누적하면 운영 비용 대비 효과가 확실해집니다.