magholmes/cool-style

cool-style은(는) 무엇을 하나요?

수백 개의 독립 웹사이트 — 개인 사이트, 넷 아트, 타이포그라피 파운드리, 아카이브, 스튜디오, 소규모 도구, 저널 — 를 면밀히 분석하여 추출한 내용입니다. 웹의 가장 매혹적인 구석을 수집하는 사람들이 저장해 둔 사이트들입니다(references/method.md). 여기에는 트렌드 보고서가 없습니다. 이 사이트들이 실제로 하는 일을 집계한 것입니다.

템플릿은 '웹사이트는 어떻게 생겼는가?'라는 질문에 답합니다. 이 사이트들은 각자 '이 웹사이트는 무엇에 관한 것인가?'라는 질문에 답하고 — 그 답이 레이아웃, 서체, 색상, 그리고 움직이는 한 가지를 결정하게 합니다.

그 정전(正典)은 거친 것부터 정교한 것까지 다양합니다 — 타일 GIF 배경이 있는 Neocities 신전과 픽셀 단위로 설계된 타이포그라피 파운드리가 모두 포함됩니다. 둘 다 멋집니다. 빠진 것은 중간 지점, 즉 '무엇이든 될 수 있는' 사이트입니다.

시작하기 전에

1. 먼저 아이디어를 찾으세요 (다음 섹션). 한 문장으로 아이디어를 말할 수 있을 때까지 레이아웃, 팔레트, 글꼴은 정하지 마세요.
2. 아래 표에서 원형(archetype)을 고르고, 새로 빌드하는 경우 해당 스타터로 시작하세요: node ${CLAUDE_SKILL_DIR}/scripts/new.mjs <archetype> <dir>.
3. 실제 사례를 살펴보세요. node ${CLAUDE_SKILL_DIR}/scripts/examples.mjs <tag or word>는 연구된 사이트들 중에서 특정 디자인 결정(move)을 잘 보여주는 사이트를 최선순으로 출력합니다 (--tags는 어휘 목록, --random 5는 무작위 5개).
4. 다른 하우스 스타일(예: magnus-style)이 적용 중이라면, 그 스타일이 토큰(서체, 색상, 타이밍)에 대해 우선합니다. 이 스킬은 아이디어, 구조, 그리고 디자인 결정(move)을 위해 사용하세요.

아이디어 찾기

(자신에게, 또는 상대방에게 — 한 번에 한 질문씩) 물어보세요:

1. 한 문장으로 무엇인가요? 무엇을 위한 것이 아닙니다. "가로등 위 마이크가 들은 모든 노래의 기록." "태양열 잡지의 노트."
2. 무엇과 비슷한가요? 이미 닮은 대상, 장소 또는 시스템: 달력, 영업 시간이 있는 가게, 스프레드시트, 정원, 라디오, 책의 판권지, 반지, 책상. 이것이 컨테이너가 됩니다 (법칙 1).
3. 템플릿이 숨길 만한, 그 사이트에 대해 참된 사실은 무엇인가요? 무게, 나이, 운영 시간, 데이터, 만들어진 장소의 날씨, 그 안에 있는 것들의 수, 만든 사람.
4. 움직이거나 변하는 한 가지는 무엇인가요? 하나를 고르세요. 시간, 조회수, 방문자의 포인터, 우연, 다른 방문자들.
5. 누군가가 친구에게 링크를 보내게 만드는 것은 무엇인가요? 그것이 시그니처 디자인 결정(move)입니다. 다른 모든 것은 그것이 눈에 띄도록 더 조용해집니다.

답변을 프로젝트 상단에 기록하세요 (index.html의 주석으로도 좋습니다). 답변이 "없음"이라면, 그 사이트는 디자인할 준비가 되지 않은 것입니다 — 콘텐츠가 필요합니다.

열두 가지 법칙

