프로젝트 상담 신청 지학사 교과서 - UX/UI 리뷰 | The Blue Canvas
UX/UI Review

지학사 교과서 Website Design Review

2026-08-27·교과서 출판

교과서 사이트는 학생이 아니라 교사가 먼저 연다. 지학사는 그 순서를 화면 구조에 그대로 반영했다.

홈페이지 제작 상담 보기

개요

핵심 요약

  • 지학사는 초등·중학·고등 교과서를 각각 별도 페이지(main_ele2025, main_mid2025, main_hi2025)로 운영한다.
  • 히어로 카피는 ‘선생님껜 편리함을, 학생에겐 자신감을’이며 교과서 표지 일러스트를 배경으로 배치한다.
  • 수업 지원 플랫폼 ‘티솔루션’을 별도 구획으로 소개하고, 노래 익히기·아트뮤지엄·게임 활동 수업 등 열두 개 이상의 기능을 아이콘 그리드로 나열한다.
  • ‘FIND YOUR TEXTBOOK’ 구획에서 수학·과학·사회·음악·미술·체육 교과서 표지를 캐러셀로 보여준다.
  • ‘FROM THE AUTHORS’ 구획에 실명·직함을 밝힌 저자 인터뷰를 배치했다.

지학사 교과서 사이트는 초등 교과서를 다루는 페이지다. 상단 GNB에는 초등·중학·고등 교과서와 함께 ‘AI 디지털 교육자료’ 외부 링크, ‘티솔루션’, ‘이벤트’가 나란히 놓인다. 히어로는 노란 그라디언트 배경에 교과서 표지들을 원근감 있게 흩뿌려 놓고, 그 위에 ‘선생님껜 편리함을, 학생에겐 자신감을’이라는 카피와 ‘픽셀별 교과서 보기’ 버튼을 얹었다.

곧이어 ‘선생님의 수업 준비에 솔루션을 제시합니다’라는 문장과 함께 티솔루션 화면 목업이 등장한다. 이번 리뷰에서는 교사 대상 수업 지원 도구와 학생 대상 교과서 갤러리를 하나의 페이지에서 함께 다루는 구성, 그리고 학년별로 사이트 자체를 나눈 정보 구조를 살펴본다.

지학사 교과서 웹사이트 메인 화면 스크린샷

브랜드 & 메시지

이 사이트가 먼저 말을 거는 대상은 학생이 아니라 교사다. 히어로 카피부터 ‘선생님껜 편리함을’이 앞에 오고 ‘학생에겐 자신감을’이 뒤따른다. 실제 구매·채택을 결정하는 사람이 교사라는 점을 화면 순서에 그대로 반영한 판단이다. 이어지는 티솔루션 소개도 ‘수업 준비’라는 교사의 일상 업무를 정확히 짚는다.

동시에 ‘FIND YOUR TEXTBOOK’ 구획과 ‘ENGLISH · ART · MUSIC · PHYSICAL ED’ 마퀴 배너에서는 교과서 표지 자체를 캐릭터 일러스트로 채워 학생·학부모가 봐도 친근한 인상을 만든다. ‘FROM THE AUTHORS’ 구획에서 초등 음악 대표 저자의 실명과 직함, 코멘트를 노출하는 방식은 교재의 신뢰도를 저자 개인의 권위로 뒷받침하는 화법이다.

키워드: 교사 우선 카피, 티솔루션 업무 도구, 캐릭터 교과서 표지, 실명 저자 인터뷰

UX/UI 관점

강점은 다섯 가지다. 첫째, 히어로에서 곧바로 ‘티솔루션 바로가기’ 버튼으로 실제 업무 도구에 연결한다. 홍보 문구로 시간을 끌지 않고 도구 접근을 앞세운다. 둘째, 노래 익히기·아트뮤지엄·게임 활동 수업·차시별 수업 PPT·교과 평어 등 교사가 실제로 쓰는 기능을 아이콘 그리드로 나열해, 무엇을 지원하는 플랫폼인지 스크롤 한 번으로 파악하게 한다.

셋째, ‘FIND YOUR TEXTBOOK’ 캐러셀에서 수학·수학익힘·과학·실험관찰·사회·음악·미술·체육을 과목명과 학년을 붙여 나열해, 원하는 교과서를 바로 찾을 수 있게 했다. 넷째, 교과서 표지마다 캐릭터 일러스트를 반복 배치해 같은 시리즈라는 인상을 시각적으로 통일했다. 다섯째, 저자 인터뷰 구획을 캐러셀로 구성해 여러 과목 저자를 순환 노출한다. 여섯째, 초등·중학·고등을 GNB 탭 하나로 전환할 수 있게 해, 자녀가 여러 학년인 학부모나 여러 학년을 가르치는 교사가 같은 화면 구조 안에서 이동할 수 있다.

키워드: 도구 우선 CTA, 기능 아이콘 그리드, 학년 탭 전환, 저자 신뢰 캐러셀

IA·SEO 전략

