"1분반-풍선"의 두 판 사이의 차이

cdc wiki
이동: 둘러보기, 검색
(차후 구현할 내용)
 
(같은 사용자의 중간 판 7개는 보이지 않습니다)
130번째 줄: 130번째 줄:
 
===기술개발 일정 및 추진체계===
 
===기술개발 일정 및 추진체계===
 
====개발 일정====
 
====개발 일정====
내용[[파일:Example.jpg]]
+
[[파일:풍선_개발일정.png]]
 +
 
 
====구성원 및 추진체계====
 
====구성원 및 추진체계====
 
  ◇ 조장
 
  ◇ 조장
149번째 줄: 150번째 줄:
 
===설계사양===
 
===설계사양===
 
====제품의 요구사항====
 
====제품의 요구사항====
내용
+
[[파일:풍선_설계사양.png]]
 +
 
 
====설계 사양====
 
====설계 사양====
내용
+
◇ 로그인 및 회원가입 기능
 +
      - 본 서비스는 개인별 정보의 유지를 필요로 하므로 무료 회원제를 채택한다.
 +
      - 우선적으로 Google, KakaoTalk 등 소셜 로그인을 통해 로그인 및 회원가입 절차를 간편화한다. (추후 자체적인 회원 가입 시스템 도입이 가능하나, 우선순위는 낮다.)
 +
      - 처음 앱을 실행 시 로그인을 해야 하며, 회원이 아니라면 회원 가입을 진행한다.
 +
      - 앱에서 로그인 내역을 기억해서 다음 접속 시 자동 로그인을 하여 사용성을 높인다.
 +
 
 +
◇ 도보이동 위치 수집 기능
 +
      - 사용자의 위치 정보를 바탕으로 일정 시간마다 사용자가 도보로 이동 중인지 아닌지를 판별한다.
 +
      - 사용자가 도보로 이동 중이면 해당 위치를 저장한다.
 +
      - 저장된 도보이동 위치 정보를 바탕으로 환경발자국 영역을 계산한다.
 +
 
 +
◇ 지도 표시 기능
 +
      - 사용자는 환경발자국 및 아이템이 증강된 지도를 확인할 수 있다. Google Maps API를 이용한다.
 +
      - 환경발자국 내에 균일분포로 아이템이 생성된다.
 +
 
 +
◇ 광고시청 및 포인트 획득 기능
 +
      - 환경발자국 내의 아이템을 터치하면 포인트를 획득할 수 있다. 포인트는 상점에서 실물상품과 교환할 수 있다.
 +
      - 아이템 터치 시 일정 확률로 추가적인 포인트를 받을 수 있고 환경모금에도 기여되는 광고보기 이벤트가 실행된다.
 +
 
 +
◇ 포인트 교환 기능
 +
      - 포인트로 구매할 수 있는 상품을 조회할 수 있다.
 +
      - 획득한 포인트를 상품과 교환하면 바코드쿠폰 형식의 이미지를 다운로드 받을 수 있다.
 +
 
 +
◇ 개인 프로필 확인 기능
 +
      - 개인 프로필 화면에서 개인정보, 획득한 포인트, 탄소저감량, 쿠폰 구매 내역 등이 표시된다.
 +
      - 사용자 환경설정 등 기타 옵션을 제공한다.
 +
 
 +
◇ 환경 보호 모금 기능
 +
      - 사용자가 환경 모금을 조회 및 참여할 수 있다.
 +
      - 환경 모금 참여 시 해당 모금에 일정 금액이 기여되는 광고를 시청한다.
  
 +
◇ 환경 챌린지 기능
 +
      - 사용자는 “쓰레기줍기, 텀블러 이용하기, 대중교통 이용하기” 등 사진으로 인증 가능한 환경 챌린지에 참여할 수 있다.
 +
      - 사용자는 여러 명의 사용자로 구성된 환경 챌린지 방을 조회 및 참여할 수 있다.
 +
      - 사용자는 매일 현장에서 즉석으로 찍은 사진으로 환경 활동을 인증한다.
 +
      - 각 인증 사진은 환경 챌린지 방에 업로드되며, 사용자들이 서로 인증사진을 승인하고, 승인 완료 시 포인트를 받을 수 있다.
 
===개념설계안===
 
===개념설계안===
내용
+
◇ 유즈케이스 다이어그램
 +
[[파일:풍선_유즈.png]]
 +
 
 +
◇ 액티비티 다이어그램
 +
[[파일:풍선_액티.png]]
 +
 
 +
◇ 시나리오
 +
[[파일:풍선_시나리오1.png]]
 +
 
 +
[[파일:풍선_시나리오2.png]]
 +
 
 +