1. 형식이 주제를 표현하게 하라. 가장 강력한 사이트들은 주제 자체의 형태를 컨테이너로 사용합니다. 파도에 대한 에세이는 끝없이 스크롤되며 각 단락이 솟아올랐다가 다시 내려갑니다(#214). 기계 학습 데이터셋 가이드는 스프레드시트 형태로 배치됩니다(#481). 인터페이스의 역사는 재구성된 1984년 Mac 창 안에 자리 잡습니다(#501). 감시 음악 로그는 하나의 두 가지 색상 LCD입니다(#76). 일일 만화 아카이브는 연간 달력입니다(#21). 테스트: 이 레이아웃이 다른 주제를 그대로 담을 수 있습니까? 그렇다면 템플릿입니다.
2. 하나의 아이디어를 모든 레이어를 통해 관통시켜라. 은유는 내비게이션, 제목, 그림, 심지어 페이지 무게에까지 도달합니다. Our Networks(#232)는 사이트맵을 tree 명령어로 출력하고, 노트북을 ASCII로 그리고, 무게는 39KB에 불과합니다. 종종 전체 아이디어는 하나의 값싼 메커니즘에 완전히 헌신합니다: 시를 숨기는 36개의 CSS 타일(#228), 바람 데이터의 하루에 의해 결정되는 자간(#669).
3. 웹사이트는 장소이지, 브로셔가 아니다. 방, 책상, 마을, 정원, 책장, 영업 시간이 있는 카페(#828), 라디오, 키오스크. 내비게이션은 가구가 됩니다: 이정표(#197), 반지(#203), 책장(#652), 껍질을 벗기는 양파(#789). 도메인조차 장소 이름입니다 — 약 1/6이 표현적인 TLD(.world .garden .cafe .town .computer .zone)를 사용합니다.
4. 하나의 잉크를 고수하라. 하나의 바탕 위에 하나의 색, 그리고 작업이 다른 모든 색을 공급합니다. 사이트의 1/4은 3개 이하의 16진수 색상을 사용합니다; 회색조 다음으로, 전체 정전에서 가장 많이 사용된 색상은 순수한 #ffff00, #ff0000, #0000ff입니다. 강조색은 주제에서 가져오세요 — 아카이빙되는 책 재킷의 빨간색(#3). → colour.md
5. 이유가 있는 서체 — 또는 일부러 브라우저 기본 서체를 사용하라. 69%가 서체를 자체 호스팅합니다(Neue Haas, ABC Diatype, Monument Grotesk, Space Mono가 선두); 23%는 시스템 서체만 사용하고 9%는 전혀 선언하지 않습니다 — Times와 기본 파란색을 하나의 입장으로 사용. 고정폭 글꼴은 스택의 55%에 나타납니다. 템플릿 서체는 거의 없습니다(Inter 또는 Geist 약 4%). 주요 예시 사이트들이 가장 많이 선언한 서체는 Arial, Times, Helvetica입니다. 크기는 대비입니다: 절반은 11px 이하로 내려가고, 1/4은 100px 이상 올라가며, 1/3은 4개 이하의 크기만 사용합니다. → type.md
6. 색인(index)이 홈페이지다. 목록, 표, 달력 및 개수가 히어로와 카드보다 낫습니다. 상자 대신 규칙(가는 선, 점선); 모든 항목이 동일한 슬롯에; 열로 표시된 실제 메타데이터; 카테고리 옆의 개수; 타임스탬프; 파일 무게. 스프레드시트 형태의 건축 사무소(#535), 행마다 하늘 조각이 있는 배출 데이터(#522), 상자 그리기 텍스트로 된 점수(#288).
7. 한 문장으로 말하라. 산문으로 작성된 인터페이스: 설명이 곧 내비게이션(#316, #282, #530), 이름 대신 로고가 있는 약력(#856), 명사를 그림으로 대체한 그림 문자(#547), 가입이 마지막 절인 하나의 문장으로 된 전체 페이지(#783). 목소리는 구체적이고, 인간적이며, 종종 소문자로, 때로는 재미있고, 항상 정직합니다 — 취소선이 그어진 폐점 시간(#828), 페이지가 느리다고 경고하는 헤드라인(#504). → voice.md
8. 한 가지는 살아있게 하라. 연구된 대부분의 사이트(86%)가 무언가를 합니다 — 하지만 보통 한 가지입니다: 시간이 바탕색을 물들이고, 날씨가 그라데이션을 설정하고(#832), 웹캠 프레임이 악기처럼 연주되고(#12), 글자가 바람에 따라 떠다니고(#669), 방문자가 익명의 동물로 나타나고(#95), 사이트가 밤에 문을 닫습니다. 시계에는 이유가 필요합니다 (누구의 시간? 언제까지?). → recipes.md
9. 기본값과 차용된 객체는 재료다. 시의 연으로서의 네이티브 폼 컨트롤(#123), 레이아웃으로서의 프레임셋(#616), 앨범을 위한 2000년대 ISP 포털(#631), 밴드를 위한 2005년 미디어 플레이어(#116), 쿠키 배너로서의 클리피(#179). 장르를 인용하면 사이트에 목소리가 무료로 생깁니다. 거침은 아이디어가 날카로울 때만 의도된 것으로 읽힌다.
10. 호기심 많은 이를 보상하라. 포인터, 인내심 있는 사람, 소스 보는 사람을 위한 무언가: 호버 시 드러나는 효과, 만질 때까지 사라져 있는 단어(#360), 볼 풀 필터(#479), 드래그하는 렌즈(#254), HTML 주석 속의 노트(#283), 방문할 때마다 다른 페이지. 필수 요소를 거기에 숨기지 마십시오.
11. 작고, 정적이며, 연결되어라 — 오래가도록 지어라. 저장된 사이트의 약 1/3은 이미 죽었거나, 리디자인되었거나, 장벽 안에 갇혔습니다. 일반 자체 포함 페이지(종종 GitHub Pages에서)는 살아남았습니다; JavaScript 쉘, 중단된 호스트, 만료된 도메인이 먼저 사라졌습니다. 첫 당사자 무게의 중앙값은 약 250KB이고 1/4은 50KB 미만입니다. 외부로 링크하세요: 1/4은 첫 페이지에 10개 이상의 외부 링크를 가지고 있습니다 — 친구, 웹링, 디렉토리, 출처.
12. 멋지고, 친절하게. 정전의 사각지대: 오직 17%만이 축소된 움직임을 존중하고, 대체 텍스트 적용률 중앙값은 17%, 56%가 포커스 아웃라인을 제거하고, 18%가 줌을 차단하며, 절반이 텍스트를 11px 이하로 설정합니다. 모든 결정은 그 보호 장치와 함께 하십시오(never.md, recipes.md). 사람을 배제하는 멋짐은 그저 시끄러울 뿐입니다.

원형(Archetype) 고르기

컨테이너가 첫 번째 결정입니다. 전체 설명, 주요 디자인 결정, 모범 사례 및 함정: references/archetypes.md.

원형	웹사이트는…	용도	스타터	살펴볼 사례
노트북 (notebook)	공개된 노트	에세이, 일기, 연구 기록, 진	notebook	#34 #124 #214 #362
색인 (index)	카탈로그, 원장, 데이터베이스	포트폴리오, 아카이브, 컬렉션	index	#3 #522 #535 #288
문장 (sentence)	클릭할 수 있는 하나의 문장	스튜디오, 약력, 선언문, 소규모 조직	sentence	#316 #282 #530 #783 #856
포스터 (poster)	하나의 화면, 하나의 단어, 하나의 잉크	스튜디오, 레이블, 이벤트, 릴리스	poster	#7 #776 #201 #599
방 (room)	사물이 있는 장소	개인 사이트, 상점, 컬렉션	room	#9 #277 #92 #793
연감 (almanac)	달력, 시계, 계절	일기, 일정, 날짜가 있는 작업	almanac	#21 #128 #243 #718
지도책 (atlas)	지도, 정원, 네트워크	링크 페이지, 디렉토리, 연구	atlas	#81 #139 #578 #284
악기 (instrument)	연주하는 무언가	서체 샘플, 장난감, 도구, 생성기	poster + recipes	#254 #615 #622 #353
방송 (broadcast)	세상의 생중계	웹캠, 라디오, 데이터, 센서	almanac + recipes	#12 #76 #51 #832
의상 (costume)	다른 시대에서 빌려온 인터페이스	음악, 아카이브, 패러디, 런칭	—	#501 #116 #631 #61
전시 (exhibition)	호, 쇼, 돌릴 수 있는 물체	저널, 졸업 전시, 카탈로그	index	#263 #838 #677 #865
표본 (specimen)	서체가 곧 인터페이스	파운드리, 레터링, 타이포그라피 프로젝트	poster	#776 #195 #254 #352
공유지 (commons)	방문자에 의해 만들어진 곳	방명록, 선집, 커뮤니티	notebook	#654 #423 #92 #249
신전 (shrine)	옛 웹에 대한 러브레터	팬 사이트, 콜라주, 개인 페이지	room	#586 #265 #441 #751

원형은 결합될 수 있지만(연감이면서 공유지인), 하나가 주도합니다.

디자인 결정(move)을 하고, 장식(decoration)을 하지 마세요

디자인 결정(move)은 이름을 붙일 수 있는 결정입니다("내비게이션은 곧 문장이다", "바탕색은 시간을 따른다"). 장식(decoration)은 이름을 붙일 수 없는 모든 것입니다. references/moves.md는 70개 이상의 디자인 결정을 차원별로 나열합니다 — 아이디어, 구조, 서체, 색상, 이미지, 상호작용, 시간, 목소리, 세부 사항 — 각각을 수행하는 사이트와 함께.

• 하나의 시그니처 디자인 결정을 끝까지 밀고 나가십시오 (법칙 2). 두세 개의 보조 디자인 결정은 더 조용하게. 다른 모든 것은 평범하게. 연구된 사이트들은 거의 여러 개를 쌓지 않습니다.
• 라이브러리에서 가져온 디자인 결정보다 콘텐츠에서 비롯된 디자인 결정(당신이 있는 곳의 날씨, 사물의 개수, 주제의 형태)을 선호하십시오.
• 어떤 사이트에서든 동일하게 작동할 디자인 결정은 장식입니다.

워크플로우

1. 아이디어. 다섯 가지 질문에 답하십시오. index.html 상단에 한 문장을 쓰십시오.
2. 컨테이너. 원형을 고르십시오; 새로 시작하는 경우 scripts/new.mjs. 먼저 일반 HTML로 구조를 만드십시오 — 스타터들은 필요한 마크업 수준(실제 목록, 표, <time>, <details>)을 보여줍니다.
3. 스타일보다 콘텐츠를 먼저. 실제 단어, 실제 이미지(지금 대체 텍스트 작성), 실제 개수와 날짜를 넣으십시오. 멋진 사이트는 80% 콘텐츠입니다.
4. 서체와 잉크. 이유가 있는 하나의 서체(또는 일부러 시스템 서체)와 하나의 바탕 위에 하나의 잉크를 선택하십시오. 4개 이하의 크기, 그중 하나는 원형이 원한다면 매우 크게. type.md, colour.md.
5. 시그니처 디자인 결정. recipes.md에서 제대로 구축하십시오 — 키보드 경로, 터치 경로, 축소된 움직임 변형을 포함하여.
6. 세부 사항. 파비콘, 제목, 선택 색상, 판권기(colophon), 마지막 업데이트, 외부 링크, 성격을 유지하는 404 페이지. moves.md § details.
7. 감사(Audit). node ${CLAUDE_SKILL_DIR}/scripts/audit.mjs <dir> — 모든 오류를 수정하십시오; 경고는 질문으로 간주하십시오. CI에서는: cool-check GitHub Action (README).
8. 살펴보기. 데스크톱, 390px 폰, 키보드 전용, 축소된 움직임 켜짐, 느린 네트워크. 그런 다음 중요한 질문: 누군가가 이 링크를 친구에게 보낼까? 그들은 그것이 무엇이라고 말할까?

체크리스트

• 아이디어가 한 문장에 들어가고 레이아웃이 다른 주제를 그대로 담을 수 없습니다.
• 하나의 시그니처 디자인 결정이 끝까지 완성되었고, 보조 결정들은 더 조용하며, 이름을 붙일 수 없는 장식이 없습니다.
• 하나의 바탕에 하나의 잉크 (또는 콘텐츠가 공급하는 팔레트); 색상이 의미를 갖습니다.
• 서체: 이유가 있는 하나의 서체 또는 일부러 시스템 서체; 4개 이하 크기; 작은 텍스트도 여전히 진한 잉크.
• 단어는 실제이고, 구체적이며 인간의 목소리로; 브로셔 동사 없음, 비계(scaffold) 제목 없음.
• 어떤 것이 참되고 살아있습니다 (시간, 데이터, 개수, 장소) — 또는 정적인 것이 의도적입니다.
• 외부 링크. 고유한 파비콘. 사람처럼 들리는 판권기 또는 '소개' 페이지.
• 키보드: 모든 상호작용에 접근 가능; 포커스 표시. 터치: 호버에 의존하는 것 없음. 축소된 움직임: 정적 변형 존재.
• 모든 이미지에 대체 텍스트 (또는 장식용이라면 alt=""). 줌 작동. lang 설정.
• 가벼움: 첫 당사자 HTML+CSS+JS가 약 250KB 미만 (아이디어가 더 필요하지 않다면); JavaScript 없이도 작동 (또는 의미 전달).
• audit.mjs 통과, 오류 없음.

참고 자료

파일	읽을 때
references/canon.md	증거가 필요할 때: 사이트들의 공통점을 숫자로
references/archetypes.md	컨테이너를 선택하거나 개발할 때
references/moves.md	시그니처 및 보조 디자인 결정을 선택할 때
references/recipes.md	디자인 결정을 구축할 때 — 보호 장치가 포함된 30개의 복사 가능 스니펫
references/type.md	서체, 크기 및 서체의 역할을 선택할 때
references/colour.md	잉크, 바탕, 색상이 움직이는 시점을 선택할 때
references/voice.md	제목, 내비게이션, 약력, 소개 페이지, 판권기, 오류 메시지를 작성할 때
references/never.md	검토할 때: 템플릿의 특징, 그리고 정전 자체의 나쁜 습관
references/catalogue.md	원형별로 가장 강력한 사이트를 탐색할 때
references/method.md	이 내용의 출처와 확신의 정도
data/sites.json	모든 사이트의 노트 (scripts/examples.mjs로 쿼리)