[ KUKU 발표 대본 ] 2021.02.03.14:00 PM

1. 안녕하세요, 겨울방학 프로젝트를 맞이하여 쇼핑몰 제작을 맡게 된 TEAM KUKU입니다. 조장 김수빈을 필두로 윤지원, 이재연, 박상호가 함께했습니다. 시작하기에 앞서 KU# 사이트 내 폰트는 상업용 무료한글폰트를 사용할 수 있도록 허용해준 ‘눈누’에서 웹폰트를 사용하였으니 착오 없으시길 바랍니다.

추천 알고리즘을 제시하여 사용자의 편리성에 맞춘 쇼핑몰 제작을 목표로 프로젝트를 진행하였습니다. 발표 시작하겠습니다.

2. 저희는 발표 컨텐츠를 크게 세가지로 나누어 구분했습니다. 관리자 기반의 쇼핑몰 운영 및 UI, 사용자 기반의 쇼핑몰 운영 및 UI, 그리고 주요 기능 구현으로 구성하였습니다. 하나씩 진행하면서 알아보도록 하겠습니다.

3. 사용자 역할은 admin과 user로 구분지어 두었습니다. admin은 관리자로써의, user는 회원으로써의 역할을 수행하도록 하였는데요, admin은 user와는 다르게 상품을 구매하는 Role이 아니라, 상품을 등록하고 삭제 및 관리하는 역할을 수행합니다. user는 회원으로 일반 사람들이 사이트에 방문 했을 때, 회원으로써 역할을 수행하도록 했습니다. 회원가입과 로그인, 상품을 선택하고 장바구니에 담기, 그리고 결제를 진행하고 주문내역을 마이페이지에 담는 과정을 진행하였습니다.

4. UI 부분에서 이 둘의 가장 큰 차이점은 mainNav에서 볼 수 있는데요, Role이 admin일 때는 logout과 productRegist 페이지가 연결되도록 하였고, user일 때는 Logout, Mypage, ShoppingCart 로 연결되도록 하였습니다.

5. 먼저, Role이 admin 일 때를 알아보겠습니다.

6. admin의 Role 역할이 부여된 아이디로 로그인 창에서 로그인을 합니다. admin 계정은 누구나 로그인 하게 할 수 없기 때문에 임의의 관리자 계정으로 진행하였습니다. 왼쪽 사진은 PC화면, 오른쪽 사진은 모바일 화면입니다.

7. 로그인이 정상적으로 진행되면 홈페이지로 이동하게 됩니다. admin 아이디에는 오른쪽 상단에 ProductRegist 버튼이 존재하게 됩니다. ProductRegist 페이지로 이동해볼까요?

8. ProductRegist 페이지에서 상품등록과 상품삭제를 할 수 있도록 기능을 설정해 두었는데, search 창을 이용해서 본인이 검색하고 싶은 상품을 검색하는 기능 또한 추가해 두었습니다.

9. 상품등록버튼을 클릭하면 다음과 같은 화면을 볼 수 있습니다. 상품명, 재고, 가격 분류 등 빈칸을 채워 적고 정확한 값을 입력해 줍니다. 아래의 예시는 maincategory에 dress를 선택한 후 subcategory로 longdress, patterndress를 선택한 모습입니다.

10. 사이즈와 색상, 상품설명까지 체크한 이후에 이미지를 등록할 수 있습니다. 대표이미지는 단 한 장의 사진을 등록할 수 있다면, 상세이미지에는 여러 장의 사진을 등록함으로써 추가적인 이미지를 통해 사용자들이 상품의 여러 사진을 볼 수 있게 했습니다.

11. 상품등록 시에 적었던 빈칸들에 정보들이 db에 저장되어 있는 모습을 볼 수 있습니다.  이제 미리 등록시켜둔 약 70개의 상품을 베이스로 두고 Role을 user로 변경하여 진행하도록 하겠습니다.

12. 관리자에서 소비자로 변경했을 때 UI와 기능구현에 대해서 알아보겠습니다.

13. user 역할은 다음과 같은 방식으로 진행이 됩니다. 하나씩 진행하면서 같이 알아보도록 하겠습니다.

