(앱) ( 인지장애 측정을 위한) " 얼굴 표정 변화 기록" 앱 개발과정과 자료들

[까페지기]

이 앱은 완성도가 떨어져 아직 공개하지 않았습니다.

https://hanibyeol-face-demo.pages.dev/?utm_source=chatgpt.com

하니별 · 얼굴 표정 변화 연구

face-expression‎-research-public-source-v1.0.zip

49.48KB

웹캠과 AI로 얼굴 표정 변화를 수치화하는 웹앱 만들기개발 과정부터 시행착오,   — v0.1 ~ v1.0

일반 웹캠과 AI를 이용해 얼굴 표정의 변화를 숫자와 그래프로 기록하는 웹앱을 만들어 보았습니다.

개발 과정에서 무엇을 사용했고, 어떤 문제가 생겼으며, 어떻게 해결했는지 공유합니다.

전문 개발자가 아니어도 AI의 도움을 받아 연구용 프로그램을 만들 수 있다는 점, 그리고 실제로 사용해 보면 예상하지 못한 문제가 계속 발견된다는 점이 이번 작업의 핵심이었습니다.

---

1. 왜 만들었을까?

파킨슨병 환자에게서는 얼굴 표정이 감소하는 현상인 **가면얼굴(hypomimia)**이 관찰될 수 있습니다. 인지기능 저하와 얼굴 표정의 관계를 분석한 연구들도 있습니다.

그렇다면 이런 질문이 생깁니다.

"같은 사람의 얼굴 표정이 지난달보다 얼마나 달라졌는지 숫자로 기록할 수 없을까?"

이를 위해 다음 목표를 세웠습니다.

•  
•  
•  
•  
•  
•  

중요: 이 앱은 얼굴 표정 움직임을 측정하는 연구용 시제품입니다. 치매나 파킨슨병을 진단하거나 치료 효과를 판정하는 프로그램은 아닙니다.

---

2. 어떤 기술을 사용했나?

가장 중요한 기술은 Google의 MediaPipe Face Landmarker입니다.

이 프로그램은 얼굴 영상에서 다음 정보를 추정합니다.

•  
•  
•  

이 중 입꼬리 위치와 미소 관련 계수를 활용했습니다.

주요 개발 도구

•  
•  
•  
•  
•  
•  

참고로 GitHub는 현재 웹앱 실행에 반드시 필요한 서비스는 아닙니다.

Google MediaPipe 공식 문서

https://developers.google.com/edge/mediapipe/solutions/vision/face_landmarker

웹브라우저용 MediaPipe 개발 안내

https://developers.google.com/edge/mediapipe/solutions/vision/face_landmarker/web_js

---

3. 먼저 30초 검사부터 구현

검사는 복잡하지 않게 만들었습니다.

① 무표정 5초 → ② 미소 5초

이 과정을 세 번 반복합니다.

총 검사 시간은 30초입니다.

촬영한 영상을 노트북 내부에서 분석해 다음 값을 계산하도록 했습니다.

•  
•  
•  
•  
•  

처음부터 병의 위험도를 계산하는 대신 눈으로 보이는 얼굴 움직임을 일관되게 수치화하는 것에 집중했습니다.

이 검사 구성에는 무표정과 미소를 반복 촬영해 파킨슨병의 얼굴 움직임을 분석한 연구가 참고가 되었습니다.

https://pmc.ncbi.nlm.nih.gov/articles/PMC12780872/

---

4. v0.1부터 v1.0까지 개발 과정

실제로는 처음부터 완성된 프로그램이 나온 것이 아닙니다.

v0.1 — 첫 검사 프로그램

웹캠을 연결하고 30초 동안 얼굴 영상을 촬영하는 기능을 만들었습니다.

MediaPipe로 입꼬리 움직임과 미소 계수를 계산하고, 검사 결과를 CSV 파일로 내려받는 기능을 구현했습니다.

처음에는 검사 시작 버튼이 눌리지 않았습니다.

원인: 촬영 동의 체크박스에 체크해야 버튼이 활성화되도록 만든 것을 놓쳤기 때문입니다.

기능 자체의 오류가 아니라 사용 안내가 부족한 사례였습니다.

v0.2 — 연구 근거와 참고자료 추가

