🎂 (덕질)생일축하 웹사이트 만들기(ง •_•)ง

프롤로그

벨로그를 만든 지 얼마 안되서 '트렌딩'과 '최신'메뉴를 둘러보다가,,,, 어떤 분이 친구에게 생일 선물이 웹사이트를 선물한 걸 포스팅한 걸 보았다.(⊙o⊙) 너무 좋은 아이디어라고 생각이 들었고, 한 번 나도 해보기로 했다....! 근데 지인보다는 내가 좋아하는 연예인?가수?의 생일 팬페이지 면 좋을 것 같다는 생각이 들어서 개발에 돌입했다.

계획

디자인

우선 디자인부터 해야하는데,,,, 넘나 막막한거다ㅠㅠ 그런데 안그래도 요즘 자바스크립트로 만드는 다이나믹한 인터렉션에 관심이 생겨(사실 예전부터 있었음 ㅎ.ㅎ) 수강신청해놨던 '1분코딩'강의를 들으면서 만들어보기로 했다.

메뉴구성

1. Home : 말 그대로 인덱스 페이지로 휘황찬란한 인터렉션을 넣어보는 거 목표로 했다.
2. Letter : 친구의 아이디어로 만든 메뉴로, 팬들이 사이트로 들어와서 생일축하메세지를 남길 수 있도록하고 실제 아티스트에서 전해주면 너무 좋을 것 같다는 생각이 들었다:)
3. Ref : 약간 끼워넣으려고ㅋㅋㅋ 한 메뉴이기도 한뎈ㅋㅋㅋ 영상, 사진 등 출처가 예민한 부분이 있지 않을까 우려해서 출처url를 모아논 페이지를 만들었다.개발스택정말 순수하게 HTML, CSS, Javascript 뿐이다. 회사에서 아직 jQuery를 쓰고 있는 터라(최대한 javascript로 변경중임!), 많이 쓴다는 React는 혼자서 개인 프로젝트로 한 두 번? 만들어 본 적뿐이 없어서리,,,, 정말 날 것으로 만들어보도록한다.기타 기술
4. 배포 : 역시 github pages로 배포한 후 도메인을 연결하는 방식!
5. 도메인 : https://www.freenom.com/ 에서 무료로 도메인을 구했다.
6. Disqus : https://blog.disqus.com/ 에서 무료로 소셜미디어 로그인을 통해 댓글기능을 넣을 수 있다.
7. SEO : (무슨 정성인데) 메타태그 다 넣고, 구글/네이버에 색인요청까지했닼ㅋㅋㅋ 잠깐 이벤트사이트라 봇이 긁어갈 시간도 없이 사라질 예정;)
8. GA : 그냥 누가 들어오나 궁금해서 심어놓음.

결과

Home

PC

Mobile

Letter

PC

Mobile

Ref

이건 별거 없어서 이미지 패쓰.

Google Analytics

ga 확인결과 K-POP은 참 대단하다! 👍

 

모바일 우선적으로 맞춰야되는구먼,,,,

여담

생일 전날 배포하고 사실 저렇게 많은 사람들을 모아 댓글달게 하기란 어려운 일이라,,,, 팬들이 있는 오픈채팅방에 가서 글을 남겼으나,,,,!

 

사람들이 오지 않는다.... 그래 나 혼자하고자한 프로젝트였어....😥라고 생각하다가 어떤 분이 갑지가 url을 트위터에 올려도 되냐고 했다. 그럼요! 당연 YES😎

 

그러더니 몇 시간만에 외국인 팬들이 몰려옴 ㅋㅋㅋㅋㅋㅋㅋㅋ 감사합니다....👍

여담2

생일당일 사이트가 '안전하지 못한 사이트' 라며 막아버렸다.... 사파리에서는 들어가지던데 아무튼 지금 사파리도 안되는 것 같다. 찾아보니 Disqus와 관련된 보안문제로 보인다. 뭐 생일은 지났지만 뻘겋게 뜨니 쵸큼 맘이 아푸다....(세부정보 눌러서 안전하지 않게 들어갈 순 있다.😂)