ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 2차 프로젝트 회고:: Get Super Fluid 클론 프로젝트
    개발일기 2020. 8. 17. 17:15

    재미있는 UIUX를 보여주었던 웹사이트 get super fluid💘

    2차 프로젝트:: GetSuperFluid 웹사이트 클로닝 후기

     

    1. 프로젝트 소개


     

     

     

    1) 주제👆🏻

    • 감각적인 UIUX로 웹사이트 어워즈 수상을 받았으며 뚜렷한 가치와 철학을 가진 이탈리아 화장품 웹사이트를 클로닝한 프로젝트💄
    • React.js와 Django, Git, Trello로 협업하여 이루어진 팀 프로젝트

     

    2) 개발인원 (프론트 3명, 백엔드 2명)

    • 프론트 3명 (김신영, 박예진, 최운정)
    • 백엔드 2명 (안   솔, 황수미)

     

    3) 개발기간 

    • 2020.08.03(월) ~ 2020.08.14(금)  약 2주 / 총 12일

     

    2. 사용된 기술


    1) 프론트엔드 👩🏻‍💻(처음 이용한 기술들)

    • JavaScript (ES6)
    • React.JS (Hooks)
    • React-Router
    • React-Slick
    • React-scroll-rotate
    • React-rellax (Parallax 라이브러리)
    • Styled-Component

     

    2) 백엔드 👩🏻‍💻

    • Python, Django web framework
    • Bcrypt
    • jwt
    • MySQL
    • AWS EC2, RDS
    • CORS headers

     

    3) 협업 툴 🛠(클릭 시 사이트로 이동합니다 )

     

    4) 개발 방법론

    • Agile 방법론 ➿

     

     

    3. 사이트 주요 기능


    직접 구현한 기능은 ✅, 팀원이 구현한 기능은 ✔️로 표시했다.

     

    1) 회원가입, 로그인 페이지

    ✔️로그인 기능 (id, pw 조건 구현) (Session Storage)

    ✔️소셜로그인 기능 (카카오톡)

    ✔️회원가입 기능 

     

    2) 메인페이지

    Carousel 기능(Slick.js, CSS)

    ✅fetch함수 이용한 카테고리별 제품 필터기능 구현

    ✅react-scroll-rotate 라이브러리 이용한 스크롤에 따른 rotate 움직임 구현

    ✅Parallax(움직임이나 동작 시간을 스크롤에 따라 다르게 주어 입체적으로 표현하는 기법) 구현.

    ✅무한루프 텍스트 애니메이션

    ✅로딩 화면 구현

     

    3) 상품 리스트 페이지

    ✔️transform, animation등을 이용한 다양한 호버 애니메이션기능이 추가된 상품 컴포넌트 구현

    ✔️category 필터 리스트 구현

    ✔️category 이중 필터 기능 구현

    ✔️sticky 기법으로 재미있는 ui 구현

    ✅로딩 화면 구현

     

    4) 상세 페이지

    ✔️sticky 기법으로 재미있는 ui 구현

    ✔️Parallax(움직임이나 동작 시간을 스크롤에 따라 다르게 주어 입체적으로 표현하는 기법) 구현.

    ✔️제품 색상에 따라 각 제품 페이지로 이동 및 ui 변화 기능 구현

    ✔️Carousel 기능(Slick.js, CSS)

    ✔️제품 수량 장바구니 담기 기능 구현

    ✔️백엔드와 통신하여 현재 페이지의 제품과 어울리는 추천 제품 기능구현

     

    5) 장바구니 및 오더페이지

    ✅fetch 함수 이용하여 삭제, 수량조절 기능 백엔드와 통신

    ✅수량에 따른 총 금액 및 개수 렌더 구현

    ✅총 금액에 따른 금액 게이지 변화

    ✅fetch 함수로 백엔드와 통신하여 장바구니 외의 추천 상품 기능 구현

    ✅주문한 상품 오더페이지로 이동 기능 구현

     

     

    4. 기억하고 싶은 코드


    1) parallax 기법 [이후 추가]

     

    2) 장바구니 기능 [이후 추가]

     

     

    5. 기록하고 싶은 에피소드


    1) hooks, styled-component와의 만남

     

    1차 프로젝트에서는 리엑트 생명주기의 흐름을 알기 위해 class형 컴포넌트를 사용했었다.

    이번 2차 프로젝트에서는 class를 작성할 필요없이 state값과 여러 react 기능들을 이용할 수 있는 hooks를 사용하였다. 

    hooks를 이용하니 생명주기 메서드를 각각 state에 따라, 분리해서 사용할 수 있는 점이 편리하였고 매력적이었다. 

    또한 styled-component에서는 특히나 css 요소가 많았던 이번 프로젝트 웹사이트에서 매우 편리함을 느꼈다. 

     

    총 금액이 30유로이기에 무료배송금액 39유로 퍼센트 비율에 따라 길이가 조절되는 게이지바 UI

    가장 기억에 남는 편리함은 state에 저장된 총 수량 가격에 따라 무료배송가능 게이지 변화 기능을 구현할 때였다.

    state에 저장된 총 수량 가격 숫자를 게이지 div width값에 가져와서 percent 로 width값의 변화를 주어 위와 같은 UI를 구현 할 수 있었다.

     

     

    2) 잘한 점 💁🏻‍♀️

     

    2-1. 다양한 css 기법 활용

    이번 프로젝트를 통해 다양한 css 기법을 활용해 볼 수 있었다. 스크롤에 따라 유저가 느끼기에 재미있고 다양한 효과들을 주기 위해 다양한 기법들이 있다는 것을 배우게 되었다. parallax, scroll-rotate, 애니메이션 등 재미있는 효과들을 배우고 활용해 볼 수 있어 좋았다.

    사실 1차 프로젝트 때 사이드바 드롭다운 구현을 2개나 했음에도 정확한 애니메이션의 원리를 이해하지 못하고 있었는데, 

    이번에 장바구니 사이드바 드롭다운을 하면서 'animation 효과에 대해 제대로 이해하고 넘어가보자' 라는 생각으로 공부하면서 

    1차 때 부족했던 부분을 채울 수 있었던 것 같아 좋았다.

     

    2-2. 1차 때보다 밀접했던 백엔드와의 소통

    2차 프로젝트에서 project manager 역할을 맡으며 백엔드와 프론트 간의 협업을 위해 백엔드와 소통할 일이 비교적 많았던 것 같다.

    항상 느끼는 것이지만 "넘치는 소통이 덜한 소통보다 낫다" 

    백엔드와 더 많이 소통하게 되면서 그동안 프로젝트를 프론트 입장에서 주로 보았다면, 백엔드 입장에서도 볼 수 있는 경험이었다. 

    프론트에서는 그냥 렌더링하면 되었던 제품의 이름이 백엔드에서 보기에는 각 제품 군 별로 그룹화 되어 있는 이름이었다. 

    '이래서 소통이 중요하구나' 라는 것을 이번 프로젝트에서도 다시 한 번 깨달았다.

    완성도 높은  프로젝트를 위해서 백엔드와 원활히 소통할 수 있는 프론트개발자가 되었으면 좋겠다. 

     

     

    3) 아쉬운 점 🙇🏻‍♀️

     

    3-1. 반응형

    이번에 메인페이지를 담당해서 구현하다보니 화면의 크기에 따라 조금씩 위치가 달라지는 모양이 눈에 거슬려 미디어쿼리를 이용해서 최대한 반응형으로 만들어 보려고 노력했다. 하지만 2주라는 제한된 시간으로 기능구현에 더 집중하기 위해 만족스럽게 반응형을 만들어보지 못했던 점이 아쉬웠다. 차후에 리팩토링을 하면서 반응형으로 홈페이지를 제대로 구현해 완성도를 높여보고 싶다.

     

     

    3-2. 데이터시각화

    개인적으로 데이터 시각화에 대해 관심이 있다. 이전에도 ppt를 이용해 데이터를 보기 좋게 보여주는 것에 흥미가 높았기에 이번에 '데이터 시각화'와 관련된 프로젝트에 배정받아도 재미있을 것 같다는 생각을 했었다. 그러나 이번 프로젝트는 성격상 다양한 css를 경험해 볼 수 있는 시간이었다. 그래서 이후에 시간을 들여 데이터 시각화를 공부하고 관련된 사이드 프로젝트를 해보고 싶다. 

     

    댓글

Designed by Tistory.