2020년 2학기 스터디 상생플러스

4가지 편집 기능과 사진첩 기능을 제공하는 이미지 편집 사이트

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. 참고

Meteor- guide

Meteor - API docs

Tutorialpoint - Meteor

TCP School

npm

mongodb - docs

bootstrap - docs