localmaster · 위시켓(Wishket)

프로젝트 배경

대부분의 기업 웹사이트는 간단한 공지사항 팝업이나 메인 배너 하나를 수정하려 해도 개발자에게 연락하고, 유지보수 비용을 지불하며 며칠을 기다려야 하는 구조적인 비효율을 안고 있습니다. 이는 급변하는 마케팅 트렌드에 대응하는 데 큰 걸림돌이 됩니다.

본 프로젝트는 이러한 '기술 의존성' 문제를 해결하기 위해 시작되었습니다. 프론트엔드(사용자 화면)와 데이터 관리 영역을 분리하는 Headless 아키텍처를 도입하여, 코딩을 전혀 모르는 운영팀/마케팅팀 직원이 마치 블로그를 쓰듯 실시간으로 사이트의 모든 콘텐츠(팝업, 배너, 텍스트)를 직접 제어할 수 있는 환경을 구축하는 것을 목표로 했습니다. 이를 통해 유지보수 비용 절감은 물론, 비즈니스 운영의 즉시성을 확보하고자 했습니다.

프로젝트 성과

"현장의 목소리를 담은, 가장 쉬운 관리자 페이지"

관광 및 서비스업 현장에서 18년간 근무하며 가장 답답했던 점은 "이벤트 팝업 하나 띄우는 데 왜 결재를 올리고 개발사를 기다려야 하는가?"였습니다. 현장의 아이디어는 즉시 반영될 때 가장 큰 효과를 발휘합니다.

핵심 기능

No-Code 기반 실시간 콘텐츠 관리 (WYSIWYG 에디터)

개발 지식이 없는 운영자도 워드(Word)를 쓰듯이 텍스트와 이미지를 편집할 수 있는 직관적인 에디터를 제공합니다. HTML 코드를 건드리지 않고도 뉴스룸, 공지사항 등을 자유롭게 작성할 수 있습니다.

실시간 데이터 동기화 (Real-time Sync)

관리자 페이지에서 '저장' 버튼을 누르는 즉시, 별도의 서버 재배포나 빌드 과정 없이 사용자 웹사이트(Front-end)에 변경 사항이 1초 이내로 반영되는 실시간 연동 시스템을 구현했습니다.

드래그 앤 드롭(Drag & Drop) 미디어 관리

복잡한 파일 업로드 방식 대신, 마우스 드래그만으로 다수의 이미지를 업로드하고 순서를 변경할 수 있는 UI를 적용하여 포트폴리오나 갤러리 관리의 편의성을 극대화했습니다.

모바일 대응 반응형 어드민 (Responsive Admin)

PC뿐만 아니라 모바일 및 태블릿 환경에서도 완벽하게 작동하도록 반응형으로 설계했습니다. 담당자가 외부 이동 중이거나 퇴근 후에도 긴급 공지나 팝업을 스마트폰으로 즉시 제어할 수 있습니다.

Headless CMS 아키텍처

보여지는 화면과 콘텐츠 관리를 분리하여 설계했습니다. 이를 통해 사이트 로딩 속도를 최적화했으며, 추후 앱(App)이나 키오스크 등 다른 플랫폼으로 서비스를 확장할 때도 동일한 데이터베이스를 연동하였습니다.

진행 단계

기획 및 요구사항 분석 (Planning)

2025.12.

기존 운영의 비효율성을 분석하고, 개발 지식이 없는 실무자도 쉽게 사용할 수 있는 '운영 중심' 기능 명세서를 작성. 프론트엔드와 데이터 관리를 분리하여 확장성이 뛰어난 Headless CMS 아키텍처를 설계

UI/UX 디자인 (Design)

2025.12.

복잡한 기능을 배제한 직관적인 대시보드 UI를 설계. 텍스트 입력과 이미지 업로드, 실시간 미리보기 기능을 중심으로 UX를 최적화했으며, 모바일에서도 관리가 가능하도록 반응형 웹 디자인을 적용.

프론트엔드/백엔드 개발 (Development)

2025.12.

React.js로 빠른 속도의 SPA를 구축하고, Firebase를 통해 인증 및 실시간 DB 환경을 구현. 드래그 앤 드롭 업로드, 콘텐츠 실시간 반영, 팝업 스케줄링 등 운영 효율을 높이는 핵심 기능 개발

통합 테스트 및 최적화 (Test & QA)

2025.12.

마케팅팀 등 비개발 직군을 대상으로 사용성 테스트를 진행하여 피드백을 반영. 데이터 오입력 방지를 위한 유효성 검사 로직을 강화하고, 데이터베이스 보안 규칙 및 관리자 권한 설정을 점검하여 안정성을 확보

런칭 및 운영 매뉴얼 배포 (Launch)

2026.01.

서비스 배포 및 실제 웹사이트 연동을 완료. 운영자가 기능을 100% 활용할 수 있도록 상세 매뉴얼 작성 및 교육을 진행했으며, 초기 모니터링을 통해 시스템 안정화를 지원하고 유지보수 체계를 구축

프로젝트 상세

통합 운영 관리 시스템 (Custom CMS)

내용: 프론트엔드와 분리된 Headless 형태의 독자적인 관리자 시스템.

특징: 개발 지식이 없는 직원도 팝업, 배너, 콘텐츠를 실시간으로 수정 가능.

<위시켓 이용 약관에 의해 수정된 내용입니다.>