학원 홈페이지 시안의 PC·태블릿·모바일 화면 공개

학원 홈페이지는 화면 폭마다 남길 것과 접을 것을 미리 정해 두어야 합니다. 수학학원 콘셉트 시안 '수리온 수학학원'은 휴대폰 첫 화면 안에 레벨 테스트 예약 버튼·상담 시간·전화번호를 모두 넣고, 메뉴는 '메뉴' 버튼 하나로 접고, 태블릿에서는 메뉴 여섯 개를 두 번째 줄로 내려 예약 버튼이 잘리지 않게 했습니다. 같은 페이지를 PC·태블릿·휴대폰 화면으로 나란히 놓고 비교했습니다.

이 글의 수리온 수학학원은 심플웹이 만든 콘셉트 시안입니다. 실제 학원이나 납품 사례가 아니며, 상호·주소·전화번호·숫자·후기는 모두 가상입니다.

학원 홈페이지를 보는 사람은 둘입니다. 학원을 고르는 학부모와 학원에 다니는 학생입니다. 둘 다 휴대폰으로 여는 경우가 많습니다. 그래서 학원 홈페이지는 PC 화면을 줄여 휴대폰에 맞추는 것으로는 부족합니다. 화면 폭이 바뀔 때 무엇을 남기고 무엇을 접을지 미리 정해 두어야 합니다.

이번에는 초·중·고 수학 전문 학원을 가정하고 만든 수리온 수학학원 시안을 세 가지 폭으로 찍었습니다. PC는 폭 1440px, 태블릿은 아이패드 세로 화면 크기인 834px, 휴대폰은 390px입니다. 메뉴, 첫 화면, 수업·일정 정보, 상담 버튼, 연락처가 어떻게 바뀌는지 차례로 봅니다. 아쉬운 부분도 찾아서 함께 적었습니다.

수리온 수학학원 시안 직접 눌러보기 → 시안 창 위쪽의 모니터·휴대폰 버튼을 누르면 PC 화면과 휴대폰 화면을 바꿔 볼 수 있습니다.

1. 첫 화면: 휴대폰에서는 위아래로 쌓입니다

PC 첫 화면은 큰 제목 '풀이보다 원리를 먼저' 아래를 두 칸으로 나눴습니다. 왼쪽은 사진입니다. 오른쪽에는 소개 문장 한 줄과 '레벨 테스트 예약 →' 버튼이 있고, 그 아래에 상담 시간(월–금 14:00–22:00, 토 10:00–18:00)과 전화번호가 있습니다.

태블릿에서도 두 칸 구성은 그대로입니다. 오른쪽 칸이 좁아져 소개 문장이 두 줄로 나뉩니다. 맨 위 머리 부분은 PC보다 한 줄 많은 세 줄인데, 이건 5장에서 봅니다. 화면이 세로로 길어서 첫 화면 안에 '기관 현황' 숫자 세 개와 '공지사항' 제목까지 들어옵니다.

휴대폰에서는 두 칸이 위아래로 쌓입니다. 순서는 제목 → 사진 → 소개 문장 → '레벨 테스트 예약 →' 버튼 → 상담 시간 → 전화번호입니다. 이 여섯 가지가 스크롤하지 않아도 휴대폰 첫 화면 안에 모두 들어옵니다.

학원 홈페이지에 들어온 학부모가 먼저 정하는 것은 "상담을 받아 볼까"입니다. 버튼 바로 아래에 상담 시간과 전화번호를 붙여 두면, 지금 전화해도 되는 시간인지까지 한 화면에서 확인할 수 있습니다.

2. 메뉴: 휴대폰에서는 '메뉴' 버튼 하나로 접힙니다

