포트폴리오 디자인 시스템
이 사이트에는 디자인 시스템이 있습니다. 스타일을 변경하기 전에 저장소 루트에 있는 DESIGN.md를 읽고, 이를 기준으로 작업하세요.
규칙
- 모든 색상, 글꼴 크기, 간격 단계, 둥근 모서리, 지속 시간은
index.html상단의:root블록에 있는 CSS 사용자 정의 속성(토큰)입니다. 규칙에서는 토큰을 사용하세요. 이미 토큰이 정의된 원시 16진수 값, 픽셀 크기, 지속 시간을 절대 작성하지 마세요. - 새로운 값이 필요하면 동일한 변경 사항 내에서
:root에 새 토큰을 추가하고DESIGN.md에 일치하는 행을 추가하세요. 또한 디자인 시스템은 Claude에 Design System 아티팩트(https://claude.ai/artifact/2iPwsVBSqA9gs8nkaYC5g1)로 존재합니다. 여기서 토큰, 패턴, 규칙이 변경될 때, 동일한 작업 내에서 해당 아티팩트의project/tokens.json과project/README.md도 업데이트하여 세 복사본이 서로 달라지지 않도록 하세요. - 텍스트와 배경은 쌍으로 함께 옵니다. 새로운 패널 색상 클래스는 둘 다 설정합니다.
DESIGN.md의 AA 목록과 쌍이 일치하는지 확인하고, 풀 리퀘스트를 열기 전에README.md의 axe 스캔을 실행하세요. - 다크 모드는 없습니다.
prefers-color-scheme: dark규칙을 추가하지 마세요. 페이지는 의도적으로color-scheme: light를 설정합니다. - 모션은
--ease와--dur-*토큰을 사용하며,prefers-reduced-motion: reduce에서 중단되어야 합니다. - 390px와 1280px 너비에서 모션 감소를 켜고 끈 상태로
webapp-testing스킬을 사용하여 테스트하세요. 스타일 리팩터링 전후에 픽셀 단위로 동일한 스크린샷이 생성되어야 합니다.
각 요소의 위치
- 토큰:
index.html의:root - 참조 및 패턴 카탈로그:
DESIGN.md - Three.js 색상:
scene.js의 16진수 리터럴, 수동으로 팔레트와 동기화 유지 - Claude 내부 복사본: https://claude.ai/artifact/2iPwsVBSqA9gs8nkaYC5g1 (토큰, 브랜드 북, 컴포넌트 미리보기)