dta-wed-app-web 감정 살피기 (Emotion Check) Flow 설계

버전: 1.0.0 작성일: 2026-02-12 상태: Draft 대상 앱: apps/dta-wed-app-web 치료 기반: CBT-E (Enhanced Cognitive Behavioral Therapy for Eating Disorders)

1. 개요

1.1 기능 목적

섭식장애(Eating Disorder) 환자를 위한 감정 기록 및 인지적 재구성 기능입니다. 사용자가 현재 느끼는 신체 감각을 감정으로 연결하고, 그 감정 속에 숨겨진 인지 왜곡(cognitive distortion)을 단계적으로 탐색한 뒤, 균형 잡힌 사고로 재구성하는 과정을 안내합니다.

1.2 핵심 Flow 요약

진입 CTA ("지금 그 감정에 대해 써 봐")
  │
  ▼
Step 1: 신체 감각 — "[부위] 에서 [감각] 이 느껴졌어."
  │
  ▼
Step 2: 감정 해석 — 9개 감정 중 단일 선택
  │
  ▼
Step 3: 성급한 결론 — 선택된 감정에 따라 옵션 동적 분기 + "그 외"
  │
  ▼
Step 4: 핵심 두려움 — 선택된 감정에 따라 옵션 동적 분기 + "그 외"
  │
  ▼
Step 5: 인지적 재구성 — 선택된 감정에 따라 옵션 동적 분기 + "그 외"
  │
  ▼
Step 6: 응원의 메시지 — 작성 여부 선택 → 자유 텍스트 입력 (최대 300자)

1.3 진입점 (Entry Point)

UI 형태: 노란색 배경의 배너/버튼
텍스트: "지금 그 감정에 대해 써 봐"
아이콘: 연필(편집) 아이콘 (우측)
위치: 채팅 인터페이스 내부 또는 일일 체크인 맥락에서 노출

2. 치료적 배경

2.1 CBT-E (Enhanced Cognitive Behavioral Therapy)

Christopher Fairburn이 개발한 섭식장애 전문 인지행동치료 프로토콜입니다.

각 Step이 CBT-E의 핵심 기법과 대응됩니다:

Flow Step	CBT-E 기법	치료 목표
Step 1: 신체 감각	Interoceptive Awareness	신체 감각 인식 훈련, 감각과 감정의 분리
Step 2: 감정 라벨링	Emotion Identification	모호한 감각을 구체적 감정으로 명명
Step 3: 성급한 결론	Automatic Thought Identification	인지 왜곡(jumping to conclusions) 포착
Step 4: 핵심 두려움	Core Belief Exploration	반복적 감정 뒤의 근본 신념/두려움 탐색
Step 5: 인지 재구성	Cognitive Restructuring	왜곡된 사고를 균형 잡힌 사고로 교정
Step 6: 응원 메시지	Self-Compassion / Compassionate Letter	자기연민 훈련

2.2 CBT-E 4대 유지요인과의 연관

이 Flow의 콘텐츠는 CBT-E가 정의하는 섭식장애 4대 유지요인을 직접적으로 다룹니다:

유지요인	Flow 내 반영
임상적 완벽주의	"최고가 못 되면 무가치한 사람이 될 거라는 두려움" (불안/질투 두려움 옵션)
핵심 낮은 자존감	"나는 무능력하고 무가치한 존재야" (슬픔 결론), 체형/외모 관련 인지 왜곡 전반
대인관계 어려움	"사람들에게 받아들여지지 않을 거라는 두려움" (다수 감정의 공통 두려움 옵션)
기분 불내성	신체 감각 → 감정 연결 단계 전체, "몸을 완벽히 통제하지 못하는 것에 대한 두려움"

3. 전체 Flow 구조

3.1 네비게이션

┌──────────────────────────────────────────┐
│  TopBar                                   │
│  ← (뒤로가기)    감정 살피기    × (닫기)    │
└──────────────────────────────────────────┘
│
├─ Step 1: 신체 감각 선택 ──── [다음] ────┐
│                                          │
├─ Step 2: 감정 해석 선택 ◄────────────────┘
│                            ──── [다음] ────┐
├─ Step 3: 성급한 결론 선택 ◄────────────────┘
│                            ──── [다음] ────┐
├─ Step 4: 핵심 두려움 선택 ◄────────────────┘
│                            ──── [다음] ────┐
├─ Step 5: 인지 재구성 선택 ◄────────────────┘
│                            ──── [다음] ────┐
├─ Step 6a: 메시지 작성 제안 ◄───────────────┘
│   ├─ "응, 써볼게" ──→ Step 6b: 메시지 작성
│   └─ "아니, 좀 더 생각해..." ──→ (종료 또는 이전)
│
└─ 완료

