Stand Up.

전문가용 장비에서 자가 측정 서비스로

전문가용 장비의 뇌혈류 측정을 독립된 검진 서비스로 전환했습니다. 제품 범위를 정하고, 센서 착용과 자세 전환부터 모바일 결과 확인까지 설계했습니다. 모바일 결과 페이지는 반응형 웹으로 직접 구현했습니다.

담당: 제품 기획 · UX/UI · B.I · 디자인 시스템 · 모바일 웹 구현
협업: 하드웨어 · 의료데이터 분석팀
초기 구축: 2024.11–2025.01
제품 접점: 키오스크 · 센서 · 모바일 결과

현장 측정과 개인 결과 확인을 연결한 서비스

검진센터의 운영 조건에서 출발한 제품 기획

기존 고객과 영업팀에서는 여러 검사 중 뇌혈류 측정만 분리하고, 비용과 사용 절차를 줄여 달라는 요구가 반복됐습니다. 이 피드백을 바탕으로 NIRSIT EYE의 측정 기능을 독립 제품으로 구성하고, 현장 안내부터 검사 후 결과 확인까지 서비스 범위를 정했습니다.

기존 사용 환경

전문 인력이 신호를 확인하던 기존 장비의 보정 화면 — 전문 인력의 신호 확인을 전제로 한 인터페이스

제품의 핵심 과제는 검사 화면의 단순화와 함께, 현장 설명을 화면의 안내·상태·예외 처리로 구체화하는 것이었습니다.

집중할 기능: 기립에 따른 뇌혈류 측정
여러 검사 중 현장에 필요한 기능을 독립 제품의 중심으로 정했습니다.
현장에 남길 경험: 착용 · 신호 확인 · 측정 · 핵심 결과
측정에 필요한 행동과 상태 확인을 검사 순서 안에 배치했습니다.
모바일로 확장할 경험: 상세 결과 · 증상 설문 · 후속 정보
현장의 대기 시간을 줄이기 위해 상세 설문을 측정 후 모바일에서 응답하도록 옮겼습니다.

사용자 행동과 시스템 상태를 함께 설계한 검사 흐름

사용자가 다음 행동을 알 수 있는지, 장비가 그 행동을 받을 준비가 되었는지를 함께 확인했습니다. 측정이 끝난 뒤에는 결과를 개인 기기로 전달하는 경로까지 연결했습니다.

01
착용
사용자위치와 방향 맞추기
제품착용 예시와 접촉 오류 안내
02
준비
사용자장비 연결 후 자세 유지
제품연결 · 신호 보정 · 준비 완료
03
측정
사용자쪼그려 앉기와 일어서기
제품행동 예고와 자세별 피드백
04
결과
사용자점수와 변화 구간 확인
제품결과 분석 · 재측정 분기
05
전달
사용자QR 또는 카카오톡으로 열기
제품상세 결과 · 설문으로 연결

착용 오류의 원인과 복구 행동을 연결

장비를 찾지 못한 경우, 접촉이 좋지 않은 경우, 거꾸로 착용한 경우는 필요한 행동이 다릅니다. 오류를 구분하고 해당 상태에 맞는 안내를 설계했습니다.

눈썹 위치와 얼굴 중앙을 기준으로 안내

눈썹 위와 얼굴 중앙선을 착용 예시에 표시했습니다. 센서와 이마 사이에 머리카락이 끼지 않도록 안내해, 측정 전에 사용자가 확인할 기준을 제시했습니다.

눈썹과 얼굴 중앙선을 표시한 Stand Up 장비 착용 안내 — 착용 예시와 위치 안내 · UI Flow

호흡과 자세 전환의 타이밍을 안내하는 마이크로 인터랙션

3분 30초의 측정은 서 있기 1분, 쪼그려 앉기 1분 30초, 다시 서 있기 1분으로 이어집니다. 이 시간 동안 사용자가 편안하게 호흡하고, 다음 동작을 준비하고, 정해진 시점에 자세를 바꾸도록 문구와 작은 움직임을 함께 설계했습니다.

인터랙션 재생

호흡 안내부터 자세 전환까지

측정 중 행동 안내

자세 유지

정면을 바라보며 편안하게 숨쉽니다.

편안한 호흡2초 축소 · 2초 확대

소리와 함께 재생

호흡 안내는 자세를 편안하게 유지하도록 돕는 시각적 리듬입니다. 앉기·일어서기는 전환 직전 10초를 재생하며, 소리를 켜면 마지막 3초에 원본 카운트다운이 함께 나옵니다.

