가전제품 이것저것 이야기

안녕하세요!
쇼핑몰 웹에 AI 기능을 녹여 만드는 프로젝트, 두 번째 기록입니다 😊

https://nolja98.tistory.com/430

(지난 글에서는 [프로젝트 기획 배경과 기능 구성]까지 소개했어요)

이번 글에서는 제가 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 기능 프로젝트입니다.

🧐 왜 쇼핑몰 웹을 선택했을까?

요즘 프리랜서로 외주를 알아보다 보니,
쇼핑몰 / 커머스 분야의 웹 개발 수요가 가장 많다는 걸 알게 됐어요.

• 창업자가 많아서 시장이 크고
• 웹과 앱을 모두 원하고
• 디자인, 사용자 경험, 기능적인 완성도를 중요하게 생각하더라고요.

게다가 최근에는 단순한 웹사이트보다 AI 기술로 차별화하려는 니즈도 늘어나고 있었어요!

🤖 AI 기능을 왜 넣을까?

너무 무겁거나 복잡한 AI는 부담스럽고,
그렇다고 단순한 웹만 만들면 포트폴리오로 아쉽잖아요?

그래서 저는 **“실용적인 AI 기능을 한두 가지만 살짝 섞자”**는 방향으로 정했어요.

그중 하나가 바로,

🧠 GPT 기반 리뷰 요약기!

쇼핑몰에서 리뷰가 많으면 사용자들이 내용을 다 읽지 않고 스킵해버리기 쉬워요.
이때 AI가 핵심 내용을 깔끔하게 요약해주면,
사용자는 빠르게 판단할 수 있고, UX도 개선되겠죠?

🧱 프로젝트 구성은 이렇게!

👉 기본 기능

• 메인 페이지 (상품 목록)
• 상품 상세 페이지
• 장바구니
• 관리자 상품 등록/삭제
• 로그인 / 회원가입

👉 추가 AI 기능

• GPT를 활용한 리뷰 자동 요약 기능

리뷰를 불러와서, 특정 기준에 따라 요약 텍스트를 자동 생성하게 만들 계획이에요.

🛠️ 사용할 기술 스택

디자인은 깔끔하고 반응형으로 만들고,
기능 위주로 완성도를 높이는 방향으로 진행할 예정입니다.

🎯 이번 프로젝트의 목표

단순히 코딩 연습이 아니라,
실제 외주에서도 바로 써먹을 수 있는 쇼핑몰 웹을 만드는 것!

그리고 그 안에 AI 기능을 적절히 녹여서 기술적인 강점도 보여주는 것!

앞으로는 GPT 외에도

• 이미지로 유사 상품 찾기 (CLIP 활용)
• AI 상품 설명 자동 생성
• 감정 분석 기반 리뷰 필터링

같은 기능도 확장해볼 수 있을 것 같아요. 🤖

📌 다음 글에서는?

다음 편에서는
👉 기능 기획 + DB 설계 + API 설계 과정을 자세히 기록해볼게요!

✨ 읽어주셔서 감사합니다!

이번 도전기 시리즈는
개발자 프리랜서를 준비하는 분들께 작은 도움이 되면 좋겠어요.
혹시 피드백이나 궁금한 점이 있다면 댓글로 남겨주세요 🙌