해피 저금통 만들기 피드백

처음엔 이렇게 구상했었다.

https://joylee-developer.tistory.com/178

해피 저금통 만들기

 

병에 넣는 것을 시각적으로 표현하고 싶었는데 구현하다보니 내가 원하는데로 되지 않았다. 그리고 굳이 만들 필요가 있나 싶어서 삭제하고 저장한 글들을 목록으로 보여주는 식으로 만들었다.

 

완성된 해피 저금통!

https://purple402.github.io/jarOfHappiness/

해피 저금통

기능 설명 사이트

https://www.notion.so/joy-lee/9d49d506adc04cea9c613404ce1f6ef2

 

 

화면

맨 처음 로그인 화면

회원가입/정보수정을 모달에서 이뤄지도록 만들었다.

로그인 후 메인화면

로그인을 하면 사용자가 할 수 있는 행동들이 버튼으로 안내된다. 그리고 올 해 저장한 행복의 개수가 안내되며 그 아래에는 목록으로 설정한 아이콘과 작성 날짜만 나타난다. 해피저금통이 연말에 열어보는 컨셉이어서 12월까지는 내용이 표시되지 않도록 설정했다.

 

이전 년도에 작성한 행복이 있다면 (전년도인 21년 버튼이 활성화됨) 년도를 바꿔 확인할 수 있다. 작년 자료는 내가 작성한 내용까지 확인할 수 있다.

 

작성 화면

행복 작성하기 버튼을 누르면 작성 페이지로 이동한다. 내용을 적는 칸과 날짜, 아이콘을 정할 수 있도록 설정했다.

날짜는 올해 1월 1일부터 오늘 날짜까지만 설정 가능하다(미래날짜 작성불가). 아이콘은 빨간 압정(📌)이 기본값으로 설정되어 있고 버튼을 누르면 이모지를 선택할 수 있다. 특별히 설정해 주지 않아도 작성을 완료할 수 있다.

이모지 입력 라이브러리

처음 구상했을 때와 완성본 비교

(달라진 점은 빨간색으로 표시함)

	구상	실제
필요한 기능	로그인 입력받은 글을 저장 해가 바뀌면 이전 글을 확인할 수 있도록 설정한다. 글을 얼마나 저장했는지 그림으로 보여줌	구현함 구현함 구현함 그림(캔버스로 표현한 병)대신 저장한 개수를 글로 안내하고, 목록으로 작성날짜와 이모지 보여줌
로그인 기능	firebase사용 친구 태그가 가능하면 프로필 있으면 좋을듯	firebase사용함 친구 태그 기능 구현하지 않음 (꼭 필요하지 않은 기능 삭제)
입력받은 글을 저장한다	날짜 입력받음 텍스트 입력받음(짧은글)	날짜 입력받음 텍스트 입력받음(짧은글) 이모지 입력받음 -> 목록에 날짜와 함께 이모지 표시
해가 바뀌면 이전 글을 확인할 수 있도록 설정	계정과 날짜가 확인되어야 글 열람 가능 보여주는 순서 - 무작위? 날짜순?? 날짜 역순?? 볼 수 있는 글은 따로 모아두기?	로그인 한 후 목록 나타냄 / 해당년도 작성글은 12월부터 내용이 공개됨 날짜역순(최신글부터)으로 목록에 표시함 작성된 글을 년도별로 따로 확인하도록 함
글을 얼마나 저장했는지 그림으로 보여줌	병 안에 사탕이나 작은 공이 차는 그림을 만들어 보여주기? 사탕 색깔같은것 글 저장할 때 설정가능하도록 하면 어떨까? 물이 차는 모양?	작성된 글의 개수를 숫자로 안내함 이모지를 선택할 수 있도록 함 얼마나 작성했는지 개수와 목록을 보고 확인할 수 있음
기타	친구를 태그하면 내 저장소와 친구 저장소에 동시에 저장가능하면 어떨까? 홈페이지보다 어플이 더 나은가?	친구태그 기능 구현하지 않음 굳이 어플로 만들 필요가 없다고 생각해 페이지만 만듦 로딩이 오래걸려 localStorage에 년도별로 자료 저장하도록함

 

느낀점

스스로 구상한 사이트를 만들어보며 생각보다 원하는 모든 기능을 구현하는 것이 쉽지 않음을 많이 느꼈다. 핵심적인 기능만 남기고 일단 완성해보는 것이 중요하다는 것을 느꼈다. 실제로 서비스하는 사이트처럼 보이기 위해 디자인적으로도 신경을 썼다.

라이브러리를 사용하지 않고 스스로 모달창을 만들어보기도 하고, 라이브러리를 사용해보기도 하며(emoji 입력) javascript를 여러가지 방면으로 사용해보았다.