brunch

매거진 airdesk

You can make anything
by writing

C.S.Lewis

by 한상훈 Jul 08. 2017

120시간, 오로라 플래너 만들기

더 나은 디자인을 위한 준비

1. 50시간 크롬 확장 프로그램 만들기

2. 65시간 크롬 확장 프로그램 만들기

3. 80시간 크롬 확장 프로그램 만들기

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

**. 오로라 플래너 릴리즈 노트


이번 이야기는 100시간 이후 20시간을 다룹니다.




#0. 비상근무

저는 자주 이야기했지만 군인으로 복무중입니다. 이번 주에는 여느때와 달리 버전 업데이트가 거의 없었습니다. 이유는 한 주간 비상 근무 팀에 들어가 있었기 때문입니다. 그 결과 많은 버전 업데이트는 없었지만 그동안 있었던 일들을 적어보고자 합니다.



#1. 웨일 출시

웨일의 기본 탭 화면

웨일은 네이버에서 제작한 브라우저입니다. 웨일은 크롬과 동일한 크로미움 기반의 브라우저기 때문에 크롬의 확장프로그램을 그대로 이식할 수 있습니다. 저처럼 확장 프로그램을 제작하시려는 분들에게는 정말 좋은 소식입니다. 이런 기술적 바탕이 있기에 약간의 수정을 통해 웨일에 등록하게 되었습니다.


스토어에 올라간 오로라 플래너

기분 좋은 요소는 웨일 스토어는 오픈한지 얼마 안되서 제 프로그램이 전체 14번째로 등록된 프로그램입니다. 그 덕분에 노출도 잘되고 새 탭이라는 부분에서 독점적인 위치를 가지게 된 것 같습니다.


오로라 플래너 설명화면

한가지 독특한 점은 웨일은 심사를 거쳐서 버전 업데이트가 되는 방식입니다. 크롬은 버전 업데이트를 해도 따로 검사 과정 없이 빠르게 진행되는 반면 웨일은 상당한 시간이 걸립니다. 7월 2일 프로그램을 등록했는데, 완료된건 7월 4일인걸 보면 여러 절차가 진행되나봅니다.


오로라 플래너 설치 직후 모습

웨일에서 설치했을 때의 모습입니다. 오로라 플래너는 크롬보다 웨일에서 더 잘어울리는 것 같습니다. 그 이유는 폰트입니다.


Roboto 문제

크롬 브라우저가 좋은 브라우저지만 한가지 어처구니 없는 실수가 Roboto 폰트의 표시입니다. font-weight를 잘 반영하지 못하거나, 아예 다른 폰트로 읽는 경우도 있습니다. 그래서 아직까지 Roboto를 기본 폰트로 사용했지만 렌더링된 실제 폰트는 지역별로 다르게 나오는 상황이었습니다. 한국의 유저분들은 맑은고딕으로 나왔을 것이고, 외국 분들은 아마도 Arial로 표기되는 문제였습니다.


나눔스퀘어 폰트  

이러한 이유 뿐 아니라 사이버 지식 정보방은 구글 폰트를 가져오는데 매우 느린 현상이 발생합니다. 그래서 직접 링크를 통한 폰트 주입이 어려웠고, 테스트도 어려웠으며, 로컬 파일로 세팅하는 경우 확장프로그램에서 잘 읽지 못하는 경우까지 모두 고려해야했습니다. 나눔 스퀘어 폰트는 구글 폰트가 아니면서 한글과 영어 모두 편안하게 읽히는 폰트를 찾게 되었습니다.  또한 네어버에서 제공하는 CDN에 폰트가 올라가 외부 링크를 통해 불러들어와 로컬에 세팅할 때 생기는 문제도 해결했습니다.

나눔 스퀘어에서 써본 오로라 플래너


 #2. 파이어폭스 에드온

Search and New tab by Yahoo의 화면

어찌보면 너무 빠르게 넓히는 것 같기도 하지만, 파이어폭스의 새 탭 프로그램은 아쉬운 점이 많습니다. 가장 많이 사용하는 'Search and New tab by Yahoo'은 올드한 UI와 제약들이 많아 보였습니다. 파이어폭스의 본래 느낌하고도 동떨어진 느낌을 줍니다.  파이어폭스에도 오로라 플래너를 옮기는 시도를 진행중입니다. 소스 코드 수정 및 데이터 처리 테스트를 거친 오로라 플래너를 파이어폭스에서도 보실 수 있을 것입니다.(~7월 중)


#3. 언어변경

언어 선택 화면

