에어데스크 개발환경
에어데스크 개발 과정과 목표들
이번 휴가 때는 건의해주신 버그 픽스와 함께 프로그래밍 하는 영상을 만들어보았습니다. 위의 영상은 캘린더 사이즈 조절 기능을 개발하는 모습인데, jQuery UI의 resize에 맞추어 하위 HTML 컴포넌트도 반응하게 작업해보았습니다. 영상은 작업을 10~14배속으로 가속해서 녹화하였습니다.
개발환경
확장 프로그램 개발에는 무거운 IDE가 필요하지 않습니다. 저는 아직까지 sublime text를 사용하다가 이번에 atom을 사용해보았는데, 프로젝트별로 바로 볼 수 있어서 함수를 찾는데 더 빨라졌습니다. 웹스톰같은 유료 개발툴을 사용해본적이 없어서 무엇이 낫다고 말씀드리긴 어렵지만 기본적인 무료 에디터로도 충분하다고 생각합니다.
아이디어 공유 및 진행
처음에 개발했을 때부터 비캔버스 서비스를 이용하고 있습니다. 영상에서도 간간히 이 창이 뜨는데 현재까지 진행된 사항을 체크하고, 어떤 순서로 진행할 지 적어두고 있습니다. 그 외에도 스크린샷을 찍어 목업을 제작할 때도 쉽게 사용할 수 있습니다.
CSS 수정
확장 프로그램 개발이 처음이신 분들을 위해 설명드리자면 대부분의 CSS 수정은 F12를 눌러 개발자 도구 모드에서 테스트해보는 방법이 좋습니다. 보편적인 웹서비스의 경우 CSS가 적용된 모습을 바로 보는 기능을 제공하는 툴이 있으나 확장 프로그램의 경우 그렇지 못한 것 같습니다. 그 이유는 일반적인 웹환경이 아니라 브라우저 안에서 동작하면서, 내부의 명령이 적용되기 때문입니다. 만약 크롬 확장 프로그램을 제공하는 에디터가 있다면 알려주세요.
기능 테스트
개발자 모드에서 확장 프로그램을 설치를 했다면 준비 완료입니다. 소스 코드를 수정하고 저장하면 크롬은 즉각적으로 반영하게 되는데, 브라우저 콘솔에서 개발하는게 불편해서 소스 코드를 직접 수정하면서 개발을 합니다. 그러다 보니 영상에선 수많은 새로고침과 의미 없어 보이는 드래그가 반복해서 나타나게 되었습니다. 뻘짓을 하는 것처럼 보이지만 이상한 동작을 체크하기 위해서랍니다.
데이터 저장상태 확인
크롬 내부에 기록하는 데이터로 사용자의 커스터마이징을 저장하는데 이를 확인하기 위해선 F12를 눌러 콘솔창에서 직접 명령을 내립니다. 제 경우엔 간단하게
chrome.storage.sync.get((data) => {
console.log(data);
};
명령을 통해서 데이터를 확인하는데, 여러분도 에어데스크를 설치하셨거나 다른 확장 프로그램을 사용하신다면 어떤 데이터를 사용하는지 확인할 수 있습니다. 크롬 확장 프로그램은 2가지 형태로 데이터를 다루는데, 첫번째는 sync(동기화버전), local(로컬버전)입니다. 로컬 데이터를 확인하고 싶다면 sync부분만 local로 수정해서 입력하시면 됩니다.
앞으로의 개발 목표들팀원모집
제가 항상 에어데스크 글을 쓰고 있어서 마치 혼자서 작업하는 것처럼 보입니다. 하지만 에어데스크는 저 혼자가 아니라 팀원들의 노력이 담겨있습니다. 특히 디자인이 변경되는 부분들은 디자인 팀의 공이 큽니다. 그래서 항상 에어데스크는 팀원을 모집하고 있습니다. 저는 제가 개발한 부분이나 가지고 있는 철학을 쓰고 있지만, 더 많은 분들이 자유롭게 참여하실 수 있게 하고 싶습니다. 웹에서 OS를 구현하고자 하며 여러 재밌는 상상을 실제로 이뤄가고 싶습니다.
페이스북: https://www.facebook.com/sanghun.han.39
웹스토어: https://chrome.google.com/webstore/detail/airdesk/gheeojjcdeaefjjpploghdjpnbhanibe?hl=ko
웨일스토어: https://store.whale.naver.com/detail/kjffgkokcnmhcodinbodimmikdgnneob