요소	동작
← (좌측)	이전 Step으로 돌아가기
"감정 살피기" (중앙)	화면 제목
× (우측)	전체 Flow 종료 (확인 팝업 필요 여부 검토)

3.3 분기 로직

Step 2에서 선택한 **감정(emotion)**이 Step 3, 4, 5의 콘텐츠를 결정하는 핵심 분기점입니다.

Step 2: 감정 선택 (emotion)
  │
  ├─→ Step 3 옵션: hastyConclusions[emotion]
  ├─→ Step 4 옵션: coreFears[emotion]
  └─→ Step 5 옵션: cognitiveReframes[emotion]

4. 화면별 상세 설계

4.1 Step 1 — 신체 감각 위치 선택

질문: "몸에서 어떤 감각이 느껴져?"

UI 구성: 문장 완성형 드롭다운 2개

┌─────────────────────────────────────┐
│  몸에서 어떤 감각이 느껴져?           │
│                                      │
│  ┌──────┐                            │
│  │ 선택 ▼│ 에서                      │
│  └──────┘                            │
│                                      │
│  ┌──────┐                            │
│  │ 선택 ▼│ 이 느껴졌어.              │
│  └──────┘                            │
│                                      │
│           [ 다음 ]                    │
└─────────────────────────────────────┘

드롭다운 1: 신체 부위 (bodyPart)

순서	값
1	가슴
2	어깨
3	팔
4	배
5	목
6	얼굴
7	다리

드롭다운 2: 감각 종류 (sensation)

순서	값
1	묵직함
2	불타는 느낌
3	공허함
4	울렁거림
5	조이는 느낌
6	소름끼침
7	오한

완성 문장 형식

"[bodyPart] 에서 [sensation] 이 느껴졌어."

예: "어깨 에서 조이는 느낌 이 느껴졌어."

"다음" 버튼 활성화 조건

두 드롭다운 모두 선택 완료 시 활성화 (비활성 → 활성)

4.2 Step 2 — 감정 해석 선택

질문: "그 감각을 어떤 감정으로 해석했는지 알려줘"

UI 구성: 3x3 Chip Grid

┌─────────────────────────────────────────┐
│  그 감각을 어떤 감정으로 해석했는지 알려줘 │
│                                          │
│  ┌──────┐ ┌──────┐ ┌──────┐             │
│  │ 수치심 │ │자기혐오│ │ 공포  │             │
│  └──────┘ └──────┘ └──────┘             │
│  ┌──────┐ ┌──────┐ ┌──────┐             │
│  │ 불안  │ │ 분노  │ │ 슬픔  │             │
│  └──────┘ └──────┘ └──────┘             │
│  ┌──────┐ ┌──────┐ ┌──────┐             │
│  │ 질투  │ │ 절망  │ │ 외로움 │             │
│  └──────┘ └──────┘ └──────┘             │
│                                          │
│           [ 다음 ]                        │
└─────────────────────────────────────────┘

감정 목록 (emotions)

행	열1	열2	열3
1	수치심 (shame)	자기혐오 (self-loathing)	공포 (fear)
2	불안 (anxiety)	분노 (anger)	슬픔 (sadness)
3	질투 (jealousy)	절망 (despair)	외로움 (loneliness)

선택 규칙

단일 선택만 가능 (radio button 동작)
선택된 칩: 노란색/골드 배경으로 하이라이트
미선택 칩: 흰색 배경 + 회색 테두리

"다음" 버튼 활성화 조건

감정 1개 선택 시 활성화 (노란색 배경)

4.3 Step 3 — 성급한 결론 (Hasty Conclusion)

화면 제목: 선택된 감정명 (크게 표시, 예: "수치심")

질문: "그 감정 속에서 네가 성급하게 내린 결론은 뭐였어?"

UI 구성: 카드 리스트 + "그 외" 입력

┌──────────────────────────────────────┐
│              수치심                    │
│                                       │
│  그 감정 속에서 네가 성급하게 내린       │
│  결론은 뭐였어?                        │
│                                       │
│  ┌──────────────────────────────┐    │
│  │ "내가 뭔가 실수했거나 눈치없는  │    │
│  │  얘길 한 게 분명해."           │    │
│  └──────────────────────────────┘    │
│  ┌──────────────────────────────┐    │
│  │ "이 중에 나 혼자만 촌스럽고    │    │
│  │  추할 거야."                   │    │
│  └──────────────────────────────┘    │
│  ┌──────────────────────────────┐    │
│  │ "이 사람은 지금 나를 귀찮게    │    │
│  │  여기는 게 분명해."            │    │
│  └──────────────────────────────┘    │
│  ┌──────────────────────────────┐    │
│  │ "지금 웃고 있는 사람들은 나를  │    │
│  │  비웃는 걸 거야."              │    │
│  └──────────────────────────────┘    │
│  ┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┐    │
│  │  그 외  (자유 텍스트 입력)      │    │
│  └ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┘    │
│                                       │
│             [ 다음 ]                   │
└──────────────────────────────────────┘

