[맛길] 프로젝트 주제 및 기술 스택 선정

🌈 사이드 프로젝트 시작 계기

팀 프로젝트를 진행하면서 소통과 협업의 기술을 배울 수 있어 프론트앤드 개발자로서 한 걸음 더 가까워진 것 같아요.

그런데 프로젝트 후반으로 갈 수록 저를 포함한 팀원들의 체력과 의욕이 떨어져 기능을 하나씩 빼게 되었습니다. 추가 기능을 구현하고 싶은 제 입장에서는 프로젝트에 대해 만족을 못하고 있는 느낌이 들었어요😂

 

제가 원하는대로 만들 수 있는 사이드 프로젝트를 한 번 해보면 팀원과의 협업의 소중함도 느끼고 문제 상황도 혼자 해결해 보면서 성장할 것 같아요.

 

그래서 개인 사이드 프로젝트를 시작하기로 결심했습니다❗❗

🤔 사이드 프로젝트 주제 선정

막상 프로젝트를 시작하려고 하니 주제 선정부터 쉽지 않았어요..😂

일상생활을 하면서 많은 사람들이 느꼈던 불편 또는 이런 것이 있으면 좋을 것 같다고 생각한 필요에 의해 주제를 선정하면 좋다고 하네요. 그런데 다른 사람들 관점에서 주제를 선정하면 프로젝트 중간에 제가 흥미가 사라져 의욕이 떨어질 것 같아요.

 

그래서 저를 포함한 많은 사람들이 같이 겪고 있는 불편 혹은 필요가 무엇인지 생각해보다가 맛집 찾기가 떠올랐습니다💡

 

그런데 네이버, 카카오 지도를 이용해 맛집을 보여주기만 하는건 의미가 없을 것 같습니다.

실제로 저는 네이버 지도를 많이 이용하는데, 가보고 싶은 맛집을 ⭐로 등록해도 다음번에 보면 메뉴가 눈에 잘 안 들어오고 리뷰를 읽기가 귀찮더라고요😅

네이버 지도 맛집 리스트

 

주제도 정했으니 기능은 나중에 추가되거나 삭제될 수 있지만 일단 적어보겠습니다❗

✨ 프로젝트 기능 선정

CRUD, 로그인 기능도 구현하면 좋겠지만, 제가 검증이 안된 다른 사람의 서비스에 계정을 생성한다고 생각해보니 뭔가 찜찜하네요🤨

제 서비스를 누가 볼지는 모르겠지만, 저도 사용자 입장을 고려해 CRUD, 로그인 기능은 빼도록 할게요.

(아쉽지만 CRUD, 간편 로그인, 간편 회원가입 기능은 이번에 진행하는 고급 팀 프로젝트에서 해볼게요🤣🤣)

1️⃣ 맛집 소개 리스트 페이지

저는 맛집을 검색할 때 별점(⭐)도 중요하게 생각하지만, 실제 방문자들이 남긴 가게와 메뉴 사진이 포함된 리뷰를 주로 참고해요. 그런데 매번 리뷰를 읽는 건 귀찮은 일이잖아요🤔

그래서 저는 사람들이 가장 쉽게 접할 수 있고 자주 이용하는 매체를 고민하다가 유튜브를 떠올렸어요.

유튜브에 맛집을 방문해서 소개하는 먹방 컨텐츠(또간집, 먹을텐데, 스트리트 푸드파이터, 줄서는 식당 등)가 많잖아요!

 

영상 썸네일, 가게 이름, 음식 카테고리, 지역 정보가 포함된 카드 형식의 리스트를 보여주겠습니다✨

리스트 페이지 예시 화면

 

디자인 능력이 없어 온라인 툴로 간단하게 예시를 만들었더니 퀄리티가 너무 떨어지네요😅

대충 어떤식으로 구현할 건지 느낌만 봐주세요❗ 

2️⃣ 맛집 소개 상세 페이지

썸네일에 이끌려 맛집을 클릭했다면, 자세한 정보도 보여줘야겠죠❗ 

상세 페이지에는 유튜브 영상을 추가할게요. 추가로 영상을 재생하기 귀찮거나 어려운 사용자도 있을 수 있으니 텍스트로도 잘 요약해야겠죠👀

맛집 상세 페이지 예시 화면

 

이렇게 보니까 화면의 정보가 너무 빈약한 것 같네요.. 추가할 정보들은 고민해 보도록 할게요🤔

3️⃣ 맛집 지도 페이지

서비스의 핵심인 지도 페이지입니다.

위에서 소개한 리스트와 상세 페이지만 있다면, 서비스를 이용하지 않고 유튜브로 직접 검색하겠죠❗

 

2️⃣번 상세 페이지의 "지도로 볼래요" 버튼을 누르면 해당 가게를 지도로 표시해주겠습니다.

 

🔧 기술 스택 선정

Next.js

Next.js는 React 기반의 프레임워크라 React의 장점을 활용하면서, 서버 사이드 렌더링(SSR)을 지원합니다.

서버 사이드 렌더링(SSR)으로 초기 렌더링 속도를 향상시켜 사용자 경험을 개선하고, SEO 최적화를 통해 검색 엔진 친화적인 서비스를 개발할 수 있어 선택했습니다.

Tailwind CSS

Tailwind CSS는 Utility-First 컨셉을 가진 CSS 프레임워크입니다. HTML 코드 안에 스타일 코드가 포함되어 있기 때문에 HTML과 CSS 파일을 별도로 관리할 필요가 없습니다.

Tailwind는 미리 정의된 className을 제공하기 때문에 일관된 스타일을 유지할 수 있고, className을 고민하는 시간을 줄여주기 때문에 선택했습니다.

추가로 Tailwind CSS는 CSS in JS 방식과 다르게 빌드 타임에 처리되기 때문에 성능 최적화와 작은 CSS 번들 크기 유지에 좋다고 하네요👍

TypeScript & Prettier & ESLint

혼자 하는 프로젝트여도 TypeScript, Prettier, ESlint를 사용하면 더 나은 코딩 습관을 익힐 수 있고, 시간이 지나 프로젝트에 새로운 기능을 추가하거나 리팩터링 할 때 완성도 높은 코드가 더 유지보수 하기 쉽다고 생각해 선택했습니다.

Next.js Serverless Function

이번 프로젝트에서는 단순 데이터 제공만 하기 때문에 비용, 관리, 성능 면에서 Next.js Serverless Function이 가장 적합하다고 생각해 선택했습니다.

Firebase를 사용할까도 많이 고민했지만, 실시간 데이터베이스와 인증 기능이 이번 프로젝트에서는 과도한 기능일 것 같습니다.

 

Serverless Function 장점

• 별도의 백엔드 환경을 구축하거나 관리할 필요 없이 데이터 관련 API를 /api 디렉토리에서 바로 작성하고 사용할 수 있어 유지보수가 쉽습니다.
• Serverless Function은 서버 사이드 렌더링(SSR) 및 정적 사이트 생성(SSG)와 자연스럽게 통합되어, 동적 데이터를 렌더링 하면서도 빠른 페이지 로딩 속도를 유지할 수 있습니다.
• Vercel에서 Next.js 프로젝트를 배포하면, 서버리스 함수가 자동으로 설정 및 배포됩니다. 별도의 서버 관리 없이 즉시 사용할 수 있어 배포가 매우 간단합니다.