n0ctx/tavern-aesthetic

선술집 미학 — 몰입형 내러티브 프론트엔드 디자인

이 스킬이 생성하는 것

이야기 세계의 유물처럼 읽히는 실제 작동하는 UI — 리스킨된 대시보드도, 게임 HUD 소품을 쌓아올린 것도 아닙니다. 기준은 정제된 프론트엔드 카드입니다. 한눈에 작품을 식별할 수 있고, 모든 표면이 하나의 아트 디렉션을 공유하며, 디테일이 마무리되어 있고, 상호작용이 자연스러워야 합니다.

정제됨 ≠ 복잡함. 정제됨은 모든 가시적인 선택이 의도적이며 모든 가시적인 영역이 동일한 품질 기준을 충족한다는 것을 의미합니다.

이 스킬은 시각적 디자인과 구현 방법을 다룹니다. SillyTavern, 도우미 플러그인, MVU 또는 어떤 프레임워크에도 의존하지 않습니다. 프로젝트의 기존 스택, 컴포넌트, 에셋, 상호작용 패턴을 재사용하세요. 사용자가 디자인만 요청한 경우 코드를 건드리지 마십시오.

참고 자료 (필요시에만 읽고, 한 번에 모두 읽지 마십시오)

• references/design-knowledge.md — 차원별 의사 결정 가이드(내러티브 정체성, 색상, 유형, 형태, 빛/재질, 이미지, 레이아웃, 컴포넌트, 모션, 적응) 및 실패 모드 표. 현재 직면한 결정과 일치하는 섹션을 참고하십시오.
• references/workflow.md — 단계별 프로세스, 합격/불합격 게이트, 검토 방법, 롤백 규칙, 디자인 레코드 템플릿. 중간 또는 복잡한 작업 전에 읽으십시오.
• references/asset-sources.md — 일러스트레이션, 텍스처, 아이콘, 폰트의 출처 및 라이선스 확인. 온라인에서 에셋을 수집할 때 읽으십시오.
• references/research.md — 이 스킬의 근거와 한계. 실행에 필요하지 않습니다.

작업 수준

코드 양이 아닌 디자인 난이도로 판단하십시오:

• 간단함: 단일 컴포넌트, 디테일 수정, 기존 시각적 언어 내의 작은 기능. 언어를 재사용하고 구현 후 스크린샷으로 한 번 확인합니다.
• 중간: 단일 페이지/패널 또는 기존 화면의 리디자인 하나. 간략한 방향 설정을 수행하고, 먼저 포컬 영역을 구축한 다음 페이지를 완성합니다. 1-2회 검토 라운드.
• 복잡함: 다중 화면 흐름, 게임화된 시스템, 처음부터 구축, 맞춤형 핵심 비주얼 필요, 또는 사용자가 완제품 품질을 요청. workflow.md의 여섯 단계를 실행하고 디자인 레코드를 유지합니다.

표류 방지 규칙 (바인딩)

다중 턴 실행에서 표류가 발생하기 때문에 존재합니다. 문자 그대로 따르십시오:

1. 디자인 레코드가 유일한 진실 공급원입니다. 중간 및 복잡한 작업의 경우 방향 설정 시점에 디자인 레코드를 생성하고(workflow.md의 템플릿) 이후 모든 턴/모듈 시작 시 다시 읽으십시오. 새로운 색상, 반경, 폰트 또는 모션 값은 사용 전에 레코드의 토큰 레지스트리에 추가되어야 합니다. 레지스트리에 없는 값은 코드에서 허용되지 않습니다.
2. 핵심 샘플 통과 후 토큰 레지스트리를 동결하십시오. 이후 모듈은 등록된 토큰만 재사용할 수 있습니다. 새 토큰이 필요한 경우 레코드에 왜 기존 세트로 요구 사항을 표현할 수 없는지 명시적으로 설명하는 노트를 추가해야 합니다.
3. 모든 모듈은 진행 전에 핵심 샘플과 나란히 스크린샷 비교됩니다. 예외 없음; 구두 비교만으로는 충분하지 않습니다.
4. 단계당 최대 두 번의 수정 라운드. 여전히 실패하면 workflow.md의 롤백 테이블에 따라 롤백하고 진단하십시오. 더 많은 수정을 쌓지 마십시오.
5. 한 번에 하나의 활성 방향. 턴을 넘어 대체 방향을 유지하지 마십시오. 하나를 선택하고 기록하고 나머지는 버리십시오.

핵심 원칙