프로그램에 참고 기준 화면을 만들고, 사용한 논문 링크를 모았습니다.

그 과정에서 중요한 사실을 알게 되었습니다.

기존 논문의 미소 점수와 MediaPipe의 미소 계수는 같은 수치가 아닙니다.

따라서 논문 점수를 무작정 정상 기준으로 넣지 않았습니다.

v0.3 — 초진과 최근 검사 비교

같은 사람의 결과를 비교할 수 있도록 누적 기록표와 그래프를 추가했습니다.

하지만 사용해 보니 결과가 자동으로 쌓이지 않았습니다.

원인: 검사 결과를 계산하는 기능과 기록을 저장하는 기능이 따로 있었기 때문입니다.

v0.4 — 날짜뿐 아니라 검사 시각까지 기록

하루에 여러 번 검사할 수도 있기 때문에 날짜만 저장해서는 부족했습니다.

검사 시작 시각을 초 단위까지 저장하고, 변화 방향을 색상으로 표시하도록 했습니다.

그런데 자동 저장이 실제로는 제대로 작동하지 않았습니다.

원인: 자동 저장 함수를 만들어 놓고도, 분석 완료 시 실행하도록 연결하지 않은 코드 오류였습니다.

이 경험을 통해 기능이 코드에 존재하는 것과 실제로 작동하는 것은 다르다는 점을 확인했습니다.

v0.5 — 자동 저장 오류 수정

분석이 끝나면 결과가 자동으로 저장되도록 수정했습니다.

동일한 결과가 중복 저장되지 않도록 처리하고, 저장 상태를 확인하는 진단 기능도 넣었습니다.

얼굴 위치를 맞추기 위한 타원형 안내선도 추가했습니다.

v0.6 — 모든 지표를 한 화면에

처음에는 비교할 지표를 하나씩 선택해야 했습니다.

이 방식이 불편해 다섯 가지 지표의 그래프를 위에서 아래로 모두 표시하도록 변경했습니다.

얼굴도 조금 더 크게 촬영하도록 안내했습니다.

v0.7 — 검사 안내 색상 구분

'편안하게 무표정'과 '미소짓기'라는 문구가 잘 보이지 않았습니다.

그래서 다음과 같이 구분했습니다.

🔵 파란색 = 편안하게 무표정

🟠 주황색 = 미소짓기

검사자가 화면을 보며 지시를 따라가기 훨씬 쉬워졌습니다.

v0.8 — 노트북에 맞는 세로 배치

처음에는 왼쪽에 검사 준비, 오른쪽에 카메라 화면이 있었습니다.

그러나 노트북에서는 화면이 좁아 얼굴 중심을 맞추기 불편했습니다.

검사 준비 → 카메라 화면 → 검사 버튼

순서로 세로 배치했습니다.

또한 안내 글자가 너무 커서 영상 일부를 가리는 문제도 수정했습니다.

v0.9 — 카메라와 시작 버튼을 더 가깝게

작은 노트북에서는 카메라 영상을 보면서 검사 시작 버튼을 누르기 어려웠습니다.

그래서 시작·중단 버튼을 카메라 화면 바로 아래에 붙이고, 안내 배너는 더 작게 만들었습니다.

실제 사용 환경에서 화면 배치는 분석 기능만큼 중요했습니다.

v1.0 — 노트북과 스마트폰의 카메라 차이 해결

마지막으로 큰 문제가 발견되었습니다.

맥미니에서는 얼굴 위치를 쉽게 맞출 수 있었지만, 다른 노트북이나 스마트폰에서는 타원형 기준에 얼굴을 맞추기가 어려웠습니다.

원인: 카메라 종류와 촬영 방향이 달라도 좁은 얼굴 크기 기준을 똑같이 적용하고 있었습니다.

이를 개선하기 위해 다음을 반영했습니다.

•  
•  
•  
•  
•  
•  

현재 시험용 허용 범위는 영상 가로폭 대비 얼굴 폭 약 **12~72%**입니다.

단, 이 범위는 사용 편의를 위한 설정이지 측정 정확도가 보장되는 범위는 아닙니다.

---

5. 개발 중 겪은 실수와 해결 방법

비슷한 프로그램을 만들 분들에게 가장 도움이 될 내용이라고 생각합니다.

