본문 바로가기
데브파이브
캐시백쿠폰몰 앱 화면 (NH포인트)
상태바: 1:42
상단: 캐시백쿠폰몰 / X (닫기)
헤더 (그린 배너)
- (P) NH포인트로 캐시백되는
- 내가 쓰는 브랜드쿠폰
- 알림 아이콘 / NH포인트 0P
포인트팡팡 카드
- 최대 8% 돌려받는 랜덤 포인트팡팡 — 보유 0개
- 포인트팡팡 — 상품 구매하고 포인트팡팡 뽑기!
카테고리
 	 
카페	치킨
베이커리	외식
패스트푸드	앱주문
하단 배너
- 아이스 아메리카노 한 잔에도
- NH포인트가 와르르 (일부 가려짐)
NH올원뱅크 캐시백쿠폰몰

본 프로젝트는 기존에 각기 다른 서비스와 플랫폼에 분산되어 관리되던 포인트들을 하나의 통합된 시스템으로 연결하여 사용자가 보유한 리워드의 소비 효율성을 극대화할 수 있는 종합적인 플랫폼 구축을 핵심 목표로 설정했습니다. 이를 위해 기프티콘 구매 및 결제 완료 후 사용자 계정으로 자동으로 포인트가 적립되는 페이백 시스템과 기존 보유 포인트와의 원활한 연동 기능을 개발하여 사용자가 별도의 복잡한 절차나 추가적인 인증 과정, 그리고 번거로운 수동 입력 작업 없이도 편리하게 서비스를 이용할 수 있도록 편의성을 대폭 향상시키며, 추가적으로 복권 자동 응모 기능을 플랫폼에 통합하여 단순한 포인트 사용을 넘어선 흥미롭고 참여도 높은 인터랙티브한 소비 경험을 제공하여 사용자 만족도와 플랫폼 재방문율을 동시에 증진시키는 게임화된 리워드 생태계를 구축합니다. 특히 연령대와 디지털 기기 사용 숙련도에 관계없이 전 연령층의 사용자가 학습 부담과 적응 시간 없이 직관적으로 접근하고 활용할 수 있는 사용자 친화적인 인터페이스 설계와 사용성 최적화에 중점을 두어 개발을 진행하며, 서비스 출시 이후에도 안정적이고 지속적인 서비스 운영이 가능하도록 정기적인 시스템 업데이트와 체계적인 유지보수 프로세스를 구축하여 서비스 품질 관리 체계를 확립함으로써 장기적인 플랫폼 신뢰성과 사용자 충성도를 보장합니다. 이러한 종합적인 접근을 통해 사용자는 기존의 복잡하고 번거로운 포인트 관리 과정과 각 서비스별 개별 접속의 불편함을 거치지 않고도 보유한 모든 리워드를 효율적으로 활용할 수 있는 통합된 원스톱 플랫폼 서비스를 경험할 수 있으며, 분산된 포인트 자산의 통합 관리를 통한 최적화된 리워드 활용 환경과 향상된 소비 가치를 제공받게 됩니다.

제작 기간2025. 06 - 2025. 08
고객사농협은행
사용 기술React.js
서비스
미리보기
캐시백쿠폰몰 앱 화면 (NH포인트) — 3화면 모음
화면 1 — 홈
상태바: 1:42 / 캐시백쿠폰몰 / X
헤더 (그린): (P) NH포인트로 캐시백되는 / 내가 쓰는 브랜드쿠폰 / 알림 / NH포인트 0P
포인트팡팡: 최대 8% 돌려받는 랜덤 포인트팡팡 — 보유 0개 / 상품 구매하고 포인트팡팡 뽑기!
카테고리:
 	 
