ExtJS 7-CE 로 만든 초간단 다목적 오프라인 HTML5 트리 구조 텍스트 에디터
사무실이나 집에서 내가 쓰려고 만들었다. 사무실에서는 이런 저런 일로 메모할 일이 많은데, 윈도우에 기본으로 내장된 스티커 메모는 쓰기도 편하고 엑셀 표 같은 데이터도 저장할 수 있다는 장점이 있지만 양이 많아지면 나중에 찾기가 힘들어진다는 게 문제였다. 무엇보다 가장 큰 문제는, 바탕화면이 지저분해진다는 것이었다. 난 바탕화면에 단축 아이콘도 몽땅 다 없애버리고 꼭 필요한 것만 10개를 넘지 않게 남기는 사람이다. 많은 사람들이 엑셀이나 PPT 같은 문서를 바탕화면에 잔뜩 깔아놓기도 하는데, 난 도저히 그런 거 못본다. 그런 나에게 스티커 메모는 너무 보기가 안좋았다. 어떤 사람들은 에디트 플러스 같은 텍스트 에디터를 사용하기도 한다. 폴더 하나 만들어놓고 거기에 용도에 따라 파일 하나씩 만들어서 메모를 한다. 이렇게 그냥 텍스트 파일에 메모하는 것 역시 나중에 파일이 많아지면 필요한 내용을 찾는 게 번거로웠다. 마이크로 소프트의 원노트를 사용하는 사람들도 있다. 자주 쓰는 사람들은 편하다던데 난 좀 적응이 안되서 한동안 쓰다가 말았다. 그 외 온라인 기반의 앱들은 내가 일하는 사무실이 외부 인터넷 접근이 차단된 곳인지라 사용 불가...집에서는 글을 쓴다던가 혼자 이런 저런 생각들을 정리할 무언가가 필요했는데, 트리 구조로 개요나 큰 틀을 짜서 먼저 큰 그림을 그려볼 수 있는 것을 원했다. 그런데 그런 툴을 찾기가 쉽지 않았다. 그래서 직접 만들어보기로 했다.
처음에는 자바 스윙으로 하려고 좀 만들다가 UI 그리는 게 영 복잡스러워서 때려치고...SWT 는 어떨까 해서 공부 좀 하다가 너무 어려워서 때려쳤다. 그러다가 오랜만에 ExtJS 를 다시 봤는데, 마침 무료로 사용 가능한 커뮤니티 버전이 새로 나와서 공부도 할 겸 시도해보았다. ExtJS 는 버전 4부터 5까지 4년 정도를 썼다. 그 이후 안써본지 4년 정도 되었는데, 그 동안 크게 변한 건 딱히 없어서 다시 적응하는데 생각보다 긴 시간이 걸리진 않았다. 커뮤니티 버전은 Modern Theme 만 지원하는데, 지금까지 기억하고 있는 Classic Theme 의 다양하고 편리한 기능들이 상당 부분 빠져있었다. 차트도 없고 HTML 에디터도 없다. 그 외 여러가지 플러그인들도 빠져있는데, 다행히 트리 그리드의 드래그 드랍 플러그인은 포함이 되어있었다. 그거만 있어도 내가 만들고 싶은 건 만들 수 있었다. 커뮤니티 버전을 다운로드 받아서 설치하고 프로젝트 생성 후 서버 없이 폴더에서 바로 실행 가능하도록 이것 저것 손봐서 포터블하게 만드는 것만 일주일 정도 걸렸다. 그 후 틈틈히 기능 하나씩 구현해나가며 다 만드는 데 3주 정도 걸린 것 같다. 역시 ExtJS 의 신박한 버그는 변함이 없다. 언제나 예상치 못한 곳에서 돌발적인 버그를 선보이는 녀석. 몇 가지 버그 때문에 고생 좀 했다. 하지만 ExtJS 는 그 버그만 극복하고 나면 얻을 수 있는 것이 훨씬 더 많은 멋진 녀석이기도 하다. 집이랑 사무실에서 두 달 정도 쓰면서 몇 가지 버그를 고치고 사무실 동료들한테도 나눠줬다. 간단하게 쓰기에는 나쁘지 않을 것 같아 공개해본다.
사용법
- 압축 풀고 index.html 을 실행. ECMA6 지원 브라우저에서 실행 가능함. 크롬 추천.
- 모바일 디바이스 지원 안함. PC 전용.
- 좌측 트리 그리드 상단 툴바에서 폴더 추가, 페이지 추가 가능.
- 폴더와 페이지는 드래그 드랍으로 위치 변경 가능.
- 폴더와 페이지 제목 수정은 클릭 후 F2 키를 누르거나 마우스 롱프레스로 가능.
- 트리에서 페이지를 선택하거나(페이지 선택시 탭 열기 옵션 체크시) 우측 상단 Breadcrumb 바에서 페이지를 선택하면 우측 Textarea 에서 내용 수정 가능. Textarea 는 폰트, 크기, 줄간격, 두께, 색상, 배경색 수정 가능.
- 작업한 내용은 브라우저 창 닫을 때 자동으로 브라우저 로컬 스토리지에 저장함. 수동으로 저장할 수도 있음.
- 나중에 다시 index.html 을 실행하면 브라우저 로컬 스토리지에 저장된 작업을 자동으로 불러옴.
- 브라우저의 로컬 스토리지는 사이트 도메인에 종속되어 있는데, 파일은 도메인이 file:// 로 폴더 위치와 상관없이 동일함.
그러니까 폴더 위치를 바꾸어도 같은 로컬 스토리지를 사용한다는 뜻. - 브라우저의 로컬 스토리지를 사용하므로 브라우저를 삭제하거나 재설치하면 저장된 내용이 사라질 수 있음. 중요한 내용이라면 별도 파일로 저장 필요.
- "작업 파일로 저장" 버튼 : 모든 폴더/페이지 내용을 json 파일로 다운로드 받을 수 있음.
- "작업 불러오기" 버튼 : 저장했던 json 파일을 로드함.
- "일반 텍스트 파일로 저장", "html 파일로 저장" 버튼 : 현재 폴더/페이지 내용을 일반 텍스트 파일이나 html 파일로 다운로드 받음. 이렇게 저장한 파일을 작업 불러오기로 로드할 수는 없음.
- 별도 파일로 저장하지 않고 새 작업 시작하면 기존 내용은 모두 없어지고 복구 불가함.
- 검색 기능 지원 : 폴더/페이지 제목이나 내용 혹은 둘 다 AND/OR 조건으로 검색하여 좌측 트리 필터링 가능.
검색어는 여러 개 추가 가능하고, 추가된 검색어를 제거할 수도 있음. - 넘버링 기능 : 폴더/페이지에 일련번호 추가/제거 가능.
- 로컬 스토리지 용량 : 브라우저마다 다른데, 현재 크롬은 대략 5MB 까지 가능하다고 한다. 근데 언제 또 바뀔 지 모른다. 로컬 스토리지에 얼마나 많은 글자를 저장할 수 있는지 테스트 해봤는데, 500만 글자 정도 저장 가능했다. 글자 수만 따지면 장편 소설 책 몇 권 정도는 거뜬히 저장 가능하다는 얘기다. 브라우저가 버벅대는 등 성능은 떨어질 지도 모르겠지만...