1. 장르가 아닌 작품을 위해 디자인하십시오.
   • 먼저 답하십시오: 이 UI는 이야기 속에서 어떤 물건 또는 시스템인가, 누가 만들었는가, 누가 읽는가, 언제인가.
   • 그런 다음 이 특정 작업에 속하는 기억점 하나를 선택하십시오.
   • 시각적 정체성은 구체적인 캐릭터, 장소, 시대, 파벌, 사건, 소품에서 비롯됩니다. 장르 공식(포스트 아포칼립스 = 검정/노랑 레이더; 수양 = 먹색/금색)은 출발점일 뿐이며 구체화되어야 합니다.
   • 자가 테스트: 동일한 장르의 일반적인 요청을 에이전트에 전달했을 때 거의 동일한 UI를 생성한다면 방향이 충분히 구체적이지 않은 것입니다.
   • 내부적으로 몇 가지 방향을 비교하고 정확히 하나를 제공하십시오. 일상적인 작업에 대해 사용자에게 옵션을 나열하지 마십시오.
2. 하나의 컨셉이 모든 디자인 결정을 지배합니다.
   • 색상은 재료와 광원에서, 유형은 쓰기/인쇄 방법에서, 형태는 공예에서, 모션은 물체의 물리적 동작에서 비롯됩니다.
   • 관련 차원은 순차적이 아닌 함께 결정됩니다("모든 색상을 먼저, 그런 다음 모든 폰트"는 잘못된 방법입니다).
   • 모든 요소에 대해 컨셉의 어떤 부분을 표현하는지 진술할 수 있어야 합니다.
3. 구체적인 아트는 일러스트레이션 자산을 사용합니다. 코드로 그린 아트는 임시용입니다.
   • 사람, 장면, 물체: 최종 버전은 일러스트레이션 자산을 사용합니다. 소스 순서: 기존 프로젝트 자산 → AI 생성 → 라이선스 웹 컬렉션.
   • CSS/SVG로 그린 장면, 사람, 물체는 구성/컨셉 검증용으로만 허용되며 배송 전에 교체되어야 합니다(복잡한 작업의 경우 핵심 샘플 단계 이전까지). 이는 프로그래머 아트로 읽히며 전체 UI를 끌어내립니다.
   • 코드는 인터페이스 자체(레이아웃, 타이포그래피, 테두리, 텍스처, 장식 패턴, 아이콘, 추상 및 데이터 그래픽)를 소유합니다.
4. 일러스트레이션이 구성을 이끕니다.
   • 일러스트레이션이 레이아웃의 무게 중심을 설정합니다. 텍스트와 컴포넌트는 그 주위에 배치됩니다. 일러스트레이션을 상단 배너나 카드 썸네일로 축소하지 마십시오.
   • 모든 주요 화면은 그림처럼 읽혀야 합니다. 눈을 가늘게 뜨고 보면 화면이 대부분 일러스트레이션이어야 하며, 어두운 패널 + 얇은 선 + 텍스트가 아니어야 합니다.
   • 아트의 존재감은 기능 페이지까지 계속되어야 합니다(패널 아래 저대비 레이어로서의 일러스트레이션, 패널 가장자리를 가로지르는 캐릭터, 시간/위치에 따라 변화하는 장면). "멋진 오프닝, 그 다음 평범한 어두운 양식 페이지"는 가장 흔한 품질 붕괴입니다.
   • 화면당 히어로 이미지 하나. 보조 이미지는 동일한 그림에 통합되거나 균일하게 처리된 세트를 형성합니다. 서로 다른 출처의 이미지를 상자에 나란히 배열하지 마십시오.
5. 정보는 세계 내 형식을 채택하되, 소품 사용을 자제합니다.
   • 정보는 세계의 고유 형식과 어휘(원장 열, 명단 레이아웃, 세계 내 동사/명사)를 사용하며 내러티브 속도로 공개됩니다.
   • 전체 UI에 대해 하나의 주요 전달 수단. 모든 모듈에 다른 CSS 시뮬레이션 소품(테이프 노트, 비뚤어진 도장, 태그, 주판알)을 제공하지 마십시오 — 소품이 쌓이면 싸구려로 보입니다.
   • 그림과 색상이 아닌 소품과 장식을 자제하십시오. 소품에서 확보된 공간은 일러스트레이션과 타이포그래피로 이동하며, 어두운 텍스트 양식으로 가지 마십시오.
   • 모든 것이 "레이블: 값" + 진행 막대는 아닙니다. 흐름 페이지(온보딩, 설정)는 양식이 아닙니다. 주요 옵션은 일러스트레이션을 담을 수 있습니다.
