모임타임: 약속시간을 정하는 웹사이트를 만들어보자

최종 완성품

모임 시간 정할때는!?!? 모임타임~~!

모임타임 - 모임 만들기

모임타임 모바일 테스트 화면 캡처본

배경

요즘 우리 학교 학생들이 가장 애용하는 웹사이트가 있다. 이름하야 '웬투밋(when2meet)'이라는 사이트다. 

When2meet

웬투밋은 해외 사이트인데, 여럿이서 모임 약속을 정할 때 모두가 가능한 시간을 선택할 수 있게 도와주는 사이트라고 보면 된다.

사실 1대 1로 만나는 약속이라면 둘이서 톡방에서 얘기하고 끝내면 되지만, 여러명이서 만날 때는 카카오톡 방에 굉장히 긴 투표를 만든다던가 하는 식으로 약속시간을 정하지 않나.
이런 고민을 해결해주는 사이트가 바로 웬투밋이다. 우리 학교에서는 동아리 회의라던가, 팀플 일정같은걸 정할 때 많이 쓴다.

웬투밋에서는 모임 날짜들을 지정하고 이벤트를 생성한 뒤 그 링크를 공유하면, 각자 가능한 시간을 체크할 수 있다. 
그럼 전체 시간표의 각 셀마다 색깔이 표시돼서 전체 참여자 중 몇 명이 가능한지를 확인할 수 있는 것이다. 마우스를 올리면 누가 가능한지, 불가능한지도 확인할 수 있다.

웬투밋 이벤트 생성 페이지

웬투밋 Availability Check 페이지

웬투밋의 Availability 표시

문제는...

문제는 이 웹사이트가 PC 기반으로 설계된 사이트라는 점이다. 도대체 얼마나 오래됐는지 알 수 없는 묘한 디자인은 차치하고서라도, 기본적으로 마우스가 hover 되었을 때 가능한 사람들의 목록이 뜬다던가, 체크를 할 때에도 마우스를 잡고 끄는 형태로 체크가 가능하다던가 하는, PC의 하드웨어가 아니면 사용이 불편하게끔 UI가 설계되어 있다.
보통 이런 링크는 카카오톡 톡방에서 공유가 되는데, PC카톡에서 연다면 상관없겠지만 이동중에 모바일로 링크를 열면? 아래 사진처럼 보인다. 화면 비율이 이상한거야 확대해서 대응한다 쳐도, 마우스 기반 이벤트 핸들러로 인해 셀 터치에 대한 대응이 잘 되지 않는다던가 하는 오묘한 현상이 발생한다. 

웬투밋을 모바일로 열었을 때 화면(개불편하다)

기획 & 디자인

'모바일에서도 사용하기 편리한 웬투밋을 만들자!!!' 가 이 짧은 프로젝트의 모토였다.

단순하면서도 꼭 필요한 기능을 담고 있다는 점이 웬투밋의 매력인데, 여기에서 모바일 사용성만 개선한다면 적어도 나와 내 주변 친구들은 편리하게 사용할 수 있겠다는 생각이 들었다. 

말하자면 니즈에 대한 검증은 이미 웬투밋으로 끝났으니, 우리는 개선만 해보자는 취지. 어차피 이걸로 대단한 사업을 할 건 아니고 돈이 벌리지 않아도 상관없다.

우선 레이아웃 자체를 모바일에 최적화해서 만들고, 셀의 선택 등도 터치 기반으로 동작할 수 있게끔 설정했다. 셀을 길게 눌러 드래그하는 형태로 여러 셀을 한번에 고를 수 있게끔 만들기도 했다.

디자인도, 좀 더 '예쁘게' 만들었다. 디자인은 나의 애인이자 사업 파트너인 악당(스스로를 악당이라 칭하길 바람)이 해줬다.

작업

작업은 디자인까지 해서 2주 정도 소요됐는데, 사실 다른 공부나 이런것들을 병행하면서 한 거기 때문에, 순수하게 투자한 시간만 보면 일주일 정도 걸렸다고 보는게 맞는 것 같다.

거기에 미세한 조정 작업에 이틀정도 더 소요됐다.

개발 스택은 Angular와 Firebase 두 가지.
특히 Angular 가 가장 최근에 작업했던 프로젝트의 버전이 14였는데, 최근 굉장히 많은 변화가 일어났고 버전 17까지 출시된 상태라 살짝 따라잡기가 버거운 면도 있었다. 가장 큰 변화는 Standalone Component 의 등장. 15에 도입된 것으로 알고 있는데, 이젠 default setup이 된 상태이다. 
Angular의 최대 단점인 App.module.ts를 없애버린 것인데, 이젠 컴포넌트 하나를 렌더링할 때 필요한 모듈만 그때그때 로드한다고 보면 된다. 확실히 속도가 빨라진 건 체감된다.
Firebase에서 SSR(Server Side Rendering)을 구현하는 절차도 훨씬 단순해졌다. 아직 Beta feature이긴 하지만, Firebase의 Functions를 레버리지해 앵귤러 사이트를 서버단에서 미리 로딩할 수 있게 됐다. 이전엔 관련 세팅을 하나하나 정해줬어야 했는데, 이젠 곧바로 된다.
다만 아직 공유할 때 이벤트 이름이 Title에 자동으로 반영되게 한다던가 하는 식으로 SSR을 제대로 써먹고 있지는 못하다. 이런건 추후 업데이트 예정.

아무튼, 이 글을 우연히 지나가다가 보시는 당신, 당신도 한 번 사람들 만날 일이 있다면 사용해주시길.