기능 React Native 앱 내부 WebView 기반으로 동작하는 키오스크 출석관리 시스템을 고도화했습니다. 출석, 회원 유형 선택, 상품 구매, 장바구니, 계약서 작성까지 이어지는 키오스크 핵심 흐름을 웹에서 제공하고, 앱에서는 하드웨어 통신과 네이티브 기능을 담당하는 구조로 개발했습니다. 프론트엔드 1명, 백엔드 개발자 1명, 디자이너 1명, 기획자 1명으로 구성된 4인 팀에서 얼굴 인식 출석, 앱-웹 메시지 통신, i18n 다국어 자동화 영역을 중점적으로 개선했습니다.

문제 저사양 키오스크 성능 한계: 기존에는 face-api.js 기반으로 1초마다 얼굴 인식을 체크했는데, 일부 저사양 키오스크에서 카메라 프레임이 끊기는 현상이 발생했습니다. 출석 기능은 사용자가 카메라 앞에 섰을 때 즉시 반응해야 했기 때문에, 모델 정확도뿐 아니라 실행 비용과 프레임 안정성이 중요한 문제였습니다. 웹과 하드웨어 사이의 책임 분리 필요: 화면은 React WebView에서 제공했지만 QR 리더, 영수증 출력, 카드 리더기 같은 장비 제어는 앱 레벨에서 처리해야 했습니다. 웹 화면에서 발생한 사용자의 행동을 네이티브 앱 기능으로 안정적으로 전달할 수 있는 공통 통신 구조가 필요했습니다. 다국어 적용의 휴먼 에러: 기존 방식은 텍스트마다 직접 t() 함수를 감싸고 useTranslation을 반복해서 연결해야 했습니다. 작업량이 많아질수록 번역 적용이 누락된 채 배포되는 문제가 발생할 수 있었습니다.

해결 얼굴 인식 모델 전환: 여러 대안을 검토한 뒤 가볍고 실시간 처리에 적합한 MediaPipe 기반 얼굴 인식 흐름으로 전환했습니다. 기존처럼 무거운 모델을 주기적으로 실행하는 방식 대신 키오스크 환경에서 프레임 유지가 가능한 구조로 바꾸어 카메라 끊김을 완화하고 인식 속도를 개선했습니다. WebView 메시지 브릿지 모듈화: 웹에서 특정 명령 메시지를 보내면 React Native 앱이 이를 수신해 QR 리더, 영수증 출력, 카드 리더기 등 하드웨어 작업을 실행하도록 통신 구조를 모듈화했습니다. 이를 통해 웹은 사용자 흐름과 명령 생성에 집중하고, 앱은 네이티브 권한과 장비 제어를 책임지는 형태로 역할을 분리했습니다. i18n 자동화 스크립트 적용: 인프랩 개발 블로그 사례를 참고해 Node.js 스크립트가 코드에서 한글 문자열을 탐색하고 분석한 뒤 자동으로 t()를 감싸도록 구성했습니다. 반복적인 수동 작업을 줄이고, 번역 누락 가능성을 낮추는 방향으로 다국어 적용 프로세스를 개선했습니다.

결과 MediaPipe 전환 이후 저사양 키오스크에서도 카메라 프레임 끊김이 완화되어 얼굴 인식 출석 경험이 더 안정적으로 동작했습니다. 앱-웹 메시지 통신 구조를 통해 하드웨어 연동 기능을 공통 패턴으로 확장할 수 있었고, 새 장비나 기능이 추가되어도 웹과 앱의 책임을 명확하게 나누어 유지보수할 수 있었습니다. i18n 자동화로 직접 t()를 감싸는 반복 작업과 번역 누락 휴먼 에러를 줄였고, 다국어 대응 범위를 더 안정적으로 관리할 수 있었습니다.