title은 ‘지학사 초등 교과서 | 선생님껜 편리함을, 학생에겐 자신감을’로 브랜드·학년·핵심 카피를 모두 담았고, description은 ‘지학사 교과서와 수업지원 플랫폼 티솔루션을 한곳에서 만나보세요.’로 짧게 정리돼 있다. 다만 직접 확인한 초기 HTML에서 canonical 태그와 hreflang, 그리고 application/ld+json 구조화 데이터는 확인되지 않았다. 초등·중학·고등 세 페이지가 사실상 같은 레이아웃을 공유하는 구조라, canonical이 없으면 검색엔진이 세 페이지를 서로 다른 독립 문서로 볼지, 어떻게 관계 지을지가 불분명해진다.

CSS 파일에 ‘ver=20260828’ 같은 쿼리스트링이 붙어 있는 걸 보면 콘텐츠는 꾸준히 갱신되고 있다. 이 갱신 리듬에 EducationalOrganization이나 Book 구조화 데이터를 얹으면, ‘초등 3학년 과학 교과서’ 같은 학년·과목 조합 검색에서 이 페이지가 인용될 근거가 더 뚜렷해진다.

성능·접근성

히어로의 홀로그래픽 그래픽과 교과서 표지 캐러셀, 저자 인터뷰 인물 사진까지 이미지 비중이 높은 페이지다. 상단 히어로 이미지는 첫 화면에 바로 보이는 만큼 우선 로딩이 맞지만, 캐러셀과 저자 구획의 이미지는 스크롤 진입 시점에 지연 로딩하는 편이 초기 응답 속도에 유리하다.

접근성 측면에서는 노란 그라디언트 배경 위 텍스트의 대비, 그리고 캐러셀의 좌우 이동 버튼이 키보드로도 조작되는지 점검할 필요가 있다. 아이콘 그리드의 기능명(노래 익히기, 계기 교육 등)에는 짧은 설명이 함께 붙어 있어 처음 보는 교사도 기능을 유추할 수 있는 편이다. 교과서 표지 이미지의 alt 텍스트에 과목·학년을 명시하면 이미지 검색 유입에도 도움이 된다.

자주 묻는 질문

지학사 초등 교과서 사이트에서 무엇을 확인할 수 있나요?

수학·과학·사회·음악·미술·체육 등 학년별 교과서 표지와 목차를 갤러리 형태로 확인할 수 있고, 교사용 수업 지원 플랫폼인 티솔루션으로 바로 연결됩니다. 학년은 GNB 탭으로 초등·중학·고등을 전환합니다.

교과서 출판사 홈페이지는 교사와 학생 중 누구를 기준으로 설계해야 하나요?

채택과 구매를 결정하는 교사를 우선 기준으로 삼는 편이 효과적입니다. 지학사처럼 히어로 카피와 첫 CTA를 교사의 업무(수업 준비)에 맞추고, 학생·학부모용 요소는 이어지는 구획에 배치하는 순서가 일반적입니다.

학년별로 사이트를 나누면 SEO에 불리하지 않나요?

학년별 페이지가 명확히 구분되면 각 학년 검색 의도에 맞는 콘텐츠를 정확히 제공할 수 있어 유리할 수 있습니다. 다만 canonical과 구조화 데이터로 세 페이지의 관계를 명시해야 중복 콘텐츠로 오인되는 위험을 줄일 수 있습니다.

교육 플랫폼 사이트에 AI 개요나 AI 답변 인용이 필요한가요?

학부모와 교사 모두 학년·과목별 정보를 검색으로 찾는 경우가 많아 유효합니다. 교과서별 특징을 짧고 완결된 문장으로 정리하고 FAQ 구조화 데이터를 추가하면 질문형 검색에 대응할 수 있습니다.

디지털 파트너 더블루캔버스

교육 콘텐츠 사이트는 학년·과목이라는 축으로 페이지가 기하급수적으로 늘어난다. 이 구조를 사람이 손으로 관리하면 페이지 간 일관성이 쉽게 깨지고, canonical이나 구조화 데이터 같은 기술적 요소는 뒤로 밀리기 쉽다.

The Blue Canvas(더블루캔버스)는 이런 학년·과목형 콘텐츠 구조에 공통 템플릿과 구조화 데이터를 함께 설계하는 작업을 다룬다. 페이지가 늘어나도 검색엔진이 각 페이지의 관계를 정확히 이해하도록 canonical·사이트맵 체계를 먼저 세우고, 그 위에 콘텐츠를 얹는 순서를 따른다.

The Blue Canvas 홈페이지 제작 문의

마무리와 다음 스텝

지학사 교과서 사이트는 교사의 업무 흐름을 먼저 읽고 화면 순서를 설계한 점이 뚜렷하다. 티솔루션 도구를 히어로 바로 아래 배치한 판단, 기능을 아이콘 그리드로 압축한 구성, 저자 인터뷰로 신뢰를 더한 방식 모두 교육 콘텐츠 사이트로서 설득력이 있다.

실행 제안은 셋이다. 첫째, 초등·중학·고등 세 페이지에 canonical과 상호 링크를 명시해 검색엔진이 구조를 정확히 읽게 한다. 둘째, EducationalOrganization·Book 구조화 데이터를 추가해 학년·과목 조합 검색에서의 노출 근거를 마련한다. 셋째, 캐러셀·저자 구획 이미지에 지연 로딩을 적용해 첫 화면 로딩 부담을 줄인다. 콘텐츠의 깊이는 이미 갖춰져 있으니, 남은 일은 기술적 뼈대를 그 깊이에 맞추는 것이다.

함께 보면 좋은 리뷰

리뷰 전체 보기