DEVOCEAN

안녕하세요! DEVOCEAN YOUNG 2기 자료구조입니다!😀

저희는 “환경 캠페인 참여유도 커뮤니티” 라는 주제로지난 4월 말부터 기획을 시작하여 11월까지 개발을 완료하였습니다!

🌱GreenDev?

🌱 환경 캠페인 참여 유도 웹/앱 서비스

저희 프로젝트의 타이틀인 GreenDev의 의미는,

저희와 같은 개발자들에게 환경 캠페인 참여가 하나의 작지만 중요한 문화가 될 것을 목표로 하고자 하는 포부를 담아 만든 단어로,

푸른 환경을 뜻하는 Green과 개발자를 뜻하는 Developer 의 합성어입니다.

주제 선정 배경

저희가 환경 캠페인 커뮤니티를 주제로 선정하게 된 배경은 크게 3가지로 이야기할 수 있습니다.

• 분산된 환경 캠페인 정보

  많은 기업에서 환경 캠페인을 진행중이지만 많은 캠페인들은 참여가 번거롭거나

  심지어는 잘 몰라서 참여율이 낮은 경우가 많습니다.

• 환경 캠페인의 긍정적인 성과

  환경 캠페인의 많은 참여는 실제로 환경 보호에 긍정적인 영향을 미칩니다.

  단순히 공익광고 등을 통해 환경 캠페인의 참여를 유도하는 것보다,

  주변인의 추천, 그리고 사용자들의 참여기록을 보여 얻는 동기부여로 인한 참여 유도가 효과적이라고 생각했습니다.

  ex) ESG 실천 캠페인: 자신의 캠페인 활동에 따른 탄소저감량을 시각화 -> 환경 캠페인 5달간 19톤 상당의 탄소를 저감

  ex) Plastic Free July Campaign: 플라스틱 사용을 줄이는 다양한 방법을 사진으로 공유 -> 전세계 약 2500만 명 이상의 참가자를 이끄는 사례

이러한 문제의식을 통해 결정하게 된 저희의 주제가 바로 “환경 캠페인 참여유도 커뮤니티”입니다.

핵심 기능 설명

1. 홈화면

먼저, 사용자가 구글, 카카오톡, 네이버, 깃허브 중 하나로 회원가입 (혹은 로그인)을 하면 다음과 같이 홈화면으로 이동합니다.

2. 모아보기

기업 혹은 개인이 기획한 다양한 환경 캠페인들을 한 눈에 조회할 수 있습니다.

또한, 키워드와 날짜를 필터링하여 원하는 캠페인만을 찾아볼 수도 있습니다

3. 캠페인 등록

사용자가 환경 캠페인을 직접 기획하여 등록할 수 있습니다.

또는, 자신이 기획한 캠페인은 아니더라도, 잘 알려지지 않은 어떤 기업의

환경 캠페인을 등록해 공유할 수도 있습니다.

4. 인증글 작성하기

자신이 참여한 캠페인에 대해 참여 인증 버튼을 눌러 게시글을 작성하면

같은 환경 캠페인에 참여한 사용자들과 교류하며

캠페인 참여 인증 글과 사진을 공유할 수 있습니다.

5. 환경 프로필 만들기

저희 프로젝트에서는 각 사용자에 대해 캠페인 참여도를 기준으로 다양한 뱃지를 발급합니다.

다양한 뱃지들을 모은 뒤에는 프로필 페이지에 있는 나무 디자인에

자신이 모은 뱃지들을 걸어 자신만의 그린데브 나무를 구성해볼 수 있습니다.

기대효과

1. 환경 문제에 대한 인식 및 관심도 상승

   다양한 환경 캠페인에 대한 정보를 여기저기 흩어지지 않고, 한 곳에서 효율적으로 수집할 수 있도록 함으로서

   비교적 쉬운 절차를 통해 환경 캠페인에 사용자들이 참여 해볼 수 있게됩니다.

