안녕하세요. 모슈의 대표 개발자입니다.

게시판은 거의 대부분 서비스의 필수 기능입니다.

흔하게 많이 쓰이는 거라, 별거 아니라고 생각 할 수 있지만,

사실 여기엔 굉장히 많은 기술이 적용돼 있습니다.

특정 기술 회사에는 게시판 담당 팀이 있는 경우도 있습니다.

한가지 질문 드려보겠습니다.

노션, 어떻게 만들어야 할까요?😎

들어가 있는 기술들을 잘개 쪼개보면 많이 막연할 거라는 생각이 듭니다. 해야될게 엄청나겠죠?

게시판의 경우 대부분 Copy&Paste로 쉽게 만들었던 것들이라 이런 독특한 경우는 직접 다 만들어야 하기 때문에 기술장벽이 느껴질 수도 있을거라 생각이 듭니다.

어떻게 만들어야 할지, 쫙쫙 플랜이 나오시는 분들은 머리가 좋으신 분이라 부럽습니다. 저한테 연락주세요! 친해집시다.😍

우리가 게시판으로 흔하게 접했던 것들은 워드프레스같은 블로그 서비스에 녹아져 있는거 일수도 있고,

네이버 블로그, 카페에서 사용하는 네이버 스마트 에디터 일 수도 있습니다.

젊은 분들은 모바일 폰에 들어가 있는 메모장이 친숙할 수도 있을것 같네요.

각기 상황에 따라 친숙한게 있을 수도 있고, 아니면 직접 붙여본 것도 있을수도 있고 다양할텐데요.

이 포스팅에선 게시판 기능을 구현할때 주로 사용하는 오픈소스, 상용소스, 그리고 철학이 담겨진 여러 코드들, 그리고 그런것들이 어떤 기술로 만들어지고, 어떤걸 만들 수 있는지 적어보도록 하겠습니다.

프런트엔드

CKEditor, TinyMCE

웹에서 게시판을 개발할때 한번쯤은 고려해보는 상위권에 랭크 돼 있는 기술입니다.

유료플랜, 무료플랜이 나뉘는데, 제품 상황에 따라 해당하는 라이센스에 대한 케이스를 명확하게 확인하고 써야 합니다.

저희같은 외주 업체는 클라이언트 상황이 다 다르고, 라이센스 이슈가 있을 수 있어 주로 제안 드리는 기술은 아닙니다.

Quill

요즘 모슈에서 주로 제안드리는 기술인데요. 

꽤나 자유로운 라이센스입니다. 

Ckeditor나 TinyMCE처럼 많은 기능들을 포함하고 있지는 않습니다.

저희는 해당 코드를 일부 수정해서 납품하고 있습니다.

Editor.js

이것도 무료 라이센스인데요. 노션 써보셨나요?

노션처럼 블록(한줄) 기반 텍스트 에디터입니다. json 형식으로 데이터를 저장하며, 콘텐츠를 유연하게 관리할 수 있습니다.

노션과 같은 서비스를 개발하고 싶다면, 해당 소스 사용을 검토해보시는것도 좋은 방법입니다.

그 외에 참 많은 소스들이 있습니다. 라이센스 복잡하고요. 그렇기 때문에 꼭 라이센스를 확인하시고 개발하시는 걸 권해드립니다.

백엔드

데이터베이스 설계 및 인덱싱

인덱싱: 게시판은 수많은 게시글과 댓글이 누적되므로, 적절한 인덱스 설계가 중요합니다. post_id, parent_id, created_at 등에 인덱스를 추가하여 조회 성능을 최적화할 수 있습니다. 특히 대규모 시스템에서 페이지네이션과 검색 기능을 지원할 때 인덱스는 필수적입니다.

데이터 파티셔닝: 대규모 게시판 서비스의 경우, 테이블의 크기가 너무 커지면 성능 문제가 발생할 수 있습니다. 이를 해결하기 위해 파티셔닝을 고려할 수 있습니다. 예를 들어, 날짜 또는 특정 범주에 따라 테이블을 분할하여 관리할 수 있습니다.

캐싱 전략

Redis 등 캐시 사용: 자주 조회되는 게시글이나 인기 있는 게시물의 경우, 데이터베이스 부하를 줄이기 위해 Redis 같은 인메모리 캐시를 사용할 수 있습니다. 게시물 내용, 댓글 목록 등을 캐싱하여 응답 시간을 단축할 수 있습니다.

TTL(Time-to-Live): 캐시의 TTL을 설정하여 캐시된 데이터가 오래되지 않도록 관리합니다. 게시판에서 빠르게 업데이트되는 댓글 등은 낮은 TTL을 설정해 실시간성을 유지할 수 있습니다.

검색 기능

Full-Text Search: 게시판에서 검색 기능은 중요한 요소입니다. RDBMS에서 기본 제공하는 Full-Text Search 기능을 활용할 수 있으며, 성능이 중요한 경우 Elasticsearch와 같은 검색 엔진을 도입할 수 있습니다. 검색어 하이라이트, 검색 결과 랭킹 등의 기능을 고려할 수 있습니다.

