by
Nov 08. 2019
애플 에어팟프로 사이트 따라하기
데이터브루 아파트 연대기 페이지
얼마 전 깜짝 출시되어 화제가 된 애플 에어팟프로. 제품 자체도 화제지만 에어팟프로 사이트도 꽤 화제가 되었다. 특히 이쪽일 하는 사람들 사이에서.
국내뿐 아니라 해외에서도 꽤 주목받고 있다. 영상인... 것 같은데, 스크롤에 반응을 하고... 암튼 그냥 멋져!
나도 보자마자 와우~ 했고, 지인들에게 카톡을 보내기 시작했다.
https://www.apple.com/kr/airpods-pro/
"와~ 애플 놈들 진짜 멋지지 않냐?"
'와~'를 외치며 전 세계 수많은 개발자들이 F12를 눌러 소스를 봤을 것이다.
페이지가 열리자마자 이미지를 다다다다다~ 로드하는 것을 볼 수 있다. 예상대로 영상이 아닌 이미지였다. 로드해 놓은 이미지들을 스크롤 값에 맞춰 <CANVAS>에 그려 보여주는 방식!
애플은 되는데 우리는 왜 안되죠?
라고 하지 말자(디자이너, 기획자 등). 이건 정말 영상이 멋져야 한다. 솔직히 영상이 다했다고 봐도 된다. 개발은 그저 도울뿐.
그럼 따라 해 보자!
며칠 전 하루, 이틀 만에 급하게 개발해서 오픈한 데이터브루의 아파트 전쟁연대기에 적용해봤다.
PC는 드론으로 촬영한 아파트 영상을 비디오 태그로 깔았다. 드론 영상 깔면 정말 웬만~하면 멋지다.
( 컬러 영상 위에 커버를 올림. background: rgba(0,0,0,.8) )
모바일 배경으로는 영상 그대로 사용하지 않고 애플 에어팟의 그 느낌을 따라 해 봤다.
1. 멋진 영상 준비
2. 영상 프레임을 이미지로 변환 (영상 툴사용)
3. 이미지 로드해서 캔버스에 그려줌
4. 스크롤 값에 따라 이미지 바꿔서 다시 그림
5. 끝
영상을 이미지로 익스포트 해야 한다. 다양한 영상 툴에서 가능하지만 나는 어도비 애니메이트(!)로 했다. (이놈의 플래시 사랑, 안되는 게 없다)
대략 200장 분량만 익스포트. 용량이 생각보다 커서 사이즈도 줄이고 화질을 많이 떨어뜨렸다.
(1) 캔버스 태그를 넣어준다. 사이즈 지정해주고.
<canvas id="Canvas" width="600" height="1072"></canvas>
(2) 캔버스 이미지 로드 스크립트 추가 ※실제 소스와 다름.
function draw(이미지 넘버){
_image = new Image();
_image.src = "파일이름" + 이미지 넘버 + ".jpg";
Canvas = document.getElementById('Bg_canvas').getContext("2d");
_image.addEventListener('load', function() {
Canvas.drawImage(_image, 0, 0);
}, false);
}
(3) 스크롤 시 다시 그려주기
function scrollActFunc() {
//스크롤 시 실행
var i = percentageFunc( 스크롤 값 , 도큐먼트 HEIGHT - 화면 HEIGHT, 이미지 최대 개수) ;
if (i <= 이미지 최대 개수) {
draw(i);
}
}
var percentageFunc = function(n, max, length) {
//백분율 구하는 건데 조금 바꿔서 썼음
return Math.ceil(n / max * length );
}
위에 설명했듯이 실제 소스와 차이는 좀 있지만, 크게 다르지도 않다.
3번 스크롤 시 다시 그려주는 부분은 변수(이미지 넘버)만 바꿔주면 되니 다른 방법을 사용해도 된다.
급하게 후다다닥 해본 결과 이 정도로도 비슷한 결과물을 낼 수는 있었다.
다음에는 배경 영상이 아닌 에어팟프로처럼 영상이 메인인 컨텐트에 적용해 보면 좋을 것 같다.
(브런치에 소스 코드를 넣었더니 영 별로군...)
실제 적용된 결과는 아래 페이지. PC는 <VIDEO>, 모바일은 <CANVAS>
(아... 퇴사하니 에러가 나고있다. 보지마세요)
"아니 잘 보이지도 않는 배경에 적용해 놓고 이런 글 올리냐~" 라고 하는 사람 있을 수 있다. 보이지 않는 곳에 적용했으니 올리는 거다 ^^ 이 글 본 사람들이라도 알라고 헛헛
애플 아이팟프로 사이트 (슬쩍) 따라해보기
끄읕.
이런 강의도 만들었었다.
https://www.inflearn.com/course/인터랙티브-역량강화?inst=08935b86
https://www.inflearn.com/course/자바스크립트-인터랙티브-웹?inst=6beae974
https://www.inflearn.com/course/threejs-3d-인터랙티브?inst=fc9ce2d7
