SlideShare una empresa de Scribd logo
1 de 31
XE Extension 제안 및 기획
배송추적 모듈
2011108182
김재린
XE 로 만든 다양한 쇼핑몰
그리고 그 만큼
많은 사용자들이
자신의 물품이
어디에 있는지
확인을 하고
있습니다.
하지만
내 님은 어디 쯤 왔을까?
CLICK
이제는 알 수 있을까?
AGAIN
WHAT? 저건 뭐야
CLICK
CLICK
CLICK
CLICK
 배송 위치를 확인 하기 위해서 2~3단계의 동작이 필요함
(예)메인 페이지 -> 주문 페이지 -> 송장번호 확인 -> 택배사 사
이트에서 송장번호 입력 -> 확인)
 한 개의 싸이트에서만 배송추적이라는 란이 있음.
 배송추적도 제휴사의 택배사만 위치만 알 수 있을 것이라 추
측
빠르고 간편하게 볼 수 없을까?
배송 추적 모듈
 송장번호를 이용해서 택배사 홈페이지에서 정보를 얻어
옴
(스마트 택배라는 어플이 존재)
 정보를 바탕으로 대략적인 위치를 GooGleMap API 를 통
하여 보여줌
 로그인 시 배송추적이라는 사이드 메뉴가 생기며 클릭시
팝업창을 뛰움
기 능
 로그인 시 사이드메뉴에 배송추적이 생김 메뉴를 누르면
팝업창이 나타나며 배송정보를 보여줌
 배송물품과 추적 위치만을 보여주며 다른 정보(가격, 배송
일, 물품번호 등)는 조회페이지해서 확인 가능
 배송정보와 그 밑에 지도를 보여주고 지도에 물품이 지나
왔던 배송지 정보를 표시해주고 보여줌
구 현
 송장번호를 이용하여 택배사로부터 정보를 얻으면 얻은
정보에서 필요한 정보(위치,현재상태)를 출력시킴
 배송장 위치를 이용하여 구글맵에서 검색하여 위치에 마
커를 붙이고 마커를 선으로 이어서 보여줌
 마커를 클릭시 배송지에서의 상태를 보여줌(도착,발송)
GoogleMap API
 지도는 구글에서 제동하는 Google Maps JavaScript API
v3 에 있는 google.maps 을 사용하여 나타냄
 google.maps.Map 메소드로 지도를 나타내줌
 google.maps.places 위치검색 라이브러리
 google.maps.Polyline 넘겨준 위치를 선으로 이어줌
부족한 점
 사용자가에 간편하게 보여주기 위하여 필요한 정보만을
출력하여 자세한 정보는 배송상세페이지에 들어가 볼 수
있음
 물품이 배송지에 도착해서 택배사에서 상태를 갱신을 해
야 정보가 업데이트 되기 때문에 정확하지 않을 수 있음
 다음위치가 어디인지 있는지 알 수 없음
배송조회 페이지배송추적 메뉴
홈페이지 접속
배송물품 있음 배송물품 없음
배송추적 팝업열림 알림창 열림
사용자 시나리오
 홈페이지에 접속을 한다.
 배송물품에 대한 상세정보를 알고 싶으면 배송조회페이
지로 간다.
 배송물품에 대한 현재 상태를 추적하고 싶으면 사이드메
뉴에 생성된 배송추적메뉴를 클릭한다
 현재 배송중인 상품이 있으면 팝업창이 열리면서 정보를
보여준다
 배송중인 상품이 없으면 "배송중인 물품이 없습니다."라
는 알림창이 나온다
CLICK
배송
확인
모듈 추가 예상 ①
모듈 추가 예상 ②
CLICK
배송
확인
모듈 추가 예상 ③
CLICK
배
송
확
모듈 추가 예상 ④
고맙습니다
 자료를 위한 제로보드로 제작 된 사이트를 찾았으나 제안하려는 모듈의 특
성상 사이트의 물품을 직접 구매함으로서 확인을 할 수는 없었습니다.
 예를 들기 위해서 제로보드로는 제작되지 않았지만 제가 사용하고있는 인터
넷도서 사이트를 의 예를 들어서 올렸습니다.
 아직 웹을 잘 몰라서 구글맵만을 뛰우고 비슷하게 보이게만 만들어서 붙여넣
었습니다.
 아직 프로그래밍에 대한 이해가 없어서 google api 를 검색하면서 이런 메소
드에 이런기능이 있다고 생각되는 것을 가져와서 정확한 이해도는 떨어짐

Más contenido relacionado

Destacado

How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
ThinkNow
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
Kurio // The Social Media Age(ncy)
 

Destacado (20)

2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot
 
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTEverything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPT
 
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsProduct Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
 
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
 
