본문으로 건너뛰기
DANBEE LEE
← 프로젝트 목록

가치해양 — 해양 환경 보호 앱

해양 쓰레기 기록 · 참여 · 보상 흐름을 설계하고 인증과 상점 기능을 구현

기간
2024.07 – 2024.09
역할
디자인 · 프론트엔드
React NativeJavaScriptCoolSMS APIKakao LoginFigma

성과

본선 진출
공공데이터 해커톤
기록→보상
사용자 참여 유도 구조
예외 처리
인증 · 네트워크 안정화

Overview

단순 정보 제공만으로는 사용자가 지속적으로 참여하지 않습니다. 기록 → 참여 → 보상으로 이어지는 흐름을 설계하고, 인증과 상점 기능을 직접 구현했습니다.

Architecture

  1. App
    React Native전역 상태 관리
  2. Auth
    CoolSMS 인증번호Kakao Login토큰 관리
  3. Feature
    활동 기록 캘린더포인트 상점
  4. Server
    백엔드 API 연동

주요 기능

  • 기록 · 참여 · 보상 흐름 중심의 서비스 구조 설계, Figma 와이어프레임 · 프로토타입
  • CoolSMS 인증번호 발송 + Kakao Login 소셜 로그인으로 인증 흐름 단순화
  • react-native-calendars로 월별 활동 기록 캘린더 구현
  • 포인트 기반 아이템 구매 기능 — 구매 상태가 서버와 동기화되도록 상태 관리 로직 설계

문제 해결

Problem

로그인 실패나 중복 요청 시 앱이 멈춘 것처럼 보였습니다.

Cause

인증 과정의 예외 케이스(실패 · 중복 · 만료)를 처리하지 않아, 사용자에게 아무 피드백이 없었습니다.

Solution

실패 · 중복 요청 · 인증 만료를 각각 분기 처리하고, 로딩 · 오류 상태 UI를 추가해 사용자가 현재 상태를 알 수 있게 했습니다.

Problem

아이템을 구매해도 화면에 반영되지 않거나, 이미 산 아이템을 다시 살 수 있었습니다.

Cause

구매 상태가 클라이언트에만 반영되고 서버 데이터와 동기화되지 않았습니다.

Solution

구매 성공 응답을 기준으로 상태를 갱신하도록 로직을 바꾸고, 상태 변경이 실시간으로 UI에 반영되도록 구성했습니다.

결과

  • 공공데이터 해커톤 아이디어톤 본선 진출
  • 기획(Figma)부터 인증 · 캘린더 · 상점까지 직접 완성

활동 기록 화면

가치해양 — 해양 환경 보호 앱 — 활동 기록 화면

클릭하면 원본 크기로 열립니다

포인트 상점

가치해양 — 해양 환경 보호 앱 — 포인트 상점

클릭하면 원본 크기로 열립니다

인증 흐름

가치해양 — 해양 환경 보호 앱 — 인증 흐름

클릭하면 원본 크기로 열립니다