UI 화면 설계도 및 기능 명세서 [1차]

1. 메인 페이지

2. 로그인 페이지(홍중)

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

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

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

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

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

3. 검색 결과 페이지

4. 개인 페이지

UI 와이어프레임

기능 명세

UI 요소 번호

기능명

기능 설명

예외처리

의견

의견2

결정

1

로고

- 클릭시 메인페이지로 이동 - 우측 상단에 고정

2

프로필 사진

- 프로필 사진 확인가능 - 클릭시 더 큰 이미지로 확인 가능(논의 후 결정) → 새창에서 이미지 표시해주는 정도로 아직 까진 충분 ( 실시간 채팅, 메시지 보내기 기능 추가시에 모달 구현 )

프로필 사진이 등록되어 있지 않으면 기본이미지를 출력

- 기본 이미지 출력을 예외처리로 빼두어야 할까요? 이 예외처리 컬럼을 두는 여부와 들어갈 내용에 대해서도 같이 이야기해봐야 할 것 같습니다. - 클릭시 본인 개인 페이지의 경우 프로필 이미지 수정과 같은 형태로 확인, 이동하는것도 좋을듯 싶습니다.

프로필 사진의 클릭에 따른 행동에 대한 통일이 필요해보입니다.

→ 새창으로만

3

user 이름

- user 이름 확인가능

4

팔로우 버튼

[로그아웃] - 클릭시 로그인 페이지로 이동 [로그인] - 팔로잉 상태일때 활성 - 클릭시 팔로잉 상태로 변경 - 본인 계정일시 비활성화

저는 로그인 필요한 기능은 경고창만 띄우고 로그인 화면으로 이동시키지는 않았는데 이 부분도 통일할 필요성이 있을 것 같아요 → 동의 합니다. 로그인 이동 확인 알람과 같은 형태로 하나의 컴포넌트를 재사용하는 방식을 사용하면 좋을듯 하네요 → 로그인을 하고 싶은경우 알림만 뜨는것보다 로그인 페이지로 이동시키는것으로 통일하면 좋을것같습니다. 원하지않는 경우 취소로 돌아가면 된다고 생각합니다.

4

언팔로우 버튼

[로그아웃] - 비활성 [로그인] - 팔로잉 상태일 때 활성 - 클릭시 언팔로우 상태로 변경

- 팔로우 토글버튼과 같은 형태로 팔로우,언팔로우 버튼을 하나의 기능으로 통합하여 명세서로 작성하는것이 좋을듯해요

→ 팔로우, 언팔로우 버튼 하나의 컴포넌트로

5

팔로워 수

- user을 팔로우한 사람의 수를 확인가능

팔로워수, 구독채널 등 배치 협의 필요

6

구독 채널 버튼

- user가 팔로우하는 사람의 수를 확인가능 - 클릭시 팔로우하는 사람의 목록페이지로 이동(추가구현?)

7

좋아요 탭

- 클릭시 좋아요한 포스트(짤)의 목록을 출력

8

업로드 탭

- 클릭시 업로드한 포스트(짤)의 목록을 출력

9

컨텐츠 영역

- 클릭시 해당 포스트의 상세페이지로 이동

개인 페이지에서는 hover 했을 때 이미지가 커지거나 움직이는 효과는 없어도 될까요? → 동일한 컴포넌트를 활용하는게 개발시 편할것 같습니다. → 동일한 컴포넌트를 활용하여 동일하게 효과가 있는것이 좋을것 같습니다.

10

글작성 메뉴

사용자가 본인인지의 여부에따라

로그인페이지로 이동이 좋을것 같습니다

5. 회원가입 및 개인 정보 수정 페이지

UI 와이어 프레임

기능 명세서

UI 요소 번호

기능명

기능 설명

예외처리

의견

1

프로필 사진

- 클릭시 프로필 사진 기능 활성 - 새로운 이미지운 이미지를 첨부하지 않을 시 기본 이미지로 첨부

정보 수정 시에만 노출되는 부분이라는 것이 명시되어야 할 것 같습니다 정보 수정 시에도 등록된 프로필 사진이 없는 경우에는 기본이미지 첨부된다는 부분 추가되어야 할 것 같습니다

2

email 입력

- email 입력 가능 - 정규표현식을 이용해 유효한 email 검사

- email형식이 아닐 때 경고 문구를 출력

3

name 입력

-name 입력가능 2~10자리

글자 수에 제한을 둘지 한 번 이야기해봐야 할 것 같아요

4

password 입력

- password 입력가능

'비밀 번호 확인' 부분 피그마에도 추가해야할 것 같습니다 → 추가해야한다고 생각합니다.

5

작성 완료 버튼

- 클릭시 회원가입 요청 - 로그인 페이지로 이동

- email을 입력하지 않고 클릭시 "email을 입력해주세요. " 출력 - name을 입력하지 않고 클릭시 "name을 입력해주세요. " 출력 - email이 이미 존재할 때 ''이미 존재하는 email 주소입니다" 출력 - name이 이미 존재할 때 "이미 존재하는 name입니다." 출력

비밀번호를 확인을 추가할 경우 비밀번호 부분? 일치하지 않을 경우 예외처리 필요할 것 같습니다 → 필요하다고 생각합니다.

6

취소 버튼

- 회원가입 취소 알림창 등장 - 클릭시 메인페이지로 이동

취소 알림창은 필요하지 않을것 같은데 어떨까요 → 정보를 입력하는 페이지이므로 취소시 알림창으로 취소시 저장되지않을 수 있음을 인식시켜주는것이 좋다고 생각합니다.

6. 상세 페이지(홍중)

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

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

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

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

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

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

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

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

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

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

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

7. 포스트 작성 페이지

UI 와이어프레임

기능 명세서

UI 요소 번호

기능 명

기능 설명

예외 처리

의견

1

사진 등록

- drag & drop 으로 파일 업로드(bootstrap) - 업로드한 이미지 파일을 포스트등록 전 낙관적 업데이트 하여 미리보기가 가능합니다. - 삭제 버튼 클릭시 업로드된 사진 제거 - 업로드 도중 취소기능

- 파일 2개이상 drop 시 경고문구 출력

기능설명에는 bootstrap과같은 개발적인 설명은 빠져도 좋을것 같습니다. 등록된 사진을 미리보기와 같은 형태로 표시하는것도 좋을것 같습니다

2

제목

- 포스트의 제목 출력 - 수정 버튼 클릭시 제목 수정

3

태그 목록

- 채널의 목록을 태그로 출력 - 선택한 태그를 한번 더 클릭시 선택해제

4

등록 버튼

- 클릭시 포스트가 선택된 카테고리에 포스팅 - 등록요청후 해당 상세페이지로 이동

필수작성요소를 미완료상태로 클릭시 경고문구 출력

필수 작성요소는 사진, 제목 태그 최소1개 이겠군요 이를 명시해도 좋을것 같습니다.

5

취소 버튼

- 클릭 시 취소 알림 문구 출력

알림문구도 함께 정해야할까요?