모여봐요 동창의 숲

Contributer

기획

이유노 이유택 이은솔 이종화 이주현 이주형 이준희 이지우 이지은 이진영 이진우

기획

지금은 사라진 선후배를 찾아주는 서비스 아이러브스쿨을 재해석한 서비스이다.

학교 졸업연도에 따라 게시판이 하나씩 있고, 게시판은 메인화면, 사진첩, 자유게시판으로 이루어진다.

구성원들이 게시판에 모이면서 자연스럽게 동창들을 찾고, 커뮤니티가 만들어진다.

메인화면에는 졸업사진을 올리고, 자유게시판에는 좋아하는 주제 등의 내용을 올릴 수 있다.

사진을 올리면 페이스북처럼 인물을 인식하여 라벨링을 할 수 있고,

페이지 내용에서 태그를 추출하여 스팸 글을 필터링하는 기능과 다른 페이지 추천 기능을 제공한다.

세부 기획

메인 페이지

서비스 이름과 검색 탭이 있다. 검색 탭에는 학교명과 입학연도가 있다. 이 때 현재 존재하는 학교+입학연도의 목록만 드롭다운에 표시된다. 추가를 원할 경우 관리자가 직접 추가한다.

entry

상단에는 서비스 이름과 우측에는 학교명+입학연도 표시 entry/자유 게시판/entry 탭이 존재한다.(현재 탭은 다른 색으로 표시) 메인으로 해당 기수의 졸업사진을 띄운다.

자유 게시판

존재하는 글 목록을 표시한다. 하단에 페이지 넘기는 버튼, 우측에 글 작성 버튼이 표시되어있다.

글 작성 페이지

글 제목, 작성자, 비밀번호(수정, 삭제 시 필요)를 입력한다. 중간에는 글 본문을 입력한다. 하단에 사진 첨부, 글 게시 버튼이 있다. (A) 글을 올릴 때 API를 이용해 비속어를 필터링한다. 조건에 맞지 않는 글일 경우 글 작성이 불가능하게한다.

자유 게시판-글 읽기

자유 게시판에서 글을 클릭하면 글 제목과 작성자, 본문을 띄워준다. 글 본문 아래에는 삭제를 위한 비밀번호, 수정하기, 삭제하기 버튼이 있다. (C) 글 하단에는 해당 게시글 태그에 기반, 기존 글들 중 비슷한 게시글을 표시한다.

사진첩 페이지

지금까지 올라온 사진들을 보여준다. 하단에는 사진 제목이나 태그로 검색할 수 있다. 페이지 넘기는 버튼, 사진 게시 버튼이 있다.

사진 업로드 게시판

사진 제목을 설정할 수 있다. 사진 업로드 시 사진을 표시한다. (B) 이 때 얼굴 인식을 통해 인물 별로 라벨을 붙일 수 있다. 하단에는 사진 첨부 버튼, 작성하기 버튼이 있다.

사진첩- 사진 보기

사진이 표시되며 업로드 때 태그한 인물 정보를 표시한다.

일정

2주차 : 자연어 처리

• 글 내용에서 중요한 단어를 태그로 추출하기

3주차 B 기능(비전/영상 처리) 개발 - Relay11

• 학창시절 단체사진을 올리면 사진에서 인물들을 인식하여 라벨링하기

기능2 체크포인트

• 사진 업로드
• 사진 속 인물찾기
• 인물에 태그 작성하기

FE 파트

기능

1. 파일을 선택하여 이미지를 업로드하며, 입력받은 이미지에 몇명의 사람이 있는지 확인할 수 있다.
2. 사람 얼굴마다 이름 태그를 달아서 전송할 수 있다.

처음엔 서버 없이 프론트에서 Naver clova face recognition API를 이용하려 하였으나, CORS 정책으로 인해 화면에서 바로 API를 사용할 수 없어 서버를 생성했습니다.

BE 파트

2주차 A기능 개발에서 사용한 TypeScript와 Koa에 대한 이해도가 부족해 Node.js 기반의 새로운 서버를 구축했습니다.

기능

• 프론트에서 전달받은 사진 url을 api로 전달하는 기능과 리액트 앱을 띄워주는 기능을 가진 서버를 따로 생성하였습니다.