[[파일:풍선_시나리오3.png]]
  
 +
[[파일:풍선_시나리오4.png]]
 
===이론적 계산 및 시뮬레이션===
 
===이론적 계산 및 시뮬레이션===
내용
+
===상세설계 내용===
 +
◇ 아키텍쳐 다이어그램
 +
[[파일:풍선_아키텍쳐.png]]
 +
 +
◇ Front-End
 +
    - React Native 프레임워크를 이용한 애플리케이션 제작
 +
    - TypeScript를 활용한 정적 타입 검사
 +
◇ Back-End
 +
    - Python FastAPI 프레임워크를 이용한 REST API 제공
 +
    - NoSQL 기반 MongoDB를 이용한 DB 구축
 +
◇ Infrastructure
 +
    - Docker Container를 이용한 Backend 서버 배포
 +
    - AWS EC2를 이용한 Backend 서버 호스팅
 +
◇ Others
 +
    - OAuth2를 이용한 Google/KakaoTalk 사용자 인증
 +
    - Git/GitHub를 이용한 소스 코드 형상 관리
 +
 
 +
◇ 프론트 클래스 다이어그램
 +
 
 +
[[파일:풍선_프론트.png]]
  
===상세설계 내용===
+
◇ 백엔드 클래스 다이어그램
내용
+
 
 +
[[파일:풍선_백.png]]
  
 
==결과 및 평가==
 
==결과 및 평가==
 
===완료 작품의 소개===
 
===완료 작품의 소개===
====프로토타입 사진 혹은 작동 장면====
+
 
내용
+
====작동 장면====
====포스터====
+
◇ 메인화면
내용
+
[[파일:풍선_로그인.jpg]]
 +
 
 +
◇ 실행화면
 +
[[파일:풍선_실행1.jpg]]
 +
[[파일:풍선_실행2.jpg]]
 +
 
 +
[[파일:풍선_실행3.jpg]]
 +
[[파일:풍선_실행4.jpg]]
 +
 
  
 
===관련사업비 내역서===
 
===관련사업비 내역서===
내용
+
[[파일:풍선_사업비.png]]
  
 
===완료작품의 평가===
 
===완료작품의 평가===
내용
+
[[파일:풍선_평가.png]]
  
 
===향후계획===
 
===향후계획===
내용
+
====어려웠던 내용들====
 +
◇ Admob을 이용해 실제 광고 시청을 구현했으나, 테스트 과정에서 부정 광고 시청 등으로 인해 광고가 차단되는 등 문제가 있었다.
 +
 
 +
◇ 광고를 연속으로 여러 번 시청하면 광고가 해당 클라이언트에서 로딩되지 않는 등 문제가 나타났다 애드몹 측의 까다로운 정책을 고려해서 앱을 구현했다.
 +
◇ Google OAuth를 통한 소셜 로그인을 구현하였으나, 로그인 과정에서 필요한 보안 요건을 충족시키지 못해 해당 구현물을 사용할 수 없었다. 이에 해당 기능을 삭제했다.
 +
 
 +
◇ Expo를 사용할 때 Development 빌드에서는 동작하지만 Release 빌드에서는 동작하지 않는 기능이 존재해 이 격차를 해결하고자 개발기간을 상당히 소모했다.
 +
 
 +
◇ Release용 앱을 빌드하기 위해 Expo의 클라우드 기반 빌드 시스템을 사용해야 했는데, 시스템 이용 대기열이나 시간당 이용횟수 제한, 40분 정도의 긴 빌드 시간 등으로 인해 개발기간을 상당히 소모했다. 이에 Expo 유료 멤버십을 사용하는 대책으로 대응했다.
 +
 
 +
◇ AWS EC2 Docker + DevContainer 설정
 +
    서버를 개발할 때, AWS 서버 자원을 활용하고 실제 빌드 환경과 같은 환경에서 개발하기 위해 AWS EC2 내부에 Docker Container를 생성하고 그 안에서 개발을 하기로 계획하였습니다. 하지만 개발하기 위한 설정을 하던 도중 계속 원격 접속이 끊어지고 접속이 되지 않는 문제가 생기게 되었습니다. 처음에는 EC2 인스턴스 유형을 원래 사용하기로
 +
    계획한 t3.medium이 아닌 free tier인 t2.micro로 사용하여 단순한 리소스 부족인 줄 알고 인스턴스 유형을 변경하였습니다. 하지만 인스턴스 유형을 t3.medium으로 변경하여도 같은 문제가 계속 발생하였습니다. 이후 확인해보니 인스턴스에서 DevContainer와 개발을 위한 VSCode를 실행하는 것만으로 인스턴스에 배정된 RAM을 전부 사용하게 되어
 +
    생기는 문제라는 것을 알게 되었고, Swap Memory를 두어 해결하게 되었습니다.
 +
 
 +