선택 규칙

단일 선택만 가능
사전 정의된 옵션 선택 또는 "그 외" 자유 입력 중 택 1
"그 외" 선택 시 텍스트 입력 영역 활성화

감정별 옵션 → 5.1 성급한 결론 매핑 테이블 참조

4.4 Step 4 — 핵심 두려움 (Core Fear)

화면 제목: 선택된 감정명 (크게 표시)

안내 문구 (파란색 배경 박스):

"지금 느낀 감정이 네가 자주 자동반사적으로 느끼는 감정이라면, 그 감정을 자꾸 일으키는 네 안의 두려움이 뭔지 생각해보자"

UI 구성: 카드 리스트 + "그 외" 입력

Step 3과 동일한 레이아웃 (카드형 단일 선택 + "그 외")

선택 규칙

단일 선택만 가능
사전 정의된 옵션 또는 "그 외" 자유 입력 중 택 1

감정별 옵션 → 5.2 핵심 두려움 매핑 테이블 참조

4.5 Step 5 — 인지적 재구성 (Cognitive Reframing)

화면 제목: 선택된 감정명 (크게 표시)

안내 문구:

"한 걸음 물러서서 상황을 다시 내려다 보자. 선불리 속아 넘어갈 뻔한 두려움의 문장을 고쳐 쓴다면 어떻게 바꿀 수 있을까?"

UI 구성: 카드 리스트 + "그 외" 입력

Step 3, 4와 동일한 레이아웃

선택 규칙

단일 선택만 가능
사전 정의된 옵션 또는 "그 외" 자유 입력 중 택 1

감정별 옵션 → 5.3 인지적 재구성 매핑 테이블 참조

4.6 Step 6 — 응원의 메시지

Step 6a: 메시지 작성 제안

화면 제목: "감정 살피기"

디자인 메모: 원본 디자인에 "제목 수정(오류)" 주석이 있음. 제목이 수정 필요할 수 있음.

안내 문구:

"너와 같은 감정으로 힘들어하는 친구가 있다면, 그 친구에게 어떤 말을 해줄 수 있을지 상상해 써보자.

지금 쓴 메시지는 언젠가 외롭고 힘들 때 다시 열어볼 수 있어.

응원의 메시지를 써볼래?"

선택지 (2개):

선택지	동작
"아니, 좀 더 생각해..."	Flow 종료 또는 이전 단계로
"응, 써볼게" (노란색 활성 버튼)	Step 6b로 이동

Step 6b: "응원의 메시지 쓰기" 화면

┌──────────────────────────────────────┐
│  ←       응원의 메시지 쓰기            │
│                                       │
│  ┌──────────────────────────────┐    │
│  │                               │    │
│  │  (자유 텍스트 입력 영역)        │    │
│  │                               │    │
│  │                               │    │
│  │                     14/300    │    │
│  └──────────────────────────────┘    │
│                                       │
│           [ 작성 완료 ]                │
│                                       │
│  ┌──────────────────────────────┐    │
│  │        (키보드)                │    │
│  └──────────────────────────────┘    │
└──────────────────────────────────────┘

속성	값
화면 제목	"응원의 메시지 쓰기"
입력 유형	Multi-line TextArea
글자 수 제한	최대 300자
글자 수 표시	우측 하단 "N/300" 형식
하단 버튼	"작성 완료"
네비게이션	← 뒤로가기만 (X 닫기 없음)

5. 감정별 동적 콘텐츠 매핑

Step 2에서 선택한 감정에 따라 Step 3, 4, 5의 옵션이 동적으로 결정됩니다.

5.1 성급한 결론 (hastyConclusions)

수치심 (shame)

순서	텍스트
1	"내가 뭔가 실수했거나 눈치없는 얘길 한 게 분명해."
2	"이 중에 나 혼자만 촌스럽고 추할 거야."
3	"이 사람은 지금 나를 귀찮게 여기는 게 분명해."
4	"지금 웃고 있는 사람들은 나를 비웃는 걸 거야."

자기혐오 (self-loathing)

순서	텍스트
1	"내 몸이 돼지 같고 역겨워."
2	"내 몸을 그냥 없애버리고 싶어, 쳐다보기도 싫어."
3	"나는 가까운 사람들에게 부담만 지우는, 아무 쓸모 없는 존재야."
4	"나라는 존재가 죽어 사라졌으면 좋겠어."

공포 (fear)

