고객사 제공용 HR시스템 개발
근태 관리 및 근태 결재, 증명서, 급여 서비스등 제공


1. 프로젝트 개요

HTMS는 기업의 인사 및 급여 관리 업무를 통합적으로 지원하는 모바일 기반 인사관리 시스템이다.
임직원이 급여명세서 조회, 휴가 신청 및 관리, 각종 증명서 발급, 연말정산, 연봉계약서 확인 등
주요 인사 업무를 모바일 환경에서 편리하게 처리할 수 있도록 설계되었다.

본 시스템은 다중 기업(멀티테넌시) 환경을 지원하며, 기업별 독립적인 데이터 관리와
커스터마이징이 가능한 구조를 갖추고 있다. RESTful API 기반의 백엔드와 SPA 방식의
모바일 프론트엔드로 구성되어, 높은 응답성과 사용자 경험을 제공한다.


2. 시스템 구성

2.1 프론트엔드 (Mobile Web Application)
모바일 환경에 최적화된 단일 페이지 애플리케이션(SPA)으로, 사용자 인터페이스와
클라이언트 측 상태 관리를 담당한다. React 기반으로 구축되었으며,
Material-UI 디자인 시스템을 활용하여 일관된 UI를 제공한다.

2.2 백엔드 (REST API Server)
Spring Boot 기반의 RESTful API 서버로, 비즈니스 로직 처리, 데이터 영속성 관리,
인증 및 인가 처리를 담당한다. JWT 토큰 기반 인증 체계를 적용하여
무상태(Stateless) 방식의 API 통신을 구현하였다.

2.3 데이터베이스 (Oracle Database)
Oracle RDBMS를 사용하여 인사, 급여, 휴가, 증명서 등 핵심 업무 데이터를
안정적으로 관리한다. 트랜잭션 무결성과 대용량 데이터 처리에 적합한 구조를 갖추고 있다.


3. 핵심 기술 스택

3.1 백엔드
Spring Boot - 애플리케이션 프레임워크 및 내장 서버
Spring Security - 인증 및 인가 프레임워크
Spring Data JPA - 객체-관계 매핑(ORM) 및 데이터 접근 계층
MyBatis - SQL 매퍼 프레임워크 (복잡 쿼리 처리)
JWT (JSON Web Token) - 무상태 토큰 기반 인증
Oracle Database - 관계형 데이터베이스
Gradle - 빌드 및 의존성 관리 도구
Lombok - 반복 코드 자동 생성

3.2 프론트엔드
React - 사용자 인터페이스 라이브러리
Redux Toolkit - 전역 상태 관리
React Router - 클라이언트 사이드 라우팅
Material-UI (MUI) - UI 컴포넌트 라이브러리
Emotion - CSS-in-JS 스타일링 엔진
Axios - HTTP 클라이언트
Webpack - 모듈 번들러
Babel - JavaScript 트랜스파일러

3.3 인프라 및 도구
Nginx - 웹 서버 및 리버스 프록시
Docker - 컨테이너 기반 배포
Git - 소스 코드 버전 관리
Prettier - 코드 포맷팅 도구


4. 핵심 기능

4.1 비즈니스 기능

4.1.1 급여 관리
월별 급여명세서 조회 및 상세 내역 확인
연도별 급여 요약 및 비교 분석
수당 항목별 분류 및 상세 내역 제공
급여 지급일 추적 및 알림

4.1.2 휴가 관리
연차, 월차, 리프레시 휴가, 장기근속 휴가 등 다양한 휴가 유형 지원
휴가 잔여일수 실시간 조회
반차(오전/오후) 단위 휴가 신청
부서장 승인 프로세스 연동
휴가 신청 이력 및 취소 처리
연차촉진 관리 기능
팀 단위 휴가 현황 조회 (관리자)

4.1.3 증명서 발급
재직증명서, 경력증명서 등 각종 증명서 신청
용도별 증명서 유형 관리 (금융기관, 공공기관, 타회사, 대사관, 학교)
증명서 신청 이력 및 상태 추적
추가 서류 첨부 기능

4.1.4 연말정산
연말정산 관련 서류 조회 및 제출
추가 서류 제출 기능
서류 비교 및 검증 도구

4.1.5 연봉계약
연봉계약서 조회 및 다운로드
계약 이력 관리

4.1.6 공지사항
회사 공지사항 조회
홈 화면 주요 공지 노출
공지 이력 관리

4.1.7 개인정보 관리
임직원 개인정보 조회
계정 및 비밀번호 관리

4.2 기술 기능

4.2.1 멀티테넌시
기업별 독립적인 API 라우팅
기업 코드 기반 데이터 격리
기업별 설정 및 커스터마이징 지원

4.2.2 인증 체계
아이디/비밀번호 인증
생년월일 기반 본인 확인
카카오 OAuth 소셜 로그인 연동
HTM 전자인증서 2차 인증 (NOPAPER, KUPYO)

4.2.3 전역 상태 관리
Redux 기반 중앙 집중식 상태 관리
비동기 API 호출 상태 자동 추적
전역 로딩 인디케이터
중앙화된 에러 처리

