한승훈비법영어의 5분구이영어 사이트를, 열다섯 화면을 넘겨야 끝나던 메인에서 내게 맞는 공부법을 고르는 첫 화면으로 다시 짰습니다.

상황

한승훈비법영어는 2006년부터 영어 교육을 이어 온 브랜드입니다. 영어를 기초, 문법, 구문, 독해, 어휘, 실전 영역으로 나누고, 영역마다 단계별 교재와 5분 남짓의 짧은 해설강의를 붙인 ’5분구이영어’를 온라인으로 운영합니다. 같은 이름 아래 오프라인 학원 영어의비법학원과 전국 가맹 센터가 함께 움직입니다.

문의는 학원에서 먼저 왔습니다. 고객사가 참고로 든 외식 브랜드 사이트처럼 톤앤매너를 바꾸고, 5분구이영어와 새로 개발하는 영어클리닉 메뉴를 디자인해 달라는 요청이었습니다. 함께 받은 자료에는 메뉴별로 이름을 바꾸거나 자리를 옮길 항목, 새로 만들 화면, 고쳐야 할 오류가 빼곡하게 정리되어 있었습니다.

범위를 넓힌 이유

현재 사이트를 화면 단위로 펼쳐 보니, 메인 하나를 끝까지 보려면 열다섯 번을 스크롤해야 하였습니다. 참고 사이트는 일곱 번이면 끝납니다. 콘텐츠의 양 자체가 달랐기 때문에, 디자인만 바꾸어서는 같은 인상을 낼 수 없었습니다.

또한 일부 메뉴만 새로 디자인하면 바뀐 화면과 그대로인 화면이 한 사이트 안에 섞이게 됩니다. 마침 고객사는 앱에서도 같은 화면을 쓰도록 사이트 전체를 반응형으로 바꿀 계획이었습니다. 이에 따라 범위를 다음과 같이 조정하였습니다.

• 일부 메뉴 디자인에서 사이트 전체 화면 디자인으로 넓혔습니다.
• 화면 수가 아니라 기간 기준으로 일정을 다시 짰습니다. 첫 4주는 분석과 디자인 방향, 8주까지 전체 화면, 12주까지 콘텐츠 디자인과 개발 지원입니다.
• PC 주요 화면을 먼저 만들고, 4주차부터 모바일 화면을 함께 진행해 개발이 기다리지 않도록 하였습니다.

발견

기존 메인을 다시 읽으며 세 가지를 짚었습니다. 여러 색이 한 화면에 쓰여 정보가 눈에 들어오지 않고, 한 번 본 내용을 다시 찾기 어려웠습니다. 사용설명서와 검색기, 비법서, 클리닉이 어디서 시작하고 끝나는지 구분되지 않았습니다. 5분구이영어 사이트 안에서 ’5분구이영어’라는 이름이 반복되어, 스크롤은 길어지고 정보끼리는 더 비슷해 보였습니다.

방문자에게 필요한 것은 모든 콘텐츠를 보는 일이 아니었습니다. 내 수준에서 무엇부터 공부해야 하는지 알고, 그에 맞는 길로 들어서는 일이었습니다. 이를 바탕으로 원칙을 세 가지로 정하였습니다. 사이트 곳곳에서 다르게 쓰이던 이름과 표현을 하나의 디지털 브랜드 언어로 통일하고, 방문자가 혼란 없이 그 자리에서 다음 행동을 고를 수 있도록 화면을 설계하며, 화면이 복잡해지지 않게 정보를 정리해 전달력을 높이는 것입니다.

• 하나의 디지털 브랜드 언어
• 망설임 없이 바로 행동하는 화면
• 덜어 내어 높인 전달력

한 일

메인 | 내 수준을 먼저 묻는 화면

고객사가 정한 메인 콘텐츠의 우선순위(5분구이영어 소개, 비법시리즈, AI 약점클리닉, 가맹학원, 수강후기, 대표 인사말, 대입실적)는 그대로 지키면서, 각 콘텐츠의 분량과 보여 주는 방식을 다시 엮었습니다.

첫 화면은 “내 수준에 맞는 영어학습법은 없을까?“라는 질문으로 엽니다. 이어지는 자리에는 문법이 약하다는 학생과 학부형, 담임 선생님의 말을 말풍선으로 두고, 옆에 영역별 막대그래프를 놓아 약한 영역 하나가 눈에 띄게 하였습니다. 고객사는 메뉴 아래 배너를 광고가 아닌 공감을 이끄는 화면으로 요청하였고, 그 요청을 학생이 겪는 장면으로 풀었습니다.

