Skip to content

게시글(피드) 기능 PRD ​

Status: Released created: March 26, 2026 12:23 PM 앱/웹/스튜디오: 앱, 웹

1. 목표 및 배경 ​

문제 ​

  • 현재 디렉터 프로필 페이지에는 에피소드 리스트만 존재하여, 디렉터와 플레이어 간 소통 채널이 부재
  • 디렉터가 에피소드 제작 현황, 근황, 공지 등을 전달할 수 있는 공식적인 수단이 없음
  • 플레이어가 좋아하는 디렉터와 교류할 방법이 에피소드 댓글 외에 없어, 팔로우 동기 및 재방문 동기가 약함

아이디어 ​

  • 모든 유저(디렉터/플레이어)의 프로필 페이지에 피드 기능을 추가하여, 텍스트·이미지·링크가 포함된 게시물을 작성하고 소통할 수 있는 공간을 마련

가설 및 목표 ​

  1. 디렉터가 피드를 통해 제작 현황, 공지, 비하인드 등을 공유하면, 디렉터-플레이어 간 소통 빈도가 증가할 것이다.
    • 목표: 피드가 있는 디렉터 프로필의 댓글/좋아요 인터랙션 수 측정
  2. 소통 빈도 증가가 팔로우 전환율 증가로 이어질 것이다.
    • 목표: 피드 도입 전후 팔로우 전환율 비교
  3. 팔로우 증가 및 피드 알림을 통해 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 게시물 작성 플로우 ​

  1. 유저가 본인 프로필 페이지 진입 → "피드" 탭 선택
  2. "글쓰기" 버튼 클릭 → 에디터 모달 오픈
  3. 텍스트 입력, 필요 시 이미지 삽입/링크 삽입
  4. 글자수 확인 후 [게시] 버튼 클릭
  5. 게시물이 피드 탭 최상단에 노출
  6. 팔로워에게 새 피드 푸시 알림 발송

4.2 게시물 소비 플로우 ​

  1. 플레이어가 디렉터(또는 다른 유저) 프로필 페이지 방문 → "피드" 탭 선택
  2. 게시물 목록을 스크롤하며 탐색 (무한 스크롤)
  3. 게시물에 좋아요, 댓글/대댓글 작성, 공유 가능
  4. 댓글 정렬 필터로 최신순/인기순 전환

4.3 알림 → 재방문 플로우 ​

  1. 팔로워가 "○○님이 새 피드를 올렸어요" 푸시 수신 (문구 추후 확정)
  2. 푸시 탭 → 해당 디렉터 프로필의 피드 게시물로 이동
  3. 게시물 확인 후 좋아요/댓글 등 인터랙션

5. 에러 처리 및 예외 상황 ​

상황처리
글자수 2,000자 초과입력 제한 또는 게시 버튼 비활성화 + 초과 안내
이미지 업로드 실패에러 토스트 표시, 재시도 유도
이미지 용량/포맷 초과업로드 시점에 에러 메시지 표시
삭제된 게시물 접근 (딥링크 등)"삭제된 게시물입니다" 안내 표시
차단된 유저의 게시물해당 유저의 모든 게시물/댓글 비노출
신고 누적 게시물(미정 — 자동 숨김 기준, 관리자 검토 프로세스)
비로그인 유저피드 열람 불가 (로그인 필요). 공유 링크로 접근한 비로그인 유저: 웹 → 로그인 화면으로 이동 / 앱 미설치 → 앱스토어·플레이스토어로 이동 / 앱 설치됨 → 앱 로그인 화면으로 이동
탈퇴/제재 유저해당 유저의 프로필 자체 접근 불가 (게시물·댓글 별도 처리 불필요)
네트워크 에러게시/수정/삭제 실패 시 재시도 안내

6. 데이터 분석 ​

핵심 지표 ​

  1. 피드 작성률: 피드를 1회 이상 작성한 유저 비율 (디렉터/플레이어 구분)
  2. 피드 인터랙션율: 피드 조회 대비 좋아요/댓글/공유 비율
  3. 팔로우 전환율: 피드 조회 → 팔로우 전환율 (피드 도입 전후 비교)
  4. 리텐션 임팩트: 피드 인터랙션 유저 vs 비인터랙션 유저의 D1/D7 리텐션 비교
  5. 푸시 → 재방문율: 피드 관련 푸시 수신 후 앱 진입 비율

로깅 이벤트 ​

타입이름용도파라미터비고
Eventview_profile_feed_tab프로필 피드 탭 진입profile_user_id, is_own_profile, entry_source
Eventclick_feed_write글쓰기 버튼 클릭
Eventpublish_feed_post게시물 게시 완료post_id, has_image, has_link, has_bold, text_length
Eventedit_feed_post게시물 수정 완료post_id
Eventdelete_feed_post게시물 삭제post_id
Eventclick_feed_like게시물 좋아요 클릭post_id, action: 'like''unlike'
Event~~submit_feed_comment~~댓글/대댓글 작성post_id, comment_id, is_replypost_comment로 갈음
Eventedit_feed_comment댓글 수정post_id, comment_id
Eventdelete_feed_comment댓글 삭제post_id, comment_id
Eventclick_feed_comment_like댓글 좋아요 클릭post_id, comment_id, action: 'like''unlike'
Eventclick_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 이미지 확정됨. 게시물별 타이틀·설명 규칙 확정 필요