회의실 예약 시스템 UI/UX 개편 (2)

JeongWu (Jane) Park·2024년 12월 30일

프로젝트 목표

이번 프로젝트의 목표는 사내 회의실 예약 시스템의 UI/UX를 개선하여 더 직관적이고 효율적인 사용자 경험을 제공하는 것이다.

프로젝트 기간은 10월 15일부터 11월 28일까지, 한 달 반이라는 짧은 시간 내에 최대한의 효과를 내는 것이 핵심이었다.

무엇보다 기존에 사용하고 있던 기술 스택을 크게 변경하지 않고 진행하는 것을 우선시했다. 최소한의 리소스로 효율적으로 개선하고 싶었기 때문이다.

기존 기술 스택과 한계

기존 시스템은 FullCalendar 라이브러리를 사용하고 있었다.
먼저 가장 중요한 기능인 한 눈에 여러 회의실의 가용상태를 확인하기 위해서는 아래와 같은 타임라인뷰 기능이 필요했다.

하지만 이 라이브러리에서 제공하는 타임라인 뷰 기능은 유료로만 사용 가능했다. 따라서, 다른 라이브러리 대안을 찾아야 했다.

월간 캘린더 뷰를 제공하면서 타임라인뷰를 제공해야함

다음은 검토한 라이브러리이다.

FullCalendar: 월간 뷰와 주간 뷰를 제공하지만, 타임라인 뷰는 유료로 제한
Tui Calendar: 완전 무료, 일간 뷰 제공
DHTMLX Schdeuler : 강력한 기능 제공하지만, 유료

최종 선택

결국 TUI Calendar를 도입하기로 결정했다. 이 라이브러리는 타임라인 뷰는 없지만, 일간 뷰를 통해 각 회의실의 예약 현황을 표시할 수 있었고, 완전 무료라는 점이 큰 장점이었다. 또한 월간, 주간, 일간 뷰를 모두 제공해 충분히 요구 사항을 충족할 수 있었다.

(회사에서 이 개발을 진행하고있을 때, 항해교육도 진행중이었는데 그 당시 코치님 중 오프 코치님이 알고보니 이전 회사에서 Tui Library를 개발하셨다고 했다..! 성호 코치님이 그 당시 팀장님이 셨다고 한다..이런 우연이)

TUI Calendar 도입 과정

기존의 FullCalendar는 두고 TUI Calendar를 새로 추가하려고 했는데 생각보다 간단하지 않았다..

⚠️ 의존성 충돌 문제 발생

FullCalendar와 TUI Calendar를 동시에 설치했을 때 package.json의 의존성 충돌이 발생했다.

결국 기존 라이브러리를 하나하나 분석하며 불필요한 부분을 삭제하고 필요한 라이브러리만 재설치하여 의존성 버전을 맞추는 방식으로 문제를 해결했다.

이 과정에서 예상보다 많은 시간이 소요되었다. 역시 개발에서 환경 설정이 가장 어렵다는 것을 다시 한번 깨달았다. 😅

UI 설계 과정

기존 UI는 너무 단순하고 직관적이지 않았다. 매니저님과 사수와 대화하며 나는 여러 가지 시안을 만들었고, 최종적으로 아래와 같은 구조로 결정했다:

✅ 왼쪽 layout: 미니 캘린더와 빠른 예약 기능
✅ 오른쪽 layout: 월간, 주간, 일간 캘린더 뷰

UI 설계를 위해 Figma를 적극 활용했다.
UI 구성을 결정하는 것도 시간이 꽤 걸렸지만, 기획부터 시각화까지 모두 내 손으로 해보니 더욱 재미있었다! 😄

반복 예약 기능 구현

또 우연히도! (이 회의실 개편 프로젝트는 참 우연이 많다!)
반복 예약 기능을 개발하던 시점에, 항해 교육에서도 오프 코치님이 테스트 코드 발제로 반복 일정 구현을 주제로 다루고 있었다.

덕분에 반복예약 기능을 개발하면서 테스트 케이스를 더욱 꼼꼼하게 고려하며 개발할 수 있었다.
우선 반복예약 기능은 Google Calendar의 반복일정을 참고했다.

📌 반복 예약 및 반복일정 개발 시 고려한 사항

✅ 윤년 처리

30일 기준으로 2달 반복 시, 다음 달이 윤달이면 어떻게 처리해야할까?
윤년 29일에 또는 31일에 매월 또는 매년 반복일정을 설정한다면 어떻게 처리할까?

✅ 반복 종료 조건

특정 날짜까지만 반복 설정할 것인지?
처음 반복 일정 이후 자동 종료할 것인지?

✅ 반복 일정 단일/전체 수정

반복일정을 수정하면 단일 일정으로 변경되어야한다.

✅ 반복 일정 단일/전체 삭제

이 일정만 삭제할 것인지, 모든 반복 일정을 삭제할 것인지 선택 가능하도록 구현

최종 UI & 개선 사항

📌 주요 기능 개선 사항

✅ 1) 다양한 캘린더 뷰 제공

월간/주간/일간 뷰 지원
일간 뷰에서 전체 회의실 동시 표시 가능
주간/일간 뷰에서도 날짜 선택이 용이하도록 왼쪽 상단에 캘린더 배치
업무 시간대 중심 표시 (8시~20시 적용 및 주말 미노출)
회의실별 차별화된 색상 적용

✅ 2) 예약 프로세스 간소화

드래그 앤 드롭 방식의 간편한 예약 기능 추가
예약 팝업에서 최소한의 정보만 입력하도록 개선

✅ 3) 반복 예약 기능 개선

일/주/월 단위 유연한 반복 설정 가능
반복 삭제 옵션 추가 (단일 예약 삭제 / 모든 반복 예약 삭제)
시각적 구분을 위한 반복 아이콘 추가

✅ 4) 빠른 예약 기능 추가

현재 시간 기준 즉시 예약 기능
30분/1시간 단위 예약 옵션
현재시간 기준 가용 회의실 TOP5 리스트 표시

✅ 5) 예약 잠금 기능 추가

비밀번호 설정하여 타인이 예약 삭제 불가
잠금 아이콘을 통해 잠금 예약 시각적 표시

프로젝트 배포와 성과

프로젝트 배포 일주일 전, 시스템 개편 소식을 IT 부문 팀원들에게 메일로 공지했다. 기존 시스템 데이터를 새로운 구조로 마이그레이션한 뒤 무사히 배포를 완료했다.
현재까지 약 한 달간 사용 중인데, 팀원들로부터 긍정적인 피드백을 받고 있다.

✅ 업무 효율성 증대: 예약 시간이 단축되고, 가용 시간대를 확인하는 과정이 간편해졌다.
✅ 사용자 만족도 향상: 직관적인 UI와 간소화된 프로세스로 사용성이 크게 개선되었다.

TUI Calendar 오픈소스 기여

이번 프로젝트를 통해 TUI Calendar를 사용하면서 해당 오픈소스에 기여하고 싶다는 생각이 들었다. 특히, 사용 중 불편했던 스크롤 삭제 기능을 추가하고 싶었다. TUI Calendar GitHub를 방문해보니, 다른 개발자들도 이 기능을 원하고 있어, 스크롤 기능을 끄거나 추가할 수 있는 옵션을 property로 제공해보고자 했다.