- Sock Sense 🧦 -
시각장애인을 위한 양말 판별 및
맞춤형 코디 추천 서비스
양말의 짝을 구분하지못해 불편함을 느끼는 시각장애인들의 니즈를 접했습니다.
이에 그들의 일상생활 속 시각 정보 격차를 해소할 수 있는 양말 판별 및 양말 맞춤형 코디 추천 서비스를 개발하게 되었습니다.
- 대비되는 색감과 일관성 있는 디자인으로 시각장애인들의 접근성을 높였습니다.
- 페이지별 서비스 코치 마크와 함께 음성 가이드를 제공하여 시각장애인들의 편의성을 높였습니다.
- 촬영을 통해 양말 구분(짝이 올바른지) 및 양말과 성별에 어울리는 코디를 제공합니다.
(영상 처리를 통한 양말 이미지 분석과 ChatGPT를 활용한 코디 추천) - 추천받은 코디를 저장하여 원할 때 저장된 코디를 확인할 수 있습니다.
- 시각장애인을 위한 서비스이기에, 회원가입 없이 모바일웹으로 간편하게 이용 가능하도록 하였습니다.
| 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
Frontend : Open!
├── 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
Backend_Spring (Business) : Open!
└── 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) : Open!
├── computervision
│ ├── admin.py
│ ├── apps.py
│ ├── models.py
│ ├── tests.py
│ ├── urls.py
│ └── views.py
├── db.sqlite3
├── manage.py
└── socksense
├── asgi.py
├── settings.py
├── urls.py
└── wsgi.py
| 사현진 | 정연재 | 유성민 | 김형섭 | 이정향 |
|---|---|---|---|---|
 |
 |
 |
 |
 |
| Team Leader, Backend Developer | Frontend Developer | Frontend Developer | Image Processing Engineer | Designer |
