connecting719600303.files.wordpress.com...제품컨셉 project concept introduction. project...

57
Hip er Connecting 박새연 방명인 서지호

Upload: others

Post on 06-Oct-2020

2 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: connecting719600303.files.wordpress.com...제품컨셉 Project Concept Introduction. Project Concept. Competitor Analysis • Instagram • Styleshare • Diesel Mania The Goal. Hip-er

Hip er

Connecting

박새연 방명인 서지호

Page 2: connecting719600303.files.wordpress.com...제품컨셉 Project Concept Introduction. Project Concept. Competitor Analysis • Instagram • Styleshare • Diesel Mania The Goal. Hip-er

목차

Connecting 박새연 | 방명인 | 서지호

1. 개요

• 제품 컨셉

• 유사 제품 분석

• 목표

2. 사용자 분석

• 인터뷰 계획

• 모델링

3. 어플 설계

• 요구사항 정리

• 사용자 경험 정의

• 시스템 설계

4. 화면 구성

• 우선 순위

• UI 맵

• 어플 이용 예시

• 와이어프레임

Page 3: connecting719600303.files.wordpress.com...제품컨셉 Project Concept Introduction. Project Concept. Competitor Analysis • Instagram • Styleshare • Diesel Mania The Goal. Hip-er

제품 컨셉

유사 제품 분석

목표

1 . 개요Introduction

Connecting 박새연 | 방명인 | 서지호

Page 4: connecting719600303.files.wordpress.com...제품컨셉 Project Concept Introduction. Project Concept. Competitor Analysis • Instagram • Styleshare • Diesel Mania The Goal. Hip-er

제품 컨셉 Project Concept

Int roduct ion

Project Concept

Competitor Analysis

• Instagram

• Styleshare

• Diesel Mania

The Goal

Hip-er가볍게 즐기는 스트리트 패션 커뮤니티

예상 사용자 Target User

SNS를 통해 패션 관련 컨텐츠를 즐기는 스트리트 브랜드 애호가

배경 Detai led

패션 관련 정보는 유명인이나 매체에 의한 영향이 크다.

일반인 사이의 자유로운 소통이 이루어지기 어렵다.

스트리트 브랜드는 다양한 취향이 존재한다.

원하는 정보만 공유할 수 있는 공간이 부재하다.

Page 5: connecting719600303.files.wordpress.com...제품컨셉 Project Concept Introduction. Project Concept. Competitor Analysis • Instagram • Styleshare • Diesel Mania The Goal. Hip-er

유사 제품 분석 Competitor Analysis

Int roduct ion

Project Concept

Competitor Analysis

• Instagram

• Styleshare

• Diesel Mania

The Goal

인스타그램 Instargram

(+) 직관적이고 간단한 인터페이스

(+) 사용자의 취향에 맞는 컨텐츠 제공

(-) 태그 1개로만 가능한 빈약한 검색 기능

(-) 패션과 무관한 정보가 섞여 있음

스타일쉐어 StyleShare

(+) 다양한 패션 관련 정보 제공

(+) 제품에 대한 정보를 얻기 쉬움

(-) 쇼핑몰에 등록되지 않은 정보를 얻기 힘듦

(-) 쇼핑에 편중된 기능과 과도한 광고

디젤매니아 Diesel Mania

(+) 사용자 간 의사소통이 활발함

(+) 게시판 기반의 강력한 검색 기능

(-) 많은 게시판과 글 작성 시 복잡한 인터페이스

(-) 사용자 취향이 반영되지 않는 글 목록

Page 6: connecting719600303.files.wordpress.com...제품컨셉 Project Concept Introduction. Project Concept. Competitor Analysis • Instagram • Styleshare • Diesel Mania The Goal. Hip-er

목표 The Goal of this Project

Int roduct ion

Project Concept

Competitor Analysis

• Instagram

• Styleshare

• Diesel Mania

The Goal

스트리트 패션 특화 SNS

- 사용자 친화적 컨텐츠 제공

- 손쉬운 정보 공유

- 피드 중심의 간소화된 인터페이스

Page 7: connecting719600303.files.wordpress.com...제품컨셉 Project Concept Introduction. Project Concept. Competitor Analysis • Instagram • Styleshare • Diesel Mania The Goal. Hip-er

인터뷰 계획

모델링

2 . 사용자 분석User Analysis

Connecting 박새연 | 방명인 | 서지호

Page 8: connecting719600303.files.wordpress.com...제품컨셉 Project Concept Introduction. Project Concept. Competitor Analysis • Instagram • Styleshare • Diesel Mania The Goal. Hip-er

인터뷰 계획 Preparing Interview

User Analysis

Preparing Interview

• Planning

• Preparing Questions

Modeling

• Qualitat ive Analysis

• Creating Persona

Page 9: connecting719600303.files.wordpress.com...제품컨셉 Project Concept Introduction. Project Concept. Competitor Analysis • Instagram • Styleshare • Diesel Mania The Goal. Hip-er

인터뷰 계획 Preparing Interview

User Analysis

Preparing Interview

• Planning

• Preparing Questions

Modeling

• Qualitat ive Analysis

• Creating Persona

스트리트 브랜드에 대한 선호를 파악하여 태그 및 검색

기능을 위한 내부 데이터를 결정한다.

경쟁 어플에서 불편한 요소를 파악하여 인터페이스 개선에

활용한다.

사용자가 주로 즐기는 패션 스타일을 파악한다.

Page 10: connecting719600303.files.wordpress.com...제품컨셉 Project Concept Introduction. Project Concept. Competitor Analysis • Instagram • Styleshare • Diesel Mania The Goal. Hip-er

인터뷰 계획 Preparing Interview

User Analysis

Preparing Interview

• Planning

• Preparing Questions

Modeling

• Qualitat ive Analysis

• Creating Persona

양적 데이터 수집이 아닌 질적 분석을 목표로 한다.

