만약 여러분이 Codex pets를 사용해 왔다면, 제가 겪었던 것과 동일한 문제를 보셨을 것입니다:

펫 팩(pet packs)이 여기저기 흩어져 있고, 미리보기(preview) 품질은 일관되지 않으며, 설치 과정은 마땅히 그래야 하는 것보다 더 수동적으로 느껴지는 경우가 많습니다.

그래서 저는 이것을 만들었습니다:

Codex Pets

이것은 Codex 호환 애니메이션 펫들을 위한 독립적인 공개 디렉토리(directory)입니다. 목표는 간단합니다. 펫 탐색을 깔끔하고, 신뢰할 수 있으며, 빠르게 만드는 것입니다.

사이트 기능

Codex Pets를 통해 다음을 할 수 있습니다:

• 큐레이션된 애니메이션 펫 갤러리 탐색
• 설치 전 애니메이션 상태(animation states) 미리보기
• 한 줄 설치 명령어(one-line install command) 복사
• 패키지 흐름(package flow)을 더 명확하게 검토
• 검토를 위해 본인의 펫 패키지 제출

핵심 아이디어는 이것을 일반적인 대시보드나 무작위 다운로드 페이지가 아닌, **디렉토리 우선(directory first)**으로 취급하는 것입니다.

제작 이유

저는 가장 어려운 부분이 펫 형식(pet format) 자체라고 생각하지 않았습니다.

펫 패키지는 보통 단순합니다. 하지만 진짜 마찰(friction)은 그 주변의 모든 것이었습니다:

• 애초에 펫을 찾는 것
• 그것들이 실제로 어떻게 보이는지 아는 것
• 패키지가 신뢰할 수 있는지 결정하는 것
• 흩어진 저장소(repos), 스레드, 또는 스크린샷을 뒤지지 않고 설치하는 것

그 지점에 대부분의 UX 부채(UX debt)가 존재했습니다.

저는 사용자들이 불필요한 절차 없이 다음 단계를 거칠 수 있는 단 한 곳을 원했습니다:

1. 발견 (discover)
2. 미리보기 (preview)
3. 신뢰 (trust)
4. 설치 (install)

설치 경험

제가 신경 쓴 한 가지는 설정 마찰(setup friction)을 줄이는 것이었습니다.

만약 누군가 펫이 마음에 든다면, 다음과 같은 명령어로 즉시 설치할 수 있어야 합니다:

npx codex-petkit install boba

이는 사람들이 펫을 시도해 볼 가치가 있는지 알기도 전에 패키지 내용을 수동으로 뒤지게 만드는 것보다 훨씬 더 나은 경험입니다.

더 높은 확신을 원하는 사람들을 위해, 사이트는 설치 전에 패키지와 미리보기 흐름에 대해 더 높은 가시성(visibility)을 제공합니다.

펫 패키지의 모습
Codex 펫 패키지는 보통 두 가지 핵심 요소로 구성됩니다:

메타데이터 및 애니메이션 정의를 위한 pet.json
스프라이트 시트 (sprite sheet)와 같은 spritesheet.png 또는 spritesheet.webp
그 부분은 비교적 간단합니다.

더 중요한 것은 주변의 제품 경험 (product experience)입니다:

사용자가 설치하기 전에 펫을 미리 볼 수 있는가?
크리에이터들이 혼란 없이 제출할 수 있는가?
공개 갤러리가 소란스럽지 않고 큐레이션된 상태를 유지할 수 있는가?
설치가 취약하게 느껴지지 않고 가볍게 느껴질 수 있는가?
그것이 제가 개선하고 싶었던 계층 (layer)입니다.

사이트의 디자인 원칙
몇 가지 제품 규칙이 전체 구축 과정을 형성했습니다:

먼저 둘러보고, 나중에 제출하기
대시보드보다 디렉토리 우선
설치하기 전에 미리 보기
절제를 통한 신뢰
영리한 복잡함보다 단순한 설치 흐름
저는 이 사이트가 혼란스러운 커뮤니티 피드보다는 잘 관리된 카탈로그처럼 느껴지기를 원했습니다.

크리에이터를 위해서도
이것은 단지 펫을 설치하는 사람들만을 위한 것이 아닙니다.

저는 크리에이터들도 자신의 작업물을 기여할 수 있는 더 깔끔한 경로를 갖기를 원했기에, 사이트에는 새로운 펫 패키지를 위한 제출 흐름 (submission flow)이 포함되어 있습니다.

그 목표는 기여를 단순하게 유지하면서도, 공개 갤러리가 유용하게 유지될 수 있을 만큼 충분한 검토 구조를 갖추는 것입니다.

그 균형이 중요합니다. 제출이 너무 느슨하면 갤러리가 소란스러워집니다. 너무 엄격하면 아무도 기여하지 않습니다.

기술 스택 (Tech stack)
사이트는 다음으로 구축되었습니다:

Next.js
React
TypeScript
Tailwind CSS
Cloudflare-native 배포
D1
Better Auth
따라서 이것은 단순히 정적인 링크 페이지로 취급하는 대신, 현대적인 풀스택 (full-stack) 설정 위에서 가벼운 카탈로그 제품을 구축하기 위한 구실이기도 했습니다.

중요한 참고 사항
이것은 OpenAI의 공식 제품이 아닙니다.

OpenAI는 Codex와 그 펫 기능을 제공합니다.
Codex Pets는 호환 가능한 펫 패키지를 위한 독립적인 갤러리입니다.

피드백을 기다립니다
만약 Codex 펫을 사용하신다면, 몇 가지 사항에 대한 여러분의 의견이 궁금합니다:

어떤 점이 펫 패키지를 빠르게 신뢰하게 만드나요?
설치 흐름에서 여전히 투박하게 느껴지는 부분은 무엇인가요?
둘러보는 경험을 어떻게 하면 더 좋게 만들 수 있을까요?
펫을 제작하신다면, 무엇이 제출을 더 쉽게 만들까요?
사이트:

https://codexpet.directory

관심이 있으시다면, 제출 흐름(submission flow), 패키지 구조(package structure), 그리고 이 서비스가 일반적인 SaaS 관리 화면(admin surface) 대신 큐레이션된 디렉토리(curated directory)처럼 느껴지도록 만든 제품 결정(product decisions)에 관한 후속 게시물도 공유할 수 있습니다.