Hairline Lab

사진에서 헤어라인·두피 노출을 관찰하고, 가상의 모발 변화를 비교하는 로컬 웹앱입니다. 사용자 제공 리디 디자인 문서를 바탕으로 전체 화면을 정리한 디자인.md와 개발자 관점의 스킬 규칙.md를 적용했습니다. 기존 브랜드 파랑 #0066FF를 유지합니다.

바로 실행

이 작업 폴더에는 Python 3.12 가상환경과 모발 분할 모델이 준비되어 있습니다. PowerShell에서 실행하세요.

.\.venv\Scripts\python.exe app.py

브라우저에서 http://127.0.0.1:8000 으로 접속합니다. VS Code Live Server는 Python API를 실행하지 않으므로 index.html을 직접 열거나 Live Server 주소로 접속하면 분석 기능이 작동하지 않습니다. 서버를 종료하려면 실행 터미널에서 Ctrl+C를 누릅니다.

전체 페이지 디자인

현재 기준은 디자인.md, 전체 구성의 원문 참고 자료는 리디 디자인 문서입니다. 버튼·입력·선택 컨트롤은 추가 요청한 One UI 세부 요소 기준을 적용합니다. 이전 공통·분석 디자인 기준은 참고 이력으로 보관합니다.

• 메인은 사용자 제공 시안에 맞춘 3단 대시보드입니다. 64px 가로 상단 메뉴 아래에 왼쪽 촬영 준비·실행 버튼, 가운데 요약 3개·최근 기록 검색/정렬·3행 목록·페이지 이동, 오른쪽 빠른 메뉴·공지·학습 리포트를 배치합니다. 1100×700px 이상에서는 화면 높이를 채우고 긴 내용은 패널 안에서 스크롤합니다. 작은 창은 2열, 620px 이하에서는 1열로 전환합니다. 준비 체크는 브라우저 안에서만 처리하며 광고는 실제 제휴 광고가 아닌 디자인 예시로 표시합니다.
• 로그인 후 /api/dashboard에서 실제 계정 요약을 읽으며 비로그인 상태는 숫자 대신 로그인 안내를 표시합니다. 검색·정렬·페이지 이동은 받은 최근 기록 4개 안에서 처리하며 검색 범위를 표시합니다. 전체 기록은 기존 기록 모달을 열고 개별 기록은 /analysis?report=<ID>로 이동합니다. 계정 전환 때 이전 데이터를 지우고 늦은 응답을 무시하며, 기록·학습 실시간 변경과 새로고침 버튼으로 현황을 갱신합니다. AI 분석이나 사진 전송을 자동 실행하지 않습니다.
• 서브 페이지는 상단 중앙 로고·가운데 메뉴를 공유합니다. BETA 배지를 표시하지 않으며 로그인·회원가입도 같은 메뉴와 기존 복귀 링크를 사용합니다. 서브 페이지 헤더는 데스크톱 144px, 991px 이하 168px이고 로고는 48/40/36px입니다. 메인은 새 시안에 따라 64px의 둥근 가로 헤더·왼쪽 작은 로고·계정 드롭다운을 사용합니다. 공통 스타일은 static/styles.css, 메인 전용은 static/dashboard.css에서 관리합니다.
• 모든 기능 페이지는 흰 바탕, 짙은 글자, 기존 4px 작업 카드를 유지합니다. 버튼은 18px, 입력·선택은 12px 모서리로 맞췄으며 파랑·중립색 표면과 눌림·포커스·비활성 상태를 사용합니다. 메인 시작 표시도 공통 주요 버튼 스타일을 사용하며 기능별 본문 배치는 유지합니다.
• 분석·편집·학습·이용 안내·학습 가이드·내 정보·로그인·회원가입과 기록·카메라·도우미의 형태를 맞췄습니다. 데이터·동의·인증·분석 기능은 유지합니다.
• 너비 992px·높이 600px 이상에서는 페이지를 화면 너비·높이에 맞춥니다. 분석·편집·학습은 가로 3열, 안내는 목차와 읽기 영역, 계정 화면은 소개와 입력 영역으로 나눕니다. 긴 내용과 목록은 영역 안에서 스크롤하며 주요 실행·저장·제출 버튼은 고정합니다. 작은 화면과 낮은 창은 일반 세로 흐름을 유지합니다.
• 글꼴은 기존 Pretendard·시스템 스택을 사용하고 외부 브랜드 로고·표지·패키지를 도입하지 않습니다. 실제 화면 검증 여부는 개발 기록에 구분해 기록합니다.
• 홈부터 로그인·회원가입까지 전체 10개 경로에 짧은 본문 전환과 페이지별 스켈레톤을 적용했습니다. 실제 초기 데이터 준비에 맞춰 표시하며 분석·이미지 편집 대기 상태에도 스켈레톤을 사용합니다. 움직임 줄이기 설정과 오류·뒤로 가기 복구는 페이지 전환·로딩에 정리했습니다.