Skeleton Culture Code
Skeleton Culture CodeSkeleton Culture Code
Skeleton Culture Code
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
 

Xe extension 제안 및 기획2

  • 1. XE Extension 제안 및 기획 배송추적 모듈 2011108182 김재린
  • 2. XE 로 만든 다양한 쇼핑몰
  • 3. 그리고 그 만큼 많은 사용자들이 자신의 물품이 어디에 있는지 확인을 하고 있습니다.
  • 5. 내 님은 어디 쯤 왔을까? CLICK
  • 6. 이제는 알 수 있을까? AGAIN
  • 9.
  • 10. CLICK
  • 11.
  • 12. CLICK
  • 13.
  • 14.
  • 15. CLICK
  • 16.
  • 17.  배송 위치를 확인 하기 위해서 2~3단계의 동작이 필요함 (예)메인 페이지 -> 주문 페이지 -> 송장번호 확인 -> 택배사 사 이트에서 송장번호 입력 -> 확인)  한 개의 싸이트에서만 배송추적이라는 란이 있음.  배송추적도 제휴사의 택배사만 위치만 알 수 있을 것이라 추 측
  • 18. 빠르고 간편하게 볼 수 없을까?
  • 19. 배송 추적 모듈  송장번호를 이용해서 택배사 홈페이지에서 정보를 얻어 옴 (스마트 택배라는 어플이 존재)  정보를 바탕으로 대략적인 위치를 GooGleMap API 를 통 하여 보여줌  로그인 시 배송추적이라는 사이드 메뉴가 생기며 클릭시 팝업창을 뛰움
  • 20. 기 능  로그인 시 사이드메뉴에 배송추적이 생김 메뉴를 누르면 팝업창이 나타나며 배송정보를 보여줌  배송물품과 추적 위치만을 보여주며 다른 정보(가격, 배송 일, 물품번호 등)는 조회페이지해서 확인 가능  배송정보와 그 밑에 지도를 보여주고 지도에 물품이 지나 왔던 배송지 정보를 표시해주고 보여줌
  • 21. 구 현  송장번호를 이용하여 택배사로부터 정보를 얻으면 얻은 정보에서 필요한 정보(위치,현재상태)를 출력시킴  배송장 위치를 이용하여 구글맵에서 검색하여 위치에 마 커를 붙이고 마커를 선으로 이어서 보여줌  마커를 클릭시 배송지에서의 상태를 보여줌(도착,발송)
  • 22. GoogleMap API  지도는 구글에서 제동하는 Google Maps JavaScript API v3 에 있는 google.maps 을 사용하여 나타냄  google.maps.Map 메소드로 지도를 나타내줌  google.maps.places 위치검색 라이브러리  google.maps.Polyline 넘겨준 위치를 선으로 이어줌
  • 23. 부족한 점  사용자가에 간편하게 보여주기 위하여 필요한 정보만을 출력하여 자세한 정보는 배송상세페이지에 들어가 볼 수 있음  물품이 배송지에 도착해서 택배사에서 상태를 갱신을 해 야 정보가 업데이트 되기 때문에 정확하지 않을 수 있음  다음위치가 어디인지 있는지 알 수 없음
  • 24. 배송조회 페이지배송추적 메뉴 홈페이지 접속 배송물품 있음 배송물품 없음 배송추적 팝업열림 알림창 열림
  • 25. 사용자 시나리오  홈페이지에 접속을 한다.  배송물품에 대한 상세정보를 알고 싶으면 배송조회페이 지로 간다.  배송물품에 대한 현재 상태를 추적하고 싶으면 사이드메 뉴에 생성된 배송추적메뉴를 클릭한다  현재 배송중인 상품이 있으면 팝업창이 열리면서 정보를 보여준다  배송중인 상품이 없으면 "배송중인 물품이 없습니다."라 는 알림창이 나온다
  • 27. 모듈 추가 예상 ② CLICK 배송 확인
  • 28. 모듈 추가 예상 ③ CLICK 배 송 확
  • 31.  자료를 위한 제로보드로 제작 된 사이트를 찾았으나 제안하려는 모듈의 특 성상 사이트의 물품을 직접 구매함으로서 확인을 할 수는 없었습니다.  예를 들기 위해서 제로보드로는 제작되지 않았지만 제가 사용하고있는 인터 넷도서 사이트를 의 예를 들어서 올렸습니다.  아직 웹을 잘 몰라서 구글맵만을 뛰우고 비슷하게 보이게만 만들어서 붙여넣 었습니다.  아직 프로그래밍에 대한 이해가 없어서 google api 를 검색하면서 이런 메소 드에 이런기능이 있다고 생각되는 것을 가져와서 정확한 이해도는 떨어짐