4.2.4 사용자 경험
페이지 전환 애니메이션
토스트 알림 시스템
모바일 반응형 디자인
직관적인 네비게이션 구조


5. 아키텍처 설계

5.1 백엔드 아키텍처

계층형 아키텍처(Layered Architecture)를 적용하여 관심사를 명확히 분리하였다.

5.1.1 프레젠테이션 계층 (Controller)
RESTful API 엔드포인트 정의
요청 유효성 검증 및 응답 포맷 통일
JWT 기반 인증 필터 적용

5.1.2 비즈니스 계층 (Service)
핵심 비즈니스 로직 처리
트랜잭션 관리
서비스 간 의존성 관리

5.1.3 데이터 접근 계층 (Repository)
JPA Repository를 통한 기본 CRUD 처리
MyBatis를 활용한 복잡 쿼리 및 동적 SQL 처리
엔티티-DTO 변환 처리

5.1.4 보안 계층 (Security)
Spring Security 필터 체인 기반 인증/인가
JWT 토큰 발급, 검증, 갱신 처리
역할 기반 접근 제어 (RBAC)

5.2 프론트엔드 아키텍처

기능 기반 수직 분할(Feature-Based Vertical Slicing) 구조를 채택하였다.

5.2.1 애플리케이션 코어 (app)
라우트 정의 및 관리
Redux 스토어 구성
인증 라우트 보호 (AuthRoute)
관리자 라우트 보호 (AdminRoute)
전역 컨텍스트 제공

5.2.2 기능 모듈 (features)
각 비즈니스 기능별 독립적인 모듈 구성
모듈별 Redux Slice, 컴포넌트, 비동기 Thunk 포함
15개 기능 모듈: 로그인, 메인, 급여, 휴가, 증명서, 연말정산,
공지사항, 계약, 내정보, 계정찾기, 휴가등록, 휴가신청,
팀휴가승인, 휴가상세, 공통

5.2.3 공유 컴포넌트 (components)
38개 이상의 재사용 가능한 UI 컴포넌트
레이아웃 컴포넌트: Layout, HomeHeader, DetailHeader, PopupHeader
입력 컴포넌트: CommonInput, StatusInput, SelectBox, SelectDateAll
버튼 컴포넌트: PrimaryButton, SecondaryButton, BgColorButton, BorderButton
다이얼로그 컴포넌트: AlertDialog, SlideDialog, SlideDialogV
데이터 표시 컴포넌트: BarInfo, BoxInfo, EmptyCard, StatusBox

5.2.4 공통 유틸리티 (common)
API 요청 중앙 처리 함수
날짜 변환, 통화 포맷팅, 문자열 처리 유틸리티
정적 데이터 및 열거형 정의
색상 상수 관리

5.3 상태 관리 설계

Redux Toolkit 기반의 중앙 집중식 상태 관리 체계를 구축하였다.

5.3.1 Redux Slice 구성
15개의 독립적인 Slice로 상태를 분할 관리
createSlice를 활용한 리듀서 및 액션 자동 생성
createAsyncThunk를 활용한 비동기 작업 처리 (40개 이상의 비동기 액션)

5.3.2 미들웨어 파이프라인
라우터 미들웨어 - Redux와 브라우저 히스토리 동기화
로딩 미들웨어 - 비동기 작업 상태에 따른 전역 로딩 자동 관리
에러 처리 미들웨어 - API 응답 오류 중앙 처리 및 사용자 알림

5.4 데이터 접근 전략

5.4.1 백엔드 데이터 접근
JPA를 기본 ORM으로 사용하여 엔티티 매핑 및 기본 CRUD 처리
복잡한 조회 쿼리 및 통계 데이터는 MyBatis로 처리
DTO 패턴을 적용하여 계층 간 데이터 전달 객체 분리

5.4.2 프론트엔드 데이터 접근
Axios 기반 HTTP 클라이언트를 통한 RESTful API 호출
중앙화된 API 요청 함수로 요청 헤더 및 인증 토큰 자동 관리
기업별 동적 API 라우팅 처리


6. 인증 및 보안 아키텍처

6.1 인증 흐름

6.1.1 기본 인증 (아이디/비밀번호)
사용자가 기업코드, 아이디, 비밀번호를 입력하여 로그인
서버에서 자격 증명 검증 후 JWT 토큰 발급
발급된 토큰을 클라이언트 세션에 저장
이후 모든 API 요청 시 Authorization 헤더에 토큰 포함

6.1.2 소셜 로그인 (카카오 OAuth)
카카오 OAuth 인증 흐름을 통한 사용자 인증
카카오 액세스 토큰을 서버로 전달하여 사용자 매핑
서버에서 자체 JWT 토큰 발급

6.1.3 2차 인증 (전자인증서)
NOPAPER, KUPYO 등 전자인증서 기반 추가 인증
민감 업무(증명서 발급, 연봉계약 등) 접근 시 2차 인증 요구

6.2 토큰 관리

JWT 기반 무상태(Stateless) 인증 체계 적용
서버 측 토큰 검증을 통한 요청 인가
토큰 만료 시 자동 로그아웃 및 로그인 페이지 리다이렉트
세션 스토리지 기반 토큰 영속성 관리