기능 배리어프리 전용 모드 구축: 시각·청각·지체 장애인을 위한 맞춤형 UI/UX 모드 탑재. 접근성 최적화 컴포넌트: 음성 안내(TTS), 고대비 모드, 화면 확대, 하단 배치 모드(휠체어 사용자용) 구현. 표준 가이드라인 적용: 한국지능정보사회진흥원(NIA)의 '무인정보단말기 정보접근성 지침' 준수.

문제 신체적 제약에 따른 접근 불가: 기존 키오스크는 화면 높이가 고정되어 있고 음성 안내가 부재하여, 휠체어 사용자나 시각 장애인이 타인의 도움 없이 센터 입장이 불가능한 환경이었음. 표준화된 레퍼런스 부족: 피트니스 업계 내 배리어프리 인증 사례가 전무하여, 복잡한 인증 규격(UI 컨트롤 크기, 응답 시간, 점자 유도 블록 연동 등)을 기술적으로 해석하고 적용하는 데 어려움이 있었음.

해결 키보드 포커싱: React Native의 물리적 키보드 이벤트를 받을 수 있는 자바 코드 작성 및 react-native-external-keyboard 라이브러리를 활용하여 포커스 제어 보이스 오버 TTS: 시각 장애인 실사용자를 위한 보이스오버(TalkBack/VoiceOver)의 흐름이 실제 사용 맥락과 일치하도록 반복 수정 및 최적화하고 또한 google TTS를 통해 어플리케이션 내에 사용되는 스크립트들 (모든 동작이 이루어질 때) 소리가 나오도록 설계

결과 업계 최초 NIA 인증 획득: 피트니스 솔루션 업계 최초로 한국지능정보사회진흥원(NIA) '우수 정보접근성 무인정보단말기' 인증 마크 획득 사용자 스펙트럼 확장: 직접적인 장애인들의 테스트를 거쳐, 실사용자 피드백 중심 접근성 개선에 대한 개발을 이룸으로써, 단순히 기능을 구현하는 것을 넘어 진정한 접근성 향상을 달성

기능 멀티 밴사(VAN) 결제 시스템 통합: KICC, KIS, KPN, KSNET 등 국내 주요 결제 단말기 프로토콜 연동 및 유지보수. 복합 결제 자동화: 일반 결제와 문화비 소득공제 대상 결제를 단 1회의 카드 삽입으로 연속 처리하는 로직 구현. 시스템 안정화: 앱 비정상 종료 원인 전수 분석 및 Android 최신 OS 가이드라인에 맞춘 백그라운드 프로세스 최적화.

문제 결제 연동의 복잡도와 휴먼 에러: KSNET 등 단말기 통신 시 Bit 단위의 가변 전문을 직접 구성해야 했으며, 데이터 순서가 하나라도 어긋나면 결제 오류나 금전적 손실로 이어지는 리스크가 큼. 기존 방식은 수동으로 전문을 조합하여 유지보수가 어렵고 오류에 취약했음. 높은 크래쉬율(Crash Rate 30%): 특정 기기 및 특정 상황에서 원인을 알 수 없는 앱 종료 현상이 빈번하여 키오스크 서비스의 연속성이 저해됨. 특히 Android 11 이상의 정책 변화로 인해 백그라운드 작업 중 앱이 강제 종료되는 이슈 발생.

해결 Bit 단위 전문 자동 생성기 설계: * KSNET 전문 규격에 맞춰 숫자 데이터만 입력하면 해당 위치의 Bit값으로 자동 치환·정렬되는 빌더 패턴의 함수 구현. 수신 데이터(Response) 역시 정의된 레이아웃에 따라 Bit 단위로 자동 파싱되도록 구조화하여 데이터 누락 가능성을 원천 차단하고 개발 생산성 및 유지보수성을 높임. Crash 원인 전수 분석 및 Android 11 완벽 대응: Android 11의 정책 변경에 맞춰 Foreground Service를 도입하고, 서비스 안정성을 위해 예외 상황 발생 시 앱 재시작 로직을 설계하여 무중단 서비스 환경 구축. UX 최적화: 복합 결제 시 불필요한 입력 단계를 통합하여 사용자 경험 개선(2단계 → 1단계).

