회원가입 30s
한 번 사이드 프로젝트 팀원을 구하기 위해 회원가입을 해보겠습니다. 상단에 있는 로그인/회원가입을 눌러 로그인 창으로 이동한 뒤 하단에 회원가입 링크를 클릭하여 회원가입 페이지로 올 수 있습니다. 닉네임을 입력하고, 중복 확인을 해준 뒤 사용할 이메일과 비밀번호를 작성하고 아래의 Sign up 버튼을 눌러 회원가입을 합니다. 그런 다음 자동으로 로그인이 되어 메인 페이지로 이동하게 됩니다.
로그인 30s
제대로 회원가입이 되었는지 확인하기 위해 상단 프로필 이미지와 닉네임이 있는 부분을 클릭하여 로그아웃을 한 뒤에 로그인 페이지로 이동하여 확인해보겠습니다. 아까 사용한 ~ 이메일과 비밀번호를 입력한 뒤 로그인해 보겠습니다. 로그인이 잘 되어 다시 메인 페이지로 이동한 것을 볼 수 있습니다.
메인 30s
다음 메인 페이지에서는 다른 사람들이 올린 사이드 프로젝트 모집글을 살펴볼 수 있습니다. 모든 모집 분야의 글을 볼 수 있는 전체 필터와(더보기 까지 하기) 각 분야에 대한 글만 볼 수 있는 필터 또한 제공됩니다. 백엔드, ios 이런 식으로 사용자가 원하는 분야의 글만 볼 수 있습니다.
검색 30s
저는 프롱이라는 제목을 가진 게시글을 보고 싶기 때문에 상단에 위치한 검색창에 프롱이로 입력하고 검색해보면, 프롱이들 모여! 하나의 글이 잘 검색되는 것을 확인 할 수 있고 프론트 글이기 때문에 프론트엔드 채널에서만 확인할 수 있는 것을 볼 수 있습니다. 저는 프롱이들 모여!라는 제목이 마음에 들기 때문에 좋아요를 해주도록 하겠습니다.
생성 4min… 검증 단계를 줄일까?
한 번 팀원을 모집하는 글을 작성해보겠습니다. 글을 생성하는 방법은 위에 “새글쓰기”를 클릭하거나 아래의 “마음에 드는 사이드 프로젝트가 없나요? 프로젝트 올리기”라는 핑크색 배너를 클릭하여 작성할 수 있습니다. 하단 배너로 글을 작성해보겠습니다. 게시글 작성에는 3가지 검증이 있습니다. 제목을 입력해달라는 검증과 제목 프롱이들 모여!! 다음 검증은 이메일을 입력하라는 검증이 있고, 만약 이메일 형식이 아닌 다른 문자열을 작성하게 된다면 올바른 이메일 형식이 아니라는 검증 또한 들어가 있습니다. 그런 다음 생성하기를 눌러보면 소개를 5자 이상 입력해야만 글을 작성할 수 있게 됩니다.
안녕하세요! 프롱프롱입니다 저와 함께할 프론트엔드, 백엔드, 디자이너 분을 모십니다! 하고 모집 분야를 선택할 수 있고, 인원과 기술스택을 설정할 수 있습니다. 다른 분야도 모집하고 싶다면 모집분야 추가 버튼을 클릭하여 다른 분야와 인원, 기술스택을 선택할 수 있고 소개글에 작성한 내용대로 디자인 분야도 모집하도록 하겠습니다. 생성 하기 전에 프로젝트 관련 사진도 같이 올려보겠습니다. 사진이 잘 올라가는 것을 확인할 수 있고, 다른 사진을 선택하려면 우측의 쓰레기통 버튼을 클릭하여 삭제한 후 선택하면 됩니다. 생성하기를 누르면 제가 선택한 3가지 모집 분야에 대한 채널에 하나의 글이 생성됩니다. 그렇기에 총 3개의 글이 작성됩니다. 글 작성이 완료된 뒤 알림 메시지와 함께 메인 페이지로 이동하게 됩니다. 글이 잘 올라왔는지 살펴볼까요. 전체 채널에 제가 작성한 백엔드, 프론트, 디자인 세 분야에 대한 게시글이 각각 하나씩 생성된 것을 볼 수 있습니다. → 요소 하나하나의 검증보다
“생성 페이지에서는 제목, 이메일, 프로젝트 소개 작성란에 대한 검증 작업 처리를 하여 올바르지 못한 데이터를 입력할 경우 양식에 맞게 작성을 유도하는 메시지를 출력해줍니다.” → 더 못줄이겠네요 ㅠㅠ
상세 (스톱워치로 해보니까 1분 정도 나오네요)
- 상세 페이지에서는 프로젝트 모집글에 대한 상세한 정보를 확인할 수 있습니다.
- 요약 영역에서 프로젝트에 대한 모집분야, 모집인원, 연락 방법, 진행 방식, 일정, 필요로 하는 기술 스택을 확인할 수 있으며 자세한 설명은 프로젝트 소개란에서 확인할 수 있습니다.
- 또한 좋아요 기능을 통해 마이 페이지로 해당 프로젝트가 연동되며 관심있는 프로젝트에 대한 지속적인 정보를 확인할 수 있습니다.
- 그리고 페이지 하단에서는 프로젝트에 관심있는 인증된 사용자가 댓글을 작성할 수 있고 댓글이 작성되면 모집글 작성자한테 알림이 발송됩니다. 이 기능으로 관심있는 프로젝트에 대한 상호 비동기 커뮤니케이션을 할 수 있어 사용자 간에 서로 필요한 정보를 빠르게 주고받을 수 있습니다.
- 네, 다음으로 모집글 작성자는 상세 페이지에서 페이지 수정 및 삭제를 할 수 있습니다. 이제 해당 모집글에 대한 내용을 수정해보도록 하겠습니다.
→ (수정 페이지로 이동)
수정 3min
이제 프롱이들 모여!라고 작성했기 때문에 백엔드 채널과 디자인 채널에는 프롱이라고 보이기 때문에 게시글을 수정하겠습니다. 수정 버튼을 눌러 백엔드 모집 글이니까 백엔드 모여!로 바꾸고 수정하기 버튼을 누르면 수정이 완료되었다는 메시지와 함께 수정된 게시글로 이동하게 됩니다.
이제 디자이너 글도 변경하도록 하겠습니다. 수정 버튼을 눌러 디자이너 모여!로 한 뒤 모집 분야를 수정해보면, 모집 분야는 디자이너 글이므로 변경이 불가능 하고, 모집 인원과 기술 스택을 재설정할 수 있습니다. 이제 디자이너 분들에게 어필하기 위해 다른 게시글에 올린 사진이 아닌 감각적인 사진을 올리도록 하겠습니다. 수정하기 버튼을 누르고 수정이 되었고 완료된 글에서 인원과 스택이 변경된 것을 볼 수 있고 사진 또한 잘 올라간 것을 볼 수 있습니다.
이제 한 번 글 삭제도 잘 되는지 확인해보겠습니다. 제가 작성한 글로 들어가 삭제해보겠습니다. 삭제를 하면 복구될 수 없다는 메시지와 함께 글 삭제가 됩니다. 목록에서 글이 삭제된 것을 확인할 수 있습니다.
프로필 페이지 2min
한 번 제가 작성한 글만 보기 위해 마이 페이지로 이동해 보겠습니다. 상단에 프로필 이미지와 닉네임이 있는 곳을 클릭하여 이동할 수 있고 제가 작성한 글과 좋아요 한 글을 볼 수 있습니다. 마이 페이지에서는 커버와 프로필 이미지를 변경할 수 있습니다. 한 번 프로필 이미지를 변경해보겠습니다. (감자) 프로필 이미지를 변경하니 아래 “세상에 너를 보여줘”라는 숨겨진 업적을 깨진 것을 볼 수 있습니다. 커버도 변경해볼게요. (변경 안 됨) 그 다음 닉네임도 변경해보겠습니다. 프롱롱 중복 확인을 해야 변경하기 버튼이 활성화되고 클릭하면 변경이 되었다는 메시지와 함께 변경된 것을 확인할 수 있습니다. 비밀번호도 변경해보면 잘못 작성하면 에러 메시지가 뜨고, 제대로 작성하여 변경한 뒤 잘 변경되었는지 로그아웃을 하여 로그인해서 확인해보겠습니다. 입력해서 로그인 해보면 잘 변경된 것을 확인할 수 있습니다.
사용자 목록 40s
이제 저 말고 다른 사용자들의 마이 페이지를 가보겠습니다. 아래의 같이 봉고차탈 친구 찾기를 클릭하여 사용자 목록을 확인할 수 있습니다. 사용자의 닉네임 옆에 초록불이 들어와 있는 사용자는 현재 접속 중인 사용자입니다. 현재 접속 중인 형진님의 프로필 페이지로 이동해보겠습니다. 프로필 이미지를 클릭하여 이동하면, 팔로우와 언팔로우를 할 수 있는 기능이 있고, 형진님은 3개의 업적을 깨신 것을 볼 수 있습니다. 그리고 형진님이 작성한 게시글과 좋아요 한 글을 확인할 수 있습니다.
만약 제 프로필 이미지와 같이 감자라는 닉네임을 가진 사람들 검색으로 찾아보겠습니다. 다시 같이 봉고차탈 친구 찾기를 클릭하여 감자라고 검색하면 산타감자와 그냥감자 사용자가 나오는 것을 알 수 있습니다.
지금까지 2Javatayo 시연을 봐주셔서 감사합니다. 다음으로 저희 팀을 소개하겠습니다.