2. 참여 의지 및 참여율 증대

   GreenDev 나무 프로필 꾸미기와 다양한 환경 캠페인 추천, 그리고 직접 자신이 기획한 환경 캠페인을 공유할 수 있도록 함으로서

   사용자들의 환경캠페인에 대한 흥미를 유발하고 관심도를 높일 수 있습니다.

   또한, 참여인증 게시판을 통해 경쟁심리를 유발하여 더 많이 다양한 캠페인에 참여할 수 있도록 유도할 수 있습니다.

3. 지속가능한 환경 활동 문화 형성

   데보션의 스피릿은 문화, 기술, 사람의 3가지인데요, 이중 사람을 위한, 즉 사람이 살아가기 위한 환경에 대한 문화를 형성할 수 있습니다.

데보션의 스피릿은 문화, 기술, 사람의 3가지인데요, 이중 사람을 위한, 즉 사람이 살아가기 위한 환경에 대한 문화를 형성할 수 있습니다.

특히, IT 관련 종사자라면 친숙할 잔디 UI를 통해, 개발자들, 혹은 데보션 이용자들에게 환경 캠페인의 참여가 낯설지 않고 익숙한 문화가 되도록 형성할 수 있습니다.

실제로, 저희가 기획하던 기능 중 하나가 바로 데보션의 뱃지 시스템과 GreenDev 뱃지 시스템을 연동해보는 것이었습니다.

기술

🌱 Front-End

저희가 React.JS를 기반으로 개발한 모바일 웹앱은 컴포넌트 기반 아키텍처를 통해 UI를 재사용 가능하고 관리하기 쉽게 구성하며

UI 요소들을 작은 컴포넌트로 분리하여 개발하여 유지 보수 및 개발 생산성을 높였습니다.

또한 Recoil 상태관리 라이브러리를 이용해 데이터와 컴포넌트간 공유되는 상태를 효과적으로 관리하고,

상태 업데이트에 따른 불필요한 리렌더링을 최소화하여 성능을 향상시키고자 하였습니다.

🌱 Back-End

백엔드는 SpringBoot를 이용해 개발하였으며, DB로는 MySQL, 토큰 관리용 DB로는 Redis를 사용했습니다.

이미지 저장용 스토리지로는 파일 저장에 최적화되어 있는 Amazon AWS의 S3를 사용했습니다.

우선, 서버 프레임워크로는 높은 생산성, 간편한 배포 및 운영, 탁월한 의존성 관리 등을 제공하는 Spring Boot를 선택하였습니다.

DB로는 안정적이고 확장성이 뛰어나며, 많은 수의 캠페인 혹은 게시글 데이터를 빠르고 효율적으로 처리할 수 있는 MySQL을 선택했습니다.

그리고 JWT 인증 토큰(RefreshToken) 관리를 위해 Redis를 이용했습니다.

Redis는 휘발성 데이터에 대한 빠른 액세스를 제공하는 인메모리 데이터베이스라는 점과 key-value 쌍으로 데이터를 관리하는 스토리지이므로

key에 TTL을 적용하여 만료시간을 설정할 수 있어 이를 선택했습니다.

사진 저장용 스토리지로는 Amazon의 S3를 사용했습니다.

base64로 인코딩 후 DB에 저장하는 방법은 비교적 데이터베이스의 부하와 공간을 더 많이 사용한다는 단점이 있지만

Amazon S3의 경우 대용량의 데이터를 저장하기 위해 최적화된 서비스이기 때문에 크기와 관련하여 효율적이라는 점을 고려하여 선택했습니다.

📝 ERD

🔗 페이지네이션 적용

프로젝트에서 캠페인의 목록과 참여 인증글의 데이터 양이 많아짐에 따라 정보 검색과 서버 부하 문제를 해결하기 위해 페이지네이션 기술을 적용하였습니다.

이로 인해 사용자는 원하는 정보만을 빠르고 효율적으로 조회할 수 있게 되었으며, 서버의 부하 역시 최소화되어 시스템의 안정성이 높아졌습니다.

🔗 다양한 OAuth2 provider 적용

다양한 소셜 로그인 옵션을 제공하기 위해 여러 OAuth2 provider를 적용했습니다.

