logologo
#금융/핀테크
#콘텐츠 관리
#유틸리티 기능
#React
#Vite
#Node.js
#UI/UX 디자인
#모바일 앱
2021 신한은행 업적평가
신한은행
portfolio-top-image/file/2025_05_12/1747036681079_신한은행-1.webp
제작 연도2022
제작 기간2개월
사용 기술React.js, TypeScript, Vite
ABOUT

본 프로젝트는 신한은행의 요청에 따라 연말 업적평가를 흥미롭고 몰입감 있게 전달할 수 있는 디지털 이벤트 제작을 목표로 수행된 업적평가 이벤트 전용 웹페이지 프론트엔드 총괄 개발 작업입니다. 신한은행은 기존 평가 시스템에서 벗어나 직원들이 콘텐츠를 즐기면서 자발적으로 참여할 수 있는 새로운 형태의 평가 경험 제공을 요구했으며, 메타버스, 영상, 이미지 등 다양한 형식의 이벤트 콘텐츠 구성을 통해 전통적인 업적평가 방식의 딱딱함을 탈피하고자 했습니다. 또한 복잡하지 않으면서도 흥미로운 UI/UX 구성과 모바일 및 웹 환경에서 안정적으로 동작하는 크로스 플랫폼 호환성 확보를 요구했습니다. 이에 대응하여 React 기반 SPA 구조로 설계된 업적평가 이벤트 전용 웹페이지를 총괄 개발하고, 메타버스 공간, 업평 갤러리, 업평 TV 등 다채로운 콘텐츠 탭 제작과 반응형 웹 최적화를 통해 신한은행 직원들에게 혁신적인 업적평가 경험을 제공하는 디지털 이벤트 플랫폼을 완성했습니다.

고객 요구사항

1️⃣흥미롭고 몰입감 있는 연말 업적평가 디지털 이벤트 제작 요구 연말 업적평가를 흥미롭고 몰입감 있게 전달할 수 있는 디지털 이벤트 제작이 요청되었습니다. 기존 평가 시스템에서 벗어나 직원들이 콘텐츠를 즐기면서 자발적으로 참여할 수 있도록 구성하는 것이 핵심 요구사항이었으며, 메타버스, 영상, 이미지 등 다양한 형식으로 이벤트 콘텐츠를 구성해야 했습니다. 전통적인 업적평가 방식의 딱딱함과 형식적인 접근을 탈피하여 직원들이 능동적으로 참여하고 즐길 수 있는 새로운 형태의 평가 경험을 제공하는 것이 중요했으며, 다양한 멀티미디어 요소를 활용하여 시각적 흥미와 상호작용성을 극대화하는 이벤트 설계가 필요했습니다. 2️⃣사용자 친화적이고 몰입감 있는 인터페이스 구현 요구 사용자 친화적이고 몰입감 있는 인터페이스 구현이 필수 요구사항으로 제시되었습니다. 복잡하지 않으면서도 흥미로운 UI/UX 구성을 통해 직원들이 부담 없이 접근할 수 있으면서도 지속적인 관심을 유지할 수 있는 디자인이 요구되었으며, 모바일 및 웹 환경에서 모두 안정적으로 동작하는 크로스 플랫폼 호환성 확보가 필요했습니다. 직관적인 사용성과 시각적 매력을 동시에 만족시키는 인터페이스 설계가 중요했으며, 다양한 디바이스 환경에서 일관된 사용자 경험을 제공하여 모든 직원이 편리하게 이벤트에 참여할 수 있는 접근성을 보장하는 것이 핵심 과제였습니다.

주요 개발 사항

💡업적평가 이벤트 전용 웹페이지 프론트엔드 총괄 개발 완료 업적평가 이벤트 전용 웹페이지의 프론트엔드 총괄 개발을 성공적으로 완료했습니다. React 기반 SPA 구조로 설계 및 구현하여 빠른 페이지 전환과 원활한 사용자 경험을 제공할 수 있는 기반을 마련했으며, 메타버스 공간, 업평 갤러리, 업평 TV 등 다채로운 콘텐츠 탭을 제작하여 직원들이 다양한 형태의 업적평가 콘텐츠를 탐색하고 즐길 수 있는 환경을 구축했습니다. 각 영역별 인터랙션 디자인을 적용하여 몰입도를 강화했으며, 사용자가 각 섹션에서 능동적으로 참여하고 상호작용할 수 있는 매력적인 인터페이스를 완성했습니다. 💡반응형 웹 대응 및 최적화 구현 완료 반응형 웹 대응 및 최적화를 통해 모든 디바이스에서 일관된 사용자 경험을 제공하는 시스템을 구축했습니다. PC와 모바일 환경에서 동일한 경험을 제공하도록 최적화하여 직원들이 어떤 기기를 사용하든 편리하게 업적평가 이벤트에 참여할 수 있는 접근성을 확보했으며, 로딩 속도 및 이미지 경량화를 통한 성능 개선으로 사용자 대기 시간을 최소화하고 원활한 콘텐츠 이용 환경을 조성했습니다. 다양한 네트워크 환경에서도 안정적인 서비스 이용이 가능하도록 최적화 작업을 완료했습니다.

OUTPUT
portfolio-image/file/2024_11_27/1732689332959_1728970995094_신한은행_1.webp
wave-imagewave-image
Contact US
프로젝트 시작을 고민중 이신가요?
데브파이브와 함께 당신의 프로젝트를 완벽하게 시작해보세요.
/images/main/contact_us/guide-icon.webp
가이드 라인처음 프로젝트를 준비 중이신가요? 데브파이브의 가이드를 참고해 개발 프로세스부터 기술 스택까지 한눈에 파악해보세요.
/images/main/contact_us/inquiry-icon.webp
견적 및 문의빠르고 쉬운 견적으로 데브파이브와 함께 프로젝트를 시작해보세요.
2021 신한은행 업적평가 | 데브파이브