개발노트

학원 과정 비교 페이지 만들기: 시간표에서 상담까지 연결하기

과정마다 설명 순서가 다르면 비교하기 어렵습니다. 대상·시간·적용 기간을 같은 순서로 보여주는 작은 화면을 만들어봤습니다.

기초반은 시간만 있고 심화반은 교재 설명만 있다면 학부모가 어느 반을 물어봐야 할지 판단하기 어렵습니다. 이번에는 가상의 두 과정을 같은 항목으로 보여주고 상담으로 이어지는 예제를 만들었습니다.

과정 비교 예제 열기에서 각 과정의 대상과 시간을 읽고 상담 예제 열기로 이동할 수 있습니다. 실제 학원의 모집이나 교습비 안내가 아닙니다.

가상 기초반과 심화반을 대상·시간·적용 기간·교습비·다음 단계 순서로 표시한 과정 비교 HTML 화면

비교에 필요한 항목만 같은 순서로 놓습니다

예제는 대상, 시간, 적용 기간, 교습비 확인 상태, 다음 단계를 같은 순서로 배치했습니다. 글자 수를 맞추는 대신 서로 다른 정보를 같은 위치에서 찾을 수 있게 했습니다. 수업 효과를 보장하는 성적이나 합격률은 넣지 않았습니다.

지난 학기 시간표를 현재 모집처럼 보이지 않게 합니다

시간표에는 적용 기간과 확인일이 필요합니다. 학기가 바뀌면 이전 정보를 보관할지 새 안내로 연결할지 정하고, 상담 담당자도 같은 정보를 사용하도록 합니다. 예제의 적용 기간은 실제 운영 전에 확정해야 하는 항목으로 표시했습니다.

상담을 보냈다고 등록된 것은 아닙니다

예제 링크는 로컬 입력 확인 폼으로 이어집니다. 이 경로를 브라우저로 직접 시험했고 실제 메시지 전송이나 수강 등록은 하지 않습니다. 실제 서비스라면 상담 요청, 반 배정과 등록 확정을 각각 어떤 단계에서 알릴지 정합니다.

교습비·등록 정보와 광고의 표시는 현행 학원법과 관할 교육청의 안내에 맞춰 확인해야 합니다. 예제의 미확인 표시를 실제 비용 고지의 대체물로 사용하지 않습니다.

화면을 늘리기 전에 두 과정을 나란히 읽어보세요. 대상과 시간, 비용 기준을 확인하고 올바른 과정에 대해 상담할 수 있으면 비교 화면의 역할이 분명해집니다. 폼 상태 구현은 성공·실패 실습에서 별도로 볼 수 있습니다.

실전노트 목록 문의하기

댓글

0개

아직 표시된 댓글이 없습니다.

Google 계정으로 댓글 작성

이메일은 일부를 가린 아이디로 표시됩니다.