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 Loading

3. 보안 (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.txt

8. 모니터링 및 로깅
애플리케이션 헬스 체크
사용자 활동 추적
에러 로깅 및 알림
성능 메트릭 수집

[기술적 하이라이트]
*클라우드 네이티브 아키텍처
AWS 인프라 활용 (S3, SES, Parameter Store)
컨테이너 기반 배포 (Docker)
마이크로서비스 패턴

*현대적인 프론트엔드 기술
React 18 최신 기능 활용
Next.js App Router
CSS-in-JS (Styled Components, Emotion)
상태 관리 라이브러리 (Recoil, Redux Toolkit)

*엔터프라이즈급 백엔드
Spring Boot 생태계
JPA/Hibernate ORM
QueryDSL 타입 세이프 쿼리
Spring Security 보안 프레임워크

*통합 및 확장성
RESTful API 설계
OpenAPI/Swagger 문서화
OpenFeign으로 마이크로서비스 통신
외부 API 통합 (티켓팅, 결제, 소셜 로그인)

*개발 워크플로우
Git 버전 관리
자동화된 빌드 프로세스
환경별 설정 관리 (dev, prod)

GS문화재단 플랫폼은 최신 기술 스택과 모범 사례를 적용하여 구축된 현대적인 웹 애플리케이션입니다. 사용자 친화적인 프론트엔드, 안정적이고 확장 가능한 백엔드, 그리고 효율적인 관리자 도구를 통해 문화예술 프로그램의 디지털 경험을 제공합니다.

주요 성과: - 고성능 웹 애플리케이션 - 안전하고 확장 가능한 아키텍처 - 뛰어난 사용자 경험 - 효율적인 콘텐츠 관리 - 다국어 지원 - 외부 시스템 통합
이 플랫폼은 지속적인 성장과 확장을 고려한 설계로, 향후 새로운 기능 추가 및 트래픽 증가에도 안정적으로 대응할 수 있습니다.