Search
Duplicate
📎

팝업스토어 가상피팅 서비스 기획 및 S/W 개발

📂
클라이언트 : 서울시청 작업기간 : 2019.11 - 2020.3 과제목표 : DDP 하이서울쇼룸에 설치될 가상피팅 S/W 컨트롤 앱 디자인 및 개발 참여역할 : 기획자, 개발자, 매니저

📋 프로젝트 소개

이 프로젝트는 ‘동대문 상권 활성화’라는 목표로 진행된 서울시 주관 프로젝트였습니다. 주요 태스크는 동대문 디자인 플라자(DDP) 내 하이서울쇼룸에 ‘마이스타일랩’이라는 팝업 스토어를 오픈하여 방문자들을 대상으로 코디 큐레이션과 가상피팅(옷) 경험을 제공하는 것이었고, 이를 위해 다양한 조직이 협업하여 여러 개의 프로덕트 를 개발하였습니다. 저는 이 프로젝트에 깊이 관여하면서, 복수의 프로덕트에서 기획 및 개발 등의 업무를 수행하였습니다.
DDP에 설치된 가상피팅 소프트웨어

🎬 전체 시나리오 구동 영상

📋 관련 자료

📌
프로덕트별 수행 역할 : 1)가상 피팅 소프트웨어 - 전문가의 의견을 바탕으로 서베이 문항 작성 - 전문가의 의견을 바탕으로 코디 추천 로직 개발 2)가상피팅 컨트롤 앱 - 앱 전체 기획, 디자인 매니징 - (서버 통신, UDP 통신 포함) 앱 전체 개발 3)데이터베이스 - 데이터베이스 초기 구조 정의 - 온라인 스토리지, 관리자 페이지 리소스 관리 4)미디어 인스톨레이션 - 세션 이미지 업로드, 동적 웹 페이지 생성 매니징 - DB업로드, QR연동 컴퍼넌트 개발 및 배포 5)웹 서베이/메일링 서비스 - 기획 및 UI 설계 - 디자인, 퍼블리싱 과정 매니징 6)카탈로그 소프트웨어 - 앱 전체 기획, 디자인과 개발 전 과정 매니징 - 500여벌 의상 리소스 관리

🔎 프로덕트를 매개로 소통하다

이 프로젝트에서 저는 주 업무였던 컨트롤 앱 기획/개발 업무 말고도 다양한 프로덕트에서 기획 업무를 진행하였습니다. 위쪽에 정리한 것이 제가 맡았던 프로덕트별 주요 업무들입니다. 당시 프로젝트의 상황을 설명하자면, 핵심 프로덕트였던 가상 피팅 소프트웨어 개발에 많은 인력이 투입되는 바람에 그 외의 프로덕트 개발의 총괄을 맡을 사람이 필요했습니다. 기획 업무를 주로 하던 제가 자연히 그 역할을 맡게 되었습니다.
다양한 프로덕트의 기획/디자인/개발을 직접 컨트롤해야 했었는데, 프로덕트가 많았던 만큼 정신이 없었던 것 같습니다. 프로덕트를 매개로 수 많은 소통을 했습니다. UX팀, GUI팀, Frontend팀, Backend팀, 그리고 PM그룹 등 사내 여러 팀에서 일하는 십 수명의 작업자들과 의견을 나누며 프로덕트를 만들었습니다. 저는 디자인과 개발 각 분야에서 사용되는 용어와 개념을 충분히 이해하고 있었고 실무자들의 작업 편의성을 배려하였습니다. 프로덕트에 대한 다양한 저의 역량을 확인했던 좋은 기회였습니다.

🔎 다양한 기획 내용을 문서화하다

기획을 진행하면서 다양한 역할과 목적을 가진 문서들을 작성하였습니다. 문서 일부는 서울시 보고용으로 사용되기도 하였습니다. 일부 페이지를 첨부해보았습니다. 문서보기

🔎 가상피팅 컨트롤 앱을 기획하고 개발하다

가상피팅 컨트롤 앱을 설계하고 개발했던 작업에 대해 소개하려고 합니다. 태블릿에 설치하여 사용하는 이 앱은 가상피팅 기기와 통신으로 연결되어 있습니다. 방문객들은 이 앱을 아용하여 패션 서베이를 진행하고, 서버에 저장되어 있는 코디 중에 수집된 서베이 내용을 바탕으로 계산된 개인화된 코디를 추천받게 됩니다. 오른쪽의 데모 영상을 보시면 쉽게 이해하실 수 있는데, 영상에서 태블릿으로 구동하는 컨트롤 앱을 기획하고 개발까지 진행했습니다.

🔎 사용 플로우에 맞는 UI를 설계하다

