GS아트센터 홈페이지, CMS 개발
- 프로젝트 유형
- 웹솔루션
- 날짜
- 2025년 1Q
- 역할
- 사이트 신규 구축
- 기술스택
- NextJS, TypeScript, MUI, Redux toolkit, Spring Boot, Spring security, DataJPA, PostgreSQL, AWS
GS아트센터 홈페이지 및 관리 시스템 개발인터파크 연동 예매 기능 및 자체 개발 CMS(Contents manage system) 적용회원관리, 대관신청 시스템, 각종 보안 및 관리 기능 제공GS문화재단 플랫폼은 문화예술 프로그램, 공간 대관, 티켓팅 등의 서비스를 제공하는 종합 문화재단 웹 플랫폼입니다. 본 시스템은 마이크로서비스 아키텍처를 기반으로 3개의 독립적인 애플리케이션으로 구성되어 있습니다.[시스템 구성]backend - RESTful API 서버frontend - 사용자 웹사이트frontend - 관리자 대시보드1. 백엔드 API 서버[기술 스택]핵심 프레임워크 - Spring Boot - 엔터프라이즈급 Java 애플리케이션 프레임워크 - Spring Security - 인증 및 권한 관리 - Spring Data JPA - ORM 기반 데이터 액세스 - QueryDSL - 타입 세이프 동적 쿼리 생성데이터베이스 - PostgreSQL - 프로덕션 데이터베이스 - H2 Database - 개발/테스트용 인메모리 데이터베이스보안 및 인증 - JWT (JSON Web Token) - Stateless 인증 토큰 - OAuth 2.0 - 소셜 로그인 (네이버, 카카오) - Spring Security - 엔드포인트 보안클라우드 통합 - AWS S3 - 파일 스토리지 및 관리 - AWS SES - 이메일 발송 서비스 - AWS Systems Manager Parameter Store - 안전한 설정값 관리API 문서화 - SpringDoc OpenAPI (Swagger) - 자동 API 문서 생성기타 라이브러리 - OpenFeign - 선언적 REST 클라이언트 - Thymeleaf - 이메일 템플릿 엔진 - Apache POI - Excel 파일 처리 - Jsoup - HTML 파싱 및 세정[주요 기능]사용자 관리 - 회원 가입/로그인 (이메일/비밀번호) - 소셜 로그인 (네이버, 카카오 OAuth) - JWT 기반 인증 시스템 - 본인인증 연동 (NICE 평가정보)콘텐츠 관리 - 프로그램 정보 관리 (공연, 전시, 교육 등) - 공지사항 및 FAQ 관리 - 아카이브 콘텐츠 관리 - 배너 및 스폰서 관리예약 및 티켓팅 - 공간 대관 예약 시스템 - 프로그램 일정 관리 - 외부 티켓팅 시스템 연동 (인터파크) - 예약 상태 관리파일 관리 - S3 기반 파일 업로드/다운로드 - Presigned URL 생성 - 이미지 최적화 및 리사이징검색 기능 - 통합 검색 (프로그램, 공지사항, 아카이브) - 다중 필터 및 정렬 옵션 - 페이지네이션이메일 서비스 - 트랜잭션 이메일 발송 (가입, 예약 확인 등) - 템플릿 기반 이메일 생성 - AWS SES 연동로깅 및 모니터링 - 사용자 활동 로그 기록 - API 호출 추적 - 에러 로깅 및 알림[기술적 장점]확장성 - 클라우드 네이티브 아키텍처로 수평 확장 용이 - 컨테이너화 (Docker) 지원으로 배포 간소화 - AWS 인프라를 통한 고가용성 보장보안 - JWT 토큰 기반 Stateless 인증으로 확장성 향상 - OAuth 2.0으로 안전한 소셜 로그인 구현 - Parameter Store를 통한 민감 정보 안전 관리 - SQL Injection 방지 (PreparedStatement, QueryDSL)성능 - JPA 쿼리 최적화 및 캐싱 - Connection Pool 관리 - 비동기 처리 (Spring AOP) - 데이터베이스 인덱싱 전략유지보수성 - 계층형 아키텍처 (Controller-Service-Repository) - 도메인 주도 설계 (DDD) 패턴 적용 - Swagger를 통한 API 자동 문서화 - 타입 세이프 쿼리 (QueryDSL)모니터링 - Spring Actuator를 통한 헬스 체크 - SQL 쿼리 성능 모니터링 (P6Spy) - 데이터소스 메트릭 수집2. 사용자 웹사이트[기술 스택]프론트엔드 프레임워크 - Next.js - React 기반 풀스택 프레임워크 - React - 컴포넌트 기반 UI 라이브러리 - TypeScript - 타입 안전성을 위한 정적 타입 언어스타일링 - Styled Components - CSS-in-JS 스타일링 - 컴포넌트 기반 스타일 관리 - 테마 시스템 지원상태 관리 - Recoil - 경량 상태 관리 라이브러리 - recoil-persist - 상태 영속성 관리폼 관리 - React Hook Form - 고성능 폼 검증 - 선언적 폼 핸들링국제화 - i18next - 다국어 지원 - next-i18next - Next.js와 통합된 국제화 - react-i18next - React 컴포넌트 번역UI/UX 라이브러리 - Lucide React - 아이콘 라이브러리 - Swiper - 터치 기반 슬라이더 - React Datepicker - 날짜 선택 컴포넌트 - React Dropzone - 드래그 앤 드롭 파일 업로드 - React Masonry Component - 그리드 레이아웃보안 및 인증 - JWT (jsonwebtoken) - 토큰 기반 인증 - reCAPTCHA v3 - 봇 방지 시스템 - DOMPurify - XSS 공격 방지HTTP 통신 - Axios - Promise 기반 HTTP 클라이언트외부 서비스 연동 - Channel.io - 고객 지원 채팅 - Google Analytics - 웹 분석[주요 기능]홈페이지 - 메인 페이지 with 프로그램 하이라이트 - 반응형 디자인 (모바일, 태블릿, 데스크톱) - 이미지 슬라이더 및 배너프로그램 소개 - 프로그램 목록 및 상세 정보 - 카테고리별 필터링 - 일정 캘린더 뷰 - 공연/전시/교육 프로그램 정보공간 대관 - 대관 가능 공간 소개 - 온라인 대관 신청 - 예약 현황 확인 - 파일 업로드 (제안서, 첨부 자료)티켓 예매 - 외부 티켓팅 시스템 연동 - 프로그램 예약 및 결제콘텐츠 아카이브 - 과거 프로그램 아카이브 - 갤러리 뷰 (Masonry 레이아웃) - 검색 및 필터링회원 서비스 - 회원 가입/로그인 - 소셜 로그인 (네이버, 카카오) - 마이페이지 (예약 내역, 프로필 관리) - 비밀번호 재설정정보 제공 - 공지사항 - FAQ - 오시는 길 (지도 통합) - 이용 정책 및 개인정보처리방침검색 기능 - 통합 검색 - 검색어 디바운싱 - 검색 결과 하이라이트다국어 지원 - 한국어/영어 전환 - URL 기반 언어 라우팅[기술적 장점]성능 - Next.js SSR/SSG로 초기 로딩 속도 최적화 - 이미지 최적화 (Next.js Image Optimization) - 코드 스플리팅으로 번들 크기 최소화 - 정적 페이지 생성 (Static Generation)SEO 최적화 - 서버 사이드 렌더링 (SSR) - 메타 태그 동적 생성 - Sitemap 및 robots.txt 제공 - 구조화된 데이터 (Structured Data)사용자 경험 - 반응형 웹 디자인 - 빠른 페이지 전환 (Client-side Navigation) - 부드러운 애니메이션 및 트랜지션 - 접근성 (Accessibility) 고려보안 - XSS 공격 방지 (DOMPurify) - CSRF 방지 - reCAPTCHA로 봇 차단 - Secure HTTP 통신개발 생산성 - TypeScript로 타입 안전성 확보 - 재사용 가능한 컴포넌트 아키텍처 - Styled Components로 스타일 격리 - React Hook Form으로 폼 검증 간소화유지보수성 - 컴포넌트 기반 아키텍처 - 명확한 폴더 구조 (pages, components, hooks, libs) - TypeScript 타입 정의로 코드 안정성 - Recoil을 통한 예측 가능한 상태 관리3. 관리자 대시보드[기술 스택]프론트엔드 프레임워크 - Next.js - React 기반 풀스택 프레임워크 - React - 컴포넌트 기반 UI 라이브러리 - TypeScript - 타입 안전성UI 프레임워크 - Material-UI (MUI) - 엔터프라이즈급 React 컴포넌트 라이브러리 - MUI Icons - 아이콘 세트 - MUI Data Grid - 고성능 데이터 그리드 - MUI Date Pickers - 날짜/시간 선택기스타일링 - Emotion - CSS-in-JS 라이브러리 - MUI와 완벽한 통합상태 관리 - Redux Toolkit - 표준화된 Redux 개발 - React Redux - React 바인딩폼 관리 - Formik - 폼 상태 관리 - Yup - 스키마 기반 폼 검증 - React Hook Form - 고성능 폼 처리에디터 - Jodit Pro React - 프리미엄 WYSIWYG 에디터 - React Quill - 리치 텍스트 에디터 - HTML 편집 및 미디어 삽입차트 및 시각화 - ApexCharts - 인터랙티브 차트 라이브러리 - React ApexCharts - React 통합데이터 관리 - PapaParse - CSV 파싱 및 생성 - file-saver - 파일 다운로드 - React Beautiful DnD - 드래그 앤 드롭기타 라이브러리 - Axios - HTTP 클라이언트 - date-fns - 날짜 처리 유틸리티 - UUID - 고유 ID 생성 - DOMPurify - HTML 세정[주요 기능]대시보드 - 실시간 통계 및 메트릭 - 차트 및 그래프 시각화 - 주요 지표 요약 (방문자, 예약, 회원 수)콘텐츠 관리 시스템 (CMS) - 프로그램 등록/수정/삭제 - 아카이브 관리 - 공지사항 및 FAQ 작성 - 리치 텍스트 에디터 (이미지, 비디오 삽입) - 드래그 앤 드롭 정렬회원 관리 - 회원 목록 조회 (페이지네이션, 정렬, 필터링) - 회원 상세 정보 - 회원 통계 - 권한 관리예약 관리 - 대관 예약 현황 - 예약 승인/거부 - 예약 상세 정보 조회 - 예약 통계설정 관리 - 사이트 설정 (배너, 메타 정보) - 스폰서 관리 - 이메일 템플릿 관리로그 및 모니터링 - 사용자 활동 로그 - API 호출 이력 - 에러 로그 추적데이터 내보내기 - CSV 파일 다운로드 - Excel 파일 생성 - 데이터 필터링 및 정렬파일 관리 - 이미지 업로드 (드래그 앤 드롭) - 파일 미리보기 - 미디어 라이브러리[기술적 장점]관리 효율성 - MUI Data Grid로 대용량 데이터 효율적 처리 - 실시간 검색 및 필터링 - 정렬, 페이지네이션 기능 - CSV/Excel 내보내기로 데이터 분석 용이사용자 경험 - Material Design 기반의 직관적 UI - 드래그 앤 드롭으로 손쉬운 정렬 - 반응형 디자인 (다양한 화면 크기 지원) - 빠른 페이지 로딩콘텐츠 편집 - Jodit Pro의 강력한 WYSIWYG 편집 기능 - 이미지 업로드 및 리사이징 - HTML 직접 편집 가능 - 미디어 임베딩 (YouTube, Vimeo)데이터 시각화 - ApexCharts로 인터랙티브 차트 생성 - 실시간 데이터 업데이트 - 다양한 차트 타입 (라인, 바, 도넛 등)보안 - JWT 기반 인증 - 역할 기반 접근 제어 (RBAC) - XSS 방지 (DOMPurify) - 안전한 세션 관리개발 생산성 - Redux Toolkit으로 보일러플레이트 최소화 - TypeScript로 타입 안전성 - MUI 컴포넌트로 빠른 UI 개발 - Formik + Yup으로 폼 검증 간소화확장성 - 모듈화된 아키텍처 - 재사용 가능한 컴포넌트 - 플러그인 가능한 에디터 - 커스텀 훅을 통한 로직 재사용[시스템 통합]API 통신RESTful API 기반 통신JWT 토큰 인증Axios 인터셉터로 자동 토큰 갱신에러 핸들링 및 재시도 로직[파일 관리]S3 기반 중앙 집중식 파일 스토리지Presigned URL로 안전한 파일 업로드/다운로드이미지 CDN 통합[핵심 장점]1. 확장성 (Scalability)마이크로서비스 아키텍처로 독립적 확장 가능클라우드 네이티브 설계 (AWS)컨테이너화로 수평 확장 용이2. 성능 (Performance)Next.js SSR/SSG로 빠른 초기 로딩데이터베이스 쿼리 최적화캐싱 전략 (브라우저, CDN, 서버)이미지 최적화 및 Lazy Loading3. 보안 (Security)JWT 토큰 기반 인증OAuth 2.0 소셜 로그인XSS, CSRF 공격 방지민감 정보 암호화 및 안전 저장HTTPS 통신4. 사용자 경험 (UX)반응형 웹 디자인빠른 페이지 전환직관적인 UI/UX다국어 지원접근성 (Accessibility) 준수5. 개발 효율성 (Developer Experience)TypeScript로 타입 안전성모듈화된 컴포넌트 아키텍처자동 API 문서화 (Swagger)Hot Module Replacement (HMR)명확한 폴더 구조6. 유지보수성 (Maintainability)계층형 아키텍처 (MVC, Clean Architecture)코드 재사용성단위 테스트 및 통합 테스트버전 관리 및 CI/CD 파이프라인7. SEO 최적화서버 사이드 렌더링 (SSR)정적 페이지 생성 (SSG)구조화된 데이터Sitemap 및 robots.txt8. 모니터링 및 로깅애플리케이션 헬스 체크사용자 활동 추적에러 로깅 및 알림성능 메트릭 수집[기술적 하이라이트]클라우드 네이티브 아키텍처AWS 인프라 활용 (S3, SES, Parameter Store)컨테이너 기반 배포 (Docker)마이크로서비스 패턴현대적인 프론트엔드 기술React 18 최신 기능 활용Next.js App RouterCSS-in-JS (Styled Components, Emotion)상태 관리 라이브러리 (Recoil, Redux Toolkit)엔터프라이즈급 백엔드Spring Boot 생태계JPA/Hibernate ORMQueryDSL 타입 세이프 쿼리Spring Security 보안 프레임워크통합 및 확장성RESTful API 설계OpenAPI/Swagger 문서화OpenFeign으로 마이크로서비스 통신외부 API 통합 (티켓팅, 결제, 소셜 로그인)개발 워크플로우Git 버전 관리자동화된 빌드 프로세스환경별 설정 관리 (dev, prod)GS문화재단 플랫폼은 최신 기술 스택과 모범 사례를 적용하여 구축된 현대적인 웹 애플리케이션입니다. 사용자 친화적인 프론트엔드, 안정적이고 확장 가능한 백엔드, 그리고 효율적인 관리자 도구를 통해 문화예술 프로그램의 디지털 경험을 제공합니다.주요 성과: - 고성능 웹 애플리케이션 - 안전하고 확장 가능한 아키텍처 - 뛰어난 사용자 경험 - 효율적인 콘텐츠 관리 - 다국어 지원 - 외부 시스템 통합이 플랫폼은 지속적인 성장과 확장을 고려한 설계로, 향후 새로운 기능 추가 및 트래픽 증가에도 안정적으로 대응할 수 있습니다.