14. 사이트에 접속을 하면 무엇을 먼저 하시나요? 회원가입을 먼저 하셔야죠? Sign up 페이지에서는 보다시피 이름, 주민번호, 아이디, 비밀번호, 비밀번호 확인, 이메일, 휴대전화를 입력할 수 있습니다. 입력하지 않거나, 요구하는 형태의 타입으로 적어서 제출하지 않으면, 경고가 발생하고 ‘입력하세요’ 라는 문구가 보이도록 했습니다. 예를 들어 email을 적어야하는 공란에 @ 가 포함되지 않으면 이메일을 요구하는 타입의 형태와 다르기 때문에 인식하지 않고 경고를 발생하도록 하였습니다.

15. 회원가입이 완료되었다면, login 차례입니다. 존재하지 않는 아이디가 있을 때 ‘[id]가 존재하지 않습니다.’라는 경고창이 뜨도록 했고, 아래에 ‘회원이 아니십니까?’ 라는 문구에 Link 연결시켜 signup 페이지로 이동할 수 있도록 만들었습니다.

16-17. 로그인이 완료 되었다면 우리는 홈페이지로 이동할 수 있습니다. Home 화면에서는 Best/New Arrival로 구분지어 놓은 모습을 볼 수 있습니다. bestProduct 와 newProduct라는 배열을 map 함수를 이용하여 한눈에 보기 쉽도록 ListCard로 나열 했습니다.

18. 옷들의 장르들을 구분지어서 mainCategory라는 이름으로 저장을 해두었습니다. db에 저장된 파일들을 axios 이용해 불러온 후 DRESS, OUTER, TOP, PANTS, SKIRT, SHOES로 subNav에 정렬했습니다. 그 중 outer란을 선택한 모습입니다. 미리 등록되어있는 많은 상품들을 볼 수 있습니다.

19. 한 화면에 가득 채워져 있는 상품의 개수가 임의의 숫자 이상으로 넘어가게 되면 Pagination 버튼을 통해서 다음 페이지로 넘어갈 수 있도록 기능을 구현해 두었습니다. PC 화면에서는 한 줄에 3개씩 나오는 것을 고려하여 9개로 limit를 두어 정리하였습니다.

20. outer는 padded jacket(패딩), jacket, jumper, coat 등등 여러 subCategory로 나누어 져 있는 모습을 볼 수 있습니다. 그리고 우리는 각 subCategory를 클릭함으로써 각 상품들에 등록할 때 ‘분류’로 나누어 저장했던 값과 일치하는 상품들만을 볼 수 있습니다. 우리는 outer안에 cardigan/vest에 있는 ‘더몬체크 니트가디건’을 보도록 하겠습니다.

21. 회원님이 선호할만한 상품 추천 란을 만들어서, 이 상품과 가장 많이 같이 구매했던 몇 몇의 다른 상품들을 추천해주는 기능도 구현해 두었습니다. 화면에 보이는 ‘더몬체크 니트가디건’을 함께 구매했던 order 정보를 가져와서 추천란에 보이게 기능 설정해 두었습니다. 따라서 다른 상품을 선택할 때는 다른 상품이 추천상품으로 나타나도록 하게 했습니다.

22. 상품 등록할 때 등록했던 description도 db에서 불러와서 보여지는 형식을 이용해서 보이도록 했습니다.

23. 상세이미지도 추가했던 여러장의 사진을 통해 상품의 사진을 조금 더 확인할 수 있습니다.

24. 상품명, 가격, 색상, 사이즈도 상품 등록 할 때 저장했던 값들로 정할 수 있는 모습을 볼 수 있습니다. 상품 개수도 숫자를 변경함으로써 수정할 수 있고, 이에 따라 총 금액이 변하는 모습을 볼 수 있습니다. 물론 개수를 올림에 따라 가격도 변경하는 모습 또한 볼 수 있습니다. 상품 설정이 완료되면 장바구니 또는 구매하기를 결정할 수 있습니다.

25. 장바구니 버튼을 클리하면 장바구니에 상품이 담겼다는 알림창이 보여지게 되고, ‘쇼핑계속하기’와 ‘장바구니로 이동’ 버튼이 나옵니다. 쇼핑계속하기를 하면 페이지 변화 없이 다시 상품페이지를 이용할 수 있고, 장바구니로 이동 버튼을 클릭하면 --

