알츠하이머, 직무 스트레스, 마비말 장애 등 다양한 질병에 대한 검진 및 디지털 치료제 서비스를 제공하는 헬스케어 기업

• 누적 사용자 약 60만명의 검진 서비스 웹앱 개발 (23.05. 서비스 오픈 이후 누적치)

• 게임 형식의 알츠하이머 검진/치료 서비스의 하이브리드 앱 내 웹뷰 개발

• Vue2+Vuex+Vuetify > Vue3+Pinia+Quasar 마이그레이션 및 리펙토링

• 코드 리뷰 시스템 자동화를 위한 Github Actions 활용

• 사용자의 편의성을 우선시하는 시점으로 기획팀에 다수 의견 제시 및 반영

새미랑 (구. Alzguard A&T)

알츠하이머 진단 및 예방을 위한 게임화 프로젝트

새미랑 프로젝트 구축 (2023.04. ~ 2023.08.)

페이지 별 맞춤형 음성 안내 시스템 개발

• Web Audio API를 활용하여 페이지 로드 시 음성 가이드 자동 실행

다양한 메세지 유형 지원 챗 인터페이스 구현

• 텍스트, 이미지, 사용자 입력 결과 등 다중 형식 메세지 처리

• 텍스트 입력 필드, 퀵 리플라이 버튼 등 다양한 입력 방식 개발

타 개발자가 구현한 진단 모듈과 자체 개발한 예방 모듈을 통합하여 종합적인 알츠하이머 관리 프로젝트 구축

Vue3 마이그레이션 (2023.07. ~ 2023.11.)

Vue2 + Vuex + Vuetify -> Vue3 + Pinia + Quasar

코드 리팩토링을 통한 효율 증가

• SonarQube 기준 코드량 60% 이상 감소 및 코드 중복률 7.6% 감소

KPI 기준 목표 개발 기간의 약 20% 이상 단축

추가 기능 개발 및 하이브리드 앱 처리 (2023.10. ~ 2024.02.)

하이브리드 앱 인터랙션 처리

• 웹뷰와 네이티브 컴포넌트 간 통신을 위한 JavaScript 브릿지 구현

• 푸시 알림, 권한 설정 등 네이티브 API와의 연동 로직 구현

예방 훈련 모듈 UI/UX 개선 및 사용자 경험 최적화

• 채팅 형식의 누적식 표시에서 현재 문제 중심의 포커스드 뷰로 훈련 인터페이스 개선

• 답안 입력 방식 다각화: 주관식 입력, 버튼 클릭 방식 등

효용성 평가 버전 개발 (2024.04. ~ 현재)

3D 뷰와 2D 평면도를 비교하여 시점 위치 파악 훈련 구현

• 서버에서 전송된 좌표와 물체 모양 데이터를 기반으로 Three.js(3D 그래픽 라이브러리)를 통해 3D 환경 구성

• 구현된 모델링 화면을 통해 3D 객체 화면 및 2D 평면도 렌더링

낙하하는 물체의 특성을 파악하고 적절한 시점에 분류하는 훈련 메커니즘 구현

• Matter.js(2D 물리 엔진 라이브러리)를 사용하여 실시간 물체 낙하 시뮬레이션 구현

• 낙하한 물체가 주어진 영역에 도달했을 때 사용자의 반응 시간 측정

충돌 감지 및 병합 로직 구현으로 동일 크기 물체 결합 메커니즘 실현

• Matter.js(2D 물리 엔진 라이브러리)를 사용하여 실시간 물체 충돌 및 중력 효과 구현

• 동적 객체 생성 및 관리 시스템 개발로 다양한 크기의 물체 실시간 렌더링

• 일정 점수 도달 시 게임 필드의 바닥이 상승하는 로직 구현을 통해 점진적 난이도 상승 구현

경로 표시 후 사용자가 기억하여 재현하는 인지 훈련 메커니즘 설계

• HTML5 Canvas를 사용하여 동적인 경로 생성 시스템 구현

• 연속적인 Canvas 렌더링 시 Canvas에서 이미지가 누락되는 문제 해결

  • onload 이벤트와 complete 속성을 활용한 비동기 이미지 처리 구현

  • 이미지 완전 로드 확인 후 Canvas에 순차적으로 추가하는 로직 개발