◇ 각종 보안과 인증 기능 구현
 +
    기본 지식이 부족하여 인증이 필요한 곳에서 어떻게 인증을 검증할 수 있는지 구현하고, 보안 기술이 필요한 부분에서 어떤 보안 기술을 사용할 것인지 구상하고 구현하는 데 어려움이 있었습니다.
 +
 
 +
====차후 구현할 내용====
 +
◇ MongoDB에서 관계형 DB로 전환
 +
    빠른 개발과 배포를 위해 비정형 데이터베이스인 MongoDB를 사용했지만, 데이터의 효율적이고 안전한 활용을 위해서는 관계형 DB로 전환하여 사용할 필요가 있습니다.
 +
 
 +
◇ 키 교환 및 인증 로직 구현
 +
    개발 스케줄의 문제로 지도 위의 표식을 터치하여 포인트를 얻는 상황 중 광고를 보지 않는 상황에서 적절한 표식을 터치하였는지 인증하기 위해 사용하는 비밀키를 임의의 문자열로 대체하였지만, 더 안전한 서비스 운영을 위해서는 프론트엔드와 백엔드가 비밀키를 교환하는 과정이 필요합니다.
 +
    또한 SHA256 방식을 사용하더라도 여러 개의 인증용 signature를 가지고 있다면 어느 정도 규칙성을 찾아낼 수도 있기 때문에 단순히 SHA256 해시 함수를 한 번 실행하는 게 아니라 여러 번 실행한다던가 하는 식으로의 수정도 필요할 것으로 보입니다.
 +
 
 +
◇ 기프티콘 API 연동
 +
    프로젝트를 진행하면서 사업자 등록을 하고, 사업 아이템을 인정받아 기프티콘 API를 사용할 수 있을 때까지 시간이 많이 걸릴 것으로 예상하고 기프티콘 API를 연동하는 것은 후순위로 미루었습니다. 차후에는 구현되어야 할 기능입니다.
 +
 
 +
◇ 기타 세부 로직 수정
 +
    아직 몇몇 비효율적이거나 찾지 못한 오류가 있는 부분이 있습니다. 차후 수정해야 할 것으로 보입니다.
 +
 
 +
◇ 구글 로그인 추가
 +
    기존에 추가할 계획이 있었으나 일정상의 문제로 차후 추가해야 할 것으로 보입니다
  
 
===특허 출원 내용===
 
===특허 출원 내용===
내용
+
특허 없음

2024년 12월 17일 (화) 09:31 기준 최신판

프로젝트 개요

기술개발 과제

국문 : 환경발자국

영문 : eco-footprint

과제 팀명

풍선

지도교수

이동희 교수님

개발기간

2024년 9월 ~ 2024년 12월 (총 4개월)

구성원 소개

서울시립대학교 컴퓨터과학부 2019920020 김혁순(팀장)

서울시립대학교 컴퓨터과학부 2018920024 배민석

서울시립대학교 컴퓨터과학부 2018920045 이정민

서울시립대학교 컴퓨터과학부 2019920010 김민교

서론

개발 과제의 개요

개발 과제 요약

◇ 걷기를 환경보호와 연관지어 환경보호활동을 고취하는 친환경 만보기 리워드앱을 개발한다.
◇ 걷기를 실천한 지역의 일정 반경 내의 지리적 영역을 의미하는 “환경발자국”이라는 개념을 도입하고 그것의 시스템적인 구현을 통해 걷기를 환경을 위한 행동으로 프레임화한다.
◇ 환경발자국의 넓이에 비례해 리워드를 제공함으로써 사용자의 환경보호를 위한 걷기 실천을 고취하고 리워드를 제공해 앱 사용을 습관화한다.
◇ 다양한 환경보호 챌린지를 진행하여 환경보호활동을 고취하고 이에 대한 리워드를 제공해 앱 사용을 습관화한다.
◇ 앱 사용 중에 거부감 없이 자발적으로 광고를 시청할 수 있는 환경을 조성한다. 광고 시청 시 추가적인 리워드를 보장하거나, 환경보호모금 등에 기여할 수 있도록 한다.
◇ 사용자의 환경보호활동이 환경에 얼마나 도움이 되었는지에 대해 환경보호모금진행도, 탄소저감량 등 지표를 제공함으로써 앱 사용에 성취감을 제공한다.

개발 과제의 배경

