# 커뮤니티 탐색과 상세 상호작용

버전 2.1.0 · 2026-09-11. `studio.html`의 로컬 프로토타입 계약이다. 제품 서버에는 적용하지 않았다.

## 갤러리

서로 다른 32개 HTML/CSS/SVG 예제를 첫 화면부터 배치한다. 히어로, 대시보드, 갤러리, 폼, 차트, 캘린더, 음악 플레이어 등 32개 전용 렌더러를 사용한다. 검색, 카테고리, 밝기, 앱·모델 필터는 교집합을 계산한다. 정렬은 추천 순서/최근 추가/이름 순서다. 카드의 숫자는 실제 예제 수이며 가짜 회원·인기·이용 수치를 만들지 않는다. 작성자는 `nnuer examples`다.

| 화면 폭 | 목록 |
|---|---|
| 640px 이하 | 2열, 카테고리와 제작 환경 접기, 가로 탐색 메뉴 |
| 641–900px | 2열, 왼쪽 탐색 |
| 901–1249px | 3열 |
| 1250–1749px | 4열 |
| 1750px 이상 | 5열 |

첫 화면은 소개 문구 없이 목록을 바로 보여준다. 썸네일은 3:2 캔버스 안에 실제 렌더러를 축소한다. 미리보기 내부 문구는 작품 표현이며 바깥의 접근 가능한 제목·버튼이 실제 탐색 요소다.

## 상세와 프롬프트 조절

썸네일마다 해당 예제의 넓은 상세가 열린다. 고정 상단 바에는 경로·이전/다음·닫기를 둔다. 제목·설명·행동과 큰 대표 화면 아래에 실제 미리보기와 프롬프트 탭, 설정 패널, 관련 예제 3개를 배치한다. 대표 화면은 기본값, 하단 미리보기는 현재 설정이다.

최대 폭1320px, 바깥 여백32px, 내부 여백40px. 1100px 이하에서는 여백을 줄이고, 900px 이하에서는 설정을 미리보기 아래에 놓는다. 640px 이하는 전체 화면이다. 설정 패널은 기본255px, 중간 폭225px이다. 초기 초점은 제목, Tab은 모달 안에서 순환하며 Escape/닫기 후 호출한 썸네일로 돌아간다.

**조절 위젯은 각 컴포넌트의 프롬프트 설정이다. 카테고리가 아니다.** 예제마다 지원하는 항목만 표시한다.

| 설정 | 허용 값 |
|---|---|
| 화면 제목 | Unicode code point 기준1–60자, 비어 있지 않은 문자열 |
| 강조색 | 블루/바이올렛/포레스트/라임/오렌지/클레이 |
| 콘텐츠 여백 | 16–40px, 4px 단계 |
| 패널 모서리 | 0–24px, 2px 단계. Big type·Clear accordion에는 제외 |

같은 검증된 설정으로 미리보기·조정 프롬프트·TXT를 만든다. 넓게/좁게는 캔버스 폭만 바꾸며 기기 에뮬레이션이 아니다. 잘못된 입력은 마지막 유효 화면을 유지하고 저장·TXT를 막는다. 수정/초기화로 복구한다. 한글 조합 중 갱신은 유예하며 사용자 제목은 `textContent`로만 반영한다.

## 보관과 컬렉션

카드 보관은 기본 설정을, 상세 보관은 현재 설정을 독립적인 사본으로 저장한다. 이후 설정을 바꿔도 저장값은 자동 변경하지 않으며 `현재 설정으로 저장`으로 갱신한다. 보관함에서는 저장한 설정으로 썸네일을 그리고 상세를 복원한다.

4개의 편집 컬렉션은 실제 예제 ID로 구성된다. 사용자는 이름을 정해 개인 컬렉션을 만들고 상세에서 자료를 담는다. 컬렉션 제거는 보관함 항목을 삭제하지 않는다. 개인 상태는 `nnuer-gallery-v1` localStorage에 유지하며 계정 간 동기화는 없다. 복원 시 ID·버전·설정값을 검증하고 중복/없는 자료를 제외한다. TXT 상세 출력은 현재 한 항목이며 다중 조합은 향후 제품 범위다. 형식은 [FORMAT.md](FORMAT.md).

