Appearance
게시글(피드) 기능 PRD
Status: Released created: March 26, 2026 12:23 PM 앱/웹/스튜디오: 앱, 웹
1. 목표 및 배경
문제
- 현재 디렉터 프로필 페이지에는 에피소드 리스트만 존재하여, 디렉터와 플레이어 간 소통 채널이 부재
- 디렉터가 에피소드 제작 현황, 근황, 공지 등을 전달할 수 있는 공식적인 수단이 없음
- 플레이어가 좋아하는 디렉터와 교류할 방법이 에피소드 댓글 외에 없어, 팔로우 동기 및 재방문 동기가 약함
아이디어
- 모든 유저(디렉터/플레이어)의 프로필 페이지에 피드 기능을 추가하여, 텍스트·이미지·링크가 포함된 게시물을 작성하고 소통할 수 있는 공간을 마련
가설 및 목표
- 디렉터가 피드를 통해 제작 현황, 공지, 비하인드 등을 공유하면, 디렉터-플레이어 간 소통 빈도가 증가할 것이다.
- 목표: 피드가 있는 디렉터 프로필의 댓글/좋아요 인터랙션 수 측정
- 소통 빈도 증가가 팔로우 전환율 증가로 이어질 것이다.
- 목표: 피드 도입 전후 팔로우 전환율 비교
- 팔로우 증가 및 피드 알림을 통해 DAU/리텐션이 개선될 것이다.
- 목표: D1/D7 리텐션 변화 추적
2. 타깃 사용자
- 디렉터: 에피소드 제작 현황 공유, 팬과의 소통, 공지/이벤트 안내
- 플레이어: 좋아하는 디렉터와 소통, 감상/응원 표현, 자신의 프로필에서도 글 작성
3. 핵심 기능 요구사항
3.1 게시물 작성 (에디터)
에디터 UI: 리치텍스트 에디터 (WYSIWYG)
- 리치텍스트 에디터 라이브러리(Tiptap 등) 기반의 비주얼 에디터
- 마크다운 문법을 유저에게 노출하지 않음
- 내부 저장 포맷: 구조화된 JSON 블록 (에디터 라이브러리의 JSON 포맷 활용, 개발팀과 협의)
지원 서식 및 콘텐츠 유형
| 유형 | 설명 | 에디터 조작 방식 |
|---|---|---|
| 텍스트 | 본문 텍스트 입력. 줄바꿈 지원 | 직접 입력 |
| 볼드 | 텍스트 굵게 강조 | 텍스트 선택 → 툴바 B 버튼 또는 Ctrl/Cmd+B |
| 이미지 | 텍스트 사이에 인라인 삽입 | 툴바 이미지 버튼 → 파일 선택 → 커서 위치에 삽입 |
| 링크 | 텍스트 또는 이미지에 하이퍼링크 삽입 | 텍스트/이미지 선택 → 툴바 링크 버튼 → URL 입력 |
- 지원하지 않는 서식 (MVP): 헤딩, 이탤릭, 취소선, 코드블록, 인용, 리스트 등
- 추후 필요 시 툴바 버튼 추가만으로 확장 가능 (라이브러리 기반이므로)볼URL
에디터 제약
- 글자수 제한: 2,000자 (raw 마크다운 글자수 기준)
- 줄바꿈은 글자수에 카운트하지 않음
- 이모지는 사용자에게 보이는 글자 단위(grapheme cluster) 기준 1자로 카운트
- 이미지 업로드 제한: 개수 제한 없음, 1장당 최대 10MB, 허용 포맷: JPG, PNG, WebP, GIF, 해상도 제한 없음
- 최소 작성 조건: 텍스트 1자 이상 또는 이미지 1장 이상 (콘텐츠가 하나라도 있으면 게시 가능. 텍스트 없이 이미지만, 텍스트 없이 링크만도 허용)
- 이미지 업로드 진행 중: 게시 버튼 비활성화
- 작성 중 이탈(뒤로가기/모달 닫기): 임시저장 없음. 이탈 확인 다이얼로그 표시 ("작성 중인 내용이 사라집니다. 나가시겠습니까?")
에디터 UI 구성
- 텍스트 입력 영역 (자동 높이 확장)
- 하단 또는 인라인 툴바 (노출 버튼 3종):
- B 볼드 → 선택한 텍스트를 굵게
- 📷 이미지 삽입 → 커서 위치에 이미지 인라인 삽입
- 🔗 링크 삽입 → 텍스트/이미지 선택 후 URL 입력
- 글자수 카운터 (0 / 2,000)
- [게시] 버튼
화면 예시
[이미지 누락: image.png]%20%EA%B8%B0%EB%8A%A5%20PRD/image.png)
[이미지 누락: image.png]%20%EA%B8%B0%EB%8A%A5%20PRD/image%201.png)
3.2 게시물 CRUD
| 기능 | 설명 |
|---|---|
| 작성 | 본인 프로필 페이지에서 "글쓰기" 버튼 → 에디터 모달/시트 오픈 → 작성 후 게시 |
| 읽기 | 해당 유저 프로필 페이지의 "피드" 탭에서 게시물 목록 조회 (최신순) |
| 수정 | 본인 게시물의 더보기(⋯) 메뉴 → 수정 → 에디터 모달에 기존 내용 로드 → 재게시 |
| 삭제 | 본인 게시물의 더보기(⋯) 메뉴 → 삭제 → 확인 다이얼로그 → 삭제 처리 |
- 수정 시 "수정됨" 표시 있음
- 삭제 시 해당 게시물의 댓글도 함께 삭제
3.3 피드 노출
- 노출 위치: 각 유저의 프로필 페이지 내 "피드" 탭
- 별도의 통합 피드(홈 피드, 팔로잉 피드 등)는 MVP에서 미포함
- 프로필 페이지 진입 시 기본 탭: 에피소드
- 피드 게시물이 0개인 유저의 프로필에서도 피드 탭 노출
- 정렬: 최신순 (기본)
- 페이지네이션: 무한 스크롤
- 게시물 시간 표시 형식: 1분 미만 → "방금" / 1분~59분 → "N분 전" / 1시간~23시간 → "N시간 전" / 1일~31일 → "N일 전" / 32일 이상 → "YYYY.MM.DD"
- Empty State:
- 본인 프로필: "첫 번째 피드를 작성해보세요" + [글쓰기] CTA 버튼
- 타인 프로필: "아직 작성된 피드가 없습니다"
3.4 인터랙션
좋아요
- 게시물에 좋아요/좋아요 취소 토글
- 좋아요 수 표시
- 표시 포맷: 9,999까지 숫자 표시 / 이후 1만+ / 10만+ / 100만+ (만 단위)
- 좋아요 누른 유저 목록 조회: 미지원
댓글/대댓글
- 게시물 하단에 댓글 입력 영역
- 대댓글 지원 (1depth까지)
- 댓글 글자수 제한: 1,000자
- 댓글 지원 서식: 텍스트 + 이미지 (기존 댓글 기능과 동일)
- 댓글 수 표시
- 댓글 기본 정렬: 인기순 (좋아요 수 + 대댓글 수), 최신순으로 필터 변경 가능
- 댓글 목록 페이지네이션: 무한 스크롤
- 댓글 좋아요 지원
- 댓글/대댓글 수정, 삭제 가능 (본인 작성분)
- 삭제된 댓글에 대댓글이 있는 경우: 댓글 내용을 "삭제된 댓글입니다"로 대체 표시, 대댓글은 유지
- 댓글/대댓글 신고 가능
공유
- 게시물 공유 기능 (딥링크 또는 URL 복사)
- 공유 시 OG 메타데이터: 공통 OG 이미지 사용, 게시물별 타이틀·설명 규칙 추후 확정 필요
3.5 신고/차단
| 대상 | 기능 |
|---|---|
| 게시물 | 더보기(⋯) 메뉴 → 신고 (사유 카테고리 없음, 단순 신고. 기존 댓글 신고와 동일 방식) |
| 댓글 | 더보기(⋯) 메뉴 → 신고 (사유 카테고리 없음, 단순 신고. 기존 댓글 신고와 동일 방식) |
| 유저 차단 | 댓글에서 유저 차단 시 해당 유저의 게시물/댓글이 비노출 |
- 신고 누적 처리: MVP에서 미포함 (자동 숨김·관리자 검토 없음)
3.6 푸시 알림
| 알림 유형 | 발생 조건 | 수신자 | 내용 | 랜딩 | 분석 라벨 |
|---|---|---|---|---|---|
| 새 피드 알림 | 팔로우 중인 유저가 새 피드 게시 | 팔로워 | title: {user} 님이 새로운 게시글을 올렸어요 🆕 | ||
| body: 어떤 내용인지 확인하러 갈까요? | 해당 게시글 | ||||
(post/:id) | post_new | ||||
| 피드 댓글 알림 | 내 피드 게시물에 댓글 작성됨 | 게시물 작성자 | title: 내 게시글에 새로운 댓글이 달렸어요 💬 | ||
| body: 어떤 내용인지 확인하러 갈까요? | 해당 게시글 | ||||
(post/:id) | post_comment | ||||
| 피드 좋아요 알림 | 내 피드 게시물에 좋아요 | 게시물 작성자 | title: 누군가 내 게시글을 좋아했어요 ❤️ | ||
| body: 어떤 게시글을 좋아했는지 확인해보세요. | 해당 게시글 | ||||
(post/:id) | post_like | ||||
| 댓글 좋아요 알림 | 내가 피드에 단 댓글에 좋아요 | 댓글 작성자 | title: 누군가 내 댓글을 좋아했어요 ❤️ | ||
| body: {user}님이 내 댓글에 공감했어요. | 해당 게시글 | ||||
(post/:id) | post_comment_like | ||||
| 대댓글 알림 | 내가 피드에 단 댓글에 대댓글 작성됨 | 댓글 작성자 | title: 내 댓글에 새로운 댓글이 달렸어요 💬 | ||
| body: 어떤 내용인지 확인하러 갈까요? | 해당 게시글 | ||||
(post/:id) | post_comment_comment |
- 발송 방식: 건당 실시간 발송 (그룹핑·딜레이 없음)
- 알림 탭 시 이동 목적지: 해당 게시물 상세 화면
- 개별 알림 설정 on/off: MVP 미포함
4. 사용자 플로우
4.1 게시물 작성 플로우
- 유저가 본인 프로필 페이지 진입 → "피드" 탭 선택
- "글쓰기" 버튼 클릭 → 에디터 모달 오픈
- 텍스트 입력, 필요 시 이미지 삽입/링크 삽입
- 글자수 확인 후 [게시] 버튼 클릭
- 게시물이 피드 탭 최상단에 노출
- 팔로워에게 새 피드 푸시 알림 발송
4.2 게시물 소비 플로우
- 플레이어가 디렉터(또는 다른 유저) 프로필 페이지 방문 → "피드" 탭 선택
- 게시물 목록을 스크롤하며 탐색 (무한 스크롤)
- 게시물에 좋아요, 댓글/대댓글 작성, 공유 가능
- 댓글 정렬 필터로 최신순/인기순 전환
4.3 알림 → 재방문 플로우
- 팔로워가 "○○님이 새 피드를 올렸어요" 푸시 수신 (문구 추후 확정)
- 푸시 탭 → 해당 디렉터 프로필의 피드 게시물로 이동
- 게시물 확인 후 좋아요/댓글 등 인터랙션
5. 에러 처리 및 예외 상황
| 상황 | 처리 |
|---|---|
| 글자수 2,000자 초과 | 입력 제한 또는 게시 버튼 비활성화 + 초과 안내 |
| 이미지 업로드 실패 | 에러 토스트 표시, 재시도 유도 |
| 이미지 용량/포맷 초과 | 업로드 시점에 에러 메시지 표시 |
| 삭제된 게시물 접근 (딥링크 등) | "삭제된 게시물입니다" 안내 표시 |
| 차단된 유저의 게시물 | 해당 유저의 모든 게시물/댓글 비노출 |
| 신고 누적 게시물 | (미정 — 자동 숨김 기준, 관리자 검토 프로세스) |
| 비로그인 유저 | 피드 열람 불가 (로그인 필요). 공유 링크로 접근한 비로그인 유저: 웹 → 로그인 화면으로 이동 / 앱 미설치 → 앱스토어·플레이스토어로 이동 / 앱 설치됨 → 앱 로그인 화면으로 이동 |
| 탈퇴/제재 유저 | 해당 유저의 프로필 자체 접근 불가 (게시물·댓글 별도 처리 불필요) |
| 네트워크 에러 | 게시/수정/삭제 실패 시 재시도 안내 |
6. 데이터 분석
핵심 지표
- 피드 작성률: 피드를 1회 이상 작성한 유저 비율 (디렉터/플레이어 구분)
- 피드 인터랙션율: 피드 조회 대비 좋아요/댓글/공유 비율
- 팔로우 전환율: 피드 조회 → 팔로우 전환율 (피드 도입 전후 비교)
- 리텐션 임팩트: 피드 인터랙션 유저 vs 비인터랙션 유저의 D1/D7 리텐션 비교
- 푸시 → 재방문율: 피드 관련 푸시 수신 후 앱 진입 비율
로깅 이벤트
| 타입 | 이름 | 용도 | 파라미터 | 비고 |
|---|---|---|---|---|
| Event | view_profile_feed_tab | 프로필 피드 탭 진입 | profile_user_id, is_own_profile, entry_source | |
| Event | click_feed_write | 글쓰기 버튼 클릭 | ||
| Event | publish_feed_post | 게시물 게시 완료 | post_id, has_image, has_link, has_bold, text_length | |
| Event | edit_feed_post | 게시물 수정 완료 | post_id | |
| Event | delete_feed_post | 게시물 삭제 | post_id | |
| Event | click_feed_like | 게시물 좋아요 클릭 | post_id, action: 'like' | 'unlike' |
~~submit_feed_comment~~ | post_comment로 갈음 | |||
| Event | edit_feed_comment | 댓글 수정 | post_id, comment_id | |
| Event | delete_feed_comment | 댓글 삭제 | post_id, comment_id | |
| Event | click_feed_comment_like | 댓글 좋아요 클릭 | post_id, comment_id, action: 'like' | 'unlike' |
| Event | click_feed_share | 게시물 공유 클릭 | post_id |
7. 기술 구현 참고사항
개발팀 논의를 위한 참고 자료. 최종 구현 방식은 개발팀과 협의하여 결정.
에디터 (React Native 앱 + 웹)
앱 (React Native)
@10play/tentap-editor라이브러리 활용 권장- Tiptap을 React Native용으로 래핑한 라이브러리
- 내부적으로 WebView 위에 Tiptap을 올리고, React Native 네이티브 브릿지로 연결
- 네이티브 키보드, 툴바와 자연스럽게 동작
- 작동 방식:
- 에디터 영역: WebView 안에서 Tiptap 렌더링
- 툴바(볼드, 이미지, 링크): 네이티브 컴포넌트로 구현
- 브릿지를 통해 "볼드 토글", "이미지 삽입" 등 명령을 WebView ↔ RN 간 교환
- 저장 시 Tiptap의 JSON 포맷을 그대로 추출
웹
- Tiptap 에디터 직접 사용 (React 환경)
저장 포맷 통일
- 앱/웹 모두 동일한 Tiptap JSON 포맷으로 저장
- 웹/앱 간 게시물 호환성 보장, 에디터 코어 로직 한 벌 유지
게시물 뷰어 (읽기)
| 환경 | 권장 방식 | 이유 |
|---|---|---|
| 웹 | Tiptap JSON → HTML 변환 → DOM 렌더링 | 에디터와 일관된 렌더링 |
| 앱 (RN) | Tiptap JSON → 파싱 → RN 네이티브 컴포넌트(Text, Image 등)로 렌더링 | 피드 목록에서 게시물 다수 스크롤 시 성능 고려. 각 게시물마다 WebView를 띄우면 무거워지므로 네이티브 렌더링 권장 |
- 에디터는 WebView(tentap), 뷰어는 네이티브 렌더링 조합이 가장 현실적
- 뷰어용 JSON → RN 컴포넌트 변환 유틸리티 구현 필요 (볼드, 이미지, 링크 3종만 지원하므로 복잡도 낮음)
8. 미정 사항 (추후 결정 필요)
| 항목 | 설명 |
|---|---|
| 게시물 고정(핀) | MVP 미포함. 추후 디렉터가 대표 게시물을 프로필 상단에 고정하는 기능 검토 |
| 통합 피드 | MVP 미포함. 추후 홈에 팔로잉 피드 탭 추가 검토 |
| 에디터 저장 포맷 상세 | 리치텍스트 에디터(Tiptap 등)의 JSON 포맷 사용 확정. 구체적 스키마는 개발팀과 협의 |
| 공유 OG 메타데이터 | 공통 OG 이미지 확정됨. 게시물별 타이틀·설명 규칙 확정 필요 |