50시간 확장 프로그램 만들기

4박 5일동안 있었던 50시간의 프로그래밍

언제던 내 삶의 목표가 보였으면 좋겠다.

인터넷을 하면서도 내가 무얼 하고 있었고, 무얼 해야할지 알 수 있으면 참 좋지 않을까요? 재밌는게 너무 많은 인터넷 세상 속에서 목표를 잃지 않고 리마인드 할 수 있는 프로그램을 한 번 만들어 보았습니다. 목표한 시간은 총 50시간입니다.

1. 무엇으로 만들까?

만드는 방법이야 많겠지만 몇가지 조건을 세웠습니다.

1) 복잡하지 않아야 해!

2) 유지 비용이 들지 않아야 해!

3) 자주 쓰는 용도여야 해!

그래서 적절한 플렛폼을 찾은게 '크롬 확장 프로그램'입니다. 그렇다고 제가 크롬 확장 프로그램을 자주 만져본건 아니었습니다. 이번이 처음이고, 생활코딩에서 소개한 영상을 두어번 본 게 끝이었습니다. 물론 틈틈히 프론트엔드 책과 영상을 보면서 공부한 정도입니다. 

이러한 백그라운드를 가지고 저는 크롬 확장 프로그램에서 '기본 페이지(+ 새 탭 버튼을 눌렀을 때)'에 간단한 플래너를 만들면 되겠다고 정했습니다. 

2. 준비를 해보자!(개발 전 스케치)

먼저 다른 사람들이 어떤 식으로 하나 확인해봤습니다. 멋진 기술은 따라해보기도 하고, 모티브로 삼기 위해서죠. 몇가지 툴을 사용했는데, 아이디어 정리를 위해서 '비캔버스'를 활용했습니다. 아래의 사진은 제작전에 작성한 캔버스입니다.

초기 아이디어 캔버스

처음 모티브는 책 '타이탄의 도구들'에 나오는 일화에서 얻었습니다. 한 유명한 사람이(와이어드의 창업자 였던거 같습니다.) 자신의 예상 수명을 계산하는 어플을 통해 남은 삶의 날들을 보면서 산다고 합니다. 이미지에도 나오듯 처음엔 '라이프 카운트 다운' 기능을 넣고자 했습니다. 그러나 제게 있는 제한된 시간을 활용해서 하기엔 적합하지 않다는 결론을 얻었습니다.

조사를 하면서 훌륭한 확장 프로그램인 'WunderList'와 'Momentum'을 모티브로 삼았습니다. 디자인이나 기능이 깔끔하고, 사용자의 취향에 맞게 추가할 수 있는 기능도 많았습니다.  

'Momentum'

이런 좋은 프로그램을 모티브로 제가 가질 수 있는 최대 시간인 50시간을 활용해 만들어보기로 했습니다.

3. 좋은 에디터는 뭘까?(~5시간)

크롬 확장 프로그램은 전적으로 웹의 프론트 기술이 많이 들어갑니다. 구조가 manifest.json, index.html, script.js 정도로 구성되는 간단한 구조로도 크롬 확장 프로그램은 제작할 수 있지만 실력이 많이 부족해서 여러 벽들에 부딪혔습니다.

처음과 끝은 언제나 서브라임 텍스트

에디터부터 알아봤는데, 이참에 'bootstrap studio'를 구매해서 빠르게 레이아웃부터 만들 생각이었습니다. 때마침 프로그램을 구매할 여력도 없어서 기존에 쓰던 'sublime text3'로만 모든 기능을 완료하게 되었습니다. 대신 처음 몇 시간동안 Avocode, Brackets, Google Web Designer 등을 살펴보면서 처음 5시간 정도는 소비되었습니다. Atom은 한번도 안 써봤는데 psd를 html로 바꿔주는 기능이 있다는 얘길 봐서 시도해보니 window 10에선 작동이 안된다는 걸(세팅을 조정하던지) 알게 되었습니다. Brackets는 psd를 html로 바꿔주는 기능이 [extract for Brackets(preview)]에 있었는데 최근 버전에 사라지게 되면서 사용을 못했습니다. 

4. 기반이 되는 기능들을 개발하자! (~30시간)

개발은 html를 짜고, 그 다음 js 파일을 생성해서 기능을 연결하기로 했습니다. 오로라 플래너의 핵심 기능은 목록을 저장하는 것이므로 데이터 저장, 그리고 가져오기, 삭제만 원활하면 성공이나 다름 없습니다. 그러나 제가 알고 있던 웹의 저장 방식을 바탕으로 로컬과 서버만 생각했습니다. 저는 유지비가 들지 않아야 하므로 서버는 만들 생각이 없어서 로컬만 처음에 생각했습니다.

