1 of 24

Kollar International, s.r.o.

컬러픽

TEAM_009_파리지옥

FE�박주현

이현지

이주아

BE

이진우

전혜빈

전소영

2 of 24

목차

프로젝트 소개

서비스 기능 시연

사용한 기술 스택 소개

팀원 소개

Q&A

1

2

3

4

5

3 of 24

​

프로젝트 소개

퍼스널 컬러를 기반으로�사용자들에게�맞춤형 컬러 정보를 제공

사용자 개인에게�잘 어울리는 컬러는�안정적인 인상을 만들어줌

미용 시장에 비해� 의류 시장의 경우�퍼스널 컬러에 대한�정보 제공이 매우 제한적�

컬러 하나만으로도 인상 변화를 쉽게 할 수 있기 때문에 관심 증가

회원가입 시�퍼스널 컬러 필수 선택

​

리뷰 목록 상단�리뷰의 퍼스널 컬러 타입�비율 표시

4 of 24

서비스 기능 시연_홈페이지

카테고리 아이콘

  • 아이콘 클릭 시, 원하는 카테고리의 상품 리스트 페이지로 이동

웜톤/쿨톤 상품 리스트

  • 전체보기 클릭 시, 선택한 톤과 일치하는 상품 리스트 페이지로 이동

5 of 24

서비스 기능 시연_회원가입/로그인 페이지

회원가입

  • 붉은색 글자의 안내에 따라 회원 정보 입력
  • 회원가입 버튼 클릭 시, 실패/성공 여부에 따라 모달로 메시지 안내

로그인

  • 비회원일 경우, 회원가입 버튼을 클릭하여 회원가입 후에 로그인 가능
  • 회원가입 시에 입력하였던 이메일/비밀번호를 입력한 후, 로그인 버튼 클릭
  • 로그인 버튼 클릭 시, 실패/성공 여부에 따라 모달로 메시지 안내

6 of 24

서비스 기능 시연_상품 리스트 페이지

상품 리스트

  • 카테고리에 맞는 상품 리스트들이 한줄에 4개씩 나열
  • 상품 클릭 시, 해당 상품 상세 페이지로 이동

7 of 24

서비스 기능 시연_상품 상세 페이지-상품 정보

간략한 상품 정보

  • 상품 이미지 확인
  • 간략한 상품 정보

상품 상세 정보

  • 상품 상세정보 탭
  • 상품 상세정보 펼쳐보기
  • 상품 상세정보 접기

구매하기

  • 구매하기 클릭 시, 상품 옵션 선택 모달 표시

8 of 24

서비스 기능 시연_상품 상세 페이지-리뷰

리뷰탭

  • 클릭 시, 리뷰 공간 표시
  • 리뷰 이미지 미리보기 가능
  • 리뷰의 퍼스널 컬러 비율 그래프바 제공
  • 리뷰 추천 기능
  • 추천순, 쿨톤 리뷰, 웜톤 리뷰 필터 기능

리뷰 이미지 전체보기

  • 클릭 시,전체 리뷰 이미지 확인 가능

찜 기능

  • 클릭 시, 찜 목록에 추가

9 of 24

서비스 기능 시연_주문 페이지

상품 내역 드롭다운

  • 클릭 시, 주문할 상품 내역들 확인 가능

배송지 정보

  • 사용자의 기본 배송지 기입
  • 변경 버튼 클릭 시, 배송지 변경 가능

결제 정보 확인

  • 총 결제 금액 확인 및 결제 방법 선택 가능

10 of 24

서비스 기능 시연_리뷰 페이지

만족도 조사

  • 옵션 선택을 통한 만족도 조사

리뷰 작성

  • 상품에 대한 상세한 리뷰 작성
  • 사진 첨부하기 버튼 클릭 시, 상품 리뷰 사진 첨부 가능

리뷰 등록

  • 리뷰 등록 버튼 클릭 시, 리뷰 등록

11 of 24

서비스 기능 시연_마이 페이지

회원정보

  • 간략한 회원 정보 확인 가능

회원 활동 내역

  • 주문 내역, 나의 리뷰, 나의 질문 내역 확인 가능

회원구매 내역

  • 최근 주문한 상품 리스트 확인 가능
  • 리뷰 등록 버튼 클릭 시, 리뷰 등록 페이지로 이동

12 of 24

서비스 기능 시연_프로필 페이지

회원정보

  • 프로필 이미지, 퍼스널 컬러 등 회원 정보 확인 가능

수정 버튼

  • 수정 버튼 클릭 시, 프로필 수정 페이지로 이동

프로필 수정 페이지

  • 붉은색 글자의 안내 메시지에 따라 정보 입력
  • 수정 실패 시, 실패 사유를 알리는 모달 표시
  • 성공 시, 프로필 페이지로 이동

현재 프로필 수정이 정상적으로 작동되지 않는 오류 발생

13 of 24

BE 기술 스택

Java

Spring Boot

Spring JPA

Spring Sequrity

H2

MySQL

JWT

asw

14 of 24

FE 기술 스택

HTML

CSS

JS

React

Axios

Recoil

ESLint

Styeld�components

15 of 24

팀원 소개_BE

팀장 이진우 님

  • 상품, 장바구니, wish list, Security 관련 기능 진행

팀원 전혜빈 님

  • 주문, 리뷰, 장바구니, wish list, 배포, Security 관련 기능 진행

팀원 전소영 님

  • 회원가입, QnA, Security 관련 기능 진행

16 of 24

팀원 소개_FE

팀장 박주현 님

  • 장바구니, 주문, 리뷰 페이지 영역 진행