실수 1. 서버는 켜졌는데 프로그램 화면이 안 나옴

Python 웹서버를 프로그램 파일이 없는 폴더에서 실행한 것이 원인이었습니다.

해결: index.html이 들어 있는 폴더에서 웹서버를 실행합니다.

개발용 명령어:

python3 -m http.server 8000

브라우저에서는 다음 주소로 접속합니다.

http://localhost:8000

위 주소는 자기 컴퓨터 내부에서만 사용하는 개발 주소입니다.

실수 2. 카메라는 나오는데 검사 시작 버튼이 비활성화됨

원인: 촬영 동의 항목을 체크하지 않았습니다.

해결: 버튼이 비활성화된 이유를 화면에 명확히 표시해야 합니다.

실수 3. 검사했는데 누적 기록이 없음

원인: 저장 버튼을 따로 누르게 되어 있거나 자동 저장 연결이 누락됐습니다.

해결: 분석 완료 → 저장 실행 → 저장 성공 여부 확인 → 누적 기록 다시 읽기 순서로 점검했습니다.

실수 4. 같은 날 여러 번 검사한 결과가 구별되지 않음

원인: 날짜 중심의 그래프 표시였습니다.

해결: 날짜와 검사 시각을 함께 저장·정렬했습니다.

실수 5. 스마트폰에서 얼굴 크기 안내선이 맞지 않음

원인: 기기와 화면 방향에 상관없이 같은 비율을 요구했습니다.

해결: 상대적 얼굴 크기와 촬영 방향을 반영하고 허용 범위를 확대했습니다.

실수 6. 웹페이지를 닫았는데 카메라 표시등이 켜져 있음

원인: 다른 브라우저 탭이나 프로그램이 카메라를 계속 사용하고 있을 수 있습니다.

해결: 카메라를 사용하는 탭을 확인하고, 앱에 별도의 카메라 끄기 기능을 추가했습니다.

웹브라우저의 카메라 해제 기능:

https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack/stop

실수 7. 다른 컴퓨터에서 이전 누적 기록이 안 보임

원인: 기록을 서버가 아니라 각 브라우저의 로컬 저장소에 보관했기 때문입니다.

Chrome과 Safari, 서로 다른 접속 주소도 별도의 저장 공간을 사용할 수 있습니다.

해결: 현재는 CSV 및 JSON 백업을 활용하고, 향후 중앙 데이터베이스를 별도로 검토할 계획입니다.

실수 8. 프로그램의 색상과 배치만 바꿨는데 예상 밖의 문제가 발생함

해결: 수정할 때마다 기존 검사·저장 기능의 자동 테스트를 다시 실행하고, 노트북과 스마트폰 화면에서 별도로 확인했습니다.

---

6. 만든 웹앱을 인터넷에 올리기

처음에는 Mac 컴퓨터에서 로컬 웹서버로 개발했습니다.

다른 사람에게 시연하기 위해 Cloudflare Pages에 배포했습니다.

복잡한 서버를 직접 설치하지 않고 웹앱 파일을 업로드하는 방식입니다.

배포 절차는 간단했습니다.

① Cloudflare 계정 생성

② Workers & Pages에서 Pages 프로젝트 생성

③ 직접 파일 업로드 방식 선택

④ HTML·CSS·JavaScript 파일 업로드

⑤ 배포 완료 후 인터넷 주소로 접속

프로그램을 수정한 후에는 기존 프로젝트에 새 버전을 다시 배포했습니다.

Cloudflare Pages 공식 배포 안내:

https://developers.cloudflare.com/pages/get-started/direct-upload/

참고로 Direct Upload 방식으로 만든 프로젝트는 같은 프로젝트를 GitHub 자동 배포 방식으로 전환할 수 없습니다. Git 연동이 필요하다면 새 프로젝트를 만드는 방식을 검토해야 합니다.

GitHub는 코드 보관과 버전 관리용으로 유용하지만, 다른 사람에게 앱을 시연하기 위해 반드시 필요한 것은 아닙니다.

---

7. 얼굴 영상은 어디에 저장될까?

이 부분도 중요했습니다.

현재 시제품은 다음과 같이 작동합니다.

웹캠 촬영 → 브라우저 내부에서 임시 영상 처리 → MediaPipe 분석 → 측정 수치 저장