전체적인 질문이 유기적인 대화로 이어지도록

구성한다.

인터뷰 대상자의 답변에 따라 질문을 달리한다.

대상자의 답변 성향이나 인터뷰 환경 등 질문 외적

요소도 고려한다.

Page 11: connecting719600303.files.wordpress.com...제품컨셉 Project Concept Introduction. Project Concept. Competitor Analysis • Instagram • Styleshare • Diesel Mania The Goal. Hip-er

모델링 Modeling & Persona

User Analysis

Preparing Interview

• Planning

• Preparing Questions

Modeling

• Qualitat ive Analysis

• Creating Persona

C

E

F

D

B

A 최한OO / 남 / 27스트리트 패션

관심도

A 높음

B 높음

C 낮음

D 높음

E 보통

F 보통

윤OO / 남 / 28

박OO / 여 / 22

홍OO / 여 / 24

오OO / 여 / 24

임OO / 남 / 24

분석 시 유의사항

A는 전화로 짧은 시간 인터뷰를 진행하였다.

C는 스트리트 패션에 대한 관심도가 낮다.

E와 F는 지인이며 같은 곳에서 인터뷰를 순차적으로 진행하여 유사한 답변을 보였다.

Page 12: connecting719600303.files.wordpress.com...제품컨셉 Project Concept Introduction. Project Concept. Competitor Analysis • Instagram • Styleshare • Diesel Mania The Goal. Hip-er

모델링 Modeling & Persona

User Analysis

Preparing Interview

• Planning

• Preparing Questions

Modeling

• Qualitat ive Analysis

• Creating Persona

선호 브랜드 어플 이용 현황

• 마음에 드는 옷을 발견해도 나와 비슷한 체형의 사람들이

입은 모습이나 다른 옷과의 조합은 찾아보기 어렵다.

• 주로 등교길이나 자기 전 등 짧은 시간 가볍게 옷을 구경하

는 편이다.

• 인스타그램 셀럽들은 브랜드명만 태그로 올려놓아 검색이

불편하다.

• 바지를 내려 입거나 액세서리 착용 등 다양한 선호가 있다.

• 화면으로 담지 못 하는 핏이나 색감이 있다.

보고 싶은 종류의 옷 사진들을 가볍게 둘러보고 검색할 수 있으면 좋다.

정형화된 코디 시뮬레이션이나 세부적인 기능에는 회의적인 편

Page 13: connecting719600303.files.wordpress.com...제품컨셉 Project Concept Introduction. Project Concept. Competitor Analysis • Instagram • Styleshare • Diesel Mania The Goal. Hip-er

모델링 Modeling & Persona

User Analysis

Preparing Interview

• Planning

• Preparing Questions

Modeling

• Qualitat ive Analysis

• Creating Persona

Persona

이재현

24세 남성

홍익대 실용음악과 3학년

편집샵 알바 중

175cm, 63kg

행동 특성

• 스마트폰을 통해 옷 사진을 자주 구경한다.

• SNS에서 많은 스트리트 패션 모델들을 팔로우하

는 중이다.

• 패션에 관심 있는 사람을 자주 만나 정보를 얻는다.

환경

• 생활비가 제한적이라 옷을 자주 구매할 수 없다.

• 인스타그램과 인근의 클럽에서 다양한 브랜드

옷을 접할 수 있다.

문제점

• 고가의 옷은 매장에서 접할 수 없는 경우가 많다.

• 옷을 상세히 검색하기 어렵고, 인스타의 셀럽들은

대부분 나와 체형이 다르다.

• 피곤하거나 컨디션이 나쁠 때는 매장에서 옷을 구

경하기 힘들다.

기술 및 능력

• 스마트폰 어플 학습속도가 빠르며, 특히 인스타

그램의 인터페이스에 익숙하다.

최종 목표

• 원하는 옷 사진의 상세한 검색

• 취향에 맞는 패션 관련 정보들을 가볍게 즐기는 것

Page 14: connecting719600303.files.wordpress.com...제품컨셉 Project Concept Introduction. Project Concept. Competitor Analysis • Instagram • Styleshare • Diesel Mania The Goal. Hip-er

모델링 Modeling & Persona

User Analysis

Preparing Interview

• Planning

• Preparing Questions

Modeling

• Qualitat ive Analysis

• Creating Persona

Persona - Narrative Ver.

Page 15: connecting719600303.files.wordpress.com...제품컨셉 Project Concept Introduction. Project Concept. Competitor Analysis • Instagram • Styleshare • Diesel Mania The Goal. Hip-er

요구사항 정리

사용자 경험 정의

시스템 설계

3. 어플 설계Application Design

Connecting 박새연 | 방명인 | 서지호

Page 16: connecting719600303.files.wordpress.com...제품컨셉 Project Concept Introduction. Project Concept. Competitor Analysis • Instagram • Styleshare • Diesel Mania The Goal. Hip-er

요구사항 정리 Defining Requirements

Application Design

Requirements

• Requirement Matrix

• Mood Board

• Keywords

User Story Mapping

• Story Visualization

• Journey Map

System Design

• Use Cases

• Site Map

• Task Flowchart

항목 필요한 데이터 필요한 기능 고려사항

상황 1: 가입 및 로그인

사용자 계정 정보

인스타그램 로그인 정보

서버 내 데이터 저장

데이터 암호화 및 클라이언트 정보와의 비교

가입 절차는 최대한 간소화

필수 정보 외에는 생략 가능

상황 2: 피드 구경하기

가입 시 조사한 선호 브랜드 및

아티스트, 인스타 팔로우 목록

사용자의 활동 내역

팔로우 및 차단 정보

게시물을 서버에 저장할 내부 데이터베이스

피드 출력 알고리즘

인스타그램 셀럽 게시물 가져오기

게시물 상호작용 기능 (댓글, 공유, 저장 등)

상황 3: 원하는 글 저장

