- SockSense 🧦 -
양말의 짝을 구분하지못해 불편함을 느끼는 시각장애인들의 니즈를 접했습니다.
대비되는 색감과 일관성 있는 디자인으로 시각장애인들의 접근성을 높였습니다.
페이지별 서비스 코치 마크와 함께 음성 가이드를 제공하여 시각장애인들의 편의성을 높였습니다.
촬영을 통해 양말 구분(짝이 올바른지) 및 양말과 성별에 어울리는 코디를 제공합니다.
추천받은 코디를 저장하여 원할 때 저장된 코디를 확인할 수 있습니다.
시각장애인을 위한 서비스이기에, 회원가입 없이 모바일웹으로 간편하게 이용 가능하도록 하였습니다.
Separation start Shoot one sock Shoot another sock Separation complete
양말 짝 구분 메인 페이지 입니다.
단계별로 안내해주며, 한쪽 양말을 먼저 촬영합니다.
다른 쪽 양말을 촬영합니다.
양말의 짝을 구분해줍니다.
Styling start Shoot sock Choose gender Styling complete
양말 코디 메인 페이지 입니다.
양말 촬영 완료 페이지 입니다.
본인의 성별을 선택합니다.
양말과 성별에 어울리는 코디를 추천해줍니다.
Coordination guide Coordination list Delete Coordination None Coordination
저장된 코디를 안내합니다.
저장된 코디 목록 페이지 입니다.
저장된 코디를 삭제합니다.
저장된 코디가 없음을 알립니다.
Frontend
Backend
Deployment
Other
- Frontend : React, React Query, JavaScript
- Backend : Spring Boot, Java, Django, Python, ChatGPT, OpenCV
- Frontend Deployment : AWS Amplify
- Backend Deployment : AWS Elastic Beanstalk, Heroku
- API Tool : Postman
- API Documentation : Swagger
- Version control : AWS S3, Github
Spring - API called by the frontend Django - Image processing API called by Spring backend ├── package-lock.json
├── package.json
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
├── src
│ ├── App.js
│ ├── api
│ │ ├── postFashion.jsx
│ │ └── postPair.jsx
│ ├── assets
│ │ ├── CameraPage
│ │ │ ├── Aim.svg
│ │ │ ├── Progress1.svg
│ │ │ ├── Progress2.svg
│ │ │ ├── Progress3.svg
│ │ │ ├── Shot.svg
│ │ │ ├── Storage.svg
│ │ │ ├── heart.svg
│ │ │ ├── oicon.jpeg
│ │ │ └── xicon.jpeg
│ │ ├── MainPage
│ │ │ ├── ActiveMan.png
│ │ │ ├── ActiveWoman.png
│ │ │ ├── Back.svg
│ │ │ ├── Black.png
│ │ │ ├── Blue.png
│ │ │ ├── Gray.png
│ │ │ ├── Green.png
│ │ │ ├── Man.png
│ │ │ ├── Orange.png
│ │ │ ├── Pants.png
│ │ │ ├── Progress1.png
│ │ │ ├── Progress2.png
│ │ │ ├── Progress3.png
│ │ │ ├── Purple.png
│ │ │ ├── Red.png
│ │ │ ├── Shoe.png
│ │ │ ├── Top.png
│ │ │ ├── White.png
│ │ │ ├── Woman.png
│ │ │ └── Yellow.png
│ │ ├── StartPage
│ │ │ ├── Logo.png
│ │ │ └── Logo.svg
│ │ ├── StoragePage
│ │ │ ├── Delete.png
│ │ │ └── null.svg
│ │ └── common
│ │ ├── Logo.png
│ │ └── Logo.svg
│ ├── component
│ │ ├── container
│ │ │ ├── CameraPage
│ │ │ │ ├── CameraContainer.jsx
│ │ │ │ ├── CameraPageContainer.jsx
│ │ │ │ └── ResultModalContainer.jsx
│ │ │ ├── MainPage
│ │ │ │ ├── MainCameraContainer.jsx
│ │ │ │ ├── MainPageContainer.jsx
│ │ │ │ ├── ResultSockColorContainer.jsx
│ │ │ │ └── SelectGenderContainer.jsx
│ │ │ ├── StartPage
│ │ │ │ └── LogoContainer.jsx
│ │ │ └── common
│ │ │ ├── StartRenderingContainer.jsx
│ │ │ └── data.jsx
│ │ └── presentation
│ │ ├── CameraPage
│ │ │ ├── Camera.jsx
│ │ │ ├── CameraInformation1.jsx
│ │ │ ├── CameraInformation2.jsx
│ │ │ ├── ResultModal.jsx
│ │ │ └── ServerModal.jsx
│ │ ├── MainPage
│ │ │ ├── Cody.jsx
│ │ │ ├── MainCamera.jsx
│ │ │ ├── ResultSockColor.jsx
│ │ │ ├── SelectGender.jsx
│ │ │ ├── ServerModal.jsx
│ │ │ └── Skelethone.jsx
│ │ ├── StartPage
│ │ │ └── Logo.jsx
│ │ └── common
│ │ └── StartRendering.jsx
│ ├── hooks
│ │ └── useTextToSpeech.jsx
│ ├── index.js
│ ├── pages
│ │ ├── CameraPage.jsx
│ │ ├── MainPage.jsx
│ │ ├── StartPage.jsx
│ │ └── StoragePage.jsx
│ └── styles
│ └── components
│ ├── CameraPage
│ │ ├── Camera.scss
│ │ ├── CameraInformation1.scss
│ │ ├── CameraInformation2.scss
│ │ ├── resultModal.scss
│ │ └── serverModal.scss
│ ├── MainPage
│ │ ├── Cody.scss
│ │ ├── MainserverModal.scss
│ │ ├── ResultSockColor.scss
│ │ ├── SelectGender.scss
│ │ └── Skelethone.scss
│ ├── StartPage
│ │ └── Logo.scss
│ ├── StoragePage
│ │ └── StoragePage.scss
│ └── common
│ └── StartRendering.scss
└── yarn.lock └── src
├── main
│ ├── generated
│ ├── java
│ │ └── com
│ │ └── smud
│ │ └── socksensespringproject
│ │ ├── SocksenseSpringProjectApplication.java
│ │ ├── config
│ │ │ └── SwaggerConfig.java
│ │ ├── controller
│ │ │ ├── PairController.java
│ │ │ ├── StylingController.java
│ │ │ └── TestController.java
│ │ ├── dto
│ │ │ ├── chatgpt
│ │ │ │ ├── ChatgptRequestDto.java
│ │ │ │ ├── ChatgptResponseDto.java
│ │ │ │ ├── Choice.java
│ │ │ │ ├── Message.java
│ │ │ │ └── Usage.java
│ │ │ ├── computervision
│ │ │ │ ├── OneImageRequestDto.java
│ │ │ │ ├── SimilarityResponseDto.java
│ │ │ │ ├── SockColorResponseDto.java
│ │ │ │ └── TwoImagesRequestDto.java
│ │ │ ├── pair
│ │ │ │ └── PairResponseDto.java
│ │ │ └── styling
│ │ │ ├── Styling.java
│ │ │ ├── StylingRequestDto.java
│ │ │ └── StylingResponseDto.java
│ │ ├── externalapi
│ │ │ ├── ChatCompletionClient.java
│ │ │ └── ComputerVisionClient.java
│ │ ├── response
│ │ │ ├── GlobalExceptionHandler.java
│ │ │ ├── ResponseCode.java
│ │ │ ├── ResponseData.java
│ │ │ ├── exeption
│ │ │ │ ├── GenderBadRequestException.java
│ │ │ │ ├── ImageCantReadException.java
│ │ │ │ └── ImagesBadRequestException.java
│ │ │ └── responseitem
│ │ │ ├── MessageItem.java
│ │ │ └── StatusItem.java
│ │ ├── service
│ │ │ ├── PairService.java
│ │ │ ├── StylingService.java
│ │ │ └── logic
│ │ │ ├── ChatCompletionServiceLogic.java
│ │ │ ├── ComputerVisionServiceLogic.java
│ │ │ ├── PairServiceLogic.java
│ │ │ └── StylingServiceLogic.java
│ │ └── util
│ │ └── MultipartJackson2HttpMessageConverter.java
│ └── resources
│ ├── application-chatgpt.properties
│ ├── application.properties
│ ├── static
│ └── templates
└── test
└── java
└── com
└── smud
└── socksensespringproject
└── SocksenseSpringProjectApplicationTests.java Backend_Django (Image Processing) ├── computervision
│ ├── __init__.py
│ ├── __pycache__
│ │ ├── __init__.cpython-311.pyc
│ │ ├── admin.cpython-311.pyc
│ │ ├── apps.cpython-311.pyc
│ │ ├── models.cpython-311.pyc
│ │ ├── urls.cpython-311.pyc
│ │ └── views.cpython-311.pyc
│ ├── admin.py
│ ├── apps.py
│ ├── migrations
│ │ ├── __init__.py
│ │ └── __pycache__
│ │ └── __init__.cpython-311.pyc
│ ├── models.py
│ ├── tests.py
│ ├── urls.py
│ └── views.py
├── db.sqlite3
├── manage.py
└── socksense
├── __init__.py
├── __pycache__
│ ├── __init__.cpython-311.pyc
│ ├── settings.cpython-311.pyc
│ ├── urls.cpython-311.pyc
│ └── wsgi.cpython-311.pyc
├── asgi.py
├── settings.py
├── urls.py
└── wsgi.py
사현진 정연재 유성민 김형섭 이정향
Team Leader, Backend Developer
Frontend Developer
Frontend Developer
Image Processing Engineer
Designer
