네이버 국제 강아지의 날 사이트 살펴보기

반응형

 

티스토리에 네이버 사이트 글이라

일단 고

 

 

 

 

글 쓰다가 한 번 날려먹음 

휴 화나 

 

 

 

 

 

 

국제 강아지의 날

 

매년 3월 23일은 국제 강아지의 날

몰랐음 이렇게 귀염 가득한 하루가 있었네

 

 

 

 

네이버 화면 귀엽다

 

 

 

화면을 클릭하면 귀여운 강아쥐들이 오른쪽 왼쪽 뛰어다닌다.

귀 여 워

출근해서 찾은 짧은 즐거움

 

 

 

 

 

---

 

 

Intro. 일단 보자

 

 

으_흠

그러다 문득 궁금했다

어떻게?

무엇을 사용했길래 화면에 강아지들이 뛰어다닐까

 

 

 

자세히 파보지는 않겠다

훑어만 보기

 

 

 

 

 

바탕화면 부수기

 

보니까 90년생이라면 한 번쯤 보고 했을 법한 고전게임

바탕화면 부수기가 생각남

화면을 클릭하면 다양한 연장으로 컴퓨터 바탕화면울 지지고 박살 내는 게임

 

 

 

그럼 지금 사용한 기술에는 뭐가 있을까

 

 

 

구글 확장프로그램 wappalyzer

 

wappalyzer을 사용하면 현재 방문한 사이트가 어떤 프로그램으로 만들어졌는지 확인할 수 있음 

 

 

 

 

---

 

 

 

 

1. LottiesFiles

LottiesFiles 로고

 

 

누를 때 나오는 강아지들은 앞발뒷발 총총 꼬리를 살랑살랑 흔들며 뛰어다닌다.

gif로 이미지를 만들어서 했을까 생각했는데

lottiesFiles을 활용한 화면임

 

 

https://lottiefiles.com/kr/what-is-lottie

Lottie 애니메이션은 무엇일까요? - 로티파일즈

 

 

Lottie 란 움직이는 애니메이션에 대한 데이터 값을 JSON 형식으로 출력하여

실제 코드로 웹 앱에 적용되게 해주는 기술이다.

애니메이션 데이터를 텍스트로 저장한다는 의미

gif나 mp4 파일형식에 비해 파일용량이 더 작고 벡터 기반 이미지라 해상도에 영향을 받지 않는다는 장점이 있다. 

 

디자이너가 json 파일로 추출해 개발자에게 전달 후 개발자는 적용을 하면 됨

로티는 회사 프로젝트를 진행하며 협업 디자이너를 통해 알게 되었다.

보다 높은 퀄리티 모션을 제공하여 화려한 사용자 인터랙션를 구현할 수 있다.

 

 

 

 

 

 

 

2. phaser

 

 

 

phaser 로고

 

 

 

https://phaser.io/tutorials/making-your-first-phaser-3-game/part1

Phaser - A fast, fun and free open source HTML5 game framework

 

 

 

phaser 자바스크립트를 기반으로 HTML5 게임프레임워크 게임엔진

자바스크립트 기반이라 웹브라우저에서 게임 실행이 가능하도록 한다.

 

기본적으로 scene이라는 개념과 게임 오브젝트로 구성되며 

물리엔진까지 포함하고 있어 손쉽게 게임을 제작할 수 있다고 소개한다. 

여기에도 생명주기가 있으며

여러 scene들이 모여 하나의 게임을 구성한다.

 

 

게임요소인 '맵'까지 직접 구현하여 

이미지랜더링, 충돌감지 등 고려하고..

학부생 때 배웠던 유니티가 잠깐 스쳐 지나간다

 

 

 

 

 

개발자 도구로 파일 탐색하면

봐도 잘 모르겠다

대충 저런 게 쓰였구나 하고 알아둔다

 

 

 

 

---

 

그래도 이번 궁금증으로 몰랐던 새로운 정보들을 찾아보면서 학습 할 수 있었다.

 

 

마지막으로 귀여운 댕댕이 퀴즈로 마무리

 

 

 

https://campaign.naver.com/anniversary/dogquiz/?pcode=naver_mocontentsearch_dogquiz 

2023 네이버 댕댕퀴즈

 

 

 

 

 

 

끝

 

 

 

 

 

 

 

---

https://huimang2.github.io/etc/phaser3.html

https://studyposting.tistory.com/83

https://lottiefiles.com/kr/blog/about-lottie/kr-difference-png-svg-lottie