26. 장바구니로 이동되어 내가 선택했던 상품을 확인할 수 있습니다. 구매를 희망하는 상품 옆 박스를 체크하면 내가 설정했던 개수에 맞도록 가격을 책정되어 결제금액이 숫자로 나타내는 모습을 볼 수 있습니다. 이후 결제하기 버튼을 눌러 --

27. 주문/결제 시스템 페이지로 이동하게 됩니다. 주문자정보에는 signup할 때 user가 미리 등록해 두었던 이름, 휴대전화, 이메일을 확인 할 수 있습니다.

28. 받는 사람 정보에는 이름 휴대전화 주소를 적을 수 있는데, 이름과 휴대전화를 다르게 표기한 이유는 user의 정보와 받는 사람이 다를 수 있기 때문에 새로운 정보를 받을 수 있도록 설정해 두었습니다. 주소란을 보시면 우편번호 버튼이 있는 것을 볼 수 있을 겁니다. 우편번호 버튼을 누르면 도로명주소를 찾는 api가 실행되고, 실재하는 도로명주소를 찾아 적음으로서 받는 사람의 주소를 입력할 수 있습니다.

29. 받는 사람 정보란을 마무리를 하고나면 본인이 체크했던 상품들이 결제하기까지 준비가 완료된 것을 알 수 있습니다.

30. 총 결제금액이 주문상품정보에 저장이 된 것을 확인하고 나면 우리는 하단에서 결제수단을 선택할 수 있습니다. 결제수단으로 무통장입금과 카카오pay가 있는데, 저희는 카카오pay로 진행 해보도록 하겠습니다. 만약 위의 빈칸을 채우지 않고 결제를 진행하려 할 경우 ‘주문에 실패하셨습니다’ 라는 경고창이 뜨게 되고, 반드시 빈칸을 채워야만 결제가 진행되도록 하였습니다. 카카오페이를 선택하고 주문하기를 눌러보겠습니다.

31. 상단바에 ‘QR코드로 결제’와 ‘카톡 메시지로 결제’ 로 나뉘어 결제를 수단을 한 번더 결정할 수 있도록 하였고, QR코드 일 경우에는 다음처럼,

32. 카톡 메시지로 결제 일 경우엔 다음처럼 진행하도록 설정하였습니다. 결제 요청 버튼을 누르고 나면---

33. 사이트 내 화면상에는 다음과 같이 결제를 진행하도록 안내문구가 나오고--

34. 본인의 휴대폰에는 다음처럼 결제가 진행 되도록 하였습니다. 이는 test 페이지로써 실제 돈과 결제가 진행되는 것은 아님을 알려드립니다. 결제가 완료된 이후 확인 버튼을 눌러 페이지를 빠져 나간 후 결제를 완료합니다.

35. 결제가 완료되면 ‘고객님의 주문이 완료되었습니다!’ 라는 안내문을 확인 할 수 있고, 주문번호와 주문내역을 확인할 수 있습니다.

36. 드래그해서 내리면 가장 하단에 ‘홈으로’ 버튼과 ‘마이페이지’ 버튼이 있는 모습을 볼 수 있습니다. 우리는 마이페이지로 이동해보겠습니다.

37. 마이페이지에는 회원의 프로필 사진과 이름, 아이디를 확인할 수 있는 회원정보란과 주문현황이 있는 모습을 알 수 있습니다. 회원 정보에서는 프로필 사진 변경, 회원정보 확인, 홈페이지로 이동과 문의 기능을 설정해 두었습니다. KU#이라는 버튼을 누르면 홈페이지로 이동할 수 있고, 문의 버튼을 누르면 윈도우 내 어플리케이션인 mail을 이용하여 실제로 메일을 보낼 수 있도록 기능을 설정하였습니다.

38. 하단 주문현황 란에는 방금 주문했던 내역이 주문현황으로 정확하게 이동되어 있는 모습을 볼 수 있습니다.

39. 본인의 이름을 선택하면 modal 이 나오고 내용에 db에 저장된 회원정보를 확인할 수 있도록 했습니다. 회원가입 할 때 저장했던 db들을 회원정보란에 나오도록 했습니다. 다음은 프로필 사진 변경입니다.

