brunch

매거진 airdesk

You can make anything
by writing

C.S.Lewis

by 한상훈 Feb 17. 2018

에어데스크 + 메모 에디터

에어데스크 4.3 버전

스케쥴을 메모하지 않는 사장은 그 자리에 앉을 가치가 없다

핸리 포드



에어데스크새 탭을 바꿔주는 브라우저 확장 프로그램입니다.  그러나 아직까지 그 어떤 새 탭 프로그램도 메모에 다양한 옵션을 준 적은 없습니다. 한가지 폰트나 고정된 메모 색이 전부였습니다만 에어데스크는 멋지고 보기좋게 사용할 메모 편집기를 추가했습니다.

메모와 텍스트 에디더, 에어데스크 4.3버전

폰트 변경, 사이즈 조절, 폰트 색상, 배경 색상, 리스트 만들기, 되돌리기, 앞으로 돌리기, 굵게하기, 기울이기, 밑줄, 중앙선, 좌측 우측 중앙 양쪽 정렬, 들여쓰기, 내어쓰기를 제공합니다. 그런데 에디터 디자인이 저번에 말씀드렸던것처럼 비캔버스의 메모 에디터에서 가져왔습니다. 비록 지금은 비캔버스 스타일을 따라서 제작했지만 조만간 수정을 통해 에어데스크만의 모양으로 변경하겠습니다.


다양한 폰트의 메모

한국에서 가장 많이 사용하는 나눔 폰트 시리즈와 Open Sans와 Roboto 등의 대표적인 폰트도 사용하실 수 있습니다. 다음 버전에선 독특한 영문 폰트와 중국어, 일본어를 위한 폰트도 추가할 예정입니다.



다양한 색상의 메모

메모의 배경색과 폰트 색상 변경이 간편해졌습니다. 다양한 컬러로 메모를 작성할 수 있고, 어두운 배경의 메모는 기본적으로 하얀 글씨로 나타나 확인하기 쉽습니다.



메인 메뉴와 디데이 위젯

메뉴의 디자인 변경을 했습니다. 설정에 있는 테두리 변경 효과를 이제 메뉴에도 함께 적용됩니다. 위의 이미지는 테두리를 둥글게 했을 때입니다. 아이콘은 단색으로 수정했습니다. 마우스를 올리면 어떤 아이콘인지 설명해주기도 합니다.



버그 픽스

디데이의 날짜 오류

자주 가는 사이트 동작 오류

캘린더 동작 오류(완벽하게 고치진 못했습니다)




개발 노트

편집기 만들기

항상 그래왔지만 편집기 역시 어디서부터 시작해야할지 감을 잡지 못했습니다. 그래서 직접 만들기보단 플러그인(쉽게 프로그래밍하기 위해 자주 사용하는 기능을 만들어둔 것)이나 오픈소스를 활용하려했습니다. 마음에 드는게 한 두개 정도 있었고, 나머지는 다 부적합했습니다. 아쉽게도 마음에 들던 한 두개의 플러그인 마저도 포스트잇 스타일의 메모에는 적합하지 못했습니다.

사용하려고 했던 서머노트 에디터

한참을 조사해본 끝에 제가 찾던 편집기를 위지윅스(WYSIWYG)라고 불린다는 걸 알게 되었습니다. 위지윅스 편집기를 만드는 일은 생각보다 간단한 일이었습니다. 대부분의 기능은 document.execCommand 명령어로 모두 해결됩니다. 기능을 구현할 방법을 알았으니 디자인을 하면 끝나는 문제가 되었습니다. 디자인은 어떻게 보여줄 것인지와 안에 들어갈 아이콘 등을 정하는 일입니다. 이것 역시 간단하게 해결할 수 있었는데 바로 fontawesome을 사용했습니다.


폰트어썸

폰트어썸 홈페이지

폰트어썸은 예전부터 자주 들어보았는데 웹폰트 관련된 서비스라고 생각했습니다. 알고보니 아이콘을 글씨로 가져오는 신기한 기능입니다. 사이즈를 변경하고 싶으면 font-size 명령을 사용하고, 색을 바꾸고 싶으면 color를 쓰면 됩니다. 직관적으로 생각하기엔 사이즈는 width와 height를 변경해야지 하겠지만 폰트어썸에서는 폰트의 사이즈로 조절합니다.

편집기에 다양한 아이콘들

그 결과 각각의 아이콘을 쉽게 구했습니다. 심지어 웹에서 바로 가져오는 방식이라 용량을 잡아먹지도 않습니다. 한가지 궁금한 점은 브라우저 확장 앱은 보안상의 이유로 직접 CSS 파일이나 폰트를 가져오는 걸 막고 있습니다. 그래서 매니페스트 파일을 수정하거나 다른 꼼수를 사용해야만 하는데 이상하게 폰트어썸의 CSS참조는 막히지 않은게 놀라웠습니다.

바뀐 메인 메뉴

폰트어썸의 아이콘은 워낙 많은 분들이 사용하고 계시기에 친숙하고 심플한 이미지를 가지고 있습니다. 그래서 변경한 메뉴 아이콘이 더 자주 본 것 같고, 편하게 느껴지실 것이라 생각합니다.



다음 버전 계획

에어데스크 기본 폰트 커스터마이징

배경화면 이미지 히스토리

배경화면 목록 보기

배경화면 다운받기

웹폰트 사용

캘린더 이벤트 컬러

캘린더 드래그 버그 해결

메모 리스트 기능 강화

메모 기본 텍스트 컬러


지난 8개월동안 메모와 캘린더에 대한 요청이 많았습니다. 기능도 기능이지만 버그로 인해, 스타일로 인해 많은 조언과 건의를 받았습니다. 그래서 배경화면에 대한 개발을 우선하고 싶은 욕심이 있지만 캘린더의 안정적인 작동에 우선시간을 쓸 생각입니다.


위의 기능을 모두 포함한 버전은 3월 두번째 주까지 완성해보겠습니다. 감사합니다.

 

 



에어데스크 링크

크롬 웹스토어

웨일 스토어

http://www.airdesktabs.com/

매거진의 이전글 에어데스크 + 배경화면

작품 선택

키워드 선택 0 / 3 0

댓글여부

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