KR20200007311A - 온라인에서 옷 상품을 입히는 방법 및 사용자 인터페이스 - Google Patents

Abstract

온라인에서 옷 상품을 입히는 방법 및 사용자 인터페이스에 관한 것이다.

Description

온라인에서 옷 상품을 입히는 방법 및 사용자 인터페이스 {The method to put a cloth item in online and user interface}

본 발명은 온라인에서 모델 캐릭터에 옷 상품을 입히는 방법으로써 구체적으로는 모델에게 옷 상품을 직접 입힌 상태에서 사진 촬영을 하고 그 사진 데이터를 사진 편집기 프로그램을 이용하여 해당 옷 상품을 부분을 제외한 나머지 모델 부분 및 배경 부분을 투명하게 잘라내어 추출하는 방법 및 이 사진데이터를 이용하여 온라인 상에서 css3 언어의 z-index 기능을 사용해 사용자에게 선택한 옷이 자연스럽게 모델에게 입혀지도록 보여주는 사용자 인터페이스에 관한 것이다.

이미 온라인상에는 수많은 온라인 옷 쇼핑몰(이하, 쇼핑몰로 통칭함)들이 입점하고 있고, 차별화가 되지 않아 오직 가격과 품질만으로 승부하는 현 시점에서 사용자들은 새로운 감성을 얻고 싶은 충동을 느끼며 새로운 부가가치를 생성할 수 있는 서비스에 대한 니즈가 꾸준히 늘어가고 있다. 또한 실제로 옷을 입어볼 수 없는 온라인의 한계 상 사용자들은 오직 쇼핑몰에서 보여주는 착용 사진이나 옷의 사이즈별 치수를 표현해놓은 그림을 통해서만 자신이 입었을 때의 모습을 예측해보고 구매 결정을 해야 하기 때문에 훌륭한 의사결정도구가 없는 지금 억측을 통해 구매를 후회하거나 제품을 업체에 다시 반품하는 등 문제가 야기되고 있다. 그런 한편, 소비자가 상, 하의 등 복수의 제품을 구매해 그 제품들을 같이 입고 코디를 하고 싶을 때 그 모습을 나타내주는 시각적 자료가 없어 구매 후 실제 제품을 착용했을 때의 모양이 이쁘지 않거나 복수의 제품이 서로 조화를 이루지 않아 위와 마찬가지로 후회를 하고 반품을 하는 경우도 부지기수다. 따라서 실제 소비자들은 온라인으로의 구매보다 실제 치수를 보고 상품들을 비교해 볼 수 있는 오프라인을 통한 구매를 선호하는 경향이 있으며, 이러한 온라인 쇼핑몰의 한계점을 극복하지 못한다면 시간이 흘러 소매 시장에서 쇼핑몰 시장의 입지는 흔들릴 것이 분명하다.

또한 종래 기술들 중에 사용자들이 코디를 하게 하는 서비스들이 있는데, 그 경우 상품 사진들로만 코디를 할 수 있게 서비스를 제공하기 때문에 모델 캐릭터에 코디를 할 수 있게 하여 옷을 입히는 행위를 통해 시각적으로 사용자들에게 인터페이스를 제공한다면 분명 더 나은 자료를 제공할 수 있게 된다.

본 발명의 다른 목적은, 본 발명은 사용자들이 서비스를 이용할 때 상품 당 개별로 표시되어 있는 [입어 보기] 버튼을 클릭 시 해당 상품의 데이터가 가공 및 처리가 되어 캐릭터에 해당 상품을 입혀 볼 수 있는 시스템 및 방법을 제공하는 데 있다.

본 발명의 다른 목적은, 모델에 판매할려는 실제 상품을 직접 착용하고 사진을 찍고 실제 상품을 제외한 나머지 모델 부분과 배경 부분을 지워 사진 데이터를 얻는 방법에 있다.

본 발명의 다른 목적은, 사용자들이 나열되어 있는 여러 가지 상품들 중 원하는 상품을 선택한 후 제시되어 있는 캐릭터에 해당 상품을 입혀 보는 행위를 통하여 상품의 치수를 시각적으로 볼 수 있는 기회를 페이지의 불필요한 로드없이 제공하는 인터페이스를 구축하는 데 있다.

본 발명의 다른 목적은, 사용자들이 하나의 상품의 [입어 보기] 버튼을 클릭하였을 시 해당 상품의 상, 하의 등 종류를 파악하여 만약 종류가 상의였을 경우 상의 데이터 부분만 새로운 데이터로 바뀌져 기존에 다른 하의 등 종류의 [입어 보기] 버튼을 통해서 입혀져 있던 상품은 그대로 남아 있게 함으로써 사용자들에게 지속적으로 스타일링을 가능하게 하는 데에 있다.

