대한골프협회 햅디캡 규정집을 비롯하여 협회의 모든 책자 및 영상을
온라인 E-book(전자책)의 형태로 만들어 쉽게 확인 가능 하도록 시스템 제공

eBook 플랫폼 시스템 - 기술 소개 자료


1. 시스템 개요

본 eBook 플랫폼은 전자책 관리 및 배포를 위한 풀스택 웹 애플리케이션으로, 관리자용 대시보드, 백엔드 API 서버, 사용자용 웹 인터페이스로 구성된 3-Tier 아키텍처 기반 시스템입니다. 각 레이어는 독립적으로 개발 및 배포가 가능하며, RESTful API를 통해 유기적으로 연결되어 있습니다.

프로젝트 구성은 eBook Front(관리자용 웹 애플리케이션), eBook API(백엔드 REST API 서버), eBook User(일반 사용자용 웹 인터페이스)로 이루어져 있으며, 각각 명확한 역할 분리를 통해 효율적인 개발과 유지보수가 가능합니다.


2. 관리자 대시보드 - eBook Front

관리자를 위한 통합 관리 대시보드로 전자책 콘텐츠 관리, 사용자 관리, 통계 분석 및 리포팅 기능을 제공합니다. React 기반의 SPA(Single Page Application)로 구축되어 있으며, 페이지 새로고침 없이 빠르고 부드러운 사용자 경험을 제공합니다.

주요 기능으로는 전자책 콘텐츠 관리(등록, 수정, 삭제, 조회), 관리자 계정 관리 및 권한 제어, 실시간 통계 대시보드 및 데이터 시각화, 월별 및 시간별 접속 통계 분석, 비디오 콘텐츠 관리, 반응형 레이아웃 지원 등이 있습니다.

프론트엔드 기술 스택으로는 React를 코어 프레임워크로 사용하고 있으며, React Router DOM을 통한 클라이언트 사이드 라우팅을 구현했습니다. 상태 관리는 Redux Toolkit을 활용하여 간소화된 Redux 패턴을 적용했고, React Redux로 컴포넌트와 상태를 연결했습니다. Redux First History를 통해 브라우저 히스토리와 Redux 상태를 동기화하여 시간 여행 디버깅이 가능하며, Redux DevTools Extension으로 개발 중 상태 변화를 실시간으로 추적할 수 있습니다.

UI 프레임워크로는 Material-UI를 채택하여 구글의 Material Design 기반의 일관되고 현대적인 사용자 인터페이스를 구현했습니다. MUI Icons Material로 풍부한 아이콘 세트를 제공하고, Emotion을 통한 CSS-in-JS 스타일링으로 컴포넌트 레벨의 동적 스타일링을 지원합니다.

데이터 시각화 측면에서는 Chart.js와 React ChartJS를 활용하여 다양한 형태의 차트와 그래프를 렌더링하고, Nivo 라이브러리의 Circle Packing을 통해 계층 구조 데이터를 시각적으로 표현합니다. 리치 텍스트 편집을 위해 Jodit Pro React를 도입하여 WYSIWYG HTML 에디터 기능을 제공하며, 워드프로세서와 같은 전문적인 콘텐츠 편집 경험을 사용자에게 제공합니다.

HTTP 통신은 Axios를 사용하여 Promise 기반의 깔끔한 API 통신을 구현했으며, 요청 및 응답 인터셉터, 자동 JSON 변환, 에러 핸들링, 요청 취소 기능 등을 활용합니다. UI/UX 향상을 위해 React Beautiful DnD로 드래그 앤 드롭 기능을 구현했고, React Toastify를 통한 토스트 알림으로 사용자 액션에 대한 즉각적인 피드백을 제공합니다. React JSON View는 JSON 데이터를 트리 구조로 표시하여 디버깅과 데이터 확인을 용이하게 합니다.

빌드 도구로는 Webpack을 모듈 번들러로 사용하며, Webpack Dev Server를 통해 핫 모듈 리플레이스먼트를 지원하는 개발 환경을 제공합니다. Babel은 최신 JavaScript 문법을 구형 브라우저에서도 실행 가능한 코드로 트랜스파일하며, Prettier로 일관된 코드 스타일을 유지합니다.

