프로젝트 소개
지학사 2022 개정교과서 웹사이트는 교과서 변경 사항과 교육과정의 핵심 메시지를 교사, 학부모, 학생에게 일관성 있게 전달하는 것을 목표로 합니다. 본 리뷰에서는 초기 진입 동선, 핵심 과업 흐름, 페이지 간 일관성, 시각적 위계와 정보성, 상태 피드백 등 사용자 경험 전반을 점검했습니다. 특히 방문자의 주요 니즈인 교과서 정보 탐색, 수업 자료 다운로드, 과목별 안내 페이지 진입까지의 단계에서 마찰이 없는지, 검색과 필터가 학기·과목·버전 등 학교 현장에서 실제로 사용하는 용어 체계를 충실히 반영하고 있는지에 초점을 맞췄습니다. 또한 모바일 비율이 높다는 점을 고려해 터치 타깃, 폰트 대비와 행간, 성능 및 네트워크 안정성, 빈약한 연결 상황에서의 대응까지 폭넓게 점검했습니다. 이를 통해 현장의 업무 효율을 높이는 정보 구조와 명확한 컴포넌트 설계를 제언합니다.
더불어 본 검토는 제품 조직이 추후 CMS나 디자인 시스템을 확장할 때도 재사용 가능한 규칙을 남기는 것을 목표로 합니다. 예컨대 카드·리스트·테이블·다운로드 블록 등 반복 컴포넌트에 대해 상태 정의(로딩·빈 상태·오류·권한), 미디어 비율 가이드, 캡션 패턴을 명문화하면 제작과 유지보수의 품질 편차를 줄일 수 있습니다. 특히 교과 과정 변경 주기에 맞춘 아카이빙 정책과 URL 규칙을 수립하면 검색 엔진과 외부 링크의 신뢰도를 높이고, 시맨틱 마크업과 메타 태그 체계를 통해 교육기관·학교망 환경에서도 핵심 정보를 손실 없이 전달할 수 있습니다.
정보구조 및 내비게이션
최상위 IA는 “교육과정 소개 → 과목/학년 선택 → 교과서/자료 상세”로 이어지는 3단 구조가 가장 직관적입니다. 현재 사이트는 상단 글로벌 내비게이션에서 학년과 과목이 혼재되거나 용어 체계가 콘텐츠마다 상이한 경우 사용자의 인지 부하가 증가할 수 있습니다. 이를 줄이기 위해 전역 필터(학년·학기·과목)를 제공하고, 선택된 컨텍스트가 페이지를 넘나들어도 유지되도록 설계하는 것이 좋습니다. 검색은 자동완성과 교과서 코드, 저자, 판형 등 메타데이터 기반으로 보조해야 하며, 결과 리스트는 썸네일, 제목, 핵심 속성(학년/학기/과목/버전), 주요 행동(상세 보기, 자료 다운로드)을 한 화면에서 처리하도록 단순화합니다. 또한 브레드크럼은 깊이를 정확히 반영하고, 모바일에서는 오버플로를 대비한 스크롤 및 축약 규칙을 확보해야 합니다.
다운로드 리소스 페이지는 교육 현장의 워크플로에 맞춰 묶는 것이 핵심입니다. 예를 들어 “지도서 → 단원/차시별 자료 → 형식(PDF/HWP/ZIP)”의 안쪽 구조를 유지하되, 상단에는 “최근 업데이트/필수 자료/과목 공지”의 빠른 접근 영역을 둡니다. 리스트는 파일 크기와 업데이트 일자를 표기하고, 접근성 관점에서 링크 라벨을 구체화해 스크린 리더 사용자가 맥락을 잃지 않도록 합니다. 아울러 학기 전 환급·공급 일정, 수업 준비 체크리스트 같은 업무성 콘텐츠를 사이드 스니펫으로 노출하면 방문 목적 달성 시간을 크게 줄일 수 있습니다.
비주얼 아이덴티티
2022 개정의 핵심 가치를 반영하는 색상과 일러스트레이션 톤은 학습 친화성과 신뢰의 균형을 이뤄야 합니다. 현재 팔레트가 충분히 대비를 확보한다면 텍스트·배경 대비(최소 4.5:1), 버튼 호버/활성 상태 색상, 경고·정보·성공 피드백 토큰을 명확히 구분하는 것이 좋습니다. 영문/국문 타이포 조합은 제목용 가변 폰트와 본문용 고정 폭 폰트를 혼합해 행간과 자간을 상황별로 최적화할 수 있습니다. 이미지와 카드 비율은 16:9를 기준으로 하되, 학년/과목 카드에서 색상 악센트를 부여해 스캔 속도를 높이고, 표지 이미지에는 캡션을 제공하여 스크린 리더 사용자도 동일한 정보를 획득하도록 합니다. 또한 일러스트/사진 무게중심이 상·하로 치우치면 콘텐츠 블록 간 수직 리듬이 흐트러지므로, 컴포넌트 단위의 여백 규칙과 베이스라인 그리드를 도입하는 것이 바람직합니다.
다운로드 섬네일의 경우 작은 화면에서 픽셀 퍼펙트를 유지하려면 최소 2배 해상도를 제공해 레티나 스크린의 뭉개짐을 방지해야 합니다. 이미지 포맷은 JPG를 기본으로 하되, 가능하다면 WebP/AVIF를 병행 제공하고, 서버는 Accept 헤더 기반 협상을 고려해 성능을 더 끌어올릴 수 있습니다. 다만 교육기관의 구형 브라우저 호환성을 고려해 원본 자산을 함께 유지하고, 자막이 포함된 썸네일은 텍스트 정보의 대체 수단(캡션)을 반드시 제공합니다.
콘텐츠 전략과 카피라이팅
방문자의 주요 과업은 빠르게 목표 과목을 찾고, 수업 준비에 필요한 자료를 정확히 내려받는 것입니다. 이에 따라 카드 타이틀은 과목/학년/학기를 명확히 표기하고, 상세 페이지에서는 단원 요약과 학습 성취기준을 짧은 문장으로 선제적으로 보여주어야 합니다. 버튼 라벨은 즉시 행동을 유도하는 동사형으로 통일하고, 자료 유형에 따라 “미리보기”, “바로 다운로드”, “수정본 확인”처럼 기대 결과가 분명한 표현을 사용합니다. 더불어 FAQ에는 인쇄 시 여백/배율, 폰트 깨짐, 뷰어 설치 등 현장에서 반복되는 이슈를 문서화하여 지원 문의를 줄이고, 변경 이력(버전 로그)을 노출해 최신 자료 신뢰도를 높입니다.
스토리텔링 관점에서는 “왜 2022 개정이 필요한가”에 대한 맥락을 요약 카드로 상단에 배치하고, 교사 인터뷰·수업 사례·평가 자료의 관계를 시각적으로 연결해 콘텐츠의 발견 가능성을 높이는 것이 좋습니다. 메타 설명은 페이지별로 고유하게 작성하고, 오픈그래프 타이틀은 40~60자 범위에서 핵심 키워드를 포함해 공유 시 클릭률을 높입니다. 다운로드 완료 후에는 연관 자료·다음 과목으로 이동하는 라우팅을 제안하여 체류시간과 세션 가치를 동시에 끌어올릴 수 있습니다.
접근성·성능·SEO
접근성은 시맨틱 마크업과 포커스 이동, 색상 대비, 키보드 내비게이션의 네 축으로 점검했습니다. 모든 인터랙티브 요소는 키보드로 초점 이동이 가능해야 하며, 포커스 링을 CSS로 제거하지 말고 명확히 표시해야 합니다. 폼 요소에는 레이블을 연결하고, 테이블에는 캡션과 헤더 스코프를 지정해 스크린 리더가 셀 맥락을 정확히 전달하도록 합니다. 성능 측면에서는 이미지 지연 로딩과 적절한 크기 제공, CSS/JS의 크리티컬 분리, HTTP 캐싱 정책을 통해 LCP와 CLS를 안정화하는 것을 권장합니다. 또한 콘텐츠 우선 순위를 반영한 서버 사이드 렌더링이나 정적 프리렌더를 병행하면 초기 구동 시간을 크게 단축할 수 있습니다.
SEO에서는 정규 URL, 구조화 데이터(조직/웹페이지), 페이지별 고유 타이틀과 메타 설명, 의미 있는 헤딩 계층(H1→H2→H3)을 확보하는 것이 기본입니다. 교육 기관·교사 커뮤니티에서 링크가 자주 발생하는 문서의 경우, 파일명 규칙과 버전 정책을 수립해 오래된 링크가 404를 유발하지 않도록 주의합니다. 또한 다국어 지원이 있을 경우 hreflang을 정확히 표기하고, 사이트맵은 콘텐츠 변경 시 자동으로 업데이트되도록 배치합니다.
더블루캔버스 안내
더블루캔버스는 브랜드·서비스의 디지털 경험을 체계적으로 점검하고, 성장 단계에 맞춘 정보구조와 디자인 시스템을 구축하는 UX/UI 컨설팅 팀입니다. 교육/공공 영역에서 요구되는 안정성과 접근성을 중심에 두되, 콘텐츠 팀이 스스로 관리할 수 있는 체계(워크플로, 컴포넌트 가이드, 운영 정책)를 함께 제안해 실행 가능성을 높입니다. 본 리뷰에서 제시한 개선 방향은 실제 제작·운영 환경에 바로 적용할 수 있도록 구성했으며, 추가 진단이나 디자인/퍼블리싱/개발 협업이 필요하시면 아래 링크로 문의해 주세요.