6. 하나의 균일한 품질 기준.
   • 노력은 고르지 않을 수 있습니다: 포컬 영역이 최상의 자산과 가장 많은 디테일을 얻습니다.
   • 어떤 가시적인 영역도 기준 이하로 떨어질 수 없습니다. 그려진 모든 것은 전반적인 정밀도와 일치해야 합니다. 그럴 수 없으면 일러스트레이션으로 대체하거나 타이포그래피/추상 그래픽으로 표현하십시오.
   • 비용을 줄이려면 동일한 언어 내에서 단순화하십시오. 기본 컴포넌트, 브라우저 네이티브 스타일링 또는 플레이스홀더 이미지로 폴백하지 마십시오.
7. 읽기와 조작이 먼저입니다.
   • 중국어 본문 텍스트: ≥14px(15-17px 일반적), 줄 높이 1.6-1.9, 줄 길이 ~20-40자, 본문 대비 ≥4.5:1.
   • 분위기는 색온도, 빛, 재질, 모션에 의해 전달됩니다. 텍스트와 숫자는 선명하게 유지됩니다.
   • 작은 텍스트, 낮은 대비, 또는 "프리미엄" 약어로서의 의미 없는 영어는 없습니다.
   • 이미지와 텍스처는 본문 텍스트나 클릭 대상 위에 절대 배치되지 않습니다.
   • 전체 상호작용 상태, 키보드 조작 가능, 대상 너비에 적응.
8. 기본값은 선택되어야 하며 상속되지 않아야 합니다. 의도적으로 선택한 경우에만 기본 폰트, 팔레트, 컴포넌트 라이브러리 스타일, 브라우저 스크롤바/포커스 링을 유지하십시오. 일반적인 AI 게임 UI 키트(베이지 종이 + 어두운 슬레이트, 빨간 비뚤어진 도장, 작은 태그, 육각형 단계 노드, 레이더 차트)도 기본값입니다. 하나의 유행하는 기본값을 다른 것으로 바꾸는 것은 여전히 기본값입니다.
9. 엔지니어링 절제. 기존 코드, 종속성 및 에셋을 재사용하십시오. 에셋 계획에 따라서만 에셋을 생성/수집하십시오. 새로운 무거운 종속성, 에셋 파이프라인, 백엔드 리팩터는 없습니다.

실행 흐름

1. 상황 이해

확인: 장르; 캐릭터/세계 특이사항; 대상 분위기; 페이지 목적; 핵심 정보 및 액션; 대상 기기; 호스트 환경(예: 채팅 내 임베드됨). 기존 코드와 에셋을 검토합니다. 사용자 참조: 그림이 아닌 아트 테크닉을 추출합니다. 중요한 모호함이 없으면 질문 없이 진행합니다.

2. 방향 설정 (모든 중간+ 작업)

디자인 레코드에 작성:

• 인터페이스 정체성: 어떤 물건/시스템, 누가 만들었는지, 누가 읽는지.
• 기억점: 한 문장, 이 작업의 특이사항에서 비롯되어야 함.
• 아트 디렉션: 매체, 붓질, 빛 방향, 팔레트, 선명도 — 이후 모든 생성 요청에서 그대로 재사용되는 하나의 공유 스타일 설명.
• 제외 목록: 이 작업이 피해야 할 장르 공식 및 기본값.
• 에셋 계획: 목적, 비율, 크롭, 투명도, 출처(기존 → AI → 웹)가 포함된 모든 구체적인 아트 항목. 출처가 실제로 존재하는지 커밋 전에 확인하십시오. AI 또는 라이선스 웹 자산이 방향을 지원할 수 없으면 지금 말하십시오.

3. 구축

작업 수준별:

• 간단함: 구현, 스크린샷, 최악의 1-3개 문제 수정, 완료.
• 중간: 포컬 영역을 전체 품질로 → 페이지 완성 → 결합된 검토 패스 한 번.
• 복잡함: workflow.md의 여섯 단계를 따름(방향 → 구성 → 핵심 샘플 → 모듈별 확장 → 폴리싱 → 승인). 단계는 품질 게이트이지 보고 체크포인트가 아닙니다. 계속 진행하십시오. 시스템적 문제 발생 시 관련 단계로 돌아가 영향받은 부분만 다시 수행하십시오.

빌드 중:

