halftone-ch/drawn-ui

Drawn UI (수동 UI)

드로잉 화면은 디자이너가 케이스 스터디를 위해 스케치하듯 제품을 보여줍니다. 실제 인터페이스를 구조만 남을 때까지 단순화하고, 제품 고유의 색상으로 틴트를 입힙니다. 스크린샷이 '붙여넣기'처럼 보이는 반면, 이 드로잉은 디자인 작업처럼 읽히며, 모든 텍스트는 막대이므로 개인 데이터를 절대 노출하지 않습니다.

규칙이 적고 엄격하기 때문에 전체적인 모습은 차분하게 유지됩니다. 각 프로젝트는 틴트, 화면, 그리고 들려 올라간 한 부분이 프로젝트에서 비롯되므로 여전히 고유한 모습을 유지합니다. 드로잉이 어디에 사용될지(히어로, 그리드, 기능 목록, 슬라이드)는 사용하는 사람의 선택입니다.

다음 순서로 작업하세요

1. 실제 제품을 읽습니다. 코드, 앱 또는 디자인 파일에서 현재 화면을 확인합니다. 모든 드로잉은 실제 화면이나 컴포넌트를 기반으로 합니다. 은유적인 요소(떠다니는 저울, 문, 카드 사이의 화살표)를 절대 만들지 마십시오. 제품에 없다면 드로잉에도 표시하지 않습니다.
2. 순간을 선택합니다. 각 드로잉이 무엇을 위한 것인지 결정합니다: 하나의 화면, 하나의 컴포넌트, 하나의 상태. 세트는 하나의 컴포넌트를 더 자세히 보여주는 것이 아니라 서로 다른 컴포넌트를 보여줍니다.
3. 액센트 색상을 가져옵니다. 제품 고유의 틴트 또는 브랜드 색상입니다. scripts/tint.py "#hex" 명령어로 어떤 톤이 나오는지 확인할 수 있습니다. 제품에서 의미가 있는 경우에만 추가 액센트를 사용합니다(상태 색상, 브랜드 쌍).
4. 명세를 작성합니다. drawings.json 파일을 만들고, 포맷은 references/spec.md(드로잉 전에 크기, 리프팅, 톤에 관한 섹션을 읽으세요)를 참조하며, 예시는 examples/ledger/drawings.json을 참고합니다. 각 드로잉을 채울 공간에 맞게 크기를 지정합니다.
5. 그리고 확인합니다. python3 scripts/draw.py drawings.json --shots 명령어를 실행합니다(스크린샷 기능을 사용하려면 Playwright와 Chromium이 필요). 출력되는 모든 문제를 수정한 다음 out/shots/sheet.png를 열어 확인합니다. 숫자는 알려주고, 눈이 판단합니다: 카드 내 빈 모서리, 한쪽으로 기운 드로잉, 알약처럼 보이는 더미 등이 없는지 확인합니다. 통과할 때까지 그리고 차분해 보일 때까지 반복합니다.

규칙

1. 드로잉에는 단어가 없습니다. 모든 텍스트는 막대가 됩니다: 높이는 12, 8, 6 또는 4, 너비는 4단위, 완전히 둥글게 처리합니다.
2. 흰 카드: 역할당 하나의 반경(카드 12, 내부 상자 8, 행 4, 폰 32), 하나의 카드 그림자, 하나의 리프트 그림자.
3. 드로잉당 하나의 부분만 카드 밖으로 들려 올라갈 수 있습니다. 한쪽으로만 16에서 72 사이(24~40이 가장 좋음)만큼 떨어지며, 카드의 상단이나 하단을 넘지 않고, 주위에 8 이상의 여백이 있어야 합니다. 너비가 600 이상인 드로잉은 두 개까지 들 수 있습니다. 들려진 부분은 대체된 부분을 완전히 대체하며, 반만 덮지 않습니다.
4. 드로잉당 하나의 액센트 색상을 사용하며, 해당 화면에서 중요한 것에 적용합니다.
5. 드로잉당 최대 하나의 선 글리프를 사용하며, 1.5 포인트에 둥근 끝으로 그립니다.
6. 기본적으로 배경이 없습니다: 드로잉은 그림자를 위한 공간만 가지고 배치된 페이지 위에 놓입니다. "ground": true인 경우 틴트된 바탕색을 가지며, 너비와 높이의 65~75%를 차지하고 중앙에 배치됩니다.
7. 모든 것은 4 그리드 위에 1:1 비율로 배치됩니다. 나란히 놓인 드로잉들은 동일한 스케일을 공유합니다: 표시된 크기로 그리고, 같은 행에 있을 때는 높이를 맞춥니다.
8. 폰의 종횡비는 1에서 2.05 사이입니다.

출력 사용하기

out/<id>.svg 파일은 독립적이며 자체 너비와 높이를 가지고 페이지에 맞게 조정됩니다: 흰색 페이지에서는 밝게, 검은색 페이지에서는 어둡게 표시됩니다. 시스템 설정을 따르며, 부모 요소의 dark 또는 light 클래스(또는 data-theme)를 통해 강제로 지정할 수 있습니다. aria-hidden 속성이 있으며, 드로잉별로 네임스페이스가 지정된 ID를 가지므로 한 페이지에 여러 개를 인라인으로 배치할 수 있습니다. 모양에는 호버 모션을 위한 역할 클래스(p-ground, p-card, p-bar, p-dot, p-glyph, p-hi(들려진 부분))가 있습니다. out/index.html은 'Reduce Motion' 설정에 응답하는 차분한 예제를 보여줍니다. 폰에 너무 넓은 드로잉은 더 좁은 두 번째 드로잉을 얻습니다. 절대 압축하지 마십시오.

대신 Figma에서 디자인하는 경우: 동일한 규칙이 적용되며, 명세 값은 프레임에 1:1로 매핑됩니다(카드에는 자동 레이아웃, 들려진 부분에만 절대 위치). 각 바탕색을 SVG로 내보냅니다.

규칙과 제품이 충돌할 때

단일 액센트 색상이 없는 제품은 가장 어두운 중성색을 사용할 수 있습니다. 두 개의 하이라이트가 있어야만 의미가 있는 화면은 두 개의 드로잉으로 나눌 수 있습니다. 한 번에 하나의 규칙만 수정하고, 어떤 규칙을 수정했는지 명시하십시오.