결과 Crash Rate 0% 달성: 기존 30%에 달하던 크래쉬율을 0%로 안정화하여 개발자 단까지 안 오고, CX팀에서 처리 할 수 있게 가이드 라인 작성. 결제 안정성 및 확장성 확보: 전문 생성 자동화로 신규 결제 기능 추가 시 오류 발생률 0% 달성 및 테스트 시간 단축. 결제 성공률 향상: 복합 결제 로직 개선을 통해 중도 이탈률을 줄이고, 일일 평균 결제 처리 속도 향상.

기능 재사용 가능한 컴포넌트와 커스텀 훅을 직접 설계하고 배포하는 UI 라이브러리를 개발했습니다.

문제 애플리케이션 중심 번들러 환경에는 익숙했지만, 라이브러리 배포에 필요한 번들 제어 경험은 부족했습니다.

해결 빌드 도구로 Rollup 을 선택해 ES 모듈 지원, 번들 최적화, 플러그인 기반 확장성을 직접 설계했습니다.

결과 컴포넌트를 패키지 형태로 재사용할 수 있는 배포 구조를 구축했고, 라이브러리 개발에 필요한 빌드 관점을 실무적으로 이해하게 되었습니다.

기능 현재 보고 있는 개인 포트폴리오 사이트를 Emotion 기반으로 구현했습니다.

문제 컴포넌트에 ref를 전달하는 과정에서 렌더링 오류가 발생했습니다.

해결 React의 ref 전달 구조를 점검한 뒤 forwardRef 를 적용해 ref 흐름을 올바르게 연결했습니다.

결과 섹션 이동 구조를 안정적으로 구현했고, ref 전달 방식과 CSS-in-JS 도구 선택 기준을 명확히 이해하게 되었습니다.

기능 칸반보드 기반으로 일정을 관리할 수 있는 협업형 플랫폼을 개발했습니다.

문제 API 응답 데이터가 화면에 즉시 반영되지 않아 렌더링 흐름이 불안정했습니다.

해결 우선 useState 와 useEffect 로 상태와 렌더링 시점을 제어해 문제를 해결했고, 이후 React Query 학습을 통해 더 적합한 서버 상태 관리 방식을 정리했습니다.

결과 비동기 데이터 흐름을 직접 다뤄보며 상태 관리의 한계를 체감했고, 서버 상태 관리 도구가 필요한 상황을 구체적으로 판단할 수 있게 되었습니다.

기능 크리스마스 관련 유형 테스트 서비스를 개발했습니다.

문제 처음으로 Next.js 와 TypeScript 를 적용하는 프로젝트라 각 기술의 역할과 협업 방식에 대한 이해가 부족했습니다.

해결 기획, 디자인, 백엔드, 프론트엔드 전 과정을 경험하고, Storybook 을 활용해 UI를 독립적으로 검증하는 방식을 익혔습니다.

결과 역할 분리의 필요성을 이해했고, 개발자가 아닌 구성원도 UI를 함께 검토할 수 있는 협업 구조를 경험했습니다.

기능 웹 기반 롤링페이퍼 서비스를 팀 프로젝트로 개발했습니다.

문제 구현을 마친 컴포넌트도 기능적, 스타일적 개선 포인트를 스스로 모두 발견하기 어려웠습니다.

해결 코드 리뷰를 통해 개선 포인트를 반영하고, Git / GitHub / Discord / GitHub Discussions 기반 협업 방식을 익혔습니다.

결과 코드 리뷰를 품질 향상과 팀 학습의 과정으로 인식하게 되었고, 근거를 바탕으로 의견을 제안하는 협업 태도를 갖추게 되었습니다.