Daygrid: 반복되는 매일에 지친 당신을 위해

KSA 3년을 보내며

학교를 3년을 다닌다고 시간표가 빠르게 익숙해지고 과제를 잊지 않게 되진 않는다는 걸 깨닫기까지 꽤 오랜 시간이 걸렸습니다. 개인적으로 한과영을 다니는 3년 동안 매우 바쁘게 지낸 편인데, 그렇다 보니 처음엔 종이에, 이후엔 아이패드에, 나중엔 Notion 등으로 일정과 시간표를 정리하기 시작했어요.

그래도 학생에게 가장 중요한 건 시간표 아닐까 싶어요. 일정을 아무리 정리해도 다음 수업이 있는지 없는지를 까먹으면 이슈니까요. 시간표를 배경화면으로 설정해놓지 않아도 앱에서 직관적으로 다음 수업을 확인할 수 있으면 좋지 않을까 생각했습니다.

그래서 5학기 중, Metron이라는 앱을 2시간 만에 개발했습니다. 요즘 개발하는 PWA와는 달리 이 친구는 Ionic과 CapacitorJS를 이용해 개발한 나름의 네이티브 앱입니다. 아래 사진처럼 오늘을 기준으로 수업과 급식을 보여주고, 왼쪽 / 오른쪽으로 슬라이드하면 해당 날짜를 보여주는 식이었어요. 사실 Daygrid를 처음 개발할 때에도 이러한 UI가 직관적이지 않을까 싶었습니다.

아무튼, 친구가 제가 쓰는 앱을 보고 본인도 있으면 잘 쓸 것 같다는 얘기를 듣고 겨울에 본격적으로 개발을 시작했습니다. 네이티브로 하면 배포도 복잡하고 귀찮아서, 처음으로 PWA에 발을 들여보았어요. PWA는 Progressive Web App이라는 기술인데, 나중에 조금 더 자세히 다뤄볼게요. 결국 중요한 점은 웹 앱을 그대로 (어느정도) 네이티브 앱 흉내를 낼 수 있다는 것입니다.

Daygrid 개발

Metron 이후로 Daygrid라는 이름을 잡고 (시간 (Day) + 표 (Grid)) 학원 자습시간에 디자인을 시작했습니다. 아래 보이는 초안은 약 3시간 작업으로 완성되었는데, 사실상 제 첫 피그마 도전기라고 보면 됩니다. 첫 작업이다 보니 컴포넌트나 auto layout도 전혀 몰랐고, 그냥 닥치는 대로 네모 동그라미 텍스트 그리고 앉아있었습니다.

한 이틀 정도 걸려서 디자인을 모두 완성했고, 본격적으로 개발을 시작했습니다.

1차본은 시간표 등록, 가온누리 공지 조회, 디데이, 급식 및 간식 확인의 기능을 가지고 출시했습니다. 인스타를 통해서 주변 친구들 중 써보고 싶다고 한 15명 정도를 대상으로 링크를 공유했고, 열심히 피드백을 받아 수정했습니다. 여기에 추가로 제가 생각하고 있던 이런저런 기능들을 추가하면서 업데이트를 진행했어요.

홈 화면의 날짜 + 요일 UI가 꽤나 마음에 듭니다. Bebas Neue 폰트로 강조했는데, 너무 무난한 요즘 UI들 사이에서 어느정도 튀는 부분이 생긴 것 같아요.

2차본에는 새로운 기능들이 추가되었습니다. 다크 모드, 시간표 이미지로 저장하기, 과제 등록하기 등을 추가하면서 조금 더 큰 서비스로 확장했어요.

그중에서도 가장 중요한 기능은 바로 Push Notification입니다. 시간표, 과제, 급식 등 중요한 일정들을 매 시간 알림으로 받을 수 있도록 기능을 추가했어요. 지금까지도 쓰는 친구들 이야기를 들어보면 알림 기능 때문에 쓴다는 사람들이 꽤 많습니다.

프로젝트를 마치며

저한테 제일 중요한 점은, 드디어 성공적인 시간표 UI를 만들었다는 부분이에요. 시간표 UI가 중학교때부터 해서 이번이 아마 4번째 시도일 겁니다.

아래 사진에서 처음으로 중2때 친구들과 작업했던 "서원 타임테이블"은 저희가 우스갯소리로 딸기요거트라고 부르기도 했었습니다. 2021년 04월 21일에 처음 출시한 걸 아직도 기억하고 있는데, 지금 보면 정말 너무 부끄럽네요. 하지만 저 프로젝트를 기점으로 웹 개발에 발을 들이기도 했고, 여러모로 의미있는 프로젝트입니다.

다음 사진은 집중교육 직전에 개발한 "Tabler"입니다. 수강신청표 엑셀 파일을 긁어와서 JS에서 내 학번으로 시간표를 표시해주는 방식입니다. 저떄는 그림자랑 glass를 모든 곳에 박는 게 이쁘다고 생각했나 보네요. 과거의 저를 보면 꼭 손가락을 부러뜨려 주시면 감사하겠습니다.

세 번째 시도는 모두들 아시는 ksain입니다. 사실 여기는 실패했다고 생각하진 않지만, 뭔가 10% 정도 아쉬운 느낌이 들어요. 뭔가.. 시간 사이에 구분도 잘 안 되고 너무 미니멀하기만 한 느낌.

아무튼 최종적으로 데이그리드 시간표 UI는 매우 만족스럽습니다. 이미지로 그대로 뽑아도 전혀 문제없고 충분히 예쁜 것 같아요.

데이그리드는 제가 진행했던 프로젝트 중 가장 뿌듯한 프로젝트입니다. 처음 혼자 쓰려고 만든 프로젝트가, 친구들에게 공유하려고 개발하다 보니 열몇 명으로 불어나 있고, 입소문을 타고 퍼지면서 이제는 95명에 이르렀습니다. 전교생이 400명인 학교에서 사용자가 1/4이면, 꽤나 성공한 서비스라고 볼 수 있지 않을까요.

여전히 매일 접속자 수는 50명 이상이고, 나머지 사람들은 시간표를 등록해놓고 알림을 받고 있는 것 같아요. 주변 사람들이 쓰는 걸 볼 때마다 좋다고 언급해줘서 매우 행복합니다. 물론 저도 카이스트 자기소개서 3번에 언급할 수 있었으니 윈윈이라고 볼 수도 있겠죠?

데이그리드는 아직 끝나지 않았습니다. 이번 학기 중으로 가능하다면 25학번 후배들이 열심히 작업해서 가온누리 모바일 앱이 나올 것 같은데, 그 전까지만 열심히 굴러주는 중간 단계라고 생각하려고요. 24, 25학번 후배들도 많이 사용하고 있는 것을 보니 어쩌면 내년까지도 이어질 수도 있지 않을까요.