친구 생일선물로 웹사이트 만들기

벨로그에 올렸지만 짧게 다시 기록해보기

가장 오래 알고 지낸 친구의 생일을 맞이하여 신박하게 선물을 정할 방법이 없을까 고민하다가 생일을 위한 간단한 웹사이트를 개발했다. ㅎㅎ

 

선물 고르는 것이 너무 힘들어서 그냥 대충 선물 랜덤으로 고를 수 있는 화면만 보여줘야지 생각하면서 시작했는데,, 너무 허전해서 이것저것 그림 그려서 넣고 별거 없는 기능도 넣게 됐음

 

그래서 그런지 많이 허접함 ㅎㅎ 개발 공부한 사람 또는 개발자가 보면 너무나도 간단한 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은 역시 짱 ㅎㅅㅎ

 

일욜부터 개발 시작해서 월욜날 퇴근하고 마무리 짓고 바로 생일파티 하고 왔던........ㅎㅎㅎㅎ

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

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

사실 개발보다 아이패드로 그림 그리는게 더 힘들엇음 ㅇㅅㅇ 한번쯤은 이벤트성으로 만들만하긴 함.... 내년 생일엔 업데이트 해서 우려먹을까 생각중....🤣

 

 

이 글을 6월쯤에 벨로그에 올렸었는데 생각보다 많은 관심 받아서 나름 인기글까지 갔던 좋은 기억이 있다 ^_^ 또 아이디어가 좋다며 메일로 연락온 것도 아주 특별한 경험 ,,,,, .. 생각없이 너무 간단하게 시작한 초라한 프로젝트였지만 재밌는 경험이 됐음 😃

 

그럼 이상 별거 없는 간단한 프로젝트 끝...ㅎㅎㅎㅎㅎ