brunch

매거진 airdesk

라이킷 16 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 한상훈 Jul 16. 2017

에어데스크로의 변화

계획보다 중요한 일

지금으로부터 20년 후에, 당신은 당신이 한 일보다 하지 않았던 일들을 더욱 후회할 것이다. 그리너 뱃머리를 묶고 있는 밧줄을 풀어 던져라. 안전한 항구로부터 벗어나 항해를 떠나라. 당신의 항해에 무역풍을 타라. 탐험하라. 꿈꾸라. 발견하라. - 마크 트웨인

1. To do list

처음엔 플래너가 목적이었습니다.
우리의 프로토타입 버전은 목표를 체크하는 간단한 프로그램이었습니다.
아래의 사진까지 50시간이나 걸려 만들었지만 할 수 있는 기능은 너무도 적었습니다.

오로라 플래너 0.1버전

2. 현재 시간

가장 먼저 추가한 기능은 현재시간입니다.

현재 시간은 간단한 js 코딩으로 구현이 가능했습니다.

아래의 이미지는 수정된 스타일에 대한 캔버스입니다.

수정 아이디어 캔버스

아이디어를 캔버스에 올린 후에 실제 작업을 들어갔습니다.

현재 시간을 포함해 프로토타입과 많이 다른 부분을 추가했고, 위치를 수정해보았습니다.

현재 시간이 추가된 오로라 플래너

3. 검색

이후 검색바를 추가해보았습니다. 검색은 간단한 input 태그와 form을 이용해 호출해주면 되는 html 구문으로 구현합니다. 이 부분을 자세히 설명하자면 각각의 검색 엔진들은 검색에 사용하는 쿼리가 존재하고, 이 쿼리 값을 name 속성에 구분해서 적용해주면 됩니다. 검색을 했으니 결과를 보여줘야 될텐데 현재 화면의 위치는window.location을 이용해 값을 넣어줍니다.

오로라 플래너 1.0버전

4. 배경화면

배경화면은 오로라 플래너와 에어데스크의 핵심 디자인 요소입니다. 처음엔 단 한장의 사진만을 blur처리해서 보여주었습니다. 이 점이 아쉬워 아래의 기능들을 추가해보았습니다.

기본 배경화면과 외부 링크 기능이 추가된 시점

- 158개 기본 랜덤 배경화면

- 외부 이미지 링크 주소

- 로컬 파일 업로드

- 단일 컬러 배경

- 밝기 레이어 조절 기능

그러나 아직도 추가할 요소는 많습니다. 아래의 리스트는 제가 생각하고 있는 추가적인 기능들입니다.

- 스크립트 형태(Webgl 기반)

- API를 통해 가져와 캐시로 저장하는 방식(이미지)

- 명령이 가능한 배경화면(스크립트 형태)

- 기본으로 제공되는 동적 배경화면(GIF)

배경화면에 대한 자세한 글을 100시간동안 오로라 플래너 만들기 에서 다시 다룹니다.

5. 포스트잇

포스트잇을 추가하는 시점부터 jQuery를 적용하기 시작했습니다. 이점만 보더라도 제 실력을 알 수 있습니다. 포스트잇은 다양한 인터렉션이 필요합니다. 드래그, 사이즈 조절 등의 인터렉션은 jQuery UI를 통해서 해결해보았습니다.

포스트잇 구현 당시 아이디어 캔버스

에어 데스크 2.0의 포스트잇

포스트잇은 상당히 복잡한 녀석입니다. 여러 까다로운 요소가 필요한데 간단히 적어보자면, 포커스, 포커스아웃, 드래그, 스탑, 클릭, 마우스 오버, 마우스 아웃 등의 이벤트가 각각 필요합니다. 그 뿐 아니라 각각의 포스트잇을 구성하는 데이터는 안의 텍스트와 위치정보를 가져야 합니다. 그 뿐 아니라 쓴 포스트잇을 다시 사용할 수 있어야 합니다. 이러한 이벤트 처리는 하나의 element에 .method() 형태로 엮어 체인 구조로 만들었습니다. 또한 이동이나 수정에 따라 데이터를 삭제하고, 입력하도록 구현했습니다.

앞으로 구현할 요소가 많이 있는데, 그 중 우선사항은 사이즈 조절, 사진 영상 등 데이터 표시 입니다.

6. 토글 컨트롤

화면에 요소가 많아질 수록 on/off를 이용한 인터렉션이 중요해집니다. 사용자가 보고 싶은 창과 닫고 싶은 창을 기억하게 만들어보았습니다. 아래는 Todolist의 toggle시 화면입니다.

이후 늘어나는 구성 요소에 대해 단축키를 포함한 토글 기능을 부여해 가용 공간을 최대한 넓혀보았습니다.

좌측은 이미지는 모든 요소가 보여진 상태이고, 우측은 배경화면만 보이는 모습입니다.

7. 단축키

저는 이 프로그램의 타겟층을 다양하게 두지 않았습니다. 컴퓨터에 익숙하고, 단축키가 손에 익숙한 전문가에게 최적화되는 걸 바라고 있습니다. 이미 크롬과 웨일은 많은 편리한 단축키를 가지고 있으나 에어 데스크에서 제공하는 추가적인 기능들로 생산성과 편리성 모두 더하고 싶습니다.