구체적으로는 카카오, 구글, 네이버, 그리고 깃허브를 이용하여 사용자들이 각각의 플랫폼 계정으로 손쉽게 접근할 수 있도록 하였습니다.

특히, 카카오와 깃허브의 경우에는 구글 혹은 네이버 이메일로도 가입이 가능하므로,

동일한 이메일 주소를 사용하는 계정이 이미 존재하는 경우에는 새로운 회원가입이 아니라 로그인 처리를 하였습니다.

이러한 다양한 로그인 옵션은 사용자에게 더 편리한 접근성을 제공하고, 서비스 이용률을 높이는 데 기여하였습니다.

🌱 Android

저희는 모바일 웹 뿐만 아니라, Android에서 사용 가능한 애플리케이션 클라이언트도 제공합니다.

DataBinding을 통해 UI 요소와 데이터를 프로그램적 방식이 아닌 선언적 형식으로 결합하고자 하였습니다.

API 통신을 비동기로 구현하고 동적인 이미지 로딩을 위해 Retrofit, Coroutine, Glide 라이브러리를 활용하였습니다.

또한, Lottie 라이브러리를 이용해 사용자가 애플리케이션을 사용하며 부드럽다는 느낌을 받을 수 있도록 의도하였습니다.

🌱 Infra

저희는 Jenkins를 이용해 CI/CD를 구성하였고, 이를 통해 Docker 컨테이너 이미지를 빌드하여 서비스 배포를 구성하였습니다.

이 과정에서는 팀장이 개인적으로 평소에 집에 구축해 활용하던 리눅스 기반의 홈서버를 활용하였습니다.

개발 과정에서 저희는 각자 브랜치를 나누어 작업하고, PR을 통해 머지하는 방식으로 개발을 진행하였는데요,

PR을 통해 메인브랜치에 머지가 되면, GitHub 웹훅을 통해 Jenkins 빌드 서버가 트리거됩니다.

Jenkins 서버에서는 정해진 Jenkinsfile의 내용에 따라 Docker 컨테이너 이미지를 빌드하고 Dockerhub로 업로드하게 되는데요,

Back-End의 경우는 JDK 이미지를 기반으로 Gradle 빌드와 스프링부트 서비스의 동작이 이루어질 수 있도록 Dockerfile을 구성하였습니다.

Front-End 의 경우는, Node 이미지를 기반으로 NPM 빌드를 수행한 뒤, 정적 웹으로 빌드된 결과물을 NginX 웹서버를 통해 호스팅할 수 있도록 Dockerfile을 구성하였습니다.

이렇게, 각 프로젝트가 빌드되어 Dockerhub에 업로드된 이후에는, 별도로 구성한 배포용 서버를 통해 서비스의 배포가 이루어집니다.

🌱 사용자요청 흐름

Front-End(React), Back-End(Spring) 그리고 Redis DB 서비스를 모두 실행하는 배포 서버는 리눅스 기반의 홈서버 내부에서 Docker 컨테이너 구조로 각각 동작하게 됩니다.

이 동작은 저희가 별도로 외부로 네트워크를 오픈하지 않은 홈서버 내부 폐쇄망 내에서 이루어지는데요,

외부에서 도메인을 통해 저희가 개발한 프로젝트에 접근할 수 있도록 하기 위해, 별도로 NginX를 이용한 프록시 서버를 구성하였습니다.

Front-End와 Back-End 각각의 도메인에 따라, 프록시서버 내부에서 정해진 로컬 IP의 포트로 커넥션이 포워딩되도록 설정하였습니다.

서버에서 발급한 RefreshToken 토큰을 저장하는 Redis DB의 경우는, 외부에서 직접 접근이 필요하지 않은 서비스입니다.

따라서 별도로 외부 프록시에 연결하지 않고 Back-End 서버가 내부 폐쇄망에서 연동할 수 있도록 지정하였습니다.

반면, 대용량 데이터를 저장하는 MySQL와 사진 저장용 스토리지는 AWS 클라우드 서비스를 사용하였습니다.