◇ 고금리, 고물가 추세로 인해 대중의 리워드앱에 대한 관심이 지속적으로 높아지고 있으며 2023년 기준 1000만명 이상의 국민이 리워드앱을 이용하고 있다.
◇ 심화되어가는 기상이변 등으로 인해 환경에 대한 우려와 관심이 높아지고 있다.
◇ 리워드앱 중 만보기 리워드앱은 중년 여성을 주 사용층으로 하며, 중년 여성은 환경에 대한 관심도가 가장 높은 인구이다. 
◇ 만보기 리워드앱과 친환경 요소를 결합한 서비스를 통해 환경에 관심있는 사용자를 지속적으로 유입시키고, 수익을 창출할 뿐만 아니라, 사용자의 환경보호의식을 강화해 환경보호에 직간접적으로 이바지할 수 있다.

개발 과제의 목표 및 내용

◇ 프론트엔드는 React문법으로 안드로이드와 iOS앱을 동시에 개발할 수 있는 React Native 프레임워크를 이용해 개발한다. 
◇ GPS기능을 통해 사용자의 현재 위치를 추적하고 만보기가 흔들릴 때 해당 위치의 일정 반경 이내를 환경발자국으로 지정한다.
◇ Google Maps API를 통해 지도를 불러오고 지도 위에 사용자의 현 위치, 환경발자국 영역, 각종 배치물을 증강하여 배치한다.
◇ 사용자의 실질 이동량을 차량을 탑승했을 시의 탄소량으로 치환하여 보여준다. 또 광고 수익의 일부를 축적하는 환경보호모금을 진행한다.
◇ 리워드를 받기 전 Google Admob 등 광고 플랫폼의 rewarded ads를 보여준다. 사용자가 자발적으로 광고를 볼 수 있도록 많은 리워드를 제공하고 환경보호모금 진척도를 보여주며 광고시청을 호소한다.
◇ 쓰레기줍기, 대중교통 이용하기, 텀블러 사용하기 등의 활동을 사진을 통해 인증하고 리워드를 받을 수 있는 챌린지 시스템을 도입한다. 

관련 기술의 현황

관련 기술의 현황 및 분석(State of art)

  • 전 세계적인 기술현황
◇ 위치기반서비스(LBS)
   - 무선 인터넷 사용자에게 사용자의 변경되는 위치에 따라 특정 정보를 제공하는 무선 컨텐츠 서비스를 지칭한다. 최근에는 노키아(Nokia) 같은 모바일 핸드셋 제작사들이 자신들의 장비에 LBS를 내장하기 위해 자발적으로 노력하고 있지만, 원래 LBS는 이동통신사와 모바일 콘텐츠 공급사들의 협력 아래에서 개발되었다.
◇ React Native
   - 리액트 네이티브(React Native)는 페이스북이 개발한 오픈 소스 모바일 애플리케이션 프레임워크이다. 안드로이드, iOS, 웹, UWP용 애플리케이션을 개발하기 위해 사용되며, 개발자들이 네이티브 플랫폼 기능과 더불어 리액트를 사용할 수 있게 한다.
◇ TypeScript
   - 타입스크립트(TypeScript)는 자바스크립트(JavaScript)에 정적 타입을 비롯한 여러 기능을 추가한 오픈소스 프로그래밍 언어이다. 타입스크립트에서 자신이 원하는 타입을 정의하고 프로그래밍을 하면 자바스크립트로 컴파일되어 실행할 수 있다.
◇ REST API
   - REST API는 REST(Representational State Transfer) 네트워크 아키텍처 스타일의 설계 원칙을 준수하는 API(Application Programming Interface)이다. REST API는 HTTP 요청을 통해 통신하여 리소스 내에서 레코드를 생성하고 읽기, 업데이트 및 삭제(CRUD라고도 함)와 같은 표준 데이터베이스 기능을 수행한다.
  • 특허조사 및 특허 전략 분석
◇ 보행기반 보상 제공 시스템 (캐시워크) (특허번호 10-2019-0002135)
   - 운동의 동기부여 및 광고노출효과를 극대화한 보상 제공 시스템이다. 
   - 사용자의 동작을 센싱하는 센서부, 동작 센싱으로부터 걸음 횟수를 카운트하는 제어부, 일정 걸음마다 버튼을 로딩하는 표시부, 사용자가 버튼을 누를 때 캐시를 적립하는 입력부로 구성된다.
   - 버튼 클릭 시 광고 서버로부터 주 광고를 불러올 수 있다.