별도 사진 분석 페이지

상단 사진 분석 또는 메인 화면의 사진 분석 시작을 누르면 http://127.0.0.1:8000/analysis 로 이동합니다. 사진 선택·촬영·분석 결과는 분석 페이지에서 확인하며, 가상 편집은 별도 변화 미리보기 페이지를 제공합니다.

1. 사진 준비: 파일을 업로드하거나 카메라로 촬영합니다. 선택한 사진의 크기와 전체 밝기를 브라우저에서 점검합니다. 이 점검은 촬영 도움말이며 모발 선명도·의학적 품질 점수가 아니고, 분석을 자동 실행하거나 사진을 외부로 보내지 않습니다.
2. 관찰 설정: 전체·헤어라인·정수리/가르마·모발 분포 중 원하는 부위를 고르고 전송·저장 항목을 확인합니다. 선택한 부위는 서버 검증 후 AI 관찰 프롬프트에 반영하며, 사진에 없는 부위를 추측하거나 실제 밀도·모낭 수를 산출하지 않습니다.
3. 리포트 확인: 부위별 관찰·사진의 한계·다음 행동을 확인하고 내용 복사, 텍스트 저장 또는 기존 JSON 리포트 저장을 사용할 수 있습니다. 작은 화면에서는 분석 완료 시 결과로 이동합니다. 부위를 바꾸거나 사진을 지우면 이전 리포트를 초기화합니다.

리포트의 병원 찾기 / 약·치료제 안내 버튼은 최대 800px의 진료 안내 모달에서 해당 탭을 엽니다. 내 주변 병원 보기를 누르면 현재 위치를 확인하고 두 번째 모달에 가까운 병원 목록·주소·전화·등록 운영 시간을 표시합니다. 소수 셋째 자리의 위치로 같은 서버의 심평원 공개 자료를 검색하며 위치를 저장하거나 외부 지도에 보내지 않습니다. 자료는 2026-09-30 기준 피부과 전문의 신고기관 1,744곳이며 실제 운영·진료 여부는 방문 전에 확인해야 합니다. 약 탭의 기존 소개 사진 3개와 공통 출처·상담 블록을 제거하고 제품 20개 각각에 실제 사진을 연결했습니다. 제품 포장 사진 19개·실제 낱알 식별 사진 1개이며, 이미지를 누르면 크게 볼 수 있고 각 카드에 사진 출처를 표시합니다. 목록은 2열·600px 이하 1열입니다. 제품별 사진 출처에 정리했습니다. 두 모달은 닫기·Esc·배경 클릭·포커스 복귀와 키보드 조작을 지원합니다. 요청 검증·상태 초기화는 추천 로직을 따릅니다.

분석 페이지에서 사진을 선택한 뒤 사진 도구 모음의 변화 비교를 누르면 선택한 원본을 새 편집 페이지로 가져갑니다. 이 버튼을 누를 때만 브라우저 IndexedDB에 사진 한 장을 임시 보관하고, 무작위 일회용 키로 전달한 뒤 읽는 즉시 삭제합니다. 5분이 지난 전달은 거절하고 다음 접근 때 정리하며, 로그인 계정이 달라진 경우에도 읽지 않고 삭제합니다. 일반 메뉴 이동은 사진을 가져가지 않습니다. 서버에 전달용 사진을 저장하지 않습니다.

메인 내 기록에서 리포트를 선택하면 /analysis?report=<기록 ID>로 이동해 본인 계정의 저장된 리포트를 불러옵니다. 이때 AI를 다시 호출하지 않고 원본 사진을 복원하지 않습니다. 비로그인 상태는 로그인 후 분석 주소로 돌아옵니다. 기존 /#analysis는 분석 페이지로, /#simulation·/analysis#simulation은 변화 미리보기 페이지로 연결합니다.

별도 변화 미리보기 페이지

