월간신천팟(2)

기능 소개

• 아카이브

매우 단순한 기능이다!

우리가 그동안 뭘 했는지 글로 작성하고, 해당 링크를 걸어주면 언제든 다시 볼 수 있다.

월간 신천팟의 초기화면, 신천팟이 매달 무엇을 했는지에 대한 링크를 걸어 클릭하면 블로그로 이동할 수 있게 만들었다.

아직 링크가 존재하지 않는 달을 클릭하게 되면 동적 애니메이션으로 아직 링크가 없다고 알려준다.

 

• 투표

월간 신천팟 서비스에서 가장 중요한 투표 기능이다.

접속하게 되면 그 달의 후보가 나온다. 맘에 들지 않는다면 +버튼을 눌러 새로운 후보를 담을 수 있다.

투표를 마무리하게 되면 투표한 인원 수가 오른다. 아직 투표를 마무리한 사람이 없어 0/8임!

이후 후보의 오른쪽 공간엔 멤버별 프로필사진을 담을 생각이다. 아직 프로필사진이 없어 대체사진으로 등록..

 

앗.. 여기서 깨져버리다니..

안타깝게도 등록 버튼이 깨져버렸다;;

전부 체크했다 생각했는데 실행해보니 이런 모습을 보면 더 꼼꼼한 검토가 필요해보인다.

암튼 저 ‘하고싶은거 말만해’부분에 하고싶은 것을 적고 등록하게 되면 후보로 등록이 된다. 본인이 제안한 항목은 자동으로 지지자로 들어가게 된다.

 

• 날짜 투표

로그인 시 본인의 이름이 자동으로 기록되고, 가능한 날짜를 작성하면 등록이 된다.

사실 달력을 두고 체크하는 방식으로 만들고 싶었지만 타임어택 이슈로 구현하지 못했다ㅠ

그냥저냥 기능만 구현하도록 만들었다. 일단 돌아가면 그게 된거죠 ㅋㅋ

• 투표 결과

꽤 오랜 시간을 투자한 기능이다.

처음 생각으로는 이 사이트에 들어가게 되면 자동으로 사람들이 투표한 날짜를 불러와 날짜별로 분류해 이름을 띄워주는 방식으로 제작하려고 했지만 생각만큼 쉽지 않았다..

 

그런데 지금 생각해보니 이름들을 띄우는 것이 좀 비효율적인 것 같다.

날짜 밑에 👤 이모지와 그 날짜를 투표한 사람들의 수를 보여주고, 클릭 시 누가 투표했는지 보여주도록 제작하면 되겠다.

 

또한 DB에 저장 시 고칠 점도 보인다.

현재는 투표자 이름과 그 사람이 가능한 날짜를 리스트에 저장하는 것으로 제작하였는데, 아래처럼 미리 월별 파일에 1~31일과 빈 리스트로 이루어진 데이터를 만들고 가능한 날짜 POST요청 시 투표자 이름을 리스트에 담는걸로 구현해보고 싶다.

