🎨

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

1. 메인 페이지 및 검색 결과 페이지

2. 로그인 페이지

3. 개인 페이지

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

기능 명세서

5. 상세 페이지

6. 포스트 작성 페이지

포스트 작성 페이지 요구사항

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

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

사용자는 drag & drop으로 파일을 업로드 할 수 있습니다.

파일을 2개이상 선택해 드래그앤 드랍시 경고문구를 보여줍니다.

사용자는 파일 선택 버튼을 클릭해 파일을 업로드할 수 있습니다.

파일을 2개이상 선택시 경고문구를 보여줍니다.

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

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

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

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

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

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

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

필수 작성요소를 미완료상태로 작성완료 버튼을 클릭할 시 경고 문구가 등장합니다.

카테고리를 선택하지 않을시 "카테고리를 선택해주세요" 경고 문구가 등장합니다
제목을 입력하지 않을 시 "제목을 입력해 주세요" 경고 문구가 등장합니다.
이미지를 업로드 하지않을 시 "업로드할 이미지가 없습니다." 경고 문구가 등장합니다.

UI 와이어프레임

UI 명세서의 사본

번호

기능명

기능 설명

예외처리

로고

로고 이미지는 상단에 고정되어 있다. 클릭 시 메인페이지로 이동한다.

로그인

클릭 시 로그인페이지로 이동한다.

인증된 사용자에게는 노출되지 않는다.

인증된 사용자 서비스

3-1

프로필 사진

프로필 이미지는 상단에 고정되어 있다. 프로필 사진을 등록한 경우 등록한 이미지가 보여진다. 프로필 사진을 등록하지 않은 경우 기본 이미지가 보여진다.

인증되지 않은 사용자에게는 노출되지 않는다.

3-2

메뉴바

프로필 사진을 토글하여 메뉴바를 보이거나 숨길 수 있다. 메뉴 목록에는 '개인 페이지', '정보 수정', '로그아웃'이 있다. '개인 페이지' 클릭 시 메인페이지로 이동한다. '정보 수정' 클릭 시 회원 정보 수정페이지로 이동한다. '로그아웃' 클릭 시 로그아웃 후 메인페이지로 이동한다.

인증되지 않은 사용자에게는 노출되지 않는다.

검색창

채널 이름, 포스트 제목 또는 가입자 이름으로 포스트를 검색한다. @, #, 기호를 통해 채널 이름과 가입자 이름을 구분하여 검색한다.

빈 문자열을 입력할 경우 검색창 모션으로 에러를 알려준다.

채널 목록

좌우 버튼을 통해 이전/다음 채널을 5개씩 이동하며 볼 수 있다. 이전 채널이 없는 경우 왼쪽이동 버튼이 비활성화된다. 다음 채널이 없는 경우 오른쪽이동 버튼이 비활성화된다.

포스트 이미지

상하로 스크롤시 무한 스크롤을 통해 추가적인 이미지를 불러온다. 이미지에 마우스를 올리면 움직임이 없는 이미지인 경우 사이즈가 커지는 효과, gif인 경우 사이즈가 커지면서 움직임이 활성화된다. 클릭 시 해당 포스트 상세페이지로 이동한다.

포스트 즐겨찾기

즐겨찾기 버튼을 통해 해당 포스트를 즐겨찾기에 등록/해제할 수 있다.

인증되지 않은 사용자는 해당 기능을 이용할 수 없다. [경고창] 로그인이 필요한 서비스입니다.

포스트 즐겨찾기 개수

포스트의 즐겨찾기 총 개수를 보여준다. 총 개수가 1000개 이상일 경우 소수점과 한글 단위를 이용한 형식으로 축약해 표현한다. 예) 34500 → 34.5천

포스트 작성

버튼이 하단에 고정되어 있다. [로그아웃] 클릭시 로그인 서비스 알림문구가 등장한다. [로그인] 포스트 작성 페이지로 이동한다.

인증되지 않은 사용자는 해당 기능을 이용할 수 없다. [경고창] 로그인이 필요한 서비스입니다.

검색 결과 탭

검색 후 '채널 검색 결과' 탭 또는 '포스트 검색 결과' 탭을 선택할 수 있다.

탭을 선택해서 보여주는 방식은 다르게 생각해보면 선택 되지않은 탭의 내용은 가려져 있는 상황이라 리스트 형태로 각각의 결과를 보여주고 더보기버튼을 이용하는 방식은 어떨까요?? → 말씀해주신게 잘 이해되지 않는데 이따 설명 부탁드려도 될까요? - 탭끼리 겹칠수도 →구리다... 차라리 필터 기능을 도입해보는 게..

번호

기능명

기능 설명

예외처리

로고

로고를 확인, 상단에 고정

2-1

프로필 사진

인증되지 않은 사용자에게는 노출되지 않는다.

2-2

메뉴바

인증되지 않은 사용자에게는 노출되지 않는다.

포스트 수정 버튼

[로그인 상태] 작성자에게만 활성 클릭시 포스트 작성 페이지로 이동 [로그아웃 상태] 노출되지 않음

포스트 삭제 버튼

[로그인 상태] 작성자에게만 활성 클릭시 포스트 삭제 경고 알림 [로그아웃 상태] 노출되지 않음

포스트 이미지

이미지를 표시

뒤로가기 버튼

이전 페이지(메인, 검색결과, 사용자 페이지)로 이동

이전 페이지가 서비스 페이지가 아닌경우 메인페이지로 이동

이미지 복사 버튼

GIF형식의 이미지를 복사

즐겨찾기 버튼

개인 페이지에 GIF형식의 이미지를 저장, 저장한 개수를 출력

포스트 제목

포스트의 제목을 표시

댓글 개수

댓글 개수를 표시 1000이상의 댓글 개수는 소수점과 단위를 이용하여 표현

댓글 입력창

[로그인 상태] 자신의 프로필 사진과 이름, 블럭내의 댓글 작성 요소에 댓글을 입력 (최대 80자) [로그아웃 상태] placeholder로 '로그인이 필요합니다.'출력 focus시 로그인 필요 알림

가장 오래된 댓글을 단 사용자의 프로필 사진, 이름, 댓글을 단 시간(혹은 ~시간전 형태 - 추후 수정), 댓글 내용을 표시, 자신이 단 댓글에서 수정버튼을 클릭하여 수정 알림 후 댓글 내용을 수정, 삭제버튼을 클릭하여 삭제 경고 알림 후 해당 댓글을 삭제

10개의 댓글을 추가적으로 표시, 아래로 더 swipe 혹은 휠을 내리면 10개의 댓글을 더 확인할 수 있고 이 과정을 반복

게시글 작성

하단에 고정 게시글 작성 페이지로 이동