서버 생성 참고 링크

• 서버를 똑같이 만드시려면 git의 week3-backend 폴더의 파일들을 쓰시면 됩니다.

Naver Clova 얼굴 감지 API 사용 👨‍👩‍👦‍👦

입력받은 이미지로부터 얼굴을 감지하고 입력된 이미지에서 얼마나 많은 얼굴이 감지되었고 각 얼굴이 어디에 어떤 크기로 위치하며 어떤 모습을 하고 있는지 반환하는 REST API입니다. 이미지에서 분석한 주요 정보는 다음과 같습니다.

• 감지된 얼굴의 수
• 감지된 각 얼굴을 분석한 정보
  • 감지된 각 얼굴의 좌표 및 크기
  • 감지된 각 얼굴의 눈, 코, 입의 좌표
  • 감지된 얼굴의 추정 성별, 나이 및 추정치, 분석된 감정,얼굴의 방향 등

기술 스택 및 라이브러리

FE

• React.js, Canvas

BE

• Ubuntu 16.04, Nginx, Node.js, Express

API

• Naver Clova Face Recogintion API
  • https://www.ncloud.com/product/aiService/cfr

🐘 사용법

1. http://101.101.217.78/ 접속

2. '3주차 결과물 보러가기' 클릭

3. 사진 첨부버튼 클릭 후 사진 첨부(2mb 이하)

4. 인물 얼굴위의 네모박스 클릭하여 태그 작성

• 태그 작성까지 구현하였습니다 (태그 전송 미구현)

✏️ 3주차 팀원들의 회고 및 소감 👍

• J045 김영근 - 캔버스와 리액트에 대한 이해가 깊어진 프로젝트였습니다. 모두 수고하셨어요!

• J074 박동현 - 리액트 관련 지식이 전무하였는데 영근님께서 쉐어라이브를 통하여 많은 지식을 전수 해 주셨습니다, 감사합니다! 더불어 팀원분들 정말 고생 많으셨습니다!

• J104 신우진 - 팀원들이 모두 고생해주셔서 워라벨이 있는 주말을 보낼 수 있게 되었습니다! 모두 고생하셨어요!!

• J161 이지은 -

• J182 전은채 - 영근 마스터님께서 주말을 하사하셨습니다.

• J039 김서영 - 부족함을 많이 느낀 프로젝트였습니다22223333 도움이 되고자 노력했으나 지식이 얕아 큰 도움이 되지 못해 많이 아쉬웠습니다.. 리액트 고수분들께서 힘써주시고 서버 고수분들도 애써주셔서 너무 감사했습니다! 수고하셨어요 다들!!

• J055 김진성 - 부족함을 많이 느낀 프로젝트였습니다. 도움이 되고자 노력했으나 지식이 얕아 큰 도움이 되지 못해 많이 아쉬웠습니다22222

• J098 송원석 - 능력있는 팀원들 덕분에 많이 배울 수 있었고, 즐거운 프로젝트였습니다. 모두 고생하셨습니다!

• J166 이헌준 - 나도 누군가에게 도움이 되고싶다!

• J198 주재우 - 프로젝트에 도움이 되고 싶어 노력했으나 실력이 부족하여 도움이 되지 못해 아쉽고 팀원들에게 죄송했습니다. 그러나 팀원분들께서 모두 열심히 해주시고 해서 프로젝트를 완성해서 즐거운 릴레이 프로젝트 였습니다. 앞으로 공부해서 도움이 되고 싶습니다. 모두 수고하셧습니다!

너무나 즐거운 릴레이 프로젝트

3주차 : 테이블 데이터

태그로 추출된 단어들을 통해 스팸 필터링, 맞춤 광고나 게시글 추천하기

UI 구성

#4 PW:boostcamp2020

메인 페이지

entry 페이지

자유 게시판

사진첩 (글 작성)

참고할 API

비속어 https://github.com/hjh010501/appropriate-filetering

얼굴 인식 https://azure.microsoft.com/ko-kr/services/cognitive-services/face/

중요한 단어 추출(핵심어구 추출) https://aws.amazon.com/ko/comprehend/