Files

Yu Sung 5059cd4a40 feat(creator): 본인 채널 액션 기반을 추가한다

2026-07-03 21:05:40 +09:00

12 KiB

Raw Permalink Blame History

PRD: 크리에이터 채널 본인 진입 플로팅 버튼

1. Overview

크리에이터 채널에 크리에이터 본인이 입장한 경우, 팔로우 대상 사용자에게 필요한 title bar 액션을 숨기고 홈 탭 우측 하단에 콘텐츠 생성용 floating button을 제공한다. Floating button은 Figma 디자인의 닫힘/열림 상태와 spring interaction animation을 반영하며, 열림 상태에서는 전체 화면 dim과 4개 버튼을 표시한다.

기존 크리에이터 채널 홈 구현(docs/20260701_크리에이터_채널_홈/prd.md) 위에 추가하는 요구사항이다.

Figma 참조:

닫힘 상태 floating button: 665:19092, https://www.figma.com/design/HmN1yNdJ3EIpqknFL0Hkab/-%EA%B3%B5%EC%9C%A0%EC%9A%A9-%EB%B3%B4%EC%9D%B4%EC%8A%A4%EC%98%A8-UI-UX-%EA%B8%B0%ED%9A%8D%EB%AC%B8%EC%84%9C?node-id=665-19092&m=dev
열림 상태 floating menu: 665:19223, https://www.figma.com/design/HmN1yNdJ3EIpqknFL0Hkab/-%EA%B3%B5%EC%9C%A0%EC%9A%A9-%EB%B3%B4%EC%9D%B4%EC%8A%A4%EC%98%A8-UI-UX-%EA%B8%B0%ED%9A%8D%EB%AC%B8%EC%84%9C?node-id=665-19223&m=dev

2. Problem

현재 크리에이터 채널 title bar는 본인 채널에 입장한 경우에도 팔로우/알림/더보기 액션을 표시할 수 있다.
크리에이터 본인은 자신의 채널 홈에서 커뮤니티 글, 오디오 콘텐츠, 라이브 생성으로 빠르게 이동해야 하지만, 현재 홈 탭 안에는 해당 작성/생성 진입점이 없다.
Floating menu는 화면 전체 dim, 버튼 배치, 열림/닫힘 animation이 함께 동작해야 하므로 기존 홈 섹션에 단순 버튼을 추가하는 방식만으로는 Figma 상태를 충족하기 어렵다.

3. Goals

크리에이터 본인이 자신의 채널에 입장했는지 판별한다.
본인 채널일 때 title bar 우측의 팔로우 버튼, 알림 버튼, 더보기 버튼을 보이지 않게 한다.
본인 채널이고 선택된 탭이 홈일 때만 홈 탭 우측 하단에 floating button을 표시한다.
Floating button 터치 시 Figma 열림 상태처럼 화면 전체 dim과 세 개 생성 액션 버튼, 닫기 버튼을 표시한다.
Floating menu 열림/닫힘에는 SwiftUI spring animation을 적용한다.
버튼 asset은 지정된 ic_new_upload_community_post, ic_new_upload_audio, ic_new_create_live, ic_new_x_black을 사용한다.
각 생성 액션은 기존 앱 라우팅을 우선 재사용한다.
본인 채널이 아닌 경우 기존 크리에이터 채널 홈의 팔로우/알림/더보기/탭 동작을 유지한다.

4. Non-Goals