순서	텍스트
1	"내가 일을 망쳐서, 실망한 사람들이 날 달갑지 않게 생각할 거야."
2	"분명 비판이나 꼬집음을 당할 일이 생길거야."
3	"나는 지금 잘못된 결정을 내리고 있어서, 머잖아 후회할 일이 생길 거야."
4	"식사치료 때문에 살이 쪄서 '얼굴이 좋아졌네!' 같은 비웃음 섞인 말을 듣게 될 거야."

불안 (anxiety)

순서	텍스트
1	"내가 불안해 하는 걸 사람들이 눈치 챌까봐 무서워."
2	"괜히 내가 재미없는 말을 해서 분위기를 망가뜨릴까 봐 두려워."
3	"나의 상태를 다른 사람들이 알아챌까봐 무서워."
4	"내 모습은 너무 추해서 사람들 앞에 나갈 수 없어."
5	"사람들 속에서 기절할까 봐 두려워."
6	"지금 이 음식을 먹는 것만큼은 어떻게든 피할 수 있었으면 좋겠어."

분노 (anger)

순서	텍스트
1	"나는 무시당했어!"
2	"내 영역을 함부로 침범당했어!"
3	"저 사람은 나를 괴롭히려고 일부러 저러는 거야!"
4	"저 사람이 너무 싫어서 미치겠어!"
5	"나는 이용당하고 배신당했어!"

슬픔 (sadness)

순서	텍스트
1	"이런 삶을 살아가는 것에 회의감이 들어."
2	"가족들에게 미안할 뿐이야."
3	"무기력해서 아무것도 할 수 없어."
4	"나는 무능력하고 무가치한 존재야."

질투 (jealousy)

순서	텍스트
1	"다이어트를 하면서도 섭식장애에 걸리지 않는 사람도 있는데, 이건 너무 불공평해!"
2	"섭식장애로 똑같이 고생한다면, 차라리 깡마른 거식증 환자가 되고 싶어."
3	"부모님은 내 형제/자매만 자랑스럽게 여기시지."
4	"저 사람보다 마르고 성공한 사람이 되고 싶어."

절망 (despair)

순서	텍스트
1	"나는 섭식장애에서 벗어날 수 없을 거야."
2	"정신질환은 내가 평생 감수해야 하는 장애가 될 거야."
3	"나는 절대 다른 사람들처럼 평범한 삶을 살 수 없을 거야."
4	"나는 취직해서 내 힘으로 돈을 벌고 가족으로부터 독립할 수 없을 거야."
5	"죽는 것밖에 다른 대안은 없어."
6	"내 병을 치료할 수 있는 사람은 아무도 없어."
7	"반짝였던 시절은 이제 다시 오지 않을 거야."

외로움 (loneliness)

순서	텍스트
1	"아무도 나를 좋아하지 않아."
2	"내 마음을 이해해줄 사람은 이 세상에 없어."
3	"친구/동료들은 나를 불편해 하는 게 분명해."
4	"부모님은 차라리 내가 없었으면 하고 바라실 거야."
5	"아무도 나를 이해해 주지 못해."

5.2 핵심 두려움 (coreFears)

수치심 (shame)

순서	텍스트
1	사람들에게 받아들여지지 않을 거라는 두려움
2	사람들에게 호감을 얻지 못할 것에 대한 두려움
3	사람들에게 나쁜 평가를 받지 않을까 하는 두려움
4	사람들을 실망시키진 않을까 하는 두려움

자기혐오 (self-loathing)

순서	텍스트
1	사람들에게 받아들여지지 않을 거라는 두려움
2	사람들에게 호감을 얻지 못할 것에 대한 두려움
3	사람들에게 나쁜 평가를 받지 않을까 하는 두려움
4	사람들을 실망시키진 않을까 하는 두려움

공포 (fear)

순서	텍스트
1	사람들에게 받아들여지지 않을 거라는 두려움
2	사람들에게 호감을 얻지 못할 것에 대한 두려움
3	사람들에게 나쁜 평가를 받지 않을까 하는 두려움
4	사람들을 실망시키진 않을까 하는 두려움

불안 (anxiety)

순서	텍스트
1	사람들에게 받아들여지지 않을 거라는 두려움
2	사람들에게 호감을 얻지 못할 것에 대한 두려움
3	사람들에게 나쁜 평가를 받지 않을까 하는 두려움
4	사람들을 실망시키진 않을까 하는 두려움
5	최고가 못 되면 무가치한 사람이 될 거라는 두려움
6	몸을 완벽히 통제하지 못하는 것에 대한 두려움

분노 (anger)