사용자가 저장한 게시물 목록 북마크한 게시물의 카테고리 분류 기능

사용자 특수성 관련 SNS 어플과 유사한 인터페이스 제공

최종 목표: 가벼운 패션 네트워크

피드 중심의 컨텐츠 순환

지나치게 많은 기능을 화면상에 표시하지 말

Page 17: connecting719600303.files.wordpress.com...제품컨셉 Project Concept Introduction. Project Concept. Competitor Analysis • Instagram • Styleshare • Diesel Mania The Goal. Hip-er

요구사항 정리 Defining Requirements

Application Design

Requirements

• Requirement Matrix

• Mood Board

• Keywords

User Story Mapping

• Story Visualization

• Journey Map

System Design

• Use Cases

• Site Map

• Task Flowchart

Page 18: connecting719600303.files.wordpress.com...제품컨셉 Project Concept Introduction. Project Concept. Competitor Analysis • Instagram • Styleshare • Diesel Mania The Goal. Hip-er

요구사항 정리 Defining Requirements

Application Design

Requirements

• Requirement Matrix

• Mood Board

• Keywords

User Story Mapping

• Story Visualization

• Journey Map

System Design

• Use Cases

• Site Map

• Task Flowchart

Page 19: connecting719600303.files.wordpress.com...제품컨셉 Project Concept Introduction. Project Concept. Competitor Analysis • Instagram • Styleshare • Diesel Mania The Goal. Hip-er

사용자 경험 정의 User Story Mapping

Application Design

Requirements

• Requirement Matrix

• Mood Board

• Keywords

User Story Mapping

• Story Visualization

• Journey Map

System Design

• Use Cases

• Site Map

• Task Flowchart

누워서 스마트폰을 보던 이재현 등교길에 봤던 옷을 떠올린다

옷의 특징들을 어플에 검색한 후 내 체형에 맞는 착용 사진들을 구경한다

Page 20: connecting719600303.files.wordpress.com...제품컨셉 Project Concept Introduction. Project Concept. Competitor Analysis • Instagram • Styleshare • Diesel Mania The Goal. Hip-er

사용자 경험 정의 User Story Mapping

Application Design

Requirements

• Requirement Matrix

• Mood Board

• Keywords

User Story Mapping

• Story Visualization

• Journey Map

System Design

• Use Cases

• Site Map

• Task Flowchart

메인 화면 탐색 게시물 상호작용어플 최초 실행

• 인스타그램 연동 가입

• 내 팔로잉 리스트로 패션 관련

인물 자동 필터링

• 원하는 인물 추가 가능 및 추

천 기능 (생략 가능)

• 선택된 인물들 중심으로 메인

화면 구성

• 메인화면에는 설정한 내용에

따라 게시글이 출력된다.

• 좋아하거나, 관심있는 게시글

은 “북마크”에 저장.

• 마음에 드는 옷 사진을 발

견했으나 정보가 없음. 공

유하여 질문글을 올리니 처

음 보는 사람이 답변해준다.

• 전체 게시물을 보다가 좋아

하는 스타일의 코디를 많이

올리는 사람이 있어 댓글로

소통하다가 팔로우한다.

HIP-ER

• 정보가 궁금한 상품의 종류

나 브랜드를 여러 태그로

검색할 수 있다.

• 가입 절차와 초기 설정이 간편하다

• 메인 화면 구성이 섬세하다

• 인스타그램과 비슷해 적응하기 쉽다

• 중복 검색과 원하는 정보 필터링 가능해 편리하다.

• 여론이나 인간관계에 신경쓰지 않고, SNS 정보만을

볼 수 있다.

• 스트릿 패션을 잘 아는 사

람들이 많은 것 같다.

• 스트릿 브랜드에 관심 있

는 사람들과 특정 아이템

에 대해 이야기 하는 것이

재미있다,

상품 검색하기 지속적 활용 단계

• 지속적인 필터링과 팔로워

추가로 메인 화면 리뉴얼.

• 세부적인 조정으로 점차 내

체형과 흡사해지는 아바타.

• 활발하고 신뢰할 수 있는

중고거래 기능.

• 다음날 입을 코디 저장.

• 브랜드별 신상 파악과 게시

판에서 아이템에 대한 논의

가능.

HIP-ER

• SNS의 사용자 친화적 인

터페이스와 패션 커뮤니티

의 전문성이 결합되어 있다.

Page 21: connecting719600303.files.wordpress.com...제품컨셉 Project Concept Introduction. Project Concept. Competitor Analysis • Instagram • Styleshare • Diesel Mania The Goal. Hip-er

사용자 경험 정의 User Story Mapping

Application Design

Requirements

• Requirement Matrix

• Mood Board

• Keywords

User Story Mapping

• Story Visualization

• Journey Map

System Design

• Use Cases

• Site Map

• Task Flowchart

메인 화면 탐색 게시물 상호작용어플 최초 실행

• 인스타그램 연동 가입

• 내 팔로잉 리스트로 패션 관련

인물 자동 필터링

• 원하는 인물 추가 가능 및 추

천 기능 (생략 가능)

• 선택된 인물들 중심으로 메인

화면 구성

• 메인화면에는 설정한 내용에

따라 게시글이 출력된다.

• 좋아하거나, 관심있는 게시글

은 “북마크”에 저장.

• 마음에 드는 옷 사진을 발

견했으나 정보가 없음. 공

유하여 질문글을 올리니 처

음 보는 사람이 답변해준다.

• 전체 게시물을 보다가 좋아

하는 스타일의 코디를 많이

올리는 사람이 있어 댓글로

소통하다가 팔로우한다.

HIP-ER

• 정보가 궁금한 상품의 종류

나 브랜드를 여러 태그로

검색할 수 있다.

• 가입 절차와 초기 설정이 간편하다

• 메인 화면 구성이 섬세하다

• 인스타그램과 비슷해 적응하기 쉽다

