클로젯에선 상의와 하의를 바꿔가며 옷을 배치할 수 있습니다. 옷 배치를 통해 서로 어울리는 옷을 찾을 수 있습니다. 마음에 드는 옷을 찾으셨나요? 구매도 가능합니다.
- 프로젝트명 : WEB_Closet_Solo
- 개발자 : 최형택([email protected])
- 팀명 : Closet
- 주요 내용 : Cover Flow를 활용한 옷 조합 찾기, 찾은 옷 구매
- 깃 주소 : https://github.com/osam2019/WEB_Closet_Solo
- 라이센스 : MIT License
- 2019 국방부오픈소스아카데미(OSAM) 공개SW 집체교육 WEB분야 산출물
- 개발 기간 : 2019-10-21 ~ 2019-10-24
클로젯은 옷장을 뜻하는 영어 단어 Closet에서 유래되었습니다. 가게에서 옷을 살때 입고 있는 옷과 어울리는지 거울을 보고 확인하듯, 클로젯은 웹 상에서 이를 가능하게 합니다.
옷을 사기 전에 다른 옷들과 어떻게 어울리는지 아는 것은 사실 모두에게 중요합니다.
우선, 구매 이후 옷에 대한 만족도와 직결 되기 때문에 소비자의 입장에서 중요합니다. 소비자의 만족도는 곧 브랜드 인식에 영향을 주기 때문에 의류 브랜드에게도 중요합니다. 만족하지 못해 사고 버리는 옷은 의류 폐기물로 처리되는데, 이는 환경에도 좋지 않기 때문에 생태계에 사는 모든 생명체에게 단기적/장기적 악영향을 끼칩니다.
기존의 산업 구조에선 옷을 사기 전에 나에게 어울리는지 판단하는건 개인의 패션 감각에 좌우되었습니다. 클로젯은 옷을 사기 전에 웹 상에서 서로 어울리는 옷을 찾을 수 있게 도와줍니다. 클로젯이 있으면 만족스러운 소비를 할 수 있고, 나, 우리, 그리고 생태계를 위한 건강하고 똑똑한 소비를 할 수 있습니다.
- JavaScript를 사용할 수 있는 Chrome과 같은 브라우저가 필요합니다. 개발 및 테스트는 Google Chrome에서 진행되었습니다.
- Node.js가 필요합니다.
npm install npm@latest -g를 터미널에 입력해 npm을 설치하면 최신 버전의 Node.js를 설치할 수 있습니다.
npm run serve를 입력해 로컬에서 실행할 수 있습니다.- Main화면에서 커버플로우의 이미지를 클릭하면 이미지를 넘길 수 있습니다.
- 이미지를 클릭해 중앙에 표시되는 이미지를 변경할 수 있습니다.
- 이미지의 하단에 옷의 상품 정보가 표시됩니다.
- Buy를 클릭하면 옷을 구매할 수 있는 사이트로 이동합니다.
- 로고 파일(svg형식) :
./src/assets - 이미지 파일 :
./src/assets/images - CSS 파일 :
./src/assets/css - JS 파일 :
./src/assets/scripts
- Vue.js : Evan You
- vue-coverflow : OrangeXC
- element-ui : Yi Yang
- Snake highlighter : Mikael Ainalem