개발자
레이아웃은 Zone에, 데이터와 규칙은 플랫폼에.
Zone은 커뮤니티가 직접 운영하는 사이트로, 자체 표시 코드를 사용할 수 있습니다. 코드는 화면 배치만 담당합니다. 플랫폼이 데이터를 읽어 전달하고 권한과 검토도 관리합니다.
테마
설정부터 시작하고 코드는 나중에
각 Zone은 기본 테마로 시작합니다. 밀도, 페이지 배경색, 표지 비율을 조정하고 필요하면 강조색을 바꾼 다음 대표 작품 캐러셀, 책장, 순위, 편집자 목록 같은 모듈을 배치합니다. 설정으로 만들 수 없는 레이아웃에만 표시 코드를 사용합니다.
설정
테마 설정 예시
const tokens: ZoneTokens = {
colorScheme: 'system',
accent: '#3b4a5a',
density: 'comfortable',
cardRadius: 'md',
headingFontScale: 'md',
surfaceTint: 'subtle',
fontPairing: 'serif',
pageSurface: 'flat',
coverStyle: 'portrait',
};슬롯
이름이 있는 슬롯에 코드 배치
표시 코드는 패키지 형태로 제공됩니다. 헤더, 대표 영역, 검색창, 데이터 패널, 작품 카드, 모듈, 푸터처럼 이름이 지정된 슬롯에 자체 컴포넌트를 넣습니다. 각 슬롯은 플랫폼의 기본 버전을 받으며 패키지가 이를 감싸거나 대체할 수 있습니다.
export default defineZonePackage({
slug: 'anime',
css,
catalogue: { count: 'episodes',
formatNames: animeFormatNames
},
slots: {
browseHeader:
AnimeBrowseHeader,
workCard: AnimeCard,
cataloguePanel:
AnimeCataloguePanel,
footer: AnimeFooter,
},
});경계
패키지의 경계
직접 데이터를 가져오지 않음
플랫폼이 데이터를 읽어 슬롯에 전달하므로 패키지는 요청을 보내지 않습니다.
인증 정보에 접근하지 않음
Cookie, 브라우저 저장 공간, 기타 인증 정보를 읽지 않습니다.
플랫폼 인터페이스를 가리지 않음
계정 메뉴, Zone 메뉴, 신고, 연령 확인은 슬롯 바깥에 있습니다. 각 작품의 “여기에 있는 이유” 표시도 계속 보입니다.
스타일은 자체 영역에만 적용
스타일은 이 Zone 안에 한정되며 색상과 글꼴에는 플랫폼이 제공하는 변수만 사용합니다.
크기 제한
gzip 압축 후 CSS는 40 KiB, JavaScript는 50 KiB를 넘지 않습니다.
게시
검토부터 게시까지
해시 계산
패키지의 모든 파일을 합쳐 해시 하나를 계산합니다. 바이트 하나만 바뀌어도 해시가 달라집니다.
다른 사람이 검토
다른 계정에서 소스 코드, 빌드 파일, 접근성, 오류 시 동작을 확인하고 결정과 증거의 해시를 기록합니다.
활성화와 만료일 설정
검토한 버전만 활성화할 수 있으며 만료일이 있습니다. 이전 버전으로 되돌려도 과거 승인이 다시 유효해지지 않습니다.
언제든 기본 레이아웃으로 전환
해시가 일치하지 않으면 기본 레이아웃을 표시합니다. 독자는 패키지를 끄거나 URL에 ?safe를 추가해 안전 모드로 전환할 수 있고, 플랫폼에는 전체 사이트용 스위치도 있습니다.
백엔드는 하나, 프런트엔드는 자유롭게. AI 에이전트도 같은 데이터를 읽습니다.
새 커뮤니티 사이트에 새 백엔드 프로그램은 필요하지 않습니다. 표시 코드는 공개 API만 읽고 비즈니스 로직을 포함하지 않습니다. Zone에 표시되는 데이터는 API에서도 읽을 수 있습니다.