안녕하세요!
쇼핑몰 웹에 AI 기능을 녹여 만드는 프로젝트, 두 번째 기록입니다 😊
https://nolja98.tistory.com/430
[프리랜서 도전기] AI 기능을 담은 쇼핑몰 웹을 만들기로 했다
안녕하세요! 프리랜서 개발자를 준비 중인 놀자입니다.앞으로 티스토리에 제가 만들어갈 프로젝트 과정을 기록해보려고 해요.그 첫 번째 이야기, 쇼핑몰 웹 + AI 기능 프로젝트입니다.🧐 왜 쇼
nolja98.tistory.com
(지난 글에서는 [프로젝트 기획 배경과 기능 구성]까지 소개했어요)
이번 글에서는 제가 React가 아닌 Next.js를 선택한 이유를 정리해볼게요.
🧩 React와 Next.js의 관계는?
먼저, 이 둘은 경쟁 관계가 아니에요.
Next.js는 React를 기반으로 만든 프레임워크예요.
쉽게 말해,
🔧 React는 UI를 만드는 도구고
🏗️ Next.js는 그 위에 전체 웹 구조를 설계할 수 있게 도와주는 툴이에요.
그래서 "React를 안 쓴다"기보다는,
Next.js 안에 React가 들어 있고, 더 효율적인 방식으로 사용된다고 보면 됩니다.
🎯 그럼 왜 굳이 Next.js를 썼을까?
저는 이번 프로젝트에서
**"실제 서비스처럼 작동하는 쇼핑몰 웹을 만들고 싶다"**는 목표가 있었어요.
그러다 보니, React만 쓸 때보다 Next.js의 장점이 더 강력하게 느껴졌습니다.
✅ 1. 페이지 라우팅이 간단해서!
React를 쓰면 페이지 이동을 위해 react-router 등을 따로 설정해야 하지만,
Next.js에서는 그냥 pages/ 폴더만 잘 만들면 끝이에요.
예를 들어,
이렇게 파일만 만들면, 라우팅도 자동으로 잡혀요.
폴더 구조만 보면 전체 웹의 흐름이 보이니까 기획할 때도 편하고, 유지보수도 쉬워요.
✅ 2. SEO(검색 노출)에 유리해서!
쇼핑몰 웹이라면 당연히 **검색 노출(SEO)**이 중요하겠죠?
React는 처음 로딩 시 HTML이 비어 있다가 자바스크립트로 화면을 채우는 방식이라,
검색엔진 크롤러가 내용을 제대로 못 읽는 경우가 있어요. (이걸 CSR이라고 해요)
하지만 Next.js는 SSR, SSG 기능으로 **"HTML이 완성된 상태로 전달"**되기 때문에,
검색엔진이 페이지 내용을 잘 인식할 수 있어요!
✅ 3. AI 기능 연동에도 유리해서!
이번 프로젝트엔 GPT API로 리뷰를 요약하는 기능이 들어가요.
이런 외부 API 호출은 보통 백엔드에서 처리해야 안전하죠.
Next.js는 pages/api/ 폴더에 API 라우트를 만들 수 있어서,
간단한 서버 역할도 함께 처리 가능해요!
즉, 별도 백엔드 서버 없이도
- 클라이언트는 요청 보내고
- 서버(API Route)는 GPT 호출하고
- 결과를 DB에 저장하는 흐름이 가능해지는 거죠.
✅ 4. 정적 페이지도, 실시간 페이지도 동시에 만들 수 있어서!
쇼핑몰엔 다양한 페이지가 있잖아요?
- 상품 소개 페이지: 자주 안 바뀌니까 *정적(SGG)*으로 미리 만들어두면 빠르고
- 주문 내역 페이지: 로그인 사용자에 따라 다르니까 *실시간(SSR)*으로 처리하면 좋아요.
Next.js는 이걸 getStaticProps, getServerSideProps 같은 함수로 페이지마다 다르게 설정할 수 있어서
정적 + 동적 조합이 아주 유연해요.
💡 결론: “서비스다운 웹”을 만들기 위한 선택
단순히 UI를 보여주는 React만으로도 웹은 만들 수 있지만,
실제 서비스처럼 작동하는 웹앱을 만들고 싶다면
Next.js가 훨씬 좋은 선택이라고 느꼈어요.
- 라우팅이 쉽고
- SEO도 챙기고
- 백엔드 없이 API 호출도 가능하고
- 정적/실시간 페이지 모두 가능하니까요!
🔜 다음 편 예고
다음 글에서는
👉 기능 기획 + DB 설계 + AI API 흐름 구성까지 들어가보려 해요.
정적 파일로 미리 만들어둘 페이지는 어떤 게 좋을지,
GPT API는 어떻게 연결할지 고민 중입니다. :)
🧡 읽어주셔서 감사합니다!
이 글이 Next.js vs React를 고민하는 분들께도 도움이 되길 바라요.
질문이나 피드백은 댓글로 언제든지 남겨주세요 🙌
'프리랜서 도전기' 카테고리의 다른 글
[프리랜서 도전기] AI 기능을 담은 쇼핑몰 웹을 만들기로 했다 (0) | 2025.04.10 |
---|