본 포스팅은 2020년 하반기에 진행한 개인 프로젝트 [UNIVVOTE]에 대한 회고 기록입니다.
프로젝트 명 : UNIVVOTE
프로젝트 기간 : 2020.10 ~ 2020.11 (2개월)
프로젝트 설명 : OO대학교 온라인 선거 홍보 서비스
1. UNIVVOTE 프로젝트를 하게 된 이유
1-1. 왜 프로젝트를 하는가
많은 개발자들이 프로젝트를 통해 새로운 기술과 지식들을 접하는 기회를 얻는다고 생각했습니다. 웹 서비스가 세상에 나오기까지 어떤 과정들이 필요한 지 알기 위해서는 직접 만들어보는 것이 도움이 될 것이라 판단하여 직접 배포하여 사용자를 발생시키는 것을 목표로 서비스를 기획하기 시작했습니다.
1-2. 왜 선거 프로젝트를 하는가
혼자 프로젝트를 진행하기로 결심하고, 나에게 혹은 내 주변에 어떤 서비스가 필요할 지 고민했습니다. 당시, 코로나가 유행한 첫 해였기 때문에 11월에 대학 선거가 온라인으로 치뤄질 수 밖에 없다는 것이 예상되었고, 각 학생회들이 온갖 SNS로 자신들의 선거를 홍보를 하고 일반 학생들은 분리된 채널에서 일일이 내용을 확인하는 모습들이 그려지며, 이런 정보의 분산 문제를 해결할 수 있는 서비스를 만들자는 것이 선거 프로젝트의 시초가 되었습니다. 있으면 좋은 것보다는 필요한 것을 제공하는 것이 사용자를 사로잡을 수 있다는 마케팅 동아리에서의 배움을 기반으로...
사실, 유권자인 학생들의 무관심으로 인한 낮은 투표율 또한 많은 대학들이 가지고 있는 문제점 중 하나였는데, 무관심이라는 문제는 표면적으로 홍보의 문제라고 생각될 수 있지만, 그 너머의 본질적 원인을 생각해보면 개인주의적 문화의 발달로 학생회라는 집단의 소속 필요성을 느끼지 못하기 때문이거나 집단의 운영 방식이 학생들의 수요를 충족시켜주지 못하기 때문이 아닐까 싶었습니다. 이는 서비스로 해결될 수 있는 부분이라기 보다는 조직에 대한 근본적 변화가 필요한 부분이라 외부의 서비스로는 해결할 수 없다고 판단했고, 따라서, 해당 프로젝트의 주요 목표로 여기지 않았습니다.
2. UNIVVOTE 프로젝트의 시작
2-1. 기획
해결 해야할 문제
문제 : 선거 단위마다 다른 SNS 채널 운영 및 홍보. 즉, 선거 정보에 대한 접근성 저하
해결 방안 : 선거 홍보를 위한 통합된 서비스 제공
어떤 기능을 넣을 것인가
해당 서비스의 핵심 기능은 분산된 선거 정보를 통합해서 제공하는 기능이지만, 해당 기능만 제공하기에는 너무 간단하고 작은 서비스가 될 것 같았습니다. 따라서, 투표율 증가에도 기여할 수 있는 기능을 추가적으로 기획해보았습니다.
1) 선거 단위별 공약 정보
- 유권자 입장에서 중요한 정보는 내가 투표해야할 선거 단위의 후보자 정보와 공약 정보이므로, 해당 정보들을 쉽게 확인할 수 있도록 제공합니다.
2) 총학생회 선거 예상 투표율
- 안전한 투표 기능을 제공할 보안 기술이 없었기 때문에 예상 투표율 기능을 추가하여 여론조사처럼 비투표 기간에 예상 득표 비율을 확인할 수 있는 기능을 제공합니다.
3) 학과별 예상 참가율
- 총학생회 예비 투표에 참가한 학생들의 학과를 기준으로 어떤 학과가 선거에 관심이 많은지 확인하고 비교할 수 있는 기능입니다. 학과별로 긍정적인 경쟁을 이끌어낼 수 있다고 예상했습니다.
2-2. 디자인
빠르게 프로토타입을 개발하는 것이 목표였기 때문에 명확한 디자인 과정 없이 머리 속 아이디어를 생각나는대로 디자인했습니다.
- ppt로 레이아웃과 이미지, 폰트 정도만 대략적으로 구성하여 개발하면서 적절한 디자인을 수정하며 진행했습니다.
- 유권자들의 접속 수단이 대부분 모바일일 것으로 예상하여 모바일 화면에 최적화하여 디자인했습니다.
3. UNIVVOTE 서비스 개발
Skill
- VanillaJS + Express(NodeJS) + Mysql
- Hosting : heroku
이슈
개발 과정에서 아주 많은 이슈들을 발생시켰고, 또 해결해야 했지만, 그 중 일부를 각각의 포스팅으로 나누어 작성할 것입니다. 소개할 이슈에 대해 간단히 제목만 나열하자면 다음과 같습니다.
1) animation 적용 범위를 어디까지 설정할 것인가 (첫 로딩 시, 애니메이션으로 fadein이 발생시키려했음)
2) DB 데이터 fetch 성능 이슈
- db 데이터를 서버에서 받아 JSON으로 변경, javascript에서 JSON 파일로 저장하고, 저장된 JSON파일을 사용했는데, 이는 명백히 잘못된 방식입니다.
이유 1. 페이지 접속 시, js 코드가 실행되면서 통신이 성공하면 파일이 저장되는데, 새 파일이 아닌 이전에 저장되어 있던 파일의 데이터로 먼저 로드됩니다.
이유 2. db에 문제가 생겼을 경우, 서버에 저장된 json 파일이 유지된 상태라면, 로드는 가능합니다. 하지만, db에 문제가 있으면 어차피 CRUD가 안되니까 차라리 에러를 발생시키는게 더 현명합니다. 에러 없는 척 정상 로딩 시키는 것이 더 위험합니다.
3) CSP(Content Security Policy), heroku 배포 시, 컨텐츠 보안 정책 문제로 외부 라이브러리 사용 불가
(charts 라이브러리는 설치해서 사용, axios는 XHR 직접 구현으로 수정)
4) 좋아요 버튼 구현
1) 선거 팀마다 공약이 6개 있고, 공약마다 좋아요 버튼이 1개씩 있다.
2) 특정 좋아요를 누르면, 특정 선거 팀의 특정 공약의 좋아요 개수가 증감해야하고, 빨간색 <-> 파란색 변화.
3) 이 때, 로그인된 계정에 따라 좋아요를 눌렀는지 활성화, 비활성화를 저장해서 로그인된 계정으로 로드했을 때, 해당 계정의 좋아요 정보에 따라 브라우저에 좋아요 상태를 출력해야한다.
4. UNIVVOTE 배포와 공식 홍보 제안
- 10월에 기획과 개발을 시작하여 11월 초 기획했던 기능을 모두 구현한 MVP를 개발했고, Heroku로 배포한 제품을 가지고 교내 선거관리위원회장들에게 개별적으로 연락을 하여 미팅을 제안했습니다. 저의 목표는 중앙자치기구의 선관위에서 공식적으로 해당 서비스를 홍보해 보다 효율적으로 많은 사용자를 발생시키는 것이었습니다.
5. 결과
선관위도 처음 온라인으로 선거를 진행해야하는 상황에서 선거를 위한 플랫폼의 필요성을 느끼고 있었습니다. 다만, 미팅이 진행된 시기는 선거가 임박한 시점이었고, 관련 회의가 모두 끝난 상태였기 때문에 선관위가 해당 서비스를 검토할 시간이 부족했습니다. 선관위가 아닌 일반 학생이 개발한 플랫폼의 사용과 관련한 선거 세칙에 대한 해석도 논의가 필요한 상황이었고, 여러모로 공식적인 절차를 거치기에는 무리가 있다는 의견을 받았습니다.
결론적으로 공식적 활용이나 홍보용으로는 채택이 불가능하게 되었지만, UNIVVOTE 프로젝트는 다음 해인 2021년 선거를 위한 프로토타입이라고 생각했기 때문에 선관위와의 미팅을 통해 최대한 많은 피드백을 받기 위해 노력했고, 일반 학생의 관점에서는 고려하기 어려웠던 선관위의 입장에 대한 인사이트를 얻을 수 있었습니다. 당시 선관위원장들에게 받은 피드백을 요약하면 다음과 같습니다.
1) 선거 정보를 입력하고 관리할 수 있는 주체가 개발자인 것이 아쉽다. 즉, 선관위가 직접 공약 같은 게시글을 관리할 수 있었으면 좋겠다.
2) 예상 득표율이나 공약별 좋아요는 후보자들에 대한 여론을 형성하여 선거 결과에 영향을 줄 가능성이 있어 해당 서비스의 필수 기능이 아니라면 제거하는 것이 좋을 것 같다.
공식적인 홍보가 무산되고 아쉬움이 남아 스스로 SNS에 공개된 선거 정보들을 모아 서비스에 필요한 정보를 채웠습니다. 온라인에 공개된 정보를 비상업적인 목적으로 활용하는 것이 법적으로 문제가 되지 않는다는 것을 확인했고, 교내 커뮤니티에서 개인적으로 홍보를 진행했습니다. 일부 사람들의 칭찬과 더불어 받은 피드백들로 내년에는 보다 발전된 기획과 기술로 서비스를 만들어보겠다는 다짐과 함께 UNIVVOTE 프로젝트를 종료하게 되었습니다.
'Development > Front-End' 카테고리의 다른 글
| [Review] 실무에서 바로 쓰는 Frontend Clean Code (0) | 2022.06.11 |
|---|---|
| [Review] FEConf Korea - 상태관리, 이제 Recoil 하세요 (0) | 2022.06.10 |
| Javascript Style Guide 와 ESLint에 대한 이해 (0) | 2021.11.09 |
| 반응형 웹(Responsive Web)의 이해 (0) | 2021.10.11 |
| 웹 접근성(Web Accessibility)의 이해 (0) | 2021.10.10 |