요구사항 정리 [2차]

예시

화면설계서 (Wireframe)와 기능명세서 (Functional Specification)

화면설계서는 선(Wire)으로 이루어진 화면 구조(Frame)를 표현하는 문서입니다. 화면을 도식화하기 때문에 시각적인 이해도가 아주 높습니다. 디자이너는 화면설계서를 보고 디자인 작업을 합니다. 실제 작업자가 아닌 관계자도 화면설계서로 커뮤니케이션을 할 수 있습니다. 간혹 IT에 대한 경험이 부족한 관계자라면 선으로 그려진 구조를 보고, 실제 화면을...

https://mklab-co.medium.com/%EC%9E%91%EC%84%B1%EB%B2%95-%ED%99%94%EB%A9%B4%EC%84%A4%EA%B3%84%EC%84%9C-wireframe-%EC%99%80-%EA%B8%B0%EB%8A%A5%EB%AA%85%EC%84%B8%EC%84%9C-functional-specification-bbcff0071ea2

기본 요구사항

• 사용자는 회원가입과 로그인을 할 수 있습니다.

• 가입, 로그인, 인증 검사

• 사용자는 채널에 올라온 글을 볼 수 있습니다.
• 글쓰기, 채널 목록, 채널 내 글 목록
• 인증된 사용자는 채널에 올라온 글을 볼 수 있습니다.
• 인증된 사용자는 채널에 포스트를 남길 수 있습니다.

• 인증된 사용자는 포스트를 좋아요 할 수 있습니다.

• 인증된 사용자는 포스트에 댓글을 남길 수 있습니다.

• SPA 형태로 만들어주세요.

• 엉뚱한 페이지에 접속하면 404 페이지를 보여주세요.

• 사용자는 채널을 검색할 수 있습니다.

• 인증된 사용자는 프로필 이미지 변경 및 포스트를 작성할 때 이미지를 첨부할 수 있습니다. 파일 업로드를 구현해보세요.

• 사용자는 가입자의 정보를 볼 수 있습니다.

메인 페이지, 검색 결과 페이지 (가영)

• 사용자는 로고를 클릭하거나 사이트 루트 url로 접속 시 메인페이지에 접근할 수 있습니다.

• 인증되지 않은 사용자는 로그인 버튼을 통해 로그인 페이지에 접근할 수 있습니다.
• 인증된 사용자는 url을 통해 로그인 페이지에 접근할 수 있습니다.

• 인증된 사용자는 프로필 사진을 볼 수 있습니다.
• 사진을 등록하지 않은 경우 기본 이미지가 보여집니다.

• 프로필 사진을 토글하여 메뉴바를 slide down하여 볼 수 있고, slide up하여 숨길 수 있습니다.
• 메뉴바의 '개인 페이지' 클릭 시 자신의 개인 페이지로 이동합니다.
• 메뉴바의 '정보수정' 클릭 시 회원 정보 수정 페이지로 이동합니다.
• 메뉴바의 '로그아웃' 클릭 시 사이트에서 로그아웃된 후 메인페이지로 이동합니다.

• 검색창에서 채널 검색을 통해 해당 채널의 전체 포스트 목록을 조회할 수 있습니다.

• 검색창에서 포스트 제목 또는 가입자의 닉네임 검색을 통해 관련 포스트 목록을 조회할 수 있습니다.

• 전체 채널 목록을 가로방향으로 스크롤하면서 볼 수 있습니다.
• 채널 버튼을 통해 각 채널의 전체 포스트 목록을 조회할 수 있습니다.

• 사용자는 조회된 포스트 목록을 세로방향으로 무한 스크롤하면서 볼 수 있습니다.

• 포스트 이미지에 마우스를 hover하면 이미지가 커지거나 움직이는 효과(gif)를 볼 수 있습니다.

• 포스트 이미지를 클릭하면 포스트 상세 페이지로 이동합니다.

• 각 포스트 하단에서 즐겨찾기 버튼과 즐겨찾기 개수를 볼 수 있습니다.

• 인증된 사용자는 각 포스트 하단에서 즐겨찾기 버튼을 토글할 수 있습니다.
• 해당 포스트를 즐겨찾기 하지 않은 경우 버튼 클릭 시 포스트를 개인 즐겨찾기 목록에 등록합니다.
• 해당 포스트를 즐겨찾기한 경우 클릭 시 포스트를 개인 즐겨찾기 목록에서 제거합니다.

• 인증된 사용자는 포스트 작성 버튼을 볼 수 있습니다.
• 포스트 작성 버튼 클릭 시 작성 페이지로 이동합니다.

• 공통 개발
• 로그인 인증이 필요한 서비스는 로그인후 해당 페이지로 바로 redirect하도록.
• 로그인후 재로그인시 로그인 세션 유지할지
 