◇ 사용자의 이동이 탄소저감에 실제로 기여하였는지 판단하는 방법 및 장치 (포레스텝)(특허번호 10-2023-0174945)
   - 사용자가 실제로 보행을 통해 이동하였는지에 대해 판단하는 방법으로, 가속도 센서, GPS정보, 접속 가능한 통신망의 종류 및 신호 세기, 사용자 장치에 대한 조작 정보 및 이동 속도 등 센싱 데이터를 이용한다.
   - 본 발명 기술을 통해 사용자의 걸음을 정밀하게 인식하고 걸음 수에 따른 보상으로 사용자의 식물의 생장에 관련된 사항을 제공하여 사용자의 참여의욕 및 보상 정확도를 높인다.
  • 기술 로드맵
◇ Front-End
   - React Native : AOS/IOS 크로프 플랫폼 애플리케이션 개발 및 배포
   - TypeScript : 프론트엔드 개발 단계에서의 정적 타입 검사로 인한 에러 방지
◇ Back-End
   - AWS : 백엔드 서버를 배포할 가상 클라우드로 사용
   - Python FastAPI : REST-API를 기반으로 한 백엔드 서버 구축
   - MongoDB : NoSQL 기반 DBMS로 DB 서버 구축
   - Docker : Docker-Compose를 이용한 백엔드 서버와 DB 서버 관리

시장상황에 대한 분석

  • 경쟁제품 조사 비교
◇ 입론
   - 만보기 리워드앱의 경우 중복사용이 가능하고, 또 그렇게 사용하는 것이 사용자에게도 많은 리워드를 보장하기 때문에 일단 사용자에게 선택되었다면 다른 경쟁제품과 경쟁이 심하다고 볼 수 없다.
   - 그러나 수많은 만보기 리워드앱이 우후죽순으로 생겨나는 실정에서 사용자에게 선택받기 위해서는 비교제품과 차별화되는 점이 필요하다.

◇ 경기도 기후행동 기회소득
   - 특징: 경기도 지자체에서 공익 목적으로 개발한 친환경 리워드앱으로, 경기도 주민을 대상으로 “기후행동”에 대해 리워드를 제공한다. 리워드는 경기지역화폐의 형태로 바꿀 수 있다.“기후행동”에는 걷기, 자전거 이용, 대중교통 이용, 친환경 운전, 텀블러 할인 카페 찾기, 배달음식 다회용기 이용 등이 있다.
   - 강점: 지자체에서 공익 목적을 위해 운영하는 만큼 동기부여를 위해 리워드를 상대적으로 많이 제공한다. 매우 다양한 환경보호활동을 통해 리워드를 받을 수 있다.
   - 약점: 공익 목적의 서비스로서 상업적으로 이용되지 않는다. 경기도 주민만 사용할 수 있고 리워드의 사용처 또한 경기지역화폐로 한정되어 있어 보편성이 떨어진다. 리워드를 많이 제공하지만 지속적으로 사용하게 되면 연간 3만원의 리워드 제한에 걸렸을 때 앱 이용 이탈의 원인이 된다.
◇ 오락
   - 특징: “탄소중립 앱테크”를 표방한 친환경 만보기 앱으로, 걷기를 환경과 연관짓고 있다. 걷기 외에도 뉴스읽기, 랜덤뽑기, 걷기 챌린지 등 다양한 방법으로 리워드를 받을 수 있다.
   - 강점: 걷기를 통해 저감한 탄소량을 나무의 그루 수 만큼 직관적으로 표시해주어 앱 사용에 동기를 부여한다.
   - 약점: 단순 걸음횟수에 비례하여 탄소저감량을 표시하는 기능만으로는 친환경 요소를 완성했다고 보기 어렵고 기존 만보기 리워드 앱과 차별화하기도 어렵다. 만보기 기능 외 다른 친환경 기능이 미비하다.
◇ 포레스탭
   - 특징: 걷기를 통해 포인트를 받고 나무를 심을 수 있는 친환경 만보기 앱이다. 단순 걸음횟수에 비례해서 탄소저감량을 표시하는 데에서 더 나아가 걸음횟수에 따라 식물이 자라고 나중에는 실제 식물을 받아볼 수도 있다. 
   - 강점: 걸음 횟수가 단순 숫자 및 지표로만 나타나는 것이 아니라 UI상에서 나만의 식물을 기르고, 실제로 그 식물을 받는 등 환경보호와 구체적으로 연관된 체험을 할 수 있다.
   - 약점: 친환경 어플로서의 정체성을 위해 리워드의 사용을 식물 구매로만 제한하였고, 이에 따라 앱 사용의 유용성이나 보편성이 크게 떨어진다. 만보기 기능 및 식물 수령 외 다른 친환경 기능이 미비하다.