데이터베이스 관리작업(모니터링, 백업)과 확장성을 고려했을 때 직접 홈서버에 사진을 위한 DB 서버를 구성하는 것보다 클라우드 서비스를 이용하는 것이 더 적합하다고 판단하였습니다.

개발 진행 방법

협업

먼저, 저희는 애자일한 방식으로 개발을 진행하고자 하였습니다.

큰 스케쥴은 GitHub Project를 이용해, 개발의 흐름을 미리 잡아둔 뒤, 각 개발 항목에 대한 상세한 내용은 그때그때 필요한대로 수정하며 개발을 진행하였습니다.

GitHub Project를 활용한 이유는, 저희 프로젝트는 FE, BE, Android의 3가지로 레포가 이루어지는데,

각 레포에 대한 진행 상황을 통합적으로 묶어 칸반보드 형태로 직관적으로 확인할 수 있다는 점이었습니다.

또한, 커밋 메시지의 형식과 브랜치 네이밍 규칙, 그리고 Issue와 Pull-Request의 템플릿을 프로젝트 진행 전 미리 구성하고 컨벤션 문서로 작성하여,

개발 과정에서 동일한 형식으로 개발이 진행됨으로써 모두가 혼동없이 각자의 개발사항을 이해하고 참고할 수 있도록 유도하였습니다.

저희가 활용한 컨벤션 문서는 다음 링크 에서 확인해보실 수 있습니다.

모든 작업 사항은 해당하는 레포의 Issue에 먼저 어떤 작업을 개발할 지에 대해 등록하고,각자 Fork한 레포 내에서 브랜치를 분기해 개발한 뒤,

Pull-Request를 통해 PM(팀장)이 코드리뷰를 하여 팀 레포의 Main 브랜치에 Merge하는 방식으로 진행하였습니다.

서로의 프레임워크와 언어에 대한 이해가 부족하더라도, 어떤 작업이 어떻게 이루어졌는지에 대해 알 수 있도록 문서화를 진행하고자 노력했습니다.

PR이 작성되면, 팀장이 직접 코드를 확인하고 문제가 없는지, 수정할 부분은 없는지에 대해 확인하였습니다.

문제가 있다면 모두 수정된 이후, 혹은 문제가 없다면 바로 팀 레포의 Main 브랜치에 Merge를 수행하였고,

Jenkins가 자동으로 트리거되어 Frontend 혹은 Backend 프로젝트의 빌드와 배포를 진행하는 절차로 개발을 진행하였습니다.

소감

• 유용민

  저는 이번 그린데브 프로젝트의 팀장으로서 PM과 인프라 구축을 담당하였습니다.

  평소에 개인 프로젝트를 하면서 간단하게 깃허브와 젠킨스를 연동해 CI/CD 구성을 해보았었는데요,

  이번 프로젝트에서도 저희 리액트 프론트엔드 프로젝트와 스프링 백엔드 프로젝트의 도커 컨테이너 빌드를 설정하고, 이를 배포하기 위한 인프라 설정을 진행했습니다.

  이번 그린데브 프로젝트를 진행하면서는 개인프로젝트를 할 때 간단히 생략하고 넘어가기 쉬운 코드리뷰나 컨벤션, 인프라 설정 등을 세세하게 맞춰보려고 노력했습니다.

  프로젝트를 진행하기 전에 회의를 하면서 깃허브 협업 설정을 하고, 커밋메시지나 브랜치, 이슈와 풀리퀘스트에 대한 컨벤션을 정했었는데,

  굳이? 싶다가도 팀원 분들이 잘 맞춰주셔서 이게 협업이구나 싶은 의미있는 프로젝트가 되었던 것 같습니다.

  프로젝트 주제에 대한 것 뿐 아니라, 협업에 대해서도 겪고 배운것이 많은 프로젝트였던 것 같네요.

  또, 워크샵과 테크데이 등 행사를 통해서 데보션 전문가분들께 직접 조언과 피드백을 받을 수 있었는데, 이것도 정말 가치있는 경험이었던 것 같습니다.

  학생 시점으로는 알기 힘든 인사이트들을 많이 얻는 경험이었던 것 같아요.

  감사합니다!

