이번 발표의 주 주제는 streamlit & supabase를 사용하는데에 있기 때문에,
이 부분 감안하고 보셔야 합니다. (억지사용느낌 물씬 ^^)
우선 저의 계획을 말씀드리자면..
자녀들이 다 크고 나면 보통 독립을 하잖아요!? 부모님은 중장년~노년층에 접어드시고.... 집에 혼자 계시는 부모님이 아차! 하고 약 복용하는걸 까먹는 경우가 종종 있기 때문에 자식 입장에서 너무 걱정이 될 것 같아서 그 부분을 해소하고자 해당 사이트 개발을 해보게 되었어요.
그래서 부모님이 약을 드시면(체크하시면) 자녀에게 알람이 가게 한다 + 같은 사이트에서 약봉지 사진을 스캔하면 텍스트를 추출해서 분석 후 약 정보와 부작용 등등을 표기한다 ( 이 부분을 gpt api사용 ) + 추가적으로 약국에서 살 수 있는 약들 정보는 식약처 api받아서 서브 서비스 만들기 -> 초기에 이정도로 구상을 해보았습니다.
그러려면~
우선 OpenAi에서 API KEY를 발급받아야하기때문에
5$을 내고...
ㅋ
키를 받아줍니다 이 키는 본인만 보는것임!! 메모장에 기록해두세요....
마찬가지로 supabase에서도 새 프로젝트를 생성한 후 anon public key , project url 을 받아서 저장합니다.
마지막으로 식품의약품안전처_의약품개요정보(e약은요) api키를 받고싶어서 활용 신청을 하면
이렇게 주시기 때문에요 키만 받아서 저장해두면 됩니다
한편.... 파이썬을 써야하니까요
필요한 패키지를 다운받아야겠죠
프롬프트에 추가로 다음의 코드를 입력
# 1. Streamlit (웹 UI)
pip install streamlit
# 2. OpenAI (GPT API)
pip install openai
# 3. Supabase
pip install supabase
# 4. 이미지 처리
pip install pillow
# 5. 기타
pip install python-dotenv
프롬프트의 준비는 끝났습니다!!
이제는 vscode 에 들어가서 앞서 생성된 medicine_project 파일을 열구요, secrets.toml 이라는 파일을 생성해서 안에 여태껏 받아온 암호키를 입력해줍니다
부모님이 약을 복용하셨을 때 알람은 어떻게 받도록 할까 하다가 원래는 카카오톡 알림톡을 생각했어요. 부모님이 로그인 하고 먹었어요 버튼만 누르면 알림톡으로 자녀에게 연락이 가게요!
근데 카카오톡 알림톡은 사업자 등록을 해야 한다고 하더라고요
어쩔수없이 api key를 무료로 받을 수 있는 텔레그램을 사용해야 했습니다..
텔레그램 연동 방법은 아주아주쉬워요! botfather을 통해 챗봇을 만들어주고 api키만 받아오면 돼요. 나중에 사용자도 해당 토큰이 포함된 링크에 접속하면 id를 바로 받을 수 있고 그걸로 처음 등록을 해야합니다
이제는 supabase에 가서 약 기록 테이블을 생성해줘야합니다.
sql editor에서 하는거구요. 당연히 쿼리문을 통해 필요한 테이블과 열 명을 입력하면 됩니다.
나중에 table editor에서 새로 추가된 데이터를 볼 수 있어요
최종 생성된 테이블을 보여드릴게요!
순서대로
- family_connections / 가족 연결 정보
- medicine_records / 복약 기록
- notification_stats 🔓 / 알림 통계 (보안 정책 미설정 상태)
- notifications / 복약 알림 기록
- user_notification_settings / 텔레그램 사용자 정보
- users / 이용자 정보
입니다. 저의 서비스에서 사용자가 입력하는 정보들이 여기에 다 기록으로 남는거에요
이것이 supabase의 역할이지요~
준비는 끝났다! 이제 어플을 구성하는 모든 파이썬 코드를 정리할 차례이지요
중간에 계속 터미널로
streamlit run.app_py <- 이거 쳐서 확인하면서 수정해서 과정 보여드리기가 참 애매한거에요
그래서 클로드에게 역으로 제 코드를 보내고 어떤 기능을 추가했는지 정리해달라고했어요 ㅎ
1. 디자인 부분 (CSS 스타일링)
모바일 UI 최적화
- 중앙 정렬 모바일 레이아웃: 최대 너비 400px, 화이트 배경의 카드형 디자인
- 탭 네비게이션: 라운드 형태의 탭, 선택 시 보라색→파란색 강조
- 버튼 스타일: 전체 너비, 라운드 모서리, 눌림 애니메이션
메인 테마
- 블루-민트 그라데이션 배경: 눈이 편한 색상 조합 (#0093E9 → #80D0C7)
- 글래스모피즘 효과: 반투명 배경 + 블러 효과
- 정보 카드: 흰색 배경, 그림자 효과, 좌측 청록색 강조선
- 상태별 박스: 성공(초록), 경고(노랑), 정보(파랑) 구분
알림 시스템 UI
- 알림 배지: 빨간 원형 배지로 읽지 않은 알림 표시
- 알림 카드: 노란색(일반), 초록색(읽지 않음) + 슬라이드 애니메이션
2. API 및 초기화
외부 API 연동
- OpenAI GPT-4o: 약봉지 이미지 분석, 의약품 정보 검색
- Supabase: 데이터베이스 (사용자, 처방기록, 알림, 가족연결)
- 식약처 e약은요 API: 공식 의약품 정보 조회
- 텔레그램 봇 API: 실시간 복약 알림 전송
캐싱 전략
- @st.cache_resource로 API 클라이언트 초기화 (재사용)
3. 헬퍼 함수
이미지 처리
- preprocess_image: OCR 성능 향상을 위한 전처리 (크기 조정, 선명도·대비 향상)
날짜 파싱
- parse_flexible_date: AI가 읽은 다양한 날짜 형식을 datetime으로 변환
- "2024년 3월 15일", "24-03-15", "2024.3.15" 등 지원
4. GPT 기반 AI 기능
약봉지 이미지 분석
- analyze_medicine_bag: GPT-4o Vision API로 약 이름, 병원명, 조제일 추출
- JSON 형식으로 구조화된 데이터 반환
의약품 정보 검색
- search_medicine_info_gpt: 약품명 입력 시 효능, 용법, 주의사항 등을 GPT가 제공
- search_mfds_medicine: 식약처 API로 공식 데이터 검색 (챗봇용)
5. 데이터베이스 함수 (Supabase)
사용자 관리
- 회원가입/로그인: PIN 기반 인증 시스템 (4자리 숫자)
- 가족 연결: 부모-자녀 관계 설정 (family_connections 테이블)
복약 기록 관리
- save_to_database: 처방 기록 저장 + 복용 기간 자동 생성
- create_recurring_records: N일치 복약 기록 자동 생성
- get_records_by_date: 특정 날짜의 처방 조회
- mark_as_taken: 복약 완료 처리 + 자녀에게 알림 전송
캘린더 데이터
- get_calendar_data: 특정 월에 처방이 있는 날짜 리스트 반환
6. 알림 시스템 (이중 구조)
DB 기반 앱 내 알림
- send_notification: Supabase notifications 테이블에 저장
- get_unread_notifications: 읽지 않은 알림 조회
- mark_notification_as_read: 읽음 처리
텔레그램 실시간 알림
- send_telegram_message: 텔레그램 봇으로 메시지 전송
- 사용자 설정 저장: chat_id + 알림 활성화 여부 관리
- 복약 완료 알림: 부모님이 약 먹으면 자녀에게 즉시 알림
7. 사이드바 (로그인/회원가입)
로그인 상태
- 사용자 정보 표시 (이름, 역할)
- 읽지 않은 알림 개수 배지
- 복약 통계 (총 처방, 이번 주 처방)
로그인/회원가입 탭
- 역할 선택: 부모님 / 자녀 모드
- PIN 인증: 4자리 숫자 기반 보안
- 텔레그램 설정: 자녀 모드 전용, chat_id 입력 + 알림 활성화
8. 부모님 모드 (3개 탭)
탭1: 처방약 스캔
- 사진 업로드 → 2. AI 분석 → 3. 정보 확인 & 저장
- 약봉지 이미지 → GPT-4o Vision 분석 → 약 이름 추출
- 각 약물의 효능, 용법, 주의사항 자동 검색
- 복용 정보 입력: 시작일, 복용 기간(1~90일), 복용 시간(아침/점심/저녁)
- 자동 기록 생성: N일치 복약 기록이 캘린더에 자동 추가
탭2: 약 검색 챗봇
- 빠른 질문: 게보린, 타이레놀 등 원클릭 검색
- 식약처 API 기반: 공식 의약품 정보 제공
- 대화형 인터페이스: 채팅 형식으로 자연스러운 질의응답
탭3: 복약 캘린더
- 월별 캘린더: 처방이 있는 날짜는 💊 표시, 오늘은 📍 표시
- 날짜 클릭: 해당 날짜의 처방 기록 상세 조회
- 복약 완료 체크: "먹었어요" 버튼 → 자녀에게 알림 전송
- 수동 기록 추가: 캘린더에서 직접 처방 입력 가능
9. 자녀 모드 (3개 탭)
탭1: 부모님 연결
- PIN 기반 연결: 부모님 이름 + PIN 입력으로 가족 연결
- 연결된 부모님 목록: 현재 연결된 부모님 표시
탭2: 알림
- 읽지 않은 알림: 초록색 카드로 강조 표시
- 전체 알림 내역: 최근 20개 알림 조회
- 읽음 처리: 개별 또는 일괄 처리 가능
탭3: 복약 현황
- 부모님별 오늘 복약 상태: 복용 완료(✅) / 복용 전(⏰)
- 최근 7일 통계:
- 이번 주 처방 건수
- 복용 완료 건수
- 복약 순응도 (%) 계산
10. 세션 상태 관리
주요 세션 변수
- logged_in: 로그인 여부
- user_id, patient_name, patient_age, user_role: 사용자 정보
- scan_result: 이미지 분석 결과 임시 저장
- calendar_year, calendar_month: 캘린더 상태 유지
- chat_messages: 챗봇 대화 내역
11. 핵심 기능 흐름
복약 기록 생성 플로우
- 약봉지 사진 업로드
- GPT-4o Vision으로 약 이름, 병원명, 조제일 추출
- 각 약물 정보 자동 검색 (GPT-4o)
- 사용자가 복용 기간, 시간 선택
- DB 저장 + N일치 자동 기록 생성
- 캘린더에 💊 표시
알림 전송 플로우
- 부모님이 "먹었어요" 버튼 클릭
- DB에서 복약 완료 처리 (taken=True)
- 연결된 자녀 목록 조회
- 각 자녀에게 알림 전송:
- Supabase notifications 테이블에 저장
- 텔레그램 활성화 시 실시간 메시지 전송
- 자녀 앱에서 🔔 배지 표시
예!
그리고 이제 이건 로컬호스트로만 볼 수 있는거니까 실제로 배포를 해야겠죠
저는 깃허브에 연동해서 streamlit cloud에 배포했는데요 하는법을 알려드릴게용
Streamlit Cloud 배포 가이드 (GitHub 연동)
1. GitHub 리포지토리 준비
역할
- GitHub에 코드를 올려서 버전 관리 + Streamlit Cloud가 코드를 가져갈 수 있게 함
- 필수 파일들을 정리해서 저장소 구조를 만듦
필수 파일
- app.py: 메인 앱 코드
- requirements.txt: 필요한 라이브러리 목록
- .gitignore: Git에 올리지 않을 파일 지정
2. requirements.txt 작성
역할
- 앱 실행에 필요한 Python 라이브러리 목록을 명시
- Streamlit Cloud가 이 파일을 보고 자동으로 라이브러리 설치함
포함 내용
- streamlit, openai, supabase, Pillow 등 모든 import한 라이브러리
3 .gitignore 설정
역할
- 보안: API 키 같은 민감한 정보가 GitHub에 올라가는 것을 방지
- 용량: 불필요한 파일(캐시, 임시파일)을 제외해서 저장소 크기 줄임
주요 제외 파일
- .streamlit/secrets.toml: API 키가 저장된 파일 (절대 공개 금지!)
- __pycache__/: Python 실행 시 생성되는 캐시
- .vscode/: 개발 도구 설정 파일
4. GitHub에 코드 업로드
역할
- 로컬 컴퓨터의 코드를 GitHub 서버에 업로드
- 버전 관리 + Streamlit Cloud가 접근할 수 있게 만듦
과정
- git init: 현재 폴더를 Git 저장소로 만듦
- git add .: 변경된 파일들을 추가
- git commit: 변경 내역 저장 (스냅샷)
- git push: GitHub 서버에 업로드
5. Streamlit Cloud 배포
역할
- GitHub 코드를 클라우드 서버에서 실행
- 인터넷 어디서나 접속 가능한 웹 주소 생성
배포 과정
- Streamlit Cloud 로그인: GitHub 계정으로 로그인
- New app 클릭: 새 앱 배포 시작
- 저장소 선택: GitHub에 올린 리포지토리 선택
- 메인 파일 지정: app.py 선택
- Deploy 클릭: 자동으로 배포 시작
6. 비밀 키(Secrets) 설정
역할
- API 키를 안전하게 클라우드 서버에 전달
- GitHub에는 올리지 않고, Streamlit Cloud에만 저장
설정 위치
- Streamlit Cloud 대시보드 → App settings → Secrets
- secrets.toml 파일 내용을 그대로 복사 붙여넣기
예시 형식
OPENAI_API_KEY = "sk-..."
SUPABASE_URL = "https://..."
SUPABASE_KEY = "eyJh..."7. 업데이트 배포
역할
- 코드 수정 후 자동으로 앱 재배포
- GitHub에 push하면 Streamlit Cloud가 자동 감지해서 업데이트
과정
- 로컬에서 코드 수정
- git add → git commit → git push
- Streamlit Cloud가 자동으로 변경 감지
- 자동 재배포 (보통 1~2분 소요)
8. 배포된 앱 접속
역할
- 전세계 어디서나 URL로 앱 접속 가능
- 스마트폰, 태블릿, PC 모두 지원
URL 형식
https://your-app-name.streamlit.app
공유
- URL만 보내면 누구나 접속 가능
- 로그인 없이 바로 사용 가능
결과 이렇게 나왔고요 점 세개 누르면 수정도 할 수 있어요
https://medicineproject-376xsskfnb8jgqcue4d9rz.streamlit.app/
우리 가족 스마트 복약 관리
스마트 약봉지 분석 시스템
medicineproject-376xsskfnb8jgqcue4d9rz.streamlit.app
실제 링크인데... 지금 제가 openai platform 결제를 5달러 밖에 안했고 돈 더 나갈까봐 호달달 떨면서 결제수단 없애놔서 나중에 사용량 지나고 들어가보면 제대로 작동이 안되지않을까요? 그리고 텔레그램 처음 써봐서 텔레그램도 탈퇴했어욬ㅋㅋㅋㅋ 이상한 사람들한테 막 연락오던데요?;;;
그래서...
너무 아쉽게 ㅜㅜㅜ 최종으로 완성된걸 못남겨놨고 80% 정도 완성된 부분만 영상으로 저장을 해뒀어요
근데 진짜 레전드 실수가 텔레그램 알람 오는 부분이 녹화가 안된거에요, 화면 녹화 처음해봐서 보여주고싶은 화면? 도 체크해야하는지 몰랐어요 그래서 속상합니다..
궁금하시면 보세요 ㅎ
저기에 플러스 약 언제부터 며칠간 복용할건지 캘린더에 남도록 기능 추가했고
텔레그램 문자도 잘 와요
사진에서 이상한점 확인하셨나요? ㅎ
이것도 수정 전 사진이라 ㅜㅜㅜ 어흑
바로 실제로는 4시31분인데 7시31분에 약을 복용했다고 문자가 오더라고요
원인: 서버 시간이 UTC(세계 표준시)로 설정되어 있기 때문입니다
from datetime import datetime, timezone, timedelta
# KST 타임존 객체 생성
kst = timezone(timedelta(hours=9))
# 현재 한국 시간 가져오기
current_time = datetime.now(kst)
이런식으로 코드를 수정하면 돼요
전 잘 했어요 남겨놓은게 없을 뿐이지........
여튼 이렇게 얼레벌레 마무리를 했는데요
사실 제가 하고싶었던건 약 사이의 상호작용 정보였어요.
어르신들 중에는 다양한 병원에서 처방받은 약을 동시에 드셔야 하는 경우가 많아지는데, 이게 병원을 옮길때마다 새 병원에 가서 여태 복용했던 약들을 말하는게 생각보다 엄청 귀찮은 일이거든요. 기억도 잘 안나구요. 그걸 상세히 기록해두고, 약 사이의 부작용 정보를 알려줬으면 좋겠다 싶었는데 이건 사실 ai의 도움을 받기는 많이 위험하다고 생각해서 오픈된 병원정보 api가 있었으면 좋겠다 했습니다. 물론 그렇다고 해서 이걸 신뢰하냐 마냐의 문제는 위험한거라 해결법은 더 고민해봐야겠어요
강사님의 피드백은
부모님이 먹었어요 체크 하는걸 귀찮아하실것같다. -> 였는데 전적으로 동의합니다. 그래서 왜 그 노인분들 혼자 거주하실때 화장실에 낮은 눈높이에 맞춰서 빨간 버튼같은거 설치해드리잖아요 그게 위급시에 버튼을 누르시면 사람들에게 전달이 되는거거든요?
이런식으로 만드는것도 방법이겠다 생각하는데 어쨋든 이번 프로젝트 취지에는 벗어나기도 하고 이 버튼을 굳이 만들만큼 가치가 있는가 하는 생각도 합니다.
사실 의료 데이터에 관심이 있어서 진행한건데 그렇게까지 구매하고싶은 서비스는 아닌 것 같아요 만들고 보니까 그렇습니다..
여튼 이번에도 재밌었어요
'Ax Wave > Ax' 카테고리의 다른 글
| n8n을 통해 오픈망 RAG 시스템 구축하기 (0) | 2025.12.03 |
|---|---|
| Orange를 사용해 본 적이 있는가.. (0) | 2025.11.26 |