Home

팀 노션   |   프로젝트   |   피그마   |   위키
배포 링크   |   TypeDoc   |   Storybook

기술적 도전과 지속적인 성장

실시간 통신

인프라 및 CI/CD 실습

서드파티 라이브러리 없이 캔버스 구현

서드파티 라이브러리 없이 Canvas API를 활용하여 색상 선택, 스트로크 조절, Undo/Redo와 같은 드로잉 툴의 핵심 기능을 제공하고 있습니다. 이 과정에서 Canvas API의 기본 원리부터 보간법 적용, 커서 보정까지 심도 있게 학습했으며, 페인트 툴 구현과 같은 고급 기능도 구현할 수 있었습니다.

실시간 캔버스 동기화

소켓 통신과 LWW(Last-Write-Wins) 기반 CRDT 알고리즘을 통해 실시간 동기화를 보장하며 모든 사용자가 동일한 캔버스 상태를 안정적으로 공유할 수 있도록 했습니다. 이를 위해 Playwright를 활용한 CRDT 테스트까지 체계적으로 접근했습니다.

좋은 컴포넌트

저희 팀은 재사용성, 유연성, 일관된 디자인을 핵심 가치로, UI와 로직을 분리하는 Headless Pattern과 Tailwind CSS의 다양한 도구들(clsx, tailwind-merge, cva)을 도입했습니다. 나아가 컴포넌트의 독립적인 개발과 문서화를 위해 Storybook을 도입하고 PR마다 자동 배포되는 환경을 구축하여 효율적인 팀 협업을 달성했습니다.

웨베벱 컨퍼런스: 기술 공유와 성장의 장

매주 금요일마다 일주일 동안 학습한 내용과 경험한 트러블 슈팅을 공유하는 시간을 가졌습니다. 이 컨퍼런스는 단순한 지식 공유를 넘어 프로젝트의 기술적 완성도를 높이는 핵심 동력이 되었습니다.

1-2주차: 핵심 기술 기반 다지기

• CRDT의 이해와 구현 전략 (스트로크 단위 관리)
• WebRTC 실시간 통신 구현 (1:1 및 1:N Mesh 방식 분석)
• Canvas API 마스터클래스
• 헤드리스 패턴과 Tailwind CSS를 활용한 효율적인 UI 구현

3주차: 기술 고도화

• Playwright를 활용한 CRDT 테스트 자동화
• Storybook 도입을 통한 컴포넌트 문서화
• 반응형 레이아웃 전략 수립 및 구현
• 보간법 적용 및 커서 보정으로 드로잉 품질 개선

4주차: 인프라 및 아키텍처 적용

• 단계별 인프라 구축 및 Docker 기반 CI/CD 파이프라인 구현
• Redis를 활용한 실시간 데이터 처리
• 싱글레포에서 모노레포로의 전환
• 효율적인 웹소켓 연결 아키텍처

5주차: 프로젝트 완성도를 높이기 위한 기술

• 효율적 사운드 객체 & 새로고침 방지 및 리다이렉트 구현
• Canvas 커스터마이징 커서 & 패턴 제작

이러한 지속적인 기술 공유와 학습을 통해 프로젝트의 기술적 완성도를 높일 수 있었으며, 팀원 모두의 성장을 이끌어낼 수 있었습니다. 특히 각자의 전문 분야에서 얻은 인사이트를 공유함으로써 프로젝트 전반의 품질을 향상시킬 수 있었습니다.

웨베베베벱 팀 소개

5명의 못말리는 FE 개발자들이 모인 팀이에요!

곽수정	윤태연	유미라	정다솔	최선아
👑 팀장	부팀장	BE 팀장	시간 지킴이	FE 팀장