소프트웨어
정다운의 사용자 맞춤형 데스크탑 및 웹 소프트웨어 설계, 개발 및 유지보수 성과입니다.
대학 행사용 키오스크 제작(포토부스)
**강원대학교 및 강원대학 통합 3개대학 용 키오스크 소프트웨어 제작**(인생네컷, 하루필름 과 같은) AI기반 이미지 보정 # 📸 Node.js & DSLR 기반 무인 포토부스 시스템 개발 DSLR 제어부터 키오스크 UI, 실시간 이미지 프로세싱, QR 코드 배포 서버까지 전체 아키텍처를 설계하고 구현한 풀스택 프로젝트입니다. --- ## 🛠 주요 기술 스택 (Tech Stack) * **Runtime**: Node.js (Express) * **Frontend**: React.js / JavaScript (Chrome Kiosk Mode) * **Hardware Control**: DigiCamControl (Windows Web Server API / SDK) * **Real-time**: Socket.io (촬영 상태 및 이미지 프리뷰 실시간 동기화) * **Computer Vision**: face-api.js (사용자 감지 및 자동 트리거) * **Image Processing**: Sharp (이미지 리사이징 및 워터마크 합성) * **Deployment**: Local Network Server & Nginx (QR 코드 외부 공유용) --- ## 🚀 주요 수행 작업 (Key Contributions) ### 1. 하드웨어 제어 및 안정화 (DSLR Integration) * **DigiCamControl 연동**: REST API를 통해 셔터 스피드, 조리개, ISO 등 카메라 설정을 원격 제어하고 촬영 명령을 자동화함. * **실시간 라이브뷰 구현**: 카메라의 Live View 스트림을 브라우저에 지연 시간(Latency) 최소화하여 렌더링. * **예외 처리**: 카메라 연결 해제나 SD 카드 용량 부족 등 하드웨어 오류 발생 시 실시간 알림 시스템 구축. ### 2. 사용자 경험 중심의 UI/UX 설계 (Kiosk UI) * **크롬 키오스크 모드**: 사용자가 시스템 설정에 접근할 수 없도록 브라우저 기반의 풀스크린 키오스크 환경 구축. * **인터랙티브 촬영 흐름**: '시작 -> 카운트다운 -> 촬영 -> 필터 선택 -> QR 출력'으로 이어지는 매끄러운 UX 디자인 및 애니메이션 구현. * **얼굴 인식 트리거**: 사용자가 카메라 앞에 서면 `face-api.js`를 통해 인식 후 자동으로 촬영 안내 문구를 띄우는 스마트 인터랙션 도입. ### 3. 이미지 프로세싱 및 배포 시스템 (Backend & DevOps) * **이미지 자동 워터마크**: 촬영 직후 로고 및 프레임 이미지를 `Sharp` 라이브러리로 병합하여 브랜드 최적화 이미지 생성. * **QR 코드 배포 서버**: 촬영된 이미지를 로컬 서버에 저장 후, 해당 경로를 암호화한 QR 코드를 생성하여 모바일 다운로드 페이지로 연결. * **파일 시스템 감시**: `chokidar`를 활용하여 DigiCamControl이 저장한 원본 파일을 실시간 감지하고 즉시 처리 프로세스로 진입하게 설계. --- ## 💡 핵심 문제 해결 및 성과 (Key Achievements) * **딜레이 최적화**: 고용량 RAW/JPG 파일을 브라우저에 띄울 때 발생하는 렉을 방지하기 위해 별도의 섬네일 생성 파이프라인 구축(로딩 시간 60% 단축). * **멀티 디바이스 동기화**: Socket.io를 활용하여 촬영 PC와 외부 모니터링 기기 간의 상태를 0.1초 내외로 동기화. * **안정적인 공유 환경**: 외부망 접속이 제한된 환경에서도 QR 코드 공유가 가능하도록 터널링 기술을 적용하여 접근성 확보. --- ## 📐 시스템 아키텍처 흐름도 1. **User Interaction**: 사용자가 키오스크 화면에서 촬영 시작 버튼 클릭 (또는 얼굴 인식) 2. **Node.js Server**: DigiCamControl API로 촬영 명령 하달 3. **Camera**: 사진 촬영 후 지정된 폴더에 저장 4. **Image Worker**: 폴더 감지 후 이미지 리사이징 및 QR 코드 생성 5. **Kiosk UI**: 완성된 결과물을 화면에 표시 및 QR 코드 노출 6. **Mobile**: 사용자가 QR 스캔 후 사진 저장
시 기관 키오스크 제작
**목포시 센터 키오스크 제작건(스마트TV기반)** 의뢰사에 의해 세부정보는 노출이 불가합니다.
더 많은 포트폴리오 보기
