Notice
Recent Posts
Recent Comments
Today
Total
03-29 01:50
Archives
관리 메뉴

Jeongchul Kim

딥러닝을 활용한 패션 유사 상품 추천 서비스 (2) Android app 개발 본문

Android

딥러닝을 활용한 패션 유사 상품 추천 서비스 (2) Android app 개발

김 정출 2017. 6. 27. 15:26


 

딥러닝을 활용한 패션 유사 상품 추천 서비스 (2) Android app 개발


딥러닝을 활용한 패션 유사 상품 추천 서비스 (1) 기획


본 프로젝트는 사용자가 직접 의류를 촬영하거나, 의류의 이미지로 검색하여 비슷한 상품을 추천하고 관련 쇼핑몰로 연계해주는 시스템을 개발하고자 한다. 디지털 이미지의 사용이 기하급수적으로 증가함에 따라, 텍스트에 의한 이미지 검색 방법이 한계에 이르게 되었다. 텍스트 검색은 키워드 기반 검색으로 가격, 브랜드, 색상 등과 같은 정형화된 속성만을 분류하여 찾을 수 있다. 시각적인 요소가 중요한 패션 분야에서는 텍스트 검색을 통해 찾은 결과가 사용자가 검색하려는 의도에 충족시키지 못한다. 텍스트 검색의 한계점을 보완하고자, 각 분야에서는 쉽게 제품 검색을 할 수 있도록 이미지 검색 기능과 유사한 이미지를 추천해주는 시스템을 개발하고 있다.


이를 위해 효과적으로 구축하기 위해서 딥러닝 기반의 컨볼루션 신경망(CNN; Convolutional Neural Network) 기술을 적용해 주어진 이미지 안에서 상품에 해당하는 영역을 자동으로 인식하고, 그 영역에서 검색에 필요한 각각의 요소(색상, 모양, 패턴)를 추출해 분류 과정을 거치고, 클러스터링 기법을 통해 가장 유사한 이미지 군을 추천하는 시스템을 개발한다.


프로젝트 환경

Android Studio 2.2.3, Android 4.4(KitKat) API 19


Android App

splash-activity

Application 실행 시 로고 화면을 띄운다.



login-activity

사용자가 로그인을 진행한다.

Google API를 이용해 LoginButton을 생성한다.

로그인을 성공 시에 SharedPreference(환경설정)에 사용자의 정보를 저장한다.


main-activity

메인 화면이다.

Sliding-Menu를 통해 사이드 메뉴를 열어 볼 수 있다.


search-activity

사용자가 앨범(Gallery)에서 이미지를 찾거나, 직접 사진을 촬영한다.

고르거나, 촬영된 이미지는 Crop을 통해 원하는 영역을 설정한다.

최종으로 ImageView에서 크롭된 사진이 보여진다.

Submit 버튼을 통해 서버로 전송되며, progress-bar를 통해 로딩 중임을 사용자에게 알린다.


result-navi-activity

서버에서 받아온 결과값(Top20)을 이미지와 텍스트로 보여준다.

이미지를 클릭하면 상세 확대된다. ScrollView을 통해 스크롤을 내릴 수 있다.


result-show-activity

상세 확대된 모습이다.

분류된 태그와 쇼핑몰, 가격, 상품명을 확인할 수 있다.

이동 버튼을 통해 해당 쇼핑몰로 이동할 수 있다.






APP UI

Project 생성

Minimum SDK : Android 4.4(KitKat) API 19


전체적인 UI에서 Main이 되는 부분을 사이드 슬라이딩 메뉴로 사용할 것입니다.

Navigation Drawer Activity를 선택합니다.


Finish 버튼을 클릭합니다.


Building을 합니다.


Project

Build가 완료되면 다음과 같은 구성이 보입니다.


Run app 버튼을 돌려 안드로이드 폰에서 실행을 합니다.

배포할 Target을 선택합니다.

안드로이드에서의 화면입니다.


SplashActivity

SplashActivity는 앱 시작과 함께 로고 화면을 보여주는 부분입니다.


java폴더에서 Activity에서 BasicActivity를 생성합니다.


AndroidManifest.xml

App에 manifests 디렉토리에서 AndroidManifest.xml을 수정합니다.

<activity>에서 SplashActivity 먼저 시작되므로 순서를 올리고 <intent-filter>를 <activity>안에 넣어줍니다.

<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

  package="kookmin.cs.msdj.forstyle">


  <application

      android:allowBackup="true"

      android:icon="@mipmap/ic_launcher"

      android:label="@string/app_name"

      android:supportsRtl="true"

      android:theme="@style/AppTheme">

      <activity

          android:name=".SplashActivity"

          android:label="@string/title_activity_splash"

          android:theme="@style/AppTheme.NoActionBar">

          <intent-filter>

              <action android:name="android.intent.action.MAIN" />


              <category android:name="android.intent.category.LAUNCHER" />

          </intent-filter>

      </activity>

      <activity

          android:name=".MainActivity"

          android:label="@string/app_name"

          android:theme="@style/AppTheme.NoActionBar">


      </activity>


  </application>