◇ 총평
   - 위 앱들의 만보기 기능은 단순 걸음횟수에 비례하여 탄소저감량 등 환경지표를 제시하는 수준으로만 제공되어 여타 만보기 기능과 큰 차별화가 되지 않는다.
   - 반면 우리 앱은 위치기반으로 “환경발자국” 시스템을 도입하여 여타 만보기 기능에 대해 다음의 우위를 점한다.
     - 걷기의 실효성 : 걷기의 환경에 대한 영향을 평가할 때 걷기의 단순 횟수가 아닌 걷기의 실제적인 효력이 일어난 지리적 영역을 측정한다.
     - 인터렉션 강화 : 사용자는 환경발자국 영역을 통해 자신의 성취를 한 눈에 확인할 수 있을 뿐 아니라 그 영역 안에서 환경모금, 리워드 등의 이벤트가 진행됨으로써 자신의 성취로서의 환경발자국 영역과 긴밀하게 인터렉션할 수 있다. 
       자신의 성취와 긴밀하게 얽혀 있다는 경험은 만보기 기능 사용에 대해 높은 동기부여가 된다.
     - 위치기반 서비스 확장성 : 텀블러 사용 카페 등 제휴업체의 위치를 표시하고 방문 시 리워드를 제공하는 등 환경보호 관련 위치기반 기능을 무궁무진하게 확장할 수 있다.
  • 마케팅 전략 제시
◇ 타겟광고마케팅
   - 리워드앱 또는 환경에 관심이 있는 사람들이 이용자 타겟이므로 타겟을 정확히 공략할 수 있는 타겟광고를 통해 마케팅한다.
   - 검색엔진 마케팅(SEM): 브랜드와 콘텐츠가 검색엔진 결과에서 상위에 표시되도록 지원하는 광고 프로세스이다.
   - 소셜미디어 마케팅: 소셜 미디어를 활용한 마케팅으로, 본 서비스에서는 30대 이상의 고객을 타게팅하기 좋은 facebook을 주로 활용한다. 이미지, 영상 등 미디어를 기반으로 사용자의 공감과 참여, 친근함을 유도한다.
◇ 초대기능
   - 초대자 코드를 메신저 등으로 통해 쉽게 친구에게 공유하는 방법을 제공한다.
   - 계정 가입 시 초대자 코드를 입력하는 기능을 추가한다. 코드에 해당하는 초대자는 추가적인 리워드를 받게 함으로써 초대자가 코드를 자발적으로 퍼뜨리도록 해 홍보를 유도한다.

개발과제의 기대효과

기술적 기대효과

◇ 위치기반 기술을 통해 사용자가 환경보호를 위한 걷기에 대한 효과를 지도상의 영역으로 한 눈에 확인할 수 있다.
◇ 다양한 프론트엔드 기술을 통해 사용자가 환경보호 챌린지 및 모금 등 기능을 편리하고 빠른 UI로 접근할 수 있으며, 이를 통해 환경보호활동을 간편하게 참여할 수 있다.
◇ 본 개발과제의 상업적 지속 가능성이 입증될 시, 환경과 관련해서 다양한 업체, 정부 등과 제휴 및 협업할 수 있는 위치기반 환경 플랫폼으로 발전시킬 수 있다.

경제적, 사회적 기대 및 파급효과

◇ 지속적인 수익창출: 리워드앱의 인간공학을 통해 광고시청에 대한 거부감을 줄이고 지속적인 수익창출이 가능하다.
◇ 사용자의 환경보호활동 독려: 사용자가 환경보호활동을 실천하면면 그 성과를 한 눈에 확인할 수 있으며, 해당 성과에 대해 리워드를 제공함으로써 환경보호에 있어 자기효능감을 느낄 수 있도록 한다.
◇ 환경모금을 통한 환경보호: 사용자의 환경보호활동을 독려하기 위한 환경보호모금을 진행한다. 광고수익의 일부를 나무심기, 동물보호 등에 기여함으로써 도덕적인 기업의 모습을 구축하고 더불어 사는 사회, 지속 가능한 사회에 기여한다.

기술개발 일정 및 추진체계

개발 일정

풍선 개발일정.png

구성원 및 추진체계

◇ 조장
   • 김혁순
◇ 애플리케이션 및 프론트엔드
   • 김민교
   • 김혁순
   • 배민석
◇ 백엔드 및 서버
   • 김민교
   • 이정민
◇ Git을 이용하여 소스 코드 형상 관리를 하며, GitHub를 원격 저장소로 두어 모든 구성원이 인터넷으로 소스코드를 공유할 수 있도록 한다.
◇ 애플리케이션 및 프론트엔드는 React Native 프레임워크를 사용한다.
◇ 백엔드 및 서버는 Python FastApi를 사용하며 백엔드 서버를, MongoDB를 사용하여 DB 서버를 구축하고, AWS와 Docker 컨테이너를 사용하여 배포한다.