• 로그인한 유저 url로 회원가입, 로그인페이지 재접근시 → 막지는 않겠다

• url로 상세페이지 바로오면 메인페이지?

• bootstrp
• drag and drop
Bootstrap Drag and drop (draggable & sortable} - examples & tutorial
By adding draggable-element class name you can make your custom element draggable. If you want to have your draggable component in a container, just add data-mdb-container attribute with selector to your component. Thanks to data-mdb-block-x-axis attribute or data-mdb-block-y-axis attribute you can disable x or y axis.

https://mdbootstrap.com/docs/standard/plugins/drag-and-drop/

• 파일 디렉토리 찾아서 열기

개인 페이지(현석)

• 사용자는 본인의 개인 페이지에 접근할 수 있습니다.

• 사용자는 다른 사용자의 개인페이지에 접근 할 수 있습니다.

• 비로그인시 →

• 사용자는 해당 사용자의 정보를 확인할 수 있습니다.
• 닉네임? 을 확인 할 수 있습니다.
• 팔로워 수를 확인 할 수 있습니다.
• 구독자? 팔로잉? 수를 확인 할 수 있습니다.

• 인증된 사용자가 자신의 페이지에 방문할

• 팔로우 유무에 따라 팔로우 버튼이 활성화 됩니다.
• 팔로우 중이라면 언팔로우 버튼이 활성화됩니다.
• 팔로우 중이 아니라면 팔로우 버튼이 활성화 됩니다.

• 사용자는 탭을 클릭해 해당 사용자가 등록한 포스트(짤)을 확인 할 수 있습니다.
• 좋아요 탭에서는 해당 사용자가 좋아요한 짤을 확인할 수 있습니다.
• 업로드 탭에서는 해당 사용자가 업로드한 짤을 확인할 수 있습니다.

• 사용자는 포스트를 클릭해 해당 포스트의 상세페이지로 이동할 수 있습니다.

로그인 페이지(홍중)

• 사용자는 로고를 확인할 수 있습니다.

• 사용자는 아이디를 입력할 수 있습니다.

• 사용자는 비밀번호를 입력할 수 있습니다.

• 사용자는 로그인 버튼을 클릭하여 입력한 아이디와 비밀번호로 로그인을 완료할 수 있습니다.
• 사용자가 로그인을 실패할 경우
• "아이디와 비밀번호를 확인하세요"라는 문구를 확인할 수 있고 로그인페이지에서 다시 아이디, 비밀번호를 입력할 수 있습니다.

• 사용자는 회원가입 버튼을 클릭하여 회원가입 페이지로 이동하여 회원가입을 진행할 수 있습니다.

회원가입 페이지(개인정보 수정)(현석)

• 사용자는 회원가입 페이지에 접근할 수 있습니다.

• 사용자는 회원가입에 필요한 정보를 입력할 수 있습니다.
• email을 입력할 수 있습니다.
• password을 입력할 수 있습니다.
• name을 입력할 수 있습니다.

• 필수 정보를 입력하지 않고 작성완료 버튼을 누를시 알림창을 보여 줍니다.
• email을 입력하지 않을시 "email을 입력해주세요"라는 문구를 보여줍니다.
• name을 입력하지 않을시 "name"을 입력해주세요"라는 문구를 보여줍니다.

• 작성완료 버튼을 클릭시 중복된 이메일과 name이 있을때 알림창을 보여줍니다.
• 중복된 email → "이미 있는 email 입니다."
• 중복된 name → "이미 존재하는 name 입니다."

• 사용자는 작성완료버튼을 클릭해 회원가입을 요청할 수 있습니다.

• 사용자는 취소 버튼을 클릭해 회원가입을 취소할 수 있 습니다.
• 알림문구로 "회원가입을 취소하시겠습니까"라는 문구를 보여줍니다.
• 로그인 페이지로 이동합니다.

• 회원가입이 완료되면 로그인페이지로 이동합니다.

상세 페이지(홍중)

• 사용자는 자신이 작성한 게시글일 경우 더보기 버튼(...)을 클릭하여 수정, 삭제 버튼을 확인할 수 있습니다.
• 사용자는 수정버튼을 클릭하여 게시글 작성 페이지에서 게시글을 수정할 수 있습니다.
• 사용자는 삭제 버튼을 클릭하여 "정말로 삭제하시겠습니까?"에 대한 질문을 받아 예 혹은 아니오로 해당 게시글을 삭제하거나 취소할 수 있습니다.

• 사용자는 작성자의 프로필 사진을 클릭하여 작성자의 개인 페이지로 이동할 수 있습니다.

• 사용자는 복사 버튼을 클릭하여 gif형식의 이미지를 복사할 수 있습니다.

