아이디어톤_GreenLog🌿(나만의 봉사활동 기록하기)가 만들어지기 까지

멋사에서 주최하는 아이디어톤이 시작됐다! 아이디어톤은 구성된 팀원들과 낸 아이디어로 웹 서비스 프로젝트를 구현하는 것이었다. 

구현과 배포가 끝나면 유튜브에 업로드해서 전국에 있는 멋사9기들이 리뷰하고 괜찮은 아이디어에 투표하는 방식이었다.

이때 해보고 싶은 아이디어 가지고 개발을 해보고 싶다는 생각이 들었다.

새로 구성된 팀원들과 아이디어 회의를 하기 시작했다.

1. 회의시작

우선, 브레인스토밍으로 각자 원하는 분야 쪽으로 회의를 시작했다. 공통된 것이 '환경'이라는 주제였는데, 이를 어떻게 엮으면 좋을까 생각했다. 팀원이 3명이었는데, 우리 세명 모두 환경문제에 대해서 중요하게 여겼다. 회의 하다가,

환경을 더 아끼고 환경문제에 더 관심을 가질 수 있게 하는 취지로 프로젝트 방향을 이끌어나가자 얘기를 나눴다. 

2. 자료조사

환경에 도움이 되는 활동에는 무엇이 있을까? 각자 조사를 해보니,  플로깅 : 조깅하면서 보이면  쓰레기를 줍는 활동, 채식 : 육식을 먹지 않음으로써 환경에 문제 되는 원인을 줄이고자하는 취지, 용기내 챌린지: 배달용기 등 일회용 배달용기를 줄이기, 고고 챌린지: 일상생활 속 플라스틱 사용 줄이기 정도.. 로 간추려 내었다.

하지만 아무래도 환경 문제를 좀 더 많은 사람들이 관심을 가지도록 하게끔 하기는 쉽지 않다. 쉽게 이목을 이끌만한 수단이 없을까 생각했는데, 인스타 그램이 생각났다. 사람들은 자기가 했던 경험 들을 인스타나 SNS에 업로드 하는 것을 즐긴다. 이 점을 활용해서 환경봉사활동 기록 웹 서비스를 개발하는 것으로 주제를 정할 수 있었다.

3. 기능 구성

일단 웹 서비스를 만들기 전에 페이지 단위로 기능을 구성해보기로 했다.

✅ 1. Main Page : 사용자가 웹 사이트 홈 화면에 들어왔을 때 화면

2. 로그인 기능 : 기본적인 회원관리 로그인 로그아웃 회원가입 기능

✅ 3. 마이페이지 : 깃허브 잔디밭기능을 구현해서 내가 얼마나 환경활동을 했는지 한 눈에 보이게 구현 => 특별하게 필요한 기능: 캐러셀

4. 게시글 작성/조회/view : 사람들은 인스타그램 감성을 좋아하기 때문에 약간 인스타그램 이랑 비슷한 웹 뷰로 구성하면 괜찮을 것 같아서 제안 후 결정! => 특별하게 필요한 기능 : 캐러셀

5. 회원 등급 : 등급이 있으면 좀 더 적극적인 참여를 유도할 수 있기 때문에 만든 기능

전과 다르게 구현할 때 색다른 부분은 캐러셀을 구현하는 것이다. 사용자가 쉽게 글을 조회할 때 화살표 버튼을 누름으로써 좀 더 편하게 게시글을 넘기면서 볼 수 있는 기능인데, 이 부분은 새롭게 도전하는 부분이었다. 나는 마이페이지와 메인페이지 파트를 맡았다.

아래 사진과 같은 느낌으로 캐러셀을 구현 했다.

마이페이지 캐러셀 구현

4. 구현과정

항상 하던 대로 새로운 것을 구현할 때는 구글링이 중요한 것 같다. 하지만 구글링을 잘! 해야했다. 내가 원하는 정보가 나오기 위해서는 영어로 키워드가 들어가도록 간단하게 검색해야 결과가 필터링 되어서 잘 나오더라.

나는 마이페이지를 구현해야해서, 회원 프로필 파트, 캐러셀 기능을 통해서 회원이 올렸던 post글을 정렬하고, 회원이 올렸던 게시글에 담긴 업로드 날짜 정보를 통해서 잔디밭 기능 구현하기인데 깃허브 처럼 많이 올릴 수록 색이 진해지는 기능까지는 구현하지 않았다.  이렇게 크게 나뉘었다.