카페	치킨
패스트푸드	베이커리
디저트	앱주문
배너: 아이스 아메리카노 한 잔에도 NH포인트가 와르르! (2/2)
하단 탭: 홈 · 보관함 · (중앙 버튼) · 검색 · MY
화면 2 — 근처 매장 지도
상태바: 1:42 / 캐시백쿠폰몰 / X
타이틀: 근처 매장에서 구매하고 NH포인트 캐시백!
중심: CU 신덕양주교점 (가장 가까워요! · 위치 핀)
주변 매장:
매장
다이소 고양원당점
세븐일레븐 고양원당점
씨제이올리브영 고양원당점 (OLIVE YOUNG)
맥도날드 고양원당DT점
맥도날드 고양원당DT점
GS25 고양원당점
설빙 고양원당점
버튼: 더 많은 브랜드 찾아보기
화면 3 — 상품 상세
상태바: 1:42 / 캐시백쿠폰몰 / X
상단: < / 키오스크 이용방법
상품: 맥도날드 — 쿼터파운더 치즈 세트
가격: 7,600원 / +최대 608P 캐시백
유의사항:
- 취소는 유효기간 30일 안에만 가능해요.
- 더 비싼 상품으로 교환할 때는 추가 결제가 필요해요.
버튼: 구매하고 최대 608P 돌려받기
화면에 마우스를 올려보세요!
고객 요구사항
& 프로젝트 방향
클라이언트의 인터뷰 및 협의를 통해 프로젝트의 핵심 요구사항을 도출하였으며, 인사이트를 바탕으로 사용자 경험과 브랜드 관점에서 개선이 필요한 5가지를 기반으로 설계하였습니다.
1.
React Native와 WebView 기반의 체계적인 UI 컴포넌트 아키텍처 구축
2.
슬라이드·탭·리스트 등 핵심 화면 요소의 반응형 UI와 애니메이션 성능 최적화
3.
실시간 캐시백 반영과 포인트 이력 확인 중심의 사용자 인터페이스 전면 최적화
4.
리스트·스와이프·모달 등 핵심 컴포넌트의 반응성과 로딩 속도를 개선해 끊김 없는 앱 경험 제공
5.
앱스토어 정책 대응·정기 보안 점검·지속 업데이트로 서비스 안정성과 신뢰성 강화
타이포 그래피
& 컬러 시스템
사용자의 시각적 편의를 고려한 명도 대비와 체계적인 컬러 시스템을 구축하였으며, 확장이 용이한 타이포그래피와 공통 컴포넌트를 설계하여 브랜드의 일관된 경험을 구현하였습니다.섹션: typo
폰트: Noto Sans KR
웨이트 스케일: ExtraBold | Bold | Medium | Regular | Light
샘플: Aa
타이포그래피 스케일
스타일	크기	샘플 텍스트
h1	30px	NH올원뱅크 캐시백쿠폰몰
Button	16px	NH올원뱅크 캐시백쿠폰몰
Body	14px	NH올원뱅크 캐시백쿠폰몰
Menu	12px	NH올원뱅크 캐시백쿠폰몰섹션: color
메인 컬러
구분	HEX	색상
Primary	#19973C	초록
Primary Bg	#F0FCF5	연한 민트
Secondary	#2D9CDB	파랑
그레이스케일 (7단계)
단계	HEX
1	#FFFFFF
2	·
3	·
4	#27282C
5	·
6	·
7	#000000섹션: typo
폰트: Noto Sans KR
웨이트 스케일: ExtraBold | Bold | Medium | Regular | Light
샘플: Aa
타이포그래피 스케일
스타일	크기	샘플 텍스트
h1	30px	NH올원뱅크 캐시백쿠폰몰
Button	16px	NH올원뱅크 캐시백쿠폰몰
Body	14px	NH올원뱅크 캐시백쿠폰몰
Menu	12px	NH올원뱅크 캐시백쿠폰몰섹션: color
메인 컬러
구분	HEX	색상
Primary	#19973C	초록
Primary Bg	#F0FCF5	연한 민트
Secondary	#2D9CDB	파랑
그레이스케일 (7단계)
단계	HEX
1	#FFFFFF
2	·
3	·
4	#27282C
5	·
6	·
7	#000000
타이포 그래피
& 컬러 시스템
사용자의 시각적 편의를 고려한 명도 대비와 체계적인 컬러 시스템을 구축하였으며, 확장이 용이한 타이포그래피와 공통 컴포넌트를 설계하여 브랜드의 일관된 경험을 구현하였습니다.섹션: typo
폰트: Noto Sans KR
웨이트 스케일: ExtraBold | Bold | Medium | Regular | Light
샘플: Aa
타이포그래피 스케일
스타일	크기	샘플 텍스트
h1	30px	NH올원뱅크 캐시백쿠폰몰
Button	16px	NH올원뱅크 캐시백쿠폰몰
Body	14px	NH올원뱅크 캐시백쿠폰몰
Menu	12px	NH올원뱅크 캐시백쿠폰몰섹션: color
메인 컬러
구분	HEX	색상
Primary	#19973C	초록
Primary Bg	#F0FCF5	연한 민트
Secondary	#2D9CDB	파랑
그레이스케일 (7단계)
단계	HEX
1	#FFFFFF
2	·
3	·
4	#27282C
5	·
6	·
7	#000000섹션: typo
폰트: Noto Sans KR
웨이트 스케일: ExtraBold | Bold | Medium | Regular | Light
샘플: Aa
타이포그래피 스케일
스타일	크기	샘플 텍스트
h1	30px	NH올원뱅크 캐시백쿠폰몰
Button	16px	NH올원뱅크 캐시백쿠폰몰
Body	14px	NH올원뱅크 캐시백쿠폰몰
Menu	12px	NH올원뱅크 캐시백쿠폰몰섹션: color
메인 컬러
구분	HEX	색상
Primary	#19973C	초록
Primary Bg	#F0FCF5	연한 민트
Secondary	#2D9CDB	파랑
그레이스케일 (7단계)
단계	HEX
1	#FFFFFF
2	·
3	·
4	#27282C
5	·
6	·
7	#000000

비즈니스의 다음 단계퀀텀 점프마스터키파트너, 데브파이브와 함께 도약하세요.

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