PC와 태블릿에서는 맨 위 작은 줄에 '학부모 로그인', '레벨 테스트 예약', '오시는 길'이 있습니다. PC에서는 그 아래 한 줄에 학원 이름, 메뉴 여섯 개(학원 소개, 초등부, 중등부, 고등부, 입학 안내, 학습 관리), 색을 채운 '레벨 테스트 예약 ↗' 버튼이 나란히 놓입니다. 초등부·중등부·고등부를 메뉴 이름으로 바로 올려서, 학부모가 자녀 학년부터 찾아 들어가게 했습니다.

휴대폰에서는 메뉴 여섯 개가 '메뉴' 버튼 하나로 접힙니다. 누르면 버튼 글자가 '닫기'로 바뀌고, 하위 메뉴까지 펼쳐진 목록이 열립니다. 예를 들어 중등부 아래에는 내신 대비, 서술형 특강, 선행 과정이 바로 보입니다. 한 번 더 누르지 않아도 자녀 학년에 어떤 수업이 있는지 알 수 있습니다.

메뉴 줄의 '레벨 테스트 예약 ↗' 버튼과 맨 위 줄 링크 세 개는 휴대폰에서 보이지 않습니다. 레벨 테스트 예약은 첫 화면의 '레벨 테스트 예약 →' 버튼이 대신 맡고, 오시는 길은 맨 아래 '찾아오는 길'에 있습니다. 좁은 화면 위쪽에 같은 버튼이 두 번 나오지 않습니다. 다만 '학부모 로그인'은 휴대폰에서 아예 빠지는데, 이 점은 글 끝 확인 항목에 적었습니다.

3. 수업·일정 정보: 표가 한 줄씩 나뉩니다

PC의 '모집·행사 일정'은 '일정'과 '내용' 두 칸에 '신청' 버튼이 붙은 표입니다. '12월 22일 개강 · 중1–고1 / 겨울방학 선행 특강', '10월 기말 대비 4주 / 중등 서술형 특강', '매주 토요일 오전 / 무료 레벨 테스트'가 한 줄씩 있고, 줄마다 오른쪽 끝에 '신청' 버튼이 있습니다.

휴대폰 폭에서는 이 표가 비좁습니다. 그래서 줄마다 수업 이름을 먼저 굵게 쓰고, 날짜와 대상은 그 아래로 내렸습니다. '신청' 버튼은 줄 오른쪽에 그대로 남습니다. "무슨 수업인지"를 먼저 읽고 "언제, 누구 대상인지"를 확인한 뒤 바로 신청을 누르는 순서가 됩니다.

'교육 과정'도 비슷하게 바뀝니다. PC에서는 번호, 과정 이름, 설명, 화살표가 한 줄에 놓입니다. 휴대폰에서는 설명('학교별 기출 분석과 서술형 대비' 등)이 과정 이름 아래로 내려가고 화살표는 빠집니다. 좁은 화면에서도 설명이 끝까지 보입니다.

나머지 칸들도 휴대폰에서는 줄 수를 줄입니다.

• 기관 현황: PC·태블릿은 숫자 세 개(8명 · 6명 · 14년)가 한 줄, 휴대폰은 두 칸씩입니다. 세 번째 '14년'은 다음 줄에 혼자 놓입니다.
• 바로가기: PC는 여섯 칸 한 줄, 휴대폰은 두 칸씩 세 줄입니다.
• 공지사항: PC는 제목 오른쪽 끝에 날짜가 있고, 휴대폰은 날짜가 제목 아래로 내려갑니다.

4. 상담·연락처: 첫 화면과 맨 아래 두 곳에 있습니다

상담 시간과 전화번호는 첫 화면과 맨 아래 '찾아오는 길' 두 곳에 있습니다. 첫 화면에서 바로 전화하는 학부모도 있고, 수업과 일정을 다 읽은 뒤 맨 아래에서 연락처를 찾는 학부모도 있기 때문입니다.