팀원 이현지 님

  • 로그인, 회원가입, 마이페이지, 프로필 페이지 영역 진행

팀원 이주아 님

  • 메인, 상품 리스트, 상품 상세 페이지 영역 진행

17 of 24

QnA

Q1. 전역 상태 관리 라이브러리로 recoil을 적용한 이유가 무엇인가요?

A. Rocoil은 React와 원할하게 통합되어 개발자들의 상태 관리와 전역 상태를 사용을 쉽게 해줍니다.�� 또한 최신 기술과 트렌드에 대한 지원, 유연성과 확장성, 성능과 최적화, 비동기 데이터 관리,

커뮤니티 및 지원 등의 장점이 있습니다.

상세한 내용은 우측 상단 버튼 클릭 시, 확인할 수 있습니다. �

상세한 내용 확인

18 of 24

QnA

Q2. 퍼스널 컬러를 모르는 회원들이

자가 테스트 할 수 있는 판별 알고리즘을 안 넣은 이유는 무엇인가요?

A1. 복잡성과 정확성 문제

A2. 전문적인 판단이 필요한 경우

A3. 정확성과 책임 문제

A4. 다양성과 개별성 문제

A5. 사용자 경험 간소화��상세한 내용은 우측 상단 버튼 클릭 시, 확인할 수 있습니다.

상세한 내용 확인

19 of 24

QnA

Q3. 메인 프로젝트를 진행하면서 아쉬웠던 부분은 무엇인가요?

  1. 팀원들이 공통적으로 아쉬워하는 부분은 백엔드에서 열심히 구현 API 중 일부분을 프로젝트 일정 상 프론트에서 기능 구현을 하지 못한 것이 아닐까 싶습니다.

​

상품 등록/수정/삭제 + 카테고리 등록/수정/삭제�� 우측 상단 버튼 클릭 시, 구현 되었으나 적용되지 못한 API를 확인할 수 있습니다.

�

미적용된 API 확인

20 of 24

QnA

Q4. 메인 프로젝트를 진행하면서 무엇을 얻은 것 같나요?

21 of 24

QnA

Recoil의 장점

최신 기술과 트렌드에 대한 지원�Recoil은 Facebook에서 개발한 상태 관리 라이브러리로, React와 함께 성장하고 있습니다.

최신 React 기능과 트렌드를 적극적으로 지원하며, React의 새로운 기능과 함께 발전하는 편이라 선택할 수 있습니다.

​

유연성과 확장성

Recoil은 상태의 의존성 관리와 데이터 흐름을 간단하게 처리할 수 있는 유연성을 제공합니다.

커스텀 상태 선택자를 사용하여 전역 상태를 더 세밀하게 제어하고 확장할 수 있습니다.

​

성능과 최적화

Recoil은 데이터의 변화를 트리거할 때 최소한의 리렌더링을 유지하는 최적화 기능을 내장하고 있습니다.

10 불필요한 리렌더링을 방지하여 성능을 향상시키고 사용자 경험을 개선합니다. ��비동기 데이터 관리

Recoil은 비동기 데이터 흐름을 효과적으로 관리하는 데에도 용이합니다.

서버와의 비동기 통신, 비동기 데이터 처리 등에도 편리하게 사용할 수 있습니다.

​

커뮤니티 및 지원

Recoil은 Facebook이 개발하고 유지 관리하는 라이브러리로서, 풍부한 커뮤니티와 활발한 지원을 받을 수 있습니다.

문서화와 예제 코드, 커뮤니티 토론 등을 통해 문제를 해결하는 데에도 도움을 받을 수 있습니다

발표 페이지로 돌아가기

22 of 24

QnA

퍼스널 컬러 자가 테스트 알고리즘 미지원 사유

복잡성과 정확성 문제

퍼스널 컬러를 정확하게 판별하는 알고리즘은 복잡하고 정확성을 보장하기 어렵습니다.

일반적인 자가 테스트는 간단한 질문이나 선택지로 퍼스널 컬러를 판별하는데에는 한계가 있을 수 있습니다.

​

전문적인 판단이 필요한 경우

퍼스널 컬러 판별은 종종 전문적인 판단이 필요합니다.

개인의 피부톤, 눈색깔, 머리색 등 다양한 요인을 고려하여 정확한 결과를 도출해내기 위해서는 전문가의 도움이 필요할 수 있습니다.

​

정확성과 책임 문제

자가 테스트로 얻은 퍼스널 컬러 결과가 정확하지 않거나 부정확한 결과를 도출하여 사용자가 잘못된 정보로 판단할 경우, 이로 인해 불편하거나 11 실패할 수 있습니다.

이는 사용자 경험을 저하시킬 수 있으며, 결과에 대한 책임을 지기 어려울 수 있습니다.

​

다양성과 개별성 문제

사람들의 퍼스널 컬러는 다양하며 개별적입니다. 따라서 퍼스널 컬러를 일반적인 자가 테스트로 단순히 분류하는 것이 개인에게 맞는 컬러를 찾는 데 도움이 되지 않을 수 있습니다

​

사용자 경험 간소화

사용자들이 편리하고 쉽게 이용할 수 있는 경험을 제공하기 위해, 퍼스널 컬러를 판별하는 전문적인 방법이나 서비스를 제공하는 것이 아닌, 단순한 가이드 라인이

발표 페이지로 돌아가기

23 of 24

QnA

미적용된 API 기능

상품 등록/수정/삭제

발표 페이지로 돌아가기

카테고리 등록/수정/삭제

24 of 24

발표 끝까지 시청해 주셔서 감사합니다!