I'm building CSS Battles now
- 개발자는 CSS 배틀과 유사한 CSS 챌린지 플랫폼을 구축 중이며, 기존 CSS 배틀의 단점을 보완하여 실제 UI 컴포넌트 스타일링 연습에 초점을 맞추고 있습니다. 🎨
- 이 플랫폼은 사용자가 제공된 HTML을 기반으로 CSS를 작성하여 목표 디자인과 최대한 유사하게 만드는 방식으로 진행됩니다. 👩💻
- 현재 플랫폼은 Light/Dark 모드를 지원하며, 사용자의 CSS 코드 정확도를 픽셀 단위로 측정하여 피드백을 제공합니다. 💡
- 개발자는 Tailwind CSS 지원 및 실시간 멀티플레이어 모드 추가를 계획하고 있으며, JavaScript 챌린지 기능도 개발할 예정입니다. ⚔️
- iframe을 사용하여 각 챌린지 컴포넌트를 격리하고, HTML to Canvas 및 Pixelmatch 라이브러리를 활용하여 시각적 유사성을 비교합니다. 🖼️
- XSS 공격을 방지하기 위해 DOMPurify 라이브러리를 사용하여 사용자 제공 HTML 코드를 안전하게 처리합니다. 🛡️
- 사용자 피드백을 적극적으로 수렴하여 플랫폼을 개선할 예정이며, 플랫폼은 현재 무료로 이용 가능합니다. 🎁
- 궁극적으로 AI, 자료구조, 알고리즘 등 컴퓨터 과학 전반을 다루는 교육 플랫폼으로 확장하는 것을 목표로 합니다. 📚