순서	텍스트
1	타인에게 휘둘리거나 조종되는 것에 대한 두려움
2	타인에게 공격당하리라는 두려움
3	타인에게 인간적으로 존중받지 못할 것에 대한 두려움
4	내 자신의 정체성을 타인에 의해 점령당하진 않을까 하는 두려움

슬픔 (sadness)

순서	텍스트
1	사람들에게 받아들여지지 않을 거라는 두려움
2	사람들에게 호감을 얻지 못할 것에 대한 두려움
3	사람들에게 나쁜 평가를 받지 않을까 하는 두려움
4	사람들을 실망시키진 않을까 하는 두려움

질투 (jealousy)

순서	텍스트
1	열등한 위치에 놓이게 될 것에 대한 두려움
2	사람들에게 호감을 얻지 못할 것에 대한 두려움
3	최고가 못 되면 무가치한 사람이 될 거라는 두려움
4	내 몸을 완벽히 통제하지 못하는 것에 대한 두려움

절망 (despair)

순서	텍스트
1	성취, 변화, 회복을 짧은 시간 안에 이루지 못하면 모든 걸 망치고 말 거라는 두려움
2	사람들을 실망시키진 않을까 하는 두려움
3	나 자신이나 내 삶은 미래에도 지금과 달라지지 않으리라는 두려움
4	사람들에게 받아들여지지 못할 거라는 두려움

외로움 (loneliness)

순서	텍스트
1	사람들에게 받아들여지지 않을 거라는 두려움
2	사람들에게 호감을 얻지 못할 것에 대한 두려움
3	사람들에게 나쁜 평가를 받지 않을까 하는 두려움
4	사람들을 실망시키진 않을까 하는 두려움

5.3 인지적 재구성 (cognitiveReframes)

수치심 (shame)

순서	텍스트
1	"사람들이 무표정으로 대화한다고 해서 그들이 기분 나쁘다는 뜻이 아니야."
2	"오늘 찍은 사진을 나중에 본다면, 나도 똑같이 빛나고 예쁘구나 생각될 거야."
3	"이 사람은 내게 가능한 한 도움이 되는 얘길 해 주려고 신경을 쓰고 있구나!"
4	"타인의 기분이나 생각을 넘겨짚지 말자. 그들의 웃음엔 어떠한 악의도 담겨있지 않아."

자기혐오 (self-loathing)

순서	텍스트
1	"내게도 나만의 매력이 있어. 완벽하지 않은 주인공이 매력적인 법이야."
2	"내 몸이 꽤 건강한 편이고 내가 원하는 대로 움직여 준다는 건 감사한 일이야."
3	"나는 존재 자체로 소중해. 주변 사람들은 나에게 따뜻한 응원과 지지를 줄 거야."
4	"삶이라는 기회로 내가 무엇을 해 낼 수 있는지 지켜보자."

공포 (fear)

순서	텍스트
1	"나는 항상 꽤 괜찮은 정도로 일을 해 내잖아. 미리 걱정하진 말자."
2	"비판 받는다 해도 뭐 어때, 그걸 발판 삼아 내 약점을 보완해 나갈 기회가 남아 있어!"
3	"일이 기대와 달리 흘러가도 받아들여야지. 그저 현재에 충실해 최선을 다하면 돼!"
4	"'얼굴이 좋아 보인다'는 말은 생기 넘쳐 보인다는 얘기지. 건강하게 최고야!"

불안 (anxiety)

순서	텍스트
1	"대부분의 사람들은 타인의 감정을 굳이 꿰뚫어 보려고 하지 않아. 그 정도로 남에게 관심이 많지는 않거든."
2	"재미가 없다고 해서 사람들의 비호감을 사는 건 아니야."
3	"조금 더 편안하게 말하고 행동해도 괜찮아. 그게 내 모습이니까."
4	"실수를 발견하면 사람들은 그걸 들추고 비난하기보다는 도움을 주려 할거야. 그러고는 별 거 아니라고 생각할걸?"
5	"팔에 소름이 돋았다 찾아드는 것처럼 불안도 잠시 찾구첬다 사라질 거야."

분노 (anger)

순서	텍스트
1	"지금은 실망스럽지만, 나중에 다시 내 입장을 얘기해 보자."
2	"다른 사람들은 대개 나보다 둔감한걸. 기분은 좋지 않지만 어쩔 수 없지."
3	"불만이 있으면 분명히 말하면 돼. 그리고 협상을 하면 되지. 나는 어른이니까."
4	"모두를 사랑할 수는 없지. 내 감정을 자연스럽게 받아들이고 마음을 차분하게 먹자."
5	"세상은 불공평하고 사람들은 무심하다는 걸 받아들여야 해. 그렇지만 그 중에서도 희망은 반드시 있어."

슬픔 (sadness)