Elasticsearch: 많은 양의 게시글과 댓글을 빠르게 검색하기 위해 Elasticsearch와 같은 전문 검색 엔진을 사용할 수 있습니다. 이는 특히 대규모 서비스에서 성능을 크게 개선할 수 있습니다.

파일 업로드 및 관리

S3와 같은 객체 스토리지 사용: 게시판에서 이미지나 파일을 업로드하는 경우, 서버 로드 및 확장성을 고려하여 S3와 같은 객체 스토리지에 파일을 저장하는 것이 좋습니다. 이를 통해 서버의 부하를 줄이고, 파일을 안전하게 관리할 수 있습니다.

CDN(Content Delivery Network) 활용: 업로드된 파일을 전 세계 사용자에게 빠르게 제공하기 위해 CDN을 사용할 수 있습니다.(AWS에선 CloudFront)

+google의 경우 Storage가 s3와 동일한 개념이며, CDN은 Cloud CDN 입니다. 

CDN 서비스중 현재 가장 많이 사용 되는 서비스는 CloudFlare의 CDN 서비스입니다.

권한 관리 및 보안

ACL(Access Control List): 게시글과 댓글에 대한 읽기, 쓰기, 수정, 삭제 권한을 관리해야 합니다. 사용자 그룹별로 권한을 설정하거나, 특정 사용자에게만 권한을 부여할 수 있도록 설계할 수 있습니다.

CSRF/XSS 보호: 게시판은 사용자 입력을 많이 받기 때문에, CSRF 및 XSS와 같은 보안 공격에 취약할 수 있습니다. 이를 막기 위해 CSRF 토큰을 사용하거나, 사용자 입력을 적절히 필터링 및 이스케이프 처리해야 합니다.

확장성 고려

마이크로서비스 아키텍처: 대규모 서비스의 경우, 게시판 기능을 별도의 마이크로서비스로 분리하여 개발할 수 있습니다. 이는 각 기능의 독립적인 확장 및 배포를 가능하게 하며, 시스템의 복잡성을 줄이는 데 도움이 됩니다.

API Gateway: 여러 마이크로서비스가 있다면 API Gateway를 도입하여 클라이언트와 서버 간의 통신을 관리할 수 있습니다. 이를 통해 인증, 로깅, 부하 분산 등을 중앙에서 처리할 수 있습니다.

추가 고려 사항

최적화: 실전형 구조 및 쿼리 설계가 필요 합니다. 댓글 답글의 경우 id, parent_id 와 같이 상위 게시글을 알 수 있는 필드를 추가 해야하는데, 이런 케이스는 TypeORM과 같은 걸로 조회하면 데이터 요청이 비효율적으로 발생될 수도 있어서, 직접 쿼리를 짜거나, 쿼리 빌더(query dsl 같은)를 사용하는 것이 더 유리할 수 있습니다.

요즘 많이 쓰이는 실시간 에디터(동시성)

노션, 구글 시트, Figma 등과 같은 서비스를 보면 실시간으로 여러 사람이 수정을 하는게 반영되고 볼 수 있습니다.

이런 부분은 WebSocket, WebRTC등의 기술을 사용하고, CRDT의 구조로 데이터를 설계해야합니다. 

동시성 개념이 들어가면 프로젝트 난이도는 엄청나게 상승하기 때문에, 실력이 있는 개발자가 해야합니다.

동시 작업할 경우 기존엔 덮어지는 형태가 많아 여러 현장에 이슈가 많았으나, 점점 이런 동시성 작업도 커버 가능한 고급 기술들이 시장에 반영되는 추세입니다.

예시) 차트를 동시에 여러명이 수정함. 간호사1, 간호사2, 이런 덮어지는 걸 막기 위해서 기존엔 수정 가능한 필드를 많이 쪼개 놓는데, 그래도 덮어지는 경우가 있음.

AI

노션을 보면 AI 작성요청, AI 편집 요청 등이 있는데, 이런 느낌으로 AI를 활용한 게시판도 많이 나오는 추세입니다. 일반적으로 chatgpt api를 많이 사용하는데, 비용을 고려해서 3.5나 4o mini api가 많이 사용되고 있습니다. api를 어떻게 호출해서 token을 줄이는지(비용) 많은 실전 노하우가 나오는 중입니다.(영문 번역 후 요청, 파인튜닝과 같은 사전 학습 등)

저희 모슈는 창업 초기 메모장을 앱스토어, 플레이스토어, 웹 플랫폼 대상으로 출시한 경험이 있고,

그 이후에도 엄청나게 많은 웹사이트를 만들면서, 다양한 형태의 게시판을 만들었고,

다양한 형태의 기술 장벽을 만났고 그것들을 해결했고, 지금도 해결중입니다.✌️

게시판 관련 기술 고민이 있으신분은 언제든 연락 주세요. 도와 드리겠습니다. 클릭!