아래와 같은 이슈를 고려하며 사용자 플로우에 맞는 UI 설계를 하였습니다.
1~5번 페이지 GUI
Search
Page
설명
UI&GUI
Issue
Solution
사용자에게 ‘서베이 바로 진행’과 ‘이전에 진행한 서베이 불러오기’의 두 가지 선택지를 제공합니다.
로그인 copy.pngIdle-2 Copy 4.png
가로형과 세로형 중에 더 좋은 레이아웃 타입을 선택하는 것이 중요한 이슈였습니다.
이를 위해 타겟 디바이스의 인체공학적인 측면에서의 사용성과 앱에서 주로 제공하는 이미지들의 포맷 등을 종합적으로 고려한 결과, 세로형 타입으로 정하게 되었습니다.
2. 서베이 - 기본정보 입력
Open
사용자의 자신의 패션 관련 정보 수집하기 위해 여러 질문들을 제공합니다.
서베이1 copy.pngCuratorH 추천코디피팅 2 Copy 2.png
수많은 객관식 보기를 마주해야 하는 사용자의 피로감을 최소한으로 느끼게 하는 것이 중요한 이슈였습니다.
이를 위해 서베이 문항을 세 그룹으로 분리하여 제공하고 웜업/쿨다운 문항을 앞뒤로 제공하여 피로감을 줄였습니다. 또한 터치하기 쉽고 이미지를 결합할 수 있는 형태의 버튼을 고안하여 직관적이고 신속한 입력을 유도하였습니다.
3. 서베이 - 스타일 정보 입력
Open
사용자의 선호 패션 스타일을 파악하기 위해 코디 이미지들을 제공하여 점수를 받습니다.
서베이2 copy.pngCuratorH 추천코디피팅 2 Copy 3.png
사용자와 패션 스타일의 매칭 정확도를 높이는 것이 중요한 이슈였습니다.
이를 위해 평가 방식으로 5점 척도를 사용하였고, 아래와 같은 워딩을 고안하여 제공하였습니다. 1점 : 입고 싶지 않은 스타일이다 2점 : 시도해보고 싶은 스타일이다 3점 : 가끔 입는 스타일이다 4점 : 자주 입는 스타일이다 5점 : 늘 입는 스타일이다
4. 추천받은 코디 확인
Open
서베이를 마친 사용자에게 개인화된 코디 세 벌을 추천합니다. 화면을 스와이프 하여 다음 코디를 확인합니다.
큐레이션 copy.pngCuratorH 추천코디피팅 4 Copy 16.png
서버에 저장되어있는 여러 의상 데이터를 페이지 내에 요소들에 연결시켜 표현하는 것이 중요한 이슈였습니다.
어드민 페이지와 서버 데이터를 직접 관리했고, 앱 개발 또한 직접 진행하면서 데이터를 받아오는 코드 역시 직접 작성했기 때문에 여러 번의 테스트를 해보며 해당 페이지의 완성도를 높였습니다.
5. 큐레이션 종합과 공유하기
Open
사용자는 큐레이션 받은 코디 3벌에 대한 정보를 확인합니다. 추천받은 내용을 공유할 수 있습니다.
종합 copy.pngCuratorH 추천코디피팅 4 Copy 20.png
큐레이션 받은 세 벌의 코디를 한 눈에 보이도록 배치하고, 공유 액션을 유도하는 것이 중요한 이슈였습니다.
코디 정보 부분을 컴포넌트화 시켜서 어떤 조합의 코디가 오든지 일관된 레이아웃을 유지하도록 하였고, 다음 페이지로 넘어가는 맥락을 가진 최 하단에 공유하기 버튼을 활성화 시켜 공유 액션을 유도했습니다.

🔎 처음으로 상용 앱을 개발하다 <가상피팅 컨트롤 앱 개발>

위에서 설계한 가상피팅 컨트롤 앱을 직접 개발까지 하였습니다. 제가 설계한 앱을 스스로 개발까지 한 경우는 처음이었습니다. 기획 의도를 스스로 알고 있으므로 커뮤니케이션에 걸리는 시간이 없었던 것은 좋았지만, 여러 가지 의미로 외로웠던 것 같습니다.
이 앱은 다수의 사용자를 타겟으로 하는 앱이었습니다. 이전까지는 주로 한두 명의 사용자를 위한 검증용, 시연용 프로토타입 앱을 개발했었는데, 이렇게 실제로 배포되는 상용 앱을 개발한 것도 저에게는 처음이었습니다. 상용 앱이었기 때문에 훨씬 더 안정적으로 구동되어야 했습니다. 오른쪽에 이 앱에 포함된 개발 이슈를 정리해봤습니다. 가상 피팅 서비스의 전 과정을 관장해야 하는 컨트롤 앱이기에 수많은 기능을 개발해야 했고, 그동안 쌓은 앱 개발 노하우를 모두 활용했던 것 같습니다.
👨🏻‍💻
해결한 주요 개발 이슈 1) 서버와 실시간으로 통신하며 데이터를 주고 받도록 개발했습니다. - 수백 벌의 의상 데이터 다운로드, 서베이 입력 내용과 평가 점수 업로드 등을 처리했습니다. 2) 서베이 내용에 따라 가장 잘 어올릴 것 같은 코디를 계산해주는 로직을 개발했습니다. - 55개의 정성적인 서베이 물음을 정량화시키고, 각 코디마다 선호도가 계산되도록 처리했습니다. 3) 가상 피팅 기기와 끊김 없이 통신되도록 개발했습니다. - 가상피팅 기기에서 사용자가 피팅해야 할 코디를 정확히 띄우도록 처리했습니다. (UDP 통신 개발) 4) 이 외에 계정 로그인, 다국어 전환, 안드로이드 로컬 저장소 활용 등의 이슈를 직접 개발했습니다.
End of page
TOP