## 카테고리 트리

31개 노드는 `id`, `parentId`, `label`, `order`를 갖는다. 컴포넌트의 `categoryId`로 연결하며 부모 선택은 모든 자손을 포함한다. 화살표 클릭은 펼침만, 이름 클릭은 선택만 수행한다. 노드 이름 검색은 일치 항목과 조상을 보여주고 검색을 지우면 펼침 상태를 복구한다. 선택 경로와 해제 버튼을 결과 상단에 표시한다. 노드 옆 수는 해당 분류에 속한 전체 예제 수, 본문의 수는 모든 필터를 적용한 결과 수다.

하나의 Tab 진입점, ↑/↓ 이전/다음, → 펼침/첫 자식, ← 접기/부모, Home/End 처음/끝, Enter/Space 선택을 지원한다. 한글은 별도 검색 입력을 사용한다. 중복 ID·없는 부모·순환 구조는 거부한다. 정적 예제이며 서버 지연 로딩이나 대용량 성능은 검증하지 않았다.

## 앱·모델 필터

[실제 카탈로그](catalog/README.md)의 앱·플랫폼23개와 Hugging Face 모델90개를 별도 검색 창으로 제공한다. 한 번에 최대8개를 표시하고 검색어로 좁힌다. 개수와 스냅샷 날짜는 카탈로그 데이터에서 읽으며 현재 모델 자료의 조회일은2026-09-11이다. 모델 행에 선언 라이브러리·라이선스·원본 관계를 함께 표시한다. 모델은 정확한 repo ID를 보여주며 대소문자와 접미사를 보존한다. 앱 선택으로 모델 지원 목록을 추측하지 않는다. 제공자18개와 작업52개의 원본 데이터는 별도 개념으로 유지한다.

32개 예제의 제작 도구는 실제 작업 환경인 Codex로 기록했다. 정확한 모델은 이 산출물에서 확인하지 못했으므로 `model.kind=unknown`, `modelId=null`이다. 임의 HF 모델을 예제에 붙이지 않았다. 따라서 전체 목록에서 Codex와 모델 미확인은32개, 특정 HF 모델은0개이며 빈 결과와 해제 동작을 제공한다. 옵션 옆 자료 수는 현재 검색/분류/밝기/보관함/컬렉션/반대쪽 환경 필터를 유지하고 해당 옵션만 적용한 예상 결과다. 환경 필터를 바꿔도 열린 컬렉션 범위를 유지한다. Auto/직접 입력/미확인은 서로 다른 상태다. 필터의 `@unknown` 같은 표식은 필터 전용 키로, 모델 ID에 저장하지 않는다. 정밀한 제작 환경 기록은 [선택 규격](catalog/selection.schema.json)을 따른다.

## 소스와 구현

`interaction-contract.json`이31개 분류·32개 리소스·설정·템플릿·컬렉션 원본이고 `build.py`가 `studio-data.js`를 생성한다. `scenes.mjs`/`scenes.css`는 직접 작성한 미리보기다. `studio-model.mjs`는 검증·경로·TXT, `gallery-model.mjs`는 필터·저장 상태를 담당한다. `studio-model.fixture.json`은 이전6개 설정 형식의 회귀 검사 자료이며 현재 갤러리 UI가 아니다.

사용자가 올린 임의 HTML 실행, 원격 모델 호출, Figma 파일 복사는 없다. 실행 코드 업로드를 도입하려면 별도 origin과 제한된 sandbox, 메시지 규격을 제품 단계에서 설계한다. 현재는 등록한32개 렌더러만 실행한다.

## 2026-09-15 연결 확인

상세의 ‘기록된 제작 환경’에 `generationEnvironment`를 읽어 앱·모델·제공자·사용 리비전·파일·기록일·참조 버전을 표시한다. 미기록은 임의 값으로 보충하지 않으며 TXT와 같은 원본 객체를 사용한다. 별도 [선택 견본](catalog.html)은 직접 입력/Auto/미확인, 리비전과 제공자 기록을 계속 담당한다. 모델 카탈로그 자체를 사용자 기록으로 자동 적용하지 않는다. 검색 입력에 초점이 있어도 Escape는 열린 창을 닫고 호출 버튼으로 돌아간다.