OOTD project_web

# OOTD
PROJECT
By 날씨요정(6조)
구혜인 김경한 류제룡 이상지
융복합 프로젝트형
빅데이터 분석 서비스 개발
1차 프로젝트

융복합 프로젝트형 빅데이터 분석 서비스 개발 1차 프로젝트 # OOTD PROJECT
항상 틀리는 일기예보..
일기예보만 믿고 얇게 입었다가 봉변..
매일 아침 집을 나서기 전 오늘 날씨 코디를 참고할 수 있다면?
여행을 갈 때 그 지역 날씨에 맞는 코디를 알 수 있다면?
OOTD Project 소개

날씨 + OOTD(Outfit of The Day)
= OOTD Project(Feat. 날씨요정)
>> 우리 동네 사람들의 OOTD를 확인하여 날씨에 맞는 옷을 참고하자!
- 국내 시/군/구 단위별로 실시간 날씨 정보 제공
- 해당 지역별 사용자들이 올려놓은 OOTD 게시판
- 다른 사용자의 OOTD 가 실제 날씨와 적합한 옷차림인지 평가하는 기능
OOTD Project 소개

팀장 이상지
구혜인 김경한
- Upload Page
- 지역 설정 기능
- 파일 형식/용량
제한 기능
- 파일 첨부 기능
- DB 모델링
류제룡
날씨요정 팀 소개
- Main Page
- API 기반
지도/날씨 검색 기능
- 일일 사용자 현황 수치
제공
- 일일 인기 사용자 조회
- Feed Page
- feed 날씨 데이터
- 이미지 게시판
- 사용자선택 정렬방법
- 데이터 전처리
(실시간 날씨정보)
- 이미지 업로드
기능 구현
- DB 모델링
- Django 서버 구축
(지역 정보 및 지도 데이터)
- DB 모델링
- Photo Page
- 조회수/좋아요 기능
ajax 처리
- 정렬 방법별로
리스트 처리
- 페이징 기능
- DB 모델링

- 아이디어 회의 및 주제 선정
- 기획안 작성 및 초안 발표
- 데이터 사전 조사
- 화면 구성 및 역할 분담
- 데이터 모델링
- 각 페이지 구현
- 부트스트랩 적용
- 페이지 연결 보완
- 포트폴리오 작성
프로젝트 과정 및 방법
사전기획
08.05 ~ 08.18
개발
08.19 ~ 09.02
수정/보완
09.03 ~ 09.04
프로젝트 발표
09.18

프로젝트 과정 및 방법
Open weather map
- Current weather : 실시간 날씨
- Hourly forecast for 48 hours : 1, 2시간 후 날씨
Data API사용 Tool
# Data sample
"weather": [
{"id": 501,
"main": "Rain",
"description": "moderate rain",
"icon": "10n"
}]

프로젝트 결과 및 시연
데이터 모델링 결과
sido
PK sido_id int NOT NULL
sido_name char(10) NOT NULL
city
PK city_id int NOT NULL
FK1 sido_id int NOT NULL
city_name char(20) NOT NULL
Image
PK image_id int NOT NULL
FK2 city_id int NOT NULL
image_name char(20) NOT NULL
image_like int NOT NULL
image_dislike int NOT NULL
image_file file NOT NULL
image_cnt cnt NOT NULL
image_date date NOT NULL
세부 지역
이미지 접근

화면 구성(Main) 지역선택 (지도)
• 전국 단위 지도 레이어 생성 (sido.geojson 활용)
• 특정 시도 선택 시 해당 지역 지도 줌인 (sigungu.geojson 활용)
• 줌인/줌아웃할 때마다 geojson 변경
• 특정 도시 선택 시 팝업창이 생성됨
• Open API를 활용한 날씨정보와 조회수 1위
이미지를 보여줌
• 버튼 클릭 시, 피드 또는 업로드 페이지로 랜딩됨• sido.geojson : 시도 영역을 위경도로 구분해 놓음
• sigungu.geojson : 시군구 영역을 위경도로 구분해 놓음
참고)
회색영역
더블클릭 시
줌아웃
지역 클릭 시
줌인

화면 구성(Main) 지역선택(선택창) 및 TOP5 화면
• 지역명을 직접 선택해 피드/업로드 페이지로 이동 가능
• 오늘 이미지를 올린 사용자 수
• 정확도 = (맞아요수) / (맞아요수 + 틀려요수)
1
2 3
1
2
3
• 당일 인기 이미지 순위를 보여줌 (맞아요순)
• 이미지 클릭 시 상세 페이지로 이동