</manifest>


activity_splash.xml

SplashActivity의 layout을 수정해봅시다.

App의 이름과 App의 로고인 이미지를 넣어 심플하게 만들어보겠습니다.


우선 주어진 FloatingActionButton과 ToolBar을 삭제합니다.

<?xml version="1.0" encoding="utf-8"?>

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"

  xmlns:app="http://schemas.android.com/apk/res-auto"

  xmlns:tools="http://schemas.android.com/tools"

  android:layout_width="match_parent"

  android:layout_height="match_parent"

  android:fitsSystemWindows="true"

  tools:context="kookmin.cs.msdj.forstyle.SplashActivity">


  <android.support.design.widget.AppBarLayout

      android:layout_width="match_parent"

      android:layout_height="wrap_content"

      android:theme="@style/AppTheme.AppBarOverlay">


  </android.support.design.widget.AppBarLayout>


  <include layout="@layout/content_splash" />



</android.support.design.widget.CoordinatorLayout>


content_spalsh.xml

다음은 안으로 들어가는 content_splash 을 수정합니다.


배경의 색을 수정해봅시다.

android:background=”@color/colorPrimary” 로 입력하면 색이 변경됩니다.

@color는 values의 디렉토리에 colors.xml에 저장되어 있는 값입니다.

앱에서 주로 사용될 색을 입력해주고 불러다 사용하면 좋습니다.


사용할 App의 로고의 이미지를 저장해야합니다. res의 drawable 디렉토리에 붙여넣기 해야하며,

파일의 이름은 소문자로 저장해야합니다.

drawable에 Show in Explorer 버튼을 누르면 파일 탐색기가 실행됩니다.


저장할 이미지를 drawalbe에 붙여놓습니다.


TextView 텍스트 뷰와 ImageView 이미지 뷰를 생성합니다.


<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

  xmlns:app="http://schemas.android.com/apk/res-auto"

  xmlns:tools="http://schemas.android.com/tools"

  android:id="@+id/content_splash"

  android:layout_width="match_parent"

  android:layout_height="match_parent"

  android:paddingBottom="@dimen/activity_vertical_margin"

  android:paddingLeft="@dimen/activity_horizontal_margin"

  android:paddingRight="@dimen/activity_horizontal_margin"

  android:paddingTop="@dimen/activity_vertical_margin"

  android:background="@color/colorPrimary"

  app:layout_behavior="@string/appbar_scrolling_view_behavior"

  tools:context="kookmin.cs.msdj.forstyle.SplashActivity"

  tools:showIn="@layout/activity_splash"

  android:orientation="vertical"

  android:weightSum="1">


  <ImageView

      android:layout_marginTop="140dp"

      android:id="@+id/splashscreen"

      android:layout_width="200dp"

      android:layout_height="195dp"

      android:src="@drawable/app_logo_small"

      android:layout_gravity="center"

      />

  <TextView

      android:layout_width="wrap_content"

      android:layout_height="wrap_content"

      android:textSize="30dp"

      android:textColor="@color/colorWhite"

      android:textStyle="italic"

      android:layout_gravity="center"

      android:text="@string/app_name"/>


</LinearLayout>

SplashAcitivty.java

자 이제 SplashActivity.java 코딩을 합니다.


간략한 구조는 다음과 같습니다. Handler를 이용해 Runnable 객체를 생성하여 해야할 프로세스를 입력합니다.

LoginActivity를 생성하여 구글 로그인 API를 했는지 유무에 따라 화면을 달리할 예정입니다.

했는지 확인하기 위해 환경변수 SharedPreference를 사용합니다. 이 부분을 확인하여 다음의 이동할 Activity로 이동할 것입니다.


* SharedPreference : App에서 저장하고자 하는 key-value collection이 비교적 작은 경우에 사용되며, 간단한 메서드를 통해 공유 기본 설정 파일을 생성하고 액세스할 수 있습니다.


public class SplashActivity extends AppCompatActivity {


  // SPLASH 화면을 띄울 시간

  private final int SPLASH_DISPLAY_TIME = 2000;

 

  @Override

  protected void onCreate(Bundle savedInstanceState) {

      super.onCreate(savedInstanceState);

      setContentView(R.layout.activity_splash);

     

      new Handler().postDelayed(new Runnable() {

          @Override

          public void run() {

             

          }

      },SPLASH_DISPLAY_TIME);


  }


}


LoginActivity

이어서 LoginActivity도 생성합니다.


다음 포스트에서 Google Login API를 사용하여 로그인 버튼을 만들고, 사용자의 정보를 이용해 사진을 가져오고, 로그아웃 버튼 또한 만들어보겠습다.





Comments