MagPlus
평범한 일상 공간이나 흔한 놀거리가 아닌 새로운 경험과 즐거움을 찾는 사람들을 위한 웹매거진 플랫폼입니다.
Next.jsTypeScriptTailwind CSSZustandsupabase
웹매거진 MAG+
목적“숨은 공간·이벤트를 한눈에, 취향 맞춤 웹매거진”
MZ 세대(20-35세)에게 카페·레스토랑·전시·팝업 등 신선한 경험을 큐레이션해 주는 온라인 매거진 서비스입니다.
이미지 로딩 중...
1. 구조 & 아키텍처
- 풀스택 Next.js 15 + TypeScript
- App Router: 페이지 & API 라우트 통합
- 서버 컴포넌트 + SSG/ISR로 SEO와 속도 동시 확보
- 데이터 계층
- PostgreSQL(Supabase): 기사·카테고리·구독자 테이블
- Supabase Storage: 이미지·영상 업로드
- 배포: Vercel + CDN (LCP < 1.8 s, 모바일 기준)
- 폴더 구조
2. 핵심 기능
이미지 로딩 중...
그룹 | 기능 | 한줄 설명 |
|---|---|---|
콘텐츠 관리 | 리치 텍스트 에디터 | 이미지·영상 첨부, 초안/발행/비공개 + 예약 발행 |
- | 조회수·좋아요 | 인기 기사 랭킹 자동 집계 |
탐색 | 카테고리·지역 필터 | 카페·전시 등 + 전국 17개 시·도 |
- | 태그 & 키워드 검색 | “데이트 코스”, “팝업스토어” 등 즉시 탐색 |
참여 & 공유 | SNS 공유 | OG 최적화 카드 + 공유 통계 수집 |
- | 이메일 구독 | 관심 카테고리 맞춤 뉴스레터, 원클릭 해지 |
UX 플러스 | 북마크·최근 본 글 | 로컬에 저장되어 로그인 없이도 유지 |
- | 다크/라이트·반응형 | 모바일-first 디자인, 접근성(A11y) 준수 |
3. 개발 하이라이트
- 모듈화 + 타입 안정성
- Zustand 전역 스토어 → UI·비즈니스 로직 분리
- TypeScript strict mode & ESLint CI → 런타임 오류 0건 유지
- CI/CD & 품질
- GitHub → Vercel 자동 배포, Lighthouse 평균 96+
- Vitest + Playwright로 핵심 플로우 E2E 테스트
- 성능 최적화
- 이미지
next/image+ Blur-Up → 초기 뷰포트 200 KB 이하 - Supabase Edge Functions로 뉴스레터 발송 처리 (Cold-start < 90 ms)
4. 디자인 & UX 포인트
- 에디토리얼 그리드: 카드-타일 레이아웃으로 잡지 느낌 구현
- 애니메이티드 히어로: 최신 기사 3D Flip 카드 효과로 주목도 ↑
- 접근성 우선: WCAG 대비색·키보드 네비·
prefers-reduced-motion대응