brunch

매거진 airdesk

You can make anything
by writing

C.S.Lewis

by 한상훈 Jun 27. 2017

100시간동안 오로라 플래너 만들기

모든 면에서 최고의 생산성을 주고 싶습니다.

오늘은 2017년 6월 27일입니다. 지난달 28일부터 개발을 시작해서 딱 30일째 되는 날 100시간을 채우게 되었습니다. 지난 시간까지의 기록들은 제 이전 브런치나 여러 커뮤니티 사이트에 공개되어있어서 확인하실 수 있습니다.


#0. 아이디어 노트

항상 사용하는 '비캔버스' 를 활용해서 아이디어 노트를 작성했습니다. 이번 업데이트에서 중요하게 생각한 부분은 드래그, 자주 가는 페이지, 마우스 오버, 숏컷, 검색 제공자 변경이었습니다. 그 중에서 가장 최근에 업데이트한 내용부터 설명해보겠습니다.


#1. 그리드에서 라운드로

지난 버전까지 자주 가는 페이지 디자인으로 많은 고민을 했습니다. 컬러톤을 지속적으로 바꿔보기도 했고, 크기를 변경하거나 텍스트 스타일을 바꾸는 노력을 했습니다. 그러나 모두 보면 볼 수록 답답했습니다. 그래서 스타일을 변경했습니다. 인피니티 탭과 파이어폭스의 야후 뉴탭 에드온을 모티브로 작업했습니다.

오로라 플래너 1.3.4 버전

위의 이미지는 가장 예쁘게 배치된 상태의 자주 가는 페이지 모습입니다. 저는 랜덤한 컬러가 배정되게 설정해서 나타내는 방식으로 했는데 이 방식의 경우 배경화면의 컬러톤에 따라 어울리는 정도가 크게 바뀝니다. 지금은 쿨톤의 배경화면이기 때문에 어울리지만 웜톤의 배경화면에선 어색합니다.


오로라 플래너 1.3버전

그보다 이전 버전에서는 투명도를 약간 넣어주었는데 이것도 뭔가 답답한 느낌이 들었습니다. 아무래도 이 사각형의 버튼을 제외하고 모든 구성요소가 진하고 하얀 버튼 형태로 구성되어있기에 그랬을 것입니다.


오로라 플래너 1.5.0.1 버전


그래서 수작업으로 짜기 시작했습니다. 페이지 랭킹을 통해서 자주 가는 페이지의 경우 아이콘을 구해서 적절한 사이즈로 배치되게 구성했습니다. 이 사진엔 없지만 그 외의 사이트에 대해선 간단한 아이콘을 띄워서 표현했습니다.


마지막으로 자주가는 사이트를 보기 싫다는 분들이 계셔서 on/off 기능을 추가했습니다.



#2. 숏컷

자주 가는 페이지를 아주 더 빨리 가는건 어떨까요?


크롬이 웹서핑에 편한 건 여러 단축키 덕분이라 생각합니다. 저만해도 자주 쓰는 단축키가 이렇게나 많습니다.

Ctrl + PageUp: 왼쪽 탭으로 이동
Ctrl + PageDown: 오른쪽 탭으로 이동
Ctrl + T: 새 탭
Ctrl + W: 탭 없에기
Ctrl + 1~9: 바로 숫자에 맞는 탭으로 이동
Ctrl + Shift + T: 지웠던 탭 다시 켜기


이렇게 여러 탭을 키고 작업해야하는 개발자들은 단축키가 익숙합니다. 그러나 아직까지 웹의 첫 화면에서 단축키까지 구현된 확장 프로그램은 없었습니다. 작업을 할 때 빠르게 체크하고, 또 메모하는 일에 최적화 시키기 위해서 숏컷들을 추가했습니다.


1) ESC + 숫자를 이용해서 자주 가는 페이지로 바로 갈 수 있습니다.

2) Shift + Spacebar를 눌러 Todo list를 on/off하기 쉽게 만들었습니다.

3) Shift + P 를 눌러 새 포스트잇을 바로 만들 수 있습니다.

4) Shift + C 를 눌러 Todo list의 위치를 초기화 할 수 있습니다.


#3. 드래그

아직까지는 Todo list의 드래그 기능이 없었습니다. 그래서 한 쪽 면에 고정되어 자유롭게 공간을 활용하는데 제약이 있었습니다. 이제는 Todo list 상단을 드래그해서 어디로던 이동할 수 있습니다. 만약 공간이 마음에 안든다면 초기화 할 수 있게 단축키를 만들었습니다. 이제는 오른쪽에도 포스트잇을 붙일 수 있습니다!

지난 버전의 todo list 스타일
어디로던 이동 가능한 현재 버전


#4. 마우스오버

마우스오버라는 건 어떤 것 위에 커서를 올릴 때 발생하는 이벤트입니다. 이전 버전에서 제공되던 마우스 오버는 크게 리스트에 올릴 때 생기는 체크박스, 삭제표시와 좌측 하단 링크들이었습니다.

꽉찬 설명이 들어간 세팅창과 마우스 오버 효과

