잠금화면 스크린샷 공작소

http://lockscreen.sortuniq.com/

1.

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

2.

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

3.

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

이상 간단한 장난질 메모.