아키텍처 측면에서는 features 기반 구조를 채택하여 기능별로 디렉토리를 분리하고 관련 컴포넌트, 상태, 로직을 함께 관리합니다. admin(관리자 관리), eBookList(전자책 목록 관리), report(통계 및 리포트), login(인증), layout(공통 레이아웃), main(메인 대시보드), videoList(비디오 관리) 등의 피처로 구성되어 있습니다. Redux Toolkit의 슬라이스 패턴을 활용하여 각 기능 영역별로 독립적인 슬라이스를 생성하고, 상태, 리듀서, 액션을 한 곳에서 관리함으로써 코드 중복을 줄이고 타입 안정성을 향상시켰습니다.

이 시스템의 장점으로는 컴포넌트 재사용을 통한 개발 시간 단축, Redux Toolkit의 타입 추론으로 런타임 에러 감소, 핫 리로딩을 통한 빠른 개발 피드백 루프가 있습니다. SPA 구조로 페이지 새로고침 없이 빠른 화면 전환을 제공하며, Material Design 가이드라인을 따라 직관적인 UI를 제공합니다. 다양한 차트 라이브러리를 통해 복잡한 데이터를 직관적으로 표현하고, 기능별 코드 분리로 유지보수와 확장이 용이합니다.


3. 백엔드 API 서버 - eBook API

eBook API는 전자책 플랫폼의 백엔드 REST API 서버로, Spring Boot 기반의 Java 애플리케이션입니다. 전자책 관리, 사용자 인증, 통계 처리 등의 핵심 비즈니스 로직을 담당하며, 안정적이고 확장 가능한 RESTful API를 제공합니다.

주요 기능으로는 전자책 업로드 및 파일 관리, 사용자 인증 및 세션 관리, 전자책 메타데이터 CRUD 작업, 사용자 로그 및 이용 기록 추적, 통계 데이터 집계 및 분석, PDF 문서 생성 및 처리, 다중 데이터베이스 지원(MySQL, Oracle), CORS 설정을 통한 크로스 도메인 요청 지원 등이 있습니다.

백엔드 프레임워크로 Spring Boot를 사용하여 엔터프라이즈급 Java 애플리케이션을 개발했으며, 자동 설정과 스타터 의존성을 통해 빠른 개발이 가능합니다. 임베디드 Tomcat 서버가 내장되어 있어 별도의 서버 설치 없이 애플리케이션을 실행할 수 있습니다. Spring Boot Web 모듈을 통해 RESTful 웹 서비스를 개발하고, Spring Boot JDBC로 데이터베이스 연결 및 트랜잭션을 관리합니다.

데이터베이스는 MySQL과 Oracle을 모두 지원합니다. MySQL은 관계형 데이터베이스 관리 시스템으로 높은 성능과 확장성, ACID 트랜잭션 지원, 풍부한 인덱싱 옵션을 제공하며, Oracle Database는 엔터프라이즈급 데이터베이스 솔루션으로 대용량 데이터 처리와 고가용성을 제공합니다.

ORM 및 데이터 액세스 계층에서는 MyBatis를 SQL 매핑 프레임워크로 사용하여 SQL을 XML 또는 어노테이션으로 분리 관리합니다. MyBatis의 주요 장점은 SQL의 완전한 제어, 복잡한 쿼리 작성 용이성, 동적 SQL 생성, 결과 매핑 자동화 등이 있으며, MyBatis Spring Boot Starter를 통해 Spring Boot에서 쉽게 설정하고 사용할 수 있습니다.

문서 처리를 위해 iText PDF 라이브러리를 사용하여 PDF 문서를 생성, 편집, 조작할 수 있습니다. 텍스트 및 이미지 추가, 표 생성, 폰트 관리, 암호화 및 보안 기능을 제공하며, 통계 리포트 생성, 전자책 미리보기, 문서 변환 등에 활용됩니다.