40. 이미지를 클릭하면 다음과 같은 창이 나오는데,

41. 파일_선택을 통해서 본인이 원하는 이미지 파일은 선택하고 저장을 누르면 이미지 등록을 할 수 있습니다. 파일 선택이 되어있지 않은 경우에는 저장버튼을 눌러도 ‘파일을 선택해주세요’라는 경고문이 나오도록 했고, 변경을 원하지 않은 경우에는 중간 설정 없이 바로 이미지가 변경되는 것을 방지하고자 취소버튼을 만들어 이미지 변경을 취소할 수 있도록 하였습니다. ‘기본이미지로‘ 를 선택하게 되면 이미지 설정하기 이전 기본이미지로 변경하도록 했습니다.

42. 짜잔. 프로필 사진 변경이 완료된 사진입니다. 이상으로 전체적은 쇼핑몰의 큰 틀 모습과 UI에 대한 설명을 마칩니다.

43. 주요 기능에 대해서 조금 더 자세하게 설명을 추가하도록 하겠습니다. 회원가입과 로그인, pagination, 상품 추천 기능, 카카오페이 API를 중심으로 설명 이어나가겠습니다.

44. 회원가입 및 로그인 부분은 토큰을 이용하여 user와 admin을 구분하고 각 role에 대해 UI를 구현해 두었습니다. 우선 json web token을 이용해 클라이언트와 서버의 관계를 조금 설명하도록 하겠습니다.

1. 사용자가 id와 password를 client에서 입력을 한 후 서버에 POST로 요청을 합니다.

2. 서버는 요청을 확인한 후 토큰을 발급합니다.

3. 토큰을 client로 다시 보내줍니다.

4. 이후 client에서는 server로 서비스 요청과 권한 확인을 위해서 토큰을 전달합니다.

5. 서버가 토큰을 확인하고, 토큰으로부터 사용자 정보를 확인하여 데이터를 반환합니다.

6. 마지막으로 client 요청에 대해 response를 전달해줍니다.

서버 기반의 인증 시스템이 아니라 웹토큰을 사용함으로써 클라이언트 측에서 들어오는 요청만으로 작업을 처리할 수 있도록 하였습니다. 이러한 웹토큰을 사용하게 되면 사용자의 정보를 더욱 안전하게 보호할 수 있습니다.

45. Bcrypt를 이용해서 로그인시에 입력한 패스워드와 DB에 저장되어 있는 hashing 된 패스워드가 유효한지 확인 하였습니다. 유효한 패스워드라면 토큰을 client로 전달시킵니다. 이 토큰은 쿠키로 저장되어 로그인이 되었음을 구현하였고, 로그아웃 시에는 쿠키를 지움으로써 로그아웃이 진행되도록 하였습니다. 토큰에 저장되어 있는 아이디와 일치하는 패스워드라면 로그인이 가능하도록 했고, 비밀번호가 정확한 값이 아니라면 ‘비밀번호가 일치하지 않습니다.’라는 경고가 뜨도록 코딩했습니다.

46. 다음은 Pagination입니다. 다음 페이지 버튼을 클릭하면 해당 페이지 번호를 Query로 담아 서버로 요청을 보낼 겁니다.

47. 서버에서 원하는 조건에 맞는 상품들을 정렬한 후, 그 전체 길이와 정해진 개수만큼 limit 메소드를 사용해서 client 쪽에 보내줍니다. 이때 받은 전체 길이를 한 페이지 당 보여주고 싶은 개수로 나눠 올림한 값이 pagination의 전체 크기가 됩니다. 저희는 9개로 개수를 정해두었죠? 그리고 서버에서 받은 페이지 번호에 1을 뺀 값에 보여주고자 하는 개수를 곱한 값만큼 skip 메소드를 사용하고, 정해진 개수만큼 limit 메소드를 사용하여 클라이언트 쪽으로 보내줍니다.

48. 클라이언트에서 부모쪽에서 현재 페이지의 index와 pagination의 전체 크기, pagination에서 선택한 index를 받아 index를 업데이트 하도록 하는 setCurrentPage 함수를 함께 props로 넘겨줍니다. 자식인 paginations component에서 기본적으로 5개의 index가 보이도록 설정해두었습니다.

