어학원 홈페이지 제작 사례 더원어학원

2개 센터와 14개 과정을 가진 어학원 홈페이지, 정보구조를 어떻게 설계했는지 실제 제작 과정으로 정리했습니다.

Jul 23, 2026

Contents

어학원 홈페이지 제작 사례 - 더원어학원 1️⃣센터가 둘인데 창구는 하나여야 한다 2️⃣14개 과정을 3단계 안에 넣기 3️⃣상담 이전과 이후를 함께 연결하기 4️⃣운영을 전제로 한 관리자 설계

어학원 홈페이지 제작 사례 - 더원어학원

어학원 홈페이지는 보통 '과정이 많다'는 문제부터 시작합니다.

더원어학원은 영어·일본어·중국어 3개 언어에 시험별 과정까지 합쳐 메인에만 14개 커리큘럼이 노출되고, 여기에 센터가 2곳입니다.

과정을 다 보여주면 복잡해지고, 줄이면 정작 찾는 과정이 안 보입니다.

문의 창구도 마찬가지입니다. 창구를 하나만 두면 다른 센터 수강생이 잘못 연결되고, 둘 다 나열하면 방문자가 한 번 더 판단해야 합니다.

기획 단계에서 정한 원칙은 하나였습니다.

방문자가 '고르는 일'을 최소한으로 줄이되, 고를 때는 확실하게 갈라준다.

1️⃣센터가 둘인데 창구는 하나여야 한다

전화·카카오톡 문의를 각각 팝업으로 묶고,
그 안에서 천안과 아산 중 한 곳을 선택하도록 설계했습니다.

버튼은 화면에 하나만 두되, 누르는 순간 분기가 일어나는 방식입니다.

카카오톡 채널도 센터별로 나뉘어 있어 상담 이력이 섞이지 않습니다.

푸터에서는 센터별 안내를 아코디언으로 접어 두고,
운영시간처럼 두 센터가 공유하는 정보는 항상 펼쳐진 상태로 뒀습니다.

같은 정보라도 '선택이 필요한 것'과 '공통인 것'을 나눠서 배치한 겁니다.

2️⃣14개 과정을 3단계 안에 넣기

정보구조는 두 겹으로 짰습니다.

GNB에서는 강의소개 아래 10개 과정을 한 번에 펼쳐 목적이 뚜렷한 방문자가 바로 진입하게 했고, 메인에서는 3개 언어를 탭으로 나눈 뒤 각 언어의 과정을 슬라이더로 넘겨보게 했습니다.

아직 뭘 들을지 정하지 못한 방문자를 위한 경로입니다.

카드 한 장에는 과정 설명 두세 줄과 학습 포인트 5줄만 담았습니다.

예를 들어 오픽 카드에는 질문 유형별 답변 구조,
목표 등급 설계 같은 항목이 들어갑니다.

정보를 더 넣을 수도 있었지만, 카드 단계의 역할은 '읽는 것'이 아니라 '내 과정을 찾는 것'이라 의도적으로 잘랐습니다.

세부 내용은 각 과정 상세 페이지로 넘겼습니다.

3️⃣상담 이전과 이후를 함께 연결하기

어학원은 문의가 끝이 아니라 레벨 진단부터 실제 수업까지 이어집니다.

그래서 상단 고정 영역에 상담신청과 별도로 레벨테스트 진입점을 뒀고, 외부 진단 시스템으로 연결했습니다.

상담이 부담스러운 방문자가 먼저 밟을 수 있는 낮은 단계를 하나 만든 셈입니다.

화상강의는 커리큘럼 안에 묻지 않고 '화상강의(더원 LIVE)'로 GNB에 독립시켰습니다.

지방·해외 거주자나 출장이 잦은 수강생은 이 조건이 등록 여부를 좌우하기 때문에, 하위 항목으로 두면 발견되지 않습니다.

기업출강도 같은 이유로 상담문의 아래 별도 메뉴로 분리했습니다. 개인 수강생과 B2B 담당자는 필요한 정보가 다르니까요.

더원어학원 교육 철학 페이지 — 학습 방향 진단과 1:1 커리큘럼 설계 안내

4️⃣운영을 전제로 한 관리자 설계

제작보다 오래 가는 건 운영입니다.

메인 배너 3종은 관리자에서 교체할 수 있게 했고, 시즌 프로모션을 위한 팝업레이어도 별도로 뒀습니다.

커뮤니티는 공지사항·프로모션·더원 이야기·FAQ 네 개 게시판으로 나눴습니다.

성격이 다른 글을 한 게시판에 섞으면 몇 달 뒤 관리자도 방문자도 못 찾습니다.

수강후기 역시 게시판으로 연결해, 메인 후기 섹션이 별도 작업 없이 최신 글을 따라가도록 했습니다.

정리하며

어학원 홈페이지는 디자인보다 분기 설계가 성패를 가릅니다.

센터가 몇 곳인지, 과정이 몇 개인지, 상담 전에 거칠 단계가 있는지에 따라 구조가 완전히 달라지기 때문입니다.

