Terrain UI
이 규칙은 산업 테마 게임의 인터페이스에서 추출되었으며, 일반 웹 페이지에서 유용한 것들만 남겼습니다. 이 스킬은 게임 자산을 포함하지 않으며 게임을 재현하려 하지 않습니다.
시작하기 전에 이 전체 파일을 읽으세요. 색상 및 컴포넌트 마크업은 assets/terrain.css를 열고, 등고선 배경은 assets/contours.js를 사용하며, 각 규칙의 출처와 제외된 이유는 references/research.md를 참조하세요.
여덟 가지 규칙
- 하나의 악센트 색상, 두 가지 의미: 현재 위치와 기본 액션. 기본값
#FEEC00, 게임에서 선택된 탭에서 샘플링했습니다. 채움(fill)으로만 사용하며, 위에는 잉크색 텍스트를 올립니다; 라이트 테마에서는 선이나 텍스트에 절대 사용하지 마세요. 호버에도 동일하게 적용됩니다: 기본 버튼만 호버 시 악센트로 채워집니다. 링크, 알약 버튼, 목록 행은 밝아지거나 밑줄이 두꺼워집니다. - 선택은 방향에 따라 달라짐:
- 수직 목록: 호버 시 행이 밝아집니다; 선택된 행은 어두워지고 밝은 텍스트가 표시되며, 왼쪽에 악센트 막대가 나타납니다.
- 수평 탭: 선택된 탭이 악센트로 완전히 채워집니다. 전환 시 이전 블록이 축소되고 새 블록이 중앙에서 옆으로 열립니다.
- 버튼 모양이 우선순위를 나타냄: 기본 액션은 오른쪽 아래 모서리가 잘린 블록입니다; 보조 액션은 오른쪽 끝에 둥근 아이콘이 있는 알약 형태입니다. 버튼 그룹당 기본 액션은 최대 하나입니다.
- 모든 페이지 왼쪽 상단에 경로 배치:
// Work / About me. 돌아갈 수 있는 레벨은 링크입니다. - 숫자는 장식이며, 반드시 실제 값이어야 함: ID, 날짜 및
current / total카운터는 넓은 표(table) 숫자로 설정하세요. 데이터를 만들어내거나 가짜 기술 텍스트를 추가하지 마세요. 카피에도 동일하게 적용됩니다: 사용자가 제공한 내용이나 프로젝트 자체 문서에서만 제품(기능, 지원 범위, 설치)을 설명하고, 그 범위를 유지하세요. 출처가 없는 경우, 내용을 채우지 말고[TODO: ...]와 같은 플레이스홀더를 작성하세요. - 단축키에 키 캡 표시: 예: 페이지 버튼 옆에
←→. 미세 포인터가 있는 기기에서만 표시하세요. - 배경: 닫힌 등고선: 각 모서리에 하나씩 패치, 6%~9% 불투명도, 다섯 번째 선마다 더 두껍게, 애니메이션 없음.
- 짧고 단단한 모션: 호버 90ms, 선택 110~120ms, 곡선
cubic-bezier(.2,0,0,1). 시스템이 움직임 감소를 요청하면 모두 끄세요.
먼저 페이지 유형 선택
시작하기 전에 어떤 종류의 페이지를 구축할지 결정하세요. 세 가지 유형 모두 동일한 색상과 컴포넌트를 공유하며, 두드러짐(boldness) 정도가 다릅니다. 확실하지 않을 때는 Reading을 선택하세요.
| 유형 | 사용처 | 방법 | 게임 내 해당 요소 |
|---|---|---|---|
| Reading | 문서, 프로젝트 세부 정보, 설정, 도움말 | 하나의 텍스트 열, 약 65자(라틴) 또는 38자(CJK) 너비; 현재 탐색 항목과 기본 버튼에만 악센트; 등고선 선택 사항 | 백과사전, 아카이브 |
| Showcase | 홈 페이지, 포트폴리오, 랜딩 페이지 | 크고 넓은 제목, 외곽선(outline) 유형 허용; 배경에 큰 숫자; 등고선 켜짐; 콘텐츠가 블록 단위로 페이드 인 가능 | 메인 메뉴, 상점 |
| Workbench | 관리 페이지, 대시보드, 도구, 확장 설정 | 왼쪽에 수직 목록 탐색, 상단에 탭; 주로 테이블, 숫자, 양식; 큰 제목 없음; 액션에 대한 응답으로만 모션 | 인벤토리, 장비, 친구 목록 |
컴포넌트
모든 컴포넌트는 assets/terrain.css에 tu- 접두사로 존재합니다. examples/demo.html에 각각의 예시가 있습니다.
| 컴포넌트 | 클래스 | 참고 |
|---|---|---|
| 경로 제목 | tu-crumb | 규칙 4 |
| 수직 목록 | tu-list | 현재 항목을 aria-current로 표시 |
| 수평 탭 | tu-tabs tu-tab | 현재 탭을 aria-selected="true" 또는 aria-current로 표시 |
| 기본 / 보조 버튼 | tu-btn / tu-btn--pill + tu-btn__icon | 규칙 3 |
| 키 힌트 | tu-kbd | 규칙 6 |
| 필드 행 | tu-fields tu-sep | 메타데이터를 수직 막대 │로 구분 |
| 패널 | tu-panel | 평평한 블록: 모서리 반경, 그림자, 테두리 없음 |
| 테이블 | tu-table-wrap tu-table | 작고 넓은 헤더 레이블; 숫자 열을 tu-right로 오른쪽 정렬; 좁은 화면에서 좌우 스크롤 |
| 입력 | tu-field tu-input tu-hint | 포커스 시 밑줄이 두꺼워지고 왼쪽에 악센트 막대 표시 |
| 오류 | tu-error, 입력에 aria-invalid="true" 추가 | 작은 악센트 사각형과 수정 방법 한 문장; 빨간색 텍스트 없음 |
| 전환 | tu-switch | "켜짐"은 현재 상태이므로 트랙이 악센트로 채워짐 |
| 대화상자 | <dialog class="tu-dialog"> | 버튼은 하단 막대에 위치: 기본 하나, 취소는 알약; 흐림(blur)에서 선명하게 나타남 |
| 토스트 | tu-toast | 왼쪽에 악센트 막대가 있는 어두운 막대; 왼쪽에서 슬라이드 인, 2초 후 사라짐 |
| 빈 상태 | tu-empty | 여기에 무엇이 나타날지 한 문장과 점선 상자, 선택적으로 기본 버튼 하나 |
| 로딩 | tu-progress, 대기 중 tu-progress--busy 추가 | 2px 선; 진행률을 알 때는 --tu-value 설정하고 백분율 표시 |
빨간색 없음. 경고, 실패, 대기 상태는 잉크 텍스트와 함께 작은 악센트 사각형을 사용합니다. 삭제와 같은 되돌릴 수 없는 작업은 확인 대화상자 뒤에 배치하세요.
이 표에 없는 것은 여덟 가지 규칙에서 파생하세요: '현재' 또는 '기본'인지 여부가 악센트 사용 가능 여부를 결정합니다; 기본 또는 보조인지 여부가 블록 또는 알약을 결정합니다; 클릭 가능한지 여부가 호버 시 밝아질지 결정합니다.
모션
| 액션 | 지속 시간 | 방법 |
|---|---|---|
| 호버 밝아짐 | 90ms | 배경색 전환 |
| 목록 선택 막대 나타남 | 110ms | scaleY(0 → 1) |
| 탭 전환 | 120ms | 악센트 블록 scaleX(0 → 1), 중앙에서 열림 |
| 기본 버튼 호버 | 280ms | 왼쪽에서 악센트가 밀려 들어옴 |
| 페이지 변경 | 나가기 320ms, 들어오기 480ms | 이전 페이지 흐려지며 페이드 아웃; 새 페이지 블록 단위로 페이드 인, 간격 100ms |
금지 사항
- 보이지 않는 마커(빨간 점,
NEW배지): 게임에서는 보상을 수집하도록 유도하지만, 포트폴리오나 일반 사이트에서는 성가신 느낌. - 프로스트 유리, 글리치 티어링, 스캔 라인, 글로우, 큰 악센트 채움, 그림자가 있는 둥근 카드.
- 게임 전용 요소: 3D 회전 목마 메뉴, 캐릭터 아트, 희귀도 색상 막대.
- 공식 게임 자산: 스크린샷, 로고, 아이콘, 캐릭터 아트, 카피, 공식 폰트 파일.
타이포그래피
- 라틴 텍스트 및 숫자: Saira (오픈 소스, SIL OFL). 레이블 125%로 늘림, 모두 대문자, 0.06em 자간. 공식 사이트는 넓은 레이블에 자간을 추가하지 않지만, 여기서는 작은 크기를 위해 약간 유지.
- 중국어: Noto Sans SC 또는 시스템 산세리프. 본문 텍스트에 세리프 또는 브러시체 없음.
- 모든 숫자는 표(table) 숫자(
font-variant-numeric: tabular-nums).
단일 HTML 파일 제공
terrain.css클래스를 그대로 사용하세요; 색상을 변경하는 페이지 수준 재정의를 추가하지 마세요. 변경이 필요하면 컴포넌트에 문제가 있는 것이므로 스킬에 보고해야 합니다.terrain.css는<style>요소에,contours.js는<script>요소에 넣습니다. 스크립트를 인라인하기 전에 리터럴</script>가 포함되어 있지 않은지 확인하세요; 포함된 경우</script>로 작성하세요.- 페이지가 오프라인에서 작동해야 하는 경우 Saira를 woff2 데이터 URI로
@font-face에 포함시키고, 그렇지 않으면 Google Fonts에 연결하고 폴백 폰트를 유지하세요.
제공 전 체크리스트
- 페이지 유형이 선택되었으며, 다른 유형의 제목 크기가 한 페이지에 혼합되지 않았습니다.
- 악센트는 현재 위치와 기본 액션에만 나타나며, 페이지에 빨간색이 없습니다.
- 각 버튼 그룹에 블록 기본 버튼이 최대 하나이며, 나머지는 알약입니다.
- 수직 목록과 수평 탭이 각각의 선택 스타일을 사용합니다.
- 모든 페이지에
//경로 제목이 있습니다. - 모든 숫자는 실제 데이터이며, 모든 제품 설명에는 출처가 있고 그 범위를 과장하지 않습니다.
- 라이트/다크 테마 모두 확인되었으며, 전화기 너비(약 400px)에서 좌우 스크롤이 없습니다.
- 키보드 포커스가 보이며, 움직임 감소 설정 시 모든 것이 정지 상태입니다.
- 공식 게임 자산이 사용되지 않았습니다.
파일
| 파일 | 내용 |
|---|---|
assets/terrain.css | 색상 토큰(라이트 및 다크) 및 모든 컴포넌트 |
assets/contours.js | 등고선 배경, 설정 한 줄: TerrainContours.mount(canvas) |
examples/demo.html | 모든 컴포넌트가 한 페이지에, 열기 준비 완료 |
examples/screenshots/ | 라이트, 다크, 전화기 너비, 대화상자의 컴포넌트 페이지 |
references/research.md | 연구 노트: 관찰된 내용, 유지된 내용, 제외된 내용 |