그러나 크롬 확장프로그램의 내장 기능인 storage를 통해서 로컬에 저장하거나, 혹은 로그인된 모든 크롬에서 동기화 되는 sync기능을 가져올 수 있었습니다. 이로써 데이터 저장에 대한 고민은 사라졌고, 이 메소드를 이용해 데이터를 가져오거나 삭제하는 것을 원활하게 구성하기만 하면 됩니다. 만약 너무 일이 쉽게 된다면 적절한 API를(가령 배경사진을 외부에서 가져온다던지) 추가할 여유가 생길 수도 있었습니다.

데이터 처리 방식을 알았으니 자바스크립트 파일을 코딩하기 시작했습니다. 그런데 이게 생각보다 쉽지 않았습니다.

이벤트 처리문제

자바스크립트에서 자주 나오는 문제인 클로져, 이벤트 버블링과 캡처링 등으로 몇시간은 고생했습니다. 클로저는 즉시실행함수를 통해서 원활하게 처리했는데, 이벤트 처리 때문에 고역을 겪었습니다. 멍청한 짓이기도 한데, 여러 이벤트를 겹쳐서 코딩하게 되니 이벤트가 여러번 쌓이게 되는 현상이 생겼습니다. 그래서 버블링과 캡처링, 그리고 stopPropagation() 등을 활용해서 해결해보려고 했지만 방법이 잘못되었다는 걸 알기까지 수 시간을 써야 했습니다.

이벤트 분리 및 프로토타입 형태 구성

이벤트를 분리하고, 변수의 문제가 생기는 걸 방지하기 위해 프로토타입 형태로 분리해주는 방식을 사용했습니다. 이렇게 구성하니 코드도 깔끔해지고 중복되는 부분도 줄어들었습니다. 무엇보다도 직관적으로 이해되니 이상한 구조를 띄면서 콜백의 콜백을 쌓는 스택도 만들지 않게 되었습니다.

5. 레이아웃과 스타일 시트를 만들자! (~39시간)

한 3번째쯤 정한 레이아웃 구조입니다. 좌우에 플래그 이미지는 버튼을 의미하고, 나머지 네모 상자들은 적당한 위치를 잡는 용도입니다. 위에 보면 간단한 애니메이션 효과, 인풋 텍스트의 플레이스홀더를 랜덤으로 정해주자는 아이디어도 적어보았습니다.

일단 여기까지 머릿속에 두고 레이아웃을 위한 CSS를 구성해보게 되었는데, 처음으로 CSS를 모든 DOM에 대해서 해보다보니 계속 찾느냐고 시간을 많이 사용했습니다. display 속성이라던지, float 개념이라던지 하는걸 통해서 어느정도 반응성을 잡아주고, div들이 겹치지 않도록 노력해보았습니다.

저는 디자인에서 여러 도움을 받았는데, 차후에 같이 스타트업을 할 뛰어난 디자이너 친구가 제가 보여준 레이아웃을 가지고 좀 더 구체적인 디자인 도안을 보내주었습니다.

친구가 보내준 세번째 레이아웃 디자인입니다. 프론트 개발에서 굉장히 어려운 부분이 디자인 자체고, 디자인이 정말 많은걸 바꾸는 것 같습니다. 같은 기능을 해도 로고 하나 넣고 안 넣고가 다르고, 폰트가 조금만 달라져도, 사이즈가 조금만 커지거나 작아져도 분위기가 바뀝니다. 

반응형 디자인

좋은 웹디자인은 반응성을 가져야 합니다. 반응성이란 보는 화면의 크기에 따라서 변동이 되는걸 말합니다. 

좌측은 폭이 넓을 때 유튜브의 모습이고, 우측은 좁았을 때 모습입니다. 반응성은 기본적인 동작을 먼저 이해해야 하는데 저 같은 경우 CSS의 옵션들을 처음 사용해보다 보니 정말 오래걸렸습니다. 만든다기보단 배우는 입장에 가까웠습니다.  여전히 position이나, diplay 옵션 등이 정확히 뭘 의미하는지 잘 모르겠습니다. :) 하지만 이건 지속적인 업데이트를 하면서 발전시켜야 될 것 같습니다.

6. 완성(~50시간)

약 50시간이 걸려 완성을 하게 되었습니다. 기능은 목록을 작성하는 것, 보는것, 목록을 지울 수 있습니다. 어쩌면 남들과는 좀 다른 새 탭 화면이 되기도 합니다.

7. 마치며

오로라 플래너는 각오을 하고 만든 첫 작품입니다. 아이디어부터 해서 레이아웃이나 기능도 며칠씩 생각했던 것에 비해서 생각보다 심플한 결과가 묘한 느낌을 줍니다. 이게 50시간이나 걸려야 할까 싶기도 합니다. :) 처음이라 그렇겠지만 누구라도 백그라운드 없는 분야에서 만들수 있지 않나 그렇게 생각해봅니다. 

웹스토어 링크: https://chrome.google.com/webstore/search/aurora%20planner?hl=ko