Home
Think Linked, Map Together
끈적끈적 꿀처럼 이루어지는 협업 지식 관리 툴
Honeyflow는 자연스러운 인터랙션 및 애니메이션과 함께 문서를 그래프 형태로 구조화할 수 있는 협업 지식 관리 도구예요.
이제 Honeyflow의 주요 기능들이 실제로 어떻게 동작하는지, 동작 화면과 함께 소개할게요!
문서들의 관계를 그래프 구조로 나타낼 수 있어요. 또, 간단히 드래그해서 새로운 문서를 생성하고 관계를 표시할 수 있어요.
각 그래프 구조는 다른 그래프 구조를 일종의 '폴더'처럼 관리할 수 있어요.
각 문서들 간의 구조와 그 속에 쓰이는 내용을 함께 편집할 수 있어요.
요구사항을 만족하기 위해 필요한 기술은 무엇인지, 적합한 라이브러리는 무엇인지 많은 고민을 거쳤어요. 어떤 선택을 하던지 선택은 근거가 명확히 존재하도록 했어요.
우리 팀은 React Konva를 사용해 Canvas 개발을 진행했어요. React 철학에 맞게 컴포넌트를 설계하고, 상태 관리를 효율적으로 처리하며, 재사용 가능한 구조를 고민했어요.
CRDT(Conflict-free Replicated Data Type)를 기반으로 한 협업 라이브러리인 Y.js를 활용해 실시간 동시편집 기능을 구현했어요. 공유 데이터를 다루고 통신 구조를 최적화하기 위해 많은 논의를 거쳤어요.
노트와 관계를 시각적으로 표현하는 과정에서 사용자가 긍정적인 경험을 할 수 있도록 노력했어요. 직관적이고 부드러운 인터랙션과 애니메이션을 구현하기 위해 세부적인 조정을 거쳤어요.
Docker를 활용해 환경을 동일하게 유지하며 CI/CD 파이프라인을 구성했어요. 개발 단계에서는 Docker-compose를 사용해 API 서버를 모의 운영했고, 이전 버전으로 복구할 수 있는 시스템을 만들어 안정성과 생산성을 높였어요.
📂 web29-honeyflow/
├── 📂 packages/ 모노레포의 패키지들이 위치
│ ├── 📂 backend/ 백엔드 관련 패키지
│ │ ├── 📂 src/
│ │ ├── 📄 package.json
│ │ └── 📄 tsconfig.json
│ ├── 📂 frontend/ 프론트엔드 관련 패키지
│ │ ├── 📂 src/
│ │ ├── 📄 package.json
│ │ └── 📄 tsconfig.json
│ └── 📂 shared/ 프론트엔드와 백엔드에서 공용으로 사용하는 패키지
├── 📄 eslint.config.mjs
├── 📄 pnpm-lock.yaml
├── 📄 package.json
└── 📄 tsconfig.json
| J077 김현진 | J082 나희진 | J095 문지후 | J108 박병주 | J218 전호균 |
|---|---|---|---|---|
 |
 |
 |
 |
 |
| BE | FE | FE | FE | FE |
| @fru1tworld | @heegenie | @CatyJazzy | @parkblo | @hoqn |