순서	텍스트
1	"뭔가를 배우는 데는 시간이 오래 걸릴 수밖에 없어! 나는 지금 어려운 과목을 배우고 있는 거야."
2	"다른 가족이 아팠다면 나는 최선을 다해 도움이 되려고 할 거야. 가족들도 지금 내게 그렇게 느끼고 있어."
3	"내가 오늘 고민한 것, 배우고 깨달은 것, 그 모든 것이 소중해. 이것들로 언젠가 나는 반짝이는 일을 해낼 수 있을 거야."
4	"지금도 이렇게 고민하고 반성하고 마음을 다잡는 나는, 누구보다 의미 있는 일을 하고 있는 중이야."

질투 (jealousy)

순서	텍스트
1	"누군가는 어쩌면 내가 상상치도 못한 이유로 나를 부러워하고 있을지 몰라."
2	"치료를 통해 호전이 가능하다는 건 정말 다행인 일이야. 나는 반드시 나아질 수 있어."
3	"부러움은 자연스럽고 평범한 감정이야. 누구나 타인을 부러워하고, 거꾸로 부러움을 사기도 하지."
4	"완벽하진 않지만 매력있는 사람이 되는 건 어때? 누구에게나 각자의 매력이 존재해."

절망 (despair)

순서	텍스트
1	"내 치료가 어떤 과정을 거치며 발전해 갈지 지켜보고 기록해 보자. 언젠가 기록을 돌아보면 내가 이겨냈다니, 싶은 순간이 올거야."
2	"정신질환명은 내가 지금 겪고 있는 일시적인 상황을 지칭하는 가제에 불과해. 상황은 언제든지 바뀔 수 있어."
3	"평범하고 지루한 삶이 무슨 의미가 있을까? 조금 위험하더라도 자유롭게 날아다니는 사람이 될래!"
4	"앞으로의 일은 아무도 알 수 없어. 한 시간 뒤에 무슨 일이 일어날지조차 우리는 모르잖아!"
5	"세상에 살아 있는 한, 나는 어디든 갈 수 있고 무엇이든 될 수 있어."
6	"내 병에 대해 가장 진실된 이야기를 할 수 있는 사람은 나 자신이 될 거야."

외로움 (loneliness)

순서	텍스트
1	"모두가 서로를 좋아하며 살아갈 순 없어. 나를 좋아해주고, 내가 좋아하는 몇몇 이들을 소중히 여기는 데에 신경쓰자."
2	"어딘가엔 분명 나와 밤새 이야기할만큼 마음이 잘 통하는 사람이 존재할 거야."
3	"다른 사람의 호감을 사는 데에 앞서 나 자신을 사랑하는 연습을 충분히 하는 게 우선이야!"
4	"서로 마음의 상처를 주고받는 순간도 있지만, 가족들은 분명 나를 잃고 싶지 않을 거야"
5	"타인이 나를 이해하지 못하는 건 어쩌면 당연한 일이야. 나 역시 내 스스로를 아직 잘 모르니까."

6. UI/UX 패턴

6.1 공통 레이아웃

구성 요소	설명
TopBar	← 뒤로가기 + "감정 살피기" 제목 + × 닫기
콘텐츠 영역	스크롤 가능한 메인 영역
하단 CTA	"다음" 버튼 (고정, 활성/비활성 토글)

6.2 컴포넌트 패턴

컴포넌트	사용 위치	설명
Dropdown Select	Step 1	단일 선택 드롭다운, 노란 배경 옵션 리스트
Chip Grid	Step 2	3x3 그리드, 단일 선택, 선택 시 골드 하이라이트
Selectable Card	Step 3, 4, 5, 6a	카드형 단일 선택, 선택 시 하이라이트
Free Text Card	Step 3, 4, 5	"그 외" 옵션, 점선 테두리, 텍스트 입력 활성화
Info Box	Step 4, 5	파란 배경의 안내 문구 박스
TextArea	Step 6b	다중 줄 텍스트 입력, 글자 수 카운터
Binary Choice	Step 6a	2개 선택지 (거절/수락)

6.3 상호작용 규칙

규칙	상세
단일 선택	Step 2~5 모두 하나의 옵션만 선택 가능 (radio 동작)
"다음" 활성화	필수 선택 완료 시에만 활성화 (노란색 배경)
"그 외" 입력	선택 시 텍스트 입력 필드 노출, 사전 정의 옵션과 상호 배타적
드롭다운	선택 시 노란색 배경의 목록 표시, 선택 후 자동 접힘

6.4 디자인 토큰

요소	스타일
감정명 제목	크고 굵은 텍스트 (Step 3~5 상단)
안내 문구	파란색 배경 박스 (Step 4, 5)
선택된 칩/카드	골드/노란색 배경
미선택 칩/카드	흰색 배경 + 회색 테두리
"그 외" 카드	점선 테두리
활성 "다음" 버튼	노란색 배경
비활성 "다음" 버튼	회색 텍스트