이제 설정창에서 숏컷 가이드를 켜시면 몇가지 숏컷이 있음을 마우스오버일 때 볼 수 있습니다. 지금은 가이드가 2개만 뜨고 있는데 너무 지저분해 보일 것 같아서 가이드 on/off 기능을 없에고 그냥 숏컷 가이드를 만드는건 어떨까 생각하고 있습니다.


#5. 검색제공자 변경

이미 여러 크롬 새 탭 프로그램을 써보신 분들은 아시겠지만 검색 제공자를 변경하는걸 유료로 파는 프로그램이 많습니다. 아예 기능이 없는 프로그램도 많습니다.


Live Start Page

예시) Live Start Page

라이브 스타트 페이지는 굉장히 뛰어난 프로그램이고 멋진 기능을 많이 제공하는 새 탭 프로그램입니다. 그러나 검색 제공자가 기본으로 Live Start Page로 설정되어있습니다. 구글이나 바이두 같은 대표적인 검색엔진으로 변경하고 싶으면 Pro버전을 구매해야합니다.


오로라 플래너에서는 현재 5가지 검색 제공자 기능을 추가했습니다.

오로라 플래너는 무료입니다! 무료!

처음에 바이두를 넣을 생각이었지만 현재 대부분이 한국인이 사용하고 있고, 다른 나라에서는 영어권이라 바이두는 뺏습니다. 추가적으로 늘릴 시기가 오게 된다면 일본, 중국 등에서 많이 쓰는 검색 엔진을 추가할 예정입니다.


## 앞으로의 오로라 플래너

##. 포커스 모드

개발자를 위한 최고의 집중

단축키를 통해 포커스모드로 넘어갈 생각입니다. 여러분이 포커스 모드에 들어가시면 위와 같은 화면 구성을 보실 겁니다.


1) D-DAY

앞으로는 Todo list 안에 디데이 설정 기능이 추가될 것입니다. 디데이로 설정된 목표는 디데이 창에서 확인할 수 있고, 시간이 적을수록 눈에 잘 띄게 표현할 것입니다. 디데이 아래에는 그래프를 통해서 여러분의 성과를 보여주어 얼마나 진행되었는지 직관적으로 보게 될 것입니다.


2) Fast Link & Last Page

개발자들은 빠르게 이동하는걸 선호합니다. 클릭보다는 키보드가 빠르기 때문입니다. 패스트 링크와 라스트 페이지는 빠르게 이동하고, 최근에 있었던 위치를 보여주어 닫았던 것을 다시 켜는데 도움을 줄 것입니다.


3) Typepad

작업을 하다가 생기는 여러 일들에 대해서 기록하면 어떨까요? 혹은 떠오르는 아이디어를 쓰기 위해 기존에 쓰던 노트 어플로 들어가는건 번거로운 일일겁니다. 타이프패드를 통해서 더 큰 화면에 어떤 내용이던 적어둘 수 있습니다.


##. 구글 어스

구글 어스는 모두 사용해보셨을 겁니다. 그 중에서도 Earthview는 구글의 큐레이터들이 엄선한 1500개의 지구 사진으로 구성되어있습니다. 이 백그라운드는 자연의 웅장함이나 믿을 수 없는 사진들로 구성되어있는데, 이것을 오로라 플래너의 백그라운드로 가져올 생각입니다. 구글에 이메일을 보내 사용 허락을 받아야 한다고 하는데 아직은 진행중입니다.



##. 장난칠 수 있는 배경화면

여러분들도 이미 사용할 수 있는 기능입니다. 먼저 여러분이 쓰고 싶은 gif 이미지 링크를 찾아야 합니다.

세팅에서 링크를 이미지 주소를 넣고, 체크 버튼을 누르면 됩니다. 사실 이 부분은 제가 아직 고치지 못한 버그가 몇 개 있습니다. 파란 글씨가 .jpg, .gif or .png로 고쳐져야 하는거랑 체크 버튼을 눌러도 바뀌는게 없습니다;;


하지만 체크버튼을 누르고 새로고침을 하시면 gif 백그라운드를 보실 수 있습니다.

예시 이미지 주소) https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/c595e552948631.5922f8a761c38.gif

실제로 해보시면 움직입니다!

이렇게 외부 링크를 가져오는게 아직까지 동적 백그라운드를 구성하는 유일한 방법이었습니다. 그러나 앞으로는 몇가지 놀라운 기능을 추가할 생각입니다.


Webgl 기술 바탕의 데이터 시각화 라이브러리를 활용해 놀라운 백그라운드를 구성할 생각입니다. 예를 들면 앞으로는 빙글빙글 돌고 있는 지구본도 보실 수 있습니다.



### OK 그다음도?

이미 그 다음도 꿈꾸고 있습니다. 자세히 보시면 캔버스에 공개하지 않은 여러 부분들이 있습니다. 그 부분들은 그 다음 혹은 그 다음의 다음 보여드릴 내용들입니다.


오로라 플래너는 언제나 두가지에 집중합니다.


1. 당신의 꿈을 이루는 방법

2. 더 예쁘고, 편리한 친구


앞으로도 많이 기대해주세요. 감사합니다.


p.s 언제나 그렇지만 모바일에선 아직 사용 못한답니다. :)



웹스토어 링크: https://chrome.google.com/webstore/detail/aurora-planner/gheeojjcdeaefjjpploghdjpnbhanibe?hl=ko


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