파일 처리는 Apache Commons FileUpload를 통해 멀티파트 HTTP 요청을 처리하고, Apache Commons IO로 파일 및 스트림 처리 유틸리티를 제공합니다. 보안 측면에서는 BCrypt 알고리즘을 사용하여 비밀번호를 해싱하며, 단방향 해싱, 솔트 자동 생성, 작업 계수 조정이 가능하여 무차별 대입 공격과 레인보우 테이블 공격을 방지합니다.

유틸리티 라이브러리로는 Lombok을 사용하여 자바 보일러플레이트 코드를 자동으로 생성합니다. Getter/Setter, ToString, EqualsAndHashCode, 생성자 등을 어노테이션으로 간단히 생성할 수 있어 코드 가독성이 향상됩니다. Apache Commons Lang은 문자열 처리, 날짜 포매팅, 숫자 유틸리티, 예외 처리 등의 범용 유틸리티 함수를 제공하고, JSON 라이브러리로 JSON 데이터 파싱 및 생성을 처리합니다.

빌드 도구로는 Maven을 사용하여 프로젝트 의존성 관리 및 빌드 자동화를 수행하며, Maven Wrapper를 통해 프로젝트별로 독립적인 Maven 버전을 사용할 수 있습니다.

아키텍처는 계층형 구조로 설계되어 있습니다. Controller Layer에서는 HTTP 요청을 받아 처리하고 응답을 반환하며, EbookController, UserController, LoginController, StatisticsController, CommonController 등이 있습니다. Service Layer는 비즈니스 로직을 처리하고 트랜잭션을 관리하며, Mapper Layer는 데이터베이스와 상호작용하며 SQL을 실행합니다. VO(Value Object) Layer는 데이터 전송 객체로 계층 간 데이터를 전달합니다.

RESTful API 설계를 따라 HTTP 메서드를 적절히 활용하고(GET: 조회, POST: 생성, PUT: 수정, DELETE: 삭제), 일관된 URL 패턴을 사용합니다. LoginCheckInterceptor를 통해 모든 요청을 가로채어 인증 상태를 확인하고 인증되지 않은 요청을 차단하여 중복 코드를 제거하고 관심사를 분리했습니다.

이 시스템의 장점으로는 Spring Boot를 기반으로 한 검증된 엔터프라이즈 표준 기술, 활발한 커뮤니티 지원, 장기적인 기술 지원이 있습니다. 자동 설정으로 복잡한 설정 없이 빠르게 개발을 시작할 수 있고, Lombok으로 반복적인 코드 작성을 줄여 개발 시간을 단축합니다. MySQL과 Oracle을 모두 지원하여 고객의 요구사항에 유연하게 대응할 수 있으며, MyBatis를 통해 SQL을 직접 작성하여 복잡한 쿼리와 최적화가 가능합니다. 계층형 아키텍처로 각 계층을 독립적으로 개발하고 테스트할 수 있어 향후 마이크로서비스 아키텍처로 전환이 용이합니다.

성능 측면에서는 커넥션 풀을 통해 데이터베이스 커넥션을 재사용하여 응답 시간을 최소화하고, 자주 사용되는 데이터를 메모리에 캐싱하여 데이터베이스 부하를 줄입니다. 보안 측면에서는 세션 기반 인증, BCrypt 비밀번호 암호화, 인터셉터 기반 접근 제어, PreparedStatement를 통한 SQL 인젝션 방지 등 다층 보안 체계를 구축했습니다.


4. 사용자 웹 인터페이스 - eBook User

eBook User는 일반 사용자를 위한 직관적이고 사용하기 쉬운 전자책 열람 플랫폼입니다. React 기반의 웹 애플리케이션으로 구축되어 있으며, 반응형 디자인을 통해 모바일과 데스크톱 환경 모두에서 최적의 사용자 경험을 제공합니다.

주요 기능으로는 전자책 목록 브라우징, 전자책 검색 및 필터링, 반응형 디자인으로 모바일 및 데스크톱 최적화, 사용자 친화적인 카드 기반 UI, 전자책 상세 정보 조회 등이 있습니다.

프론트엔드 기술 스택으로는 React를 코어 프레임워크로 사용하며, React DOM을 통해 효율적인 렌더링을 수행합니다. Create React App 기반의 React Scripts로 복잡한 설정 없이 빠르게 개발 환경을 구축할 수 있습니다.

