소개
GODRICH 은 CSS·SCSS 애니메이션과 UI 컴포넌트를 돌아가는 데모와 완결 소스로 묶어 파일로 주는 사이트입니다.
왜 만드는가
검색해서 나오는 코드는 대개 조각입니다. 붙이면 안 돌아가거나, 어디를 바꿔야 값이 달라지는지 알 수 없습니다. 여기 글은 그 자리를 채우려고 씁니다 — 라이브 데모, 완결 소스, 실측한 수치를 한 번에 줍니다.
글 하나가 만들어지는 순서
- 검색어는 로케일마다 구글 자동완성으로 그때그때 실측합니다. 번역하지 않습니다.
- 데모는 HTML+SCSS(그리고 React 판)로 만듭니다. 외부 라이브러리·CDN 은 쓰지 않습니다.
- 실제 브라우저에서 데모를 렌더해 움직임(누적면적·프레임 수)을 측정하고, 그 수치를 본문에 씁니다.
- 본문의 코드 블록은 데모 소스의 실제 구간을 그대로 옮깁니다.
- 로케일별 글은 각각 새로 쓰고, 그 언어 기준으로 교열합니다.
- 데모·소스·프롬프트를 압축(zip)하고, 맞는 비밀번호로는 열리고 틀린 비밀번호로는 안 열리는지 기계적으로 검증합니다.
- 글·데모·zip 은 자동 검사(게이트)를 통과해야 합니다. 통과하지 못하면 게시하지 않습니다.
- 글 초안과 데모 제작에는 AI 도구를 씁니다. 측정과 검증은 스크립트가 하고, 게시 여부의 최종 판단은 운영자가 합니다.
글 하나에 들어 있는 것
- 실제로 움직이는 데모와 측정값
- 왜 이 속성을 쓰는지 원리 설명
- 실제로 깨지는 상황 하나
- 값 하나만 바꾼 변형
- 접근성(prefers-reduced-motion) 처리
- 압축 파일과 비밀번호 — 본문 안, 뒤쪽 문장 속에 있습니다. zip 이 글의 문맥(어디를 바꾸면 뭐가 달라지는지)과 같이 가야 쓸모가 있어서 그렇게 둡니다.
누가 쓰나
운영자 1인이 만듭니다. 별도 필진 소개는 두지 않습니다.
없는 것
- 댓글 기능이 없습니다.
- 광고는 Google AdSense 자동 광고를 예정하고 있으며, 방식은 개인정보처리방침에 적어 둡니다.
- 방문자 개인정보를 별도로 수집하지 않습니다. 자세한 내용도 개인정보처리방침을 참고해 주세요.
라이선스
zip 안의 코드는 MIT 입니다. 상업 사이트에 붙이셔도 됩니다. 이미지가 포함된 글은 이미지별 라이선스를 zip 안 README 에 적어 둡니다.
문의
문의는 문의 페이지로 보내 주세요.