2022년 2학기 개강에 맞추어 온수역 맛집 소개 서비스, 온수냠냠냠을 개발하였습니다.
온수냠냠냠의 기획부터 어떻게 개발하였는 지, 어떤 문제를 겪었는 지 회고와 공유를 목적으로 게시합니다.
개발 목표
개발 동기는 React 기반의 온수역 맛집 소개 서비스인 온수냠냐미와 비슷해 다음에서 보실 수 있습니다.
온수냠냐미는 React를 기반으로 2022년 3월에 배포한 서비스입니다. 한 달 동안 많은 사용자가 들어왔고 많은 관심을 얻을 수 있었습니다.
온수냠냐미 당시 사용자 경험 최적화를 위해 도입한 Hotjar에서 위와 같은 피드백을 들을 수 있었습니다.
온수냠냠냠은 이러한 온수냠냐미의 아쉬웠던 점, 보완할 점을 개선해 더 가치 있는 결과물을 만들고자 하였습니다.
온수냠냐미 vs 온수냠냠냠
개발 환경
온수냠냠냠 기획 당시 서비스를 새로 구성하는 것이 좋겠다고 판단하였습니다.
온수냠냠미에서 업그레이드화 하는 것이 아닌 Next.js를 사용한 이유는 다음과 같습니다.
-
SEO의 필요성
-
상대적으로 여유있는 개발 기간 및 효용성
생각보다 다수의 사용자가 유입되어 서비스를 사용하고 있기에 지속적인 서비스가 되기 위해서 SEO을 고려해야 한다고 생각합니다.
또한 2학기 개강 (9월)에 맞추어 배포를 할 생각이었기에 기획 당시 4월이어서 Next.js를 배우며 개발할 수 있겠다는 생각이 들었습니다.
이러한 이유로 최종적으로 React 기반의 온수냠냐미를 개선하는 것이 아닌 Next.js 기반의 새로운 서비스로 시작하게 되었습니다.
모바일
사용자 정보를 확인해보니 모바일 사용자가 압도적으로 더 많은 모습을 볼 수 있습니다.
이에 따라 온수냠냠냠은 데스크톱 환경으로 접근 시 화면의 크기를 줄이거나 모바일 환경으로 접속하라는 경고가 뜨도록 설정하였고 모바일 환경을 우선으로 개발을 진행하였습니다.
22년 10월 데스크톱 환경으로 들어오는 사용자가 많고 실제로 데스크톱 환경도 지원해 달라는 요청사항들이 있어 현재는 지원되고 있습니다.
기능
온수냠냐미는 식당의 일부 메뉴와 전화번호, 위치 등 기본 정보만 볼 수 있었습니다.
위와 같이 온수냠냠냠에서는 식당의 전체 메뉴와 해당 가격 및 이미지를 볼 수 있고 kakao map api를 이용한 식당의 위치를 볼 수 있습니다.
온수냠냐미의 지표를 보면 주로 식사시간에 사용자가 유입되는 모습을 보았습니다.
대다수가 식사 시간이 다가올 때 식당을 고민하면서 서비스에 들어오는데 식당의 수가 적지 않다보니 모든 식당의 메뉴를 보기엔 어려울 수도 있겠다는 생각이 들었습니다.
이에 친구에게 특정 식당을 공유할 수 있도록 kakao api에서 제공하는 카카오톡 공유하기 기능을 사용하기로 결정하게 되었습니다.
또한 사용자의 편의성을 고려하여 검색기능을 도입하였습니다.
이외에도 공지 페이지에서 소개, 제보하기 등 다양한 서비스를 즐길 수 있으며 온수냠냠냠만의 특별한 후기 페이지를 보실 수 있습니다.
후기페이지에 관한 글은 다음에서 설명드리겠습니다.
밥full
밥full이란 2022년 9월 22일부터 시작한 백반을 메뉴로 영업하는 식당으로 성공회대 미가엘관 1층에 위치하고 있습니다.
기존에는 밥full의 메뉴를 보기위해서는 영업장 입구로 가야만 볼 수 있었습니다.
주간메뉴로 나오기 때문에 매주 메뉴를 보러 가는 수고가 있었고 그렇기에 에브리타임에도 메뉴판을 올려달라는 학생들의 모습을 종종 볼 수 있었습니다.
이에 온수냠냠냠은 성공회대 내의 밥full과 계약을 체결하였고 온수냠냠냠에서 밥full의 정보 및 주간 메뉴를 보실 수 있습니다.
주간메뉴는 매주 월요일에 업데이트 되며 밥full에 관한 자세한 정보도 볼수있도록 구성되어 있습니다.
이외에도 후기페이지에 대한 소개, 문의하기 소개, 정보 수정 제안하기 등 다양한 페이지를 찾아 볼 수 있으며 앞으로도 더 추가될 예정입니다.
겪었던 이슈
식당에 대한 데이터
식당에 대한 정보가 서비스의 가장 핵심이 될 부분이었는데 개인 프로젝트였기에 정보를 모으는 것이 가장 큰 이슈였습니다.
온수냠냠냠은 학생이 직접 만든다는 것에 의미가 있다고 생각하여 직접 찍은 사진으로 구성하는 것이 이 서비스의 소소한 재미로 다가오지 않을까 라는 생각이 들었습니다.
그렇지만 제가 모든 식당의 메뉴를 먹어보진 못했고 이 문제로 많은 시간이 소요되었던 것 같습니다.
언젠가 다 먹어보고 싶네요 .. 😋
주 서비스 사용자 연령층이 대학생이었기에 식당의 사진들이 사용자들에게 더 많겠다는 생각이 들었고 Google forms과 오픈 카톡방을 통해 자료룰 수집하였습니다.
현재는 제보하기 페이지를 만들어 누구나 식당 및 메뉴를 제보할 수 있도록 구성되어 있습니다.
온수냠냠냠만의 페이지
온수냠냠냠에는 후기 페이지가 있습니다.
이곳에서 개발자가 쓴 후기 글을 보고 댓글을 남길 수 있습니다.
누군가에게 후배 혹은 선배, 그리고 동기로써 개발자의 생생한 찐 후기를 통해 단순히 식당 정보만 보는 것이 아니라 식당 정보 이외에도 다양한 정보까지 얻어갈 수 있습니다.
후기 페이지의 컨텐츠를 마크다운으로 작성하는 것이 생산성에 이점이 있을 거 같아 마크다운 파일을 읽는 형식으로 구현하고자 하였습니다.
정적 페이지로써 렌더링하기 위해 Next.js의 getStaticProps, getStaticPath를 이용해 SSG로써 구현하였고 마크다운을 컴파일하는 부분에 remark를 사용하였습니다.
remark-parse를 이용해 마크다운으로, remark-rehype를 통해 HTML로, rehype-sanitize로는 HTML이 안전한지 확인하였고 마지막으로 rehype-stringify를 사용해 문자열로 컴파일하였습니다.
해당 코드는 여기에서 보실 수 있습니다.
사용자 지표
현재 일일 사용자가 103명이라는 지표를 볼 수 있으며 주로 식사 시간에 들어오는 모습을 확인할 수 있습니다.
2학기에 홍보를 시작하였기에 새 학기보다는 적은 사용자 유입이 되고 있다는 생각이 들지만 온수냠냠냠은 앞으로도 꾸준히 개발되어 사용할 수 있도록 할 것입니다.
앞으로
서비스에 추가적인 기능으로 사용자에게 더 좋은 가치를 주고 사용자를 더 많이 유치하기 위해 서버 엔지니어와 함께 개발을 진행중입니다.
서버 엔지니어와 프로젝트를 같이 하게 된 주된 이유는 다음과 같습니다.
-
댓글 기능 활성화
-
좋아요 기능
-
데이터 관리
-
제보하기 기능
댓글 기능 활성화
온수냠냠냠 후기페이지에 Disqus라는 댓글 호스팅 서비스를 이용하여 댓글을 남길 수 있었는데 대부분 실명으로 로그인되는 경우가 많아 생각보다 댓글 기능이 활성화 되지 못하였습니다.
따라서 회원가입 및 로그인을 통해 댓글 기능을 구현하는 것이 좋겠다는 판단이 들었습니다.
좋아요 기능
식당과 후기, 댓글 등에 좋아요 기능을 남길 수 있도록 하려 합니다.
좋아요 기능 정렬 구현이 가능해지며 사용자의 입장에서 이용할 수 있는 기능이 더 많아질 것이라는 생각이 들었습니다.
데이터 관리
혼자 프로젝트를 진행 할 때는 데이터를 파일로써 관리해 수동적으로 유지보수를 해야 했었기에 관리하기 어려웠습니다.
이를 보완하여 백 오피스 애플리케이션을 만들어 유지보수에 이점을 둘 예정입니다.
제보하기 기능
현재 제보하기 기능을 누르면 메일로 이동하게 돼 있지만 사용자의 편의와 접근을 위해 직접 구현하고자 합니다. 식당명과 제보이유, 카테고리 선택, 이미지 업로드 기능들로 구성될 예정입니다.
계속해서 사용자의 입장이 되어 어떤 식으로 구성되는 것이 좋을지 고민을 더욱 해봐야될 것 같습니다.
경험
온수냠냠냠을 운영하면서 Google Analytics, Hotjar, 채널톡 등 사용자 경험 최적화를 위한 서비스를 부착하였습니다. 생각보다 많은 사용자가 다양한 피드백을 주셨고 더욱 책임감을 느끼고 열심히 임할 수 있었습니다.
또한 온수냠냠냠으로 교내의 IT 경진대회에 출전해 은상과 인기상이라는 성과를 얻을 수 있었습니다.
온수냠냠냠은 계속해서 성장을위해 고민하고 발전하고자 노력하고 있습니다.
온수냠냠냠은 사용자의 입장이 되어 더욱 편리한 서비스가 될 수 있도록 노력하겠습니다.
마치며
제가 지금까지 진행했던 프로젝트 중 가장 사용자 유입이 많이 되었던 프로젝트 "온수냠냠냠"에 대한 회고를 마치려 합니다.
사소하지만 누군가에게 도움이 될 수 있었음에 가장 보람찼고 만족할 수 있었습니다.
온수냠냠냠에 도움을 주시고 이용해주시는 모든 분께 감사 인사를 전하며 "온수냠냠냠"의 회고를 마치도록 하겠습니다.
감사합니다! 🙂
