Medium - 김가연

1. 피드 단위

• ‘스토리’
• ‘드래프트’
• ‘퍼블리시’
 

2. 페이지 라우트

• / (1. 메인 홈)

• /:@username (2. 유저 홈)
• /:@username/:title-:story-id (3. 스토리 상세)

• /me → /:@username (2. 유저 홈)
• /me/stories (4. 피드 관리)
• /me/settings (5. 계정 설정)
 

• /new-story(6. 스토리 생성)

• p/:story-id/edit(7. 스토리 수정)

• /search?q=query (8. 검색)

• /404 (9. 404)

3. 피드를 만드는 방식

Read

• 메인 홈 → 리스트
• ‘Medium’ → medium.com

• 유저 홈→ 리스트(프레젠테이션을 위한)
• ‘:@username - Medium’ → medium.com/:@username

• 나의 스토리 → 리스트(관리가 편한)
• ‘Your stories’ → medium.com/me/stories
• (프로필 ’Medium’ → medium.com/me/settings)

• 스토리 상세 → 아이템
• ‘:title - :username - Medium’ → medium.com/:@username/:story-id
• (리다이렉트 경로 medium.com/:@username:/:title-:story-id)

Create

• 네브바 write 버튼 클릭 → 스토리 작성 페이지 이동
• ‘New story - Medium’ → medium.com/new-story

• (타이틀 + 바디) 작성

• 수정하면 드래프트 자동저장
• ‘New story - Medium’ → medium.com/p/:story-id/edit
• (퍼블리시 수정 시 ‘Editing <title> - Medium’ → medium.com/p/:story-id/edit)

• 네브바 publish 버튼 클릭 시 추가 정보 입력 모달
• 프레젠테이션 이미지, 태그

• 모달 publish 버튼 클릭 시 스토리 페이지로 이동
• ‘<title> - <username> - Medium’ → medium/:@username/:story-id

• 모바일에서 작성 X → 읽기에 최적화

update

• 드래프트 - edit / delete

• 퍼블리시
• edit / delete
• shortcut - pin this story / hide responses
• detail - settings(tags, seo, licensing, etc) / stats

Delete

• 스토리
• 상단 추가 메뉴 버튼 클릭 - 메뉴 서랍 오픈
→ 삭제 버튼 클릭 - 삭제 컨펌 모달
→ 삭제 버튼 클릭
→ ‘410 Deleted by author - Medium → medium.com/:@usename/:story-id’
 
모달



리다이렉트



 
• 하단 추가 메뉴 버튼 클릭(위와 같음)

• 유저 홈
• 하단 추가 메뉴 버튼 클릭(위와 같음)

• 나의 스토리
• 하단 추가 메뉴 버튼 클릭(위와 같음)

4. 반응형

• 1240 이상(large desktop)

• 1080~1239(small desktop)

• 728 ~1079(tablet)

• ~727(mobile)