소셜 북마크 - Intro (프로젝트 기획 및 소개)

소셜 북마크 프로젝트를 진행할 예정입니다.

트렐로 서비스와 비슷하게 구현할 생각입니다.

기획부터 설계, 구현, 테스트, 배포 등 전 과정에 대한 풀스택 내용을 담을 겁니다.

블로그에서는 개발 과정을 글로 요약하여 작성하고, 깃헙 레포지토리로 소스 코드를 링킹해서 제공할 겁니다.

또한 개발에 활용한 레퍼런스도 모두 함께 표시할 예정입니다.

*** 프로젝트의 메인 타겟 ***

• 구글링을 많이 하면서 학습하는 여러 좋은 레퍼런스 자료들을 나도 모르게 지나치고 잊어버리는 많은 개발자
• 팀 프로젝트 협업 시 활용하는 여러 웹 사이트 및 소스들의 정리에 대한 히스토리가 필요한 회사 또는 팀

*** 프로젝트의 Vision/Goals/Why? ***

• 개인적으로 학습을 하거나 여러 레퍼런스 자료들이 필요한 개발자한테는 구글링이 필수입니다.
• 구글링을 하면서 다양한 웹 사이트를 접속하게 되고 수많은 레퍼런스들이 나오게 됩니다.
• 모든 레퍼런스들을 다 크롬 탭으로 띄우거나 여러 개를 한번에 보기에는 너무 힘듭니다.
• 좋은 레퍼런스 자료들도 나중에 나도 모르게 프로세스 창을 닫거나 잊어버리는 경우도 많습니다.
• 따라서 그러한 사이트들을 북마크 형식으로 크롬 익스텐션을 활용하여 소셜 북마크 서비스에 저장할 수 있습니다.
• 소셜 북마크 서비스는 트렐로 형식으로 비슷하게 구성하여 전체적으로 크게 2가지 보드 타입이 있습니다.
• 하나는 개인을 위한 Personal 보드 타입 입니다.
• Personal 보드는 개인적으로 한번쯤 읽어 볼만한 사이트들에 대한 일회용인 To Read Bookmark List가 있고,
• 중요하거나 여러 번 보면 좋을 만한 북마크들을 저장할 수 있는 To Save Bookmark List가 있습니다.
• To Read Bookmark List는 한 번 북마크를 읽으면 자동으로 삭제되는 반면에,
• To Save Bookmark List 에서는 따로 Setting을 통해 영구적으로 북마크를 보존하거나
• auto delete period 설정이 가능합니다.
• Team 보드는 여러 사용자들을 초대하여 함께 팀 프로젝트를 할 때 필요한 레퍼런스들을 관리할 수 있습니다.
• 카테고리 별로 Bookmark List를 구성하여 구분할 수도 있고, 팀에서 제작하는 여러 프로젝트의 도메인이나
• 다양한 사이트들도 히스토리 형태로 정리하여 누구나 쉽게 필요할 때 활용하거나 인지할 수 있습니다.
• 그 외에 Public 보드도 계획중입니다.
• Public 보드는 말 그대로 소셜의 느낌으로 전체 사용자가 자유롭게 커뮤니케이션을 하거나
• Stack Overflow와 같이 개발 등에 대한 질의응답을 할 수 있는 공간이라고 보시면 됩니다.
• 채팅, 게시판 등 다양한 서비스가 있으며 많은 분들에게 유용한 서비스가 될 거라 생각합니다.

 

현재 생각중인 테크 스택은 다음과 같습니다.

 

• FE (Customer/Admin Project)
  • Customer Project: Next.js/React.js + Material UI, Chrome Extension
  • (Admin Project: Vue.js + Bootstrap)
• BE (Server Project)
  • Node.js + Express
  • MySQL
  • Socket.io
  • (Redis)
• Infra/SE
  • Oracle Cloud
  • Docker, (docker-compose; YAML 기반)
  • Linux
  • Nginx
  • Shell Script
• Collaboration
  • Git/Git flow
  • Github/Github Kanban Board
  • Trello
  • Google Drive
  • Docker Hub
  • Swagger Hub
• 추가 기능: 게시판, 채팅, 화상통화, ...

 

대략적인 일정은 다음과 같습니다.

 

기획 및 화면 설계 (~ 2021년 12월) [완료]

 - Usecase Diagram [draw.io] ✔

 - Service Design Logo [Canva] ✔

 - Gantt Chart [PPT Template] ✔

 - Requirements Specification [Excel] ✔

 - Prototype (PC/Mobile) [Kakao Oven] ✔

 

DB & S/W 설계 및 인프라 구축 (~ 2022년 1월)

  - DB Design

    - Class Diagram [StarUML] ✔

    - EERD [MySQL 8 Workbench] ✔

  - Infra Design & Build

    - System Architecture/Deployment Diagram [draw.io] ✔

    - 서비스 서버: Oracle Cloud - Web Server/DB Server 총 2대 무료 VM(Instance) [Oracle Cloud] ✔

    - 개발환경: Docker, (docker-compose) [Docker Hub] ✔

  - S/W Design

    - Sequence Diagram, Flow Chart, ... [draw.io]

 

Server 프로젝트

  - API Server: Node.js + Express, MySQL, Socket.io, (Redis)

  - API Specification [Swagger Hub]

 

Customer 프로젝트

  - Next.js/React.js + Material UI

  - ESLint [Airbnb] + Prettier

  - Chrome Extension

 

Admin 프로젝트

  - Vue.js + Bootstrap

  - TDD

 

다음 글 부터는 기획 및 화면 설계에 대한 내용부터 순차적으로 진행하겠습니다.

 

p.s 1) 저도 주니어 개발자 취업을 준비하는 입장으로 개발을 진행하면서 부족한 부분이 많이 있을 수 있습니다.

        따라서 깃헙 소스코드에 대해 더 좋은 아이디어나 함께 토론할 사항이 있으시면

        github issue로 남겨 주시거나 개발 블로그의 댓글로 남겨주세요.

 

p.s 2) MVP로 개발하여 베타 버전으로 런칭할 예정이라 위 사항들은 이상적인 경우이며 상황에 따라 달라질 수 있습니다.

       (기능이 많이 축소될 수 있습니다.)

 

p.s 3) 위 일정은 형식상 계획이며 Agile 하게 진행할 예정이어서 전 과정이 유동적으로 여러 번 반복될 수 있습니다.

 

p.s 4) 시니어코딩 유튜브를 운영하시는 시니어 개발자분으로부터 프로젝트에 대한 아이디어의 허락을 받았습니다.

        앞으로 그분이 소셜 북마크 관련해서 간단한 실습 영상도 올려주실 예정입니다.

        그러한 영상도 참고하고 개인적으로 추가적인 여러 학습을 통해 서비스를 확장하여 만들 예정입니다.