2020 프론트엔드 마스터를 위한 10가지 프로젝트 아이디어 (CSS-Tricks)
Source
Evernote/Technote scraps/Become a Front-End Master in 2020 With These 10 Project Ideas CSS-Tricks.md
Summary
이 문서는 JavaScript 프레임워크 중심의 학습을 넘어, 브라우저와 사용자 중심의 진정한 프론트엔드 마스터가 되기 위한 실용적인 프로젝트 아이디어 10가지를 제안합니다. 핵심은 접근성(Accessibility), 성능(Performance), 그리고 HTML/CSS의 본질적인 활용에 있습니다. 주요 아이디어로는 Dribbble 디자인의 접근성 고려 재현, 코드베이스 내 컴포넌트 추상화, 정적 사이트 생성기(SSG) 체험, Axe DevTools를 통한 접근성 개선, Fractal을 활용한 컴포넌트 설계, HTML/CSS/JS 기반 폼 빌드 및 검증, 서버리스(Serverless) 개념 학습, SVG 아이콘 시스템 구현, 서비스 워커(Service Worker) 적용, 그리고 최소 기술 부채로 단순 웹사이트 구축 등이 포함됩니다.
Key Points
- 프론트엔드 개발의 본질은 JS 프레임워크 숙련도가 아닌, 브라우저 환경에서의 사용자 경험(접근성, 성능) 최적화에 있음
- Dribbble 디자인을 HTML/CSS로 재현하며 접근성과 코드 청결도를 중시하는 연습
- 기존 코드베이스에서 재사용 가능한 컴포넌트(예: SVG 아이콘)를 추상화하고 접근성 개선
- JavaScript 중심이 아닌 정적 사이트 생성기(SSG)를 통해 빌드 프로세스와 데이터 소스 이해
- Axe DevTools 플러그인을 활용하여 실제 사이트의 접근성 문제 진단 및 개선
- Fractal과 같은 도구를 사용하여 HTML/CSS 레벨에서의 컴포넌트 기반 설계 사고 훈련
- HTML Constraint Validation, CSS, Vanilla JS를 단계적으로 활용하는 폼 빌드 및 서버리스 폼 서비스 연동
- 서버리스 아키텍처가 프론트엔드 스킬셋을 어떻게 확장하는지 학습
- SVG 아이콘 시스템의 인라인화 및 워크플로우 통합 방법 탐구
- 서비스 워커를 활용한 오프라인 기능 구현 및 Workbox 프레임워크 학습
- 최소한의 기술 부채(Technical Debt)로 단순 정보 제공 웹사이트를 구축하는 방법 고찰