• 중복 검색과 원하는 정보 필터링 가능해 편리하다.

• 여론이나 인간관계에 신경쓰지 않고, SNS 정보만을

볼 수 있다.

• 스트릿 패션을 잘 아는 사

람들이 많은 것 같다.

• 스트릿 브랜드에 관심 있

는 사람들과 특정 아이템

에 대해 이야기 하는 것이

재미있다,

상품 검색하기 지속적 활용 단계

• 지속적인 필터링과 팔로워

추가로 메인 화면 리뉴얼.

• 세부적인 조정으로 점차 내

체형과 흡사해지는 아바타.

• 활발하고 신뢰할 수 있는

중고거래 기능.

• 다음날 입을 코디 저장.

• 브랜드별 신상 파악과 게시

판에서 아이템에 대한 논의

가능.

HIP-ER

• SNS의 사용자 친화적 인

터페이스와 패션 커뮤니티

의 전문성이 결합되어 있다.

옷 검색을 위한

SNS의 부수적 기능

상시 이용하는

패션 커뮤니티로 발전

Page 22: connecting719600303.files.wordpress.com...제품컨셉 Project Concept Introduction. Project Concept. Competitor Analysis • Instagram • Styleshare • Diesel Mania The Goal. Hip-er

시스템 설계 System Design

Application Design

Requirements

• Requirement Matrix

• Mood Board

• Keywords

User Story Mapping

• Story Visualization

• Journey Map

System Design

• Use Cases

• Site Map

• Task Flowchart

회원가입

로그인

피드 보기

글쓰기

태그 검색

북마크

프로필

팔로잉 관리

ClientServer

개인정보

선호 브랜드/셀럽

팔로잉 리스트

활동내역

회원정보

피드 출력 알고리즘

게시물 데이터

Page 23: connecting719600303.files.wordpress.com...제품컨셉 Project Concept Introduction. Project Concept. Competitor Analysis • Instagram • Styleshare • Diesel Mania The Goal. Hip-er

시스템 설계 System Design

Application Design

Requirements

• Requirement Matrix

• Mood Board

• Keywords

User Story Mapping

• Story Visualization

• Journey Map

System Design

• Use Cases

• Site Map

• Task Flowchart

Page 24: connecting719600303.files.wordpress.com...제품컨셉 Project Concept Introduction. Project Concept. Competitor Analysis • Instagram • Styleshare • Diesel Mania The Goal. Hip-er

시스템 설계 System Design

Application Design

Requirements

• Requirement Matrix

• Mood Board

• Keywords

User Story Mapping

• Story Visualization

• Journey Map

System Design

• Use Cases

• Site Map

• Task Flowchart

Page 25: connecting719600303.files.wordpress.com...제품컨셉 Project Concept Introduction. Project Concept. Competitor Analysis • Instagram • Styleshare • Diesel Mania The Goal. Hip-er

시스템 설계 System Design

Application Design

Requirements

• Requirement Matrix

• Mood Board

• Keywords

User Story Mapping

• Story Visualization

• Journey Map

System Design

• Use Cases

• Site Map

• Task Flowchart

Page 26: connecting719600303.files.wordpress.com...제품컨셉 Project Concept Introduction. Project Concept. Competitor Analysis • Instagram • Styleshare • Diesel Mania The Goal. Hip-er

시스템 설계 System Design

Application Design

Requirements

• Requirement Matrix

• Mood Board

• Keywords

User Story Mapping

• Story Visualization

• Journey Map

System Design

• Use Cases

• Site Map

• Task Flowchart

Page 27: connecting719600303.files.wordpress.com...제품컨셉 Project Concept Introduction. Project Concept. Competitor Analysis • Instagram • Styleshare • Diesel Mania The Goal. Hip-er

우선 순위

UI 맵

어플 이용 예시

와이어프레임

4 . 화면 구성Layout

Connecting 박새연 | 방명인 | 서지호

Page 28: connecting719600303.files.wordpress.com...제품컨셉 Project Concept Introduction. Project Concept. Competitor Analysis • Instagram • Styleshare • Diesel Mania The Goal. Hip-er

우선 순위 Prioritization List

Requirement Description Business Importance

User Importance

Technical Feasibility

Resource Feasibility

1 가입 및 자동 로그인이용을 위해 새로 가입 또는 인스타그램과 연동하여 가입 및 로그인한다

High Low High High

2 피드 출력사용자의 설정값과 활동 내역을 바탕으로, 내부 알고리즘에 따라 피드에 게시물을 출력한다

High High Low Medium

3 글쓰기게시물을 공유 또는 작성하여 서버 내 데이터에저장한다

High High High Medium

4 게시물 상호작용좋아요, 댓글, 태그 수정 등 게시물이 가진 정보와상호작용한다

High High High High

5 새 소식 보기자신 또는 자신의 게시물에 타 이용자가 상호작용할 경우 해당 정보를 표기하며 알림을 통해 알려준다

High High Medium High

6 프로필 보기자신 또는 다른 이용자의 공개 설정에 따라 프로필에 표시할 내용을 출력한다

Medium High High High

7 타 이용자 상호작용팔로우, 차단 등 사용자와 타 이용자와의 관계를설정 및 변경한다

Medium Medium High High

8 북마크 관리저장한 게시물을 모아서 다시 보거나, 저장 목록에서 분류 및 삭제할 수 있다

Medium High High Medium

9 개인정보 및 환경설정활동내역, 알림, 프로필 공개 범위 설정 등 각 클라이언트가 가진 정보를 사용자가 수정한다

Low Medium High High

Layout

Priorit ization List

UI Map

Scenario Sequences

Wireframe

Page 29: connecting719600303.files.wordpress.com...제품컨셉 Project Concept Introduction. Project Concept. Competitor Analysis • Instagram • Styleshare • Diesel Mania The Goal. Hip-er

우선 순위 Prioritization List