• 사용자는 저장 버튼을 클릭하여 개인 페이지에 gif형식의 이미지를 저장할 수 있습니다.

• 사용자는 이미지의 제목을 확인할 수 있습니다.

• 사용자는 로그인한 상태라면 자신의 프로필 사진과 이름, 댓글 작성 요소가 있는 블럭내의 댓글 작성 요소에 댓글을 입력할 수 있습니다.

• 사용자는 가장 오래된 댓글을 단 사용자의 프로필 사진, 이름, 댓글을 단 시간(혹은 ~시간전 형태 - 추후 수정), 댓글 내용을 확인할 수 있습니다.

• 사용자는 자신이 단 댓글에서 수정버튼을 클릭하여 댓글 내용을 수정할 수 있습니다.

• 사용자는 자신이 단 댓글에서 삭제버튼을 클릭하여 해당 댓글을 삭제할 수 있습니다.

• 사용자는 하단 화살표 버튼을 클릭하여 10개의 댓글을 더 확인할 수 있습니다.
• 아래로 더 swipe 혹은 휠을 내리면 10개의 댓글을 더 확인할 수 있고 이 과정을 반복할 수 있습니다.

• 뒤로가기 버튼을 클릭하여 결과 페이지 혹은 개인페이지로 이동합니다.

작성 및 수정 페이지 (현석)

• 인증된 사용자만 작성 및 수정 페이지에 접근 할 수 있습니다.

• 사용자는 gif 형식의 이미지 파일을 포스트에 업로드할 수 있습니다.

• 사용자는 drag & drop으로 파일을 업로드 할 수 있습니다.
• 파일을 2개이상 선택해 드래그앤 드랍시 경고문구를 보여줍니다.

• 사용자는 파일 선택 버튼을 클릭해 파일을 업로드할 수 있습니다.
• 파일을 2개이상 선택시 경고문구를 보여줍니다.

• 사용자는 업로드한 이미지 파일을 제거할수 있습니다.

• 사용자는 이미지 파일 업로드 도중에 취소할 수 있습니다.

• 사용자는 포스트의 제목을 입력할 수 있습니다.

• 사용자는 포스트의 제목을 수정할 수 있습니다.

• 사용자는 카테고리를 1개 이상 선택하야만 합니다.

• 사용자는 선택한 카테고리를 한번 더 클릭하여 선택을 해제 할수 있습니다.

• 작성 완료 버튼을 클릭하면 포스트가 선택한 카테고리에 포스팅됩니다.

• 필수 작성요소를 미완료상태로 작성완료 버튼을 클릭할 시 경고 문구가 등장합니다.
• 카테고리를 선택하지 않을시 "카테고리를 선택해주세요" 경고 문구가 등장합니다
• 제목을 입력하지 않을 시 "제목을 입력해 주세요" 경고 문구가 등장합니다.
• 이미지를 업로드 하지않을 시 "업로드할 이미지가 없습니다." 경고 문구가 등장합니다.

• 사용자는 현재 접속 중인 사용자를 볼 수 있습니다. - 4

• 사용자는 가입자 목록을 볼 수 있습니다. - 2

• 사용자는 가입자를 이름으로 검색을 할 수 있습니다. 2

• 사용자는 포스트 혹은 가입자를 검색할 수 있습니다. -보류

• 인증된 사용자는 자신의 정보를 변경할 수 있습니다. - 2

• 인증된 사용자는 자신의 알림 목록을 확인 할 수 있습니다. - 3 (댓글 멘션)

• 인증된 사용자는 다른 가입자에게 메시지를 보낼 수 있습니다. 4

• 인증된 사용자는 자신에게 온 메시지 목록을 확인 할 수 있습니다. 4

• 인증된 사용자는 특정 사용자와의 메시지 대화 내역을 확인 할 수 있습니다. 4

보너스 요구사항

• 다크 모드를 적용해보세요.

• WebSocket을 이용하여 다른 사용자의 메시지를 실시간으로 받아보세요.

• WebSocket을 이용하여 알림을 받고 알림을 Context와 localStorage로 관리해보세요.

서비스 기획자의 업무 + 화면설계서, 기능명세서

업무중 시간이 나서 앞으로 계속 보고 공부/참고해야할 내용을 정리해서 기록함. 사용자 에게 필요한 사항을 어떻게 시스템에 표현하고 어떤 결과가 어떻게 도출될지 정의를 해나가는 업무. 말 그대로 요구사항을 정확히 만들어간다. 앞으로 개발될 서비스에 대한 구체화 작업 진행. 고객의 요구 발견, 발전된 방향을 만들어간다. 서비스의 방향이 구체화 되었다면 그 방향에 맞게 개발이 진행될 수 있게 개발자와 디자이너 사이에서 도움자 역할.

https://jabong1004.tistory.com/72