휴대폰에서 '찾아오는 길'은 지도와 정보 칸이 PC처럼 나란히 남습니다. 오른쪽 칸이 좁아서 주소가 세 줄로 나뉘고, 상담 시간은 '월–금 14:00–' / '22:00 · 토' / '10:00–18:00'처럼 시간 중간에서 줄이 바뀝니다. 실제로 만들 때는 휴대폰에서 정보를 지도 아래로 내리고, 전화번호를 누르면 바로 전화가 걸리게 연결하는 편이 좋습니다.

5. 태블릿: 메뉴 여섯 개는 두 번째 줄로 내려갑니다

태블릿 세로 화면(834px)은 PC 메뉴 줄을 그대로 쓰기에는 좁고, 휴대폰처럼 '메뉴' 버튼으로 접기에는 넓습니다. 그래서 이 시안은 태블릿 폭에서 머리 부분을 나눕니다. 첫 줄에는 학원 이름과 '레벨 테스트 예약 ↗' 버튼이 양 끝에 놓이고, 둘째 줄에 메뉴 여섯 개가 칸을 나눠 한 줄로 놓입니다.

메뉴를 열지 않아도 초등부·중등부·고등부가 모두 보이고, 가장 눈에 띄어야 할 예약 버튼도 잘리지 않습니다. 대신 머리 부분이 PC보다 한 줄 높아져서, 첫 화면에 들어오는 내용이 그만큼 줄어듭니다. 처음 만든 시안에서는 태블릿에서도 PC 메뉴 줄이 그대로 나와 오른쪽 끝 예약 버튼이 잘렸고, 이 글을 쓰면서 지금처럼 고쳤습니다.

아직 아쉬운 곳도 있습니다. 아래쪽 '바로가기'는 태블릿에서 여섯 칸 중 다섯 칸만 한 줄에 들어가고, '학습 관리 · 공지사항' 칸이 다음 줄에 혼자 내려갑니다. 실제로 만든다면 태블릿에서는 세 칸씩 두 줄로 나누겠습니다.

PC와 휴대폰 화면만 보고 넘어가면 이런 부분을 놓치기 쉽습니다. 태블릿 폭은 따로 열어 확인해야 합니다.

실제 학원 홈페이지로 옮길 때 확인할 것

• 신청 버튼을 어디로 연결할지: 시안이라 실제 신청은 접수되지 않습니다. 실제 제작에서는 '레벨 테스트 예약'과 '신청' 버튼을 문의 폼이나 예약 기능(견적 계산기의 '예약 기능' 항목)으로 연결하거나, 학원이 이미 쓰는 전화·카카오톡 채널·외부 신청 페이지로 연결합니다.
• 학부모 로그인: 시안의 '학부모 로그인'은 PC·태블릿 맨 위 줄에만 있고, 휴대폰 화면과 메뉴 목록에는 없습니다. 학부모 전용 기능을 운영하려면 회원 기능(견적 계산기의 '회원 기능' 항목)이 필요하고, 휴대폰 메뉴 안에도 로그인 자리를 넣어야 합니다.
• 일정과 공지: 특강 일정, 레벨 테스트 요일, 공지는 자주 바뀝니다. 관리자 페이지(견적 계산기의 '관리자 페이지' 항목)를 함께 만들면 학원에서 직접 고칠 수 있습니다.
• 숫자와 후기: '반 최대 인원 8명' 같은 숫자와 학부모 후기는 시안용 가상 내용입니다. 실제 기록과 실제 후기가 있을 때만 씁니다.
• 등록번호와 교습비: 시안 바닥글에는 '학원 등록번호 제가상-000호 · 교습비 게시' 자리가 있습니다. 실제 학원은 이 자리를 실제 등록번호와 교습비 안내로 채웁니다. 교습비를 어떻게 게시하고 광고에 무엇을 표시할지는 시·도 교육청 규칙으로 정하니, 관할 교육청 기준을 확인해 채웁니다.

---

수리온 수학학원 시안 직접 눌러보기 → 교육·공공 시안 100개 보기 · 우리 학원 예상 견적 보기