원문 캡처 · github.com
원문 캡처 · github.com

FlowBoard 저장소는 HTML 파일 하나로 실행하는 칸반 보드다. 작업을 열 사이에서 옮기고, 포모도로 타이머와 우선순위 평가를 사용하며, 보드를 친구와 공유해 영상 통화와 채팅을 할 수 있다. 계정을 만들거나 프로그램을 설치하거나 비용을 낼 필요가 없다.

브라우저에서 사용해 보기를 누르면 기기에서 실행되며 데이터는 업로드되지 않는다. 직접 무료로 호스팅할 수도 있다.

FlowBoard는 박사 학위를 가진 재료공학자이자 영국 딥테크 스타트업 창업자인 아나스 아슈리(Anas Achouri)가 자신의 스프린트 관리에 쓰려고 만들었다.

기능과 이용 대상

FlowBoard는 간단하고 비공개인 작업 보드를 원하는 사람을 대상으로 한다. 프로그래밍을 몰라도 파일을 내려받아 두 번 클릭하면 쓸 수 있다. 한 번 5분 정도 설정하면 온라인에서 휴대전화로도 이용하고 친구와 공유할 수 있다.

  • 열과 스윔레인으로 보드를 구성한다. 작업을 끌어 옮기거나 작업 카드의 화살표를 눌러 다른 열로 보낼 수 있다.
  • 각 작업에는 메모, 하위 작업, 라벨, 마감일, 첨부파일, 예상 시간, 반복 설정을 넣을 수 있다.
  • 작업에서 재생을 누르면 포모도로 타이머가 시작되고 사용한 시간이 기록된다.
  • 파레토 보기에서는 적은 노력으로 큰 가치를 내는 작업을 확인한다. 기본 기능으로 사용할 수 있고, ‘어느 쪽이 더 중요한가’라는 짧은 질문에 답하면 순위가 조정된다. 입력한 목표에 맞춰 AI가 작업 순위를 매기도록 요청할 수도 있다.
  • 열 사이의 작업 흐름, 하루에 끝낸 작업 수, 시간 사용 내역을 차트로 보여준다.
  • 휴대전화에서도 쓸 수 있다. 열 사이를 밀어서 이동하고, 작업을 길게 눌러 끌어 옮긴다.
  • 온라인으로 호스팅하면 노트북과 휴대전화 사이에서 실시간으로 동기화된다.
  • 초대 링크로 특정 보드 하나만 친구와 공유할 수 있다. 친구는 해당 보드를 보고 수정할 수 있지만 다른 보드는 볼 수 없다.
  • 공유 보드마다 영상 통화와 채팅이 있다. 피어 투 피어 방식으로 연결하며 통화는 녹화되지 않는다.
  • 다크 모드, 검색, 필터, 실행 취소, 키보드 단축키, 백업을 지원한다.

이용 방법

파일을 열어 사용하기

이 방식은 설정이 필요 없으며 한 사람이 한 컴퓨터에서 쓰기에 적합하다. 휴대전화에서도 사용하거나 다른 사람과 공유하는 용도에는 적합하지 않다.

  • GitHub에서 초록색 Code 버튼을 누르고 Download ZIP을 선택해 저장소를 내려받은 뒤 압축을 푼다.
  • flowboard.html을 두 번 클릭한다. 브라우저에서 열리면 앱을 사용할 수 있다.
  • 입력한 내용은 해당 컴퓨터의 해당 브라우저 안에 저장된다. 메뉴(⋯)에서 Export backup을 선택해 때때로 복사본을 보관한다.

무료로 온라인에 올리기

처음 한 번 설정하는 데 약 5분이 걸린다. 설정하면 모든 기기에서 접속할 수 있는 비공개 웹 주소가 생기고 기기 사이에 데이터가 동기화된다. Cloudflare 무료 요금제를 이용하며, 개인이나 소규모 팀이 쓰기에 충분하다고 안내한다. 비용이나 신용카드는 필요하지 않다.

먼저 무료 Cloudflare 계정과 Node.js를 준비한다. Cloudflare 가입 페이지에서 이메일로 가입하면 되며 별도 설정은 필요하지 않다. 배포 스크립트가 사용하는 프로그램인 Node.js는 공식 사이트에서 LTS 버전을 내려받아 기본 설정으로 설치한다.

Windows에서는 저장소를 내려받고 압축을 푼 다음 deploy-online.bat을 두 번 클릭한다. 처음 실행하면 브라우저가 열려 Cloudflare 접근 허용을 요청하므로 Allow를 누른다. 창에 https://flowboard.yourname.workers.dev와 같은 주소가 표시될 때까지 기다린 뒤 주소를 기록한다. 이어 set-key.bat을 두 번 클릭해 보드의 비밀번호 역할을 할 강력한 키를 두 번 입력한다. 입력 내용은 보이지 않는다.

그다음 다음 형식으로 주소 끝에 키를 붙여 연다. 각 기기에서 이 링크를 북마크한다. 휴대전화에서는 ‘홈 화면에 추가’를 선택하면 앱처럼 사용할 수 있다.

https://flowboard.yourname.workers.dev/#key=THE-KEY-YOU-CHOSE

Mac이나 Linux에서는 폴더에서 터미널을 열고 두 스크립트 대신 다음 명령을 실행한다.

mkdir -p public && cp flowboard.html public/index.html npx wrangler@latest deploy npx wrangler@latest secret put BOARD_KEY

마지막 명령은 키를 입력하라고 요청한다.

나중에 FlowBoard를 업데이트하려면 새 버전을 내려받아 deploy-online.bat을 다시 실행한다. 작업은 파일이 아니라 Cloudflare에 저장되므로 유지된다.

