개요
핵심 요약
- 풍산자는 지학사가 운영하는 수학 문제집 브랜드로, 연산·개념·유형·반복수학 등 여러 시리즈를 판매한다.
- 첫 화면 카피는 ‘쉬운 계산에서 실수하는건 실력인 걸까?’라는 질문형 문장이다.
- 시리즈 라인업을 ‘Drag’ 텍스트가 붙은 가로 캐러셀로 보여주며 교재 표지를 겹쳐 배치한다.
- ‘숫자로 증명되는 신뢰’ 구획에서 판매 부수, 만족도, 문제 수, 담당자 수를 수치로 제시한다.
- 확인한 HTML에서 title은 ‘풍산자’, description은 ‘풍산자 - (주)지학사’로 매우 짧고, canonical과 구조화 데이터는 확인되지 않는다.
풍산자는 지학사가 운영하는 수학 문제집 브랜드다. 첫 화면은 교실에서 혼자 문제를 푸는 학생의 사진 위에 ‘쉬운 계산에서 실수하는건 실력인 걸까?’라는 질문을 얹는 것으로 시작한다. 스크롤을 내리면 ‘고민이 달라지면 문제집도 달라져야 하니까’라는 문장과 함께, 교재 표지들이 겹쳐진 형태로 떠오르는 애니메이션 구획이 이어진다.
그 아래로 ‘전 학년 전 유형 라인업’이 ‘Drag’ 안내가 붙은 가로 캐러셀로 제시되고, 실제 학생으로 보이는 인물 사진과 함께 ‘숫자로 증명되는 신뢰’ 구획이 뒤따른다. 이번 리뷰에서는 학생의 고민을 출발점으로 삼은 카피 설계와, Next.js 기반으로 보이는 화면 구현에 비해 메타데이터가 지나치게 축약돼 있는 지점을 함께 살펴본다.
브랜드 & 메시지
브랜드 화법의 핵심은 ‘고민의 언어화’다. ‘쉬운 계산에서 실수하는건 실력인 걸까?’는 수학 문제집을 사려는 학생·학부모가 실제로 품는 불안을 그대로 문장으로 옮긴 것이다. 뒤따르는 ‘고민이 달라지면 문제집도 달라져야 하니까’는 이 불안에 대한 답을 ‘시리즈 다양화’로 제시한다. 문제집을 기능이 아니라 학생의 상황에 맞춰 고르는 상품으로 재정의하는 화법이다.
시각적으로는 짙은 네이비·블루 배경에 교재 표지의 원색을 대비시켜, 다크 배경 위에서도 책 표지가 또렷이 도드라진다. ‘숫자로 증명되는 신뢰’ 구획에서 판매 부수와 만족도 같은 수치를 큰 글자로 제시하는 방식은 ‘이미 많은 사람이 선택했다’는 근거를 카피가 아닌 숫자로 대체하는 시도다.
UX/UI 관점
강점은 다섯 가지다. 첫째, 첫 문장을 질문형으로 던져 방문자가 자기 얘기로 읽게 만든다. 둘째, ‘Drag’ 안내가 붙은 가로 캐러셀로 16개 시리즈를 한 화면에서 탐색하게 했다. 시리즈가 많은 브랜드에서 흔히 생기는 ‘다 못 훑어본다’는 문제를 캐러셀 하나로 해결한다. 셋째, 시리즈를 소개한 직후 실제 학생 후기 카드를 배치해, 상품 나열과 사용 경험 증거를 가까이 뒀다.
넷째, ‘풍산자 케어센터’ 구획을 별도로 둬 구매 이후의 지원(질문 접수, 24시간 이내 답변, 담당자 배정)을 프로세스 다이어그램으로 보여준다. 다섯째, 판매 부수·만족도·문제 수·담당자 수를 함께 제시해 신뢰 근거를 다각도로 뒷받침한다. 여섯째, 하단에 ‘직접 보고 결정하세요’라는 문구와 함께 견본 신청 버튼을 둬, 구매 결정 직전 단계의 방문자를 위한 행동 지점을 명확히 배치했다.
IA·SEO 전략
페이지는 Next.js 기반으로 구현된 것으로 보인다. _next/static 경로의 청크 스크립트와 Geist 폰트 변수가 HTML head에서 확인된다. 그런데 직접 확인한 title은 ‘풍산자’ 한 단어뿐이고 description은 ‘풍산자 - (주)지학사’로, 화면에서 실제로 보이는 ‘쉬운 계산에서 실수하는건 실력인 걸까?’나 시리즈 라인업 같은 정보는 메타데이터에 전혀 반영돼 있지 않다. canonical과 application/ld+json 구조화 데이터도 확인되지 않는다.
화면 구현과 카피 수준에 비해 검색엔진에 전달되는 정보가 지나치게 적은 경우다. ‘초등 수학 문제집 추천’, ‘중등 연산 문제집’처럼 실제 구매 직전 검색어에 대응하려면, title·description에 브랜드명과 대상 학년·시리즈 특징을 구체적으로 담고 Product 또는 Book 구조화 데이터로 시리즈별 정보를 명시하는 작업이 먼저 필요하다.
성능·접근성
교재 표지 이미지가 겹쳐 떠오르는 애니메이션, 가로 드래그 캐러셀, 인물 사진까지 인터랙션과 이미지가 모두 초기 화면에 집중돼 있다. Next.js의 이미지 프리로드 설정이 여러 이미지에 걸려 있는 점으로 볼 때 초기 로딩 우선순위를 신경 쓴 흔적은 있지만, preload 대상 이미지 수가 많을수록 오히려 첫 화면 응답이 늦어질 수 있어 우선순위를 좁히는 편이 유리하다.
접근성 측면에서는 다크 네이비 배경 위 흰 텍스트 대비는 대체로 무난하지만, 수치를 강조하는 큰 숫자 옆의 단위·설명 텍스트가 작게 처리돼 있다면 확대 시 가독성을 점검할 필요가 있다. 드래그 캐러셀은 마우스·터치 조작에는 익숙하지만 키보드만으로 이동 가능한지 확인이 필요하다.
자주 묻는 질문
풍산자는 어떤 회사에서 만드나요?
지학사가 운영하는 수학 문제집 브랜드입니다. 연산·개념·유형·반복수학 등 학년별·유형별로 나뉜 여러 시리즈를 종이 교재로 제공합니다.
문제집 브랜드 홈페이지는 어떤 정보를 우선 보여줘야 하나요?
학생이나 학부모가 실제로 겪는 학습 고민을 먼저 제시하고, 그 고민에 맞는 시리즈를 연결해 보여주는 순서가 효과적입니다. 풍산자처럼 질문형 카피로 시작해 시리즈 라인업으로 이어지는 구조가 그 예입니다.
화면은 잘 만들어졌는데 검색에 잘 안 걸리는 건 왜 그런가요?
title과 description 같은 메타데이터가 화면 내용을 충분히 담지 못하면 검색엔진이 페이지의 주제를 정확히 파악하기 어렵습니다. 화면 구현 수준과 별개로 메타데이터는 항상 따로 점검해야 합니다.
학습 교재를 구매하기 전에 확인할 수 있는 것이 있나요?
일반적으로 견본이나 미리보기 신청을 통해 구성과 난이도를 확인할 수 있습니다. 정확한 가격과 구성은 시리즈별로 다르므로 홈페이지의 견본 신청이나 문의 절차를 통해 확인하는 것이 정확합니다.
디지털 파트너 더블루캔버스
교육 상품 브랜드 사이트는 화면 완성도와 검색 노출이 따로 노는 경우가 많다. 애니메이션과 인터랙션에 투자한 만큼 메타데이터와 구조화 데이터에도 같은 비중을 두지 않으면, 공들여 만든 화면이 검색 결과에서는 브랜드명 한 줄로만 나타난다.
The Blue Canvas(더블루캔버스)는 이런 화면과 검색 데이터 사이의 격차를 좁히는 작업을 함께 다룬다. Next.js 같은 최신 프레임워크로 구현된 사이트일수록 메타데이터를 페이지별로 동적으로 채우는 설계가 필요하며, 이는 개발 초기 단계에서 함께 설계해야 뒤늦게 손대는 비용을 줄일 수 있다.
마무리와 다음 스텝
풍산자의 사이트는 학생의 고민을 출발점으로 삼은 카피, 드래그 캐러셀로 압축한 시리즈 탐색, 구매 이후 지원까지 보여주는 케어센터 구획까지 화면 설계 자체는 짜임새가 있다. 판매 부수와 만족도를 수치로 제시하는 신뢰 구획도 설득력을 더한다.
실행 제안은 셋이다. 첫째, title과 description을 화면 카피와 시리즈 정보를 반영해 다시 작성한다. 둘째, canonical과 Product 또는 Book 구조화 데이터를 추가해 시리즈별 검색 대응력을 높인다. 셋째, 초기 화면의 이미지 프리로드 우선순위를 좁혀 로딩 부담을 줄인다. 화면은 이미 잘 만들어졌으니, 남은 일은 그 화면을 검색엔진에게도 설명하는 것이다.
