SomaX

몸의 언어를
함께 읽어요

소매틱 AI 헬스케어 동반자
SCREEN 01 · SPLASH
브랜드 첫인상
앱 최초 진입. localStorage 회원 여부 확인 후 신규 → 온보딩 / 기존 → 홈 자동 분기. 1.5~2초 후 전환.
분기 로직
localStorage.getItem('somax_d') → null : 온보딩
localStorage.getItem('somax_d') → 있음 : 홈
SomaX
Step 01
몸은 늘
먼저 알고 있어요
말하기 전에, 느끼기 전에.
당신의 몸이 보내는 신호를
함께 읽어볼까요?
SCREEN 02 · ONBOARDING 1
고운바탕으로 흐르는
첫 번째 초대
정보 전달이 아닌 감성 공감 목적. 서비스 세계관 진입.
카피 방향
헤드 고운바탕 400 26px — "몸이 먼저 알고 있다"는 소매틱 원리를 시적으로 표현
바디 고운바탕 400 15px — 압박 없이 부드럽게 초대하는 톤
명령형 지양: "기록하세요" 대신 "함께 읽어볼까요?" — 브랜드 보이스 준수
배경 처리
오키드·크림·세이지 3색 혼합 그라데이션 — 앱 3대 컬러를 은은하게 동시 노출.
Step 02
조금의 움직임이
뇌를 깨워요
상태 체크
카메라로 심박·안색을 읽거나
오늘 몸의 신호를 직접 입력해요
소매틱 세션
3분 호흡·움직임으로
무기력한 몸을 부드럽게 깨워요
황체기 알림
예민해지기 전에 먼저 알려드려요
맞춤 케어로 연결해드릴게요
SCREEN 03 · ONBOARDING 2
핵심 기능 3가지를
카드로 소개
서비스 가치 제안을 구체적으로 전달. 카드 3종: 상태체크·소매틱세션·황체기알림.
스텝 컬러 매핑
Step 01 오키드 — 신체 인식 Step 02 세이지 — 회복 Step 03 코랄 — 알림
SomaX

3 / 4

어떤 목적으로
사용하시나요?

선택에 따라 맞춤 콘텐츠를 보여드려요. 나중에 언제든 바꿀 수 있어요.

목적 · 하나만 선택해주세요

마이페이지에서 언제든 변경 가능해요

SCREEN 04 · 성별·목적 선택
전체 콘텐츠 분기 진입점
선택값 → localStorage somax_user.gender 저장. 홈 D-day 카드·Alert 조건·세션관리 콘텐츠 전체 분기.
분기 범위
female → PMS 케어 세션, 황체기 D-day, PMS Alert 조건
male → 스포츠·심리 세션, 운동 루틴 D-day, 운동 공백 Alert
4 / 4

몸에 대해
조금만 알려주세요

맞춤 케어를 위해 최소한만 여쭤볼게요

연령대
생리 시작일

가장 최근 생리가 시작한 날짜를 알려주세요

생리 주기

잘 모르겠다면 보통을 선택해도 괜찮아요

자주 느끼는 증상 여러 개 선택 가능
운동 빈도
선호 강도
요즘 자주 불편한 곳 복수 선택 · 건너뛸 수 있어요
하루 가용 시간
최근 수면

입력 정보는 개인 맞춤 케어에만 사용됩니다

SCREEN 05 · 정보입력
최소 입력, 최대 맞춤화
라디오·체크박스만으로 완료. 타이핑 없음. 연령대·주기·증상 3그룹.
저장 데이터
age, cycleLength, symptoms[] → somax_user 갱신

마지막으로
확인해 주세요

개인정보 보호를 위한 동의가 필요해요

SCREEN 06 · 개인정보 동의
필수·선택 분리
필수 3개·선택 1개. 동의 완료 → localStorage 저장 → 홈 진입.

SomaX

이번 주
월화수목금토일
주기 정보 로딩 중
생리기
난포기
배란기
황체기
황체기 피크 감지 — 소매틱 세션을 시작해보세요
SOMAX AI

황체기 증상이 나타날 수 있는 시기예요. 지금 3분 소매틱 호흡을 시작해볼까요?

PMS 신체 안정 가이드

골반 주변 근육 이완 복식 호흡 3분 따뜻한 물 한 잔