•  
•  
•  
•  
•  
•  

또한 MediaPipe의 실행 프로그램과 AI 모델은 초기 실행 시 외부 서버에서 다운로드할 수 있습니다. Google은 MediaPipe Tasks의 입력 영상은 기기 내부에서 처리하지만, 성능·사용량 관련 정보는 전송될 수 있다고 안내합니다.

따라서 시연 단계에서는 실제 환자정보나 개인식별 정보를 사용하지 않는 것이 원칙입니다.

카메라 접근과 개인정보 관련 브라우저 문서:

https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia

브라우저 로컬 저장소 안내:

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

비공개 웹앱 접근제어 관련:

https://developers.cloudflare.com/cloudflare-one/access-controls/applications/http-apps/

---

8. 가장 어려운 문제는 아직 남아 있다

프로그램이 작동한다고 해서 측정 결과의 임상적 의미가 자동으로 생기는 것은 아닙니다.

예를 들어 입꼬리 이동량이 7%에서 9%로 변했다면 무엇을 의미할까요?

표정 움직임이 증가했다는 사실은 확인할 수 있습니다.

하지만 그것이 정상 범위인지, 측정오차를 넘는 변화인지, 질환이 호전되었다는 뜻인지는 별도의 검증이 필요합니다.

관련 논문을 조사하면서 다음 사실을 확인했습니다.

•  
•  
•  
•  

현재 MediaPipe 기반 30초 검사와 직접 호환되는 연령·성별 정상 참고범위는 아직 확보하지 못했습니다.

따라서 지금 단계에서 치매 위험도나 치료 효과를 숫자로 판정해서는 안 됩니다.

---

9. 앞으로 보완할 과제

앞으로 중요하게 생각하는 부분은 다음과 같습니다.

첫째, 반복 측정 신뢰도 확인

같은 사람이 같은 조건에서 반복 검사했을 때 결과가 얼마나 달라지는지 측정해야 합니다.

둘째, 정상 참고자료 구축

연령·성별에 따른 건강인 자료를 현재 앱의 동일한 검사 방법으로 확보해야 합니다.

셋째, 촬영 환경 표준화

가능하면 같은 사람은 같은 카메라, 거리, 조명, 촬영 방향으로 반복 검사해야 합니다.

넷째, 검사 속도 지표 추가

미소의 크기뿐 아니라 미소 시작 지연과 최대 미소 도달시간도 검토할 계획입니다.

다섯째, 개인정보 및 데이터 관리 강화

연구에 실제로 사용하려면 동의, 연구윤리, 접근권한, 안전한 저장 방식, 모델 버전 관리가 추가로 필요합니다.

---

10. 개발에 활용한 기술 자료 및 공식 웹사이트Google MediaPipe

얼굴 특징점과 표정 계수 분석의 핵심 기술입니다.

https://developers.google.com/edge/mediapipe/solutions/vision/face_landmarker

웹브라우저 구현 안내:

https://developers.google.com/edge/mediapipe/solutions/vision/face_landmarker/web_js

오픈소스 프로젝트:

https://github.com/google-ai-edge/mediapipe

Cloudflare Pages

웹앱을 인터넷에 배포하는 서비스입니다.

https://pages.cloudflare.com/

직접 업로드 안내:

https://developers.cloudflare.com/pages/get-started/direct-upload/

jsDelivr

MediaPipe JavaScript 실행 파일 등을 전달하는 CDN 서비스입니다.

https://www.jsdelivr.com/

GitHub

프로그램 소스코드 및 버전 관리를 위한 서비스입니다.

https://github.com/

MDN Web Docs

웹캠 촬영, 녹화, 저장 기능의 표준 웹 기술 문서입니다.

카메라 연결:

https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia

영상 녹화:

https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder

로컬 저장:

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

카메라 중지:

https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack/stop

---

11. 개발에 참고한 주요 논문

아래 논문들은 연구 방향과 측정 방법을 검토하기 위해 참고한 자료입니다. 논문의 알고리즘이나 정상 기준을 모두 그대로 구현했다는 의미는 아닙니다.

① 파킨슨병의 얼굴 표정 움직임 정량화 — 2026년

Objective Assessment of Facial Expressions in Parkinson's Disease During Deep Brain Stimulation ON and OFF States: A Pilot Study

