seulheeLog'

[온수냠냠냠] onsuYumYumYum

2022-09-06 at Project category

slide4

2022년 2학기 개강에 맞추어 온수역 맛집 소개 서비스, 온수냠냠냠을 개발하였습니다.

온수냠냠냠의 기획부터 어떻게 개발하였는 지, 어떤 문제를 겪었는 지 회고와 공유를 목적으로 게시합니다.

개발 목표

개발 동기는 React 기반의 온수역 맛집 소개 서비스인 온수냠냐미와 비슷해 다음에서 보실 수 있습니다.

스크린샷 2022-09-07 오후 4 11 35

온수냠냐미는 React를 기반으로 2022년 3월에 배포한 서비스입니다. 한 달 동안 많은 사용자가 들어왔고 많은 관심을 얻을 수 있었습니다.

image

온수냠냐미 당시 사용자 경험 최적화를 위해 도입한 Hotjar에서 위와 같은 피드백을 들을 수 있었습니다.

온수냠냠냠은 이러한 온수냠냐미의 아쉬웠던 점, 보완할 점을 개선해 더 가치 있는 결과물을 만들고자 하였습니다.

온수냠냐미 vs 온수냠냠냠

개발 환경

온수냠냠냠 기획 당시 서비스를 새로 구성하는 것이 좋겠다고 판단하였습니다.

온수냠냠미에서 업그레이드화 하는 것이 아닌 Next.js를 사용한 이유는 다음과 같습니다.

  • SEO의 필요성

  • 상대적으로 여유있는 개발 기간 및 효용성

생각보다 다수의 사용자가 유입되어 서비스를 사용하고 있기에 지속적인 서비스가 되기 위해서 SEO을 고려해야 한다고 생각합니다.

또한 2학기 개강 (9월)에 맞추어 배포를 할 생각이었기에 기획 당시 4월이어서 Next.js를 배우며 개발할 수 있겠다는 생각이 들었습니다.

이러한 이유로 최종적으로 React 기반의 온수냠냐미를 개선하는 것이 아닌 Next.js 기반의 새로운 서비스로 시작하게 되었습니다.

모바일

스크린샷 2022-09-07 오후 4 15 33

사용자 정보를 확인해보니 모바일 사용자가 압도적으로 더 많은 모습을 볼 수 있습니다.

스크린샷 2022-09-07 오후 4 26 34

이에 따라 온수냠냠냠은 데스크톱 환경으로 접근 시 화면의 크기를 줄이거나 모바일 환경으로 접속하라는 경고가 뜨도록 설정하였고 모바일 환경을 우선으로 개발을 진행하였습니다.

기능

온수냠냐미는 식당의 일부 메뉴와 전화번호, 위치 등 기본 정보만 볼 수 있었습니다.

스크린샷 2022-09-07 오후 4 17 41

위와 같이 온수냠냠냠에서는 식당의 전체 메뉴와 해당 가격 및 이미지를 볼 수 있고 kakao map api를 이용한 식당의 위치를 볼 수 있습니다.

스크린샷 2022-09-07 오후 4 19 39

온수냠냐미의 지표를 보면 주로 식사시간에 사용자가 유입되는 모습을 보았습니다.

대다수가 식사 시간이 다가올 때 식당을 고민하면서 서비스에 들어오는데 식당의 수가 적지 않다보니 모든 식당의 메뉴를 보기엔 어려울 수도 있겠다는 생각이 들었습니다.

스크린샷 2022-09-07 오후 4 20 59

이에 친구에게 특정 식당을 공유할 수 있도록 kakao api에서 제공하는 카카오톡 공유하기 기능을 사용하기로 결정하게 되었습니다.

또한 사용자의 편의성을 고려하여 검색기능을 도입하였습니다.

이외에도 공지 페이지에서 소개, 제보하기 등 다양한 서비스를 즐길 수 있으며 온수냠냠냠만의 특별한 후기 페이지를 보실 수 있습니다.

후기페이지에 관한 글은 다음에서 설명드리겠습니다.

겪었던 이슈

식당에 대한 데이터

식당에 대한 정보가 서비스의 가장 핵심이 될 부분이었는데 개인 프로젝트였기에 정보를 모으는 것이 가장 큰 이슈였습니다.

온수냠냠냠은 학생이 직접 만든다는 것에 의미가 있다고 생각하여 직접 찍은 사진으로 구성하는 것이 이 서비스의 소소한 재미로 다가오지 않을까 라는 생각이 들었습니다.

그렇지만 제가 모든 식당의 메뉴를 먹어보진 못했고 이 문제로 많은 시간이 소요되었던 것 같습니다.