메인의 중심에는 두 서비스를 나란히 두었습니다. 영역과 단계가 분명한 사람은 왼쪽 비법시리즈에서 교재를 고르고, 어디가 약한지 모르는 사람은 오른쪽 AI 약점클리닉에서 진단부터 시작합니다. 카드마다 마지막에 서점, 검색, 진단테스트로 가는 버튼을 두어, 고른 다음의 행동까지 한 화면에서 끝나도록 설계하였습니다.

메뉴 | 3단계로 정리한 구조

메뉴와 서비스의 이름부터 정리하였습니다. 고객사가 새로 정한 이름(영비특강은 영어의비법특강, 영어의비법학원 메뉴는 영비학원 Program)을 메뉴와 화면 제목, 버튼까지 같은 표기로 맞추고, 화면마다 되풀이되던 ’5분구이영어’는 꼭 필요한 자리에만 남겼습니다. 흩어져 있던 비법시리즈 다섯 개는 구문을 더해 ‘5분구이 비법시리즈’ 하나로 묶고, 그 아래 영역을 3단계 메뉴로 두었습니다. 학원 관련 메뉴는 영어의비법학원 아래로 모으고, 수강생의 강의실은 상단 ’강의실입장’으로 옮겨 로그인한 사람에게만 보이게 하였습니다. 2단계 메뉴는 모든 화면에서 가로로 놓아, 어느 메뉴에 들어가도 같은 자리에서 다음 화면을 찾을 수 있습니다.

AI 영어클리닉 | 진단에서 추천 강좌까지

영어클리닉은 고객사가 새로 개발하는 서비스였습니다. 고객사의 클리닉 기획을 바탕으로, 소개 화면부터 레벨테스트, 영역별 진찰테스트, 문항, 결과 분석, 성적표까지 이어지는 흐름을 화면으로 옮겼습니다. 소개 화면은 진찰테스트, 집중클리닉, 맞춤 커리큘럼, 반복학습 관리 네 단계를 차례로 보여 주고, 학교와 학원, 인강의 한계를 나란히 놓아 클리닉이 필요한 이유를 전달합니다.

테스트가 끝나면 분석표에서 바로 다음 행동으로 이어집니다. 문항별 정답과 오답, 결과 분석 옆에 추천 클리닉과 추천 강좌 버튼, 카카오톡 1:1 상담 연결을 두어, 진단이 결과 확인에서 멈추지 않도록 하였습니다.

나만의비법 | 수강생의 하루를 담은 강의실

로그인한 수강생이 들어오는 ’나만의비법’은 스터디플래너, 나의 영비노트, 나의 성적표, 마이페이지 네 묶음으로 정리하였습니다. 미션스케줄은 달력에서 완료, 오늘, 예정 미션을 색으로 구분하고, 학원 실시간 수업이 있는 날에는 ZOOM 입장 버튼이 보입니다. 상단에는 반, 담임, 수업 요일과 시간을 두어, 온라인 수강생과 학원 재원생이 같은 화면에서 자기 일정을 확인합니다.

개발 전달

화면은 PC와 모바일로 함께 만들고, 개발팀에는 스타일 가이드와 공통 요소(헤더, 메뉴, 페이지 머리), 화면별 원본을 나누어 전달하였습니다. 메뉴에 마우스를 올렸을 때의 화면, 스크롤 시 고정되는 헤더, 숫자가 올라가는 영역처럼 움직임이 필요한 자리는 디자인 위에 설명을 붙여, 화면만으로 전달되지 않는 부분을 남기지 않았습니다.

이어진 작업

구축이 끝난 뒤에도 필요한 화면이 생길 때마다 건별로 이어서 맡았습니다.

• 2022.06 | 학원 가맹 랜딩 페이지 리뉴얼
• 2022.09 | 교재를 직접 판매하는 자사몰(5분구이영어 서점) 기획과 디자인
• 2022.10 ~ 12 | 영어의비법학원 소개(인사말, 연혁, 초등부, 중등부, 고등부)와 프로그램 페이지
• 2022.12 | 클리닉 성적표 확인, 강좌 신청 화면 수정
• 2023.05 ~ 08 | 가맹 홈페이지 리뉴얼, 가맹 책자 제작과 수정
• 2023.12 | 온라인 강의, 오프라인 학원, 가맹 센터 세 갈래로 나뉘는 브랜드 입구 화면

결과물

5분구이영어 반응형 웹 전체 화면 디자인(메인, AI 영어클리닉, 5분구이 비법시리즈와 검색기, 영어의비법특강, 나만의비법 강의실, 영비스토리, 마이페이지, 로그인, 가입, 장바구니, 약관), PC와 모바일 화면, 스타일 가이드와 개발 전달 자료. 이어서 자사몰(서점), 영어의비법학원 소개와 프로그램 페이지, 가맹 랜딩 페이지와 가맹 책자, 브랜드 입구 화면.