7. 데이터 모델

7.1 감정 기록 (EmotionCheckRecord)

interface EmotionCheckRecord {
  // Step 1: 신체 감각
  bodyPart: BodyPart;
  sensation: Sensation;

  // Step 2: 감정 해석
  emotion: Emotion;

  // Step 3: 성급한 결론
  hastyConclusion: {
    type: 'preset' | 'custom';
    presetIndex?: number;    // 사전 정의 옵션 인덱스
    customText?: string;     // "그 외" 직접 입력 텍스트
  };

  // Step 4: 핵심 두려움
  coreFear: {
    type: 'preset' | 'custom';
    presetIndex?: number;
    customText?: string;
  };

  // Step 5: 인지적 재구성
  cognitiveReframe: {
    type: 'preset' | 'custom';
    presetIndex?: number;
    customText?: string;
  };

  // Step 6: 응원 메시지
  encouragementMessage?: string;  // null이면 작성 거부

  // 메타데이터
  createdAt: Date;
  userId: string;
}

7.2 열거형 (Enums)

type BodyPart =
  | 'chest'      // 가슴
  | 'shoulder'   // 어깨
  | 'arm'        // 팔
  | 'stomach'    // 배
  | 'neck'       // 목
  | 'face'       // 얼굴
  | 'leg';       // 다리

type Sensation =
  | 'heaviness'      // 묵직함
  | 'burning'        // 불타는 느낌
  | 'emptiness'      // 공허함
  | 'nausea'         // 울렁거림
  | 'tightness'      // 조이는 느낌
  | 'goosebumps'     // 소름끼침
  | 'chills';        // 오한

type Emotion =
  | 'shame'           // 수치심
  | 'self_loathing'   // 자기혐오
  | 'fear'            // 공포
  | 'anxiety'         // 불안
  | 'anger'           // 분노
  | 'sadness'         // 슬픔
  | 'jealousy'        // 질투
  | 'despair'         // 절망
  | 'loneliness';     // 외로움

7.3 핵심 두려움 옵션 수 비교표

감정	성급한 결론	핵심 두려움	인지적 재구성
수치심	4개	4개	4개
자기혐오	4개	4개	4개
공포	4개	4개	4개
불안	6개	6개	5개
분노	5개	4개	5개
슬픔	4개	4개	4개
질투	4개	4개	4개
절망	7개	4개	6개
외로움	5개	4개	5개

Note: 모든 Step 3, 4, 5에는 위 옵션 외에 추가로 "그 외" 자유 입력 옵션이 항상 포함됩니다.

부록: 디자인 메모

항목	내용
Step 6a 제목	원본 디자인에 "제목 수정(오류)" 주석이 있음. 검토 필요.
Step 6b 네비게이션	← 뒤로가기만 있고 × 닫기 버튼 없음 (의도적인지 확인 필요)
두려움 옵션 차이	수치심/자기혐오/공포/슬픔/외로움은 동일한 4개 두려움 공유, 불안/분노/질투/절망은 고유 두려움 보유

목차​

1. 개요​

1.1 기능 목적​

1.2 핵심 Flow 요약​

1.3 진입점 (Entry Point)​

2. 치료적 배경​

2.1 CBT-E (Enhanced Cognitive Behavioral Therapy)​

2.2 CBT-E 4대 유지요인과의 연관​

3. 전체 Flow 구조​

3.1 네비게이션​

3.2 TopBar 구성​

3.3 분기 로직​

4. 화면별 상세 설계​

4.1 Step 1 — 신체 감각 위치 선택​

UI 구성: 문장 완성형 드롭다운 2개​

드롭다운 1: 신체 부위 (bodyPart)​

드롭다운 2: 감각 종류 (sensation)​

완성 문장 형식​

"다음" 버튼 활성화 조건​

4.2 Step 2 — 감정 해석 선택​

UI 구성: 3x3 Chip Grid​

감정 목록 (emotions)​

선택 규칙​

"다음" 버튼 활성화 조건​

4.3 Step 3 — 성급한 결론 (Hasty Conclusion)​

UI 구성: 카드 리스트 + "그 외" 입력​

선택 규칙​

감정별 옵션 → 5.1 성급한 결론 매핑 테이블 참조​

4.4 Step 4 — 핵심 두려움 (Core Fear)​

UI 구성: 카드 리스트 + "그 외" 입력​

선택 규칙​

감정별 옵션 → 5.2 핵심 두려움 매핑 테이블 참조​

4.5 Step 5 — 인지적 재구성 (Cognitive Reframing)​