메인 페이지도 구현했던 것 같은데 크게 어려움은 없었고 좀 더 눈이 덜 피로하도록 메인 페이지 사진 위에 어둡게 또 배경을 한 층 깔아서 구현했다. z index를 사용했던 것 같다.

가장 어려웠던 점은

아무래도 처음해본 캐러셀 구현하기 였다. 다행히 구글링을 해보니 이미 누군가가 만들어 놓으신 캐러셀이 라이브러리가 있어서 설치를 하고 내가 원하는 모양이 나오도록 개발자 도구로 보면서 이리저리 디자인을 바꿨다. 내가 만들어보고 싶었던 것을 구현하니 즐거웠다. 최근 잠깐 마음 속에 잠들어 있던 코딩의 재미가 깨어난 기분이었다.

내가 맡은 캐러셀 기능에서 생각보다 깔끔하게 잘 구현했다. 팀 원 한 분도 캐러셀 기능을 구현하셨는데, 내가 구현 한 파트보다 어려운 느낌이 있었다. 라이브러리를 다운 받아서 쓰다보니 사진이 여러 장 업로드 되면 자동으로 점점점으로 버튼이 생긴다. 그 버튼이 사라져서 보이질 않았다 ㅋㅋ그래서 같이 인스타 웹 뷰를 참고하면서 개발자 도구로 사라진 버튼을 찾으면서, 목표하는 웹 뷰로 맞춰나갔다. 

가장 아쉬운 점은 잔디밭 기능 구현파트 였는데, 깃허브 처럼 아주 멋있게 하고 싶었지만 마무리까지 시간이 부족하게 남았고 팀원들도 작은 에러 파트가 생겨서 같이 에러 해결 및 수정에 더 집중했다.

5. 배포

구현을 마무리 하고나서 오류 사항이 없는지 확인한 뒤, 배포를 했다. 당시 헤로쿠를 통해서 배포를 했던 것으로 기억한다. 멋사에서 배웠던 방법으로 헤로쿠로 배포를 완료했다.

6. 웹 서비스 소개 영상만들기

사람들에게 소개하기 위해 유튜브로 소개 영상을 만들었다. ppt 로 발표 구성을 만들고 화면 녹화를 통해 소개영상을 만들었다. 발표 전에 배포를 하고 사람들이 직접 웹 사이트를 방문할 수 있게 만들고 나서 투표를 진행했다.

웹 서비스 소개 영상

아이디어톤 - GreenLog 웹 서비스 소개영상

프로젝트 깃허브 링크

GitHub - somm12/greenlog

느낀 점

배포를 할 때 대부분 비용 없이 서버로 배포를 하려다보니 접속자가 많아지면 웹 사이트 접속이 어려워 진다는 점이 아쉬웠다. 조금 비용을 투자해서 개발을 한다면 좀 더 퀄리티가 살지 않을까 생각했다. 

내가 그리고 우리 팀원끼리 원하는 서비스를 만들게 되었는데, 당연히 개발자 입장으로서는 내가 원하는 서비스를 개발할 수 도 있지만, 이게 상업적인 목적으로 관점을 바꾸면 소비자가 원하고 필요로하는 서비스가 필요하겠구나 생각이 들었다. 우리처럼 환경에 관심을 가진 사람들이야 있긴 하겠지만, 많은 사람들이 관심을 가지고 있을 것 같지는 않아 보인다. 기업관점으로 생각한다면, 소비자가 원하는 것을 생각해야 한다는 것을 알 수 있었다. 소비자가 원하고 필요로 하는 것을 알아내서 개발해야 기업도 소비자도 윈윈할 수 있는 것 같다.. 이제는 소비자가 원하는 것 세상이 원하는 것이 어떤 것일지 생각을 하는 게 중요하다고 느꼈다.

우선, 이렇게 여러 사람들과 개발 동아리 활동을 할 수 있어서 너무 좋았고 내게 이런 기회가 생겨서 너무 감사했다. 동료들과 같이 고민하고 같이 공부하고 같이 문제 해결을 하는 시간이 즐거웠다. 갑자기 생긴 기회로 미국으로 3개월 간 해외 교육 프로그램에 참여하게 되어서 멋사 9기를 끝까지 수료하지 못하고 활동이 끝났지만 이렇게 마지막으로 아이디어톤에 참여 할 수 있어서 좋았다. 멘토님과 같이 참여한 아기사자 9기 님들께 모두 감사하다🥺