에어데스크 + 배경화면
에어데스크 4.2 버전에 대한 오만가지 잡담
에어데스크 4.2 버전에어데스크는 새 탭을 바꿔주는 브라우저 확장 프로그램입니다. 이번 글에선 새로운 기능도 소개하지만 개발에 대한 이야기를 많이 다루고 있습니다. 저번 업데이트(4.1.10버전)에서는 새로운 기능들을 대폭 추가했습니다. 좋다고 하시는 분은 놀랍게도 한 분도 없었습니다. 다만 새로운 버그로 또 문제를 겪게 되신 분들이 스토어에 건의 사항을 달아주셔서 또 급하게 이것저것 손봤습니다.
오늘도 버그를 수정하다가 예전부터 실패한 백그라운드 로딩 기술을 다시 조사하고 시도해보았습니다. 백그라운드 로딩이 무엇일까요? 대단한건 아닙니다. 이번에 이미지 파일을 싹 빼면서 매번 로딩할 때 시간이 걸리게 됩니다. 이미지 하나하나가 고화질이다 보니 인터넷 환경이 좋아도 로딩 속도는 생길 수 밖에 없죠. 그런데 매번 킬 때 받는게 아니라 미리 받아두고 쓴다면 시간이 오래 걸리지 않을 겁니다. 바로 이번에 그걸 구현해보았습니다.
원래 제가 겪던 문제는 이미지 주소였습니다. 이미지 주소가 다른 주소로 랜덤하게 리디렉션 되는 형태였던거죠. 이미지의 주소를 그냥 치면 https://source.unsplash.com/user/airdesk/likes 입니다. 그런데 들어가보면 다른 주소로 바뀌게 됩니다. 그래서 리디렉션 되는 주소를 가져와야 캐시에 저장된 이미지를 빠르게 가져올 수 있었죠. 그런데 주소를 아는 방법을 몰랐습니다. 아무리 찾아봐도 답이 없었습니다. 고민고민하면서 아예 이미지를 가져오는 사이트의 API를 사용해볼까 했지만 그것도 벽이 많았습니다. 그래서 사실 포기하고 있었는데 오늘 다른 분들께 질문을 할까하다가 검색을 해보게 되었습니다. img redirect get url 이런 식이었습니다. 조금 검색을 해보니 그전에 찾지 못한 실마리를 찾았고 이제는 빠르게 이미지를 가져오게 되었습니다.
코드는 너무 심플합니다.
var xhr = new XMLHttpRequest();
XMR요청을 하나 생성해주고, 대상 주소를 open()합니다. 그리고 load() 이벤트 완료되면 이미지가 브라우저 캐시에 저장될 것입니다. 저장된 이미지를 가져오는건 캐시를 사용하기 때문에 빠르게 가져올 수 있습니다. 즉 이미지가 어디에 있는지만 알면 금방 가져올 수 있습니다. 주소값은 알기 위해선 xhr.responseURL로 확인하면 됩니다.
그래서 이 기술을 이용하면 더 재밌는 일들을 할 수 있습니다. 제가 좋아하고 추천하는 새 탭 프로그램인 구글 어스뷰에 잘 나와있습니다.
구글 어스뷰 모습구글 어스뷰는 아주 빠르게 배경을 로딩합니다. 단순히 로딩하는 것 뿐 아니라 마음에 드는 사진을 다시 보기도 편리합니다. 위의 사진 중앙 하단에 작은 화살표가 보이십니까? 클릭해보면 그동안 어떤 사진들을 봐왔는지 히스토리에 저장되어있습니다.
구글 어스뷰에 저장된 사진들저는 이런 기능을 에어데스크에도 충분히 사용할 수 있을 거라 생각하고 있습니다. 지금은 초고화질인 2560X1440(16:9)의 이미지를 에어데스크에서 사용하고 있습니다. 이런 멋진 화면을 한 번 보고 넘어가는게 아쉽거나 마음에 들면 바로 고정하거나 다운받을 수 있게 하고 싶습니다.
아참 잊고 있었는데 그래서 화질을 설택하는 항목은 사라졌습니다. 이제 모두 최고화질을 씁니다! 그리고새로운 기능을 추가했습니다.
배경화면 설정의 랜덤 항목이 바뀌었습니다!랜덤에 들어가시면 이제 해상도 대신 주기가 나타납니다. 매번, 1시간 간격 또는 하루 간격으로 배경화면을 바꿀 수 있습니다. 열 때마다로 설정하시면 약간 여유가 있으면 알아서 로딩을 해서 이미지를 저장해두는데, 그럼 짬도 없이 새 탭을 연타하시면 이미지를 다운로드하지 못하는 상황이 생깁니다. 물론 이것도 해결할 방법을 준비하고 있습니다만 일단은... 다른거 먼저 개발하고 하려고 합니다.
저번에 추가된 디자인 변경사항들다른거라고 한다면 버그와 디자인 변경으로 인해 개발 순위가 상승한 메모와 디데이입니다. 메모는 제가 애용하는 비캔버스의 메모 기능을 목표로 구현해보려고 합니다. 비캔버스의 메모 기능은 정말 편리하고, 다방면에 쓰일 수 있습니다. 저는 디자인에도 활용하고 있습니다.
개발 및 아이디어 스케치할 때 사용하는 비캔버스보시면 아래의 레이아웃 모양을 다양한 색의 메모를 이용해서 간단하게 잡아볼 수 있습니다. 또한 비캔버스 메모는 텍스트를 적고, 다양한 색과 폰트를 사용할 수 있는 것도 좋습니다. 사이즈 조절과 자석처럼 붙는 기능도 편리합니다. 모든 면에서 따라할 점이 많은데 에어데스크에서도 이런 편리한 메모를 제공해드리고 싶습니다. 그렇게 되면 메모만 가지고도 정말 쓸 곳이 많지 않을까 생각하고 있습니다.
디데이 기능은 이상한 곳에서 문제가 발생했습니다. 바로 사용하고 있는 시간 오픈소스(moment.js)가 날짜를 이상하게 가져오기 시작했다는 점입니다. 브라우저의 날짜와 오픈소스의 날짜 사이에 4일의 간격이 생겨서 이상하게 계산이 되기 시작한 것이죠. 이 프로그램을 쓰는게 저뿐이 아닐텐데 대부분은 디데이 기능에 쓰지 않아서 2월이 지날즈음 버그에 대한 논의가 되지 않을까 싶습니다.
디데이는 좀 더 날렵하고 포커싱 공간을 줄여보았습니다. 스타일에 영향을 받아 네모, 동그라미, 둥근 네모로 바뀌기도 합니다. 그것말고도 상대 위치에서 절대위치로 바꾸었는데 솔직히 다시하기엔 지쳐서고치는걸 포기했습니다. 나중에 상대위치랑 절대위치의 기준을 넣는 기능을 제공할까 생각하기도 합니다. 그런데 저에겐 꽤나 복잡한 수학문제라서 마음의 여유가 될 때 하려고 합니다.
홈페이지에는 아직 업데이트를 하지 못하고 있습니다. 이번에 한글 홈페이지를 따로 제공해서 한국분들이 더 편리하게 보시고 사용하시게 할 생각입니다. 그래서 그것까지 마무리하고 업데이트된거는 홈페이지에 올리겠습니다.
요즘 크롬에선 사용자가 비슷하게 유지되서 겸손한 마음이 생깁니다. 에어데스크 4.2버전 이후론 더 많은 분들이 다른 분들에게 공유하고 싶은 앱이 될 수 있기를 바라고 있습니다. 항상 그렇지만 사용해주셔서 감사합니다. 더 재밌고 좋은 앱으로 만들어보겠습니다.
에어데스크 사이트 링크:
