wangrongding/frontend-park

What it solves

이 프로젝트는 프론트엔드 개발자가 브라우저에서 재미있는 기능을 구현하고 싶을 때 참고할 만한 자료가 부족한 문제를 해결합니다. 저자가 평소에 다루던 다양한 재미있는 프론트엔드 사례들을 한데 모아, 다른 사람들이 온라인 데모를 직접 확인하거나 코드를 수정하며 즐길 수 있도록 했습니다.

How it works

이 프로젝트는 사례 모음집으로, 각 사례는 브라우저 네이티브 기술로 구현되었습니다. 예를 들어, TensorFlow.js를 사용하여 카메라를 통해 실시간으로 인체 자세를 인식하고, WebRTC를 사용하여 사진 촬영, 화면 녹화, 가상 배경 및 1대1 오디오/비디오 통화(시그널링 유무 방식 모두 지원)를 구현합니다. Three.js 섹션은 컨트롤러와 태양계 예제를 제공하며, 스테가노그래피 섹션은 텍스트나 이미지를 다른 텍스트나 이미지 속에 숨깁니다. 포토 모자이크 기능은 선택한 여러 이미지를 조합하여 하나의 목표 모자이크 이미지를 만듭니다. 프로젝트는 pnpm으로 의존성을 관리하며, 로컬 실행은 pnpm dev, 빌드는 pnpm build를 사용합니다.

Who it’s for

프론트엔드 기술에 관심이 많고 브라우저 고급 API(WebRTC, TensorFlow.js, Three.js 등)를 탐구하고 싶은 개발자, 특히 직접 재미있는 프로젝트를 만드는 것을 좋아하는 사람에게 적합합니다. 또한 이러한 기술의 구체적인 구현을 배우고 싶은 학생이나 취미 개발자에게도 좋습니다.

Highlights

• 자세 인식, 오디오/비디오 인터랙션, 3D 예제, 스테가노그래피 등 즉시 실행 가능한 다양한 재미있는 프론트엔드 사례 제공
• 카메라를 통한 실시간 자세 인식을 지원하여 헬스장, 요가 교실, 댄스 교실 등에서 활용 가능
• WebRTC 섹션은 다양한 네트워크 환경에 적응할 수 있도록 시그널링 유무에 따른 1대1 통화 구현을 포함
• 스테가노그래피는 텍스트와 이미지 방식을 모두 지원하여 정보 암호화 및 저작권 보호에 사용 가능
• 포토 모자이크 기능으로 여러 이미지를 조합하여 지정된 모자이크 이미지 생성 가능 (기본 기능 완료, 추가 최적화 개발 예정)