brunch

매거진 airdesk

You can make anything
by writing

C.S.Lewis

by 한상훈 Jul 28. 2017

에어데스크 3.0

새 탭에 당신의 컴퓨터를 올려보겠습니다.


왜 OS의 UI를 구현한 웹 서비스는 없을까?


오랫동안 기다려왔던 에어데스크 3.0을 완성했다. 

에어데스크 2.0에서 추구했던 목표와는 완전히 다른 포지션으로 모든 것을 옮겼다.



:: All custom components ::

웹은 브라우징을 위해 있고, 아이콘을 통해서 빠르게 이동할 수 있다.


우리가 집중한건 모든 컴포넌트의 커스텀화였다. 모드를 활용해서 여러 전환을 시도하지 않고, 사용자가 직접 원하는 화면을 구성하게 하는데 집중했다. 그러던 중 우리는 남들이 찾지 못한 비밀을 발견했다. 그것은 웹에서도 충분히 OS의 UI를 바탕으로 컴포넌트를 커스터마이징 할 수 있다는 점이다.


브라우저에서 가장 필요한 기능이 무엇일까? 그것은 원하는 페이지에 빠르게 가는 것이다. 크롬은 자주 가는 페이지는 8개를 제공했다. 당신의 화면에 여유가 있다면 에어데스크는 100개까지 제공한다.

기본으로 생성되는 아이콘들과 추가로 만든 브런치 아이콘

몇가지 가능성을 생각했다. 즐겨찾기를 활용할 수도 있었다. 하지만 북마크에 있는 것과 아이콘을 구분해서 사용하는게 더 편리할 것이다. 몇몇의 즐겨찾기는 아이콘으로 공개하기 싫을 수도 있다. 그래서 우리는 저장소를 구분해서 사용하며, 차후에 북마크를 쉽게 아이콘으로 전환하는 방법과 북마크 폴더를 윈도우의 폴더처럼 편하게 사용하게 만들 것이다.


:: Drag ::

아이콘을 생성하는 것 뿐 아니라 드래그를 구현했다.

푸른 배경에 점선으로 포커싱을 구현했다.

현재 버전은 모든 위치를 제공하진 않는다. 그러나 규칙성있게 생성되고 보이지 않는 그리드를 생성하여 아이콘을 위치시킨다. 만약 이미 아이콘이 존재하는 곳으로 이동하려고 하면 아예 이동이 되지 않는게 아니라 부드럽게 돌아온다. 이점에 있어선 아직 완벽한 구현하지 못했다. 고성능 컴퓨터에선 발생하지 않는 포커스 백그라운드의 깜빡임이나, 드래그로 여러 아이콘을 동시에 움직이거나, 유저가 원하는 지점보다 왼쪽에 아이콘을 둬야 이동하는 등의 문제가 존재한다.



:: Right Click ::

그간의 웹에선 우클릭을 구현한 웹이 매우 드물었다. 웹 앱에서 구현되는 인터렉션으로 인식했기 때문이다. 우리는 확장프로그램에서 이를 구현하였다. 새 링크, 설정, 정보로 이동할 수 있고, 아이콘을 삭제할 수도 있다. 이를 통해서 기존의 마우스 오버 이벤트 등의 한정적 인터렉션보다 더 넓고 다양한 인터렉션을 가지게 되었다.

아직까지 웹에서 우클릭을 제어하는건 왜이리 적게 사용된걸까?


:: Popup ::

우린 더 빠르게 이동하는 방법을 고민했다. 확장 프로그램에 있는 팝업 기능 중에서 왜 아무도 이것을 개발하지 않았을까? 아래 사진처럼 버튼을 눌러 켜지는 팝업 창을 활용해 새 탭을 열 필요도 없이 자주 가는 사이트로 가는 방법을 구현했다.

새로운 링크 아이콘을 생성하거나, 자주 가는 사이트로 이동한다.

현재 위치의 주소값을 가져오는 것은 브라우저 보안상 막혀있어, 바로 아이콘을 만드는 편리함을 구현하진 못했다. 그러나 팝업을 통해서 자주 가는 사이트를 더 빠르게 갈 수 있을 것이다.


:: Shortcut ::

에어데스크는 컴퓨터에 매우 익숙한 사람을 상정하고 개발되었다.

단축키를 활용해서 브라우징 속도를 최대로 구현한다.

현재는 기능이 다양하지 않지만 지속적으로 단축키를 추가하고 있다. 이미 웹 개발자들은 브라우저 단축키가 익숙할 것이다. 그러나 브라우저에서 제공하지 않는 기능을 구현하여 더 편리하게 만들고자 한다.


:: Depth ::

웹 개발자들에게 있어서 클릭이 가볍지 않다는 건 진리이다. 80%이상의 사이트에서 3번의 클릭이 이뤄지지 않고 사용자는 나가게 된다. 어디로던 들어갈 수 있다는 웹의 장점은 언제던 빠져나갈 수 있음을 뜻하며, 한 번의 클릭이라도 줄이는 것이 중요하다.

검색 제공자를 빠르게 바꾸는 기능은 매우 적은 수의 프로그램에서 제공된다.

기존엔 검색을 변경하기 위해서 설정까지 들어가는 수고를 들여야 했다. 에어데스크는 원클릭으로 변경할 수 있다. 검색창 우측의 G 아이콘에 마우스를 대면 알아서 검색 제공자들이 펼쳐지기 때문이다.



:: Bright ::

우리가 목표는 웹OS가 되었다. 기존의 어두운 톤의 구성보다 더 다이나믹하고 생기넘치는 디자인이 OS에 더 적합하다는 결론을 얻었다. 우린 모든 톤을 밝게 제공하는 것으로 개발 방향을 전환했다. 

