외부 클라이언트의 요청으로 태블릿에 탑재될 이명 치료용 소프트웨어 개발을 맡았습니다. 본 프로젝트에서 디자인과 웹뷰 구현을 100% 담당하였으며, 환자가 이명 치료를 보다 효과적으로 관리할 수 있는 기능들을 제공하기 위해 다양한 기술적 요소를 적용했습니다.
✅ 웹뷰 구현 및 React 기반 개발
React를 활용하여 웹 기반의 치료용 소프트웨어를 개발한 후, react-webview를 사용하여 태블릿에서 실행 가능한 앱으로 변환했습니다.
code_example)
import React from 'react';
import { View } from 'react-native';
import { WebView } from 'react-native-webview';
const WebAppScreen = () => {
return (
<View>
<WebView source={{ uri: '<https://url.com>' }} />
</View>
);
};
export default WebAppScreen;
클라이언트가 요청한 대로, 소프트웨어가 웹 환경에서도 안정적으로 작동할 수 있도록 최적화 작업을 진행했습니다.
✅ 차트 시각화 및 UI 구현
Chart.js를 사용하여 주간 치료 진행 현황을 그래프로 시각화했습니다.
목표시간을 기준으로 초과 시 초록색 그라디언트로, 미달성 시 빨간색으로 표시하는 방식으로 시각적 피드백을 제공하여 사용자가 한눈에 진행 상황을 알 수 있도록 했습니다.
목표를 쉽게 파악할 수 있도록 직관적인 UI 설계와 시각적 요소에 중점을 두었습니다.
✅ 달력 기능 구현
React FullCalendar를 활용하여 달력을 구현하고, 내원일 및 치료 달성 여부를 직관적으로 확인할 수 있게 했습니다.
환자의 치료 진행 상황과 방문 일정을 한눈에 파악할 수 있는 기능을 제공하여, 사용자의 편의성을 높였습니다.