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

JeongWu (Jane) Park·2024년 12월 22일
1

올해 처음으로 실무에서 미니 프로젝트를 진행했다.
내가 진행한 프로젝트는 바로 사내 회의실 예약 시스템의 UI/UX 개편이다.

지금까지의 업무는 시스템 안정화와 유지보수에 집중되어 있어,
새로운 기술을 탐구하거나 직접 적용해볼 기회가 많지 않았다. 🙁

운영 업무 속에서도 내가 프론트엔드 기술적으로 성장하려면 도전할 수 있는 환경이 필요했다.
개인적으로 사이드 프로젝트를 진행하는 것도 방법이었지만,
그보다 실무에서 실제 사용자들이 사용하는 시스템에 적용해보고 싶었다.


프로젝트의 시작

평소에 사용하면서 불편하다고 생각한 시스템이 하나 있었다.
바로 팀 내부에서 사용하는 사내 회의실 예약 시스템이었다.

내가 쓰기에도 이렇게 불편한데, 다른 사람들도 그러지 않을까?

실제로 동료들 사이에서도 이 시스템이 직관적이지 않고 불편하다는 불만이 많았다.
이 시스템을 프로젝트로 선정한 이유는 명확했다.
✅ 팀 내부 시스템이므로 고객사 영향 없이 새로운 기술을 적용하기 부담이 적었다.
✅ 사용자로서 문제를 깊이 이해하고 있었고, 개선해야 할 부분이 명확했다.
✅ 무엇보다 내가 매일 사용하는 시스템이라 개선 효과를 직접 체감할 수 있었다.


기존 시스템은 어땠을까?

사무실에는 총 3개의 회의실(대회의실, A회의실, B회의실)이 있다.
기존 시스템은 ReactSpring Boot로 간단히 구현된 구조로, 주요 기능은 다음과 같았다.

📌 기존 시스템 주요 기능

  • 회의실별 탭과 월간 캘린더 구조
  • 로그인 없이 간단한 예약 기능 제공
  • 1개월 또는 3개월 단위의 일괄 예약 지원

📌 기존 예약 프로세스

예시: 2024년 12월 21일 10:00~11:00에 회의를 예약하려면?

1️⃣ 대회의실 탭에서 12월 21일을 선택 후, more 버튼을 눌러 해당 날짜의 예약 현황 확인
2️⃣ 원하는 시간이 이미 예약되어 있다면, B회의실 → A회의실 순으로 탭을 변경하며 예약 가능 여부 확인
3️⃣ 빈 시간대를 찾았다면, 해당 날짜를 클릭하여 예약 모달 창 띄우기
4️⃣ 예약명, 시간, 예약자 정보 입력, 반복 예약이 필요하면 1개월 또는 3개월 단위 일괄 예약 설정

📌 기존 시스템의 문제점

사용자 입장에서 이 시스템에는 아쉬운 점이 많았다.

💬 사용자 경험 (UX) 측면

  • 원하는 시간대의 각 회의실 현황을 한눈에 파악하기 어렵다.
  • 예약하려면 여러 단계를 거쳐야 해서, 빠른 예약이 불가능하다.

💬 기능적인 문제

  • 반복 예약 옵션이 제한적이라, 불필요한 예약 건이 발생한다.
  • 로그인 없이 예약 가능 → 타인이 실수로 예약을 삭제하는 경우가 발생한다.
  • 현재 진행 중인 회의를 직관적으로 확인하기 어렵다.

무엇보다 UI/UX가 직관적이지 않았고, 디자인이 너무 구렸다...🤐


프로젝트 목표

이 프로젝트를 통해 3가지 주요 목표를 설정했다.

🎯 1. 사용자 경험 개선

  • 더 직관적인 UI 디자인 적용하여 한눈에 회의실 현황을 확인할 수 있도록 개선

🎯 2. 예약 프로세스 간소화

  • 단계를 줄이고 빠른 예약 가능하도록 UX 최적화
  • 새로운 예약 방식 추가 (ex. 드래그앤드롭, 간편 예약 기능 등)

🎯 3. 기술적 성장

  • React 역량을 강화하고, 새로운 프론트엔드 기술을 실무에 적용

다음 이야기

이번 글에서는 프로젝트를 시작하게 된 배경과 기존 시스템의 문제점을 다뤘다.
다음 편에서는 구체적인 개선 과정과 결과를 공유할 예정이다.

1️⃣ 회의실 예약 시스템이 어떻게 변화했는지
2️⃣ 어떤 기술을 도입했고, 어떤 방식으로 구현했는지
이 이야기를 함께 나눠보려 한다! 🚀

profile
안녕하세요 :)

0개의 댓글