지금 몸의 신호를 확인해요

어떤 부위가 신호를 보내고 있나요?
간단하게 체크하면 맞춤 세션을 안내해드려요.

주기 달력
입력한 주기 데이터 기준
생리기 (1-5일)
난포기
배란기
황체기
SCREEN 07 · 메인 홈
신호 감지 대시보드
황체기 D-day · Alert · AI 코멘트 · 가이드 · CTA · 주간 달력. gender 분기로 female/male 콘텐츠 자동 전환.
D-day 연산
cycleDay = today - lastPeriodDate
dday = cycleLength - cycleDay
황체기 = cycleDay > cycleLength - 14
배란일 = lastPeriodDate + (cycleLength - 14)
임신가능기간 = 배란일 ±5일
오늘의 기록
오늘 컨디션
증상 선택 복수 선택 가능
메모 선택
SCREEN 08 · 증상·컨디션 기록
Alert·통계 핵심 데이터
{ date, condition(1-5), symptoms[], memo } → symptom_logs 배열. Alert 조건 B·C 트리거 판단 데이터.
성별 분기
female: 생리통·부종·두통·감정기복·무기력·수면장애·식욕변화·집중력저하·피로도
male: 근육통·피로도·집중력저하·스트레스·수면장애·식욕변화
리포트
평균 컨디션
3.2/5
지난주 +0.4
세션 완료
5회
이번주 누적
기록일
6일
이번주 연속
0
이번 주 컨디션 종합 점수
기록을 쌓는 중이에요

아직 이번 주 기록이 없어요. 컨디션을 기록하면 여기에 요약이 나타나요.

기간별 컨디션 추이 (주간)
컨디션 (1~5)
주기 단계별 컨디션 추이
나쁨 (1~2)
보통 (3)
좋음 (4~5)
세션 완료 · 컨디션 지수
세션완료 (막대)
컨디션 지수 (선, 0~100)
SCREEN 09 · 통계
누적 데이터 시각화
Chart.js 4.4. gender 기준 통계 자동 생성. 노데이터 빈상태 UI. 기간 탭(주/월) 전환.
차트 3종
증상 강도 추이 (라인) — symptom_logs condition 값
컨디션 변화 (바) — 주기 단계별 평균 / 남성: 주간 운동량
세션·개선 효과 (복합) — session_logs + conditionLogs 상관
커뮤니티
SCREEN 10 · 커뮤니티
성별 분리 피드
posts[] gender 필드 기반 자동 필터. female→PMS 피드 / male→스포츠 피드 / all→공통. localStorage 동기 처리.
피드 필터 로직
내 피드: posts.filter(p => p.gender === currentGender || p.gender === 'all')
전체: 필터 없음
호르몬 정보: 정적 콘텐츠
글쓰기
카테고리
제목
내용

작성 시 현재 선택한 성별 기준으로 자동 태깅됩니다.

SCREEN 11 · 글쓰기
gender 자동 태깅
{ id, date, category, title, content, gender: user.gender } → posts.push → localStorage.
신체 측정

얼굴을 프레임 안에 맞춰주세요

AI 자세 코칭

스쿼트 동작을 실시간으로 추적해서 무릎 각도와 반복횟수를 분석해요. 영상은 기기 안에서만 처리돼요.

최근 측정 이력
1
카메라 접근 권한 허용
권한 요청 창이 뜨면 '허용'을 눌러주세요
촬영은 측정하는 동안에만 진행돼요
2
기기 안에서만 처리
촬영된 영상은 서버로 전송되지 않고
기기 안에서만 분석 후 즉시 삭제돼요
3
안내에 따라 측정
화면 안내에 맞춰 자세를 잡으면
자동으로 측정이 시작돼요
4
결과 저장
측정이 끝나면 결과가
신체측정 이력에 자동으로 저장돼요
SCREEN 12 · 카메라
신체 측정 · 카메라 연동 동의 화면
MVP: 화면 구성 기준. 10초 카운트다운 후 더미 결과 → s13. measureLogs 이력 표시.
측정 결과
심박수
72 bpm

심박수가 안정적인 범위에 있어요. 오늘 컨디션 양호.

