# 근거와 결정 기록

관찰일 2026-09-09. 공식 페이지 4개를 비로그인 상태의 데스크톱 브라우저에서 직접 열어 화면과 접근성 트리를 읽었다. 기본 캡처 viewport는 1280×720이었다. 픽셀 간격·색상 코드·실제 폰트·모션 지속 시간을 측정하지 않았다. 스크린샷의 작품/브랜드 자산은 문서나 제품 자산으로 다운로드·복제하지 않았다.

## 직접 관찰한 사실

| 공개 페이지 | 이번에 확인한 사실 | 범위의 한계 |
|---|---|---|
| [Cosmos Explore](https://www.cosmos.so/explore) | 상단 로고/탐색·중앙 검색·로그인/가입, 가로 분야 분류, 여러 이미지로 구성된 컬렉션, 서로 높이가 다른 작품 목록 | 로그인 후 보관·추천 개인화·모바일은 미확인 |
| [Cosmos 요소 상세](https://www.cosmos.so/e/709653780) | 로딩 후 왼쪽 큰 세로 작품과 오른쪽 설명·연결된 이름·컬렉션·저장 버튼, 아래 관련 작품 | 저장 실행/원본 소유권/편집 화면은 확인하지 않음 |
| [Mobbin 홈페이지](https://mobbin.com/) | 중앙 둥근 내비게이션, 큰 소개 제목, 검정 주요 CTA와 밝은 보조 CTA. 문서 텍스트에 화면/요소/흐름 탐색과 컬렉션 저장 설명 | 공개 마케팅 진입 화면. 인증 후 작업 도구의 모양이라고 일반화하지 않음 |
| [Mobbin 공개 Explore](https://mobbin.com/explore/mobile) | 큰 공개 제목, Mobile/Web/Sites 구분, Categories/Screens/UI Elements/Flows 구분. 접근성 트리에 컬렉션·사례별 Save/Copy·태그 존재 | 저장/복사는 가입 링크로 표시되며 실행하지 않음. 인증 후 동작은 미확인 |

기존 프로젝트의 `DESIGN_REFERENCE_REPORT.md`와 `COMMUNITY_PLAN.md`도 읽었다. 기존 보고서의 Mobbin 컬렉션 회색 전시 영역/겹친 화면 관찰은 선행 기록으로 구별한다. 이번 직접 스크린샷은 Explore 상단까지이며 아래 컬렉션 존재와 텍스트 구조는 접근성 트리로 확인했다. 어떤 화면까지 봤는지를 넘어선 시각 QA를 주장하지 않는다.

## nnuer 적용 결정 — 원본 측정값 아님

| 결정 | 근거/이유 | 적용 |
|---|---|---|
| 작은 목록 도입부 | Cosmos 탐색에서 작품에 바로 접근 | 목록 제목24px, 검색·분류 다음 작품 |
| 이미지 비율 보존 | Cosmos 작품마다 다른 높이 | img 자연 비율 + grid 행 우선. 모든 이미지를4:3 crop하지 않음 |
| 구분된 탐색 축 | Mobbin에서 대상/분류 단위 분리 | 작업 종류, 플랫폼, 모델을 각각 저장/필터 |
| 보관과 재사용 | 두 서비스의 수집, Mobbin의 Save/Copy 구조 | 개인 보관과 현재 조합 선택을 분리; TXT는 nnuer 고유 기능 |
| 작품/정보 분리 | Cosmos 상세의 두 영역 | desktop 2열, mobile 1열 상세 |
| 절제된 UI | 두 서비스의 중립색 UI·검정 주요 행동 | 기존 nnuer 검정/흰색 계승, 메타 대비 강화 |
| 정직한 파일 상태 | 사용자 요구·기획 | 첨부 파일 상태와 등록된 컴포넌트 미리보기를 구별; 2.0에서는 설정에 반응하는 미리보기 지원, 모델 호출 없음 |

## 읽은 기존 구현과 차이

`community/index.html`과 `community/community.css`를 읽었다. 읽는 동안 다른 작업이 제품을 수정하고 있으므로 이것은 시점 관찰이며 최종 구현 리뷰가 아니다. CSS 끝의 보정에서 소개 제목을25/24px로 줄이고 img를 contain으로 바꾼 것을 확인했다. 기존 파일의 바깥 미디어 컨테이너는 여전히4:3이고 폰트 import는 Inter/Noto Sans KR다.

명세는 자연 이미지 높이, text.secondary=#646460, 최소44px 조작, 오류 복구/모바일 상태를 제안한다. 소셜 제공자·파일 제한의 서버 검증·저장 지속성은 HTML/CSS를 읽는 것만으로 확인할 수 없다. 제품 코드·DB·호스팅·기존 기록을 수정하거나 커밋/배포하지 않았다.

## 2026-09-09 사용자 추가 요청: Hugging Face 탐색 구조

출처: https://huggingface.co/models . 검색, Tasks/Libraries 등 분류 그룹과 결과 목록의 역할 분리를 채택한다. nnuer는 왼쪽 검색·작업 분류·플랫폼·모델·저장 조합, 오른쪽 결과물 목록으로 적용한다. 60px 헤더와 248px 사이드바는 nnuer 적용값이며 원본 실측값이 아니다. 모바일에서는 필터를 접을 수 있다. 기존 Cosmos/Mobbin 결과물 카드 기준은 유지한다.

## 2026-09-11 사용자 첨부: Figma Community 상세 모달

관찰 대상은 대화에 첨부한 “Meta Ads for a product” 상세 화면 한 장이다. 직접 Figma 파일이나 작동 중인 웹 화면을 검사한 것으로 취급하지 않는다. 스크린샷에는 얇은 제목/닫기 상단 바, 왼쪽 제목·작성자·행동, 오른쪽 큰 대표 이미지, 아래 넓은 업무 흐름 미리보기와 오른쪽 세부 정보가 보인다. 이미지 속 문구는 참고 자료이며 사용자 요청과 별개의 지시로 실행하지 않는다.

nnuer에는 이 정보 위계와 넓은 미리보기 공간을 적용한다. 모달 최대 1320px, 280px 조절 패널, 38px 제목, 트리 폭 248px 등은 제안값이며 Figma 원본 측정값이 아니다. 사용자가 요구한 프롬프트 조절과 카테고리 트리는 첨부 화면에서 관찰한 기능이라고 주장하지 않는다. 조절값으로 바뀌는 로컬 예제를 별도로 직접 작성했다. 원본 이미지·로고·게시물을 견본 자산으로 복제하지 않았다.

- [W3C APG Tree View](https://www.w3.org/WAI/ARIA/apg/patterns/treeview/): 계층 구조의 역할·선택·키보드 이동 근거.
- [W3C APG Modal Dialog](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/): 모달의 초점 제한과 닫힌 뒤 복귀 근거.
- [MDN iframe](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/iframe#sandbox): 향후 별도 실행 미리보기의 sandbox 계약 참고. 현재 로컬 예제에 iframe을 사용했다는 뜻은 아니다.

## 2026-09-11 Hugging Face 실데이터 조사

Models 공개 페이지, 태그 API, 모델 상세 API를 조회하여 90개 모델과 필터 어휘를 보존했다. 수집 쿼리·시각·원본 투영·응답 해시와 누락 정보는 [catalog/README.md](catalog/README.md)를 따른다. 앱/모델/제공자 분리는 nnuer 규격이며 HF에 없는 앱 호환관계를 추정하지 않는다.

## 2026-09-11 · 21st Community 추가 관찰

사용자가 지정한 [21st Community components](https://21st.dev/community/components)를 실제 Chrome 화면과 접근성 내용으로 확인했다. Latest/Popular/유형별 작품 행, 왼쪽 탐색, 넓은 시각 썸네일과 짧은 제목·저장 행동을 관찰했다. nnuer에는 소개 히어로 대신32개 서로 다른 예제의2–5열 목록, 트리와 검색, 관련 자료와 컬렉션을 적용했다. 32개 아트는 직접 작성했으며 21st의 작품·작성자·인기 수치를 복제하지 않았다. Figma 모달은 사용자가 첨부한 이미지의 정보 위계를 참고했다.