전술한 목적을 이루고 종래기술의 문제점을 해결하기 위하여 본 발명의 상품의 사진 데이터(이하, 사진 데이터라 칭함)를 PNG(portable network graphics)형식의 사진 데이터로 만들어 실제 상품 사진부분을 제외한 나머지 부분은 투명하게 처리되어 사용자가 선택한 모델에 덧붙여 자연스럽게 입히게끔 보여주는 사용자 인터페이스에 있다. .

본 발명의 또 다른 일측에 따르면, 사진 데이터를 촬영할 때 실제 사용자가 선택 가능한 모델 각 각에 실제 데이터를 얻으려는 상품을 착용하고 촬영하여, 각 각 모델에 맞는 사진 데이터를 가공(도1)한 후에 사용자가 자신이 원하는 모델을 선택하였을 시 그 모델에 가공된 사진 데이터를 덧붙여 각 각 모델마다 자연스럽게 입히게끔 보여주는 사용자 인터페이스에 있다.

본 발명의 또 다른 일측에 따르면, 시연 영역은 <iframe> 태그로 이루어져 있다. 또한 사진 데이터 값은 상품 썸네일 각각에 <form>태그로 표현되어 있으며 해당 태그의 hidden속성을 이용하여 사용자들에게 데이터 값을 브라우저에서 시각적으로 보여주지 않는다. 사진 데이터를 시연 영역에 전달하는 과정에서 <iframe>태그의 target 속성 값을 onself로 하는 것을 통해 전달되기 때문에 브라우저 페이지의 전체적인 새로운 로드는 없으며, 오직 시연 영역의 로드만이 있다.

본 발명의 또 다른 일측에 따르면, 여러 사진 데이터를 시연 영역에 전달받은 상태에서 새로운 사진데이터를 전달 받았을 때, 시연 영역에서의 데이터 처리 과정을 통해 새로 전달받은 사진 데이터의 상의, 하의 등 상품 정보에 따라 이미 시연 영역에 전달받은 데이터 중 일치하는 사진 데이터만 변경되며, 나머지의 사진 데이터는 그대로 시연 영역에 남아있다.

상기한 바와 같이 본 발명은 html 및 스크립트 언어를 통해서 이루어져 있으며, 사진 데이터를 시연 영역에 송수신했을 때 <iframe> 태그의 속성과 <form> 태그의 속성을 활용한 사용자 편의의 페이지 인터페이스에 있다. 또한, 사용자가 선택한 모델의 정보와 사용자가 선택한 상품의 정보에 따라 시연 영역에서 사용자에게 시각적으로 해당 정보를 표현해주는데 있다. 그로인해 사용자는 자신이 선택한 상품의 치수를 시각적으로 볼 수 있으며, 여러 종류의 상품을 구매했을 때 그 상품들의 조화 등을 시각적으로 볼 수 있으며 다양한 옷들을 직접 코디하여 자신의 원하는 데로 스타일링 할 수 있다.

도면 1.
본 발명의 실시예에 의한 온라인상에서 사용자가 원하는 옷들을 자신이 선택한 모델에 입혀 보는 방법에 대한 흐름도이다.
S101는 사용자가 상품의 [입어 보기] 버튼을 누르면 시작된다.
S102는 전송 받은 상품 데이터가 상품의 종류가 알맞은가에 대해 판단하게 된다.
S103는 전송 받은 상품 데이터가 알맞을 경우 데이터베이스에서 사용자가 선택한
마네킹에서 얻을 수 있는 유저 정보로 사진 데이터를 가져온다.
S104는 데이터베이스에 해당하는 사진 데이터가 있는지 확인한다. 없을 경우 에러
메시지를 출력하고 있는 경우 S105로 넘어 간다.
S105는 추출한 사진 데이터 및 상품 데이터를 시연 영역에 전달한다.
S106는 전달받은 데이터를 토대로 시연 영역에서 데이터들을 가공 및 사용자에게 최종적으로 보여준다.
도면 2.
본 발명의 실시예에서 사진 데이터를 어떻게 만드는 지에 대한 방법이다.
실제 마네킹에 입힌 사진을 포토샵등을 이용해 실제 제품 부분(S202)만 남기고 나머지 부분(S201)은 전부 제거해 투명한 배경으로 만든다. 저장한 png파일 형식으로 저장한다.
도면 3.
본 발명의 실시예에 의한 온라인상에서 사용자가 원하는 옷들을 자신의 신체 사이즈에 적합한 마네킹에 입혀 보는 방법에 대한 실제 예이다.
S301부분에서 사용자가 요청과 함께 사진데이터 및 상품 정보를 보내면 S302와 같이 바지 상품이 입혀 진다. 또한 사용자가 상의 상품에 대한 또 다른 요청을 보내면 S303과 같이 S302부분의 바지와 함께 새로운 상품이 같이 입혀지는 걸 볼 수 있다. 만약 여기서 바지 상품을 요청하면 S304와 같이 전에 있던 바지 상품이 새로운 요청의 데이터로 변환된다. 상의 상품도 마찬가지이다. (S305)
도면 4
도면 3에서 기존에 있던 데이터와 상품 정보가 일치하는 새로운 데이터가 요청 되었을 때 발생하는 알고리즘의 처리과정이다.
도면 5
본 발명에서 홈페이지 상에서 상품 리스트를 표시할 때 상품 데이터를 표시하는 방법이다.
도면 6
사용자가 요청했을 때(S603)의 <iframe>태그 형식으로 되어
있는 시연영역(S601)으로 데이터는 송신 하는 일련의 과정(S602)을 표현한 그림이다.

