CASE STUDY / 은행 웹 서비스
IBK기업은행 Paygos
IBK기업은행 Paygos에서 Spring Boot REST API와 연동하는 React 프론트엔드를 개발했습니다. 금융 웹 서비스의 사용자·관리자 화면, 인증 이후 흐름과 외부 OAuth 연결 UI를 담당했습니다.
금융 웹 서비스의 프론트엔드 개발
한국디지털수출나라 소속으로 IBK기업은행 Paygos 웹 서비스의 React 프론트엔드 개발을 담당했습니다. 사용자 서비스와 관리자 화면을 구현했습니다.
담당 범위는 Frontend Development
React·JavaScript 기반 UI, 라우팅, 공통 컴포넌트와 REST API 연동을 담당했습니다. 인증 상태와 온보딩을 고려한 화면 흐름, 외부 서비스 연결 UI도 구현했습니다.
백엔드는 Java·Spring Boot REST API와 연동하는 환경입니다. 서버나 데이터베이스를 직접 개발한 경험으로 표현하지 않습니다.
USER WEB
사용자가 이용하는 서비스 화면
Dashboard / My Service
대시보드와 My Service의 프론트엔드를 구현했습니다.
회원가입·약관
회원가입과 약관 화면을 구축하고 서비스 이용까지 이어지는 화면 흐름을 다뤘습니다.
정보 안내·서비스 연결
게시판, FAQ, 이용안내, 배너와 외부 서비스 연결 UI를 구현했습니다.
ADMIN WEB
운영자를 위한 관리 UI
회원 관련 UI
관리자용 회원 관련 화면을 구현했습니다.
게시판·FAQ·이용안내
정보 갱신을 위한 관리 화면을 구축하고 REST API를 연동했습니다.
배너·콘텐츠 관리
배너와 콘텐츠를 관리하는 프론트엔드 UI를 구현했습니다.
인증 상태와 온보딩을 화면에 연결
인증 흐름과 프론트엔드를 연동하고 사용자 인증 상태를 고려한 화면 제어를 구현했습니다.
인증 이후 흐름에서는 온보딩 분기를 다루며 서비스 이용까지 이어지는 프론트엔드 흐름을 구성했습니다.
EXTERNAL OAUTH INTEGRATION
외부 서비스 연결을 UI로 지원
PayPal
OAuth 연결 UI와 프론트엔드 측 서비스 연동을 담당했습니다.
Shopee
OAuth를 이용하는 서비스 연결 화면과 프론트엔드 연동을 구현했습니다.
Amazon
외부 서비스 연결을 위한 OAuth UI와 프론트엔드 연동을 담당했습니다.
REUSABLE UI
여러 화면에서 사용하는 공통 컴포넌트
Pagination
목록 화면에서 사용하는 페이지 전환 UI를 공통 컴포넌트로 구현했습니다.
Modal
모달 UI를 공통화해 여러 화면에서 재사용하도록 구성했습니다.
DatePicker
날짜 선택 UI를 공통 컴포넌트로 구현했습니다.
TECH CONTEXT
React UI와 REST API를 연결하는 기술
- React / JavaScript
- React·JavaScript 기반 User / Admin 프론트엔드
- React Router v6 / Tailwind CSS 4.1.10
- React Router v6 화면 이동과 Tailwind CSS UI 구현
- Axios / REST API
- Axios를 활용한 Spring Boot REST API 프론트엔드 연동
- Git
- Git 버전 관리
화면 단위에서 서비스 이용 흐름까지
금융 웹 서비스에서 User / Admin React 프론트엔드를 개발하고 REST API·인증·외부 OAuth 연결을 화면 흐름에 반영하는 경험을 얻었습니다.
여러 화면에서 사용하는 공통 UI를 구현하며 API 연동 지점과 사용자 상태를 고려해 화면을 구성하는 중요성을 배웠습니다.