01편안한 호흡
원이 천천히 작아지고 커지며 안정적인 자세 유지를 돕습니다.
0210초 전 예고
현재 자세를 유지하면서 손잡이와 다음 동작을 준비합니다.
033초 소리 신호
마지막 3초는 화면과 소리로 함께 알려 전환 시점을 맞춥니다.
04자세 전환
앉기는 아래로, 일어서기는 위로 움직이는 화살표로 안내합니다.

측정 데이터에서 발견한 개선점

정확한 전환 시점을 위해 소리 신호를 더하다

동작을 이해하는 것과 제때 움직이는 것은 다른 문제였습니다. 시각 안내를 설계한 뒤에도 실제 측정에서 타이밍이 어긋나는 사례를 확인했고, 전환 직전의 신호를 보완했습니다.

관찰: 측정 데이터 분석에서 안내보다 빠르거나 늦게 앉고 일어서는 사례가 반복됐습니다. 자세를 바꾸는 시점의 오차가 측정 정확도에 영향을 주고 있었습니다.
보완: 앉기와 일어서기 3초 전부터 소리 카운트다운을 추가했습니다. 화면의 예고와 방향 안내에 청각 신호를 함께 제공해, 사용자가 전환 시점을 더 명확하게 인지하도록 했습니다.
설계 기준: 자세를 유지하는 동안에는 편안한 리듬을, 움직이기 직전에는 분명한 신호를 제공합니다. 측정 데이터의 신뢰성을 위해 사용자의 신체 행동까지 인터랙션의 범위로 다뤘습니다.

초기 화면과 원본 인터랙션 영상 보기

측정 중 유지해야 할 행동을 반복 안내

쪼그려 앉은 동안에는 정면 보기, 편하게 호흡하기, 장비가 흔들리지 않게 하기처럼 현재 자세를 유지하는 데 필요한 안내를 순서대로 제시했습니다.

머리의 장비가 흔들리지 않도록 안내하는 측정 화면 — 자세 유지 · 현재 행동과 남은 시간 표시

초기 피그마에는 5초 시각 카운트다운이 있습니다. 이후 측정 데이터 분석을 바탕으로 전환 3초 전 소리 신호를 보완했습니다. 위 재생 예시는 원본 모션 컴포넌트와 후속 소리 개선을 함께 재구성한 것입니다.

기존 포트폴리오 p25에 연결된 원본 영상. 자세 유지 → 전환 예고 → 쪼그려 앉기 → 다시 일어서기의 움직임을 확인할 수 있습니다.

핵심 점수에서 변화 구간으로 이어지는 결과 정보

현장에서는 종합 점수와 핵심 상태를 먼저 확인하고, 이어서 점수의 설명과 시간별 변화를 살펴보도록 구성했습니다. 측정 점수와 설문 점수를 구분하고, 설문을 하지 않은 상태도 별도로 표현했습니다.

종합 점수, 세부 점수 탭, 혈류 회복 그래프와 시간별 변화를 보여주는 결과 화면 — 2025.01 결과 화면 · 수치는 디자인 시안의 예시 데이터

01: 현재 결과 요약
점수와 상태 문구로 결과의 핵심을 먼저 전달
02: 점수의 의미
세부 점수 선택에 맞춰 해석 정보를 제공
03: 행동과 데이터의 관계
쪼그려 앉기·일어서기와 회복 구간을 그래프에 대응

검사 후에도 이어지는 결과 전달과 모바일 경험

키오스크에서 확인한 결과를 QR과 카카오톡으로 다시 열 수 있게 했습니다. 모바일에서는 결과 요약, 상세 해석, 증상 설문을 이어 보고, 반응형 웹으로 직접 구현해 디자인과 전달 경험을 연결했습니다.

뇌혈류 건강 점수와 설문 점수를 함께 요약한 모바일 결과 — 결과 요약 · 측정과 설문의 결과 구분

혈류 회복 그래프와 점수 설명이 있는 모바일 상세 결과 — 상세 해석 · 그래프와 설명을 함께 제공

다른 이유로 활동 불가를 선택한 항목의 점수 입력이 비활성화된 모바일 설문 — 설문 응답 · 다른 이유로 활동 불가한 상태 구분

전송을 건너뛴 사용자도 다시 결과를 받을 수 있는 흐름

카카오톡 전송 창을 닫아도 결과 화면에 전송 버튼을 남겼습니다. 전화번호를 입력하지 않은 상태와 입력을 마친 상태를 나누고, QR로 직접 여는 경로도 함께 제공했습니다.

전화번호 입력 전 카카오톡 결과 전송 창 — 전화번호 입력 전 · 전송 버튼 비활성

전송 창을 닫은 뒤에도 카카오톡 전송 버튼과 QR 코드가 남아 있는 결과 화면 — 창을 닫은 뒤 · 결과 화면에서 다시 전송 가능

