CastCanvas Lab: 백엔드 DDD 아키텍처 도입 및 프론트엔드 인스펙터 패널 구현
프로젝트의 규모가 확장됨에 따라 코드의 복잡도를 관리하기 위한 구조적 결단이 필요했다. 백엔드에는 도메인 중심의 설계를 도입하고, 프론트엔드에서는 사용자 경험의 핵심인 노드 편집 인터페이스를 강화했다. 또한, 지속적 통합(CI) 환경을 구축하여 안정적인 배포 기반을 마련했다.
목표
- 도메인 복잡도 관리: 백엔드 코드의 응집도를 높이고 비즈니스 로직을 보호하기 위한 DDD 레이어 구조 확립.
- 편집 사용자 경험(UX) 강화: 선택된 노드의 정보를 실시간으로 확인하고 수정할 수 있는 사이드 패널 구현.
- 품질 관리 자동화: GitHub Actions를 통한 빌드 및 테스트 자동화 파이프라인 구축.
핵심 구현 포인트
1) 백엔드 DDD(Domain-Driven Design) 레이어 아키텍처 (BE)
단순한 CRUD 구조를 넘어, 도메인의 핵심 비즈니스 로직을 명확히 분리하기 위해 4계층 아키텍처를 도입했다. user 모듈을 시작으로 공통 기반 클래스(BaseEntity, Value Object 등)를 정의하여 도메인 모델의 일관성을 확보했다.
- Interfaces: API 컨트롤러 및 DTO 변환 레이어.
- Application: 유즈케이스 흐름 제어 및 서비스 레이어.
- Domain: 핵심 비즈니스 로직, 엔티티, 도메인 이벤트 정의.
- Infrastructure: 데이터베이스(JPA), 외부 API 통신 등 기술적 세부 사항 구현.
2) 노드 인스펙터(Inspector) 사이드 패널 구현 (FE)
캔버스에서 노드를 클릭했을 때 해당 노드의 메타데이터(이름, 색상, 좌표 등)를 편집할 수 있는 Inspector 컴포넌트를 개발했다.
- 노드 선택 상태 관리:
onSelectionChange이벤트를 통해 현재 선택된 노드의 ID를 추적하고 전역 상태에 동기화. - 실시간 데이터 바인딩: 인스펙터 패널에서 입력한 값이 즉시 캔버스상의 노드 데이터(
data,style)에 반영되도록 최적화. - 레이아웃 개선: 캔버스 영역과 편집 영역을 시각적으로 구분하여 작업 몰입도를 향상시킴.
3) CI 파이프라인 및 보안 검사 자동화 (Site, Collab)
프로젝트의 안정성을 높이기 위해 GitHub Actions를 활용한 자동화 워크플로우를 구성했다.
- Build/Test Automation: 모든 PR 및 Push 시점에 빌드 성공 여부와 단위 테스트 통과 여부를 검증.
- 보안 스캔: 커밋 전 시크릿 키(API Key 등) 노출을 방지하기 위한 탐색 스크립트와 브랜치 명명 규칙 검사기를 도입.
- SEO 자동화:
robots.txt및sitemap.xml생성을 자동화하여 검색 엔진 최적화 상태를 유지.
트러블슈팅 / 고민 포인트
도메인 로직과 인프라 코드의 혼재
- 상황: 초기 구현 시 JPA 엔티티에 비즈니스 로직과 기술적 어노테이션이 섞여 있어 도메인의 순수성이 훼손되었다.
- 해결: DDD 구조를 도입하며
domain패키지에는 순수 자바 객체(POJO) 기반의 로직을 배치하고, 영속성 관련 설정은infrastructure로 격리하여 기술 변화에 유연하게 대응하도록 개선했다.
결과
- 구조적 안정성: 백엔드 모듈별 책임이 명확해져 대규모 기능 추가 시 영향 범위 파악이 쉬워짐.
- 인터랙티브 기능 완성: 노드 생성(001) -> 연결(002) -> 편집(005)으로 이어지는 캔버스 핵심 워크플로우 완성.
- 협업 생산성 향상: CI 서버의 피드백을 통해 코드 리뷰 전 기술적 오류를 90% 이상 사전 차단.
다음 개선 아이디어
- 실시간 동기화(Yjs): 인스펙터에서 수정된 내용이 다른 협업자의 캔버스에 즉시 공유되도록 연동.
- 도메인 이벤트 도입: 사용자 등록이나 노드 변경 시 비동기적으로 처리될 로직(알림, 로그 등)을 위한 이벤트 시스템 구축.
- 인스펙터 확장: 노드 타입별(텍스트, 이미지, 그룹 등) 맞춤형 편집 UI 지원.