1. Find_Fine_Wine??
Find_Fine_Wine이라는 이름을 준 이유는 어감이 좋고 어쩌다 라임도 맞기 때문에 짓게 되었다.
[빠인ㄷ-빠인-와인]
영어를 잘 몰라서 문법에 관심은 두지 않았다. 뜻은 그저 생각나는대로 "괜찮은 와인 찾기"이다.
2. 프로젝트 계기&설명
계기
놀랍게도 나는 와인에 관심이 요만큼의 요만큼도 없었다. 사실 작년까지만 해도 와인에서 포도쥬스맛이 나는 줄 알았다. 그러다 와인에 푹 빠져사는 친구의 간접스러운 영향으로 어느정도 맛있게 먹는 정도??의 관심이 생겼을 뿐이었다.
생각없이 던진 돌이 이 친구에게 금으로 보일줄은 몰랐다. 이미 친구의 기대치는 맥시멈(maximum)상태였고 "그정도 쯤이야"라는 영양가 없는 자신감을 내뱉었다. 마침 내가 다니고있는 '스파르타코딩클럽'이라는 교육중에 '나의 프로젝트 만들기'라는 과제가 있었기때문에 자존심을 부합해 성공적으로 이 프로젝트를 완성해 내고야 말겠다.
설명
단순히 와인검색만 하는 것이 아닌, 가장 최근 수입된 와인들만 출력해 사용자에게 필요한 정보를 알려주는 목적이다. 아직 품종과 가격정보는 없지만 내 능력 한에서 가능한지의 여부를 보고 가능하다면 최대한 많은 정보를 사용자에게 알려주고자한다.
3. 레이아웃
┌ static(fold) - images, css, js
├ templates(fold) - index.html
├ app.py
└ app_crawling.py
- 디자인은 깔끔하게
-- 하얀색(주조색): 배경
-- 와인색(보조색 , vinicolor=#9d0325): 버튼, 마우스오버 등
-- 검정색(강조색): 글씨 - 메인 페이지 구조는 로고, 검색창, 푸터 등
- 결과 페이지 구조는 로고, 검색창, 결과창, 푸터 등
- 메인페이지의 로고와 검색창은 중앙에 위치, 검색 후 페이지에서는 로고와 검색창 상단에 고정(fixed)
4. 필요한 기능
필수 기능
- 로고 클릭 시 메인페이지로 이동
- 통합검색에는 한글명, 영문명, 제조국, 수입사, 와이너리, 수입일 중 하나의 목적으로 검색
-- 검색창 우측에 세부검색 드롭다운 버튼(toggle), 검색하기 버튼 - 통합검색에서 세부검색 버튼을 누르면 아래방향으로 드롭다운이 되어 세부검색이 가능하도록 만들기
-- style) display: flex, flex-direction: column - 키보드 Enter 키를 눌러도 검색이 가능하게끔
- 검색하면 나오는 출력 정보 : 한글명, 영문명, 제조국, 수입사, 와이너리(만들어진 양조장), 수입일(+ 품종, 가격도 추가 가능한지 보는 중)
- 기본적으로 출력 내용은 최근 수입일 순으로 정렬
- 드롭다운 옵션?(select Tag)으로 한글명, 영문명, 제조국, 수입사, 와이너리, 수입일 중에 하나를 선택해서 사용자가 원하는 정렬로 보여주기
- 검색 결과가 너무 많을 수도 있으니 리스트가 20개를 넘어가면 하단에 << < 1, 2, 3, 4, 5 > >> 형태로 페이지가 넘어갈 수 있도록 만들기
- 반응형 웹
- topbutton
-- style) position: fixed
간보는 기능
- 하나의 리스트(tr Tag)를 누르게 되면 세부정보(와인서처) 페이지로 이동하도록
- 개인 사용자마다 별점주기, 즐겨찾기 기능
- 각각 와인에 이미지 삽입(google images 사용?)
- 검색창 change event 최대 5개정도 자동완성 출력
- 메인 페이지에 와인관련 배너이미지 삽입
- 검색결과 출력 갯수 사용자 선택(select Tag)으로 나오게 하기(20, 50, 100)
5. 1주차 계획
- 2019-01-01 ~ 현재까지 수입된 와인의 데이터들(한글명, 영문명, 제조국, 수입사, 와이너리, 수입일)을 크롤링해서 db에 담아두기(갑자기 삭제될 수도 있으니 csv파일로 백업해두기)
- html 틀 잡고 디자인 좀 더 구상해보기
- 어느정도의 검색기능 구현해보기
- slack에 velog 주소 공유하기
