오로라 플래너 릴리즈 노트
꿈을 보는 사람은 꿈에 더 가까이 나아간다.
지금으로부터 20년 후에, 당신은 당신이 한 일보다 하지 않았던 일들을 더욱 후회할 것이다. 그리너 뱃머리를 묶고 있는 밧줄을 풀어 던져라. 안전한 항구로부터 벗어나 항해를 떠나라. 당신의 항해에 무역풍을 타라. 탐험하라. 꿈꾸라. 발견하라. - 마크 트웨인
저는 매일 제가 어떤 사람인지 알고 싶습니다. 다름 아닌 목표를 통해서 입니다. 오로라 플래너는 그 이유로 만들게 되었습니다. 평생 꾸어온 꿈이 무엇인지 다시 알려주고, 정신 차리라고 해줄 수 있는 원동력. 이 세상이 넓고 정말 멋지다는 것을 알려주기 위해서 만들게 되었습니다.
1. 할 일 목록
오로라 플래너의 프로토타입은 2개의 '할 일 목록'이 전부였습니다. 버튼을 누르면 입력할 수 있는 리스트가 바뀌는 아주 간단한 기능뿐이었습니다. 지금 생각해보면 멍청한 일이지만 아래 사진의 오른쪽 하단 동그란 아이콘이 입력 리스트를 바꿔주는 버튼입니다.
깃발이 그려진 버튼을 누르면 Lifetime Goal이라는 리스트가 보이게 됩니다. 버튼 위에는 삶에 대한 명언을 담았는데, 프로토타입(1.0 이하버전)에만 존재하고 버전 업데이트를 하면서 사라지게 되었습니다. 차후에 디자인적으로 복잡하지 않게 만드는 선에서 랜덤으로 바뀌는 명언을 넣을 생각입니다.
2. 현재시간 & 배경화면
두번째로 추가한 기능은 현재 시간입니다. 모든 데스크탑은 기본적으로 현재시간을 보여주고 있지만 대부분 오른쪽 아래 작은 창으로 확인하게 됩니다. 그러나 오로라 플래너는 여타 다른 새 탭 확장프로그램과 동일하게 현재시간을 큼지막하게 보여주게 되었습니다.
그 뿐 아니라 배경화면이 변화되었습니다. 최초의 목표였던 세상은 참 멋진 곳이다라는 점을 위해 넣게 되었습니다. 이때는 배경화면의 로딩속도가 느렸는데 이미지 사이트(unsplash)에서 이미지를 가져오는 형태였기 때문입니다. 이로써 꽤 멋진 화면은 있지만 직관성이 역시 부족했습니다. 좌측 상단에 입력창이 있고, 입력되는 리스트은 우측에 있기 때문입니다. 또한 버튼을 누르게 되면 하얀 입력창 아래에 인생 목표를 입력하게 되어있는데 이것 역시 그다지 좋은 방식같지 않았습니다.
3. 검색 & 리스트 제목 변경
많은 레이아웃 수정이 진행되었습니다. 숨겨져있던 Lifetime Goal을 항상 보이게 바꿨고, 리스트 안이 비어있을 때 기존엔 플레이스 홀더로 텍스트를 넣었지만 이젠 이미지로 변경했습니다. 입력하는 상자는 각각 리스트 하단부에 넣었고, 검색바도 추가하게 되었습니다. 정체가 모호했던 깃발모양 버튼을 검색 버튼으로 활용하게 되었고, 작게 공간을 차지하던 명언은 사라지게 되었습니다. 좌측 하단에 작게 보이는 세팅버튼도 있는데 이 시점에선 개발중이어서 릴리즈 되진 않았습니다.
리스트 제목을 변경하는 아이디어는 PGR21에서 제안을 받아 하게 되었습니다. 개발 세부적인 내용들을 보자면 각각의 리스트의 위치를 정할 때 상대적 위치를 많이 사용해서 설계했던 것을 리소스를 적게 사용하는 고정 형태로 많이 바꾸었고, 데스크탑 사용자들이 대부분 큰 화면에서 사용할 것을 예상해서 작은 사이즈에서의 반응성은 줄였습니다.
4. 배경화면 링크 설정
세팅창의 첫번째 기능이 생기게 되었습니다. 기본 백그라운드는 제가 뽑은 몇가지 배경화면이 랜덤하게 로딩되는 방식에서 외부의 이미지 링크를 입력해서 고정적으로 설정하는 방법입니다. 이 기능은 그다지 우선해서 만들 필요가 없었는데, 정말 필요한 기능은 직접 파일을 올려서 세팅하는 기능이 더 필요하기 때문입니다. 크롬의 파일시스템을 아직 다루는데 미숙해 링크를 우선 개발하게 되었습니다. 작은 변화로는 기존에 있던 깃발 버튼을 없에고 검색창 안에 돋보기 아이콘을 두어 더 보편적인 디자인으로 바꿨습니다.
5. 포스트잇 & 배경화면 로드 속도
포스트잇 개발에 들어갔습니다. 포스트잇은 굉장히 유용하게 사용될 수 있지만 동작 방식이 복잡해 만드는데는 꽤 오랜 시간이 걸렸습니다. 그럼에도 포스트잇 기능은 몇가지 문제가 있고 보완해야 할 부분들이 많습니다.
포스트잇 이동
이동을 할 때 상단의 작은 바를 잡아서 드래그 하게 됩니다. 이것 때문에 포스트잇을 너무 위로 끌고가면 삭제를 못하는 일이 발생하는데, 기존의 포스트잇의 클릭 이벤트를 더블클릭으로 바꾸어 설정하고 드래그 범위를 바꾸는 등의 아이디어를 가지고 진행중입니다.
포스트잇 사이즈 변경
포스트잇 테두리 부분에 더블 클릭 이벤트를 처리해 만들 생각입니다.
포스트잇 내부 데이터
현재는 URL을 넣는다고 바로 링크처리되지 않고 있습니다. 포스트잇의 내부에 입력되는 방식을 통해 이 점을 발전 시켜볼 생각입니다.
포스트잇 컬러
아래 사진은 포스트잇 기능을 추가하고나서 바로 찍은 사진입니다. 배경은 은은한 색인데 비해 너무 색이 돋보이게 되서 불편한 느낌마저 줍니다. 그런데도 릴리즈를 하는걸 보면 참 생각없이 한 것 같습니다. 지금은 파스텔톤 컬러로 어울리게 변화했습니다. 그러나 포스트잇의 원하는 배경색을 설정은 아직 개발하지 못했습니다. 포스트잇의 폰트 사이즈, 컬러 등과 함께 기능을 추가할 예정입니다.
배경화면 로드속도
아직까지는 배경화면이 로딩될 때까지 상당한 시간이 걸렸습니다. 적게는 1초, 많게는 1초 이상이었습니다만 많은 이미지들을 프로그램 내부에 넣었고, 이미지도 압축했습니다. 100kb~800kb사이의 용량을 가지는 이미지이며, 모든 사이즈는 2560*1600에서 깨지는 일이 없게 수정되었습니다.
6. 다양한 배경화면 & 링크
어제 오전버전의 오로라 플래너 입니다. 이제 총 75개의 배경화면이 랜덤하게 나타나고, 페이스북, 인스타그램, 유튜브로 바로 갈 수 있는 링크 아이콘을 추가했습니다. 마우스 오버 이벤트를 통해서 좌측 하단 아이콘들의 색이 변경되기도 합니다.
하단의 링크 아이콘은 차후 설정을 통해 자신이 원하는걸 추가하거나 삭제하도록 할 예정입니다. 여담으로 페이스북, 인스타그램, 유튜브를 넣은 특별한 이유가 있습니다. 저는 지금 개발의 대부분을 군대 안 '사이버 지식 정보방'에서 진행하고 있는데 줄을 서서 기다릴 때면 대부분의 병사들이 이 세 개의 서비스에서만 머무는 걸 봤습니다.
예상치 못한 문제점
확장 프로그램 안에 총 75개의 배경화면을 약 20메가바이트에 걸쳐 넣게 되었습니다. 그 이유에선지 설치 후 직후 새 탭을 누르게 되면 상당히 오래 로딩이 걸리게 되고, 사용자는 백색화면을 꽤 오래 보게 됩니다. 처음에 '싸지방'이 느려서 그런가보다 했지만 그게 아닌 것 같습니다. 이 점은 프로그래시브바 등을 통해서 표현을 하던지 아니면 근복적인 대책을 세워 해결해볼 생각입니다.
7. 리스트 on/off
할 일 목록을 보여주었다 없엤다 하는 기능을 넣어보았습니다. 우측 하단에 화살표 모양 버튼입니다.
리스트가 보여지고 있습니다.
리스트가 사라진 상태입니다.이 기능은 화면을 더 넓게 쓰기 위해서 넣어보았습니다. 맨 처음 시도는 각각의 리스트마다 아이콘을 넣어서 on/off 형태로 만들 생각이었습니다. 그러나 아이콘이 각각의 리스트를 의미해야하고(UI/UX적인 관점에서), 또한 on/off시 상태의 변화도 표현해야 하는데 어떤 식으로 표현할지 방법을 찾지 못했습니다. 그래서 가장 간단한 버전인 전체가 사라지는 기능을 우선 개발해보았습니다. 이 점은 같이 제작하는 디자이너 친구와 더 논의해야할 것 같습니다.
8. 앞으로의 오로라 플래너
먼저 가감없이 얘기하자면, 오로라 플래너보다 좋은 '새 탭 확장 프로그램'은 많이 있습니다. 그래서 고민했습니다.
새 탭에 있으면 좋은 기능들(내게 꼭 필요한 것들)을 가지고 있으면서도, 남들이 가지지 못한 재밌는건 뭘까?
제가 꿈꾸는 오로라 플래너는 다음의 기능들을 준비하고 있습니다.
키보드 인터페이스
저는 온라인에서 아날로그적인 편안함을 창조하고 싶습니다. 오로라 플래너는 칠판처럼 포스트잇을 붙이고, 목표를 붙이는 용도로 쓸 뿐 아니라 다른 기능들로도 확대될 것입니다. 키보드 방향키를 눌러 화면을 전환하고, 여러분이 사용하는 클라우드에서 API를 가져와 연동할 것입니다. 자주 사용하는 링크를 단축키를 설정해 바로 갈 수 있게 만들고, 키보드 동작에 따라 새 탭의 화면이 완전히 클리어 되고, 노트패드가 나타나는 기능들을 추가할 것입니다.
디데이
앞으로 목표 달성까지 얼마나 남았는지 직관적으로 보여줄 것입니다. 디데이는 특히 단기적인 목표에서 효과적일 것이라 생각하는데, 기존의 숫자를 보여주는 방식보다 더 인터렉티브한 방법을 준비했습니다. 저와 함께하는 뛰어난 디자이너 친구의 아이디어를 바탕으로 진행할 생각입니다.
스케쥴러
플래너의 기본은 스케쥴러입니다만 오로라 플래너에겐 스케쥴러가 없었습니다. 앞서 말씀 드린 키보드 인터페이스와 연동해서 스케쥴러가 나타나도록 만들 생각입니다. 이 스케쥴러의 데이터는 '할 일 목록'과 연동되던지 사용할 수 있는 다른 스케쥴링 서비스의 API를 활용해서 확장시킬 예정입니다.
애니메이션
간단한 애니메이션을 첨부하였지만 아직은 재미를 느낄 만큼은 아니라고 생각합니다. 현재 여러 라이브러리를 찾아보고 있습니다. 타이핑 할 때마다 생기는 효과들이나 할 일 목록이 빛이 나는 효과 등을 구현해볼 생각이고, 그 뿐 아니라 더 편한 UI를 위해서 사용되는 레이아웃 애니메이션도 계속 찾고 있습니다.
동적 백그라운드
이미 Wall paper 형태로 나온 확장 프로그램이나 Theme에서 활용되고 있습니다. 동적 백그라운드를 위해서 먼저 동적 이미지 데이터가 필요할 텐데 이 점에 대해서는 아직 깊게 준비하진 않고 있습니다. 예상하기로는 2.X 버전에서 구현할 예정인데 데이터 시각화 라이브러리(d3.js 등)를 활용해볼 생각도 있습니다.
이 외에도 세세한 변화나 디자인의 변경, 기능의 더 빠른 구현등을 위해서 공부하고 있습니다. 많은 분들이 실행하면 좋은 수많은 아이디어를 제안해 주셨고, 그것을 구현할 시간이 많지 않아 매일 고민이 됩니다. 제가 현재 군복무 중이라 다음번 휴가때 위에 적은 기능들 중 하나 이상을 목표로 개발을 진행할 예정입니다. 싸지방은 아무래도 집중해서 몇시간을 작업하기는 어려운 환경인 것 같습니다. :)
