🏫 내 강의실은 어디에?

→ 간단 요약

코로나19로 인한 길고 긴 비대면의 끝, 학교에 처음 가는 새내기들과 중고 새내기(!)들을 위한 강의실 찾기 서비스를 제작했습니다. 사용법은 초간단, 강의실 번호 적고 버튼만 누르면 ‘짠’

 

사용 기술

HTML / CSS / JavaScript

재밌는 사실

출시 두 달만에 전체 재학생 3.5명중 1명이 다녀갔어요.

 

→ 탄생 배경

코로나19로 인한 긴 비대면을 끝마친 22년 2학기. 캠퍼스에 당도한 새내기들에게 첫 대학 등교는 설렘과 동시에 머릿속 수많은 물음표를 안겨주었습니다.

 

… ‘어디로 가야하지???’

 

→ 내 강의실은 어디에? 소개

 

강의실 번호를 입력하고 '1초만에 확인' 버튼을 누르면 건물번호와 층수 정보, 캠퍼스 지도로 위치까지 확인!

초 스피드 초 간단, 누구나 쉽게 사용할 수 있어요.

 

→ 작동 원리

 

예를 들어 S1532라는 강의실이 있다고 하면, ‘서울캠퍼스 1번 건물의 5층 32호’라는 의미를 가집니다. 캠퍼스 구분 문자 S를 떼고 보면 1500번대의 숫자가 전부 ‘1번 건물의 5층’을 가리키고 있는 것이죠.

 

 

이에 착안하여 JavaScript의 if문과 else문을 활용하고, 입력한 번호대의 강의실 위치 정보를 보여주도록 간단한 코드를 구성했습니다.

전체 JS 코드는 매우 길어보이지만 실제로는 조건문이 대부분을 차지하는 것이니, 엄청 간단하죠?

 

→ UX와 정보위계

사실 ‘1초만에 확인’ 버튼을 누른 후 정보가 출력 되기 까지의 시간은 채 1초가 되지 않습니다. 컴퓨터는 아주 빠르니까 말이죠. 그럼에도 ‘1초만에’라는 문구를 쓴 이유가 있는데요. 사람들이 쉽게 체감할 수 있는 시간은 1초라고 생각했기 때문입니다. 정보 확인까지 아주 짧은 시간이 걸린다는 사실을 환기시켜 "이 서비스는 간편하고 빠르다"라는 인식을 심어줄 수 있도록 하기 위함이었습니다.

 

 

이 외에도 각 구간의 폰트 사이즈, 컬러 배치 또한 사용자가 자연스럽게 정보를 읽어들이고, 별다른 설명서가 필요 없도록 쉽게 이해하고 이용할 수 있게 사용성을 고려하여 CSS를 작성했습니다.

 

→ 공개 후 반응

학교 에브리타임에서 반응이 아주 뜨거웠습니다.

 

칭찬은 꽁치도 춤추게 한다는 말이 있죠. 서울캠퍼스만 지원했던 것에서 더 나아가 모든 캠퍼스 건물을 검색할 수 있도록 확장하고, 이 과정에서 지도 기능도 추가했습니다.

 

무수한 100원의 요청이..!

 

→ 배운 것

Github 사용법 (왕초보!) / JS를 활용한 HTML 조작 / 도메인 주소 구입, 연결하는 과정 / 모바일 환경에서의 UX 정보 위계 / 외부 지도 서비스 삽입하는 방법 /GA 삽입 후 통계 확인

 

→ 반성과 회고

코드 작성과 관련하여

JS를 독학한지 한 달 정도 되었을 때 만들었던 탓에 코드 작성에 익숙하지 못했고, 정리 되지 않은 상태에서 여러 기능을 추가하다 보니, 기능이 단순했던 초기에 비해 수정이 어려웠습니다.

기능 추가에 급급해서 리팩토링과 정리를 소홀히 하면 어떻게 되는 지에 대한 '왕초보 맛보기’였다고 생각해요.

 

서비스와 관련하여

‘내 강의실은 어디에?’는 아주 간단한 기능만 갖췄지만 편리하고, 매력적인 서비스로 다가가길 바랐습니다. 꼭 어려운 기술을 사용하지 않더라도 학생들이 사랑해줄 수 있는 서비스를 만들고 싶었고, 어느 정도 목표를 달성한 것 같아 기분이 좋았어요.

첫 개발 경험이라 아쉬움이 많지만, 앞으로도 개선을 거듭하고 보완해서 유용한 서비스를 만들어낼 수 있도록 노력하고 성장해야겠다는 생각이 듭니다.

 

이미지를 클릭하면 '내 강의실은 어디에?' 서비스로 이동합니다.