프로젝트 개요 및 목표
이 디렉토리 플랫폼은 사용자가 창의적인 콘텐츠, 쇼, 스토리, 크리에이터를 찾고, 팔로우하며, 소통할 수 있는 개인적이고 신뢰할 수 있으며 감성적인 공간을 제공하는 것을 지향합니다. 특히, 콘텐츠 발견이 어려운 특정 틈새시장에 집중하여 입소문이나 소셜 미디어 의존도를 줄이고 체계적인 발견 경험을 제공하고자 합니다.
개발 환경 설정 및 AI 활용
개발은 Ruby on Rails를 기반으로 하며, Thoughtbot의 opinionated Rails 템플릿인 Suspenders Gem을 사용하여 애플리케이션을 초기 생성했습니다. Claude AI에게 프로젝트의 목표, 기능 목록, Thoughtbot의 코딩 컨벤션(예: RESTful 라우팅, 클래스 선호, PostgreSQL, Hotwire 사용)을 담은 Claude.md 파일을 제공하여 개발 컨텍스트를 구축했습니다. 특히, TDD(Test-Driven Development) 원칙을 철저히 준수하여 RSpec과 FactoryBot을 사용하고, AI가 생성하는 코드를 개발자가 지속적으로 검토하고 승인함으로써 개발 프로세스에 대한 통제력을 유지합니다.
초기 기능 구현: Show 모델
첫 번째 목표는 ‘Show’ 모델을 도입하고 기본적인 CRUD(생성, 읽기) 기능을 구현하는 것이었습니다. Show는 제목, 설명, 배너 이미지, 썸네일 이미지를 가지며, 에피소드는 선택적으로 시즌으로 구성될 수 있습니다. 초기 단계에서는 ‘제목’만 가진 Show 모델을 먼저 구현하기로 결정했습니다.
-
테스트 주도 개발: Claude AI는 먼저 Show 모델의 유효성 검사 및 시스템 스펙(Show 목록 및 개별 Show 보기)을 작성하여 실패하는 테스트를 생성했습니다.
-
모델 및 마이그레이션: 테스트가 실패하는 것을 확인한 후, Claude AI는
shows테이블과title컬럼을 포함하는 마이그레이션을 생성하고,Show모델에title의 존재 여부를 검증하는 로직을 추가했습니다. -
컨트롤러 및 뷰: Show 리소스를 위한 라우트,
ShowsController및 Show 목록(index)과 개별 Show 보기(show) 뷰를 구현했습니다.
스타일링 및 UI 컴포넌트 도입
애플리케이션의 시각적 요소를 개선하기 위해 Thoughtbot의 새로운 기본 CSS 스타일셋인 Rue를 도입했습니다.
-
Rue 통합: Suspenders가 PostCSS를 기본으로 사용하는 반면, Rue는 Prop Shaft(Rails의 기본 자산 파이프라인)와의 통합을 고려하여 CSS 파일을 번들링하는 방식에 차이가 있었습니다. 이로 인해 초기 CSS 적용에 문제가 발생했으며, Claude AI의 도움을 받아 PostCSS 설정을 Prop Shaft에 맞게 조정하고 Rue 스타일을 성공적으로 통합했습니다.
-
UI 컴포넌트: 쇼 목록을 시각적으로 매력적으로 만들기 위해 ‘썸네일 카드’ 컴포넌트와 ‘주요(featured) 카드’ 컴포넌트를 구현했습니다. 이 컴포넌트들은 제목, 설명, 이미지(초기에는 placeholder 이미지 사용)를 포함하며, Rue의 스페이싱 토큰을 활용하여 간격을 조정했습니다. 또한, 쇼 목록을 가로 그리드 형태로 배치하고, ‘새 쇼 추가’ 버튼의 위치와 스타일을 조정했습니다.