1. WireFrame (화면 설계서)

최신 반영 사항 : Figma 링크, Prototype(프로토타입)

1. 로그인 페이지

• Desktop & Application

1. 자체 로그인과 github 연동 로그인으로 나뉜다.
2. 자체 로그인의 경우, 이메일과 비밀번호를 사용하여 로그인한다.

2. 회원 가입 페이지

Github 연동 회원 필수 정보 인증 페이지

• Desktop & Application

1. github의 경우, github 로그인 연동을 마친 후 필수 정보 인증 페이지로 넘어간다.
2. 이메일 주소의 경우, 학교 혹은 회사 이메일을 통해 인증할 것을 권장한다.
3. 학교 혹은 회사 이메일을 사용해서 인증할 경우, 프로필에 자동으로 재학 중인 학교 혹은 재직 중인 회사 이름이 기입된다.
4. 이메일 인증 버튼을 누를 경우, 이메일로 인증 번호가 발송됨과 동시에 이메일 주소란 아래에 "인증 번호를 확인해주세요."라는 문구와 인증 번호 입력 번호란이 생성된다. 또한, 입력한 이메일이 이메일 형식에 부합하는지 확인해야 한다. 부합하지 않을 경우, "이메일 형식에 부합하지 않습니다."라는 문구가 나타난다.
5. 이메일로 발송된 인증 번호는 30분 동안 유효하며 시간이 초과될 경우, 재인증을 받아야 한다.
6. 또한 이메일 인증과 성명은 필수 정보이며 해당 란을 기입하지 않거나 공백 문자 등을 포함하여 입력할 시 프론트엔드에서 Handling 과정을 수행해야 한다.
7. 만약 유저가 필수 정보를 입력하지 않고 여러 원인으로 인해 회원 가입을 마치지 못했을 경우, 로그인 했을 경우 필수 정보 인증 페이지로 바로 이동한다.

자체 회원 가입 및 필수 정보 인증 페이지

• Desktop & Application

1. 이메일 주소의 경우, 학교 혹은 회사 이메일을 통해 인증할 것을 권장한다.
2. 학교 혹은 회사 이메일을 사용해서 인증할 경우, 프로필에 자동으로 재학 중인 학교 혹은 재직 중인 회사 이름이 기입된다.
3. 이메일 인증 버튼을 누를 경우, 이메일로 인증 번호가 발송됨과 동시에 이메일 주소란 아래에 "인증 번호를 확인해주세요."라는 문구와 인증 번호 입력 번호란이 생성된다. 또한, 입력한 이메일이 이메일 형식에 부합하는지 확인해야 한다. 부합하지 않을 경우, "이메일 형식에 부합하지 않습니다."라는 문구가 나타난다.
4. 이메일로 발송된 인증 번호는 30분 동안 유효하며 시간이 초과될 경우, 재인증을 받아야 한다.
5. 또한 이메일 인증과 성명은 필수 정보이며 해당 란을 기입하지 않거나 공백 문자 등을 포함하여 입력할 시 프론트엔드에서 Handling 과정을 수행해야 한다.
6. 만약 유저가 필수 정보를 입력하지 않고 여러 원인으로 인해 회원 가입을 마치지 못했을 경우, 로그인 했을 경우 필수 정보 인증 페이지로 바로 이동한다.
7. 비밀 번호 입력란과 확인란은 서로 같은 값이 입력되어야 하며 해당 조건은 프론트엔드에서 확인해야 한다. 또한, 비밀 번호 입력란과 확인란은 비밀번호가 *으로 mask되어서 표현된다.
8. 비밀 번호 생성 규칙은 비밀번호 생성 규칙 정책을 따른다.

회원 가입 - 관심사 설정 페이지

• Desktop & Application

1. github 연동을 통해 가입했을 경우, github 주소는 자동으로 기입되어 있다.
2. tistory, velog, github.io 등 유명 블로그는 각각의 블로그 마크가 제공된다. 그 외의 블로그 링크들은 연동 마크 (클립 표시)가 제공된다.
3. github 주소와 그 외 링크 및 관심사 해시 태그는 필수 입력이 아니므로, 유저는 해당 란은 넘어가도 괜찮다.
4. github 주소를 포함하여 외부 사이트의 주소는 최대 3개까지 입력이 가능하다.
5. 또한 동일한 해시 태그를 중복으로 선택할 수 없으며, 서버에 전송하기 전에 체크한다.
6. 해시 태그는 각각의 길이가 다르므로 길이에 따라 동적으로 한 줄에 나타나도록 구성해야 한다.
7. 관심사 설정은 해시태그 생성 규칙을 참고바란다.

3. 메인 페이지

• Desktop & Application

1. 로그인할 경우, 처음 나오는 화면은 메인 페이지이다.
2. 해당 피드에는 관심사, 팔로워 및 팔로잉, 토론 피드, 통계 피드 등 피드의 종류와 관계없이 모든 피드들이 노출된다. 이때, 최신 순으로 상단에서부터 나열된다.
3. 상단의 팔로워 및 팔로잉 목록은 팔로워/팔로잉 표시 규칙을 따른다.
4. 또한 팔로워 및 팔로잉 목록은 가로 스크롤을 통해서 넘길 수 있도록 구성된다.
5. 해당 팔로워 및 팔로잉을 클릭 했을 경우, 해당 인물의 피드를 볼 수 있는 프로필로 화면이 넘어간다.
6. 이미지는 다음 이미지 혹은 이전 이미지가 없을 경우 넘길 수 있는 화살표 아이콘이 나타나지 않는다.
7. 피드 생성 시간 표시는 생성 시간 표시 규칙을 따른다.

4. 프로필 페이지

• Desktop & Application

공통 사항

