brunch

매거진 airdesk

라이킷 1 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 한상훈 May 18. 2018

여러 아이콘 드래그하기

에어데스크 5.0 버전

새로워진 에어데스크 설치 화면

에어데스크는 새 탭을 바꿔주는 브라우저 확장 프로그램입니다. 이번엔 더 좋은 배경화면을 가져올 수 있게 하는 커스터마이징과 여러 아이콘을 동시에 드래그할 수 있게 만들었습니다.

아직까지는 모든 아이콘을 하나하나 움직여야했습니다. 물론 원하는대로 꾸밀 수 있다는 장점은 있지만 하나하나 바꾸다보니 정렬하는데도 시간이 오래걸리고, 귀찮기도 했습니다. 그런 이유에선지 많은 분들이 에어데스크크를 커스터마이징 해서 쓰기보단 조금만 수정해서 쓰셨습니다. 이 문제를 단번에 해결하기 위해선 많은 아이콘들을 동시에 움직일 수 있게(멀티 드래그) 만들어야 했습니다.

지난 몇 달간, 아니 에어데스크를 만들기 시작하면서부터 '멀티 드래그'는 제 꿈이었습니다. 여러 플러그인들을 조사해보았고, 사용할 수 있는 샘플들을 찾아보기도 했습니다. 지금 사용하고 있는 jQuery의 문서도 꼼꼼히 읽어보았지만 웹에서 드래그를 쓰는 곳이 거의 없었기에 좋은 리소스를 발견하기는 매우 힘든 일이었습니다. 그러던 중 구현의 실마리를 찾게 되었고, 지난 삼일에 걸쳐 개발한 끝에 완성하게 되었습니다.

쉬워보였지만 수 십 시간 이상 걸린 드래그 기능

언제나 그렇지만 실마리를 찾으니 문제는 쉽게 풀렸습니다. 한 2~3시간 정도 수정하니 거의 완성된 것 같았습니다. 하지만 이건 제 착각이었습니다. 가장 어려운 부분은 '폴더 안으로 넣고, 빼는 드래그'였습니다.

넣는 것을 구현하는데만 6시간, 빼는 걸 구현하는데에 16시간이 걸렸습니다. 모든 경우의 수를 다 집어넣어보고, 콘솔(개발자 화면)에 찍어보고, 노트에 적어가면서 알고리즘을 따져보아도 도무지 이해할 수 없는 모습이 자주 발견됐습니다. 새벽 2시가 다 되어서야 한 줄의 코드를 넣게 되는데, 그게 모든 문제의 해결책이었다는건 개발을 시작하고 20시간이 지났을 때 였습니다.

아쉽게도 이렇게 열심히했지만 완벽한 드래그를 구현하진 못했습니다. 현재시간이나, 검색바, 위젯 등을 함께 드래그하지 못합니다. 그러나 이제 하는 방법을 알았고, 모든 구성요소를 드래그할 수 있도록 만들겠습니다.

두번째로 소개할 기능은 해상도입니다. 아직까지 에어데스크의 랜덤 이미지는 2560x1440(QHD)화질만 제공했습니다. 이번에 추가한 해상도 기능은 1920x1080(FHD)와 1600x900(HD+)입니다.

'설정 > 배경화면 > 랜덤' 에서 확인하실 수 있습니다.

이미지 해상도가 높고, 사용하시는 모니터의 해상도가 낮은 경우엔 이미지가 도리어 예쁘지 않게 나오거나 크게 나오는 문제를 발견했습니다. 현재 대부분의 모니터가 Full HD 1920x1080을 사용하고 있다는 통계를 바탕으로, 낮은 해상도 선택지를 더했습니다. 반면 높은 해상도는 넣지 않았는데 QHD 이상을 사용하고 계시는 컴퓨터가 매우 적기 때문입니다. 또한 그 이상의 해상도라면 4120x2880 정도인데, 이정도를 호환할 수 있는 이미지도 한정적이고 용량이 매우 큽니다.

세번째로 소개할 기능은 '배경화면 모드'의 변경입니다. 기존 중앙 메뉴에 있던 '배경화면 모드' 버튼을 기억하실 겁니다. 새로운 버전에서는 이 버튼이 사라졌습니다.

배경화면 모드가 사라진 메인 메뉴

대신 우측 상단 사이드 메뉴에 배경화면 모드가 생겼고, 기존에 있던 메뉴바 감추기/보이기 기능을 통합했습니다. 이제는 배경화면 모드를 누르시면 말그대로 모든 화면이 사라지고, 배경 이미지만 보이게 됩니다. 또한 배경에 설정한 밝기조절, 흐림 조절 등이 모두 사라져서 이미지 원본으로 보실 수 있습니다.

인터넷을 많이 쓰신다면 아시겠지만, 모든 인터넷 화면은 확대/축소 기능이 있습니다. 버튼을 따로 만들어 제공할까 했습니다만 더 복잡해질 것 같아서 단축키로만 알려드렸는데 생각보다 매력이 있습니다.

Ctrl키와 [+]키를 누르거나, 마우스 휠을 하시면 확대하게 되는데, 화면을 확대해 사용하시면 위와 같이 큼직하게 나타납니다. 작다고 느끼실 수 있는 요소를 원하는 사이즈로 확대해서 보니 편리하실 겁니다.

그 밖에도 디테인한 디자인 수정을 했습니다. 좋아하는 사이트의 사이즈와 알람의 사이즈를 맞추고, 블랙테마엔 약간의 투명도로 더 멋진 느낌을 주었습니다.

또한 미생체를 추가했습니다. 위의 이미지에 적용된 폰트가 미생체입니다. 에어데스크의 분위기와 잘 맞는 손글씨 폰트라서 더하게 되었습니다. 다만 폰트를 웹에서 가져오지 못해서 파일에 넣다보니 용량이 점점 늘어가고 있는데, 장기적으로 해결해보겠습니다.

사실 겉보이엔 그럴싸해보이고, 멋져지지만 아직도 이상한 버그가 많아서 부끄럽기도 합니다. 그래도 주커버그가 말했듯 "완벽보다 완성이 낫다."라는 모토로 일단 업데이트하고 있습니다. 버그가 생기면 언제든 연락주시면 바로바로 고치도록 하겠습니다. 많은 분들이 몇 개월 이상 써주시고 있는데 항상 감사드립니다.

** AIRDESK & LINKS **

keyword