Requirement Description Business Importance

User Importance

Technical Feasibility

Resource Feasibility

1 가입 및 자동 로그인이용을 위해 새로 가입 또는 인스타그램과 연동하여 가입 및 로그인한다

High Low High High

2 피드 출력사용자의 설정값과 활동 내역을 바탕으로, 내부 알고리즘에 따라 피드에 게시물을 출력한다

High High Low Medium

3 글쓰기게시물을 공유 또는 작성하여 서버 내 데이터에저장한다

High High High Medium

4 게시물 상호작용좋아요, 댓글, 태그 수정 등 게시물이 가진 정보와상호작용한다

High High High High

5 새 소식 보기자신 또는 자신의 게시물에 타 이용자가 상호작용할 경우 해당 정보를 표기하며 알림을 통해 알려준다

High High Medium High

6 프로필 보기자신 또는 다른 이용자의 공개 설정에 따라 프로필에 표시할 내용을 출력한다

Medium High High High

7 타 이용자 상호작용팔로우, 차단 등 사용자와 타 이용자와의 관계를설정 및 변경한다

Medium Medium High High

8 북마크 관리저장한 게시물을 모아서 다시 보거나, 저장 목록에서 분류 및 삭제할 수 있다

Medium High High Medium

9 개인정보 및 환경설정활동내역, 알림, 프로필 공개 범위 설정 등 각 클라이언트가 가진 정보를 사용자가 수정한다

Low Medium High High

대부분의 기능은 SNS 혹은 커뮤니티 어플에서 구현된 것으로,

기술적인 장벽은 적을 것으로 예상된다.

Layout

Priorit ization List

UI Map

Scenario Sequences

Wireframe

Page 30: connecting719600303.files.wordpress.com...제품컨셉 Project Concept Introduction. Project Concept. Competitor Analysis • Instagram • Styleshare • Diesel Mania The Goal. Hip-er

우선 순위 Prioritization List

Requirement Description Business Importance

User Importance

Technical Feasibility

Resource Feasibility

1 가입 및 자동 로그인이용을 위해 새로 가입 또는 인스타그램과 연동하여 가입 및 로그인한다

High Low High High

2 피드 출력사용자의 설정값과 활동 내역을 바탕으로, 내부 알고리즘에 따라 피드에 게시물을 출력한다

High High Low Medium

3 글쓰기게시물을 공유 또는 작성하여 서버 내 데이터에저장한다

High High High Medium

4 게시물 상호작용좋아요, 댓글, 태그 수정 등 게시물이 가진 정보와상호작용한다

High High High High

5 새 소식 보기자신 또는 자신의 게시물에 타 이용자가 상호작용할 경우 해당 정보를 표기하며 알림을 통해 알려준다

High High Medium High

6 프로필 보기자신 또는 다른 이용자의 공개 설정에 따라 프로필에 표시할 내용을 출력한다

Medium High High High

7 타 이용자 상호작용팔로우, 차단 등 사용자와 타 이용자와의 관계를설정 및 변경한다

Medium Medium High High

8 북마크 관리저장한 게시물을 모아서 다시 보거나, 저장 목록에서 분류 및 삭제할 수 있다

Medium High High Medium

9 개인정보 및 환경설정활동내역, 알림, 프로필 공개 범위 설정 등 각 클라이언트가 가진 정보를 사용자가 수정한다

Low Medium High High

정교한 피드 알고리즘으로 원하는 게시물을 제공해야 한다.

핵심 기능인 동시에 지속적인 기술 향상이 필요

Layout

Priorit ization List

UI Map

Scenario Sequences

Wireframe

Page 31: connecting719600303.files.wordpress.com...제품컨셉 Project Concept Introduction. Project Concept. Competitor Analysis • Instagram • Styleshare • Diesel Mania The Goal. Hip-er

우선 순위 Prioritization List

Requirement Description Business Importance

User Importance

Technical Feasibility

Resource Feasibility

1 가입 및 자동 로그인이용을 위해 새로 가입 또는 인스타그램과 연동하여 가입 및 로그인한다

High Low High High

2 피드 출력사용자의 설정값과 활동 내역을 바탕으로, 내부 알고리즘에 따라 피드에 게시물을 출력한다

High High Low Medium

3 글쓰기게시물을 공유 또는 작성하여 서버 내 데이터에저장한다

High High High Medium

4 게시물 상호작용좋아요, 댓글, 태그 수정 등 게시물이 가진 정보와상호작용한다

High High High High

5 새 소식 보기자신 또는 자신의 게시물에 타 이용자가 상호작용할 경우 해당 정보를 표기하며 알림을 통해 알려준다

High High Medium High

6 프로필 보기자신 또는 다른 이용자의 공개 설정에 따라 프로필에 표시할 내용을 출력한다

Medium High High High

7 타 이용자 상호작용팔로우, 차단 등 사용자와 타 이용자와의 관계를설정 및 변경한다

Medium Medium High High

8 북마크 관리저장한 게시물을 모아서 다시 보거나, 저장 목록에서 분류 및 삭제할 수 있다

Medium High High Medium

9 개인정보 및 환경설정활동내역, 알림, 프로필 공개 범위 설정 등 각 클라이언트가 가진 정보를 사용자가 수정한다

Low Medium High High

그 외엔 서버 데이터베이스를 지속적으로 관리해야 하는 기능들에 어느 정도의

개발 인력이 요구된다.

Layout

Priorit ization List

UI Map

Scenario Sequences

Wireframe

Page 32: connecting719600303.files.wordpress.com...제품컨셉 Project Concept Introduction. Project Concept. Competitor Analysis • Instagram • Styleshare • Diesel Mania The Goal. Hip-er

UI 맵 UI Map

Layout

Priorit ization List

UI Map

Scenario Sequences

Wireframe

0 어플리케이션 초기 화면 및 로고 표출 어플리케이션 실행 시 첫 화면