웨일의 한국 사용자 분들이 대부분이셔서 한국어 버전을 추가해보았습니다. 모든 부분이 한글로 변경될 필요는 없을 것 같아 설정 등의 요소에만 우선 적용하였고, 피드백에 따라 언어 지원 범위를 늘릴 예정입니다.(7월 8일 현재 크롬에서는 적용되었지만 웨일에서는 아직 반영되지 않았습니다.)


#4. 마우스 오버 효과

Todo list의 제목을 변경할 때 그전까지는 변경이 가능했는지 모를 수 있었습니다.(표시가 없으니..) 그래서 제목 부분에 마우스를 위치시키면 연필모양이 생기는 효과를 추가했습니다.


또한 포스트잇의 X버튼이 언제나 보였는데, 이것도 마우스 오버에서 나타나도록 변경되었습니다.


#5. 라이트모드

저번 글에서 포커스 모드를 추가하겠다고 이야기했습니다. 포커스 모드에 들어갈 요소들을 구현하기 전에 배경화면만을 보기 위해 설치하는 분들도 있을 거라고 생각했습니다. 그래서 멋진 화면들도 많으니 안의 구성요소를 모두 지워주는 토글 단축키를 추가해 라이트모드를 구현했습니다.


[`] + [Q] 버튼을 누르시면 정보 아이콘을 제외한 모든 요소가 사라지게 되고 현재 상태를 기억합니다. 라이트 모드를 사용하시면 배경화면만 나타나는 효과가 있는데, 이런 분들을 위해서 더 많은 배경화면을 빠르게 로드할 방법을 준비중입니다.


#6. 단일 컬러 배경화면

배경화면이 매번 전환되면 집중력에 방해될 수도 있습니다. 그래서 단일 컬러를 사용해서 빠르게 켜지고, 잘 보이는 컬러로 설정할 수 있도록 하였습니다. 다만 아쉬운 점은 어울리는 컬러톤이 몇가지 없는 것 같습니다. 도리어 한가지 배경을 설정하는 기능을 추가하는게 더 좋아보입니다. 이 점은 로컬 파일을 읽고 올리는 기능이 필요하며 빠르면 7월 중에 추가할 예정입니다.


#7. next

7월에 나가는 휴가때 많은 기능을 추가할 계획을 가지고 있습니다. 저번처럼 40시간~50시간까지 진행해볼 생각입니다. 다음 기능은 우선적으로 D-day를 진행해볼 생각이지만, 보통의 D-day가 아니라 매우 특별한 놈으로 구상중입니다.

다양한 그래프 타입을 통해서 목표 완료 정도를 파악

또한 Todo list의 디자인과 완료된 모습을 더 멋지게 만들 예정입니다. 그냥 완료된 리스트가 한 개 추가되는게 아니라 그래프나, 시각화된 데이터로 표현해볼 계획을 가지고 있습니다.


그뿐 아니라 전체 디자인에 대한 설계도를 제작 중입니다. 이미 보신 분들도 계시겠지만 오로라 플래너는 현재 2명 + (n명)이 진행하고 있습니다.

오로라 플래너 제작자들

7월이 끝나면 와이어 프레임과 최종시안이 나올 것 같은데 이후에 구체적인 계획이 정립되면 공개적으로 팀원을 모집하고자 합니다.


오픈소스에 대한 부분도 지속적으로 논의 중입니다. 오로라 플래너는 내년 중순까지 확장 프로그램 포지션에서 가장 많이 쓰이는 프로그램이 되기 위해 노력중입니다. 이후에 더 독특한 웹서비스와 모바일로 연결되는 플렛폼 확장을 고려하고 있는데 오픈소스는 그 시점, 혹은 그 전 시점에서 모듈 형태로 참여할 수 있게 열 생각을 가지고 있습니다.


#8. 40 days

오늘로써 출시 40여일이 지났습니다. 320명정도의 사용자분들이 사용해주시고, 모두 높은 평점을 주셔서 원홯하게 성장해가고 있습니다. 처음을 생각해보면 정말 별거 없는데도 사용해주신 분들이 계실텐데, 이 모험이 어디까지 이어질지 궁금합니다.


저는 원하는 일을 하는 순간 속에서 살고 있습니다. 세스고딘이 말한 리마커블한 삶이 이것일지 끝까지 가보면 알겠지만, 더 많은 스토리가 생기는 오로라 플래너를 만들고 싶습니다.




Contact Info

Email: joshephan0204@gmail.com

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

Brunch: https://brunch.co.kr/@skykamja24 



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