단축키 정보

우리는 거의 사용되지 않지만 손의 동선을 최소화 하는 핵심 키를 조사했습니다. 몇몇의 후보중에서 [`] 키를 선정하게 되었는데, [`]키는 평소에도 거의 사용하지 않지만 웹의 첫 화면에서 사용되는 일은 극히 드문 키이기에 기존 키와 혼선을 빚지 않습니다. 그 뿐 아니라 손 동작도 편리하게 누를 수 있습니다.

8. 자주 가는 페이지

최초의 '자주 가는 페이지' 모습

자주 가는 페이지의 초기 디자인에 대한 글을 80시간 크롬 확장 프로그램 만들기에 자세히 기록하였습니다. 하지만 아쉽게도 자주 가는 페이지는 완벽히 구현하진 못했습니다. 프로그래밍적 이야기를 하자면, 기본적으로 나오는 자주 가는 페이지는 히스토리에 기반합니다. 그 중에서도 최근 기록이 반영되는데, 자주 가는 페이지 삭제를 하면 특정 url의 기록을 삭제하면 완료되지만, 몇몇의 링크는 url기록과는 무관하게 존재합니다. 이로인해 삭제가 안되는 버그가 있고 아직 해결하지 못했습니다.

현재의 자주 가는 페이지 모습

여전히 알아보고 있지만 캐시, 쿠키, 세션, 브라우징 데이터 중 하나일 것이라 생각합니다. 그러나 이를 체크하기 위해서 여러 API를 사용해야하고, 또 테스트를 하는 과정이 오래걸려 완전한 자주 가는 페이지 구현은 꽤 오래 걸릴 것으로 보고 있습니다.

디자인을 이야기해보겠습니다. 최초엔 그리드 형태로 구현했지만 그리드 형태가 주는 색의 불편함(특히 배경과 어울리지 않는 느낌)이 커서 아이콘으로 수정하였습니다. 또한 아이콘 스타일을 추가하였고, 아이콘을 사이트에서 바로 가져오는 기능을 구현하지 못해 현재는 각각의 로고를 직접 입력해서 출력하고 있습니다. 앞으로는 아래의 문제를 우선 해결하고자 합니다.

- 아이콘 가져오는 문제

- 모든 링크에 대한 삭제 기능

- 삭제 취소

9. 드래그

앞서 포스트잇 드래그에서 이야기했던 걸 확장해보고자 합니다. 모든 요소가 드래깅 되는 환경은 어떨까요? 모든 요소를 커스터마이징하는게 모드보다 낫지 않을까요? 이러한 이유에서 우리는 포커스모드 개발을 중지하고, 모든 요소의 커스터마이징에 집중하고 있습니다.

최초의 To do list 드래그

10. 마우스 우클릭

자주 가는 사이트 삭제를 어떻게 구현할까 고민하던 중 마우스 우클릭을 추가해보았습니다.

자주 가는 사이트를 우클릭 한 상태

우리가 아이디어 및 개발에 사용하는 비캔버스에서도 우클릭이 아래와 같이 다양하게 사용되고 있습니다. 저희도 이런 우클릭 인터페이스를 개발해 더 멋진 인터렉션을 구현하고자 합니다.

비캔버스의 우클릭 화면

11. 성장

프로젝트 오로라라는 이름으로 시작한지 오늘로 약 50일이 지났습니다.

메인 서비스 아이디어 캔버스

최초의 오로라 플래너 캔버스

최초의 캔버스를 작성하기 전부터 수많은 노트에 프로그램 아이디어를 기록했고, 제대 이후 진행할 스타트업의 첫 마일스톤입니다.

이후 작성된 다양한 캔버스들

아직까지 작성된 기획 및 아이디어 정리 등에 사용된 실제 노트는 3권과 약 80여장의 캔버스입니다. 현재 주간 사용자는 500명, 웨일과 크롬에서 제공되고 있습니다. 구성하고 있는 코드는 2724줄, 사용된 시간은 개발 160시간 이외 계획 및 아이디어, 디자인 등을 합해 400시간 가량입니다.

12. 에어 데스크

7월을 기대하고 있습니다. 이름도 수정했고, 이에 따라 새로운 로고를 준비중 입니다. BI 작업을 진행중이고, 새로 참여하게 된 팀원들과의 만남도 있을 예정되었습니다. 다음주부터 8주만에 휴가를 나가게 되는데 이 시간동안 작업을 바탕으로 아직까지 이야기 하지 않은 기능들을 구현할 뿐 아니라, 더 멋진 디자인으로 변경될 요소들을 준비중입니다.

더 심플하고 직관적인 디자인으로

에어 데스크는 내년 6월까지 500만명의 사용자를 목표로 하고 있습니다. 크롬에서 가장 많이 사용하는 모멘텀보다 180만명 많은 숫자를 목표로 합니다. 그리고 그 다음엔 이와 연결된 웹서비스, 모바일 어플리케이션, 그리고 클라우드 시대가 오게되면 시도해볼 서비스까지 꿈꾸고 있습니다.

이게 로켓을 만드는 일이라 믿고 있습니다. 더 멋진 걸 만들고자 합니다.

Contact Email: joshephan0204@gmail.com

facebook: https://www.facebook.com/sanghun.han.39

keyword