이하, 첨부된 도면을 참조하여 본 발명에 따른 온라인상에서 사용자가 원하는 옷들을 자신의 신체 사이즈에 적합한 마네킹에 입혀 보는 방법에 대해 설명한다. 이 과정에서 도면에 도시된 사진은 실제와 달리 과장될 수 있으며 실제 부분과 완벽히 일치하지는 않을 수 있다. 또한 후술되는 용어들은 본 발명에서의 기능을 고려하여 정의된 용어들로서 이는 사용자, 운용자의 의도 또는 관례에 따라 달라질 수 있다. 그러므로, 이러한 용어들에 대한 정의는 본 명세서 전반에 걸친 내용을 토대로 내려져야 할 것이다.

도 1은 본 발명의 실시 예에 따른 온라인상에서 사용자가 원하는 옷들을 자신이 선택한 모델에 입혀 보는 방법에 대한 흐름도이다.

먼저 사용자들이 온라인 상에 위치한 메인 페이지에서 원하는 상품의 썸네일 부분에 위치한 [입어보기]버튼을 클릭하게 되면(S110), 해당 상품의 데이터가 시연 영역에서 구현이 가능한지의 여부를 판단한다. 이때, 상기 상황 판단의 조건의 사항으로는, 해당 상품이 시연 영역에서 처리 가능한 종류인지(S120)와 해당 상품에 맞는 알맞은 사진 데이터가 있는지(S140)이다. 시연 영역에서 처리가 불가능한 종류는 지갑, 양말, 등 일반적으로 사람의 전체적인 옷 코디를 보았을 때 비중이 크지 않아 겉으로 드러나지 않는 종류 혹은 귀걸이 같이 사람의 몸에 탈, 부착해야하는 상품 등이 있다. 위의 조건에 부합되지 않는 제품일 경우 프로그램은 다음 순서로 넘어가 유저 정보에 따른 사진 데이터를 가져오게 된다.(S103) 여기서 유저 정보란 처음 사이트를 방문한 고객이 체형별로 나눠져 있는 모델을 선택하게 됨으로써 얻게 되는데, 모델은 신장, 몸무게, 어깨 둘레와 허리 둘레 등으로 다양하게 구별되어 있고 사용자가 요청한 상품 데이터에서 만약 사용자가 모델1을 선택했다면 모델1에 해당되를 상품 사진 데이터를, 만약 사용자가 모델2를 선택했다면 모델2에 맞는 해당 상품 사진 데이터를 추출하게 된다.

만약 위 과정까지 마무리되면 이제 추출한 사진 데이터와 사용자가 선택한 상품의 상품 정보를 시연 영역으로 옮기게 되는데(S104) 시연 영역은 <iframe>태그 형식(도면 06참고)으로 이루어져 있으며 [입혀 보기] 버튼은 <form>태그의 ‘submit속성‘으로 이루어져 있으며 target으로 <iframe>태그로 구성되어 있는 시연 영역이 지정되어 있다. 따라서 데이터를 전송할 때 페이지의 전체적인 로드는 없고 오직 시연 영역만의 로드만이 있다.

