web15-OctoDocs

KO | EN

gitlite — search

#python #ai #typescript #llm #go #golang #android #rust #windows #awesome #kubernetes #awesome-list #pytorch #mcp

(★ 99)

문서들을 연결하는 순간, 새로운 영감이 태어난다! 🐙

web15-OctoDocs 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

[![Sprint 33](https://github.com/user-attachments/assets/2b23184d-90ed-458d-9dc4-dab9579c1e48)](https://octodocs.site)

<br>

<div align="center">
  
   ![Hits](https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fgithub.com%2Fboostcampwm-2024%2Fweb15-OctoDocs&count_bg=%23000000&title_bg=%23000000&icon=&icon_color=%23E7E7E7&title=hits&edge_flat=false) [![Group 112 (1)](https://github.com/user-attachments/assets/b7b4387e-ffe9-4469-82b7-c14509282d86)](https://octodocs.site)
 [![Group 83 (2)](https://github.com/user-attachments/assets/2d106d94-430c-47bc-a9e2-1f0026f76c2f)](https://github.com/boostcampwm-2024/web15-OctoDocs/wiki) [![Group 84 (2)](https://github.com/user-attachments/assets/b29b191b-8172-42a9-b541-40fdb8f165f3)](https://github.com/orgs/boostcampwm-2024/projects/120)

</div>

<h1 id="옥토독스소개">🐙 Octodocs 서비스 소개 </h1>
<div align="center">
<br>
<h3> 옥토독스, <br> 협업을 위한 <br> 연결형 지식관리 툴</h3>
<br>

![Group 117 (2)](https://github.com/user-attachments/assets/04e39b34-9483-4896-bd6b-6456c4784eee)

<br>

### 🪡 연결형 지식 관리 툴

📢 마크다운, 이미지, 코드 등을 활용해서 간편하게 **문서 작성**이 가능합니다. <br>
📢 작성한 문서들을 **연결**하고 **배치**하면서 새로운 아이디어를 쉽게 떠올릴 수 있습니다.

![문서 작성과 연결 gif](https://raw.githubusercontent.com/summersummerwhy/gif/main/391353713-1ac81d56-a0ce-403c-9e3f-7ba092b6a5b6-ezgif.com-video-to-gif-converter.gif)

<br>

### 👥 실시간 동시 편집 및 협업 툴

📢 에디터에서 간편하게 **실시간 동시 편집**이 가능합니다. <br>
📢 작성된 문서들도 **함께 연결하고 배치**해 보며 우리 팀만의 구조를 만들어 볼 수 있습니다.

![실시간 동시편집 gif](https://raw.githubusercontent.com/summersummerwhy/gif/main/391975638-86b0dcaf-3640-4836-8b91-207b39b17b05-ezgif.com-video-to-gif-converter.gif)

<br>

### 📮 워크스페이스 초대 가능

📢 우리 팀만의 **워크 스페이스를 생성**하고 팀원들을 **초대**할 수 있습니다. <br>
📢 워크 스페이스의 **공개 범위**를 설정해서 누구나 참여할 수 있는 공간도 생성이 가능합니다.

![워크스페이스 초대 gif](https://raw.githubusercontent.com/summersummerwhy/gif/main/391998820-0c096e40-bed4-4cee-bb8e-40f72a5d43f2-ezgif.com-video-to-gif-converter.gif)

<div align="center">
  <a href="https://octodocs.site/" target="_blank">
    ➡️ 지금 옥토독스 사용해보러 가기!
  </a>
</div>

<br>

> Octodocs팀은 **애자일한 개발**을 최우선 목표로 삼고, 이를 팀의 색깔로 자리잡게 했습니다. 부스트캠프야 말로 주차별로 고정 테스터를 확보할 수 있고, 이를 통해 **운영과 개발의 경험**을 해볼 수 있는 최적의 환경이라고 생각했기 때문인데요. 빠른 배포 후 매주 다양한 피드백을 받아오며 문제를 해결하고 개선해 나가는 과정을 직접 확인해보세요!

<br>

### 3주차 피드백 반영

→ [🔗 3주차 전체 사용자 피드백 반영 기록 보러가기](https://github.com/boostcampwm-2024/web15-OctoDocs/wiki/3%EF%B8%8F%E2%83%A3-3%EC%A3%BC%EC%B0%A8-%EC%82%AC%EC%9A%A9%EC%9E%90-%ED%94%BC%EB%93%9C%EB%B0%B1-%EB%B0%98%EC%98%81-%EA%B8%B0%EB%A1%9D)

![image 23](https://github.com/user-attachments/assets/a566ce1e-b2ab-4690-80a0-3189613debc2)

🙏🏻 **보드랑, 문서노드에 마우스 포인터가 달랐으면 좋겠어요.**

→ ✅ 캔버스에서 마우스를 움직이는 중인 유저들의 커서를 보여주고, 유저는 자신의 **커서 색깔을 커스텀**할 수 있는 기능을 추가했습니다. [PR 링크](https://github.com/boostcampwm-2024/web15-OctoDocs/pull/219)

<br>

🙏🏻 **연결같은거 하다보면 복잡해지네요**

→ ✅ 엣지들이 엉켜보이는 것이 문제점이라고 판단했고 엣지의 시작점과 끝점이 항상 **최단 경로**가 되게 하는 기능을 추가했습니다. [PR 링크](https://github.com/boostcampwm-2024/web15-OctoDocs/pull/201)

<br>

🙏🏻 **스크린 높이를 작게 한 상태에서 왼쪽 사이드바가 버튼 UI를 가려버려용**

→ ✅ 사이드바 UI를 수정, **사이드바를 닫을 수 있는 기능**을 추가했습니다. [PR 링크](https://github.com/boostcampwm-2024/web15-OctoDocs/pull/228)

### 4주차 피드백 반영

→ [🔗 4주차 전체 사용자 피드백 반영 기록 보러가기](https://github.com/boostcampwm-2024/web15-OctoDocs/wiki/4%EF%B8%8F%E2%83%A3-4%EC%A3%BC%EC%B0%A8-%EC%82%AC%EC%9A%A9%EC%9E%90-%ED%94%BC%EB%93%9C%EB%B0%B1-%EB%B0%98%EC%98%81-%EA%B8%B0%EB%A1%9D)

![Group 115 (1)](https://github.com/user-attachments/assets/1da2266f-247a-43ba-9b75-b7e4f7129b30)

🙏🏻 **테두리가 더 두꺼워서 에디터랑 아래의 기본 배경이 더 구분이 잘 되었으면 좋겠어요! 색상을 변경할 수 있으면 좋겠습니다!**

→ ✅ 노드의 색깔을 사용자가 결정할 수 있으면 공통적인 문제(노드가 배경으로부터 분리되어 보였으면 좋겠다)가 해결된다고 판단했고 **노드의 색깔을 커스텀**할 수 있는 기능을 추가하였습니다. [PR 링크 1(FE)](https://github.com/boostcampwm-2024/web15-OctoDocs/pull/201) [PR 링크 2(BE)](https://github.com/boostcampwm-2024/web15-OctoDocs/pull/373)

<br>

🙏🏻 **favicon에 문어 넣어주세요 문어 귀여워요...**

→ ✅ 현재 배포된 사이트 [**https://octodocs.site**](https://octodocs.site/)를 통해 확인할 수 있습니다.

<br>

🙏🏻 **사용자 프로필 (이름하고 색깔) 변경하는 기능이 잘 눈에 안 띄어요. 사용하기 쉬웠으면 좋겠습니다.**

→ ✅ 프로필을 변경할 수 있는 버튼을 눈에 띄는 곳에 새로 생성한 후, 사용자가 본인의 커서를 직접 보고 체험할 수 있는 **커서 프리뷰 기능**을 추가했습니다. [PR 링크](https://github.com/boostcampwm-2024/web15-OctoDocs/pull/274)

### 5주차 피드백 반영

![스크린샷 2024-12-03 오후 8 09 51 1](https://github.com/user-attachments/assets/74d02bff-e476-425c-8086-a377aa2cb482)

<br>

🚨 **데모 중 서비스가 다운되는 문제가 발생했어요**

> 5주차에는 데모 발표 중 사용자의 트래픽이 몰리면서 예상하지 못했던 버그로 인해 서버가 다운되었습니다. 이 또한 **실사용자로부터 온** 중요한 피드백이라고 생각하였고 다른 피드백보다 **서비스 복구를 최우선 과제로** 삼았습니다. 이 과정에서 어떤 문제가 있었고 이를 어떻게 해결했을까요?

→ [🔗 어? 금지, 모니터 앞에 3명 이상 서있기 금지](https://github.com/boostcampwm-2024/web15-OctoDocs/wiki/5%EF%B8%8F%E2%83%A3-5%EC%A3%BC%EC%B0%A8-%EB%B2%84%EA%B7%B8-%EA%B8%B0%EB%A1%9D)

<h1 id="핵심경험">🗜️ Octodocs 팀의 핵심 경험</h1>

### 🗣️ 실시간 편집 구현 과정

실시간으로 여러 사용자가 동일한 문서를 편집할 때, 충돌 없이 동기화하는 것은 어려운 문제입니다. Octodocs 팀은 이를 직접 구현하는 대신 **YJS**와 **Socket.IO**를 결합하는 전략을 선택했습니다. 하지만 이 두 라이브러리를 통합하는 과정에서 예상치 못한 문제들을 어떻게 해결했을까요?

→ [🔗 실시간 편집의 비밀, 지금 바로 확인하기](https://github.com/boostcampwm-2024/web15-OctoDocs/wiki/%EC%8B%A4%EC%8B%9C%EA%B0%84-%ED%8E%B8%EC%A7%91-%EA%B5%AC%ED%98%84-%EA%B3%BC%EC%A0%95)

<br>

### ☄️ 데이터 흐름 변경

Octodocs 팀은 기존 RESTful API 기반 상태 관리를 버리고 **YDoc 중심의 단일 Truth Source**와 **소켓 기반 단방향 흐름**으로 전환했습니다. 이로 인해 모든 상태가 YDoc을 통해 일관되게 관리되고, 데이터 흐름도 간소화되었습니다. 기존 방식을 버리고 이 변화를 선택한 이유는 무엇일까요? 또한, 중복 관리와 데이터 충돌을 줄이기 위한 **data flow 변화**의 핵심은 무엇이었을까요?

→ [🔗 데이터 흐름에 몸을 맡겨보기](https://github.com/boostcampwm-2024/web15-OctoDocs/wiki/%EC%86%8C%EC%BC%93%EC%9C%BC%EB%A1%9C-%EC%9D%B8%ED%95%9C-%EC%83%81%ED%83%9C%EA%B4%80%EB%A6%AC%EC%9D%98-%EB%B3%B5%EC%9E%A1%EC%84%B1%EA%B3%BC-%EB%8D%B0%EC%9D%B4%ED%84%B0-%ED%9D%90%EB%A6%84-%EB%B3%80%EA%B2%BD)

<br>

### 🛠️ FE 프로젝트 구조 개선

짧은 기간의 스프린트를 빠르게 반복하여 개발했던 Octodocs 팀은 어느 순간부터 기능을 추가하고 유지보수하기 어렵다는 문제점을 마주하였습니다. 기존 **프로젝트 구조**의 문제점을 어떻게 파악했고, 어떤 방법으로 개선 했을까요?

→ [🔗 FSD, 힙하지만 막 갖다 쓰진 않았습니다](https://github.com/boostcampwm-2024/web15-OctoDocs/wiki/FE-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EA%B5%AC%EC%A1%B0-%EA%B0%9C%EC%84%A0-%EA%B3%BC%EC%A0%95)

<br>

### 🔑 워크스페이스 별 권한 부여

Octodocs 팀은 배포를 끝낸 사이트를 발표에 직접 이용하다가, 발표를 듣는 사용자들이 발표 자료를 멋대로 변경할 수도 있다는 걱정을 마주했고 **사용자들이 워크스페이스별 권한을 관리**할 수 있어야겠다는 결론을 내렸습니다. 하지만 워크스페이스에 초대를 하면 알림이 가는 시스템을 만들기에는 개발 기간이 얼마 남지 않은 상태였어요. Octodocs 팀은 어떻게 워크스페이스별 권한 관리를 구현하였을까요?

→ [🔗 발표 자료 워크스페이스 접근 금지](https://github.com/boostcampwm-2024/web15-OctoDocs/wiki/%EC%9B%8C%ED%81%AC%EC%8A%A4%ED%8E%98%EC%9D%B4%EC%8A%A4-%EA%B6%8C%ED%95%9C-%EC%84%A4%EA%B3%84%2C-%EA%B5%AC%ED%98%84-%EA%B3%BC%EC%A0%95)

<br>

### ✨ 드래그 이벤트 발생 시 쿼리 최적화

노트 카드를 **드래그할 때 너무 많은 쿼리가 발생**해 서버가 멈추는 치명적인 문제가 있었습니다. 핵심 기능인 캔버스를 아예 이용할 수 없었기에, 반드시 해결해야 하는 과제였습니다. Octodocs 팀은 소수점 단위로 변하는 좌표를 DB에 저장하기 위해 어떤 최적화를 도입했을까요?

→ [🔗 우측으로 1mm만 옮겨주세요](https://github.com/boostcampwm-2024/web15-OctoDocs/wiki/%EB%8D%B0%EC%9D%B4%ED%84%B0-%EA%B4%80%EC%B0%B0%2C-%EC%BF%BC%EB%A6%AC-%EB%B0%9C%EC%83%9D-%EC%B5%9C%EC%A0%81%ED%99%94-%EA%B3%BC%EC%A0%95)

<br>

### 🧨 Redis를 활용해 데이터베이스 부하 줄이기

실시간으로 문서를 동시에 편집하면 굉장히 많은 변경 사항이 발생합니다. 누군가 타이핑을 할 때마다 변경 사항들을 모두 데이터베이스에 반영하기에는 부하가 너무 발생했기에, Octodocs 팀은 **redis를 도입**하기로 결정했습니다. 어떤 지점에서 redis 도입을 결정했고, 어떻게 redis를 활용하고 있을까요?

→ [🔗 Redis 같은 걸 끼얹나?](https://github.com/boostcampwm-2024/web15-OctoDocs/wiki/redis%EB%A5%BC-%ED%86%B5%ED%95%B4-%EB%8D%B0%EC%9D%B4%ED%84%B0%EB%B2%A0%EC%9D%B4%EC%8A%A4-%EC%BF%BC%EB%A6%AC-%EC%A4%84%EC%9D%B4%EA%B8%B0)

<br>

### 🐳 개발 환경, 배포 환경 및 CI/CD 개선해나가기

Octodocs 팀은 사용자 경험 향상은 물론, 일관된 코드 품질 유지와 **개발자 친화적인 쾌적한 개발 환경 조성**을 위해 많은 노력을 기울였습니다. 멀티 레포에서 모노레포로의 전환, GitHub Actions를 활용한 CI/CD 구축, Docker와 Docker Compose의 도입까지—우리는 어떤 변화를 거쳤을까요?

→ [🔗 환경 개선의 여정 따라가기](https://github.com/boostcampwm-2024/web15-OctoDocs/wiki/%EA%B0%9C%EB%B0%9C-%ED%99%98%EA%B2%BD%2C-%EB%B0%B0%ED%8F%AC-%ED%99%98%EA%B2%BD-%EB%B0%8F-CI-CD%EC%97%90-%EB%8C%80%ED%95%9C-%EA%B0%9C%EC%84%A0-%EA%B3%BC%EC%A0%95)

### System Architecture

![image (13)](https://github.com/user-attachments/assets/bee51119-c814-4f57-8cda-60ea4bfdd2dd)

<br>

### Tech Stack

<table>
    <thead>
        <tr>
            <th>Category</th>
            <th>Stack</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <p align=center>Common</p>
            </td>
            <td>
                <img src="https://img.shields.io/badge/Node.js-114411?logo=node.js">
                <img src="https://img.shields.io/badge/TypeScript-3178C6?logo=typescript&logoColor=ffffff">
                <img src="https://img.shields.io/badge/Socket.io-010101?logo=Socket.io">
                <img src="https://img.shields.io/badge/YJS-05A2BA?logo=yjs&logoColor=ffffff">
                <img src="https://img.shields.io/badge/Prettier-F7B93E?logo=prettier&logoColor=ffffff">
                <img src="https://img.shields.io/badge/ESLint-4B32C3?logo=Eslint">
                <img src="https://img.shields.io/badge/yarn-2C8EBB?logo=yarn&logoColor=ffffff">
                <img src="https://img.shields.io/badge/.ENV-ECD53F?logo=.ENV&logoColor=ffffff">
            </td>
        </tr>
        <tr>
            <td>
                  <p align=center>Frontend</p>
            </td>
            <td>
                <img src="https://img.shields.io/badge/Vite-646CFF?logo=Vite&logoColor=ffffff">
                <img src="https://img.shields.io/badge/React-61DAFB?logo=React&logoColor=ffffff">
                <img src="https://img.shields.io/badge/Tailwind_CSS-06B6D4?logo=tailwindcss&logoColor=ffffff">
                <img src="https://img.shields.io/badge/React_Query-FF4154?logo=reactquery&logoColor=ffffff">
                <img src="https://img.shields.io/badge/Zustand-443E38?logo=react&logoColor=ffffff">
                <img src="https://img.shields.io/badge/Novel-3C3C3C?logo=novel&logoColor=ffffff">
                <img src="https://img.shields.io/badge/React_Flow-0078D7?logo=reactflow&logoColor=ffffff">
            </td>
        </tr>
        <tr>
            <td>
                <p align=center>Backend</p>
            </td>
            <td>
                <img src="https://img.shields.io/badge/NestJS-E0234E?logo=nestjs&logoColor=ffffff">
                <img src="https://img.shields.io/badge/Redis-DC382D?logo=redis&logoColor=ffffff">
                <img src="https://img.shields.io/badge/TypeORM-FDF24A?logo=typeorm&logoColor=ffffff">
                <img src="https://img.shields.io/badge/PostgreSQL-4169E1?logo=postgresql&logoColor=ffffff">
            </td>
        </tr>
        <tr>
            <td>
                <p align=center>Deployment</p>
            </td>
            <td>
                <img src="https://img.shields.io/badge/nginx-014532?logo=Nginx&logoColor=009639&">
                <img src="https://img.shields.io/badge/Naver Cloud Platform-03C75A?logo=naver&logoColor=ffffff">  
                <img src="https://img.shields.io/badge/GitHub Actions-2088FF?logo=GitHub Actions&logoColor=ffffff">
                <img src="https://img.shields.io/badge/Docker-2496ED?logo=docker&logoColor=ffffff">
            </td>
        </tr>
        <tr>
            <td>
                <p align=center>Collaboration</p>
            </td>
            <td>
                <img src="https://img.shields.io/badge/Notion-000000?logo=Notion">
                <img src="https://img.shields.io/badge/Figma-F24E1E?logo=Figma&logoColor=ffffff">
                <img src="https://img.shields.io/badge/Slack-4A154B?logo=Slack&logoColor=ffffff">
                <img src="https://img.shields.io/badge/Gather.town-008B8B?logo=gather&logoColor=ffffff">
            </td>
        </tr>
    </tbody>
</table>
<br><br>

![Overview-variant (18)](https://github.com/user-attachments/assets/a503f8fe-bab9-4cf3-8d9d-98ff43ab0c3e)

|                                               [J032\_김동준](https://github.com/djk01281)                                                |                                                  [J075\_김현준](https://github.com/Tolerblanc)                                                  |                                               [J097\_민서진](https://github.com/summersummerwhy)                                                |                                                   [J162\_유성민](https://github.com/ezcolin2)                                                   |                                                   [J248\_진예원](https://github.com/yewonJin)                                                   |
| :--------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------: |
| <img width="204" alt="스크린샷 2024-10-29 오후 4" src="https://github.com/user-attachments/assets/71a5a38e-f60c-4f60-97e3-30d7a73a3c77"> | <img width="204" alt="스크린샷 2024-10-29 오후 11 41 04" src="https://github.com/user-attachments/assets/e093f852-a6ea-4937-b0ce-b89276bd7135"> | <img width="204" alt="스크린샷 2024-10-29 오후 11 41 55" src="https://github.com/user-attachments/assets/0f638ba9-a1ad-47b8-a874-957c0119384c"> | <img width="204" alt="스크린샷 2024-10-29 오후 11 41 00" src="https://github.com/user-attachments/assets/1d77b650-70f1-4dee-9489-dc0122b7c9ff"> | <img width="204" alt="스크린샷 2024-10-29 오후 11 40 31" src="https://github.com/user-attachments/assets/db99b6b2-ae06-4758-8687-17ebb860a52b"> |
|                                                                 **INFJ**                                                                 |                                                                    **INFJ**                                                                     |                                                                    **INTP**                                                                     |                                                                    **INFP**                                                                     |                                                                    **ISTJ**                                                                     |
|                                                                 **`FE`**                                                                 |                                                                    **`BE`**                                                                     |                                                                    **`BE`**                                                                     |                                                                    **`BE`**                                                                     |                                                                    **`FE`**                                                                     |

web15-OctoDocs

web15-OctoDocs 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

web15-OctoDocs

web15-OctoDocs 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README