친구들을 위한 작은 서비스 운영

saas 폴더에는 별도의 두 번째 버전이 있다. 이메일과 비밀번호 계정을 사용하며, 사용자마다 자기 보드를 갖고 공유할 수 있다. 소규모 팀이나 동아리에서 사용할 수 있는 구성이다. 인증 이메일 발송을 위해 Resend 무료 계정이 하나 더 필요하다. 설정 방법은 saas/README.md에 있다.

보드 공유

온라인 호스팅 방식(두 번째 선택지)에서 공유할 보드를 연다. 메뉴(⋯)에서 Board members, Invite links를 차례로 선택하고 상대 이름을 입력한 뒤 Create invite link를 누른다. 링크를 상대에게 보내면 그 보드 하나만 열린다. 같은 메뉴에서 언제든 초대를 취소할 수 있다. 자신의 키는 누구에게도 보내지 말고 초대 링크를 사용한다.

통화와 채팅

온라인 보드에서 사용할 수 있으며, 온라인 호스팅이나 서비스 운영 중 하나가 필요하다. 머리글의 📹 버튼을 누르면 통화 창이 열린다. Start call을 누르면 보드를 열어 둔 사람에게 알림이 가고 Join 버튼이 나타난다. 음소거, 카메라, 화면 공유, 통화 종료 기능이 있다. 👥 탭에서는 보드에 접속한 사람을 확인하고, 현재 보드를 보고 있지 않은 사람에게 보낼 통화 링크를 복사할 수 있다.

💬 버튼은 해당 보드의 채팅을 연다. 링크를 붙여 넣거나 메모를 남길 수 있으며 최근 메시지 150개가 보관된다.

음성과 영상은 브라우저 사이에서 직접 전송된다. 서버는 두 브라우저가 서로를 찾도록 돕는 역할만 한다. 통화는 녹화되거나 저장되지 않는다. 통화가 ‘connecting’ 상태에서 멈춘다면 한쪽이 엄격한 사무실 네트워크를 사용 중일 수 있다. 보드를 설정한 사람이 아래 기술 안내에 따라 해결할 수 있다.

파레토 보기와 데이터

머리글의 🎯를 누르면 작업이 가치가 높은 순서로 표시된다. ‘가치’는 영향도를 노력으로 나눈 값이다. 작업별로 두 값을 직접 설정할 수 있지만 필수는 아니다. 노력도는 예상 시간을 사용하거나 비슷한 작업을 완료하는 데 걸린 시간으로 계산한다. 마감일이 가까워지면 영향도는 자동으로 올라간다.

⚔ Duel은 작업 두 개를 보여주고 어느 쪽이 더 중요한지 묻는다. 6~10회 답하면 사용자의 판단을 반영해 순위를 조정한다. ✨ AI rank는 사용자가 입력한 목표에 맞춰 열린 작업 제목을 Cloudflare의 AI 모델에 보내 점수를 매긴다. 사용자가 직접 버튼을 눌렀을 때만 실행되며 데이터를 보관하지 않는다. 직접 입력한 점수는 덮어쓰지 않는다. 순위가 가장 높은 20%의 작업 카드에는 작은 🎯 표시가 붙는다.

데이터 저장 위치는 이용 방식에 따라 다르다. 파일을 직접 여는 방식에서는 모든 데이터가 브라우저에 남는다. Cloudflare에 호스팅하는 방식에서는 작업이 사용자의 Cloudflare 계정에 저장되며 FlowBoard 제작자를 포함해 다른 사람은 볼 수 없다. 첨부파일은 추가한 기기 밖으로 나가지 않는다. 메뉴(⋯)에서 Export backup을 누르면 모든 데이터를 파일 하나로 저장하고, Import backup으로 다른 컴퓨터를 포함해 복원할 수 있다.

운영자를 위한 기술 안내

엄격한 네트워크에서 통화가 연결되지 않으면 TURN 중계 서버를 추가한다. Cloudflare 대시보드에서 Realtime, TURN으로 들어가 키를 만든 뒤 폴더에서 다음 명령을 실행한다. 다시 배포할 필요는 없다.

npx wrangler secret put TURN_KEY_ID

npx wrangler secret put TURN_KEY_API_TOKEN

AI 순위 기능은 wrangler.jsonc에 이미 설정된 ai 바인딩을 통해 Workers AI를 사용한다. 무료 사용량은 하루 10,000 뉴런이며 작업 40개의 순위를 한 번 매기는 데 약 200 뉴런이 든다. 다른 모델을 사용하려면 wrangler.jsonc에 AI_MODEL 변수를 추가한다. 기능을 제거하려면 ai 줄을 삭제한다.

Cloudflare 없이 로컬 네트워크에서 동기화하려면 start-flowboard.bat을 실행한다. 노트북에서 작은 서버를 구동해 같은 Wi-Fi에 연결된 휴대전화가 동기화할 수 있다. 자세한 내용은 앱 안의 도움말을 참고한다.

FlowBoard는 프레임워크와 빌드 단계 없이 HTML 파일 하나로 구성된다. 보드 데이터는 Cloudflare Durable Object에 저장된다. 구조는 flowboard-how-it-works.md에 설명돼 있다.

라이선스는 MIT다. 사용·수정·공유할 수 있으며 자세한 내용은 LICENSE에서 확인할 수 있다. 이슈와 풀 리퀘스트를 받는다. 기여할 때도 단일 파일 방식을 유지해 빌드 단계나 실행 시 의존성이 생기지 않도록 하고, flowboard.html을 두 번 클릭해 독립 실행하는 기능을 막지 말아야 한다.