1 아이디 입력 기존 회원의 경우, 아이디 입력

2 비밀번호 입력 기존 회원의 경우, 비밀번호 입력

3 로그인 로그인 실행

4 자동로그인 자동로그인 옵션 체크 기능

5 인스타그램 로그인 기존의 인스타그램 연동 가입 회원의 경우, 인스타그램연동 로그인 실행.

6 아이디/비밀번호 찾기 기존 회원의 회원 정보 찾기 기능

7 회원가입 신규 이용자의 일반 회원가입

8 인스타그램 회원가입 신규 이용자의 인스타그램 연동 회원가입

9 회원가입 정보 입력 신규 이용자의 일반 회원가입시, 회원 정보 입력 창

10 회원가입 신규 이용자의 일반 회원가입 완료 버튼

11 선호 셀럽 선택 신규 이용자의 일반 회원가입 시, 선호하는 스타일의셀럽 선택 기능

12 선호 브랜드 선택 신규 이용자의 일반 회원가입 시, 선호 스트릿 브랜드선택 기능

13 스킵 선호 셀럽/브랜드 설정을 원치 않을 경우 넘어가기

14 인스타그램 정보제공 동의 인스타그램 연동 가입시, 개인 정보 이용 동의의사 체크

15 셀럽/브랜드 리스트 수정 인스타그램 팔로잉 목록 중 자동 셀렉션된 패션 관련셀럽들의 목록을 선호에 맞게 수정

16 셀럽/브랜드 리스트 추가 인스타그램 팔로잉 목록 중 자동 셀렉션된 패션 관련브랜드들의 목록을 추가

17 넘어가기 수정 및 추가를 원치 않을 경우, 넘어가기 가능

18 아이디 찾기 아이디 분실 시, 아이디 찾기

19 닉네임 입력 아이디 분실 시, 가입 시 닉네임 입력

20 아이디 확인 아이디 찾기 확인

21 확인 아이디 확인

22 비밀번호 찾기 비밀번호 분실 시, 비밀번호 찾기

23 아이디 입력 비밀번호 분실 시, 가입 시 아이디 입력

24 비밀번호 확인 비밀번호 찾기 확인

25 확인 비밀번호 확인

Page 33: connecting719600303.files.wordpress.com...제품컨셉 Project Concept Introduction. Project Concept. Competitor Analysis • Instagram • Styleshare • Diesel Mania The Goal. Hip-er

UI 맵

기본 피드26

27 새로 고침

28 피드 필터링

28-1

29 카메라

30 갤러리

유사 체형만 보기

31 태그 검색

32 북마크

33 새 게시물 작성

34 새 게시물 작성

35 태그 확인

36 좋아요

37 댓글 작성

38 타 ID 프로필 방문

39 타 ID 팔로우 / 언팔로우

40

41

42

게시글 메뉴

게시글 메뉴 - 공유

게시글 메뉴 - 차단

43 타 ID 프로필 메뉴

Layout

Priorit ization List

UI Map

Scenario Sequences

Wireframe

UI Map

Page 34: connecting719600303.files.wordpress.com...제품컨셉 Project Concept Introduction. Project Concept. Competitor Analysis • Instagram • Styleshare • Diesel Mania The Goal. Hip-er

46

47

48

5150

49

44

52

45

54

55

57

56

58

59

60

53

UI 맵

44 계정 설정 계정의 세부 설정 입력 및 수정

45 피드 피드 화면으로 돌아갈 때 이용

46 북마크 목록 저장해둔 북마크 목록 확인

47 북마크 폴더 추가 저장해둔 북마크 사진들을 분류하여 정리할 수있는 폴더 생성

48 북마크 사진 추가 임의로 개인의 갤러리에서 사진 추가 가능

49 폴더 커버 설정 북마크 폴더의 커버를 개인 갤러리의 사진으로설정 가능

50 폴더명 입력 폴더명을 개인적으로 설정할 수 있음

51 폴더 아이콘 색상 설정 폴더 아이콘의 색상을 개인적으로 설정할 수 있음

52 프로필 사진 설정 계정의 프로필 사진을 설정

54 계정 공개 설정 계정의 공개 여부를 설정

55 푸시 알림 설정 계정의 푸시 알림 여부를 설정

56 확인 계정의 세부 설정 입력 및 수정 완료

57 활동 내역 삭제 설정 활동 내역의 삭제를 원할 시, 체크

58 계정 탈퇴 계정의 탈퇴를 원하는 경우 탈퇴 가능

59 계정 탈퇴 의사 재검토 탈퇴 의사를 재검토하여, 다시 생각하게 유도

60 계정 삭제 확인 계정 삭제 완료

53 세부 설정 수정 개인의 세부 정보 입력 및 수정

Layout

Priorit ization List

UI Map

Scenario Sequences

Wireframe

UI Map

Page 35: connecting719600303.files.wordpress.com...제품컨셉 Project Concept Introduction. Project Concept. Competitor Analysis • Instagram • Styleshare • Diesel Mania The Goal. Hip-er

어플 이용 예시 Scenario Sequences

Layout

Priorit ization List

UI Map

Scenario Sequences

Wireframe

1. 회원가입

초기 화면 로그인창에서 회원가입 클릭 회원정보 입력입력 시 자동으로 유효성 검사

피드 구성을 위해 선호하는셀럽/브랜드 선택(생략 가능)

알고리즘에 따라 피드 출력

Page 36: connecting719600303.files.wordpress.com...제품컨셉 Project Concept Introduction. Project Concept. Competitor Analysis • Instagram • Styleshare • Diesel Mania The Goal. Hip-er

어플 이용 예시 Scenario Sequences

Layout

Priorit ization List

UI Map

Scenario Sequences

Wireframe

1. 회원가입 (인스타그램 연동)

