모바일 앱 UI 구현

대부분의 사용자는 모바일 앱을 통해 디지털 헬스케어 서비스를 이용해. React Native나 Flutter 같은 크로스 플랫폼 프레임워크를 사용하면 iOS와 Android 모두를 지원하는 앱을 효율적으로 개발할 수 있어.

// React Native로 건강 대시보드 화면 구현 예시
import React, { useState, useEffect } from 'react';
import { View, Text, StyleSheet, ScrollView } from 'react-native';
import { LineChart } from 'react-native-chart-kit';
import { fetchHealthData } from '../api/healthApi';

const HealthDashboard = ({ userId }) => {
  const [healthData, setHealthData] = useState(null);
  const [loading, setLoading] = useState(true);
  
  useEffect(() => {
    const loadData = async () => {
      try {
        const data = await fetchHealthData(userId);
        setHealthData(data);
      } catch (error) {
        console.error('Failed to load health data:', error);
      } finally {
        setLoading(false);
      }
    };
    
    loadData();
  }, [userId]);
  
  if (loading) {
    return <Text>데이터를 불러오는 중...</Text>;
  }
  
  return (
    <ScrollView style={styles.container}>
      <Text style={styles.title}>건강 대시보드</Text>
      
      {/* 심박수 차트 */}
      <View style={styles.card}>
        <Text style={styles.cardTitle}>심박수</Text>
        <LineChart
          data={{
            labels: healthData.heartRate.labels,
            datasets: [{ data: healthData.heartRate.values }]
          }}
          width={350}
          height={220}
          chartConfig={{
            backgroundColor: '#ffffff',
            backgroundGradientFrom: '#ffffff',
            backgroundGradientTo: '#ffffff',
            decimalPlaces: 0,
            color: (opacity = 1) => `rgba(255, 0, 0, ${opacity})`,
            labelColor: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
          }}
          bezier
        />
        <Text style={styles.cardSubtitle}>
          평균: {healthData.heartRate.average} bpm
        </Text>
      </View>
      
      {/* 활동량 정보 */}
      <View style={styles.card}>
        <Text style={styles.cardTitle}>오늘의 활동</Text>
        <View style={styles.statsContainer}>
          <View style={styles.statItem}>
            <Text style={styles.statValue}>{healthData.activity.steps}</Text>
            <Text style={styles.statLabel}>걸음 수</Text>
          </View>
          <View style={styles.statItem}>
            <Text style={styles.statValue}>{healthData.activity.distance} km</Text>
            <Text style={styles.statLabel}>이동 거리</Text>
          </View>
          <View style={styles.statItem}>
            <Text style={styles.statValue}>{healthData.activity.calories} kcal</Text>
            <Text style={styles.statLabel}>소모 칼로리</Text>
          </View>
        </View>
      </View>
      
      {/* 건강 인사이트 */}
      <View style={styles.card}>
        <Text style={styles.cardTitle}>건강 인사이트</Text>
        {healthData.insights.map((insight, index) => (
          <View key={index} style={styles.insightItem}>
            <Text style={styles.insightMessage}>{insight.message}</Text>
            <Text style={styles.insightRecommendation}>{insight.recommendation}</Text>
          </View>
        ))}
      </View>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    backgroundColor: '#f5f5f5',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 16,
  },
  card: {
    backgroundColor: '#ffffff',
    borderRadius: 8,
    padding: 16,
    marginBottom: 16,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 2,
  },
  cardTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 12,
  },
  cardSubtitle: {
    fontSize: 14,
    color: '#666',
    marginTop: 8,
  },
  statsContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  statItem: {
    alignItems: 'center',
  },
  statValue: {
    fontSize: 20,
    fontWeight: 'bold',
  },
  statLabel: {
    fontSize: 14,
    color: '#666',
  },
  insightItem: {
    marginBottom: 12,
    paddingBottom: 12,
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
  },
  insightMessage: {
    fontSize: 16,
    marginBottom: 4,
  },
  insightRecommendation: {
    fontSize: 14,
    color: '#666',
    fontStyle: 'italic',
  },
});

export default HealthDashboard;
      

웹 포털 UI 구현

의료진이나 관리자를 위한 웹 포털은 더 복잡한 기능과 데이터 시각화를 제공해야 해.

// React와 Material-UI를 이용한 의사 대시보드 구현 예시
import React, { useState, useEffect } from 'react';
import { 
  Container, Grid, Paper, Typography, Table, 
  TableBody, TableCell, TableHead, TableRow 
} from '@material-ui/core';
import { fetchPatientsList, fetchAlertsData } from '../api/doctorApi';