UI 구성: 카드 리스트 + "그 외" 입력​

선택 규칙​

감정별 옵션 → 5.3 인지적 재구성 매핑 테이블 참조​

4.6 Step 6 — 응원의 메시지​

Step 6a: 메시지 작성 제안​

Step 6b: "응원의 메시지 쓰기" 화면​

5. 감정별 동적 콘텐츠 매핑​

5.1 성급한 결론 (hastyConclusions)​

수치심 (shame)​

자기혐오 (self-loathing)​

공포 (fear)​

불안 (anxiety)​

분노 (anger)​

슬픔 (sadness)​

질투 (jealousy)​

절망 (despair)​

외로움 (loneliness)​

5.2 핵심 두려움 (coreFears)​

수치심 (shame)​

자기혐오 (self-loathing)​

공포 (fear)​

불안 (anxiety)​

분노 (anger)​

슬픔 (sadness)​

질투 (jealousy)​

절망 (despair)​

외로움 (loneliness)​

5.3 인지적 재구성 (cognitiveReframes)​

수치심 (shame)​

자기혐오 (self-loathing)​

공포 (fear)​

불안 (anxiety)​

분노 (anger)​

슬픔 (sadness)​

질투 (jealousy)​

절망 (despair)​

외로움 (loneliness)​

6. UI/UX 패턴​

6.1 공통 레이아웃​

6.2 컴포넌트 패턴​

6.3 상호작용 규칙​

6.4 디자인 토큰​

7. 데이터 모델​

7.1 감정 기록 (EmotionCheckRecord)​

7.2 열거형 (Enums)​

7.3 핵심 두려움 옵션 수 비교표​

부록: 디자인 메모​

목차

1. 개요

1.1 기능 목적

1.2 핵심 Flow 요약

1.3 진입점 (Entry Point)

2. 치료적 배경

2.1 CBT-E (Enhanced Cognitive Behavioral Therapy)

2.2 CBT-E 4대 유지요인과의 연관

3. 전체 Flow 구조

3.1 네비게이션

3.2 TopBar 구성

3.3 분기 로직

4. 화면별 상세 설계

4.1 Step 1 — 신체 감각 위치 선택

UI 구성: 문장 완성형 드롭다운 2개

드롭다운 1: 신체 부위 (bodyPart)

드롭다운 2: 감각 종류 (sensation)

완성 문장 형식

"다음" 버튼 활성화 조건

4.2 Step 2 — 감정 해석 선택

UI 구성: 3x3 Chip Grid

감정 목록 (emotions)

선택 규칙

"다음" 버튼 활성화 조건

4.3 Step 3 — 성급한 결론 (Hasty Conclusion)

UI 구성: 카드 리스트 + "그 외" 입력

선택 규칙

감정별 옵션 → 5.1 성급한 결론 매핑 테이블 참조

4.4 Step 4 — 핵심 두려움 (Core Fear)

UI 구성: 카드 리스트 + "그 외" 입력

선택 규칙

감정별 옵션 → 5.2 핵심 두려움 매핑 테이블 참조

4.5 Step 5 — 인지적 재구성 (Cognitive Reframing)

UI 구성: 카드 리스트 + "그 외" 입력

선택 규칙

감정별 옵션 → 5.3 인지적 재구성 매핑 테이블 참조

4.6 Step 6 — 응원의 메시지

Step 6a: 메시지 작성 제안

Step 6b: "응원의 메시지 쓰기" 화면

5. 감정별 동적 콘텐츠 매핑

5.1 성급한 결론 (hastyConclusions)

수치심 (shame)

자기혐오 (self-loathing)

공포 (fear)

불안 (anxiety)

분노 (anger)

슬픔 (sadness)

질투 (jealousy)

절망 (despair)

외로움 (loneliness)

5.2 핵심 두려움 (coreFears)

수치심 (shame)

자기혐오 (self-loathing)

공포 (fear)

불안 (anxiety)

분노 (anger)

슬픔 (sadness)

질투 (jealousy)

절망 (despair)

외로움 (loneliness)

5.3 인지적 재구성 (cognitiveReframes)

수치심 (shame)

자기혐오 (self-loathing)

공포 (fear)

불안 (anxiety)

분노 (anger)

슬픔 (sadness)

질투 (jealousy)

절망 (despair)

외로움 (loneliness)

6. UI/UX 패턴

6.1 공통 레이아웃

6.2 컴포넌트 패턴

6.3 상호작용 규칙

6.4 디자인 토큰

7. 데이터 모델

7.1 감정 기록 (EmotionCheckRecord)

7.2 열거형 (Enums)

7.3 핵심 두려움 옵션 수 비교표

부록: 디자인 메모