Portfolio

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

UI 명세서의 사본

번호

기능명

기능 설명

예외처리

로고

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

로그인

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

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

인증된 사용자 서비스

3-1

프로필 사진

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

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

3-2

메뉴바

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

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

검색창

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

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

채널 목록

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

포스트 이미지

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

포스트 즐겨찾기

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

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

포스트 즐겨찾기 개수

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

포스트 작성

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

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

검색 결과 탭

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

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

2. 로그인 페이지

번호

기능명

기능 설명

예외처리

로고

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

아이디

아이디를 입력

이메일 형식 아닌 경우 이메일 유효성 검사

비밀번호

비밀번호를 입력

6~18자리의 비밀 번호로 유효성 검사

로그인 버튼

클릭하여 입력한 아이디와 비밀번호로 로그인을 완료 작업중이던 이전 페이지로 이동

로그인을 실패할 경우 "아이디와 비밀번호를 확인하세요"라는 문구를 표시, 로그인페이지에서 다시 아이디, 비밀번호를 입력

회원가입 버튼

클릭 시 회원가입 페이지로 이동

3. 개인 페이지

UI 요소 번호

기능명

기능 설명

예외처리

로고

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

프로필 사진

- 프로필 사진 확인가능 - 프로필 사진 수정 버튼 클릭시 프로필 수정 페이지로 이동

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

user 이름

- user 이름 확인가능

팔로우/언팔로우 버튼

[로그아웃] - 클릭시 로그인 페이지로 이동 문구 등장 [로그인] 팔로잉 상태 - 언팔로우 버튼 활성 클릭 시 언팔로잉 상태로 변경 언팔로잉 상태 - 팔로우 버튼 활성 클릭 시 팔로잉 상태로 변경 - 본인 계정일 경우 비활성화

팔로워 수

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

구독 채널 버튼

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

좋아요 탭

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

업로드 탭

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

컨텐츠 영역

- 클릭시 해당 포스트의 상세페이지로 이동 - hover시 해당 이미지가 1.2배 되고 gif 형식의 경우 이미지가 움직이는 효과

글작성 메뉴

[로그인 상태] 포스트 작성 페이지로 이동 [로그아웃 상태] 로그인 필요 알림

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

기능 명세서

UI 요소 번호

기능명

기능 설명

예외처리

프로필 사진

- 클릭시 프로필 사진 등록 가능 - 새로운 이미지를 첨부하지 않을 경우 기본 이미지로 첨부

email 입력

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

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

name 입력

- 2~10자리의 user name 입력가능

password 입력

- password 입력가능

password 입력 확인

- password 입력값과 동일한 값을 입력했는지 검사

일치하지 않을 경우 비밀번호 불일치 알림

작성 완료 버튼

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

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

취소 버튼

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

5. 상세 페이지

번호

기능명

기능 설명

예외처리

로고

로고를 확인, 상단에 고정

2-1

프로필 사진

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

2-2

메뉴바

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

포스트 수정 버튼

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

포스트 삭제 버튼

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

포스트 이미지

이미지를 표시

뒤로가기 버튼

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

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

이미지 복사 버튼

GIF형식의 이미지를 복사

즐겨찾기 버튼

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

포스트 제목

포스트의 제목을 표시

댓글 개수

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

댓글 입력창

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

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

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

게시글 작성

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

6. 포스트 작성 페이지

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

UI 와이어프레임

기능 명세서의 사본

UI 요소 번호

기능 명

기능 설명

예외 처리

사진 등록

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

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

제목

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

태그 목록

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

등록 버튼

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

필수작성요소(사진, 제목, 카테고리 )를 미완료상태로 클릭시 경고문구 출력

취소 버튼

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

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

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

2. 로그인 페이지

3. 개인 페이지

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

5. 상세 페이지

6. 포스트 작성 페이지