설계

설계사양

제품의 요구사항

풍선 설계사양.png

설계 사양

◇ 로그인 및 회원가입 기능
     - 본 서비스는 개인별 정보의 유지를 필요로 하므로 무료 회원제를 채택한다.
     - 우선적으로 Google, KakaoTalk 등 소셜 로그인을 통해 로그인 및 회원가입 절차를 간편화한다. (추후 자체적인 회원 가입 시스템 도입이 가능하나, 우선순위는 낮다.)
     - 처음 앱을 실행 시 로그인을 해야 하며, 회원이 아니라면 회원 가입을 진행한다.
     - 앱에서 로그인 내역을 기억해서 다음 접속 시 자동 로그인을 하여 사용성을 높인다.
◇ 도보이동 위치 수집 기능
     - 사용자의 위치 정보를 바탕으로 일정 시간마다 사용자가 도보로 이동 중인지 아닌지를 판별한다.
     - 사용자가 도보로 이동 중이면 해당 위치를 저장한다.
     - 저장된 도보이동 위치 정보를 바탕으로 환경발자국 영역을 계산한다.
◇ 지도 표시 기능
     - 사용자는 환경발자국 및 아이템이 증강된 지도를 확인할 수 있다. Google Maps API를 이용한다.
     - 환경발자국 내에 균일분포로 아이템이 생성된다.
◇ 광고시청 및 포인트 획득 기능
     - 환경발자국 내의 아이템을 터치하면 포인트를 획득할 수 있다. 포인트는 상점에서 실물상품과 교환할 수 있다.
     - 아이템 터치 시 일정 확률로 추가적인 포인트를 받을 수 있고 환경모금에도 기여되는 광고보기 이벤트가 실행된다.
◇ 포인트 교환 기능
     - 포인트로 구매할 수 있는 상품을 조회할 수 있다.
     - 획득한 포인트를 상품과 교환하면 바코드쿠폰 형식의 이미지를 다운로드 받을 수 있다.
◇ 개인 프로필 확인 기능
     - 개인 프로필 화면에서 개인정보, 획득한 포인트, 탄소저감량, 쿠폰 구매 내역 등이 표시된다.
     - 사용자 환경설정 등 기타 옵션을 제공한다.
◇ 환경 보호 모금 기능
     - 사용자가 환경 모금을 조회 및 참여할 수 있다.
     - 환경 모금 참여 시 해당 모금에 일정 금액이 기여되는 광고를 시청한다.
◇ 환경 챌린지 기능
     - 사용자는 “쓰레기줍기, 텀블러 이용하기, 대중교통 이용하기” 등 사진으로 인증 가능한 환경 챌린지에 참여할 수 있다.
     - 사용자는 여러 명의 사용자로 구성된 환경 챌린지 방을 조회 및 참여할 수 있다.
     - 사용자는 매일 현장에서 즉석으로 찍은 사진으로 환경 활동을 인증한다.
     - 각 인증 사진은 환경 챌린지 방에 업로드되며, 사용자들이 서로 인증사진을 승인하고, 승인 완료 시 포인트를 받을 수 있다.

개념설계안

◇ 유즈케이스 다이어그램

풍선 유즈.png

◇ 액티비티 다이어그램

풍선 액티.png

◇ 시나리오

풍선 시나리오1.png

풍선 시나리오2.png

풍선 시나리오3.png

풍선 시나리오4.png

이론적 계산 및 시뮬레이션

상세설계 내용

◇ 아키텍쳐 다이어그램

풍선 아키텍쳐.png

◇ Front-End
    - React Native 프레임워크를 이용한 애플리케이션 제작
    - TypeScript를 활용한 정적 타입 검사
◇ Back-End
    - Python FastAPI 프레임워크를 이용한 REST API 제공
    - NoSQL 기반 MongoDB를 이용한 DB 구축
◇ Infrastructure
    - Docker Container를 이용한 Backend 서버 배포
    - AWS EC2를 이용한 Backend 서버 호스팅
◇ Others
    - OAuth2를 이용한 Google/KakaoTalk 사용자 인증
    - Git/GitHub를 이용한 소스 코드 형상 관리
◇ 프론트 클래스 다이어그램

풍선 프론트.png

◇ 백엔드 클래스 다이어그램

풍선 백.png

결과 및 평가

완료 작품의 소개

작동 장면

◇ 메인화면

풍선 로그인.jpg

◇ 실행화면

풍선 실행1.jpg 풍선 실행2.jpg

풍선 실행3.jpg 풍선 실행4.jpg


관련사업비 내역서

풍선 사업비.png