측정 시각: 2026년 6월 27일 09:41
오늘 수치 요약
심박수72 bpm
컨디션 점수3 / 5
판정안정
SCREEN 13 · 측정 결과
수치 요약 · 이력 저장
MVP: 더미 bpm. 측정 시각 실시간 업데이트. 저장 → measureLogs.push.
AI 자세 코칭
시작 전 몸 상태

끝나면 변화를 숫자로 보여드려요

SCREEN 24 · AI 자세 코칭
TF.js Pose Detection (온디바이스 · 실시간 영상)
시작 전/후 셀프체크(통증은 게이지 슬라이더) + requestAnimationFrame 루프로 매 프레임 무릎(엉덩이-무릎-발목) 각도 계산, 스켈레톤 실시간 오버레이, 상태머신 기반 반복횟수 카운트 → posture_logs 저장.
세션관리

이 화면에서만 적용되는 보기 설정이에요. 계정 전체 성별·모드는 마이페이지에서 바꿀 수 있어요.

추천 세션
3분 · 호흡 타이머
황체기 소매틱 호흡
예민한 몸을 빠르게 안정시키는 3분 호흡 루틴
PMS 케어 세션
호르몬 정보
HORMONE INFO
황체기란 무엇인가요?
배란 이후 생리 전까지의 구간으로 프로게스테론 수치가 높아지며 감정 기복·무기력·부종 등 PMS 증상이 나타날 수 있어요.
SCREEN 14 · 세션관리
회복 세션 허브
PMS/스포츠 토글로 콘텐츠 즉시 전환. sessions_pms[] / sessions_sports[] 배열. 호르몬 정보 콘텐츠.
황체기 소매틱 호흡
들이쉬세요
4

천천히 코로 숨을 들이마시세요.
배가 부풀어오르는 것을 느껴보세요.

세션 완료 시 리포트에 자동 반영됩니다

SCREEN 15 · 호흡 타이머
들이쉬기 4s / 내쉬기 4s
setInterval 기반 호흡 사이클. 완료 → session_logs 기록. 진행률 바 실시간 업데이트.
골반 이완 루틴

1 / 3 단계

동작 이미지 플레이스홀더
STEP 1
편안하게 눕기
등을 바닥에 붙이고 무릎을 세워주세요. 양손은 배 위에 올려두고 어깨 힘을 빼세요. 눈을 감고 3번 깊게 숨을 쉬어요.
SCREEN 16 · 단계별 가이드
이미지 + 텍스트 안내
이미지 플레이스홀더. 전체 진행률 바. 완료 → session_logs 기록.
호르몬 안내서
안녕하세요! 저는 SomaX 호르몬 안내 AI예요. 황체기, 에스트로겐, 프로게스테론 등 궁금한 것을 물어보세요.
황체기는 배란 이후부터 생리 시작까지의 구간이에요. 이 시기에 프로게스테론이 높아지면서 감정 기복·무기력·부종 등 PMS 증상이 나타날 수 있어요.
황체기가 언제 시작되는지 어떻게 알 수 있나요?
생리 주기에서 배란일은 보통 다음 생리 예정일로부터 14일 전이에요. 평균 28일 주기라면 14~15일째부터 황체기가 시작돼요. SomaX가 자동으로 감지해서 알려드릴게요!
SCREEN 17 · AI 채팅 (호르몬 안내서)
정적 콘텐츠 채팅 형식
MVP: 실제 AI 없음. 정적 콘텐츠를 채팅 UI로 표현. 세션관리 탭 내 진입.
마이페이지
S
사용자
UUID: sx-xxxx-xxxx
주기 정보
마지막 생리 시작일-
평균 주기-
배란 예상일-
성별 · 모드 전환
현재 모드
알림 설정
SomaX Alert 알림ON
일일 기록 리마인더OFF
기타
알림 히스토리
개인정보 관리
SCREEN 18 · 마이페이지
설정 · 성별 스위치
성별 스위치 → somax_user.gender 업데이트 → 홈·세션관리 즉시 재렌더.
알림 히스토리
SCREEN 19 · 알림 히스토리
Alert 이력 확인
alert_history[] 날짜 역순. triggerType A/B/C 뱃지. 항목 탭 → 해당 세션 진입.
개인정보 관리
사용자 프로필
성별 모드
마지막 생리 시작일
평균 주기 (일)
오늘 컨디션 (1-5)
온보딩 정보 · 수정하면 홈·추천 로직에 바로 반영돼요
이용 목적
운동 빈도
선호 강도
하루 가용 시간
최근 수면
통계
증상 강도 시드 (1-5)
세션 완료 횟수
개선 효과 점수 (%)