시연 영역이 사진 데이터를 전송받게 되면 이제 받은 사진 데이터와 사용자가 선택한 상품 정보를 토대로 데이터를 가공하게 되는데(S160), 먼저 사용자가 선택한 상품 정보를 토대로 상품의 종류를 프로그램이 판별하게 되고 판별된 정보를 클라이언트로부터 서버에 세션 변수로 선언하게 된다. (도면 7참조) 이 때 클라이언트로부터 서버에 세션 변수로 선언된 변수의 수는 총 6개(상의, 하의, 신발, 모자, 가방 등)이고 한 번의 [입어보기]클릭 즉, 한 번의 사용자의 요청으로 6개의 변수를 모두 채우는 것은 아니고 여러 요청을 거치면서 점차 채워 나가는 것이다. 만약 한 번의 사용자의 요청으로 얻게 되는 상품 정보가 기존에 서버에 세션 변수로써 저장되어 있다면 FIFO방식(도면 5참조)을 차용하여 기존의 데이터를 새 데이터로 덮어 쓰게 된다.

또 한, 선택한 상품 정보를 토대로 데이터가 가공되었다면 본격적으로 같이 전송된 사진 데이터가 시연 영역에 시각적으로 표현되게 된다.(S170) 이 때 시연 순서 및 제어 등의 기준은 가공된 상품 데이터가 된다.

한 편, 몇 몇 종류의 상품을 제외하고는 각기 상품마다 가지게 될 상품의 사진 데이터에 대해 설명하겠다. 사진 데이터는 상품을 페이지에 등록할 때 상품 정보와 같이 데이터베이스에 저장될 것이며, 모델 별로 여러 장의 사진 데이터가 준비되어야 한다. 사진 데이터를 추출하는 방법은 실제 사진을 바탕으로 하며, 직접 모델 마다 해당 상품의 옷을 입힌 후 사진을 촬영하고 해당 사진을 사진 작업을 통해 제품 부분만 남기고 나머지는 선택 영역을 선택한 후 잘라 투명하게 만든 후 PNG형식의 그림 파일 형식으로 저장한다(도면2 참조).

이와 같이 사진 데이터를 얻게 되면 해당 사진의 배경은 전부 투명하기 때문에 만약 일정한 공간 안에 여러 사진 파일을 집어넣게 되더라도 겹치는 부분만을 제외하고는 여러 사진이 그 공간 안에서 표현이 가능하다.

한 편, 사용자가 [입어 보기] 버튼을 클릭하여 시연 영역에 표현된 사진 데이터와 상품 데이터들은 클라이언트로부터 서버에 세션 변수로 선언되어 저장되어 있다. 따라서 사용자가 [현재 코디 구매하기] 버튼과 [현재 코디 장바구니에 담기] 등을 통해 상품 구매에 편의성을 제공한다.

한 편, [입어 보기] 버튼을 메인 페이지에서 상품 각 각 마다 출력하는 방식은 각 각의 데이터를 받은 후 <form>태그 형식으로 출력해야하기 때문에 php의 echo 문법을 사용한다. (도면 참고5)

Claims (5)

1. 사용자가 선택가능한 모델 각각에 실제 제품을 입힌 다음 포토샵 등의 사진 편집 프로그램을 이용해 실제 제품 부분을 제외하고 나머지 부분은 잘라내기를 한 후 PNG파일 형식으로 데이터를 저장해서 실제 제품 부분을 제외하고는 나머지 부분이 전부 투명한 색으로 표현되게 사진 데이터를 추출하는 방법 (도면 2참고)
2. 시연 영역이 <iframe>태그의 target=onself 으로 되어 있고 <form>태그의 submit타입으로 데이터를 전송하기 때문에 데이터를 전송할 때 페이지의 전체적인 로드는 없고 부분적인 로드만 있는 방법
3. 청구항 2에 있어서
   <form>태그로 데이터를 가공하는 방법을 사용할 때, php의 echo문법을 사용해 <form>태그의 hidden속성으로 지정해 두어 사용자에게는 보이지 않게 post방식으로 시연 영역에 데이터를 전송하는 방법
4. 청구항 3에 있어서 추출한 사진 데이터를 청구항 3를 통해 시연 영역에 전송해 사용자가 원하는 제품을 자신이 선택한 모델에 입혀봄으로써 실제 제품의 치수 혹은 전체적인 스타일링 등을 보거나 할 수 있는 방법
5. 청구항 6에서 마찬 가지의 방식으로 데이터 값을 받은 후 새로운 데이터 값을 받았을 때 받은 상품 정보 데이터 값에 따라 이미 시연 영역에서 받아 가지고 있던 데이터 값 중 일치하는 데이터 값의 사진만 변경하는 방법(도면2,3 참고)

Images