6.3 권한 관리

역할 기반 접근 제어(RBAC) 구현
일반 사용자 및 관리자 권한 분리
라우트 수준 접근 제어 (AuthRoute, AdminRoute)
API 엔드포인트별 권한 검증

6.4 보안 대책

Spring Security 필터 체인을 통한 다층 보안
CORS 정책 적용
XSS 방지 처리
SQL 인젝션 방지 (파라미터 바인딩)
비밀번호 암호화 저장
인증 실패 시 적절한 오류 응답 처리 (401, 403)


7. 데이터 관리

7.1 데이터베이스 관리

Oracle RDBMS를 활용한 관계형 데이터 모델 설계
트랜잭션 무결성 보장을 위한 Spring 트랜잭션 관리
인덱스 최적화를 통한 조회 성능 향상
기업별 데이터 격리를 위한 멀티테넌시 데이터 구조

7.2 감사 추적

주요 업무 처리 이력 기록
휴가 신청, 증명서 발급 등 핵심 트랜잭션 로깅
사용자 접근 이력 관리

7.3 캐싱 전략

서버 측 캐시를 활용한 반복 조회 성능 최적화
클라이언트 측 Redux 상태를 통한 데이터 재사용
정적 리소스 캐싱 (웹팩 해시 기반 캐시 버스팅)

7.4 파일 관리

증명서, 계약서 등 문서 파일 관리
추가 서류 업로드 및 저장
PDF 형식 문서 생성 및 다운로드 지원


8. 테스트 전략

8.1 백엔드 테스트

8.1.1 단위 테스트
JUnit 기반 서비스 계층 단위 테스트
Mockito를 활용한 의존성 모킹
비즈니스 로직 검증 중심의 테스트 작성

8.1.2 통합 테스트
Spring Boot Test를 활용한 API 통합 테스트
내장 데이터베이스를 활용한 데이터 계층 테스트
MockMvc를 활용한 컨트롤러 테스트

8.2 프론트엔드 테스트

8.2.1 컴포넌트 테스트
Jest 기반 단위 테스트
React Testing Library를 활용한 컴포넌트 렌더링 테스트
사용자 인터랙션 시뮬레이션 테스트

8.2.2 상태 관리 테스트
Redux Slice 리듀서 단위 테스트
비동기 Thunk 액션 테스트
미들웨어 동작 검증

8.3 API 테스트

Postman 또는 Swagger를 활용한 API 명세 검증
요청/응답 스키마 검증
인증 흐름 통합 테스트


9. 배포 환경

9.1 컨테이너 기반 배포

Docker를 활용한 애플리케이션 컨테이너화
프론트엔드와 백엔드 독립적인 컨테이너 구성
Nginx 리버스 프록시를 통한 요청 라우팅

9.2 환경 분리

개발(Development), 스테이징(Staging), 운영(Production) 환경 분리
환경별 설정 파일 관리
환경 변수를 통한 설정 주입

9.3 빌드 체계

9.3.1 프론트엔드 빌드
Webpack 기반 모듈 번들링
코드 스플리팅을 통한 초기 로딩 최적화
해시 기반 파일명으로 캐시 관리
운영 모드 빌드 시 최적화 적용 (압축, 트리쉐이킹)

9.3.2 백엔드 빌드
Gradle 기반 빌드 자동화
실행 가능한 JAR 패키징
프로파일 기반 환경 설정 관리


10. 기술적 우수성

10.1 아키텍처 강점

프론트엔드와 백엔드의 완전한 분리를 통한 독립적 개발 및 배포 가능
기능 기반 수직 분할 구조로 모듈 간 결합도 최소화
미들웨어 패턴을 활용한 횡단 관심사의 효과적 처리
멀티테넌시 지원으로 단일 시스템에서 다수 기업 서비스 제공

10.2 개발 생산성

Redux Toolkit 도입으로 상태 관리 코드 간소화
38개 이상의 재사용 가능한 UI 컴포넌트로 개발 효율성 향상
중앙화된 API 호출 및 에러 처리로 반복 코드 제거
Material-UI 디자인 시스템 활용으로 일관된 UI 개발

10.3 확장성

모듈화된 기능 구조로 신규 기능 추가 용이
독립적인 Redux Slice 구조로 상태 관리 확장 용이
RESTful API 설계로 클라이언트 다양화 대응 가능
멀티테넌시 구조로 신규 기업 추가 용이

10.4 사용자 경험

모바일 최적화 인터페이스로 언제 어디서나 업무 처리 가능
페이지 전환 애니메이션 및 로딩 인디케이터로 시각적 피드백 제공
토스트 알림을 통한 실시간 처리 결과 안내
카카오 소셜 로그인 등 간편한 인증 방식 제공
직관적인 네비게이션 구조와 일관된 디자인 언어 적용

10.5 안정성

JWT 기반 무상태 인증으로 서버 부하 분산 용이
중앙화된 에러 처리로 예외 상황에 대한 일관된 대응
트랜잭션 관리를 통한 데이터 무결성 보장
다층 보안 체계를 통한 시스템 보호