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 이미지 확정됨. 게시물별 타이틀·설명 규칙 확정 필요