Mr.FixFree - 의뢰 관리 시스템, 간단한 커뮤니티

해결사

우리 친구 중 한 명은 별명이 "해결사"다.
밈처럼 곤란한 문제가 발생하면 "야, 이것 좀 해결해줘" 가 일상이 되었다.
그래서 그 친구를 놀리기 위한 토이 프로젝트를 만들어보기로 했다.

의뢰를 받고, 처리하고, 리뷰를 남기는 시스템. 마치 친구가 공식적인 '해결사'가 된 것처럼 의뢰를 처리하는 시스템을 만들어보자는 아이디어였다. 그래서 'Mr.FixFree'라는 이름이 탄생했다.

Mr.FixFree의 특징

내가 만든 Mr.FixFree는 의뢰 관리 시스템이다.
이름에서 알 수 있듯이 '무료로 고쳐주는 미스터'라는 의미로, 해결사 친구의 무료 해결 서비스를 공식화한 셈이다.

웹 애플리케이션으로 만들어 누구나 쉽게 접근할 수 있도록 했다.

 

친구들에게 도움이 필요할 때면 이제는 "의뢰해."라고 한다.

처음에는 뭔 소리냐고 했지만, 사이트를 보여주자 친구들은 "진짜 웃기네"라며 실제로 의뢰를 등록하기 시작했다.

 

의뢰는 상태에 따라 수주/진행/해결/실패로 관리된다.

의뢰가 등록되면 수주 상태로 시작해서 '해결사' 친구가 작업을 시작하면 진행, 끝나면 해결 또는 실패로 변경한다.

잘 사용하지는 않는다.

 

댓글/답글 기능도 추가했다.

댓글에는 @태그, 이미지(클립보드), 글을 작성할 수 있는데 @태그를 통해 의뢰한 내용에 링크를 걸 수 있고, 의뢰 상태에 따라 링크 색상이 변경된다. 좋아요/싫어요 기능도 있는데  싫어요 100개가 넘을경우 (싫어요 - 좋아요 > 100) 를 해서 참이면 댓글이 차단된다.

 

icon, 메인 화면의 gif는 친구의 고등학교 시절 사진을 보고 직접 제작했다.

기술적으로 어떻게 만들었나?

Mr.FixFree는 React 19와 Vite 6를 기반으로 개발했다. 상태 관리는 Zustand를 사용했는데, Redux보다 가볍고 설정이 간단해서 토이 프로젝트에 딱 맞았다. 움직임과 전환 효과는 Framer Motion으로 구현했고, HTTP 요청은 Axios를 사용했다.

백엔드는 서버리스로 구성했다. 처음에는 복잡한 서버를 구축할 생각이었지만, Redis를 활용한 간단한 구조로도 충분했다. Vercel의 서버리스 함수와 Redis를 연결해 데이터를 저장하고 조회하는 방식이다. (장난치는데 aws까지 가기 싫었다.)

 

개발하면서 느낀 점

처음에는 단순히 '해결사' 친구를 놀리기 위한 프로젝트였지만, 개발하면서 기초를 다질 수 있었다. React의 최신 기능들과 Vite의 빠른 개발 환경, Zustand의 간결한 상태 관리, 그리고 서버리스 아키텍처까지. 토이 프로젝트지만 실제 업무에서도 적용할 수 있는 기술들을 익힐 수 있었다.

 

가장 큰 수확은 의외로 친구들의 반응이었다. 친구를 놀리려고 간단하게 만든 사이트인데 생각보다 사용률이 뛰어나서 이제는 우리 사이에서 작은 커뮤니티(의뢰 기능은 쓰지 않는다)가 되었다.