초기 화면 로그인창에서 회원가입 클릭 인스타그램 정보 제공 동의 팔로우 목록 중 어플 서버에등록된 셀럽들이 자동으로선택되며, 유저가 편집 가능

알고리즘에 따라 피드 출력

Page 37: connecting719600303.files.wordpress.com...제품컨셉 Project Concept Introduction. Project Concept. Competitor Analysis • Instagram • Styleshare • Diesel Mania The Goal. Hip-er

어플 이용 예시 Scenario Sequences

Layout

Priorit ization List

UI Map

Scenario Sequences

Wireframe

2. 피드 게시물 필터링 및 공유

피드에 표시할 게시물 선택나와 비슷한 체형만 보기 위해‘유사 체형만 보기’ 선택

내 체형 정보 입력 피드 게시물 구경 게시물 메뉴에서 저장 클릭 북마크에서 저장된 글 확인

Page 38: connecting719600303.files.wordpress.com...제품컨셉 Project Concept Introduction. Project Concept. Competitor Analysis • Instagram • Styleshare • Diesel Mania The Goal. Hip-er

어플 이용 예시 Scenario Sequences

Layout

Priorit ization List

UI Map

Scenario Sequences

Wireframe

3. 게시물 작성

피드 화면에서스크린 왼쪽으로 스와이프

카메라가 켜지며 사진 촬영생략 시 바로 글쓰기 가능

촬영된 사진 편집 게시물 내용 및 태그 작성갤러리에서 사진 선택 가능

작성이 완료되면 게시

갤러리

Page 39: connecting719600303.files.wordpress.com...제품컨셉 Project Concept Introduction. Project Concept. Competitor Analysis • Instagram • Styleshare • Diesel Mania The Goal. Hip-er

와이어프레임 Wireframe

로그인 정보 입력기존 회원의 경우, 아이디와 비밀번호 입력

1,2

1

2

로그인 / 인스타그램 로그인가입된 회원정보를 통해 로그인 실행

3,5

3

자동로그인자동로그인 옵션 체크 기능

44

5아이디/비밀번호 찾기기존 회원의 회원 정보 찾기 기능

6

회원가입신규 이용자의 회원가입일반 회원가입과 인스타 연동을 통한 가입 선택 가능

7,8

67

8

Layout

Priorit ization List

UI Map

Scenario Sequences

Wireframe

Page 40: connecting719600303.files.wordpress.com...제품컨셉 Project Concept Introduction. Project Concept. Competitor Analysis • Instagram • Styleshare • Diesel Mania The Goal. Hip-er

와이어프레임 Wireframe

Layout

Priorit ization List

UI Map

Scenario Sequences

Wireframe

회원가입 정보 입력신규 이용자의 일반 회원가입시, 회원 정보 입력 창 (아이디, 비밀번호, 닉네임)

회원가입

신규 이용자의 일반 회원가입 완료 버튼

99

10 10

Page 41: connecting719600303.files.wordpress.com...제품컨셉 Project Concept Introduction. Project Concept. Competitor Analysis • Instagram • Styleshare • Diesel Mania The Goal. Hip-er

와이어프레임 Wireframe

Layout

Priorit ization List

UI Map

Scenario Sequences

Wireframe

11

12

13

선호 셀럽 선택

신규 이용자의 일반 회원가입 시, 선호하는 스타일의 셀럽 선택 기능

선호 브랜드 선택

신규 이용자의 일반 회원가입 시, 선호 스트릿 브랜드 선택 기능

스킵정보 제공 원치 않을 경우, 넘어가기

11

12

13

Page 42: connecting719600303.files.wordpress.com...제품컨셉 Project Concept Introduction. Project Concept. Competitor Analysis • Instagram • Styleshare • Diesel Mania The Goal. Hip-er

와이어프레임 Wireframe

Layout

Priorit ization List

UI Map

Scenario Sequences

Wireframe

14 인스타그램 연동 정보 제공 동의

인스타그램 연동 가입시, 개인 정보 이용 동의 의사 체크

14

Page 43: connecting719600303.files.wordpress.com...제품컨셉 Project Concept Introduction. Project Concept. Competitor Analysis • Instagram • Styleshare • Diesel Mania The Goal. Hip-er

와이어프레임 Wireframe

Layout

Priorit ization List

UI Map

Scenario Sequences

Wireframe

셀럽/브랜드 리스트 수정인스타그램 팔로잉 목록 중 자동 셀렉션된 패션 관련 셀럽들의 목록을선호에 맞게 수정

셀럽/브랜드 리스트 추가인스타그램 팔로잉 목록 중 자동 셀렉션된 패션 관련 브랜드들의목록을 추가

15

17 넘어가기수정 및 추가를 원치 않을 경우, 넘어가기

16

15

17

16

Page 44: connecting719600303.files.wordpress.com...제품컨셉 Project Concept Introduction. Project Concept. Competitor Analysis • Instagram • Styleshare • Diesel Mania The Goal. Hip-er

18

20 21

19

와이어프레임 Wireframe

Layout

Priorit ization List

UI Map

Scenario Sequences

Wireframe

아이디 찾기

아이디 분실 시, 아이디 찾기

닉네임 입력아이디 분실 시, 가입 시 닉네임 입력

아이디 확인아이디 찾기 확인

확인아이디 확인 후 로그인창으로 돌아가기

19

20

21

18

Page 45: connecting719600303.files.wordpress.com...제품컨셉 Project Concept Introduction. Project Concept. Competitor Analysis • Instagram • Styleshare • Diesel Mania The Goal. Hip-er

와이어프레임 Wireframe

Layout

Priorit ization List

UI Map

Scenario Sequences

Wireframe

22비밀번호 찾기비밀번호 분실 시, 비밀번호 찾기

아이디 입력비밀번호 분실 시, 가입 시 아이디 입력

비밀번호 확인비밀번호 찾기 확인

22

25

2323

24

24

25

확인비밀번호 확인 후

로그인창으로 돌아가기

