brunch

You can make anything
by writing

- C.S.Lewis -

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>


"아니 잘 보이지도 않는 배경에 적용해 놓고 이런 글 올리냐~" 라고 하는 사람 있을 수 있다. 보이지 않는 곳에 적용했으니 올리는 거다 ^^ 이 글 본 사람들이라도 알라고 헛헛


애플 아이팟프로 사이트 (슬쩍) 따라해보기

끄읕.




데이터로 내린 풍미깊은 뉴스,

다양한 인터랙티브 콘텐트가 더 보고 싶으시다면

데이터브루 페이지

데이터브루 뉴스레터 신청



전기환 소속중앙일보 직업개발자
구독자 210

매거진 선택

키워드 선택 0 / 3 0
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari