connecting719600303.files.wordpress.com...제품컨셉 project concept introduction. project...
TRANSCRIPT
Hip er
Connecting
박새연 방명인 서지호
목차
Connecting 박새연 | 방명인 | 서지호
1. 개요
• 제품 컨셉
• 유사 제품 분석
• 목표
2. 사용자 분석
• 인터뷰 계획
• 모델링
3. 어플 설계
• 요구사항 정리
• 사용자 경험 정의
• 시스템 설계
4. 화면 구성
• 우선 순위
• UI 맵
• 어플 이용 예시
• 와이어프레임
제품 컨셉
유사 제품 분석
목표
1 . 개요Introduction
Connecting 박새연 | 방명인 | 서지호
제품 컨셉 Project Concept
Int roduct ion
Project Concept
Competitor Analysis
• Styleshare
• Diesel Mania
The Goal
Hip-er가볍게 즐기는 스트리트 패션 커뮤니티
예상 사용자 Target User
SNS를 통해 패션 관련 컨텐츠를 즐기는 스트리트 브랜드 애호가
배경 Detai led
패션 관련 정보는 유명인이나 매체에 의한 영향이 크다.
일반인 사이의 자유로운 소통이 이루어지기 어렵다.
스트리트 브랜드는 다양한 취향이 존재한다.
원하는 정보만 공유할 수 있는 공간이 부재하다.
유사 제품 분석 Competitor Analysis
Int roduct ion
Project Concept
Competitor Analysis
• Styleshare
• Diesel Mania
The Goal
인스타그램 Instargram
(+) 직관적이고 간단한 인터페이스
(+) 사용자의 취향에 맞는 컨텐츠 제공
(-) 태그 1개로만 가능한 빈약한 검색 기능
(-) 패션과 무관한 정보가 섞여 있음
스타일쉐어 StyleShare
(+) 다양한 패션 관련 정보 제공
(+) 제품에 대한 정보를 얻기 쉬움
(-) 쇼핑몰에 등록되지 않은 정보를 얻기 힘듦
(-) 쇼핑에 편중된 기능과 과도한 광고
디젤매니아 Diesel Mania
(+) 사용자 간 의사소통이 활발함
(+) 게시판 기반의 강력한 검색 기능
(-) 많은 게시판과 글 작성 시 복잡한 인터페이스
(-) 사용자 취향이 반영되지 않는 글 목록
목표 The Goal of this Project
Int roduct ion
Project Concept
Competitor Analysis
• Styleshare
• Diesel Mania
The Goal
스트리트 패션 특화 SNS
- 사용자 친화적 컨텐츠 제공
- 손쉬운 정보 공유
- 피드 중심의 간소화된 인터페이스
인터뷰 계획
모델링
2 . 사용자 분석User Analysis
Connecting 박새연 | 방명인 | 서지호
인터뷰 계획 Preparing Interview
User Analysis
Preparing Interview
• Planning
• Preparing Questions
Modeling
• Qualitat ive Analysis
• Creating Persona
인터뷰 계획 Preparing Interview
User Analysis
Preparing Interview
• Planning
• Preparing Questions
Modeling
• Qualitat ive Analysis
• Creating Persona
스트리트 브랜드에 대한 선호를 파악하여 태그 및 검색
기능을 위한 내부 데이터를 결정한다.
경쟁 어플에서 불편한 요소를 파악하여 인터페이스 개선에
활용한다.
사용자가 주로 즐기는 패션 스타일을 파악한다.
인터뷰 계획 Preparing Interview
User Analysis
Preparing Interview
• Planning
• Preparing Questions
Modeling
• Qualitat ive Analysis
• Creating Persona
양적 데이터 수집이 아닌 질적 분석을 목표로 한다.
전체적인 질문이 유기적인 대화로 이어지도록
구성한다.
인터뷰 대상자의 답변에 따라 질문을 달리한다.
대상자의 답변 성향이나 인터뷰 환경 등 질문 외적
요소도 고려한다.
모델링 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는 지인이며 같은 곳에서 인터뷰를 순차적으로 진행하여 유사한 답변을 보였다.
모델링 Modeling & Persona
User Analysis
Preparing Interview
• Planning
• Preparing Questions
Modeling
• Qualitat ive Analysis
• Creating Persona
선호 브랜드 어플 이용 현황
• 마음에 드는 옷을 발견해도 나와 비슷한 체형의 사람들이
입은 모습이나 다른 옷과의 조합은 찾아보기 어렵다.
• 주로 등교길이나 자기 전 등 짧은 시간 가볍게 옷을 구경하
는 편이다.
• 인스타그램 셀럽들은 브랜드명만 태그로 올려놓아 검색이
불편하다.
• 바지를 내려 입거나 액세서리 착용 등 다양한 선호가 있다.
• 화면으로 담지 못 하는 핏이나 색감이 있다.
보고 싶은 종류의 옷 사진들을 가볍게 둘러보고 검색할 수 있으면 좋다.
정형화된 코디 시뮬레이션이나 세부적인 기능에는 회의적인 편
모델링 Modeling & Persona
User Analysis
Preparing Interview
• Planning
• Preparing Questions
Modeling
• Qualitat ive Analysis
• Creating Persona
Persona
이재현
24세 남성
홍익대 실용음악과 3학년
편집샵 알바 중
175cm, 63kg
행동 특성
• 스마트폰을 통해 옷 사진을 자주 구경한다.
• SNS에서 많은 스트리트 패션 모델들을 팔로우하
는 중이다.
• 패션에 관심 있는 사람을 자주 만나 정보를 얻는다.
환경
• 생활비가 제한적이라 옷을 자주 구매할 수 없다.
• 인스타그램과 인근의 클럽에서 다양한 브랜드
옷을 접할 수 있다.
문제점
• 고가의 옷은 매장에서 접할 수 없는 경우가 많다.
• 옷을 상세히 검색하기 어렵고, 인스타의 셀럽들은
대부분 나와 체형이 다르다.
• 피곤하거나 컨디션이 나쁠 때는 매장에서 옷을 구
경하기 힘들다.
기술 및 능력
• 스마트폰 어플 학습속도가 빠르며, 특히 인스타
그램의 인터페이스에 익숙하다.
최종 목표
• 원하는 옷 사진의 상세한 검색
• 취향에 맞는 패션 관련 정보들을 가볍게 즐기는 것
모델링 Modeling & Persona
User Analysis
Preparing Interview
• Planning
• Preparing Questions
Modeling
• Qualitat ive Analysis
• Creating Persona
Persona - Narrative Ver.
요구사항 정리
사용자 경험 정의
시스템 설계
3. 어플 설계Application Design
Connecting 박새연 | 방명인 | 서지호
요구사항 정리 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 어플과 유사한 인터페이스 제공
최종 목표: 가벼운 패션 네트워크
피드 중심의 컨텐츠 순환
지나치게 많은 기능을 화면상에 표시하지 말
것
요구사항 정리 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
요구사항 정리 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
사용자 경험 정의 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
누워서 스마트폰을 보던 이재현 등교길에 봤던 옷을 떠올린다
옷의 특징들을 어플에 검색한 후 내 체형에 맞는 착용 사진들을 구경한다
사용자 경험 정의 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의 사용자 친화적 인
터페이스와 패션 커뮤니티
의 전문성이 결합되어 있다.
사용자 경험 정의 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의 부수적 기능
상시 이용하는
패션 커뮤니티로 발전
시스템 설계 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
개인정보
선호 브랜드/셀럽
팔로잉 리스트
활동내역
회원정보
피드 출력 알고리즘
게시물 데이터
시스템 설계 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
시스템 설계 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
시스템 설계 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
시스템 설계 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
우선 순위
UI 맵
어플 이용 예시
와이어프레임
4 . 화면 구성Layout
Connecting 박새연 | 방명인 | 서지호
우선 순위 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
우선 순위 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
우선 순위 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
우선 순위 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
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 확인 비밀번호 확인
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
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
어플 이용 예시 Scenario Sequences
Layout
Priorit ization List
UI Map
Scenario Sequences
Wireframe
1. 회원가입
초기 화면 로그인창에서 회원가입 클릭 회원정보 입력입력 시 자동으로 유효성 검사
피드 구성을 위해 선호하는셀럽/브랜드 선택(생략 가능)
알고리즘에 따라 피드 출력
어플 이용 예시 Scenario Sequences
Layout
Priorit ization List
UI Map
Scenario Sequences
Wireframe
1. 회원가입 (인스타그램 연동)
초기 화면 로그인창에서 회원가입 클릭 인스타그램 정보 제공 동의 팔로우 목록 중 어플 서버에등록된 셀럽들이 자동으로선택되며, 유저가 편집 가능
알고리즘에 따라 피드 출력
어플 이용 예시 Scenario Sequences
Layout
Priorit ization List
UI Map
Scenario Sequences
Wireframe
2. 피드 게시물 필터링 및 공유
피드에 표시할 게시물 선택나와 비슷한 체형만 보기 위해‘유사 체형만 보기’ 선택
내 체형 정보 입력 피드 게시물 구경 게시물 메뉴에서 저장 클릭 북마크에서 저장된 글 확인
어플 이용 예시 Scenario Sequences
Layout
Priorit ization List
UI Map
Scenario Sequences
Wireframe
3. 게시물 작성
피드 화면에서스크린 왼쪽으로 스와이프
카메라가 켜지며 사진 촬영생략 시 바로 글쓰기 가능
촬영된 사진 편집 게시물 내용 및 태그 작성갤러리에서 사진 선택 가능
작성이 완료되면 게시
갤러리
와이어프레임 Wireframe
로그인 정보 입력기존 회원의 경우, 아이디와 비밀번호 입력
1,2
1
2
로그인 / 인스타그램 로그인가입된 회원정보를 통해 로그인 실행
3,5
3
자동로그인자동로그인 옵션 체크 기능
44
5아이디/비밀번호 찾기기존 회원의 회원 정보 찾기 기능
6
회원가입신규 이용자의 회원가입일반 회원가입과 인스타 연동을 통한 가입 선택 가능
7,8
67
8
Layout
Priorit ization List
UI Map
Scenario Sequences
Wireframe
와이어프레임 Wireframe
Layout
Priorit ization List
UI Map
Scenario Sequences
Wireframe
회원가입 정보 입력신규 이용자의 일반 회원가입시, 회원 정보 입력 창 (아이디, 비밀번호, 닉네임)
회원가입
신규 이용자의 일반 회원가입 완료 버튼
99
10 10
와이어프레임 Wireframe
Layout
Priorit ization List
UI Map
Scenario Sequences
Wireframe
11
12
13
선호 셀럽 선택
신규 이용자의 일반 회원가입 시, 선호하는 스타일의 셀럽 선택 기능
선호 브랜드 선택
신규 이용자의 일반 회원가입 시, 선호 스트릿 브랜드 선택 기능
스킵정보 제공 원치 않을 경우, 넘어가기
11
12
13
와이어프레임 Wireframe
Layout
Priorit ization List
UI Map
Scenario Sequences
Wireframe
14 인스타그램 연동 정보 제공 동의
인스타그램 연동 가입시, 개인 정보 이용 동의 의사 체크
14
와이어프레임 Wireframe
Layout
Priorit ization List
UI Map
Scenario Sequences
Wireframe
셀럽/브랜드 리스트 수정인스타그램 팔로잉 목록 중 자동 셀렉션된 패션 관련 셀럽들의 목록을선호에 맞게 수정
셀럽/브랜드 리스트 추가인스타그램 팔로잉 목록 중 자동 셀렉션된 패션 관련 브랜드들의목록을 추가
15
17 넘어가기수정 및 추가를 원치 않을 경우, 넘어가기
16
15
17
16
18
20 21
19
와이어프레임 Wireframe
Layout
Priorit ization List
UI Map
Scenario Sequences
Wireframe
아이디 찾기
아이디 분실 시, 아이디 찾기
닉네임 입력아이디 분실 시, 가입 시 닉네임 입력
아이디 확인아이디 찾기 확인
확인아이디 확인 후 로그인창으로 돌아가기
19
20
21
18
와이어프레임 Wireframe
Layout
Priorit ization List
UI Map
Scenario Sequences
Wireframe
22비밀번호 찾기비밀번호 분실 시, 비밀번호 찾기
아이디 입력비밀번호 분실 시, 가입 시 아이디 입력
비밀번호 확인비밀번호 찾기 확인
22
25
2323
24
24
25
확인비밀번호 확인 후
로그인창으로 돌아가기
와이어프레임 Wireframe
Layout
Priorit ization List
UI Map
Scenario Sequences
Wireframe
와이어프레임 Wireframe
Layout
Priorit ization List
UI Map
Scenario Sequences
Wireframe
유사 체형만 보기 인기 게시물 위주 추천(기본값)
셀럽 게시글 제외
28-1키와 몸무게 입력
와이어프레임 Wireframe
Layout
Priorit ization List
UI Map
Scenario Sequences
Wireframe
피드로 이동 (뒤로가기)
새 게시물 업로드를 위한
카메라 접근
카메라
새 게시물 업로드를 위한
갤러리 접근
갤러리
29
30
카메라 촬영
사진 선택 33
카메라로 이동 (뒤로가기)
와이어프레임 Wireframe
Layout
Priorit ization List
UI Map
Scenario Sequences
Wireframe
카테고리, 브랜드, 이름 선택 / 직접 입력
새 게시물 작성 34
업로드
카메라 / 갤러리에서
가져온 이미지
26
34
와이어프레임 Wireframe
Layout
Priorit ization List
UI Map
Scenario Sequences
Wireframe
검색
태그 검색을 통한
게시물 필터링
태그 검색
키, 몸무게 입력
31
셀럽 사진에서 입력된 태그 확인태그 확인
사용자 게시글에 댓글 작성.
35
35
37
댓글 작성37
댓글 입력
와이어프레임 Wireframe
Layout
Priorit ization List
UI Map
Scenario Sequences
Wireframe
타 ID 프로필 메뉴
38타 ID 팔로우 / 언팔로우
39
타 ID 프로필로 이동
타 ID 프로필 방문
타 ID 팔로워 수치
44
와이어프레임 Wireframe
Layout
Priorit ization List
UI Map
Scenario Sequences
Wireframe
계정 설정계정의 세부 설정 입력 및 수정
피드피드로 돌아갈때 이용
북마크 목록저장해둔 북마크 목록 확인
44
45 46
44
46
45
와이어프레임 Wireframe
Layout
Priorit ization List
UI Map
Scenario Sequences
Wireframe
북마크 폴더 추가저장해둔 북마크 사진들을 분류항 정리할 수 있는 폴더 생성
북마크 사진 추가임의로 개인의 갤러리에서 사진 추가 가능
4747
4848
와이어프레임 Wireframe
Layout
Priorit ization List
UI Map
Scenario Sequences
Wireframe
50
51
폴더 커버 설정
북마크 폴더의커버 사진 설정
폴더명 입력폴더명을 개인적으로 설정할 수 있음
폴더 아이콘 색상 설정폴더 아이콘의 색상을 개인적으로설정할 수 있음
50
51
4949
와이어프레임 Wireframe
Layout
Priorit ization List
UI Map
Scenario Sequences
Wireframe
프로필 사진 설정계정의 프로필 사진을 설정
52
54
55
계정 공개 설정계정의 공개 여부를 설정
푸시 알림 설정계정의 푸시 알림 여부를 설정
확인계정의 세부 설정 입력 및 수정 완료
52
54
55
세부 설정 수정개인의 세부 정보 입력 및 수정
56 56
53
53
57
58
활동 내역 삭제 설정활동 내역의 삭제를 원할 시, 체크
계정 탈퇴계정의 탈퇴를 원하는 경우 탈퇴 가능
58
57
감사합니다Connecting
박새연 | 방명인 | 서지호