Tablo - Bookmark and manage tabs

다운로드 링크 : Chrome WebStore - Tablo

우선 Tablo 앱을 만들게 된 것은 나만의 링크들을 담아두는 즐겨찾기를 만들고자 시작했고,

그 방식은 현재 열려있는 탭들을 나만의 리스트에 옮겨 관리할 수 있게 되는 방식을 원했다.

그래서 만들어진 것이 Tablo이고 아래는 기능에 대한 간략한 설명이다.

열려있는 탭을 기준으로 나만의 북마크 리스트 만들기

우측에 현재 열려있는 탭의 리스트가 있다,

좌측에는 'trello' 혹은 'Github projects'와 비슷한 인터페이스의 칸반 보드가 위치한다.

우측의 열려있는 탭 리스트에서 링크를 드래그하여 좌측의 원하는 칸안에 드랍하면 된다.

웹 서핑 중 페이지 링크를 담기

Cart 기능이라고 불린다. 웹 서핑중 이 페이지를 Tablo에 저장하고 싶다면,

우측 상단에 크롬 확장 프로그램 툴바에 위치한 Tablo 아이콘을 클릭하면 '카트에 담기'가 보이게 되고 해당 기능을 이용하면

Tablo에서 우측에 Cart 부분에 담기게 된다. 이제 링크를 Cart에서 드래그하여 원하는 곳에 분류하면 된다.

개발

전반적인 개발 스택은 아래와 같다

• React
• Redux
• Webpack
• SASS(SCSS)
• Chrome Extension

우선 React + Webpack으로 개발을 시작했다. 개발을 시작하자마자 바로 문제점을 만났는데 크롬 확장프로그램을 개발 중 계속해서 빌드하고 새로고침하는 방법을 쓰기는 너무나도 불편했다. 해결점을 찾다가 한 레포지토리(link)를 발견해서 개발 중에도 계속해서 build 폴더가 변경되면서 핫로더 기능이 작동할 수 있게 되었다. 이 레포지토리를 클론하고 이 프로젝트에 맞게 Webpack을 수정하고 개발하기 시작했다.

여러 컴포넌트가 있고 각 컴포넌트간에 드래그 앤 드랍이 왔다갔다 하면서 데이터를 관리하기가 어렵다는 것을 느끼게 되어 Redux를 쓰기 시작했다. Redux를 기본만 익혀두고 안쓴지 오래되었기 때문에 다시 익히는데 시간이 조금 오래 걸렸다. 지금 reducer 코드도 정리 안 된 것이 많지만 일단은 나중에 리팩토링하기로 했다.

기본적으로 Redux를 써서 데이터를 관리하지만 데스크탑, 노트북이든 어디서든 똑같은 데이터가 공유되기를 원했다. 로그인 기능을 활용하기엔 정적 사이트인 크롬 확장프로그램은 어려웠고 그래서 Chrome Extension의 기능을 가져다쓴 Sync Storage를 활용해 어디서든 크롬 브라우저에 로그인만 되어있다면 데이터가 공유 될 수 있도록 했다.

드래그 앤 드랍 부분이 이 프로젝트에서 상당히 많은 부분을 차지하는데 일단 라이브러리 없이 개발하고 싶었다. 그렇게 개발하였고 지금은 동작 부분에서는 문제가 없지만 코드 측면에서 많아진 드래그 앤 드랍 관련 함수들을 어떻게 정리할지가 고민이다. 또한 브라우저에서 마우스를 따라오는 드래그하는 개채가 기본적으로 opacity가 정해져있어 그것을 어떻게 해결할지도 고민이다. 윈도우 환경에서는 특히나 더 심해 드래그하는 개체가 잘 보이지 않는다.

주절주절 말이 많았지만 지금까지 개발 후 다음으로 해야할 것들을 정리해보면

• Redux 스터디 및 Redux 코드 리팩토링
• DnD 관련 함수 정리
• 드래그 개체의 opacity 조절 방법 찾기

• 추가적인 기능 구현

  • 칸반 보드의 색상 커스터마이징이 가능

개선할 것이 많긴하지만 일단 어느정도 원하는 기능이 다 담길만큼 개발했다.

백로그없이 기존에 생각하고 있는 것대로 구현하고 개발을 어느정도 마쳤더니 정리가 안된 느낌이 있지만 일단 지금은 이 프로젝트에 계속해서 시간을 투자할 수 없어 여기까지하고 차후에 리팩토링을 통해 해결해야겠다.