개요
비상교재 & 비상서점(book.visang.com)은 비상교육이 펴낸 교재를 사고, 학습 자료를 내려받고, 사용 후기를 남기는 일을 한 화면에 모아 둔 교육 커머스 허브다. 첫 화면은 통통 튀는 파란 마스코트가 등장하는 공부의 힘! 완자 공부력 시리즈 히어로로 문을 열고, 바로 아래 신간 교재 후기 쓰고 포인트 받기! 배너가 방문자를 후기 작성으로 끌어당긴다. 초등·중등·고등으로 갈리는 상단 메뉴, 학년을 골라 진열을 바꿔 보는 추천 영역, 별점과 이모지 표정이 달린 후기 카드까지 — 서점의 판매 동선과 학습 콘텐츠, 포인트 리워드가 촘촘히 엮여 있다. 이 리뷰는 그 화면을 실제로 뜯어보며, 교재라는 오프라인 상품을 웹에서 어떻게 고르게 만드는지, 서로 다른 방문자층을 하나의 웹디자인 안에 어떻게 녹였는지를 UX/UI 관점에서 살핀다.
브랜드 & 메시지
헤드라인은 제품 슬로건을 그대로 얹었다. 공부의 힘! 완자 공부력 시리즈라는 한 줄과 표정을 가진 파란 캐릭터가 결합해, 딱딱해지기 쉬운 교재 브랜드에 친근한 얼굴을 입혔다. 페이지 밑단의 Above Imagination — 상상 그 이상, 비상 태그라인은 이 톤을 브랜드 차원에서 다시 못 박는다. 컬러는 비상 특유의 밝은 블루를 축으로 핑크·민트·옐로 파스텔을 카드마다 번갈아 써서, 정보량이 많은 화면을 지루하지 않게 분할한다. CTA도 눈에 띈다. 구매하기처럼 직접 밀지 않고 후기 쓰고 포인트 받기, 친구랑 공부하고 선물받자처럼 참여형 보상을 앞세운다. 상단 내비게이션은 초등·중등·고등·자료·이벤트로 요약되고, 두 번째 화면에서는 학원선생님 전용 뷰로 전환돼 같은 브랜드가 학부모·학생과 교사라는 서로 다른 방문자를 각각의 입구로 안내한다.
UX/UI 관점
화면에서 확인되는 설계 강점을 짚으면 이렇다. 첫째, 비상이 추천하는 [초등 ▾] 교재의 학년 드롭다운은 페이지를 새로 열지 않고도 진열 상품을 바꿔, 교재 쇼핑에서 가장 중요한 내 학년 찾기를 한 번의 클릭으로 끝낸다. 둘째, 후기 섹션은 별점과 빨강·초록 이모지 표정을 함께 노출해, 글을 읽기 전에도 만족도가 눈에 먼저 들어온다. 셋째, 학습 자료실과 고객지원을 아이콘 그리드로 나란히 배치해 자료 받기와 문의하기라는 두 핵심 과업을 상단에서 바로 잡아준다. 넷째, 모든 블록을 둥근 모서리 카드로 감싸고 여백을 넉넉히 둬, 책 표지·일러스트·배너가 뒤섞여도 시선이 정돈된다. 다섯째, 후기 작성 포인트와 친구 추천 5,000P 같은 리워드 루프가 화면 곳곳에 심겨 재방문 동기를 만든다. 여섯째, 학원선생님 뷰의 PDF 자료 다운로드는 교사 실무 동선을 소비자 화면과 분리해 준다. 이런 디테일이 모여 교재 커머스 특유의 복잡한 정보를 다루기 쉬운 UX/UI로 정리한다.
IA·SEO 전략
교재 사이트의 검색 승부처는 학년 + 과목 + 개정 교육과정 조합 검색이다. 화면에 보이는 22개정, 중학 수학 2-1 같은 라벨은 그대로 강력한 검색어이므로, 학년·과목·개정별 진열 페이지가 각각 고유한 URL과 title·description을 갖도록 만들어 크롤러가 개별 지면으로 색인하게 해야 한다. 지금처럼 드롭다운만으로 진열을 바꾸면 그 상태가 주소에 남지 않아 검색에 잡히지 않을 수 있으니, 필터 결과에 정적 URL을 부여하는 편이 낫다. 교재 상세에는 Product·Review 구조화 데이터를 붙여 별점과 가격을 검색 결과에 노출시키고, 방문자가 남긴 후기 UGC는 그 자체로 롱테일 검색을 끌어오는 자산이므로 상세 페이지에 함께 실어 색인 대상으로 삼는다. 이런 정비는 웹사이트 제작 단계에서 정보 구조를 잡을 때 함께 설계돼야 나중의 재작업을 줄인다.
성능·접근성
이 화면은 책 표지 썸네일과 캐릭터 일러스트, 배너 이미지가 유난히 많다. 캐러셀로 도는 추천 교재와 후기 카드까지 더하면 초기 로딩에 실리는 이미지 수가 상당하므로, 표지 썸네일은 WebP로 내보내고 명시적 width/height를 지정해 레이아웃이 밀리는 CLS를 막아야 한다. 첫 화면 밖의 캐러셀 이미지는 지연 로딩으로 미루고, 여러 개가 동시에 도는 슬라이더 스크립트는 하나로 묶어 메인 스레드 점유를 줄이는 게 좋다. 접근성 측면에서는 별점을 이미지로만 표현하지 말고 5점 만점에 5점처럼 읽히는 대체 텍스트를 넣고, 표정 이모지에도 의미를 부여해야 스크린리더 사용자가 후기의 온도를 알 수 있다. 파스텔 배경 위 옅은 회색 보조 텍스트는 대비가 부족해 보이는 구간이 있어, 명도 대비를 한 단계 올리면 가독성이 안정된다.
디지털 파트너 더블루캔버스
교재·출판이나 브랜드 커머스처럼 상품 수가 많고 방문자층이 갈리는 사업일수록, 보기 좋은 화면 이상의 설계가 필요하다. 학년·과목별 진열 구조, 검색에 잡히는 URL 체계, 후기와 리워드가 재방문으로 이어지는 동선을 처음부터 함께 짜야 한다. The Blue Canvas는 이런 요구를 홈페이지 제작 단계에서 통합해, 정보 구조와 웹디자인, SEO 검색엔진최적화, 그리고 광고 예산을 성과로 바꾸는 퍼포먼스 마케팅까지 하나의 흐름으로 연결한다. 교육·출판 브랜드의 웹사이트 제작을 고민하고 있다면, 상품을 늘려도 무너지지 않는 구조와 검색·전환 관점의 UX/UI를 함께 그려줄 파트너가 힘이 된다. 잘 팔리는 홈페이지 제작은 결국 그 설계 위에서 완성된다.
마무리와 다음 스텝
비상교재 & 비상서점은 친근한 캐릭터와 파스텔 카드로 교재라는 무거운 상품을 가볍게 풀어냈고, 후기와 포인트 리워드로 방문자를 다시 부르는 장치도 촘촘하다. 여기서 한 걸음 더 나가려면 세 가지를 권한다. 먼저 학년·과목·개정 조합 필터에 고유 URL을 부여해 검색 유입을 넓힌다. 다음으로 표지 이미지 최적화와 별점·이모지 대체 텍스트로 속도와 접근성의 바닥을 다진다. 끝으로 흩어진 리워드 안내를 한곳에 모아 후기 → 포인트 → 재구매의 고리를 방문자가 한눈에 인지하게 만들면, 지금의 밝은 첫인상이 실제 전환으로 더 자주 이어질 것이다.