[스타트] Shoe-ting 프로젝트

 

 

 

 

 

 

프로젝트 소개

 

#shoe #size #style

 

shoe-ting은 shoe와 meeting의 합성어로 사용자의 사이즈와 사용자의 스타일 사진을 기반으로

신발과 사이즈를 추천해주는 앱이다.

 

 

 

개발 아키텍쳐

 

 

프로젝트의 전반적인 구성

 

 

 

 

화면 구성도

 

 

사용자가 A4위에 자신의 발을 옮기고 사진을 찍으면 사용자의 발 사이즈를 측정해준다.

신발을 구매할 경우 해당 신발에 적합한 사이즈를 추천해준다.

 

 

 

사용자가 자신의 스타일 사진을 넣으면 스타일 분석을 해주고 해당 스타일과 어울리는 신발을 추천해준다.

 

프로젝트의 주요 기능은 

 

1) 사진으로 사용자의 발 사이즈를 측정하고,

2) 사용자가 사진을  업로드하면 해당 패션을 분석한 결과를 보여주고 해당 패션과 어울리는 신발을 추천해주는 것이다.

 

기능별 순서도는 다음과 같다.

 

1번 

사용자는 다음과 같이 자신의 발 사진을 2장씩, 총 4장을 올리면 사용자의 발 사이즈를 측정해준다.

원래는 A4와 비교하려고 하였으나 다른 물체와 비교하는 것을 시도해보고 있는 중이다.

 

 

 

 

사용자는 마이 페이지에서 자신의 발 사이즈 정보를 알 수 있다.

 

 

구매를 원하는 제품의 상세 페이지로 들어가면 자신의 발 사이즈에 적합한 신발 사이즈를 알 수 있다.

 

 

또한 다음과 같이 신발 상세 페이지를 가면 해당 신발에 적합한 자신의 사이즈를 알 수 있다.

 

2번

사용자가 자신의 스타일을 담은 전신 사진을 앱에 업로드 하면

위와 같이 사용자의 스타일을 분석해준다.

 

해당 스타일과 어울리는 신발을 추천받을 수 있다.

 

마이 페이지에서 자신의 스타일 분석 결과를 다시 볼 수 있다.

 

 

 

 

안드로이드 스튜디오 설치 과정 오류

 

내가 맡은 건 프론트엔드이다.

 

 

 

 reactnative를 사용하여 개발할 예정이기 때문에 다음 책을 기반으로 만들 계획이다.

 

 

 

 

내 노트북 운영체제가 window이므로 안드로이드 버전을 만들기로 했다.

 

그러나 작업 환경 설정 과정에서 

 

안드로이드 스튜디오  오류가 계속해서 발생했다.

 

일단 사용자 폴더가 한글로 되어있어서 안드로이드 스튜디오  sdk 파일 경로 설정에서 문제가 있었다.

 

안드로이드 스튜디오는 파일 경로에서 한글이 있으면 

"Your SDK location contains non-ASCII charactors"라는 에러가 발생한다.

 

안드로이드 스튜디오는 설치를 하면 기본적으로 로컬디스크의 사용자 폴더에 설치되는데 내 사용자 폴더명이 한글이었다.

 

처음에는 아예 사용자 폴더 이름을 바꿀려고 했지만 제대로 안되기도 했고

사용자 폴더 이름을 바꾸면 이전 이름일 때의 파일이 다 날라갈 수 있다고 하길래 포기했다.

 

 

그래서  mklink명령어를 사용하여 바로가기를 만들어서 해결하였다.

mklink 명령어를 사용하면 사용자 폴더 안에 안드로이드 sdk 파일이 설치되어도 경로를 우회할 수 있다.

 

다른 폴더를 지정하지 않고 바로가기를 만드는 이유는 나중에 에뮬레이터 실행 시 동일한 문제가 또 발생한다.

 

1) C:\users\사용자폴더명\appdata\local에 android 폴더를 만들고 그 안에 sdk 폴더를 만든다.

 

2) cmd를 관리자 권한으로 실행하고  아래 명령어를 실행한다.

mklink /d "C:\android-sdk" "C:/users/사용자폴더명/appdata/local/android/sdk"

해당 명령어가 잘 실행되면 기호화된 링크를 만들었다고 뜬다.

 

3) sdk 파일을 설치할 때 경로를 "C:\android-sdk"로 하면 된다.

 

 

환경변수 설정

 

1) 내pc에서 우클릭하여 속성을 누른다.

 

2) 시스템 창이 뜨면 좌측의 고급 시스템 설정을 누른 다음 , 환경변수 버튼을 누른다.

 

3) 환경 변수 창 > 시스템 변수> 새로 만들기 버튼을 클릭해 변수 이름을 ANDROID_HOME 으로 설정한다.

 

4) 변수 값으로 SDK의 기본 설치 경로를 넣는다.( 내 경우에는 C:\android-sdk이다.)

 

 

 

환경변수 설정도 처음 설치할 때 빼먹었는데 오류를 찾는 과정에서 보니 중요한 것 같다.

 

 

 

 

 

 

그 다음 에러는 리액트 네이티브에서 안드로이드 에뮬레이터를 실행하는 과정에서 발생했다.

 

(안드로이드 스튜디오의 시스템 이미지 선택은 가장 위에 있는 것을 했다.)

yarn android

 

visual studio code의 터미널에서 위와 같은 명령어를 실행하면 계속해서 아래와 같은 에러가 떴었다.

no emulators found as an output of `emulator -list-avds`

 

혹시 디바이스가 여러개 있는 걸로 인식해서 해당 문제가 발생하는 줄 알고   cmd에서 android-sdk의 platform-tools가 있는 파일로 이동하여 아래와 같은 명령어를 실행하였으나 연결된 디바이스도 한 개로 잘 되어있었다.

adb devices

 

위의 오류와 같이 에뮬레이터에서는 위와 같은 화면이 떴다.

 

그래서 또 해결책을 찾아봤다.

yarn android  //(2) 그 다음으로 이걸 해야한다.

npx react-native start  //(1) 이걸 먼저 하고

yarn android 하기 전에 리액트 네이티브를 start 해야한다길래  터미널에서 해당 명령어를 실행하였다.

하지만 다음과 같은 오류가 나타났다.

listen EADDRINUSE: address already in use :::8081

이미  8081 포트 번호를 쓰고 있다는 건데 윈도우의 경우 cmd 창에 다음과 같은 명령어를 입력하면 된다.

netstat -ano

그럼 현재 리스닝 하고 있는 포트와 PID를 알 수 있는데 해당 PID와 일치하는 프로세스를 작업 관리자의 세부사항에 들어가서 종료하면 된다.

 

 

그런 다음 에뮬레이터를 실행하고 리액트 네이티브를 다시 실행하였다.

 

제대로 실행될 경우, 위와 같은 에뮬레이터 화면을 볼 수 있다 . 여기까지 오는데 힘들었다.

 

중간에 책과 다르게 expo를 쓸까 고민하긴 했었다.

 

이번에 작업 환경 설정을 하면서 깨달은 건 사용자 계정은 무조건 영어로 하자는 거였다.

 

우리 팀 프로젝트 이름 한번 넣어봤다.

 

일단 페이지별로 만들어야겠다.