스타일링은 Emotion을 사용한 CSS-in-JS 방식을 채택했습니다. Styled Components 패턴을 통해 컴포넌트 레벨에서 스타일을 캡슐화하고, 스타일 충돌을 방지하며 동적 스타일링이 용이합니다. 중앙 집중식 미디어 쿼리 관리로 일관된 반응형 동작을 보장합니다.

HTTP 클라이언트로는 Axios를 사용하여 백엔드 API와 통신하며, 테스팅 환경으로는 Jest JavaScript 테스팅 프레임워크, React Testing Library를 통한 React 컴포넌트 테스트, User Event로 사용자 인터랙션 시뮬레이션을 구현했습니다. 성능 모니터링을 위해 Web Vitals를 도입하여 웹 성능 지표를 측정하고 지속적으로 사용자 경험을 개선합니다.

컴포넌트 구조는 Desktop과 Mobile 전용 카드 컴포넌트를 분리하여 각 환경에 최적화된 UI를 제공하면서도 코드 재사용성을 유지합니다. AppLayout 컴포넌트로 전체 레이아웃을 구성하고, Header와 Footer 컴포넌트로 일관된 네비게이션을 제공합니다. EBookTab 컴포넌트는 전자책 목록을 탭 형태로 표시하며, 각 카드 컴포넌트는 반응형으로 동작합니다.

이 시스템의 장점으로는 모바일과 데스크톱 환경을 모두 지원하는 반응형 레이아웃으로 어떤 디바이스에서도 최적의 사용자 경험을 제공합니다. Emotion을 활용한 CSS-in-JS 방식으로 스타일 충돌을 방지하고 동적 스타일링이 용이하며, Create React App 기반으로 복잡한 설정 없이 빠르게 개발을 시작할 수 있습니다. Jest와 Testing Library를 통한 체계적인 테스트 환경으로 코드 품질을 보장하고, Web Vitals를 통한 성능 모니터링으로 사용자 경험을 지속적으로 개선할 수 있습니다.


5. 시스템 전체 통합 및 장점

본 eBook 플랫폼은 프론트엔드, 백엔드, 사용자 인터페이스가 유기적으로 연결된 완전한 풀스택 솔루션입니다. 관리자용 대시보드와 사용자용 인터페이스를 명확히 분리하여 각 사용자 그룹에 최적화된 경험을 제공하며, 마이크로서비스 아키텍처로의 전환이 용이한 구조로 설계되어 향후 시스템 확장이 용이합니다.

React와 Spring Boot 등 산업 표준 기술을 사용하여 개발자 생태계와 커뮤니티 지원을 활용할 수 있으며, 웹 기반 플랫폼으로 별도의 앱 설치 없이 모든 디바이스에서 접근 가능합니다. 통계 및 로깅 기능을 통해 데이터 기반의 서비스 개선이 가능하고, 암호화된 비밀번호 저장, 세션 관리, 인증 인터셉터 등 다층 보안 체계를 구축했습니다.

코드 분리, 모듈화, 설정 외부화를 통해 장기적인 유지보수가 용이한 구조이며, Webpack Dev Server의 핫 리로딩, Maven Wrapper를 통한 프로젝트별 독립적인 빌드 환경, Babel의 최신 JavaScript 문법 지원 등으로 효율적인 개발 환경을 제공합니다.

프로덕션 빌드 시에는 코드 압축 및 최적화, 트리 쉐이킹을 통한 번들 크기 최소화, 프로덕션용 환경 변수 분리 등이 적용됩니다. 모던 브라우저(Chrome, Firefox, Safari 최신 버전)를 지원하며, 개발 환경에서는 Internet Explorer 11 호환성도 고려했습니다.

검증된 오픈소스 라이브러리와 프레임워크를 기반으로 구축되어 지속적인 보안 패치와 기능 업데이트를 받을 수 있으며, 모든 주요 라이브러리는 활발한 커뮤니티 지원을 받고 있어 장기적인 기술 지원이 보장됩니다.