49. 또한 productlist 페이지에서 subCategory를 선택하거나 해당 Category에서 검색을 하거나 정렬을 하는 등 다양한 조건 속에서도 pagination이 작동하도록 신경을 써야합니다. 이는 React의 state로 저장해둔 값들을 이용해서 조건을 세세하게 나눠 서버로 요청을 보내는 방식으로 진행했습니다. 이 방식으로 진행한 Pagination 은 많은 상품이 존재할 때 한번에 가져오는 방식이 아니기에 client 측에서 버퍼링 걸리는 시간이 줄어 좀 더 효율적으로 사용할 수 있을 것입니다.

50. 다음은 상품추천 기능입니다. 저희는 해당 상품을 구매한 사용자가 구매한 다른 상품을 추천해주는 기능을 구현했습니다. 먼저 클라이언트에서 현재 보고 있는 상품의 product Id를 서버로 보내줍니다. 그러면 서버에서 여러 가지 계산과 처리를 하여 해당 상품과 가장 많이, 같이 구매된 4개의 상품의 정보를 보내주어 화면 아래쪽에 나오도록 하였습니다.

51. 서버에서 추천 상품을 처리할 때 쓰인 주요 기능은 aggregation framework입니다. aggregation은 여러 단계의 파이프라인을 통해 배열 형식의 데이터를 처리, 집계하는 방식을 의미합니다.

(오른쪽그래프) 저희는 총 6개의 메소드를 이용했는데요, 우선 match로 클라이언트에서 보내준 product Id를 가진 문서들을 Order DB에서 찾아냅니다. 그리고 unwind를 이용해 products의 array 요소들을 각각 분리해내고, group을 이용해 같은 productId를 가진 문서끼리 그룹핑 한 후 같은 것이 몇 개가 있는지 세어 count에 저장합니다. 또 sort를 이용해 count가 가장 높은 것부터 정렬한 후 limit을 이용해 상위 5개만으로 제한합니다. 마지막으로 look up을 통해 aggregation에 의해 나온 데이터의 id를 products DB에서 찾아 그 정보를 넣어줍니다. 그 후 자기 자신을 뺀 총 4개의 추천 상품이 클라이언트로 보내지게 됩니다.

52. 마지막으로 설명드릴 주요 기능은 카카오페이 API입니다. 저희는 카카오 developers에서 제공된 테스트 결제 api를 이용했는데요, 결제 흐름은 다음과 같습니다.

-먼저 클라이언트에서, 결제할 상품의 정보와, 결제가 끝난 후 리다이렉트 될 URL을 서버로 넘겨줍니다.

-그 후 서버에서 카카오페이 서버로 해당 정보를 인코딩하여 보내면 ,

-카카오 측에서 로컬서버로 결제가 진행될 url을 pc나 모바일 환경에 맞도록 보내줍니다. 그리고 그 url을 서버에서 클라이언트로 보내준 후 리다이렉트 시키면 아까 보셨던 QR코드나 전화번호 입력란이 보이게 되는 데요, 휴대폰으로 QR을 찍거나 전화번호를 입력하면

-본인의 카카오톡으로 결제할 수 있게 됩니다.

-결제가 끝나면 결제 성공 여부에 따라 맨 처음 클라이언트 측에서 보내주었던 url로 리다이렉트 하는 것으로 주문이 완료됩니다.

53. 코드는 다음과 같습니다. 왼쪽은 client, 오른쪽은 server의 모습입니다.

54. 마지막으로 앞으로 추가해야 할 부분에 대해서 이야기하고자 합니다. ADMIN 부문에는 상품정보 수정, 카테고리 추가 및 수정 기능을 해야 하고, USER 부문에는 회원정보 수정기능과 사용자 리뷰 기능을 추가하고자 합니다. 방학동안 KU# 쇼핑몰 프로젝트의 최초버전이 마무리가 되었습니다. 고생한 스스로들에게 박수를 보내며 이상으로 KUKU조의 발표를 마치도록 하겠습니다. (꾸-벅)

55. 질의사항있으시면 Q&A 받도록 하겠습니다.