• 프로젝트 코드와 상호작용 패턴을 재사용하십시오.
• 장식용 폰트는 제목에만 사용하십시오. CJK 글리프 범위를 확인하고 폴백 스택을 설정하십시오.
• 모든 상태: 호버, 포커스, 활성, 선택, 비활성화, 로딩, 빈 상태, 오류 — 시각적으로 일관되게.
• 모션은 상호작용과 분위기를 제공합니다. 작업 전반에 걸쳐 동일한 지속 시간/이징 패밀리 사용; prefers-reduced-motion을 존중하십시오.

4. 에셋 통합

• 히어로 이미지를 먼저 배치한 다음 지원 정보를 정렬하십시오.
• 크롭, 마스크, 컬러 그레이딩, 그레인, 가장자리 블렌딩, 통일된 빛 방향을 통해 에셋을 통합하십시오. 텍스트를 위한 조용한 영역을 남겨 두십시오.
• 혼합 소스 스타일이 충돌하면 → 일치하도록 그레이딩; 그래도 충돌하면 → 강제하지 말고 교체하십시오.
• 에셋은 로컬 프로젝트 파일이며, 핫링크 URL이 아닙니다. 라이선스/속성을 준수하십시오.

시각적 검토 (스크린샷 기반, 가장 큰 문제 먼저)

1. 첫눈에(썸네일, ~1초): 눈이 어디에 꽂히는가; 계획된 포컬 포인트인가; 기억할 만한 것이 있는가.
2. 눈을 가늘게 뜨고: 명도 구조가 2-3개의 덩어리로 읽히는가; 화면이 대부분 일러스트레이션인가 아니면 대부분 어두운 패널인가.
3. 제목 가리기: 여전히 이 작업으로 인식되는가, 동일한 장르 템플릿이 아닌가.
4. 나란히: 모든 영역이 하나의 아트 디렉션(빛, 선, 재질, 팔레트, 유형)처럼 보이는가.
5. 실제 크기: 중국어 본문 텍스트가 편안한가.
6. 가장자리: 정렬, 오버플로, 브라우저 네이티브 크롬, 빈 상태, 남은 코드로 그린 아트 또는 플레이스홀더가 없는가.
7. 상호작용: 상태와 모션.
8. 대상 너비: 좁은/임베디드 레이아웃.

수정 우선순위: 방향 > 구성 > 핵심 아트 > 일관성 > 가독성 > 디테일. 라운드당 상위 1-3개 문제만 수정하십시오. 각 라운드 후 스크린샷을 다시 찍으십시오. 단계당 최대 두 라운드; 각 수정 세션 전에 롤백 지점을 유지하십시오.

수정 전에 원인 클래스를 진단하십시오: 핵심 아트 부족 / 약한 컨셉 정체성 / 약한 구성 계층 / 스타일 충돌 / 가독성 또는 레이아웃 오류. 각각 다른 수정 방법이 있습니다.

주 모델이 이미지를 볼 수 없는 경우 기존 비전 도구를 재사용하거나 비전 가능한 하위 에이전트에 검토를 위임하십시오. 실제로 확인된 것만 보고하십시오.

승인 체크리스트 (모두 예여야 함)

1. 이 작업 고유의 콘텐츠에서 비롯된 기억에 남는 첫눈 요소가 있는가?
2. 제목을 가렸을 때 이 UI가 동일한 장르 템플릿과 혼동되지 않는가?
3. 가장 중요한 시각적 영역이 일러스트레이션 자산을 사용하며 그 위상에 맞는 정밀도를 가지고 있는가 — 코드로 그린 인물, 프레임 내에서 분명히 조악한 요소가 없는가?
4. 에셋, 유형, 컴포넌트, 배경이 하나의 프로덕션으로 읽히는가? 가장 평범한 영역도 여전히 회화적이며 동일한 품질 기준에 있는가?
5. 페이지가 명확하고, 조작 가능하며, 대상 너비에 적응하고, 기능이 시각적 요소에 희생되지 않는가?

배송

• 먼저 실행 가능한 결과물을 제공하십시오.
• 복잡한 작업: 핵심 아트 컨셉, 실제 사용된 에셋(라이선스 노트 포함), 검토 중 주요 수정 사항, 검증 결과, 아직 플레이스홀더인 항목을 간략히 명시하십시오.
• 간단한 작업: 주요 변경 사항만 명시하십시오.
• 사용자에게 긴 디자인 문서는 보내지 마십시오. 디자인 레코드는 단계 간/세션 간 연속성을 위한 것이지 사용자 보고서가 아닙니다.