• 강승구

  저는 안드로이드 개발을 담당한 강승구입니다.

  기존에는 환경 캠페인에 관심이 없었지만 이번 프로젝트를 진행하면서 환경에 대해서 관심을 가지게 되었고

  저희 서비스를 많은 사람들이 사용할 수 있도록 계속해서 발전해 나가고 싶습니다.

  이번에 팀원들과 프로젝트를 진행하면서 제가 몰랐던 깃의 기능들을 알게되었고 저희가 개발한 프로젝트를 플레이스토어에 직접 출시하면서 굉장한 성취감을 느꼈습니다.

  또한 다양한 라이브러리와 소셜 로그인을 구현하면서 개인적으로도 많은 성장을 했다고 생각합니다.

  그리고 저희 프로젝트를 많은 사람들 앞에서 발표하고 현업에 있는 개발자 분들에게 피드백을 받는 너무 소중한 경험을 했다고 생각을 했고

  피드백을 해주신 모든 분들에게 감사하다는 말씀을 드리고 싶습니다.

• 권지윤

  안녕하세요! 저는 디자인과 백엔드 개발을 담당한 권지윤입니다.

  먼저, 이 프로젝트를 통해 기업의 환경 캠페인 정보를 검색하는 과정이 얼마나 복잡하고 시간이 많이 소요되는지 직접 경험하게 되었습니다.

  저희 서비스를 통해 캠페인들을 더 쉽게 찾고, 접근할 수 있게 될 수 있을 거라 생각하여 뿌듯함을 느꼈습니다.

  백엔드 개발하면서 겪었던 이슈를 공유하자면,

  앱과 웹 플랫폼 모두에서 다양한 소셜 로그인 기능(카카오, 구글, 네이버, 깃허브)을 구현하는 데 있어 앱(안드로이드)와 협업은 처음이라 시행착오가 있었습니다.

  웹과 비슷하게 딥링크로 RestAPI 방식으로 사용자 인증 후 서버 인증 토큰(accessToken, refreshToken)을 발급하려고 했는데 구글, 카카오, 네이버는 정상 동작하지 않았습니다.

  그래서 결국 구글은 firebase를 통한 인증 방식으로 하였고,

  카카오와 네이버는 SDK 방법으로 앱에서 사용자 인증 후 사용자 정보를 넘겨 서버에서 서버 인증 토큰을 발급하는 형식으로 진행했습니다!

  또한, 저희 팀은 테크 데이에 데모데이를 진행했는데요, 현장에서 직접 서비스를 사용하시고 피드백을 받을 수 있어 데보션영 덕분에 소중한 추억이 되었습니다.

• 장현정

  저는 모바일 웹 프론트엔드 파트를 담당한 장현정입니다.

  이번 그린뎁 프로젝트를 진행하면서 기술적인 측면 뿐 아니라 사회적 영향력을 행사할 수 있는 기회를 경험할 수 있어 의미있던 프로젝트가 되었던 것 같습니다.

  특히 이번 개발 프로젝트는 지금까지 했던 프로젝트와 비교했을 때 훨씬 체계적으로 진행되고

  팀원들과의 소통도 원활하게 이루어져 프로젝트를 진행하면서도 협업, 기술적인 측면 등 다양한 면에서 배울점이 많았던 것 같습니다.

  마지막으로 데보션 전문가들에게 받은 피드백, 개발을 진행하면서 얻은 코드 리뷰 등은 기술적인 부분에 있어 많은 도움을 얻고 성장할 수 있었던 기회가 되었던 것 같습니다.

  이런 피드백들은 앞으로의 프로젝트에서도 더 나은 결과물을 만들 수 있는데 도움이 될 것 같습니다. 감사합니다.

결과물

🌱 GreenDev Service

🔗 URL : https://greendev.dev-lr.com/

🔗 Google Play Store : https://play.google.com/store/apps/details?id=com.devocean.greendev

😸 GreenDev GitHub Repository : https://github.com/devocean-green-dev

🎤 DEVOCEAN Tech Day Presentation : https://youtu.be/pJ8RYOsAuDk?si=1RfIZHC9OdNt-Msg