SYSTEM BLUEPRINT

AI 건강 데이터 조회
입력부터 그래프 결과까지 화면 흐름

정보 입력, AI 모델 조회, 결과 시각화로 이어지는 세 화면을 실제 모습에 가깝게 정리했습니다.

스토리보드란?

스토리보드는 서비스의 화면을 실제 모습에 가깝게 미리 그려 보는 문서입니다. 이용자가 정보를 입력하고 결과 그래프를 받아보기까지의 여정 순서로 배치했습니다.

  1. 건강 정보를 입력하고 잘못된 값은 제출 전에 바로 고치는 흐름
  2. 입력값이 보유 AI 모델로 전달되고 응답이 정리되는 흐름
  3. 결과가 기준 범위 대비 그래프와 수치, 설명으로 표시되는 흐름

마지막까지 보시면 생각하고 계신 시스템의 모습이 머릿속에 그려지실 것입니다.

조회 이용자 시나리오

입력에서 결과 그래프까지

이용자는 한 번의 입력으로 AI 모델 결과를 그래프와 설명으로 받아봅니다.

1. 정보 입력

건강 항목 입력
시연용 샘플 선택

2. 입력 확인

범위 밖 값 안내
고치면 조회 가능

3. AI 모델 조회

서버가 모델로 전달
진행 상황 표시

4. 응답 정리

수치·범위·설명 분리
지연 시 재시도

5. 결과 확인

기준 범위 그래프
AI 해석 문장

조회 이용자 | 화면 01

정보 입력 · 입력값 확인

healthcheck-ai.kr/lookup
헬스체크 AI
건강 데이터 조회
조회 결과
이용 안내
이름·연락처는 받지 않습니다
1단계 · 정보 입력
내 건강 정보 입력
남성비흡연
나이
44
만 나이로 입력
172.4cm
100~230 사이
몸무게
78.6kg
BMI 26.4 자동 계산
수축기 혈압
138mmHg
최근 측정값
이완기 혈압
88mmHg
최근 측정값
공복혈당
1,260mg/dL
입력 범위 50~400을 벗어났어요. 단위를 확인해 주세요
총콜레스테롤
214mg/dL
최근 1년 이내 검사
하루 수면
6.5시간
평균 수면 시간
주간 운동
미입력
선택 항목
시연용 샘플 입력
40대 남성 · 혈압 주의
수축기 138 · 공복혈당 126
30대 여성 · 전 항목 정상
수축기 112 · 공복혈당 88
60대 남성 · 혈당 위험
수축기 146 · 공복혈당 162
입력 확인필수 7 / 8
오류 1건을 고치면 조회할 수 있어요

[화면 개요 및 목적]

이용자가 건강 정보를 입력하는 첫 화면입니다. 제안서의 ‘항목표 한 장으로’ 설계를 보여주며, 데모 1·2단계에서 직접 눌러 볼 수 있습니다.

[핵심 기능 로직]

항목별 허용 범위를 벗어난 값(공복혈당 1,260)은 칸이 붉게 바뀌고 이유를 알려줍니다. 오류가 남아 있으면 조회 버튼이 잠기고, 오른쪽 샘플 입력으로 심사 시연을 막힘 없이 시작합니다.

  • 제출 전 오류 차단
    React Hook Form + Zod
  • 항목 변경 한 곳 수정
    입출력 항목 설정 파일
조회 이용자 | 화면 02

AI 모델 조회 중

healthcheck-ai.kr/lookup/analyzing
헬스체크 AI
건강 데이터 조회
조회 결과
이용 안내
이름·연락처는 받지 않습니다
2단계 · AI 모델 조회
건강 데이터를 분석하고 있어요
68%
입력값 검증
필수 8개 항목 통과
0.1초
서버로 안전하게 전달
모델 접속 키는 서버에만 보관
0.3초
AI 모델 분석 중
보유 모델이 위험도를 계산하고 있어요
68%
응답 형식 확인
숫자·범위·설명 문장 분리
대기
그래프 만들기
막대·게이지·추이선
대기
모델로 보낸 값
age44
sexM
bmi26.4
sbp / dbp138 / 88
glucose126
chol_total214
sleep_hours6.5
응답이 12초를 넘으면
1회 자동 재시도 후, 입력값은 그대로 두고 다시 조회 버튼을 보여줍니다.
배포 서버 · HTTPS 연결 · 조회 이력 미저장

[화면 개요 및 목적]

입력값이 보유 AI 모델로 전달되고 응답이 정리되는 과정을 보여주는 화면입니다. 제안서의 ‘화면 먼저 완성’ 설계이며 데모 3단계와 이어집니다.

[핵심 기능 로직]

브라우저는 모델에 직접 접속하지 않고 서버의 연결 창구를 거칩니다. 모델 응답은 수치·기준 범위·설명 문장으로 나눠 확인하고, 12초 이상 늦어지면 1회 재시도 후 입력값을 유지한 채 다시 조회를 안내합니다.

  • 모델 접속 키 보호
    Next.js Route Handler 프록시
  • 명세 전에도 개발 진행
    응답 예시 기반 연결 지점
  • 배포 주소 바로 전달
    Vercel 또는 Docker
조회 이용자 | 화면 03

조회 결과 · 그래프

healthcheck-ai.kr/lookup/result
헬스체크 AI
건강 데이터 조회
조회 결과
이용 안내
이름·연락처는 받지 않습니다
3단계 · 결과
62/ 100
대사 건강 위험도 · 주의
AI 해석
수축기 혈압이 기준 범위보다 18 높고, 공복혈당은 당뇨 전단계 구간이에요. 수면 시간을 7시간 이상으로 늘리는 것이 도움이 됩니다.
결과 이미지 저장
다시 조회
항목별 기준 범위 대비 위치기준 범위내 값
수축기 혈압
138 mmHg
공복혈당
126 mg/dL
BMI
26.4
총콜레스테롤
214 mg/dL
하루 수면
6.5 시간
연령대 평균 대비 예측 추이40대 남성 기준 · 5년
현재+1년+2년+3년+5년

[화면 개요 및 목적]

AI 모델 결과를 한눈에 보여주는 대표 화면입니다. 제안서의 ‘기준 범위로 해석’ 설계를 증명하며, 데모 4단계에서 같은 결과를 확인합니다.

[핵심 기능 로직]

종합 점수는 게이지로, 항목별 값은 기준 범위 띠 위의 위치로 표시해 수치를 몰라도 무엇이 벗어났는지 보입니다. 모델이 준 설명 문장과 추이 그래프를 함께 두어 심사위원이 가치를 바로 이해합니다.

  • 기준 대비 위치 표시
    Recharts 막대·게이지
  • 결과 이미지로 저장
    html-to-image
시나리오

| 화면 01

[화면 개요 및 목적]

[핵심 기능 로직]

    | 화면 02

    [화면 개요 및 목적]

    [핵심 기능 로직]

      | 화면 03

      [화면 개요 및 목적]

      [핵심 기능 로직]

        시나리오

        | 화면 01

        [화면 개요 및 목적]

        [핵심 기능 로직]

          | 화면 02

          [화면 개요 및 목적]

          [핵심 기능 로직]

            | 화면 03

            [화면 개요 및 목적]

            [핵심 기능 로직]