완료작품의 평가

풍선 평가.png

향후계획

어려웠던 내용들

◇ Admob을 이용해 실제 광고 시청을 구현했으나, 테스트 과정에서 부정 광고 시청 등으로 인해 광고가 차단되는 등 문제가 있었다.
◇ 광고를 연속으로 여러 번 시청하면 광고가 해당 클라이언트에서 로딩되지 않는 등 문제가 나타났다 애드몹 측의 까다로운 정책을 고려해서 앱을 구현했다.
◇ Google OAuth를 통한 소셜 로그인을 구현하였으나, 로그인 과정에서 필요한 보안 요건을 충족시키지 못해 해당 구현물을 사용할 수 없었다. 이에 해당 기능을 삭제했다.
◇ Expo를 사용할 때 Development 빌드에서는 동작하지만 Release 빌드에서는 동작하지 않는 기능이 존재해 이 격차를 해결하고자 개발기간을 상당히 소모했다.
◇ Release용 앱을 빌드하기 위해 Expo의 클라우드 기반 빌드 시스템을 사용해야 했는데, 시스템 이용 대기열이나 시간당 이용횟수 제한, 40분 정도의 긴 빌드 시간 등으로 인해 개발기간을 상당히 소모했다. 이에 Expo 유료 멤버십을 사용하는 대책으로 대응했다.
◇ AWS EC2 Docker + DevContainer 설정
   서버를 개발할 때, AWS 서버 자원을 활용하고 실제 빌드 환경과 같은 환경에서 개발하기 위해 AWS EC2 내부에 Docker Container를 생성하고 그 안에서 개발을 하기로 계획하였습니다. 하지만 개발하기 위한 설정을 하던 도중 계속 원격 접속이 끊어지고 접속이 되지 않는 문제가 생기게 되었습니다. 처음에는 EC2 인스턴스 유형을 원래 사용하기로 
   계획한 t3.medium이 아닌 free tier인 t2.micro로 사용하여 단순한 리소스 부족인 줄 알고 인스턴스 유형을 변경하였습니다. 하지만 인스턴스 유형을 t3.medium으로 변경하여도 같은 문제가 계속 발생하였습니다. 이후 확인해보니 인스턴스에서 DevContainer와 개발을 위한 VSCode를 실행하는 것만으로 인스턴스에 배정된 RAM을 전부 사용하게 되어 
   생기는 문제라는 것을 알게 되었고, Swap Memory를 두어 해결하게 되었습니다.
◇ 각종 보안과 인증 기능 구현
   기본 지식이 부족하여 인증이 필요한 곳에서 어떻게 인증을 검증할 수 있는지 구현하고, 보안 기술이 필요한 부분에서 어떤 보안 기술을 사용할 것인지 구상하고 구현하는 데 어려움이 있었습니다.

차후 구현할 내용

◇ MongoDB에서 관계형 DB로 전환
   빠른 개발과 배포를 위해 비정형 데이터베이스인 MongoDB를 사용했지만, 데이터의 효율적이고 안전한 활용을 위해서는 관계형 DB로 전환하여 사용할 필요가 있습니다.
◇ 키 교환 및 인증 로직 구현
   개발 스케줄의 문제로 지도 위의 표식을 터치하여 포인트를 얻는 상황 중 광고를 보지 않는 상황에서 적절한 표식을 터치하였는지 인증하기 위해 사용하는 비밀키를 임의의 문자열로 대체하였지만, 더 안전한 서비스 운영을 위해서는 프론트엔드와 백엔드가 비밀키를 교환하는 과정이 필요합니다.
   또한 SHA256 방식을 사용하더라도 여러 개의 인증용 signature를 가지고 있다면 어느 정도 규칙성을 찾아낼 수도 있기 때문에 단순히 SHA256 해시 함수를 한 번 실행하는 게 아니라 여러 번 실행한다던가 하는 식으로의 수정도 필요할 것으로 보입니다.
◇ 기프티콘 API 연동
   프로젝트를 진행하면서 사업자 등록을 하고, 사업 아이템을 인정받아 기프티콘 API를 사용할 수 있을 때까지 시간이 많이 걸릴 것으로 예상하고 기프티콘 API를 연동하는 것은 후순위로 미루었습니다. 차후에는 구현되어야 할 기능입니다. 
◇ 기타 세부 로직 수정
   아직 몇몇 비효율적이거나 찾지 못한 오류가 있는 부분이 있습니다. 차후 수정해야 할 것으로 보입니다.
◇ 구글 로그인 추가
   기존에 추가할 계획이 있었으나 일정상의 문제로 차후 추가해야 할 것으로 보입니다

특허 출원 내용

특허 없음