상단 변화 미리보기는 http://127.0.0.1:8000/simulation 으로 이동합니다. 사진 선택·카메라 촬영 → 부위와 강도·편집 방식 선택 → 원본과 비교·PNG 저장 순서로 사용합니다.

• 헤어라인·정수리·모발 분포, 1~100의 편집 강도와 빠른 선택을 제공합니다. 강도는 편집 설정이며 탈모 비율이 아닙니다.
• 슬라이더와 나란히 비교를 전환할 수 있습니다. 사진·부위·강도·편집 방식을 바꾸면 이전 결과를 지웁니다. 저장 이미지에는 가상 편집 안내를 포함합니다.
• 실제 서버 설정에 따라 사용 가능한 방식을 표시합니다. 기본 로컬 합성은 모발 분할 모델과 OpenCV가 필요하고, 로컬 AI는 별도 설정이 필요합니다. Google 유료 편집은 별도의 사진 전송·비용 확인을 모두 선택해야 실행합니다. 자동 생성이나 자동 재시도는 하지 않습니다.
• 대기 취소는 브라우저의 응답 대기를 중단합니다. 서버에서 시작한 처리는 계속될 수 있으며 유료 요청 비용이 취소되는 기능은 아닙니다.
• 사진과 편집 결과는 계정 기록에 저장하지 않습니다. 계정 변경 시 현재 사진·동의·결과를 지우고 이전 요청의 늦은 응답을 표시하지 않습니다.

관찰 프롬프트 버전은 hair-observation-v5-scalp-reference입니다. 이마 피부와 모발 영역 안의 두피 노출, 선택 부위의 가림과 조명·각도 영향을 별도로 기록합니다. 근거가 충돌하거나 부위가 충분히 보이지 않으면 판단을 보류하며, 이마 높이·M자 형태만으로 선천적 헤어라인과 탈모를 구분하지 않습니다. 사진 분석은 최대 2048px·JPEG 품질 95로 처리하고 단색 입력은 AI 호출 전에 거절합니다. 기존 관찰 정책은 사진 관찰 고도화, 확대 두피 참고 모델은 공통 두피 학습 모델에 정리했습니다. 실제 사진의 임상 성능이나 이전 버전 대비 일반 헤어라인 정확도 향상을 측정한 것은 아닙니다.

별도 이용 안내 페이지

상단 이용 안내는 http://127.0.0.1:8000/guide 로 이동합니다. 로그인 없이 사용 순서, 촬영 규격, 기능별 사진 처리·저장 방식과 FAQ를 확인할 수 있습니다. 분석 화면의 촬영 안내는 /guide#photo-guide로 연결하며, 예전 /#guide 북마크도 새 페이지로 이동합니다.

• FAQ는 질문과 답변을 브라우저 안에서 검색하며 사진이나 검색어를 서버로 보내거나 저장하지 않습니다. 주제 필터, 일치 항목 수, 검색 결과 없음, 전체 펼치기·접기와 검색 초기화를 제공합니다.
• /guide#faq-history 같은 질문 주소는 해당 답변을 펼쳐 보여 줍니다. 페이지 목차는 데스크톱에서 본문 패널 안의 읽는 위치를, 작은 화면에서는 페이지의 읽는 위치를 표시합니다. 좁은 화면에서는 목차를 본문 위에 배치합니다.
• 촬영·분석·편집은 각 기능 페이지에서 실행합니다. 안내 페이지를 열거나 검색하는 동작으로 사진을 선택하거나 AI를 호출하지 않습니다.

웹소켓 기능

화면 구성은 유지하고 로그인한 계정의 실시간 알림 연결을 추가했습니다. 기존 Flask·Waitress HTTP 서버는 그대로 사용하며, websockets의 스레드 서버를 같은 프로세스의 별도 로컬 포트에서 실행합니다. 기존과 같이 python app.py로 두 서버를 함께 시작합니다.

• HTTP: http://127.0.0.1:8000
• WebSocket: ws://127.0.0.1:8001/ws (기본값)
• 설정 조회: 로그인 후 GET /api/realtime → enabled, port, path
• 설정: .env의 ENABLE_WEBSOCKET=false로 끌 수 있고 WEBSOCKET_PORT로 포트를 바꿀 수 있습니다. 포트 미지정 시 HTTP 포트 다음 번호를 사용합니다. HTTP와 웹소켓은 서로 다른 포트를 사용합니다.

This is the beginning of the README. Read the rest at the original. Read the full README ↗