MediaPipe 기반 얼굴 특징점 분석과 30초 무표정·미소 반복 검사 설계에 중요한 참고가 된 연구입니다.

https://pmc.ncbi.nlm.nih.gov/articles/PMC12780872/

② 얼굴 움직임을 이용한 파킨슨병 표정 감소 분석 — 2022년

Quantitative Eval‎uation of Hypomimia in Parkinson's Disease: A Face Tracking Approach

입 주변 특징점 사이의 거리 변화로 얼굴 움직임을 정량화한 연구입니다.

https://pmc.ncbi.nlm.nih.gov/articles/PMC8963098/

③ 얼굴 미소와 대화를 이용한 알츠하이머병 관련 연구 — 2024년

Digital Detection of Alzheimer's Disease Using Smiles and Conversations with a Chatbot

일본에서 미소와 대화의 얼굴·음성 특징을 분석한 연구입니다.

https://pmc.ncbi.nlm.nih.gov/articles/PMC11530557/

④ 인지기능 저하와 얼굴 감정 분석 — 2022년

Automated Analysis of Facial Emotions in Subjects with Cognitive Impairment

정상인과 다양한 인지기능 저하 집단의 얼굴 감정 반응을 연구한 논문입니다.

https://pmc.ncbi.nlm.nih.gov/articles/PMC8782312/

⑤ 웹캠을 이용한 치매 관련 얼굴 표정 연구 — 2025년

AI-Based Facial Emotion Analysis for Early and Differential Diagnosis of Dementia

일반 USB 웹캠을 활용하여 얼굴 표정과 인지기능 저하의 관계를 분석했습니다.

https://pmc.ncbi.nlm.nih.gov/articles/PMC12561503/

⑥ 연령에 따른 얼굴 표정 변화 — 2021년

Changes in Computer-Analyzed Facial Expressions with Age

한국 연구진이 젊은 성인과 노년층의 얼굴 표정 차이를 분석한 연구입니다.

https://www.mdpi.com/1424-8220/21/14/4858

⑦ 연령·성별에 따른 입 주변 움직임의 참고자료 — 2023년

The Average Facial Expressions: A Range of Motion Analysis for Different Sex and Age Groups

건강인 328명의 3차원 얼굴 움직임을 분석해 연령·성별 참고자료를 제시했습니다.

https://pmc.ncbi.nlm.nih.gov/articles/PMC9911205/

⑧ 얼굴 움직임 측정의 신뢰도 연구 — 2023년

Reliability and Validity of Emotrics in the Assessment of Facial Palsy

자동 얼굴 움직임 분석에서 반복 측정 신뢰도가 얼마나 중요한지 참고한 연구입니다.

https://pmc.ncbi.nlm.nih.gov/articles/PMC10381242/

---

마치며

이번 개발에서 가장 크게 느낀 점은 "AI가 프로그램을 만들어 주는 것"과 "실제로 쓸 만한 프로그램을 완성하는 것"은 다르다는 사실입니다.

처음에는 카메라를 연결하고 얼굴 표정 수치를 계산하는 것만으로 충분할 줄 알았습니다.

하지만 실제로 사용하면서 검사 버튼 위치, 화면 크기, 얼굴 안내선, 스마트폰 호환성, 카메라 해제, 누적 기록 오류처럼 예상하지 못했던 문제가 계속 나타났습니다.

하나씩 수정하면서 비로소 사용하기 편한 형태가 되어 갔습니다.

현재 목표는 질환을 진단하는 AI가 아니라, 같은 사람의 얼굴 표정 기능이 시간에 따라 어떻게 달라지는지 신뢰성 있게 기록하는 도구를 만드는 것입니다.

앞으로는 프로그램의 기능 추가만큼이나 정상 참고자료와 반복 측정 신뢰도를 확보하는 데 집중하려 합니다.

비슷한 분야에서 웹캠, MediaPipe, 임상 데이터 정량화 등을 연구하는 분들에게 작은 참고가 되었으면 합니다.

※ 이 글은 연구용 웹앱의 개발 경험을 공유하기 위한 것으로, 특정 질환의 진단·치료 효과를 주장하거나 의료기기로서의 성능을 보증하는 내용이 아닙니다.