언젠가 다 먹어보고 싶네요 .. 😋

주 서비스 사용자 연령층이 대학생이었기에 식당의 사진들이 사용자들에게 더 많겠다는 생각이 들었고 Google forms오픈 카톡방을 통해 자료룰 수집하였습니다.

현재는 제보하기 페이지를 만들어 누구나 식당 및 메뉴를 제보할 수 있도록 구성되어 있습니다.

온수냠냠냠만의 페이지

온수냠냠냠에는 후기 페이지가 있습니다.

이곳에서 개발자가 쓴 후기 글을 보고 댓글을 남길 수 있습니다.

누군가에게 후배 혹은 선배, 그리고 동기로써 개발자의 생생한 찐 후기를 통해 단순히 식당 정보만 보는 것이 아니라 식당 정보 이외에도 다양한 정보까지 얻어갈 수 있습니다.

후기 페이지의 컨텐츠를 마크다운으로 작성하는 것이 생산성에 이점이 있을 거 같아 마크다운 파일을 읽는 형식으로 구현하고자 하였습니다.

정적 페이지로써 렌더링하기 위해 Next.js의 getStaticProps, getStaticPath를 이용해 SSG로써 구현하였고 마크다운을 컴파일하는 부분에 remark를 사용하였습니다.

remark-parse를 이용해 마크다운으로, remark-rehype를 통해 HTML로, rehype-sanitize로는 HTML이 안전한지 확인하였고 마지막으로 rehype-stringify를 사용해 문자열로 컴파일하였습니다.

해당 코드는 여기에서 보실 수 있습니다.

사용자 지표

현재 일일 사용자가 103명이라는 지표를 볼 수 있으며 주로 식사 시간에 들어오는 모습을 확인할 수 있습니다.

2학기에 홍보를 시작하였기에 새 학기보다는 적은 사용자 유입이 되고 있다는 생각이 들지만 온수냠냠냠은 앞으로도 꾸준히 개발되어 사용할 수 있도록 할 것입니다.

앞으로

온수냠냠냠 노션

서비스에 추가적인 기능으로 사용자에게 더 좋은 가치를 주고 사용자를 더 많이 유치하기 위해 서버 엔지니어와 함께 개발을 진행중입니다.

서버 엔지니어와 프로젝트를 같이 하게 된 주된 이유는 다음과 같습니다.

  • 댓글 기능 활성화

  • 좋아요 기능

  • 데이터 관리

  • 제보하기 기능

댓글 기능 활성화

온수냠냠냠 후기페이지에 Disqus라는 댓글 호스팅 서비스를 이용하여 댓글을 남길 수 있었는데 대부분 실명으로 로그인되는 경우가 많아 생각보다 댓글 기능이 활성화 되지 못하였습니다.

따라서 회원가입 및 로그인을 통해 댓글 기능을 구현하는 것이 좋겠다는 판단이 들었습니다.

좋아요 기능

식당과 후기, 댓글 등에 좋아요 기능을 남길 수 있도록 하려 합니다.

좋아요 기능 정렬 구현이 가능해지며 사용자의 입장에서 이용할 수 있는 기능이 더 많아질 것이라는 생각이 들었습니다.

데이터 관리

혼자 프로젝트를 진행 할 때는 데이터를 파일로써 관리해 수동적으로 유지보수를 해야 했었기에 관리하기 어려웠습니다.

이를 보완하여 백 오피스 애플리케이션을 만들어 유지보수에 이점을 둘 예정입니다.

제보하기 기능

현재 제보하기 기능을 누르면 메일로 이동하게 돼 있지만 사용자의 편의와 접근을 위해 직접 구현하고자 합니다. 식당명과 제보이유, 카테고리 선택, 이미지 업로드 기능들로 구성될 예정입니다.

계속해서 사용자의 입장이 되어 어떤 식으로 구성되는 것이 좋을지 고민을 더욱 해봐야될 것 같습니다.

마치며

제가 지금까지 진행했던 프로젝트 중 가장 사용자 유입이 많이 되었던 프로젝트 "온수냠냠냠"에 대한 회고를 마치려 합니다.

사소하지만 누군가에게 도움이 될 수 있었음에 가장 보람찼고 만족할 수 있었습니다.

온수냠냠냠에 도움을 주시고 이용해주시는 모든 분께 감사 인사를 전하며 "온수냠냠냠"의 회고를 마치도록 하겠습니다.

감사합니다! 🙂

seulheehan

Personal blog by seulheehan.

I like to share my knowledge.