Home
FE가 다섯명이라고? 좌충우돌 서버 구현기 인스턴스 생성부터 시작해, Docker와 GitHub Actions를 활용한 CI/CD 파이프라인 구축까지. 서버 부담을 줄이고 실시간 통신을 지원하기 위해 WebSocket 기반의 소켓 서버를 구현하기 위한 고민과 도전 과정을 담았습니다.
서드파티 라이브러리 없이 Canvas API를 활용하여 색상 선택, 스트로크 조절, Undo/Redo와 같은 드로잉 툴의 핵심 기능을 제공하고 있습니다.
이 과정에서 Canvas API의 기본 원리부터 보간법 적용, 커서 보정까지 심도 있게 학습했으며, 페인트 툴 구현과 같은 고급 기능도 구현할 수 있었습니다.
소켓 통신과 LWW(Last-Write-Wins) 기반 CRDT 알고리즘을 통해 실시간 동기화를 보장하며 모든 사용자가 동일한 캔버스 상태를 안정적으로 공유할 수 있도록 했습니다.
이를 위해 Playwright를 활용한 CRDT 테스트까지 체계적으로 접근했습니다.
저희 팀은 재사용성, 유연성, 일관된 디자인을 핵심 가치로, UI와 로직을 분리하는 Headless Pattern과 Tailwind CSS의 최적화 도구들을 도입했습니다.
특히 조건부 스타일링을 위한 clsx, 클래스 충돌 해결을 위한 tailwind-merge, 타입 안전한 컴포넌트 변형 관리를 위한 class-variance-authority(cva)를 활용하여 견고한 컴포넌트 아키텍처를 구축했습니다.
또한, 클라이언트에서 웹소켓을 사용하는 건 애로사항이 많습니다.
- 컴포넌트와 소켓의 생명주기 불일치
- 전역 상태 관리의 복잡성
- 실시간 이벤트로 인한 성능 이슈
이를 해결하기 위해 Zustand 기반의 중앙화된 소켓 관리와 Custom Hook을 통한 추상화를 도입했습니다. 특히 게임, 드로잉, 채팅 각각의 소켓을 독립적으로 관리하고, 확장성 있게 설계했습니다.
매주 금요일마다 일주일 동안 학습한 내용과 경험한 트러블 슈팅을 공유하는 시간을 가졌습니다. 이 컨퍼런스는 단순한 지식 공유를 넘어 프로젝트의 기술적 완성도를 높이는 핵심 동력이 되었습니다.
- CRDT의 이해와 구현 전략 (스트로크 단위 관리)
- WebRTC 실시간 통신 구현 (1:1 및 1:N Mesh 방식 분석)
- Canvas API 마스터클래스
- 헤드리스 패턴과 Tailwind CSS를 활용한 효율적인 UI 구현
- Playwright를 활용한 CRDT 테스트 자동화
- Storybook 도입을 통한 컴포넌트 문서화
- 반응형 레이아웃 전략 수립 및 구현
- 보간법 적용 및 커서 보정으로 드로잉 품질 개선
- 단계별 인프라 구축 및 Docker 기반 CI/CD 파이프라인 구현
- Redis를 활용한 실시간 데이터 처리
- 싱글레포에서 모노레포로의 전환
- 효율적인 웹소켓 연결 아키텍처
- 효율적 사운드 객체 & 새로고침 방지 및 리다이렉트 구현
- Canvas 커스터마이징 커서 & 패턴 제작
이러한 지속적인 기술 공유와 학습을 통해 프로젝트의 기술적 완성도를 높일 수 있었으며, 팀원 모두의 성장을 이끌어낼 수 있었습니다. 특히 각자의 전문 분야에서 얻은 인사이트를 공유함으로써 프로젝트 전반의 품질을 향상시킬 수 있었습니다.
5명의 못말리는 FE 개발자들이 모인 팀이에요!
| 곽수정 | 윤태연 | 유미라 | 정다솔 | 최선아 |
|---|---|---|---|---|
 |
 |
 |
 |
 |
| 👑 팀장 | 부팀장 | BE 팀장 | 시간 지킴이 | FE 팀장 |