개요
삼양미디어(삼양교육)는 초등·중·고 교과서와 교사용 지도서, 단행본을 펴내는 교육 출판 브랜드다. 메인 화면 첫인상은 명확하다. C언어 프로그래밍, 미래를 코딩하는 힘!이라는 히어로 카피가 프로그래밍 교과서 표지와 함께 정중앙을 차지하고, 그 위에 붙은 2022개정·고등 배지가 어떤 학교급과 개정 교육과정을 겨냥한 책인지 한눈에 알린다. 스크롤을 내리면 교과서 진열대, 교사용 지도서 캐러셀, 견본도서 신청과 문의 접수 동선이 차례로 이어진다. 이번 리뷰는 이 한 장의 메인이 교사와 학교 담당자, 그리고 개인 구매자에게 얼마나 빠르게 답을 주는지, 교과서 출판사 웹사이트로서의 UX/UI와 홈페이지 제작 관점의 개선 여지를 함께 살핀다.
브랜드 & 메시지
상단에는 교과서·단행본·교사지원·진로프로그램 및 교구, 네 개의 대분류 탭이 놓이고, 그 아래로 초등학교·중학교·고등학교·지도서·교과 관련 교재·고객센터가 학교급 중심으로 정렬된다. 출판 카탈로그를 다루는 사이트답게 정보 축이 명료하다. 로고는 (주)삼양미디어·삼양교육을 나란히 적어 사명과 교육 브랜드를 동시에 각인시킨다. 톤앤매너는 밝은 스카이블루 그라디언트에 3D 리본과 구체, 별 모티프를 얹어 교실과 학습자를 떠올리게 하는 친근한 분위기다. 무거운 교재 이미지를 파스텔 배경이 가볍게 받쳐 주는 배색 감각이 좋다. 다만 히어로의 행동 유도는 약하다. 카피는 선명한데 정작 이 교과서를 채택하거나 견본을 받아보는 버튼이 히어로 안에 없어, 감탄이 곧바로 행동으로 이어지지 못한다. 견본도서 신청·문의 접수라는 핵심 CTA는 한참 아래 카드 영역에서야 등장한다.
UX/UI 관점
화면을 뜯어보면 이 사이트가 누구를 위해 설계됐는지 분명하다. 강점을 짚어 본다. 첫째, 우측에 고정된 플로팅 퀵메뉴가 강력하다. 학교 구매 안내·견본도서 신청·문의 접수·교사 티칭툴, 네 버튼이 스크롤 내내 따라오며 교사와 구매 담당자의 핵심 업무를 항상 손닿는 곳에 둔다. 둘째, 교과서 진열에 2022 개정·2015 개정 탭을 달아 교육과정 개정 연도로 즉시 걸러 보게 한 점이 도메인에 정확히 들어맞는다. 셋째, 견본도서 신청과 문의 접수를 나란한 두 장의 카드로 묶고 각기 다른 일러스트와 바로가기 버튼을 붙여, 성격이 다른 두 요청을 헷갈리지 않게 갈랐다. 넷째, 책 표지를 큼직한 그리드와 좌우 캐러셀로 배치해 표지만 훑어도 라인업이 파악된다. 교사용 지도서 캐러셀은 가운데 항목을 확대해 초점을 만든다. 다섯째, 카카오톡 채널 버튼과 큼직한 고객센터 번호(02-335-3030)를 함께 노출해 디지털과 전화, 양쪽 문의 채널을 동시에 열어 둔다. 여섯째, 밝은 컬러와 3D 일러스트가 교육 수요자에게 부담 없는 인상을 주면서도 표지 이미지의 가독성을 해치지 않는다. 웹디자인의 균형 감각이 돋보이는 대목이다.
IA·SEO 전략
교과서 출판사의 검색 수요는 대부분 책 이름과 학교급·과목·개정연도 조합에서 나온다. 고등 정보 교과서, C언어 교과서, 식품안전과 건강 지도서처럼 구체적인 질의가 실제 트래픽을 만든다. 그렇다면 각 교재 상세 페이지는 개정연도·학교급·과목을 파세트로 갖는 고유 URL을 가지고, 그 조합이 title과 H1, meta description에 그대로 반영돼야 한다. 표지 중심 진열은 보기엔 좋지만 표지가 이미지라 텍스트 신호가 빈약해지기 쉽다. 교재명·저자·대상 학년을 구조화 데이터(Book/Product 스키마)로 실어 검색 스니펫에 노출하면 클릭률이 달라진다. 메인의 공지사항이 게시물이 없습니다 상태로 비어 있는 점도 아깝다. 채택 안내, 학습 자료, 개정 교육과정 해설 같은 콘텐츠는 그 자체로 검색 유입 자산이 된다. 웹사이트 제작 단계에서 카탈로그 구조와 콘텐츠 축을 함께 설계하면 이런 자산이 자연스럽게 쌓인다.
성능·접근성
성능 부담의 대부분은 이미지다. 히어로의 3D 일러스트와 수십 종의 책 표지가 한 화면에 몰려 있으니, 표지 이미지는 WebP·AVIF로 내보내고 명시적 width·height로 레이아웃 이동(CLS)을 막는 것이 급선무다. 첫 화면 밖 캐러셀 표지는 지연 로딩하되 히어로 표지는 즉시 로딩해 LCP를 지킨다. 카카오톡 채널 스크립트 같은 외부 자원은 상호작용 시점까지 초기화를 미뤄 메인 스레드 점유를 줄인다. 접근성에서는 표지 이미지마다 교재명을 담은 대체 텍스트가 필요하다. 지금처럼 표지가 곧 정보인 화면에서 alt가 비면 스크린리더 사용자에게는 빈 벽이나 다름없다. 좌우 캐러셀은 키보드 조작과 일시정지를 지원하고, 파스텔 배경 위 옅은 회색 보조 문구는 대비 기준(4.5:1)을 다시 점검할 값어치가 있다.
디지털 파트너 더블루캔버스
교과서와 교재를 만드는 곳의 웹사이트는 단순한 소개 페이지가 아니라 채택을 부르는 영업 창구이자, 교사와 학교가 견본을 신청하고 문의를 넣는 업무 도구다. 삼양미디어의 메인은 그 골격을 이미 갖췄고, 남은 과제는 히어로의 행동 유도, 카탈로그의 검색 구조, 이미지 성능처럼 전환과 유입을 좌우하는 디테일이다. The Blue Canvas는 이런 교육·출판 도메인의 홈페이지 제작을 카탈로그 정보 구조 설계부터 시작해, 검색엔진최적화(SEO)로 교재명·학교급 질의를 끌어오고, 퍼포먼스 마케팅으로 견본 신청과 채택 상담까지 이어지는 흐름을 하나로 엮는다. 웹디자인과 개발, 콘텐츠, 광고를 따로 굴리지 않고 한 팀에서 실험하며 다듬는 것이 우리의 방식이다.
마무리와 다음 스텝
삼양미디어의 메인은 교육 출판사가 무엇을 파는지, 어디로 문의해야 하는지를 밝고 정돈된 화면으로 잘 전한다. 여기서 한 걸음 더 나아갈 실행 제안은 세 가지다. 첫째, 히어로 안에 견본도서 신청·채택 문의 버튼을 넣어 첫 화면에서 바로 행동이 일어나게 한다. 둘째, 교재 상세를 개정연도·학교급·과목 파세트의 고유 URL과 구조화 데이터로 재설계해 교재명 검색 유입을 흡수한다. 셋째, 표지 이미지를 WebP로 최적화하고 alt·캐러셀 접근성을 손봐 성능과 포용성을 동시에 끌어올린다. 이 세 가지만 정리해도 웹사이트 제작의 완성도와 전환율이 함께 오른다.