기존의 있던 어두운 레이어는 사용자의 취향에 따라 더할 수 있는 요소로 변경했으며, 디폴트로 아무런 레이어가 들어가지 않는다. 이로써 이전엔 어둡고 복잡하지 않은 배경화면에서 밝고 재미있는 사진들로 배경화면을 구성했다.


:: Background ::

오로라 플래너 최초버전 때부터 고집해왔지만 우린 더 멋진 배경을 원한다. 2.0 버전 때 추가한 로컬 파일 업로드를 비롯해, 단색 배경, 기본 배경, 이미지 링크 배경을 제공하고, 밝기 조절까지 추가했다. 그 뿐 아니라 Lightmode를 이용해 배경만 볼 수 있게도 설정했으니 사용자의 취향에 따라 다양하게 바꿀 수 있게 되었다.


 


:: Icon style ::

우린 확장 프로그램이 단순히 웹 브라우저에서만 쓰일 것을 상정하고 만들지 않고 있다. 웨일 브라우저에서는 모바일에서도 확장 프로그램을 쓸 수 있게 개발 중이라고 한다. 그렇기 때문에 마우스가 아닌 손가락과의 인터페이스를 생각해보았다.



손으로 누르기에 가장 편리한건 모바일에서 흔히 사용되는 Dull Square(무딘 사각형)이지만 이점도 사용자가 원하는 스타일로 제공하였다. 여백이 없는 그리드 스타일의 아이콘의 경우 드래그 이벤트 처리 및 여백이 없어 답답한 느낌을 줄 수 있어 지양하기로 했다. 


:: To do list ::

할 일 목록은 초기와 동일하게 체크 박스를 눌러 동작하게 하였다. 다른 요소들보다 글씨의 크기가 큰 것은 목표를 달성하는 것이 우리의 초기 목표이기도 하며, 그 목적을 위해서 사용자가 사용하기 때문이다. 할 일 목록은 단축키와 클릭으로 on/off를 하며 상단의 바를 드래그해서 이동시킬 수 있다.


:: Most Visit :: 

브라우저에서 가장 많이 쓰이는 기능은 역시 자주 가는 사이트일 것이다. 우리는 팝업에서 더 빠르게 이동하는 것을 제안했고, 메인 화면에서도 쉽게 동작할 수 있게 디자인했다.

자주 가는 사이트는 할일 목록, 포스트잇과 동일하게 켜두게 되면 상태를 기억해 매번 킨 상태로 보여준다. 특히 팝업 기능에서 구현된 자주 가는 사이트는 새탭을 누를 이유도 없게 만들어 줄 것이다.


:: Post it ::

포스트잇은 기존의 구조를 그대로 가져왔으나 약간의 디테일 변화를 주었다. 기존에 없던 스크롤바나 글씨 크기 등의 변화이다. 랜덤으로 여러 색으로 생성되며, 단축키를 활용하면 매우 편리하게 수십장도 생성해볼 수 있다. 





:: Web service ::

에어데스크의 구조를 바탕으로 웹서비스를 기획하고 있다. 클라우드 컴퓨팅을 활용하여 퍼스널 컴퓨터를 웹에서 구현하는 것이다. GUI가 아닌 OS를 제공한 웹서비스는 존재했지만 웹에 존재하는 '개인의 배경화면'은 없었다. 그 전에 확장 프로그램을 통해 프리버전의 웹서비스를 제공하고자 한다.

파일을 다운 받을 필요도 없이 웹에서 실행된다면?

웹서비스에서 PC를 구현한다면 엄청난 일이 될 것이다. 개인의 하드디스크에 올리지 않아도 파일을 웹에 두면 어디서든 사용할 수 있고, 웹 앱을 통해서 파일들을 실행할 수 있을 것이다. 우린 이 웹서비스의 아이디어를 발견했고, 이를 향해서 개발을 진행하고자 한다. 


윈도우 10의 폴더 내부


지금은 배경에 링크 아이콘만 가능하지만, 상상한다. 폴더를 구현하고, 클라우드 스토리지 서비스를 바탕으로 유저가 올린 데이터를 폴더에 일반 파일처럼 보여준다. 이런 호기심도 생긴다. 폴더 안에는 링크 아이콘 뿐 아니라 여러 프로그램도 넣을 수 있다면? 혹은 PC의 프로그램을 업로드해서 사용하는것까지도 가능하다면?  

 

물론 퍼미션의 문제가 있겠지만 시간에 따라 클라우드 컴퓨팅 파워는 오를 것이고, 더 많은 일들을 클라이언트 사이드가 아닌 서버사이드에서 처리해 놀라운 사용자 경험을 제공할 수 있을 것이다. 이러한 가능성을 믿는 사람은 나 뿐만이 아니라 생각한다. 


:: VISION ::

우리 비전에 공유하고자 하는 사람들, 함께 웹 서비스까지 구축하고자 하는 사람들을 기다리고 있다. 실력이 뛰어나지 않아도, 직장에 다니고 있어도 프로젝트에 참여할 수 있다. 아직까지 버전은 개발자 한 명 그리고 디자이너 2명이 만들고 있으며. 특히 개발자의 자리는 많이 비어있다. 이 프로젝트에 관심이 있다면 아래의 메일로 연락 부탁한다. 


Email: joshephan0204@gmail.com








매거진의 이전글 50시간 확장 프로그램 만들기

작품 선택

키워드 선택 0 / 3 0

댓글여부

afliean
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari