뚝딱 DDUKDDAK

[ 누구나 쉽게 만드는 이벤트 페이지 빌더 ]

실시간으로 팀원들과 협업하여 배포까지 할 수 있는 웹 서비스

목차

1. 프로젝트 개요
2. 핵심 기능
3. 기술 스택
4. 시스템 아키텍처
5. 실행 방법
6. 팀원 소개

프로젝트 개요

• 목적: 웹 개발 지식이 없는 사용자도 쉽게 웹페이지를 제작하고 실시간으로 협업하면서 배포까지하는 환경 제공
• 진행기간: '24.06 ~ '24.07
• 주요특징: 실시간 협업, 드래그 앤 드롭 인터페이스, 즉시 배포 시스템

핵심 기능

1. 직관적인 웹페이지 제작

드래그 앤 드롭 에디터

• React DnD를 활용한 직관적인 컴포넌트 배치
• 컴포넌트 라이브러리에서 캔버스로 자유로운 드래그 앤 드롭

실시간 속성 편집

• 텍스트, 색상, 크기 등 실시간 수정
• 다양한 스타일 옵션 제공

2. 실시간 협업 시스템

CRDT 기반 동시 편집

• Y.js CRDT 알고리즘으로 충돌 없는 자동 병합
• 다중 사용자 동시 작업 지원

실시간 커서 및 채팅

• Awareness API 활용 커서 동기화
• 사용자별 컬러 커서 구분
• 커서 위치 기반 실시간 채팅

3. 간편한 배포 시스템

와일드카드 서브도메인

• 사용자 지정 주소로 즉시 배포
• DNS 설정 없이 자동 도메인 생성

접근성

• QR코드 자동 생성
• 모바일 최적화 지원

4. 반응형 웹페이지

자동 스케일링

• 디바이스 크기별 최적화
• 컴포넌트 자동 정렬
• 모든 디바이스에서 동일한 레이아웃

5. 템플릿 시스템

다양한 템플릿

• 용도별 최적화 템플릿
• 모바일/데스크톱 템플릿

기술 스택

Frontend

Backend

Infrastructure

시스템 아키텍처

실행 방법

bash

프로젝트 클론

git clone https://github.com/Jungle-5pointers/5_pointers.git

프론트엔드/서브도메인 서버 실행

cd my-web-builder/apps/frontend
pnpm install
pnpm dev

백엔드 실행

cd backend
npm install
npm start:dev

Y.js 서버 실행

node yjs-server.js

팀원 소개

사진	이름	담당
	김별 @isByeolHere	• 팀장 • 프로젝트 설계 및 관리 • 디바이스 반응형 UI/UX 개발
	석재민 @0525aa36	• 실시간 협업 시스템 개발 • API 서버 개발 및 관리 • 데이터베이스 설계 및 최적화
	지준배 @June0727-JUNGLE	• 컴포넌트 라이브러리 개발 • 컴포넌트 속성 편집 시스템 개발 • AWS S3 파일 업로드/관리
	이영준 @bbungjun	• AWS 클라우드 인프라 구축 • 서브도메인 렌더링 시스템 구현 • 모니터링 시스템 구축
	이세창 @SECHANG1412	• 컴포넌트 구현 • 컴포넌트 속성 편집 구현