http://lockscreenshot.com/


1.

한달전쯤부터 잠금화면을 마치 누군가 연락을 하려했으나 못 본지 한참된 화면으로 설정해 놓는게 유행이었다. 아이디어가 떠올라 생각한 지 1시간 내로 도메인을 구입, DNS 설정, 아마존 가상서버 생성을 마쳤다. 그리고 퇴근 및 주말을 이용하여 휘릭 한페이지를 만들었는데, 바로 저 위 사이트다. 게다가 기존 adsense 계정에 항목하나 추가해서 간단히 광고를 집어 넣어 보았다. (물론 트래픽이 거의 없으니 광고 효과는 미미~하다.)


2.

서버에서 그래픽 작업을 하면, 아마존 비용이 증가할 것 같아서 모두 클라이언트에서 하도록 작성하였다. 이 부분이 가장 고심한 부분인데, 다행이 html2canvas라는 좋은 라이브러리가 있어서 html로 적절하게 화면을 구성한 뒤 html5의 toDataUrl 함수를 이용하여 'data:' scheme으로 변환하면 png 파일로 떨굴 수가 있었다.


3.

그러나 이 작업이 항상 좋은 화질을 보장하지 않는데, 폰에서는 point/pixel 개념으로 하나의 점을 구성하기 위해서는 여러 픽셀이 동원되는 미려한 일이 동원된다. 따라서 픽셀 단위로 화면을 캡쳐해 놓지 않으면, 화질이 떨어지는 상황이 발생한다. 이를 위해 샘플로 만든 HTML을 확대해서캡쳐해야할 필요가 있다. 이 때 사용한 것이 css의 filter인데, transform.js를 이용하면 쉬운 방법으로 확대할 수 있다. 잠시 확대하고 캡쳐한 뒤 그림으로 만들어 바로 저장한 다음 다시 원래대로 돌려 놓는다.


이상 간단한 장난질 메모.





저작자 표시 동일 조건 변경 허락
신고
크리에이티브 커먼즈 라이선스
Creative Commons License
  1. 2016.12.14 16:12

    비밀댓글입니다

    • Coolen 2016.12.15 13:41 신고

      저도 오래전에 해봐서 따로 샘플을 만들어 드리긴 어렵고요. 웹으로 저 페이지 소스를 이해하시면 훌륭한 예제가 되지 않을까 싶습니다.

셤삼아 http://google.com/ads/ 에 들어가서 신청서를 냈더니 하루만에 승인 나서 설치할 수 있게 되었다.

구글광고를 도입할 때 다음과 같은 제약이 있다.

광고 배치
  • 각각의 웹 사이트 페이지에 최대 3 개의 광고 단위를 게재할 수 있습니다.

  • Google AdSense 검색 상자는 한 페이지에 최대 2 개를 배치할 수 있습니다.

  • 위에서 언급된 광고 단위와 검색 상자 외에도 각각의 웹 사이트 페이지에 최대 1 개의 링크 단위를 게재할 수 있습니다. 이 프로그램 정책하에서 링크 단위는 ‘Google 광고’ 로 간주됩니다.

  • 위에서 언급된 광고 단위 , 검색 상자 및 링크 단위 외에도 한 페이지에 제품 당 하나의 추천 버튼을 추가하실 수 있습니다 . 이 프로그램 정책하에서 추천 버튼은 ‘Google 광고 ’ 로 간주됩니다 .

  • Google 광고는 콘텐츠가 아닌 페이지에는 게재할 수 없습니다.

  • Google 광고 또는 Google 검색 상자는 도메인 파킹 웹사이트, 팝업, 팝언더 또는 이메일에는 게재할 수 없습니다.

  • Google 광고는 페이지 내용의 관련성 여부와 상관 없이 특별히 광고만을 보일 목적으로 만들어진 페이지에는 게재할 수 없습니다.

  • 페이지의 요소들이 광고의 일부분을 가려서는 안되며, 광고 색상은 문자와 URL 을 포함하여 모든 광고 요소가 명확히 보이도록 선명해야 합니다.

  • Google 광고를 클릭함으로써 새 브라우저 창이 열리면 안됩니다.




금지된 클릭과 노출
인위적으로 클릭 또는 노출을 발생시키는 어떠한 방법도 엄격히 금지됩니다. 이 금지된 방법에는 반복된 수동 클릭, 반복된 수동 노출, 클릭을 유도하는 인센티브, 노출수의 증가를 유도하는 인센티브, 로봇 사용, 자동화된 클릭 및 노출 생성 도구 또는 기타 사기성 소프트웨어가 포함되며 이에 국한되지 않습니다. 잠재적인 광고주의 비용 증가를 방지하기 위해 어떠한 이유로든 자신의 광고를 직접 클릭하는 행위는 금지됩니다


잘 알겠습니다.
신고
크리에이티브 커먼즈 라이선스
Creative Commons License

+ Recent posts