1. 피드 화면은 프로필 페이지의 default 화면이다.
2. 프로필 사진은 유저가 선택할 수 있으며 선택하지 않을 경우 카카오톡 기본 프사를 default 사진으로 한다.
3. 본인과 관련된 github나 외부 링크를 게재할 수 있으며 최대 3개까지로 제한한다.
4. 학교나 회사를 인증했을 경우, 이름 옆에 재학 중인 학교 혹은 재직 중인 회사가 표시된다.

게시물 사항

1. 본인의 피드가 최신 순으로 정렬된다.
2. 피드의 생성 시간은 생성 시간 표시 정책을 따른다.
3. 게시물의 공개 범위는 공개 계정 / 비공개 계정에 따라 정해진다.
4. 이미지는 다음 이미지 혹은 이전 이미지가 없을 경우 넘길 수 있는 화살표 아이콘이 나타나지 않는다.

프로필 수정 페이지

• Desktop & Application

1. 프로필 사진, 닉네임(성명), 재학 중인 회사 및 재직 중인 회사, 자기 소개란, 링크, 관심사를 수정할 수 있다.
2. 재학 중인 학교 및 재직 중인 회사를 수정할 경우 재인증을 거쳐야 하며 자체 회원 가입을 진행한 경우 아이디가 변경될 수 있다.

5. 팔로워 및 팔로잉 페이지

팔로워 페이지

• Desktop & Application

팔로잉 페이지

• Desktop & Application

(팔로워 및 팔로잉 페이지는 취합하여 작성한다.)

1. 팔로워나 팔로잉은 팔로워/팔로잉 표시 정책에 따라 정렬되어 나타난다.
2. 스크롤링을 함으로써 해당 팔로워에 대한 정보는 페이징 처리 되어 나타나며 한 페이지의 크기는 20개로 제한한다. (성능 테스트 후에 변경될 수 있다.)

팔로워 및 팔로잉 수정 페이지

• Desktop & Application

1. 팔로워의 경우 삭제 버튼을, 팔로잉의 경우 취소 버튼을 누를 경우 유저는 삭제 및 취소를 진행할 수 있다.

6. 피드 페이지

피드 작성 페이지

• Desktop & Application

피드 작성 페이지 팝업창

• Desktop & Application

일반 피드 작성 페이지

• Desktop & Application

토론 피드 작성 페이지

• Desktop & Application

1. 이미지는 다음 이미지 혹은 이전 이미지가 없을 경우 넘길 수 있는 화살표 아이콘이 나타나지 않는다.
2. 게시글 생성 버튼을 눌렀을 경우, 욕설 및 보안 공격에 대한 필터링이 이루어진 후 서버에 데이터가 전송된다.
3. 해시태그는 해시태그 생성 규칙에 따른다.
4. 이미지나 게시글 내용 중 하나는 반드시 포함되어야 하며 둘 다 공백일 경우 작성을 완료할 수 없다.
5. 이미지 개수는 최대 10장으로 제한된다.
6. 이미지 용량은 2MB로 제한된다.

상세 피드 페이지

• Desktop & Application

일반 피드 (공통 사항)

1. 게시글 작성자에게는 우측에 팔로우 버튼이, 일반 댓글의 우측에는 하트(공감)가 표시된다.
2. 대댓글의 경우도 공감이 가능하다.
3. 댓글과 대댓글의 경우, 생성 시간 표시 정책에 따라 작성한 시간이 나타난다.
4. 베스트 댓글의 경우, 세 개의 피드에 모두 존재하며 최대 5개까지 상단에 고정된다.
5. 댓글 정렬 기준은 토글 버튼으로 조절 가능하다.

통계 피드

1. 설문에 참여했다면, 설문에 참여했을 때까지의 결과를 확인할 수 있다.
2. 통계에 따라 단일 선택 또는 중복 선택이 가능하다.
3. 설문이 끝나면, 모든 유저들의 피드에 해당 설문의 결과를 노출시킨다.
4. 설문 조사 기한 내에는 투표가 가능하다.
5. 또한, 설문 조사 기한은 "yyyy-MM-dd ~ yyyy-MM-dd" 형식을 따른다.

토론 피드

1. 진영은 두 가지로 나뉜다.
2. 상대방 진영에는 댓글을 작성할 수 없으며 본인이 선택한 진영에는 댓글을 중복으로 작성할 수 있다.
3. 진영 별로 최대 5개의 베스트 댓글이 상단에 고정된다.
4. 토론 주제 좌측에 깃발 아이콘을 통해 유저가 선택한 진영을 확인할 수 있다.

• 유저가 화면의 어느 부분을 터치해야 하는지 직관적으로 알 수 있는 페이지 또는 이모티콘 추가 요망 (은비) 통계 피드의 페이지에서 2지선다로 구성되며, 유저는 2개의 선택지 중 하나를 선택함으로써 본인이 선택한 진영을 확인할 수 있음 이때, 선택하기 전 댓글을 확인하고 싶다면 "댓글 보러가기" 또는 "의견 확인하기" 등의 버튼을 통해 댓글 페이지로 이동하여 확인할 수 있다.

상세 피드 페이지 (통계 피드 제출 후)

• Desktop & Application

1. 이미 업데이트된 통계 피드에 대해서 의견을 수정하거나 투표는 불가하다.

7. 설정 페이지

• Desktop & Aplication

계정 공개 범위에 대한 내용은 다음과 같다. 또한, 계정 공개 범위는 파란색(Public) 또는 빨간색(Private) 토글 버튼으로 구성된다.

• (1) 공개 계정: 누구나 제한 없이 피드를 볼 수 있다.

• (2) 비공개 계정: 팔로워들만 피드를 볼 수 있으며 팔로워가 아니면 관심사에 해당하더라도 피드에 노출되지 않는다.