이 영상의 주제
이 영상은 AI 개발 에이전트 도구인 오퍼스(Opos)와 페이블(Fable)의 웹 디자인 및 개발 능력을 비교 분석하는 콘텐츠입니다. 동일한 프롬프트를 사용하여 클로드 디자인(Claude Design)과 클로드 코드(Claude Code) 환경에서 제작된 4가지 버전의 웹 디자인 에이전시 랜딩 페이지 결과물을 상세히 검토합니다. AI 기반 코드 및 디자인 생성 도구에 관심이 있는 중급 수준의 개발자와 디자이너를 대상으로 하며, 영상 시청을 통해 두 도구의 완성도, 반응형 레이아웃 대응력, 3D 인터랙션 및 토큰 소모량 차이를 명확히 파악할 수 있습니다.
다루는 기술 스택 / 키워드
- 오퍼스 (Opos)
- 페이블 (Fable)
- 클로드 디자인 (Claude Design)
- 클로드 코드 (Claude Code)
- 랜딩 페이지 개발 (Landing Page Development)
- 반응형 웹 디자인 (Responsive Web Design)
- 웹 인터랙션 및 애니메이션 (Web Interaction & Animation)
- AI 에이전트 토큰 소모량 (Token Consumption)
타임스탬프별 핵심 포인트
| 시간 | 내용 |
|---|---|
| 00:00 | 오퍼스와 페이블을 활용해 제작된 4가지 결과물(1번~4번) 디자인 프리뷰 |
| 00:19 | 실험 설계(클로드 디자인 vs 클로드 코드) 및 사용된 공통 프롬프트 내용 공개 |
| 00:59 | 1번 결과물(클로드 디자인 + 오퍼스) 분석: 마우스 커서 인터랙션 및 모바일 반응형 테스트 |
| 02:02 | 2번 결과물(클로드 디자인 + 페이블) 분석: 그리드 정렬 및 색감 표현 검토 |
| 02:58 | 3번 결과물(클로드 코드 + 오퍼스) 분석: 로딩 화면 구현 및 마우스 호버 시 3D 입체 인터랙션 확인 |
| 04:15 | 4번 결과물(클로드 코드 + 페이블) 분석: 부드러운 스크롤 애니메이션 및 높은 완성도 확인 |
| 05:20 | 최종 비교 평가: 클로드 디자인을 적용한 것보다 클로드 코드로 직접 빌드한 결과물의 우수성 설명 |
| 06:03 | 실제 작업 중 발생한 토큰 소모량(200달러 플랜 기준) 분석 및 고비용 워크플로우 주의사항 전달 |
기본 정보
| 항목 | 내용 | |—|—| | 채널 | 코드팩토리 | | 카테고리 | 프로그래밍 | | 게시일 | 2026-06-11 | | 영상 길이 | 7:25 | | 처리 엔진 | gemini-3.5-flash | | 원본 영상 | YouTube에서 보기 |