👨‍👩‍👧‍👦 팀원 소개 🖤

Project Manager: 이수빈(F) Teammates: 탁호진(B), 이원준(F), 문유현(F), 김수정(F), 이경진(F) Product Manager: 윤해찬(B)

P.E.T 분석

참고자료

‣

‣

이솝:레이아웃 - 그림닷컴 (B팀 프로젝트 - rgb)

상세 진행 설명

  1. 맡은 프로젝트 레이아웃 잡기

    1. 회원가입

      1. 회원가입시 정보 기입 최소화 - 받는정보 : 성, 이름, 이메일, 비밀번호

        ⇒ 사용자의 회원가입 이탈율을 낮춤

      2. 유효성 검사 조건 불충족 혹은 잘못된 입력 정보의 경우, 실시간으로 입력창 하단에 안내 메세지 출력

        ⇒ 사용자의 실수를 예측하고 사용자가 바로 그 사실을 알 수 있도록 한다.

      3. 필수 입력 사항 미입력시 가입하기 버튼 비활성화

        ⇒ 조건 불충족 시 버튼을 누르지 않고 확인할 수 있어 사용자의 불필요한 확인 동작을 간소화

      4. 비밀번호 확인란 보기 토글 버튼

        ⇒ 사용자의 실수를 사용자가 예방하는 차원

      5. 약관 정보 필수와 선택 기능 존재 (전체 동의버튼 가능)

        ⇒ 사용자의 편의성 제공 및 서비스를 운영하는데 필요한 정보 수집의 경우 선택 사항이 많기 때문에 전체동의를 통해 좀 더 정보 수집이 용이함

      6. 회원가입 완료시 팝업 안내창

        ⇒ 사용자가 선택한 행위에 대해 성공적으로 작업이 완료된 사실을 즉각적으로 알 수 있도록 함

      7. 회원 가입 안내창 실행 후 화면 클릭 시 자동 로그인

        ⇒ 다시 로그인을 진행해야하는 번거로움을 제거해 사용자의 편의성을 높임

    2. 로그인

      1. 로그인 값 - 이메일 주소 및 비밀번호

      2. 유효하지 않은 정보일 경우 입력창 하단에 알림 메세지 출력

        ⇒ 사용자의 실수를 바로 잡을 수 있도록 안내

      3. 회원이 아닐 경우 회원가입으로 이어질 수 있는 플로우 / 모달 형식

        ⇒ 사용자가 로그인이 필요한 동작을 할 경우 자동으로 로그인 창을 띄워 바로 로그인이 가능하도록 하여 사용자의 편의성을 높이고 이탈률을 낮춤

    3. 제품 구현

      1. 상품 리스트 페이지

        1. 간결한 디자인 이미지, 타이틀 및 설명

        2. 카테고라이징

        • 페이지네이션
        • 페이지네이션 구현
        • 전체보기, 가격순, 가나다순 sorting

      2. 상품 상세 페이지

        1. 이미지 수동 캐러셀

        2. 상세 설명 + 버튼 누를 시 나오는 상세 설명 슬라이드

        3. 로그인 여부에 따른 카트 추가 버튼 기능

        4. 재고 수량 sold out되면 수량 선택 블락

        1. 결제
          1. 장바구니 담기 기능
          2. 네비 바 안에 장바구니에 담겨있는 상품의 갯수 표시
          3. 포인트로 결제
          4. 결제 API transaction 기능 구현
          5. 인보이스 페이지 구성

    4. 장바구니

      1. 장바구니 수량 추가/ 총 가격 카운트

        • 실시간으로 총 가격 확인가능

      2. 상품 리스트 삭제 기능

      3. 장바구니 GET, PATCH, DELETE method API

      4. 장바구니 드롭 다운 / 상품 수에 따른 레이아웃 조정

        • 페이지 이동 없이 필요에 따라 확인, 조작가능 하여

          쇼핑경험을 편리하고 유연하게 한다.

        • 상품 수에 따른 레이아웃 동적 조정으로 현재 장바구니 상태

          직관적으로 파악 가능 하다.

      5. 조건부 렌더링 / 연산자를 활용한 빈 장바구니 페이지 렌더링

      6. setTimeout 함수로 상태 업데이트

      7. 마우스 호버 이벤트로 수량 변경시 수량확인 버튼 나타나게 구현

        • 유저에게 수량 조절의 편의성과 직관성 제공으로 쇼핑경험 개선

    e. 메인

    a.  작품 이미지 위주의 심플한 레이아웃

    b. 메인 배경으로 비디오 배치

    c. 메인 carousel 구현

    f. 결제

    1. 장바구니 담기 기능
    2. 네비 바 안에 장바구니에 담겨있는 상품의 갯수 표시 / 실시간으로 적용됨
    3. 포인트로 결제
    4. 결제 API transaction 기능 구현
    5. 인보이스 페이지 구성

    g. 주문

    h. 네비게이션 ⇒ 직관적인 디자인이 특징

    i. 푸터

  2. 회의 진행 및 이솝 레이아웃 참조 비즈니스 구성

rgb.pptx

  1. 기능 적 부분 정의 및 참조 정리