JAMstack 기반 포트폴리오 사이트 개발을 위한 기술 스택 선택

JAMstack 기반 포트폴리오 사이트 개발을 위한 기술 스택 선택

1. 프로젝트에 적합한 기술 스택 선정 기준

JAMstack 기반 포트폴리오 사이트를 개발할 때 빠른 성능, 유지보수 용이성, 확장성, 보안성 등을 고려해야 한다.
다음과 같은 기준을 바탕으로 프레임워크, 스타일링, API, 서버리스, 데이터 관리, 배포 환경을 선택한다.

✅ 정적 생성(SSG) 지원 → 빠른 로딩 속도 제공
✅ SEO 최적화 가능 → 검색엔진에서 노출 극대화
✅ 서버리스 아키텍처 지원 → API 기능 확장성 확보
✅ CMS 및 데이터 관리 가능 → 콘텐츠 업데이트 용이
✅ Docker 기반 배포 가능 → Mac Mini 홈서버 활용

---

2. 프레임워크 및 정적 사이트 생성기(SSG) 선택

프레임워크 주요 특징 장점 단점

Next.js	React 기반, ISR/SSG 지원	SEO 최적화, 빠른 페이지 로딩	서버리스 배포 시 설정 필요
Gatsby.js	GraphQL 기반 정적 생성	빌드 속도 빠름, CMS와 연동 용이	복잡한 GraphQL 설정
Astro	초경량 정적 사이트 프레임워크	불필요한 JS 제거, 속도 최적화	Next.js보다 생태계 작음

🔹 결론: SEO 및 확장성을 고려할 때 Next.js 또는 Gatsby.js가 가장 적합
🔹 정적 성능을 극대화하고 싶다면 → Astro 활용 가능

---

3. UI 스타일링 선택 (CSS 프레임워크 & 컴포넌트 라이브러리)

반응형

스타일링 주요 특징 장점 단점

Tailwind CSS	Utility-First 스타일링	빠른 개발, 반응형 디자인 최적화	학습 곡선 존재
Styled-Components	CSS-in-JS 방식	컴포넌트 기반 스타일링	런타임 성능 저하 가능
Chakra UI	React UI 라이브러리	손쉬운 UI 구현	커스터마이징 제한

🔹 결론: 빠른 스타일링이 필요하면 Tailwind CSS, 컴포넌트 스타일링을 원하면 Styled-Components
🔹 UI 라이브러리 기반으로 빠르게 개발하려면 → Chakra UI 추천

---

4. API 및 데이터 관리 (서버리스 프레임워크 활용)

API 방식 주요 특징 장점 단점

REST API	전통적인 API 방식	단순한 데이터 호출에 적합	데이터 요청량 많아질 경우 부담
GraphQL API	클라이언트가 원하는 데이터만 요청 가능	효율적 데이터 전달	설정이 복잡
서버리스 API (OpenFaaS, Fission, Knative)	이벤트 기반 서버리스 함수 실행	자동 확장, 유지보수 최소화	트래픽에 따라 비용 증가

🔹 결론: 정적 데이터는 REST API, 복잡한 쿼리는 GraphQL API, 확장성 필요하면 서버리스 API

---

5. CMS (Content Management System) 선택

 

CMS 주요 특징 장점 단점

Strapi	오픈소스 Headless CMS	유연한 API, Self-host 가능	초기 설정 필요
Contentful	클라우드 기반 Headless CMS	빠른 배포, UI 친화적	무료 플랜 제한
Sanity.io	실시간 협업 가능	실시간 미리보기 지원	GraphQL 설정 필요

🔹 결론: Strapi → 자체 서버에 배포 가능, Contentful → 손쉬운 사용, Sanity.io → 협업 필요 시 유용

---

6. Docker 기반 서버리스 프레임워크 선택

서버리스 플랫폼 주요 특징 장점 단점

OpenFaaS	Docker 컨테이너 기반 서버리스 실행	설치 쉬움, 확장 가능	Mac Mini 설치 필요
Fission	Kubernetes 기반 서버리스	고성능 이벤트 처리	Kubernetes 설정 필요
Knative	컨테이너 기반 서버리스 프레임워크	대규모 확장 가능	복잡한 네트워크 설정 필요

🔹 결론:

• 간편한 서버리스 환경 필요 → OpenFaaS
• Kubernetes 활용 가능 → Fission 또는 Knative

---

7. 배포 및 운영 환경 (Mac Mini + Docker)

🔹 배포 방식: 정적 사이트 + 서버리스 API 컨테이너화
🔹 Docker 사용 이유: 홈서버 환경에서도 확장 가능
🔹 배포 프로세스:

1. 정적 사이트 → Nginx 컨테이너 배포
2. API 서버 → OpenFaaS or Fission 실행
3. 데이터베이스 → PostgreSQL 컨테이너 실행
4. 도메인 연결 + SSL 인증서 적용

---

8. 결론

JAMstack 기반 포트폴리오 사이트의 기술 스택 선택 시
✅ Next.js + Tailwind CSS + OpenFaaS 조합이 가장 적합
✅ 데이터 관리는 Strapi CMS or Contentful
✅ 배포 및 운영은 Mac Mini + Docker 기반 서버리스