const DoctorDashboard = () => {
  const [patients, setPatients] = useState([]);
  const [alerts, setAlerts] = useState([]);
  
  useEffect(() => {
    const loadDashboardData = async () => {
      try {
        const patientsData = await fetchPatientsList();
        const alertsData = await fetchAlertsData();
        
        setPatients(patientsData);
        setAlerts(alertsData);
      } catch (error) {
        console.error('Failed to load dashboard data:', error);
      }
    };
    
    loadDashboardData();
    
    // 실시간 알림 업데이트를 위한 웹소켓 연결
    const socket = new WebSocket('wss://api.example.com/doctor-alerts');
    
    socket.onmessage = (event) => {
      const newAlert = JSON.parse(event.data);
      setAlerts(prevAlerts => [newAlert, ...prevAlerts]);
    };
    
    return () => {
      socket.close();
    };
  }, []);
  
  return (
    <Container maxWidth="lg" style={{ marginTop: 24 }}>
      <Typography variant="h4" gutterBottom>
        의사 대시보드
      </Typography>
      
      <Grid container spacing={3}>
        {/* 환자 현황 요약 */}
        <Grid item xs={12} md={4}>
          <Paper style={{ padding: 16 }}>
            <Typography variant="h6" gutterBottom>
              환자 현황
            </Typography>
            <Typography variant="h3" align="center">
              {patients.length}
            </Typography>
            <Typography variant="body2" align="center" color="textSecondary">
              총 환자 수
            </Typography>
          </Paper>
        </Grid>
        
        {/* 긴급 알림 */}
        <Grid item xs={12} md={8}>
          <Paper style={{ padding: 16 }}>
            <Typography variant="h6" gutterBottom>
              긴급 알림
            </Typography>
            <Table size="small">
              <TableHead>
                <TableRow>
                  <TableCell>환자</TableCell>
                  <TableCell>알림 유형</TableCell>
                  <TableCell>상세 정보</TableCell>
                  <TableCell>시간</TableCell>
                  <TableCell>조치</TableCell>
                </TableRow>
              </TableHead>
              <TableBody>
                {alerts.map((alert) => (
                  <TableRow key={alert.id}>
                    <TableCell>{alert.patientName}</TableCell>
                    <TableCell>{alert.type}</TableCell>
                    <TableCell>{alert.details}</TableCell>
                    <TableCell>{new Date(alert.timestamp).toLocaleTimeString()}</TableCell>
                    <TableCell>
                      <Button variant="contained" color="primary" size="small">
                        확인
                      </Button>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </Paper>
        </Grid>
        
        {/* 환자 목록 */}
        <Grid item xs={12}>
          <Paper style={{ padding: 16 }}>
            <Typography variant="h6" gutterBottom>
              환자 목록
            </Typography>
            <Table>
              <TableHead>
                <TableRow>
                  <TableCell>이름</TableCell>
                  <TableCell>나이</TableCell>
                  <TableCell>성별</TableCell>
                  <TableCell>주요 진단</TableCell>
                  <TableCell>마지막 체크인</TableCell>
                  <TableCell>상태</TableCell>
                  <TableCell>상세보기</TableCell>
                </TableRow>
              </TableHead>
              <TableBody>
                {patients.map((patient) => (
                  <TableRow key={patient.id}>
                    <TableCell>{patient.name}</TableCell>
                    <TableCell>{patient.age}</TableCell>
                    <TableCell>{patient.gender}</TableCell>
                    <TableCell>{patient.diagnosis}</TableCell>
                    <TableCell>{new Date(patient.lastCheckIn).toLocaleString()}</TableCell>
                    <TableCell>
                      <Chip 
                        label={patient.status} 
                        color={patient.status === 'Stable' ? 'primary' : 'secondary'} 
                      />
                    </TableCell>
                    <TableCell>
                      <Button variant="outlined" size="small">
                        상세보기
                      </Button>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </Paper>
        </Grid>
      </Grid>
    </Container>
  );
};

export default DoctorDashboard;
      

UI 구현 시에는 사용자 경험(UX)을 최우선으로 고려해야 해. 특히 의료 데이터는 복잡하고 전문적이므로, 이를 직관적으로 시각화하고 이해하기 쉽게 표현하는 것이 중요해. 또한 접근성 가이드라인(WCAG)을 준수하여 모든 사용자가 이용할 수 있도록 해야 해.