2020년 2학기 스터디 상생플러스
4가지 편집 기능과 사진첩 기능을 제공하는 이미지 편집 사이트
| 이름 | 역할 | 책임 |
|---|---|---|
| kimseongeun1212(김성은) | Team Leader 👑 | 전체적인 프로젝트 관리 담당 |
| youngseo0526(김영서) | Back-end Coder | 데이터베이스 및 Server Side 기능 구현 및 관리 |
| mok010(목은경) | Front-end Coder | Client Side 기능 구현 및 관리 |
| leemijung(이미정) | Front-end Coder | Client Side 기능 구현 및 관리 |
| yoon0223(윤혜진) | Front-end Coder | Client Side 기능 구현 및 관리 |
1. 메인 기능
-
모자이크 : 이미지를 흐릿하게 변환
-
흑백 필터 : 컬러로 된 이미지에 흑백 필터를 입혀 보정
-
밝기 조절 : 이미지의 밝기를 어둡게 혹은 밝게 조절
-
크키 변환 : 이미지의 크기를 축소, 확대
-
gallery : 구현된 이미지를 업로드 할 수 있는 사진첩
2.개발 도구
-
IntelliJ : Meteor 구동 및 Javascipt 코드 구현
-
MongoDB : 기능 구현 전 이미지, 기능 구현 후 이미지 저장
-
Kakao Oven : 구체적인 UI 스케치
3. 프로젝트 환경 구현
meteor npm install
meteor
- 실행 후 웹 브라우저에서 localhost:3000 접속 (
meteor run --port <port number>로 포트번호 지정 가능)
4. 웹사이트 실행 화면
- 커버 화면
시작하기 버튼을 눌러 메인 화면으로 넘어감
- 메인 화면
4가지 주요 기능 선택 가능
- 모자이크 적용할 이미지 업로드 화면
내 pc에서 모자이 기능을 적용할 이미지를 업로드, 이미지와 함께 저장할 코멘트 입력
- 모자이크 처리된 이미지 도출 화면
모자이크 처리된 이미지가 나타남, 저장하기 버튼을 눌러 내 pc로 다운로드 가능
- 흑백 필터 적용할 이미지 업로드 화면
내 pc에서 흑백 필터 기능을 적용할 이미지를 업로드, 이미지와 함께 저장할 코멘트 입력
- 흑백 필터 처리된 이미지 도출 화면
흑백 필터 처리된 이미지가 나타남, 저장하기 버튼을 눌러 내 pc로 다운로드 가능
- 밝기 조절 적용할 이미지 업로드 화면
내 pc에서 밝기 조절 기능을 적용할 이미지를 업로드, 이미지와 함께 저장할 코멘트 입력
- 밝기 조절 처리된 이미지 도출 화면
밝기 조절 처리된 이미지가 나타남, 저장하기 버튼을 눌러 내 pc로 다운로드 가능
- 크기 변환 적용할 이미지 업로드 화면
내 pc에서 크기 변환 기능을 적용할 이미지를 업로드, 이미지와 함께 저장할 코멘트 입력
- 크기 변환 처리된 이미지 도출 화면
크기 변환 처리된 이미지가 나타남, 저장하기 버튼을 눌러 내 pc로 다운로드 가능
- gallery 메인 화면
- gallery에 올릴 이미지 업로드 화면
- huWeb팀 소개 화면
5. 참고