Page 46: connecting719600303.files.wordpress.com...제품컨셉 Project Concept Introduction. Project Concept. Competitor Analysis • Instagram • Styleshare • Diesel Mania The Goal. Hip-er

와이어프레임 Wireframe

Layout

Priorit ization List

UI Map

Scenario Sequences

Wireframe

Page 47: connecting719600303.files.wordpress.com...제품컨셉 Project Concept Introduction. Project Concept. Competitor Analysis • Instagram • Styleshare • Diesel Mania The Goal. Hip-er

와이어프레임 Wireframe

Layout

Priorit ization List

UI Map

Scenario Sequences

Wireframe

유사 체형만 보기 인기 게시물 위주 추천(기본값)

셀럽 게시글 제외

28-1키와 몸무게 입력

Page 48: connecting719600303.files.wordpress.com...제품컨셉 Project Concept Introduction. Project Concept. Competitor Analysis • Instagram • Styleshare • Diesel Mania The Goal. Hip-er

와이어프레임 Wireframe

Layout

Priorit ization List

UI Map

Scenario Sequences

Wireframe

피드로 이동 (뒤로가기)

새 게시물 업로드를 위한

카메라 접근

카메라

새 게시물 업로드를 위한

갤러리 접근

갤러리

29

30

카메라 촬영

사진 선택 33

카메라로 이동 (뒤로가기)

Page 49: connecting719600303.files.wordpress.com...제품컨셉 Project Concept Introduction. Project Concept. Competitor Analysis • Instagram • Styleshare • Diesel Mania The Goal. Hip-er

와이어프레임 Wireframe

Layout

Priorit ization List

UI Map

Scenario Sequences

Wireframe

카테고리, 브랜드, 이름 선택 / 직접 입력

새 게시물 작성 34

업로드

카메라 / 갤러리에서

가져온 이미지

26

34

Page 50: connecting719600303.files.wordpress.com...제품컨셉 Project Concept Introduction. Project Concept. Competitor Analysis • Instagram • Styleshare • Diesel Mania The Goal. Hip-er

와이어프레임 Wireframe

Layout

Priorit ization List

UI Map

Scenario Sequences

Wireframe

검색

태그 검색을 통한

게시물 필터링

태그 검색

키, 몸무게 입력

31

셀럽 사진에서 입력된 태그 확인태그 확인

사용자 게시글에 댓글 작성.

35

35

37

댓글 작성37

댓글 입력

Page 51: connecting719600303.files.wordpress.com...제품컨셉 Project Concept Introduction. Project Concept. Competitor Analysis • Instagram • Styleshare • Diesel Mania The Goal. Hip-er

와이어프레임 Wireframe

Layout

Priorit ization List

UI Map

Scenario Sequences

Wireframe

타 ID 프로필 메뉴

38타 ID 팔로우 / 언팔로우

39

타 ID 프로필로 이동

타 ID 프로필 방문

타 ID 팔로워 수치

44

Page 52: connecting719600303.files.wordpress.com...제품컨셉 Project Concept Introduction. Project Concept. Competitor Analysis • Instagram • Styleshare • Diesel Mania The Goal. Hip-er

와이어프레임 Wireframe

Layout

Priorit ization List

UI Map

Scenario Sequences

Wireframe

계정 설정계정의 세부 설정 입력 및 수정

피드피드로 돌아갈때 이용

북마크 목록저장해둔 북마크 목록 확인

44

45 46

44

46

45

Page 53: connecting719600303.files.wordpress.com...제품컨셉 Project Concept Introduction. Project Concept. Competitor Analysis • Instagram • Styleshare • Diesel Mania The Goal. Hip-er

와이어프레임 Wireframe

Layout

Priorit ization List

UI Map

Scenario Sequences

Wireframe

북마크 폴더 추가저장해둔 북마크 사진들을 분류항 정리할 수 있는 폴더 생성

북마크 사진 추가임의로 개인의 갤러리에서 사진 추가 가능

4747

4848

Page 54: connecting719600303.files.wordpress.com...제품컨셉 Project Concept Introduction. Project Concept. Competitor Analysis • Instagram • Styleshare • Diesel Mania The Goal. Hip-er

와이어프레임 Wireframe

Layout

Priorit ization List

UI Map

Scenario Sequences

Wireframe

50

51

폴더 커버 설정

북마크 폴더의커버 사진 설정

폴더명 입력폴더명을 개인적으로 설정할 수 있음

폴더 아이콘 색상 설정폴더 아이콘의 색상을 개인적으로설정할 수 있음

50

51

4949

Page 55: connecting719600303.files.wordpress.com...제품컨셉 Project Concept Introduction. Project Concept. Competitor Analysis • Instagram • Styleshare • Diesel Mania The Goal. Hip-er

와이어프레임 Wireframe

Layout

Priorit ization List

UI Map

Scenario Sequences

Wireframe

프로필 사진 설정계정의 프로필 사진을 설정

52

54

55

계정 공개 설정계정의 공개 여부를 설정

푸시 알림 설정계정의 푸시 알림 여부를 설정

확인계정의 세부 설정 입력 및 수정 완료

52

54

55

세부 설정 수정개인의 세부 정보 입력 및 수정

56 56

53

53

57

58

활동 내역 삭제 설정활동 내역의 삭제를 원할 시, 체크

계정 탈퇴계정의 탈퇴를 원하는 경우 탈퇴 가능

58

57

Page 56: connecting719600303.files.wordpress.com...제품컨셉 Project Concept Introduction. Project Concept. Competitor Analysis • Instagram • Styleshare • Diesel Mania The Goal. Hip-er
Page 57: connecting719600303.files.wordpress.com...제품컨셉 Project Concept Introduction. Project Concept. Competitor Analysis • Instagram • Styleshare • Diesel Mania The Goal. Hip-er

감사합니다Connecting

박새연 | 방명인 | 서지호