본문 바로가기
데브파이브
어두운 남색 배경 위 스마트폰에 신한은행 2021 종합업적평가대회 모바일 화면이 표시되어 있다.
사후문진표 작성하기 / 작성하러 가기 / 안녕하세요. 김신한 님 / S Point 5,000.
메뉴: 업평 메타버스, 업평갤러리, 업평TV, 전략 인사이트 리포트, RE:BOOT Shinhan, 감사 릴레이, 오樂실.
2021 신한은행 업적평가

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

제작 기간2021. 11 - 2021. 12
고객사신한은행
사용 기술React.js, TypeScript, Vite
고객 요구사항
& 프로젝트 방향
클라이언트의 인터뷰 및 협의를 통해 프로젝트의 핵심 요구사항을 도출하였으며, 인사이트를 바탕으로 사용자 경험과 브랜드 관점에서 개선이 필요한 5가지를 기반으로 설계하였습니다.
1.
연말 업적평가를 게임처럼 즐기는 몰입형 디지털 이벤트 구축
2.
React 기반 SPA 구조로 빠른 페이지 전환과 원활한 사용자 경험 구현
3.
메타버스 공간·업평 갤러리·업평 TV 등 다채로운 콘텐츠 탭 설계
4.
PC·모바일에서 동일한 경험을 제공하는 반응형 웹 최적화
5.
로딩 속도·이미지 경량화로 성능을 개선해 참여 접근성 강화
타이포 그래피
& 컬러 시스템
사용자의 시각적 편의를 고려한 명도 대비와 체계적인 컬러 시스템을 구축하였으며, 확장이 용이한 타이포그래피와 공통 컴포넌트를 설계하여 브랜드의 일관된 경험을 구현하였습니다.2021 신한은행 업적평가 컬러 시스템의 라이트·다크 버전.
Primary #00016E, Primary Bg #E2E7F1, Secondary #65687F.
그레이스케일: #FFFFFF, #A2A2A2, #000000.2021 신한은행 업적평가 컬러 시스템의 라이트·다크 버전.
Primary #00016E, Primary Bg #E2E7F1, Secondary #65687F.
그레이스케일: #FFFFFF, #A2A2A2, #000000.
타이포 그래피
& 컬러 시스템
사용자의 시각적 편의를 고려한 명도 대비와 체계적인 컬러 시스템을 구축하였으며, 확장이 용이한 타이포그래피와 공통 컴포넌트를 설계하여 브랜드의 일관된 경험을 구현하였습니다.2021 신한은행 업적평가 컬러 시스템의 라이트·다크 버전.
Primary #00016E, Primary Bg #E2E7F1, Secondary #65687F.
그레이스케일: #FFFFFF, #A2A2A2, #000000.2021 신한은행 업적평가 컬러 시스템의 라이트·다크 버전.
Primary #00016E, Primary Bg #E2E7F1, Secondary #65687F.
그레이스케일: #FFFFFF, #A2A2A2, #000000.

비즈니스의 ,

아이디어만 있어도 됩니다. 첫 상담부터 출시까지, 데브파이브가 함께합니다.
지금 문의하기
빠른 문의하기