화면의 상태와 행동 규칙을 재사용하는 디자인 시스템

공통 컴포넌트에는 모양과 함께 상태·크기·사용 위치를 정의했습니다. 입력, 버튼, 검사 진행, 장비 상태, 결과 점수를 같은 규칙으로 구성해 화면 간 일관성을 유지했습니다.

활성, 비활성, 경고와 크기 및 스타일로 구성된 버튼 컴포넌트 세트 — 버튼 컴포넌트 · 상태 × 크기 × 표현 방식

상태: 활성 · 비활성 · 경고
같은 버튼에서도 진행 가능 여부와 주의가 필요한 행동을 구분했습니다.
규격: 48 / 56 / 80 px
세 가지 높이와 채움·테두리·텍스트 형태를 정의해 사용 맥락에 맞춰 적용했습니다.
정보 구조: 검사 단계 · 장비 상태 · 결과 모듈
현재 단계, 배터리, 점수 상태를 공통 요소로 관리했습니다. 아이콘은 Ionicons 라이브러리를 활용했습니다.

미확인, 낮음, 중간, 충전 상태를 구분한 배터리 컴포넌트 — 배터리 상태 컴포넌트

브랜드를 제품의 여러 접점에 적용

블루 워드마크와 오렌지 포인트를 키오스크, 앱 아이콘, 카카오톡 채널에 적용했습니다. Mind Speak과도 라인업의 조형을 맞추어 제품군의 관계를 이어갔습니다.

검사 전후의 질문을 분리한 후속 개정

초기 화면은 여러 증상을 0–10 척도로 묻는 긴 설문을 포함했습니다. 2025년 6월 개정안에서는 검사 전의 평소 증상과 검사 직후의 경험을 나누고, 짧은 문항과 세 가지 응답 상태로 구성했습니다.

평소 일어날 때 어지럼증이 있는지 세 가지 선택지로 묻는 개정 화면 — 검사 전 · 평소 증상의 빈도 확인

오늘 검사 중 어지러움을 느꼈는지 묻는 검사 종료 화면 — 검사 직후 · 이번 측정 중의 경험 확인

세 가지 응답 강도와 기본, 눌림 상태를 정의한 컴포넌트 — 응답 컴포넌트 · 3가지 응답 × 기본·눌림 상태

질문의 맥락과 응답 상태를 함께 정리

평소의 증상과 이번 검사의 경험은 서로 다른 정보입니다. 문항의 시점을 구분하고, 선택 전후의 표현을 컴포넌트로 정의했습니다. 긴 상세 설문은 모바일 결과 흐름에서 별도로 이어집니다.

2025년 6월 피그마 개정안입니다. 실제 배포 여부와 이 변경의 효과는 별도로 확인해야 합니다.

제품 기획부터 구현과 현장 도입까지

Stand Up은 KMI 건강검진센터에 도입됐습니다. 제품 기획, 키오스크와 모바일 UX/UI, 디자인 시스템을 연결했고 모바일 결과 페이지의 반응형 웹 구현까지 담당했습니다.

KMI 건강검진센터에 설치된 Stand Up 키오스크와 측정 공간 — 현장 도입 · 키오스크와 신체 동작 공간

초기 도입 현장의 운영 기록

80+주당 검사 건수 · 첫 도입 센터

2026 포트폴리오 작성 당시 기록된 첫 도입 센터의 주간 사용량입니다. 2025년 1월 출시 후 실제 검진 현장에서 반복 사용되는 제품으로 이어졌습니다.

기획: 제품 범위와 접점별 역할 정의
설계: 신체 행동·장비 상태·예외 흐름 구체화
구현: 모바일 결과의 반응형 웹 구현

REFLECTION

제품의 범위는 사용자가 결과를 확인하고 다음 행동을 이해하는 지점까지입니다.

Stand Up에서는 측정 기능을 독립 제품으로 구성하고, 사람의 동작과 기기의 상태를 연결하는 안내를 설계했습니다. 이 경험을 통해 화면 단위의 완성도와 함께 서비스 범위, 예외 처리, 결과 전달까지 하나의 제품으로 다루었습니다.

설계 자료와 개정 이력

피그마의 15개 페이지를 검토했습니다. 구분용 빈 페이지 3개를 제외한 12개 페이지에서 화면, 컴포넌트, 개정 상태를 확인했습니다.

2026 포트폴리오 p20–29의 제품 기획·운영 맥락을 함께 반영했습니다. p25는 호흡과 자세 안내, p28은 측정 데이터 분석 후 추가한 3초 소리 카운트다운의 근거입니다.