CastCanvas Lab: 전 모듈 아키텍처 정립 및 랜딩 사이트 SEO 최적화

프로젝트가 커짐에 따라 각 모듈(BE, FE, Collab, Site)의 경계를 명확히 하고, 외부 사용자에게 프로젝트의 정체성을 알리기 위한 랜딩 사이트의 기술적 기반을 다졌다. 이번 TIL에서는 전사적 아키텍처 문서화 과정과 Next.js를 활용한 SEO 최적화 기법을 공유한다.

목표

모듈별 책임 명확화: 4개 레포지토리의 역할을 정의하여 개발 혼선 방지
SEO 최적화: 검색 엔진 및 SNS 공유 시 프로젝트의 가시성 극대화
브랜드 아이덴티티 구축: 커스텀 SVG를 활용한 독창적인 OG(OpenGraph) 이미지 적용

핵심 구현 포인트

1) 4개 모듈 시스템 아키텍처 정립 (Architecture)

프로젝트의 지속 가능한 확장을 위해 각 레포지토리의 역할을 다음과 같이 확정하고 문서화했다.

모듈	기술 스택	주요 역할
FE	React, React Flow	무한 캔버스 UI 및 지능형 노드/엣지 렌더링
BE	Spring Boot, PostgreSQL	사용자 인증, 워크스페이스 및 메타데이터 관리
Collab	NestJS, Yjs, WebSocket	실시간 동기화 및 권한/세션 수명주기 관리
Site	Next.js (App Router)	제품 소개, SEO, 마케팅 페이지 및 사용자 유입 경로

2) Next.js Metadata API를 통한 SEO 강화 (Site)

랜딩 사이트(cast-canvas-lab-site)에 Metadata 객체를 도입하여 검색 엔진 최적화와 SNS 공유 경험을 개선했다. 특히 metadataBase를 설정하여 상대 경로 리소스의 일관성을 확보했다.

// cast-canvas-lab-site/src/app/layout.tsx
export const metadata: Metadata = {
  metadataBase: new URL('https://castcanvaslab.com'),
  title: {
    default: 'CastCanvas Lab — Spatial Research Workspace',
    template: '%s | CastCanvas Lab',
  },
  description: 'Organize ideas spatially, connect them visually...',
  openGraph: {
    images: [{ url: '/og-image.svg', width: 1200, height: 630 }],
    locale: 'ko_KR',
    type: 'website',
  },
};

3) SVG 기반 커스텀 OG 이미지 구현 (Visual Identity)

별도의 이미지 파일 대신 직접 작성한 SVG를 OG 이미지로 사용하여, 용량을 최소화하면서도 고해상도의 브랜드 그래픽을 유지하도록 설계했다. 캔버스의 레이아웃과 노드 연결성을 형상화한 디자인을 적용했다.

<!-- cast-canvas-lab-site/public/og-image.svg (일부) -->
<svg width="1200" height="630" viewBox="0 0 1200 630" ...>
  <rect width="1200" height="630" fill="#080B14"/>
  <rect x="28" y="28" width="1144" height="574" rx="32" fill="url(#paint0_linear)"/>
  <!-- 캔버스 인터페이스 형상화 -->
  <path d="M448 332C472 332 484 332 502 306" stroke="#6366F1" stroke-width="6"/>
</svg>

트러블슈팅 / 고민 포인트

중복된 기록 관리 문제

상황: FE에서 진행된 CustomEdge 작업이 이전 TIL에 기록되었으나, BE와 Collab의 문서화 작업과 시점이 겹쳐 전체적인 진행 상황 파악이 어려웠다.
해결: 루트(Root) 수준의 종합 TIL을 생성하여 개별 모듈의 기술적 성취를 상위 수준의 아키텍처 마일스톤과 연결했다. 이를 통해 프로젝트 전체의 ‘빅 픽처’를 유지할 수 있게 되었다.

결과

통합 가이드라인 확보: 각 모듈의 README.md가 업데이트되어 팀원 간의 역할 분담이 명확해짐.
검색 엔진 노출 준비: Google 및 SNS(Twitter, KakaoTalk 등) 공유 시 프로젝트 정보가 올바르게 표시됨.
개발 환경 일관성: BE의 Flyway 및 Collab의 NestJS 환경 설정이 마무리되어 본격적인 기능 개발 단계로 진입.

다음 개선 아이디어

BE API 문서화: Swagger/RestDocs를 통한 실제 API 명세서 노출.
실시간 동기화 테스트: Collab 서버와 FE 간의 Yjs 데이터 연동 성능 측정.
다국어 지원: i18n을 적용하여 글로벌 사용자를 위한 랜딩 페이지 확장.

# CastCanvas Lab: 전 모듈 아키텍처 정립 및 랜딩 사이트 SEO 최적화