※ 증상 강도 시드·개선 효과 점수는 통계 탭 차트 계산에는 더 이상 쓰이지 않아요 (차트는 실제 기록 데이터 기준). 추후 다른 용도로 쓸 수 있도록 값은 계속 저장돼요.

Alert 조건 (실계산 · 읽기전용)

아래 값은 위 주기/컨디션/기록 데이터를 기준으로 실시간 계산돼요. 직접 편집할 수 없어요 — 발동시키려면 위 값(생리시작일·컨디션 등)을 조정하거나 실제로 기록/세션을 진행하세요.

Alert A · 황체기 진입-
Alert B · 증상 3일 누적-
Alert C · 오늘 컨디션 저하-
Alert D · 운동 공백(남성)-
SCREEN 20 · 개인정보 관리
사용자 프로필·온보딩·통계 일괄 편집
gender·주기·컨디션·온보딩정보·통계 시드·Alert 조건 표시. getD()로 실데이터 로드, setD()는 기존 값과 병합 저장(부분 필드만 덮어쓰지 않도록 수정). 적용 → 홈·통계·세션관리 즉시 반영.
오류
데이터가 없어요

기록을 시작하면 여기에 데이터가 쌓여요.
오늘의 첫 기록을 남겨볼까요?

SCREEN 21 · 에러 / 빈 상태
공통 처리
데이터 없음·네트워크 오류 공통. 재시도 CTA → 이전 화면. 빈 상태는 행동 유도.
커뮤니티
PMS 케어
황체기 때 이렇게 하면 좀 나아요
소피아 님 6월 27일
댓글 0
SCREEN 22 · 커뮤니티 상세
게시글 상세 · 좋아요 · 공유
posts[id] 기반 동적 렌더. 좋아요 토글(localStorage). 공유 바텀시트 4종. 댓글 목록 + 입력.
기능
좋아요: likes_set에 id 추가/제거, 카운트 표시
공유: 바텀시트 4종 (네이버·카카오·링크복사·더보기)
댓글: localStorage comments_[id] 배열
앱 권한 설정

더 나은 케어를 위해
권한이 필요해요

아래 권한은 맞춤 케어 서비스 제공에 사용돼요. 필요 시 설정에서 언제든 변경할 수 있어요.

알림 필수
황체기 감지 Alert, 일일 기록 리마인더를 보내드려요
카메라 선택
심박·안색 측정을 위한 카메라 접근이 필요해요
건강 데이터 선택
웨어러블 기기 연동으로 생체신호를 수집해요 (iOS HealthKit / 구글 헬스)
저장소 선택
세션 기록 및 데이터를 디바이스에 저장해요
웨어러블 연동 플로우

HealthKit · 구글 헬스 커넥트 연동 단계를 확인해보세요

연동 방법 보기
1
기기 확인
iOS: Apple Watch + HealthKit 앱
Android: Wear OS 기기 + 구글 헬스 커넥트 앱
2
건강 데이터 권한 허용
위 '건강 데이터' 권한을 허용하면
SomaX가 심박수·활동 데이터에 접근할 수 있어요
3
데이터 동기화
앱 실행 시 자동으로 최신 생체신호를 불러와요
배터리 절약을 위해 15분 간격으로 갱신돼요
4
황체기 감지 시작
생체신호 + 주기 데이터를 결합해
더 정확한 황체기 Alert를 받을 수 있어요
SCREEN 23 · 앱 권한 요청
디바이스 권한 · 웨어러블 연동 플로우
개인정보동의 다음 단계. 필수(알림) + 선택(카메라·건강데이터·저장소) 분리. 웨어러블 연동 4단계 바텀시트.
권한 항목
알림 [필수] — Alert, 리마인더
카메라 [선택] — 심박·안색 측정
건강 데이터 [선택] — HealthKit / 구글 헬스
저장소 [선택] — 데이터 로컬 저장
세션이 도움이 됐나요?
통증이 좀 나아졌나요?
지금 기분은 어떤가요?
오늘 강도는 어땠나요?