쌓인 기록에서 찾기
무엇을 찾으세요?
날짜를 몰라도 됩니다. 제목·Key Point·요약·태그를 한꺼번에 뒤집니다.
검색 범위부터 2026년 9월 17일 (목)까지580건
2건 · "frontend"조건 지우기 ×
001▲ 119 · 댓글 57Firefox.com이 순수 CSS만으로 재구축되다Mozilla와 협업하여 Firefox.com을 전처리기 없이 현대적 네이티브 CSS만으로 완전히 재구축했다.웹 · 프론트엔드 · The CSS Zen Garden dream, finally shipped
Firefox.com이 순수 CSS만으로 재구축되다
Key Point현대 CSS의 기능이 얼마나 성숙했는지 보여주는 사례이며, 대규모 상용 사이트에서 전처리기 없이 순수 CSS 기반 설계 시스템이 실제로 작동함을 입증한다.
핵심 요약
- Mozilla와 협업하여 Firefox.com을 전처리기 없이 현대적 네이티브 CSS만으로 완전히 재구축했다.
- CSS 변수, Grid, Flexbox 등 최신 CSS 기능이 2000년대 초반의 한계를 극복하면서 순수 CSS 기반 설계 시스템이 실제 제품 수준에서 가능해졌다.
- 70개 이상의 컴포넌트와 25개 페이지 템플릿으로 구성된 디자인 시스템을 구축했으며, Wagtail 컴포넌트로 구현해 콘텐츠 팀이 엔지니어 도움 없이 페이지를 조립할 수 있다.
- 19개 언어를 지원하며, 유일한 빌드 도구인 PostCSS는 @import 성능 최적화만을 위해 사용되고, 작성된 CSS는 모두 브라우저가 이해하는 순수 CSS다.
- CSS Zen Garden에서 시작된 '콘텐츠와 디자인의 완전한 분리'라는 꿈이 거의 20년 만에 생산 환경에서 실현되었다.
AI · 머신러닝 · pbakaus/impeccable · JavaScript
AI 코딩 에이전트를 위한 디자인 언어 'Impeccable' 공개
Key PointAI 코딩 에이전트가 생성하는 프론트엔드 디자인의 반복적이고 단조로운 패턴을 구조적으로 개선하는 툴이 필요한 개발팀에게 실질적인 솔루션을 제공합니다.
핵심 요약
- Anthropic의 frontend-design 기초에서 출발한 디자인 스킬 'Impeccable'을 공개했습니다.
- 23개의 명령어(`init`, `craft`, `audit`, `polish`, `animate` 등)로 AI에게 디자인 작업의 공통 언어를 제공합니다.
- 설정 시 PRODUCT.md에 제품의 타겟 사용자, 목적, 제약사항, 톤앤매너 등 지속 가능한 정보를 기록해 일관성 있는 디자인을 유도합니다.
- 61개의 결정론적 규칙과 LLM 검증으로 흔한 AI 디자인 패턴(Inter 폰트, 보라색-파랑 그래디언트, 과도한 카드 중첩 등)을 방지합니다.
- CLI 및 브라우저 확장에서 실행되며 npx 설치, Git, 수동 설치 등 다양한 방법을 지원하고 Claude Code, Cursor, Codex 등 주요 AI 코딩 도구와 통합됩니다.