🎂 친구생일 기념 웹사이트 만들기

안녕하세요 반갑습니다 ㅎㅎ 맨날 기록용으로 벨로그 쓰다가 오랜만에 제대로 된 글을 적어보는 것 같네요,,ㅎㅎ😌

며칠 전 가장 오래 알고 지낸 친구의 생일이었습니다 ^^.. 게으른 전.. 생일선물 준비를 못했죠 ^^ㅎㅎ

신박하게 선물을 정할 방법이 없을까 고민하다가 친구 생일을 위한 웹사이트를 개발했습니다. ㅎㅎ 선물 고르는 것이 너무 힘들어서 그냥 대충 선물 랜덤으로 고를 수 있는 화면만 보여줘야지 생각하면서 시작했는데,, 너무 허전해서 이것저것 그림 그려서 넣고 별거 없는 기능도 넣게 됐네요...ㅎㅎ

그래서 그런지 많이 허접합니다 ㅎㅎ

개발 공부한 사람 또는 개발자가 보면 너무나도 간단한 html로 충분히 만들 수 있는 웹 수준이라 부끄럽지만 친구는 꽤나 감동했다고 말해줬습니다..ㅎㅎ(물론 반강제적)

개발스택

간단하게 개발 스택을 공개하자면 angular 기반이고 배포는 깃허브로 간단하게 했습니다. (깃허브 짱)

사실 css 크게 건들이기 귀찮아서 기본적인 틀은 angular material 사용해서 쉽게 개발했습니다 ^^

평소와 같이 작업중인 파일들을 깃허브에 올리고 Settings > GitHub Pages 에서 배포를 시도 했는데 404 페이지가 계속 떴습니다. 검색해보니 angular-cli-ghpages 를 이용해서 쉽게 배포할 수 있었습니다 ㅎㅎ

*참고 https://alligator.io/angular/deploying-angular-app-github-pages/

엄청 간단합니다!

ng add angular-cli-ghpages 

ng deploy --base-href=/## PROJECT_NAME ##/

이런식으로 deploy를 해주면 알아서 gh-pages 라는 브랜치를 생성해서 배포를 해줍니다!

메뉴구성

메뉴는 선물고르기, 편지, 인증샷, 그리고 생일축하노래와 함께 케이크 보여주는 화면,,,대충 4개로 구성했습니다

상자 3개에 각각 선물을 정해놨습니다. ㅎㅎ 친구가 선택하면 이제 그걸 선물로 주고자 만든 화면입니다,, 원래는 간단한 게임을 넣고 싶엇는데 시간이 넘 촉박해서 ㅠㅠ 간단하게 고르는 형식으로 수정했습니다!

선물이 뭔지는 저만 알고 있습니다 ㅎㅎ 알려줄까 하다가 재미없을 것 같아서 그냥 공개 안했습니다.

그리고 편지 탭에는 대충 hover 되면 열린편지가 나오면서 편지를 주는 컨셉입니다 ㅎㅎ 실제론 손편지로 줘서.. 막판에 개발해서 그런지 누가봐도 귀찮음이...보이는 그런 화면입니다..ㅋㅋ

인증샷을 찍을 수 있는 화면입니다!

npm install --save ngx-webcam

ngx-webcam 이라는 것을 통해서 쉽게 구현할 수 있었습니다 ㅎㅎ

찍은 사진은 요렇게 폴라로이드 처럼 나옵니다. (물론 저장하는 기능은 없......습니다....수동으로 캡쳐 ^^ 하면 됩니다 ㅎㅎ 친구들이 이걸 가장 맘에 들어했습니다 ㅎㅎ)

마지막 화면은 케이크 하나 띄워놓고 생일축하 노래를 부를 수 있는 화면 입니다. 노래를 쉽게 재생할 수 있는 건 바로

npm install ngx-audio-player --save

이걸 이용했습니다. npm은 역시 짱입니다...ㅎㅎ

일욜부터 개발 시작해서 월욜날 퇴근하고 마무리 짓고 어제 생일파티 하고 왔습니다...ㅎㅎㅎㅎ

급하게 대충 만들어서 너무나도 허접하지만..... 생일인 친구가 맘에 들어해서 나름 뿌듯했던 것 같네요...ㅋㅋ 👍🏻

실제로 생일파티때 웹사이트 보여주면서 열심히 선물고른 인증샷,,!!!!!

사실 개발보다 이 움짤 만드는게 더 힘들었습니다..........ㅎㅎ 한번쯤은 이벤트성으로 만들만하네요....내년 생일엔 업데이트 해서 우려먹을까 생각중입니다....🤣

그럼 이상 별거 없는 간단한 프로젝트 이야기였습니다...ㅎㅎㅎㅎㅎ