크리에이터 권한/역할을 서버에서 새로 조회하는 API를 추가하지 않는다.
커뮤니티 글 작성, 오디오 콘텐츠 업로드, 라이브 생성 화면 자체를 새로 구현하지 않는다.
Floating button을 홈 탭 외 라이브, 오디오, 시리즈, 커뮤니티, 팬Talk, 후원 탭에 표시하지 않는다.
Floating menu 버튼에 텍스트 라벨을 추가하지 않는다. Figma 기준 아이콘 버튼만 표시한다.
Figma localhost asset URL을 앱 코드에 직접 사용하지 않는다.
Pods/**, generated/**, build/**는 수정하지 않는다.

5. Target Users

자신의 크리에이터 채널에 입장해 채널 콘텐츠를 관리하거나 새 콘텐츠를 등록하려는 크리에이터

6. User Stories

크리에이터는 본인 채널에 들어갔을 때 자신을 팔로우하는 버튼을 보지 않고 싶다.
크리에이터는 채널 홈에서 floating button을 눌러 작성/생성 액션을 빠르게 펼치고 싶다.
크리에이터는 펼쳐진 floating menu에서 커뮤니티 글 작성, 오디오 콘텐츠 업로드, 라이브 생성 중 하나를 선택하고 싶다.
크리에이터는 dim 영역이나 닫기 버튼으로 floating menu를 닫고 싶다.

7. Core Requirements

7.1 본인 채널 판별

본인 채널 여부는 CreatorChannelHomeResponse.creator.creatorId == UserDefaults.int(forKey: .userId) 기준으로 판별한다.
API 응답이 아직 없거나 실패 placeholder 상태이면 본인 채널로 간주하지 않는다.
로그인하지 않은 상태에서는 UserDefaults.int(forKey: .userId)가 유효하지 않으므로 본인 채널로 간주하지 않는다.
본인 채널 판별값은 CreatorChannelView에서 title bar와 floating menu 표시 조건에 함께 사용한다.

7.2 Title Bar 본인 채널 상태

본인 채널이 아닌 경우 기존 title bar 동작을 유지한다.
본인 채널이면 title bar 우측의 팔로우 버튼, 알림 버튼, 더보기 버튼을 모두 표시하지 않는다.
본인 채널이어도 back 버튼과 scroll progress에 따른 title bar 배경/닉네임 노출은 기존처럼 유지한다.
우측 버튼이 사라져도 닉네임이 back 버튼 영역과 겹치지 않아야 한다.
팔로우/알림 mutation 로직은 본인 채널에서는 호출되지 않아야 한다.

7.3 홈 탭 Floating Button 닫힘 상태

본인 채널이고 selectedTab == .home일 때만 표시한다.
버튼 위치는 화면 우측 하단이며 Figma 기준 bottom/right 14pt를 우선한다.
버튼은 원형, 배경색은 #00BDF7 또는 기존 디자인 토큰 중 동일한 soda blue 계열을 사용한다.
버튼 크기는 Figma의 38pt icon + 14pt padding 구조를 기준으로 한다.
닫힘 상태 plus icon은 기존 asset ic_plus_no_bg를 사용한다.
앱 하단 player가 표시되는 경우 floating button과 겹치는지 확인하고, 기존 LiveView floating button처럼 필요한 경우 player 표시 상태를 고려한다.

Floating button 터치 시 menu가 열린다.
열림 상태에서는 화면 전체에 black dim opacity 0.4를 적용한다.
dim은 status bar와 title bar를 포함한 전체 화면 위에 표시한다.
dim 영역 탭 또는 닫기 버튼 탭으로 menu를 닫는다.
버튼은 우측 하단에 세로로 표시하며 아래에서 위 순서로 닫기, 라이브 만들기, 오디오 콘텐츠 올리기, 커뮤니티 글 올리기를 배치한다.
사용자에게 보이는 위치 기준 위에서부터 아래 순서는 다음과 같다.
1. 커뮤니티 글 올리기: ic_new_upload_community_post
2. 오디오 콘텐츠 올리기: ic_new_upload_audio
3. 라이브 만들기: ic_new_create_live
4. 닫기: ic_new_x_black
커뮤니티 글 올리기, 오디오 콘텐츠 올리기 버튼 배경은 Figma의 soda blue 계열을 사용한다.
라이브 만들기 버튼 배경은 Figma의 darker soda blue 계열을 사용한다.
닫기 버튼 배경은 white를 사용한다.

7.5 Interaction Animation

Floating menu 열림/닫힘 animation은 SwiftUI interpolatingSpring 또는 동등한 spring animation을 사용한다.
Figma 수치 기준:
- Mass: 1
- Stiffness: 256
- Damping: 24
버튼들은 열림 상태에서 아래 기준 위치에서 위로 펼쳐지는 형태로 보이게 한다.
닫힘 상태로 전환 시 버튼들은 닫기 버튼 위치로 수렴하거나 opacity/scale이 줄어드는 형태로 정리한다.
animation 중 중복 터치로 상태가 꼬이지 않도록 isCreatorActionMenuPresented 단일 상태를 기준으로 렌더링한다.

7.6 Button Actions

커뮤니티 글 올리기:
- 기존 AppStep.creatorCommunityWrite(onSuccess:)로 이동한다.
- 작성 성공 시 크리에이터 채널 홈 데이터를 다시 조회한다.
오디오 콘텐츠 올리기:
- 기존 AppStep.createContent 진입과 기존 오디오 콘텐츠 업로드 화면을 그대로 사용한다.
- 기존 업로드 화면의 입력 항목, 검증, 업로드 API, 완료 팝업 문구는 변경하지 않는다.
- 업로드 완료 팝업의 확인 액션에서 기존 AppState.shared.back() 동작을 유지하되, 크리에이터 채널에서 진입한 경우 홈 갱신 callback을 함께 실행한다.
- 업로드 성공 후 크리에이터 채널 홈 데이터를 다시 조회한다.
라이브 만들기:
- 기존 AppStep.createLive(timeSettingMode: .NOW, onSuccess:)로 이동한다.
- 생성 성공 시 기존 LiveView.onCreateSuccess와 동일하게 처리한다.
- 기존 흐름에 맞춰 live main 데이터를 갱신하고, response.channelName이 있으면 생성된 room에 입장한다.
- 크리에이터 채널로 돌아왔을 때 최신 상태가 보이도록 크리에이터 채널 홈 데이터도 다시 조회한다.
각 액션 버튼 터치 시 floating menu는 먼저 닫고 이동한다.

7.7 Accessibility / Interaction

각 버튼에는 VoiceOver label을 제공한다.
dim overlay는 버튼 뒤 콘텐츠 터치를 차단해야 한다.
본인 채널이 아닌 상태에서는 floating menu 관련 overlay가 표시되거나 터치를 가로채지 않아야 한다.

8. UX / UI Expectations

기존 크리에이터 채널 홈의 scroll, sticky tab-bar, title bar background progress 동작을 유지한다.
Floating menu는 화면 최상위 overlay로 표시되어 홈 콘텐츠, tab-bar, title bar와 시각적으로 겹치더라도 dim 위에 버튼이 명확히 보여야 한다.
버튼 크기와 위치는 Figma iPhone 13 width 402pt 기준을 SwiftUI responsive layout으로 변환한다.
버튼이 safe area bottom과 지나치게 붙지 않도록 safeAreaInsets.bottom을 고려하되, Figma의 14pt 시각 간격을 우선한다.

9. Technical Constraints

기능 변경은 SodaLive/Sources/V2/CreatorChannel/** 하위에서 해결한다.
크리에이터 채널 전용 floating menu는 SodaLive/Sources/V2/CreatorChannel/Components/** 아래에 둔다.
기존 CreatorChannelViewModel.fetchHome(creatorId:)와 CreatorChannelHomeResponse를 재사용한다.
신규 API는 만들지 않는다.
오디오 콘텐츠 업로드 성공 후 홈 갱신을 위해 기존 AppStep.createContent와 ContentCreateView에 optional success callback을 추가할 수 있다. 이때 기본 진입의 기존 동작은 바꾸지 않는다.
신규 사용자 노출 문구가 필요하면 SodaLive/Sources/I18n/I18n.swift에 ko/en/ja를 추가한다.
아이콘 asset은 SodaLive/Resources/Assets.xcassets/v2/**에 존재하는 지정 asset을 사용한다.

10. Success Criteria

본인 채널에서 title bar 우측 팔로우/알림/더보기 버튼이 보이지 않는다.
타인 채널에서는 기존 title bar 우측 버튼들이 기존 조건대로 보인다.
본인 채널 홈 탭에서 floating button이 보이고, 홈 외 탭으로 이동하면 보이지 않는다.
Floating button 터치 시 dim과 4개 버튼이 Figma 순서대로 표시된다.
닫기 버튼 또는 dim 탭으로 floating menu가 닫힌다.
커뮤니티 글 작성, 오디오 콘텐츠 업로드, 라이브 생성 버튼이 기존 라우팅으로 이동한다.
커뮤니티 글 작성 성공 후 크리에이터 채널 홈이 갱신된다.
오디오 콘텐츠 업로드 성공 후 크리에이터 채널 홈이 갱신된다.
라이브 생성 성공 후 기존 LiveView.onCreateSuccess와 동일한 이동/갱신 흐름을 수행하고, 크리에이터 채널 홈도 갱신 대상에 포함된다.
xcodebuild -workspace "SodaLive.xcworkspace" -scheme "SodaLive-dev" -configuration Debug build가 성공한다.

11. Decisions

닫힘 상태 plus icon은 ic_plus_no_bg를 사용한다.
오디오 콘텐츠 올리기 진입은 기존 AppStep.createContent와 기존 업로드 화면을 그대로 사용하고, 성공 callback만 추가해 홈 갱신을 연결한다.
라이브 만들기 성공 후 이동/갱신은 기존 LiveView.onCreateSuccess와 동일하게 처리한다.
오디오 콘텐츠 업로드 성공 후 크리에이터 채널 홈 데이터를 다시 조회한다.
커뮤니티 포스트 작성 성공 후 크리에이터 채널 홈 데이터를 다시 조회한다.

12. Open Questions

해당 없음.

12 KiB Raw Permalink Blame History