오프라인 약 60명 행사를 온라인 박람회로 전환, 12,000명 이상 학생 로그인

(사이트 내 AI 상담)

답변은 지정된 자료만 사용하며, 모든 문장에 출처를 붙입니다.

(과제)

많고 복잡한 학교 정보, 한눈에 들어오지 않는 선택지의 폭

교환학교는 전 세계 각 대륙에 걸쳐 있으며 총 289곳으로, 정보량이 많고 복잡합니다. 일반적인 원페이지 웹사이트로는 이렇게 많은 학교를 한 번에 보여주기 어렵고, 화면 구성도 정돈되기 어렵습니다.

이벤트의 목적은 이 정보를 더 단순하고 명확하게 전달하고, 학생의 교환학생 신청을 이끌어 내는 것이었습니다. 핵심 메시지는 고정관념을 깨는 한마디, 누구에게나 교환학생의 기회가 있다는 것입니다.

(접근 방식)

홈페이지는 3D 세계 지도로 모든 학교를 보여 주고, 세부 정보는 원페이지 웹사이트에 담습니다

최근 많은 온라인 전시가 VR을 채택하며, 공간감을 보여 주는 데 적합합니다. 다만 VR 전시를 끝까지 둘러보려면 조작이 많이 필요하고 길을 잃기 쉬우며, 콘텐츠도 이미지와 영상 위주여서 많은 텍스트를 담기에는 적합하지 않습니다.

그래서 홈페이지에는 3D 세계 지도를 도입해, 페이지에 들어서자마자 학교가 얼마나 많은지 알 수 있습니다. 복잡한 정보는 원페이지 웹사이트로 보여 주어 읽기가 더 수월합니다. 지도 형식은 학생이 스스로 탐험하도록 이끌고 전시를 둘러보는 참여감도 높입니다.

프런트엔드는 Three.js로 브라우저에서 3D 모델을 렌더링하며, 스크롤 속도, 지도 크기, 경계, 댐핑 같은 매개변수를 직접 조정해 어떤 기기에서도 기대한 대로 조작되도록 했습니다. 성능을 유지하기 위해 장면에 실시간 조명을 쓰지 않고 텍스처에 미리 베이킹했으며, 판 아래의 그림자는 이미지 파일로 처리해 용량을 최대한 낮췄습니다. 그 결과 시각적으로 약간의 픽셀 스타일이 묻어납니다.

데스크톱

먼저 세계 전체를 보고 차례로 각 대륙으로 좁혀 감

첫 화면은 구름과 종이비행기로 시작하며, 「탐색 시작」을 누르면 카메라가 3D 세계 지도로 날아 들어가고, 세계 지도, 학교 찾기, 신청 조건, 선배 후기, 문문 AI, 즐겨찾기를 여섯 단계 튜토리얼로 설명합니다. 이후 휠로 확대·축소하고 드래그로 이동하면 전체 화면에서 각 대륙으로 날아갈 수 있으며, 학교는 작은 집으로 지도 타일 위에 서 있습니다. 메뉴에는 프로그램과 라이브 방송, 행사, 공지, 캘린더, 학교 도감, 협력 기관이 모여 있습니다.

(핵심 설계)

세 가지 핵심 설계

학교 정보

포인트와 추첨 같은 페이지는 팝업 창 안에 접어 두고 지도 페이지에 직접 두지 않아, 학생 전용 이벤트와 나머지 콘텐츠가 구분되며 학생이 아닌 방문자도 큰 이질감을 느끼지 않습니다. 학교 정보는 지도 탐색 외에 목록으로도 제공되어 필터와 함께 쓰면 목표 학교를 더 빨리 찾을 수 있고, 창 안에는 학교 퀴즈도 있어 학생이 각 학교를 더 잘 이해하게 됩니다.

(백오피스 시스템)

행사 기간에는 백오피스에서 처리 대기 항목을 먼저 확인합니다.

로그인하면 처리 대기 항목을 먼저 보고, 이어서 추세와 다음 회차를 확인합니다. 각 지표는 클릭해 전체 산출 방식을 열 수 있으며, 데이터 조회와 같은 정의를 씁니다.

(성과)

4년간 협력, 참여 학생 약 60명에서 12,000명 이상으로 증가

2022년부터 2026년까지 박람회는 약 60명의 학생이 참여하던 오프라인 행사에서, 12,000명 이상의 학생이 로그인해 참여하는 온라인 박람회로 바뀌었습니다. 그중 한 회차는 개막 7일 만에 2,000명의 학생이 학생 이메일로 로그인했습니다. 전년 한 해 웹사이트 페이지뷰는 10만이었는데, 그 회차는 10일 만에 이를 넘어섰습니다. 라이브 프로그램 시청 수도 역대 기록을 넘어섰습니다.

로그인한 학생의 20% 이상이 7일 넘게 연속으로 웹사이트를 이용했고, 한 번에 가장 오래 이용한 시간은 3시간이었으며, 학생의 10% 이상은 한 번에 2시간 넘게 이용했습니다.

각 대륙의 분위기에 맞춰 학교의 지붕과 본체를 디자인하고, 조합을 달리해 화면이 단조로워지지 않도록 했습니다. 오프닝에서는 날아오르는 효과음과 전용 배경음악으로 사용자를 세계에서 각 지역으로 이끕니다.

(Client note)