{
month: 11
date:{
      1: [],
      2: [],
...
      31: []
}

이게 더 비효율적이려나..? 조만간 누군가 한명 붙잡고 물어봐야겠다..

 

01

초기화면과 버튼을 누르게 되면 나오는 모습.

 

• 로그인

먼가 템플릿이 익숙하다면 정답이다.

날짜를 투표하는 템플릿 제작 시 로그인 템플릿을 그대로 사용했다 ㅋㅋ

특이사항으로는 신천팟 8명만이 사용할 어플이기 때문에 회원가입은 불가능하고, 아이디는 본인의 이름이다.

나중에 어플로 구현 시에는 넷플릭스 초기 화면처럼 8명의 캐리커쳐가 들어간 버튼을 만들고 클릭 시 비밀번호 입력 칸이 나오도록 하고 싶다. 어차피 우리끼리 쓸건데ㅋㅋ

 

 

 

 

 

 

8. 엔딩

많다면 많고 적다면 적은, 8명의 고정 사용층을 타겟으로 한 서비스를 만들어 보았다.

모든 서비스는 사용자가 없으면 존재하는 이유도 없다고 들은 적이 있다. 불멸의 서비스를 만들기 위해 더 열심히 해야겠다ㅋㅋ

결과물이 썩 맘에 들진 않지만 어찌됐건 마무리가 되었고, 12월 중순쯤 공개하고 싶다. 그 전에는 학업과 스터디 활동으로 인해 오류가 있어도 고치지 못할 것 같아서 그렇다.

제작 후기로 마무리!

 

 

---

제작 후기

2달 전, 블로그를 만들고+배포하고 나서 몇 가지 문제점을 깨달았다.

첫째, 요즘 시대엔 컴퓨터로 접속하는 사람보다 휴대폰으로 접속하는 사람이 훨씬 많다. 싸이월드를 오마쥬한 나의 블로그는 고정된 크기를 가지고 있었고, 그래서 휴대폰으로 접속하게 되면 글자 크기가 깨지고 휴대폰의 범위를 초과하는 등 그리 유쾌하지 않은 경험을 하게 된다. 나의 블로그에 접속하는 대부분의 사람들이 카카오톡 링크나 인스타그램 프로필을 통해 들어오는데, 대부분 휴대폰으로 접속하게 된다. 링크를 눌렀는데 깨진 화면을 보게 되면.. 나같아도 바로 나갈 것 같다 ㅋㅋ

둘째, 첫째 이유를 포함하여 내 블로그에 방문하는 사람들이 매우 적다. 나름 재미있고 즐길 만한 블로그를 만들기 위해 게임과 방명록 등 비회원도 이용 가능한 서비스를 만들었지만 블로그는 블로그였다. 굳이 내 글을 읽으러 들어올만큼 컨텐츠가 흥미로운 것도 아니었고, 시간 때울 때 볼 만큼 편리하지도 않았다.

이러한 두 가지 분석을 바탕으로 아래 새로운 서비스 제작 시의 규칙을 떠올리게 되었다.

• 휴대폰 중심의 반응형 웹 사이트를 제작하자.
• 고정 유저층이 있는 서비스를 만들자.

 

이는 8명의 고정 유저층이 모여있는 신천팟에 적합하였고, 때마침 자주 모이지 않는 우리가 한 달에 한 번씩 만날까 하는 주제로 이야기가 나왔었기 때문에 곧바로 제작에 들어가게 되었다.

3일이라는 시간을 잡은 건 해커톤을 참고해 보았기 때문이다. 생각보다 길다면 길고 짧다면 짧은 기간인데, 혼자 하려니 마지막 날엔 좀 퍼져서 생산성이 매우 떨어졌다. 또한 새벽 내내 코딩을 하는 것보단 충분한 잠을 자고 난 다음에 깨끗한 정신으로 코딩을 하는 것이 더 생산성있고 즐겁게 코딩을 할 수 있었다. 나쁘지 않은 경험이었고 또 새로운 아이디어가 떠오른다면 비슷한 기간을 잡고 개발을 할 것 같다.

 

 

좋았던 점

생각이 떠오르고 이렇게까지 빠르게 실행에 옮긴 건 처음이 아닐까 싶을 정도로 빠른 시일 내에 끝냈다.

보통 이런 생각이 있으면 메모해두었다 며칠 뒤에 만드는 것을 잊어버리는 경우가 많았는데, 이번엔 왠지모를 자신감이 생겨 곧바로 제작에 들어갔다.

그래도 8월 이후 오랜만에 리액트를 쓰는 거라 헷갈리는 것도 많이 있었지만 복습한다 생각하며 각종 블로그들을 읽으며 다시 공부했다. 이 프로젝트 없이 바로 웹심화 스터디 프로젝트를 시작했다면.. 진짜 끔찍하다ㅋㅋ

express와 mongoDB로 이루어진 백엔드 구현 시, 왜인지는 모르겠지만 이전에 작성했던 코드로 mongoDB와 통신이 잘 되지 않았다. 때문에 조금 다른 방식으로 코드를 짜 보았고, 이 방식이 더 코드가 이쁜 것 같다!

나빴던 점

클래스 명이 굉장히 뒤죽박죽이다. 네이밍 규칙을 생각하고 짜지 않아 어느 순간 감당이 안될 정도로 길어졌고, 개발 전에 꼭 해야 할 것들 목록에 담게 되었다.. 개발자에게 코딩보다 작명이 더 어렵다는 말을 들은 적이 있는데 사실인것 같다 ㅋㅋ

노트북으로 개발하고 휴대폰에서 사용하는 방식은 익숙하지 않아 약간의 버그가 있었다. 나름 다양한 휴대폰으로도 잘 보이도록 만든 것이라 생각이 들었지만, 글자가 깨지고 컨텐츠가 화면 밖으로 튀어나가는 등의 문제가 있어 고치느라 조금 불편했다. 2학기가 끝나고 플러터를 배워 휴대폰으로 사용하는 서비스는 꼭 앱으로 만들어보고 싶다.

데이터베이스가 효율적이지 않다. 스키마를 세세하게 짜지 않아 생긴 문제이다. 중복된 데이터가 많이 있고 한 눈에 보기 힘들다. 나중에 효율적인 데이터베이스는 무엇인지 공부해봐야겠다.

 

나중에 오류 수정 및 사용 후기들로 돌아올게요!