verso은(는) 무엇을 하나요?
기존 인터페이스의 일부를 르네상스 시대 작업 노트 페이지로 바꿉니다: 철장 잉크가 갈색으로 바래고, 질감 있는 종이 위에 그려진 듯한 스타일.
참조 대상은 레오나르도 다 빈치의 다섯 가지 시트입니다: 윈저 해부학 노트(RCIN 919070 verso), 코드스 레스터 한 페이지, 비트루비안 맨, 코드스 아런델 한 페이지, 코드스 포스터 노트북 페이지입니다. 세션에서 첫 번째 변환을 하기 전에 references/style.md를 읽으세요. 이 문서는 스타일의 각 물리적 사실과 그로부터 파생된 UI 결정을 설명합니다. 아래 결정들은 이 문서와 함께 있어야만 의미가 있습니다.
이 스킬의 파일
references/style.md: 연구 자료: 종이, 잉크, 손글씨, 구성, 측정된 대비를 포함한 팔레트, 그리고 일반적인 UI 부분을 원고 부분에 매핑한 표.assets/manuscript.css: 일반 CSS로 작성된 테마로,.ms-scope아래에 범위가 지정되며data-ms-paper로 설정되는 네 가지 종이 프리셋이 있습니다. 모든 값의 진실 공급원입니다.assets/defs.svg: 네 가지 SVG 필터(퀼, 자유 선, 데클, 워시). 문서당 한 번 마운트합니다.assets/sketches.svg: 페이지에 배치할 펜 스케치: 기하학 구성, 메커니즘, 지시선, 잉크 얼룩, 문자로 표시된 점이 있는 광선, 해칭된 입체.examples/: 두 가지 변환 예제로, 각각 전후가 있습니다:before.html과after.html(설정 카드,windsor),release-before.html과release-after.html(릴리스 노트,leicester).examples/index.html은 이들을 나란히 보여주고 프리셋을 전환합니다. 완료된 변환의 기준으로after.html파일을 읽으세요.
1단계. 범위 설정
사용자가 부분을 지정합니다: 파일, 컴포넌트, 라우트, 선택자 또는 설명입니다. 그 부분만 변환하고 다른 것은 변환하지 마세요.
- 대상이 주어지지 않았다면, 대상을 요청하세요. 추측으로 전체 앱을 다시 스타일링하지 마세요.
- 부분의 루트 요소를 찾으세요. 테마가 하는 모든 것은 해당 루트의
ms-scope클래스 하나에 매달리므로, 앱의 나머지는 그대로 유지됩니다. - 부분이 다른 화면에서 공유되는 경우(디자인 시스템 버튼, 레이아웃), 그렇게 말하고 공유된 부분을 변환할지 로컬 복사본을 감쌀지 물어보세요.
2단계. 작성 전에 프로젝트 읽기
- 프로젝트가 스타일을 지정하는 방식을 찾으세요: Tailwind, CSS 모듈, 일반 CSS, CSS-in-JS 라이브러리, 컴포넌트 라이브러리. 테마를 해당 관용구로 포팅하세요. 이미 스타일 시스템이 있는 프로젝트에 두 번째 스타일 시스템을 떨어뜨리지 마세요.
- 프로젝트의 규칙 파일(
CLAUDE.md,AGENTS.md등)을 읽으세요. 컴포넌트에서 원시 hex를 금지하는 경우, 먼저 하나의 스타일시트에--ms-*값을 토큰으로 추가한 다음 토큰을 사용하세요. 타입 스케일이나 폰트 로더가 있는 경우, 해당 로더(예를 들어 Next.js의next/font/google)를 통해 세 개의 글꼴을 추가하고@import라인을 통해 추가하지 마세요.@import는 일반 HTML에만 해당됩니다. - 프로젝트 자체의 기본 요소를 유지하세요.
Button을 변형이나 클래스를 통해 다시 스타일링하고, 원시<button>으로 대체하지 마세요.
3단계. 기본 요소를 한 번 설치
- 토큰과 클래스.
assets/manuscript.css또는 프로젝트 관용구에 해당하는 것을 가져오세요. Tailwind v4에서는 토큰이@theme에 들어가고 다중 레이어 조각(.ms-page::before,.ms-frame,.ms-cast,.ms-button)은@layer components에 들어갑니다. 의사 요소 스택은 유틸리티에 맞지 않기 때문입니다. - 필터.
assets/defs.svg를 한 번, 범위가 지정된 루트 내부나 앞에 마운트하세요. React에서는 작은 컴포넌트로 만드세요. 이것 없이 프레임과 규칙이 직선으로 렌더링되고 데클이 사라지는데, 이는 조용한 실패입니다: 확인하세요. - 글꼴. EB Garamond (읽기), IM Fell English (제목), La Belle Aurore (여백 메모). 사용되는 두께만 로드하세요.
4단계. 프리셋 선택
부분의 모양에 따라 references/style.md의 섹션 6 표를 참고하여 프리셋을 선택하세요. 간단히:
windsor: 양식, 설정 및 조밀한 도구 패널용.leicester: 기사, 문서, 릴리스 노트, 히어로 및 빈 상태용.arundel: 대시보드, 캔버스 및 여러 작은 부분의 보드용.forster: 좁은 카드, 사이드바, 목록 및 모바일 화면용.
범위가 지정된 루트에 data-ms-paper="..."로 설정하세요. windsor는 속성이 필요 없습니다. 사용자가 프리셋이나 코덱스를 지정할 수 있으며, 그게 우선합니다. 표면당 하나의 프리셋입니다.
5단계. 부분별로 변환
references/style.md의 매핑 테이블을 사용하여 부분을 작업하세요. 가장 중요한 규칙:
- 표면. 부분의 루트는
.ms-page가 됩니다: 종이, 질감, 배선 및 체인 라인, 데클 엣지. 내부의 흰색 또는 회색 표면은 사라집니다. 블록을 분리해야 하는 곳에 최대 하나의 더 밝은 패치로.ms-repair를 사용하세요. - 카드. 카드는 느슨한 펜 프레임(
.ms-frame)이 되거나 아무것도 아닙니다. 대부분의 그룹에는 프레임이 필요 없습니다: 공간과 손으로 그린 규칙이 시트에서처럼 분리합니다. 상자형 메모인 하나 또는 두 개의 블록에만 프레임을 사용하세요. - 그림자. 모든
box-shadow및 고도는 해칭(.ms-cast)이 되거나 사라집니다. 이 테마에는 부드러운 회색 그림자가 없습니다. - 모서리. 반경을
--ms-radius(손으로 그린 반경) 또는 없음으로 바꾸세요. - 색상. 갈색 잉크만 사용합니다. 본문은
--ms-ink, 보조는--ms-ink-2, 캡션은--ms-ink-3. 브랜드 색상은 생귄(적갈색)이 되며, 표면당 한 번 사용됩니다: 기본 동작, 링크 및 포커스 링. - 타이포그래피. 본문은 올드 스타일 피규어가 있는 EB Garamond. 제목은 IM Fell. 섹션 제목은 IM Fell 이탤릭체와 아래 이중 손 규칙. 본문 텍스트에 손글씨체를 설정하지 마세요: 짧은 메모에만 사용합니다.
- 필드. 입력은 규칙선(
.ms-input), 텍스트 영역은 규칙선, 체크박스는 십자가가 있는 잉크 사각형(.ms-check). 실제<input>과<label>을 유지하세요; 그림만 변경됩니다. - 배지와 태그는 동그라미 친 단어(
.ms-circled)가 됩니다. - 값 목록, 통계 및 테이블은 원장(
.ms-ledger)이 됩니다: 손 규칙의 행, 값에 대한 점선 지시선, 올드 스타일 피규어. - 아이콘. 프로젝트의 아이콘을 유지하세요. 잉크 톤으로 설정하고
ms-ink필터를 통해 적용하세요. 이모지나 글리프로 바꾸지 마세요. - 이미지는
.ms-plate를 사용합니다: 세피아, 종이에 곱해집니다. - 차트는 펜 선과 해칭된 채우기가 됩니다. 그라데이션은 없습니다. 레스터 다이어그램처럼 점과 영역을 이탤릭 문자(
.ms-point)로 이름을 지정하세요. - 진행 바, 미터 및 슬라이더 트랙은 비트루비안 스케일(
.ms-scale및--value)이 됩니다. 요소의 역할과 aria 값을 유지하세요. 네이티브<input type="range">또는<progress>의 경우 네이티브 요소를 유지하고 그 뒤에 스케일을 그리세요. - 단계 번호, 순위 및 인덱스는 포스터에서처럼 여백의 그림 번호(
.ms-figno)가 됩니다. - 변경된 값은 수정입니다:
<del>은 펜으로 취소선,<ins>는 손글씨. UI가 이미 이전 값과 새 값을 보여주는 경우에만 사용하세요. - 합계 및 분석은 아런델에서처럼 작업된 합계(
.ms-sum)가 될 수 있습니다. - 긴 텍스트의 섹션은 일반 이니셜(
.ms-initial)로 시작하고 레스터에서처럼 규칙선으로 끝나는 줄(.ms-endrule)로 끝납니다.
6단계. 작업 페이지로 구성
카드 그리드를 갈색 카드로 바로 변환하는 것은 실패 모드입니다. 부분을 다시 구성하여 디자인된 것이 아니라 채워진 시트처럼 보이게 하세요:
.ms-folio를 사용하세요: 주요 열과 여백. 보조 정보, 힌트 및 도움말 텍스트를.ms-note로 여백으로 이동하고, 도움이 되는 경우 주제를 가리키는 지시선 스케치를 추가하세요.- 블록의 너비가 다르게 하세요. 스케치를 텍스트 안에 배치하고, 자체 밴드에 배치하지 마세요.
- 두세 개의 작은 블록을
.ms-tilt-l,.ms-tilt-r또는.ms-tilt-s로 기울이세요. 양식 필드, 테이블 또는 페이지의 약 1/3 이상을 절대 기울이지 마세요. - 주제에 맞는
assets/sketches.svg의 펜 스케치를 하나 추가하세요: 설정이나 시스템용 메커니즘, 레이아웃, 데이터 또는 측정용 구성. 어느 것도 맞지 않으면 같은 방식으로 새로 그리세요. 표면당 하나입니다. - 한 표면에 대한 장식 예산을 지키세요: 스케치 하나(최대 두 개), 얼룩 또는 번짐 하나, 비침 하나, 거울 블록 두 개. 이 모든 것을 다 가진 페이지는 의상처럼 읽힙니다. 대부분의 표면은 이 중 두세 개만 필요하며, 모두 필요하지는 않습니다.
- 진정한 빈 공간은 장식용 거울 문자(
.ms-mirror,aria-hidden="true")의 최대 두 블록으로 채우세요. 당시 방식의 이탈리아어(자기 메모, 목록, 측정)로 작성하세요. 실제 인용문으로 제시하지 마세요. - DOM 순서는 읽기 순서를 유지합니다. 레이아웃이 시각적으로 요소를 이동할 수 있지만, 소스 순서는 여전히 스크린 리더와 Tab에 의미가 있어야 합니다.
7단계. 가드레일
- 명암비. 실제 텍스트는 절대
--ms-wash를 사용하지 않습니다. 새로운 것을 종이에 대해 측정하세요: 텍스트는 4.5:1, 의미 있는 그래픽 또는 컨트롤의 가장자리는 3:1. - 거울 텍스트는 콘텐츠가 아닙니다. 레이블, 값, 오류 및 지침은 읽을 수 있고 올바른 방향으로 유지됩니다.
- 의미는 그대로. 동일한 요소, 역할, 이름, 상태 및 핸들러. 변환된 컴포넌트는 이전과 정확히 동일하게 동작해야 합니다.
- 컨트롤은 인식 가능하게 유지. 버튼은 여전히 누를 수 있어 보이고, 필드는 여전히 쓸 수 있어 보이며, 포커스는 항상 보여야 합니다(생귄 윤곽선).
- 모션. 테마의 모션은 잉크입니다:
data-draw로 스케치가 그려지고, 체크박스에 표시가 나타납니다. 호버와 프레스는 워시이며, 절대 스케일이 아닙니다.prefers-reduced-motion을 존중하세요.manuscript.css는 이미 이를 처리합니다. - 비용. 각 필터링된 요소는 필터 패스입니다. 필터를 의사 요소, 프레임 및 스케치에 유지하고, 긴 행 목록이나 스크롤 콘텐츠에는 유지하지 마세요. 본문 텍스트에
ms-ink를 두지 마세요. - 기관 표시 없음. 도서관이나 수집가의 도장, 박물관의 카탈로그 번호를 브랜딩으로 복사하지 마세요. 레오나르도의 이름을 서명으로 사용하지 마세요. 페이지는 그의 방식이지만 그의 것으로 제시되지 않습니다.
- 라이트 모드만. 시트는 객체이므로 다크 모드에서 반전되지 않습니다. 앱에 어두운 테마가 있는 경우, 범위가 지정된 부분은 종이를 유지합니다.
8단계. 확인
- 변환된 부분을 렌더링하고 스크린샷을 찍으세요. 브라우저 도구(agent-browser, Playwright, 미리보기 창)를 사용할 수 있으면 사용하세요. 살펴보세요.
- 프레임과 규칙이 물결 모양인지 확인하세요. 직선이면 defs가 마운트되지 않았거나 필터 ID가 충돌한다는 의미입니다.
- Tab으로 부분을 탐색하세요. 모든 컨트롤이 합리적인 순서로 도달되고 포커스 링이 표시됩니다.
- 전화기 너비에서 페이지를 확인하세요. 폴리오가 한 열로 축소됩니다.
- 프로젝트의 자체 검사(타입체크, 린트, 빌드)가 있으면 실행하세요.
보고
완료되면 사용자에게 몇 줄로 알리세요:
- 어떤 부분이 변경되었고 어떤 파일인지,
- 어떤 프리셋을 사용했고, 그 이유가 부분에 어떻게 맞는지,
- 한 번 추가된 것(토큰, 글꼴, 필터)과 그 위치,
- 변경되지 않은 부분과 그 이유,
- 어떻게 볼 수 있는지(라우트 또는 열 파일).