화면 구성(Main) 모바일
• 모바일 기기에서는 지도검색 기능 제외
• 모바일로 클릭, 줌인 기능을 사용하기 번거로움
• 모바일 환경에서의 최적화를 위해 지역 선택
기능은 지역명 선택창으로 통일
• PC 및 태블릿 환경에서는 지도 기능 사용 가능

사용자가 선택한 주소에 따라 Feed 게시판 구성
화면 구성(Feed) 당일 Feed
1
2
오늘 날짜와 현재 날씨
정렬 방법 선택
>> POST 방식
- 조회순
- 최신순
- 좋아요순
2
3
4
5
1
3
Upload 버튼: Upload page로 이동4
Feed 게시물
- 마우스 올려 놓으면 [작성자, 게시 일자, 맞아요 틀려요] 볼 수
있음.
- 클릭하면 Photo page로 이동
5

* Feed 레이아웃
: 화면 크기에 따라 한 줄에 게시글 1~3개로 구성
화면 구성(Feed) 과거 Feed
1
2
Show past feed
- 과거 feed를 불러오는 버튼
- GET방식으로 과거 feed를 포함하여 데이터를 다시 불러옴.
1
과거 feed
- 이전 게시물 중 해당 월의 게시물을 보여줌.
(OOTD 참고 목적에 부합)
2

화면 구성(photo)
1
3
2
게시된 사진1
2 게시물 정보
- 조회수
- 맞아요
- 틀려요
- 사용자이름
- 작성 날짜
3 목록, 페이징
- TOP5, 지역 선택, 정렬 방법에 따른 리스트
- 리스트 별 게시물 페이징

화면 구성(photo)
2 2 1
43
1 1
조회수
해당 photo페이지 랜딩시 증가
1
맞아요, 틀려요
- 클릭시 증가(색 변화)
- 맞아요와 틀려요는 하나만 선택 가능
2
작성자명3
4 게시물 작성 날짜
1 페이지 좌,우 버튼
- 정렬 방법에 따라 생성된 리스트의 페이지 선택
2 목록 버튼
- TOP5, 지역별 선택 등의 접근 페이지로 목록 전환

파일 제출(upload) 지역선택(상단) 및 예비선택 화면
• 지역명을 직접 선택해 예비 업로드 가능
• 화면 미리 보기 기능
• 제출자 정보 제출 기능
2
1
2
최종 제출시 파일 변환 가능 기능1
파일 형식,크기, 용량 제한 필터링
3

파일 제출(upload) 전송 및 FEED 창에서 확인
3

느낀점
이상지구혜인
김경한 류제룡
처음부터 모델링 구성을 완벽하게 했
기 때문에 각자 페이지를 구현해도
조합할 때 편리했습니다. 또한 각 페
이지별로 조원들의 피드백이 중요한
역할을 한 것 같습니다! 그리고 무엇
보다 조장님의 중요성을 다시 한번
깨닫게 된 프로젝트였습니다!
실용적인 주제의 프로젝트였다고 생각합니다. 지
도와 날씨 API를 사용하는 부분에서 많이 헤맸
지만, 그만큼 새로 배운 내용도 많았습니다. 막히
는 부분은 팀원들과 도움 주고받으며 큰 의지가
되었습니다. 다만, 시간이 조금 더 있었다면 더 세
부적인 기능을 구현해볼 수 있지 않았을까 하는
점이 아쉽습니다.
Html, Css, DB와 Git 까지 여러가지 지식
과 프로그램을 활용해가며 진행해서 좋았
고 팀원들끼리 서로 협동해 나가면서 문제
점을 개선하는 시간이 값진 시간이었습니
다. 어려웠던 점은 서로 연동되는 부분이
완성되야 다음단계로 넘어갈 수 있었던 것
이었고 화면공유를 통해 찾아가면서 해결
할 수 있었습니다.
프로젝트 진행과정 중 다른 페이지와 연동되는 부분이 많았는데, 팀
원들과 의견을 공유하고 도움을 받아 잘 해결할 수 있어서 좋았습니다.
개인적으로 Ajax를 활용하는 부분이 가장 어려웠고 HTML, CSS 등
전체적인 부분에서 스스로 미숙하다고 느껴졌습니다. 하지만 프로젝
트를 진행하면서 조금씩 실력이 향상되는 것이 느껴져 만족스러운 프
로젝트 기간이었습니다. 하지만 담당 페이지인 photo창을 모달 윈도
우으로 구현해보고 싶었는데 시간이 부족해 바꾸지 못한 점과 API를
활용해 보지 못한 부분이 아쉬움으로 남습니다. 막히는 부분 도와주신
팀원들에게 감사드립니다. 수고하셨습니다~!

OOTD project_web

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

OOTD project_web