셀프 네컷 사진기

개발 기간

2025.01.01 ~ 2025.01.10

기술 스택

React.js, Typescript

카메라 기능

MediaDevices API 로 각자의 기기에 있는 내장 카메라로 사진을 촬영할 수 있도록 했어요.

구현 기능

1. 브라우저 카메라를 사용하여 사진 촬영

• 사진 촬영 기회는 총 10번
• 10번 모두 촬영한 뒤에는 4장을 선택할 수 있다.
• 프레임 색깔을 선택할 수 있다.

2. Preview 버튼을 누르면 프레임이 적용된 네컷사진을 미리 볼 수 있다.

3. 최종적으로 프레임 색깔이 적용된 나만의 네 컷 사진을 jpg파일로 다운로드 받을 수 있다.

추가 구현해야할 사항

1. UI 디자인 개선
2. 프레임을 다양하게 선택할 수 있도록 하기
3. 비디오도 만들어서 저장할 수 있도록 하기
4. 큐알코드를 생성해서 큐알코드로 사진과 동영상을 저장받을 수 있도록 하기

회고

인생네컷이나 포토이즘 등 네컷사진에 관심이 많은데 이걸 간단하게 노트북으로도 구현할 수 있지 않을까하는 생각으로 기획하게 되었다. MediaDevices API 만 있으면 브라우저 카메라에 접근할 수 있다는게 쉽고 편리했고 이외에도 더 다양한 촬영이나 영상관련 토이프로젝트를 진행해볼 수 있을 것 같다.