Officener
오피스너 웹 통합 플랫폼
기존 모바일 앱으로만 제공되던 오피스너 서비스를 웹으로 확장하여 사용자들이 멀티플랫폼에서 편리하게 이용할 수 있도록 개발된 프로젝트입니다. 불편 접수 및 정기 주차, FAQ 개발을 담당했으며, API 부재인 상황에서 MSW를 활용한 API Mocking으로 빠른 개발을 진행했습니다.React Hook Form & Zod를 활용한 폼 상태 관리 및 유효성 검증을 구현하여 사용자 경험을 개선했습니다. 이 프로젝트는 기업 연계 프로그램을 통해 실제 개발이 진행되었으며, 최종적으로 실제 서비스로 출시되었습니다.
TIMELINE
24.09.02 ~ 24.09.26
TEAM
5 Frontend
ROLE
Frontend Developer
CONTRIBUTION
· Development : 100%
Frontend
Next.js, TypeScript, TanStack Query, Zustand, Zod, React Hook Form, TailwindCSS, Shadcn/UI, MSW
Collaboration
Git, Notion, Discord, Linear, Figma
모바일 앱의 기능을 웹에서 어떻게 최적화된 경험으로 제공할 수 있을까?
기존 앱에서만 가능했던 기능을 웹 버전으로 확장하면서, PC 환경에 맞는 UX 최적화가 필요했습니다.MSW를 활용한 API Mocking으로 백엔드 개발 완료 전에 프론트엔드 개발을 진행하여 개발 속도를 향상시켰습니다.
웹 환경에 최적화된 사용자 경험 제공
기존의 모바일 앱을 웹 환경으로 이전하면서 Next.js를 개발 프레임워크로 채택하였습니다. 이는 검색 엔진 최적화(SEO)를 고려한 선택이었으며, 또한 건물별로 다른 데이터를 제공해야 하는 특성상 동적 라우팅과 서버사이드 렌더링(SSR)을 지원하는 Next.js의 장점을 활용하기 위함이었습니다. 프로젝트에서는 반응형 디자인을 적용하여 다양한 디바이스에서 일관된 사용자 경험을 제공하고, Zod 및 React Hook Form을 활용한 유효성 검사를 통해 사용자 입력 오류를 최소화하였습니다. 또한, TanStack Query를 통한 서버 상태 관리로 데이터 동기화 및 캐싱 전략을 최적화하여 성능을 향상시켰습니다.
불편 접수 관리
불편사항 등록 및 처리 현황 관리
사용자는 불편사항을 등록하고 처리 상태를 확인할 수 있으며, 이미지 업로드와 함께 상세 내용을 작성할 수 있습니다. 관리자와의 답글을 통한 소통이 가능하며, 기존 민원을 수정하거나 삭제할 수 있습니다.
주차 등록 관리
주차 등록 및 처리 현황 관리
사용자는 불편사항을 등록하고 처리 상태를 확인할 수 있으며, 이미지 업로드와 함께 상세 내용을 작성할 수 있습니다. 관리자와의 답글을 통한 소통이 가능하며, 기존 민원을 수정하거나 삭제할 수 있습니다.
자주 묻는 질문
자주 묻는 질문
사용자는 불편사항을 등록하고 처리 상태를 확인할 수 있으며, 이미지 업로드와 함께 상세 내용을 작성할 수 있습니다. 관리자와의 답글을 통한 소통이 가능하며, 기존 민원을 수정하거나 삭제할 수 있습니다.
멀티플랫폼 접근성 향상으로 사용자 편의성 증대
API 부재 시, MSW를 활용한 API Mocking으로 개발 생산성 향상
프론트엔드 개발자로서 API 부재 상황을 해결한 경험
우리 팀은 불편 접수 및 정기 주차 등록 기능을 메인으로 담당하며, 이미지 업로드 기능을 포함한 등록 수정 및 삭제 기능 개발을 진행했습니다. 이러한 기능은 단순 UI 구현이 아니라 실제 데이터가 반영되어야 했고, 수정 및 삭제 후 적절한 알럿이 표시되는 등 인터랙션이 포함된 작업이었습니다. 그러나 프로젝트 초반 API가 완전히 구현되지 않은 상태였기 때문에, 프론트엔드 개발을 지속적으로 진행하기 위해 MSW(Mock Service Worker)를 도입하게 되었습니다.
기존에는 단순한 Mock Data를 활용할 수도 있었지만, 실제 API와 동일한 형태의 Mocking을 통해 더 정확한 개발 및 테스트 환경을 구축할 수 있었습니다. 또한, MSW를 사용함으로써 기획자 및 디자이너와의 원활한 소통이 가능해졌습니다. 데모를 통해 구현된 기능을 직접 시연하며 UX 및 플로우를 논의할 수 있었고, 피드백을 즉각적으로 반영하는 과정에서 협업의 효율성을 높일 수 있었습니다.
결과적으로, API가 완전히 구현되지 않은 상황에서도 개발을 원활하게 진행하는 방법을 익혔으며, Mock API를 활용한 실전적인 개발 방법을 체득할 수 있는 기회가 되었습니다.