Next.js, Supabase, Playwright로 Ozigi v2, 모듈형 콘텐츠 엔진으로 진화!
기존 모놀리식(Monolithic) 구조의 Ozigi v1을 모듈형 아키텍처로 리팩토링하여 유지보수성(Maintainability) 및 확장성(Scalability) 확보
Supabase를 활용하여 데이터베이스(Database)를 구축하고, GitHub OAuth 연동(Integration)을 통해 사용자 인증 및 데이터 영속성(Persistence) 개선
멀티모달 입력(Multi-Modal Input) 및 디스코드(Discord) 연동 기능 추가로 콘텐츠 생성 및 배포(Content Generation & Distribution) 자동화
Playwright 기반 E2E 테스트(E2E Test) 자동화 및 CI/CD 파이프라인(CI/CD Pipeline) 개선으로 품질 보증(Quality Assurance) 강화
모듈형 아키텍처로의 전환
Ozigi v2는 기존의 단일 파일 구조(Monolithic Structure)에서 벗어나 모듈형 컴포넌트(Modular Component) 기반 아키텍처로 전환되었다.
UI 컴포넌트 분리: Header, Hero, Distillery 등의 순수 React 컴포넌트(React Component)로 분리하여 재사용성(Reusability) 및 가독성(Readability) 향상
타입 안정성 강화: CampaignDay 인터페이스(Interface)를 정의하여 TypeScript의 타입 오류(Type Error)를 제거하고, 코드 품질(Code Quality) 개선
로컬 스토리지(Local Storage) 동기화: 사용자 상태(User State)를 로컬 스토리지에 저장하여 페이지 리프레시(Page Refresh) 시에도 사용자 경험(UX) 일관성 유지
이러한 변화는 코드베이스(Codebase)의 복잡성 증가에 따른 유지보수(Maintenance) 어려움을 해결하고, 새로운 기능 추가 및 변경에 유연하게 대응하기 위한 전략이다.
Supabase를 활용한 백엔드 강화
Ozigi v2는 Supabase를 데이터베이스(Database)로 채택하고, GitHub OAuth를 통해 사용자 인증(Authentication)을 구현하여 보안(Security) 및 사용자 경험(UX)을 개선했다.
관계형 데이터베이스(Relational Database) 도입: PostgreSQL(PostgreSQL) 기반 데이터베이스를 사용하여 데이터의 구조적 관리(Structured Data Management) 및 쿼리 성능(Query Performance) 향상
OAuth 연동: GitHub OAuth를 통해 안전한 사용자 인증을 구현하고, 익명 접근(Anonymous Access) 방식의 문제점 해결
자동 저장 기능: 생성된 캠페인(Campaign)을 PostgreSQL에 자동 저장하여 사용자가 이전 작업(Previous Work)을 쉽게 복원할 수 있도록 지원
이러한 변화는 데이터 관리의 효율성을 높이고, 사용자 편의성을 극대화하기 위한 핵심적인 전략이다.
Playwright를 활용한 E2E 테스트 자동화
Ozigi v2는 Playwright를 사용하여 E2E(End-to-End) 테스트 자동화를 구축하고, 애플리케이션의 품질(Quality)을 향상시켰다.
테스트 스위트(Test Suite) 재작성: 새로운 랜딩 페이지(Landing Page)의 내용 검증, 네비게이션 흐름(Navigation Flow) 테스트, 보안 규칙(Security Rule) 검증 등을 수행
CI/CD 파이프라인 개선: Linux 환경(Linux Environment)에서 Chromium(Chromium) 의존성 문제 해결
테스트 커버리지(Test Coverage) 확보: 새로운 기능(New Feature) 및 변경 사항(Change)에 대한 테스트 자동화를 통해 안정적인 서비스 운영 지원
Playwright를 활용한 E2E 테스트 자동화는 애플리케이션의 품질을 보장하고, 개발 생산성(Development Productivity)을 향상시키는 데 기여한다.
UI/UX 개선 및 전문적인 브랜딩
Ozigi v2는 UI/UX를 개선하고, 콘텐츠 전문가(Content Professional)를 위한 전문적인 브랜딩(Branding)을 강화했다.
리브랜딩(Rebranding): 콘텐츠 전문가를 위한 엔진(Engine)임을 강조하고, 사용자 타겟(User Target) 명확화
Try Before You Buy: 비로그인 사용자(Unauthenticated User)에게 AI 생성 기능(AI Generation Function)을 제공하여 사용자 경험(UX) 개선
레이아웃(Layout) 개선: CSS Flexbox(CSS Flexbox)를 활용하여 UI 디자인(UI Design) 일관성 확보
SEO 최적화: OpenGraph 및 Twitter Card 메타데이터(Metadata)를 추가하여 검색 엔진 최적화(SEO) 강화
이러한 변화는 사용자 경험을 향상시키고, 서비스의 경쟁력을 강화하기 위한 전략이다.