디자인펀치는 15년 이상 대학·기관·기업 사이트를 만들며 이런 구조를 다뤄왔고, 프로젝트마다 담당자가 1:1로 배정됩니다.

지금 운영 중인 홈페이지의 메뉴 구조가 방문자 기준인지 운영자 기준인지 헷갈린다면, [홈페이지 구조 무료 점검 신청]으로 현재 상태부터 확인해 보세요.

구체적인 제작 범위와 일정이 필요하시면 편하게 연락주세요 :)

Contents

디펀치 포트폴리오

어학원 홈페이지 제작 사례 더원어학원

2개 센터와 14개 과정을 가진 어학원 홈페이지, 정보구조를 어떻게 설계했는지 실제 제작 과정으로 정리했습니다.

Jul 23, 2026

Contents

어학원 홈페이지 제작 사례 - 더원어학원

어학원 홈페이지는 보통 '과정이 많다'는 문제부터 시작합니다.

더원어학원은 영어·일본어·중국어 3개 언어에 시험별 과정까지 합쳐 메인에만 14개 커리큘럼이 노출되고, 여기에 센터가 2곳입니다.

과정을 다 보여주면 복잡해지고, 줄이면 정작 찾는 과정이 안 보입니다.

문의 창구도 마찬가지입니다. 창구를 하나만 두면 다른 센터 수강생이 잘못 연결되고, 둘 다 나열하면 방문자가 한 번 더 판단해야 합니다.

기획 단계에서 정한 원칙은 하나였습니다.

방문자가 '고르는 일'을 최소한으로 줄이되, 고를 때는 확실하게 갈라준다.

1️⃣센터가 둘인데 창구는 하나여야 한다

전화·카카오톡 문의를 각각 팝업으로 묶고,
그 안에서 천안과 아산 중 한 곳을 선택하도록 설계했습니다.

버튼은 화면에 하나만 두되, 누르는 순간 분기가 일어나는 방식입니다.

카카오톡 채널도 센터별로 나뉘어 있어 상담 이력이 섞이지 않습니다.

푸터에서는 센터별 안내를 아코디언으로 접어 두고,
운영시간처럼 두 센터가 공유하는 정보는 항상 펼쳐진 상태로 뒀습니다.

같은 정보라도 '선택이 필요한 것'과 '공통인 것'을 나눠서 배치한 겁니다.

2️⃣14개 과정을 3단계 안에 넣기

정보구조는 두 겹으로 짰습니다.

아직 뭘 들을지 정하지 못한 방문자를 위한 경로입니다.

카드 한 장에는 과정 설명 두세 줄과 학습 포인트 5줄만 담았습니다.

예를 들어 오픽 카드에는 질문 유형별 답변 구조,
목표 등급 설계 같은 항목이 들어갑니다.

정보를 더 넣을 수도 있었지만, 카드 단계의 역할은 '읽는 것'이 아니라 '내 과정을 찾는 것'이라 의도적으로 잘랐습니다.

세부 내용은 각 과정 상세 페이지로 넘겼습니다.

3️⃣상담 이전과 이후를 함께 연결하기

어학원은 문의가 끝이 아니라 레벨 진단부터 실제 수업까지 이어집니다.

그래서 상단 고정 영역에 상담신청과 별도로 레벨테스트 진입점을 뒀고, 외부 진단 시스템으로 연결했습니다.

상담이 부담스러운 방문자가 먼저 밟을 수 있는 낮은 단계를 하나 만든 셈입니다.

화상강의는 커리큘럼 안에 묻지 않고 '화상강의(더원 LIVE)'로 GNB에 독립시켰습니다.

지방·해외 거주자나 출장이 잦은 수강생은 이 조건이 등록 여부를 좌우하기 때문에, 하위 항목으로 두면 발견되지 않습니다.

기업출강도 같은 이유로 상담문의 아래 별도 메뉴로 분리했습니다. 개인 수강생과 B2B 담당자는 필요한 정보가 다르니까요.

4️⃣운영을 전제로 한 관리자 설계

제작보다 오래 가는 건 운영입니다.

메인 배너 3종은 관리자에서 교체할 수 있게 했고, 시즌 프로모션을 위한 팝업레이어도 별도로 뒀습니다.

커뮤니티는 공지사항·프로모션·더원 이야기·FAQ 네 개 게시판으로 나눴습니다.

성격이 다른 글을 한 게시판에 섞으면 몇 달 뒤 관리자도 방문자도 못 찾습니다.

수강후기 역시 게시판으로 연결해, 메인 후기 섹션이 별도 작업 없이 최신 글을 따라가도록 했습니다.

정리하며

어학원 홈페이지는 디자인보다 분기 설계가 성패를 가릅니다.

센터가 몇 곳인지, 과정이 몇 개인지, 상담 전에 거칠 단계가 있는지에 따라 구조가 완전히 달라지기 때문입니다.

디자인펀치는 15년 이상 대학·기관·기업 사이트를 만들며 이런 구조를 다뤄왔고, 프로젝트마다 담당자가 1:1로 배정됩니다.

구체적인 제작 범위와 일정이 필요하시면 편하게 연락주세요 :)

Contents