🍴FORKFOLK

우리 팀은 유일하게 여자로만 이루어져있던 팀이었다.
여자들만 모여있다고 절대 유하지만은 않았다. 서로 의견을 피력해야 할 때에는 의견을 피력했고, 함께 고민하고, 기뻐하고, 화내면서 프로젝트 기간 동안 정말 많은 감정의 교류가 일었다.

팀원

• FE : 향수님(PM), 은진님, 예린님, 그리고 나
• BE : 현희님, 규원님

KINFOLK

kinfolk 는 잡지 등을 판매하는 곳으로 예쁜 분위기를 지닌 페이지를 가지고 있다.

Fashion, Arts&Culture 등 다양한 분야에 걸쳐 이야기를 소개하고,
가장 많이 사용되는 애니메이션으로는 sticky를 활용한 애니메이션이 있다.
position: sticky 를 이용해 한 요소가 스크롤과 함께 끌어내려질 수 있도록 되어있고, 그 외에 로고 크기의 변화, 이미지 슬라이더 등의 애니메이션 효과가 존재했다.

SCRUM 방식과 Sprint

이번 프로젝트는 SCRUM 방식을 도입해 1주일을 한 Sprint로 바라보았다.
SCRUM 이란 스프린트 단위로 배포 하면서, 지난 스프린트에서 부족했던 점을 보완, 혹은 기능을 추가시키면서 웹페이지를 발전시켜나가는 방법이다.
실제로 프로젝트를 진행하면서 여러가지 보완해야 할 점이 보이거나 생겼고, 그럴 때 마다 기능을 추가하고 보완해가면서 점차 페이지의 완성도를 높여나갔다.

📝팀 목표, 그리고 나의 목표

팀 목표

우리 팀은 무언가 많이 구현하기보다 즐기면서 하자 라는 목표를 가졌다.
무리해가면서 힘들어가면서 많은 것을 구현하기보다, 프론트 기준 우리가 지금까지 배워온 Props, State, Life Cycle Method를 활용하는 방법을 익히고 사용하는 것에 더 무게를 두기로 했다.

개인 목표

State, Props의 개념과 사용법에 대해서 잘 알고있지만, 실제 프로젝트를 해본 적이 없었기 때문에 실제 활용에 있어 어려움을 겪을 것이라는 예상이 있었다.
따라서 개인 목표로 활용에 어려움을 겪을 때 그 원인을 예상할 수 있는 실력을 다듬어보자 라는 목표를 가졌다.

📝Trello

지금 하고 있는 일, 일주일간 해야하는 일, 백로그 등을 트렐로를 이용해 관리했다.
Backlog, This week, In Progress, Done 이라는 리스트를 제작했고, 그 안에 카드를 이용해 Backlog에서 This week으로, This week에서 Done으로 카드를 옮겨가면서 진행 상황과 해야할 일을 체크했다.

📝CRA

CRA를 통해 초기 세팅을 진행했다. CRA를 사용하면 react에 필요한 모듈들을 내가 하나하나 설치하지 않아도 세팅을 해준다는 장점이 있었다.
CRA에 ESLint, Prettier 등을 설치해 코드를 깔끔하게 정리할 수 있도록 했다.

📝시작

내가 하고싶은 것

사실 나는 여지껏 내가 애니메이션 효과에 대해 흥미가 없는 줄 알았다.
CSS보다 js로 받아온 데이터를 가공하거나, 여러가지 메소드를 활용하는게 조금 더 재미있었고, 당연히 데이터를 더 많이 가공하는 것을 하고싶어 페이지를 그런 페이지를 골라 발표를 하기도 했었다.

하지만 킨포크 페이지를 뜯어보다보니 내가 꼭 데이터 가공만에 관심이 있는 것은 아니라는 것을 알 수 있었다.
헤더 페이지의 로고가 메인 페이지에서 스크롤 위치값에 따라 그 크기가 변하는 것을 보고 이 애니메이션을 꼭 구현해보고싶다!! 라는 강렬한 충돌이 들었다.
그래서.. 그렇게 헤더와 메인 페이지를 맡게 되었다.

참고

메인 페이지는 화면의 디자인적 구성도 중요하기 때문에, API를 사용하기보다 하드코딩을 하는 경우도 잦다고 이야기를 들었다.
백엔드, 프론트 모두 모여 상의한 결과 프론트는 백엔드에서 직접적으로 api를 받지 않고 하드코딩을 진행하기로 했다.
다만 스스로 그런점이 아쉬워 메인 페이지는 local에서 api를 받아 api 데이터를 가공하는 연습을 진행했다 :)

📝main Page 결과물

스티키 스크롤 애니메이션

CSS의 position: sticky 속성을 이용해서 구현했다.
감싸는 부모 엘리먼트에 position: relative 를 줘야 그 엘리먼트를 기준으로 스티키가 작동한다. 꼭 기억하기!!
처음에는 자바스크립트를 사용해야 할 것이라고 생각했지만, CSS로 구현이 가능했다.
CSS로 구현이 가능한 기능은 CSS를 사용하는 것이 더 좋다고 들은 적이 있어 CSS를 사용해 구현해보았다.

swiper 기능 구현

이번 프로젝트 목표로 작성하지는 않았지만, 개인적으로 스와이퍼를 라이브러리를 이용하지 않고 구현해보고자 하는 가능하면 하고, 말면 말고! 하는 목표가 있었다.
스와이퍼 뿐만 아니라 다른 애니메이션 전체에도!
그래서 스와이퍼를 구현은 했는데.. 문제는 마지막 사진 뒤로 첫 번째 사진으로 넘어갈 때 너무 잘 보인다는 단점이 있었다. 파들..
그래서 존재하는 사진의 첫 번째, 마지막이 서로 넘어다닐 수 없도록 제작했는데..
이 부분이 가장 아쉬움이 컸다.
transform: translateX( )를 통해 translateX 값을 변경, transition: 0.3s ease를 통해 효과를 작성했다.
마우스 커서 이미지가 화면 중앙을 기준으로 바뀐다. 히히.

parallax background 구현

이런걸 parallax라고 하던가..? 스크롤 위치에 따라 배경이 보이는 위치가 점차 달라지는 그런 효과를 구현했다.
구현하겠다고 정말 많은 영상들을 뒤져보고.. 찾아보고..ㅠㅠ
스크롤을 할 때마다 그 일정 값을 기준으로 top 위치가 변경되게 하면서 만들었다.
재미있는 작업이었고, 만들고 나서 두 번째로 가장 뿌듯하고 예뻤던 애니메이션 효과였다 😊

그 외

이 외에도 다양한 hover 효과들이 존재했다.
이미지에 hover 되었을 때 이미지가 살짝 어두워진다거나, 이미지가 커지는 등의 효과가 있었다. 워낙 간단하고 쉬운거라 설명은 패스 :)

📝Header + Side Menu 결과물

Header 로고 애니메이션

window.addEventListener("scroll",function)을 통해 제작된 애니메이션!
처음에는 휠 이벤트를 따라 로고의 스케일과 마진 값을 조정했다.
그런데 아뿔싸.. 휠 이벤트가 아니라 스크롤 값에 따른 이벤트였다😂😂
첫 스프린트 동안은 그걸 몰랐다가, 나중에 우연히 1차 발표를 끝내고 그걸 깨닳아버렸다.
로고 애니메이션을 처음 만들었을 때에는 마냥 뿌듯하기만 했고 이보다 더 나은 코드는 없다! 이러고 있었지만..
이제 와서 다시 보면 정말 허점 투성이에 온갖 비효율적인 코드 뿐이었다😢😢
아무래도 이벤트로 어떤 다른 이벤트를 만드는게 처음이고, 이걸 고칠 생각을 못 하고 예외처리 등을 진행하다 보니 더욱 더 복잡해지고 꼬여버린 코드가 된 것 같다.
주말동안 따로 브랜치를 따서 거기서 다시 리팩토링을 해볼 예정이다.
그 때엔.. 뭔가 잘 꼬이지 않고 했으면 좋겠는데!!

예상 외의 이상한 점

사실 내 로고 애니메이션의 가장 큰 문제점은 밑(페이지의 하단)에서 새로고침을 했을 경우 로고가 커져있는채로 시작했다는 것이었다.
분명 스크롤값 300이 넘어갈 경우 실행되지 않도록 했는데..
나중에 알고보니까 스크롤값이 0이 찍히고 있었다. 분명 하단인데.. 웨..?
중간에서 새로고침을 했을 때에는 분명 잘 됐는데.. 하단에서 300픽셀? 정도는 그랬던 것 같다. 이유는 아직도 모르겠다.

Side Menu

transform: translateX(100%)와 transform: translateX(0)를 통해 Side Menu 부분이 오른쪽에 슬라이딩 하는것과 같은 효과를 줬다.
z-index를 조절해 가장 상위에 위치할 수 있도록 정비했다.
x 버튼을 달아 x 버튼과 햄버거 메뉴 버튼에 같은 이벤트를 달아, state를 반대로 저장하도록 해서 classname으로 조절!

Shopping List Icon

로그인을 했을 때 받아오는 토큰을 local Storage에 저장해, 토큰의 key,value값이 존재할 경우 shopping List로 넘어갈 수 있는 아이콘 버튼을 제작했다.
로그인을 하면 생겨나고, 로그아웃을 하면 사라지도록 구현!

📝Checkout Page

Checkout 버튼 활성화

Checkout 페이지에서 billing details에 값이 할당되지 않으면 (작성되지 않으면) 버튼의 disabled가 true가 되게 하는 로직을 구현했다.
input 값을 state에 할당해서 그걸 토대로 버튼의 활성화, 비활성화가 진행되게 작성했다. n자 이상 작성 등의 validation도 구현하고 싶었는데, 하루 전에 만들었던 페이지라 최소 기능에 충실하기로 했다.

결제 시스템 선택

일반 신용카드로 결제가 가능하게 할 것인지, 혹은 paypal로 결제를 할 것인지 선택 할 수 있게 해서 해당 내용의 description만 보여주는 기능을 제작했다.
아쉬웠던 것은, 뭔가 더 자연스러운 애니메이션을 주고싶었는데 급히 제작해서 그런건지 어디서 꼬여서 잘 되지 않아 구현하지 못 했다는 점이었다😢😢

결제 성공 후 메인으로 넘어가기 / 실패 사유 안내

백엔드 api가 현재 켜져있지 않아 작성할 수는 없지만, 결제가 성공하면 결제가 성공되었다는 안내문구와 함께 메인 화면으로 넘어가게 되는 로직을 구현했다.
실패할 경우, 실패 안내 메세지를 alert로 보여주게 했다.
모달 창을 제작해서 보여주고싶었는데, 시간이 부족해 만들지 못해서 아쉬움이 남는 부분이었다.

📝뿌듯했던 점

개인

우선 라이브러리를 사용하지 않고 기능을 구현하고싶다 라는 점에서 성공을 이뤄내서 기분이 너무 좋았다.
제작하고 싶었던 애니메이션도 어떻게든 구현했고, 더 이상 state, props를 사용해서 handler를 내려주거나, undefined 등의 에러가 생겼을 때 당황하지 않고 에러가 생긴 이유를 생각해낼 수 있다는 점에서 내게 2주 그 이상의 발전이 생겼다고 생각한다.

팀

처음에 생각했던 것 보다 많은 페이지들을 구현할 수 있었고, 다른 사람들의 브랜치들이 메인에 머지 될 때 레이아웃이 꼬이거나 하는 등의 문제가 발생하지 않았다.
그 만큼 SCSS Nesting이 잘 되었다는 반증 같아 기분이 좋았다 :)
매일 아침 10시에 모여 스탠드업 미팅도 진행했는데, 서로 그 전 날 했던 작업 내용과 오늘 할 내용을 나눈다는게 큰 동기 부여가 되었던 것 같다.
특히 프론트, 백이 나뉘지 않고 함께 이야기를 나눈 덕분에 서로의 진행 상황에 대해 염두에 두고 작업을 진행할 수 있었던 점이 크게 와닿았다.

📝아쉬웠던 점

개인

조금 더 깔끔한 코드를 짤 수 있지 않았을까? 하는 후회가 계속 맴돈다.
특히 헤더 부분의 경우 에러가 발생할 때마다 수정을 거듭했더니 뭔가.. 아쉬움이 많이 남고 메모리 낭비도 심한 코드로 작성 된 것 같아서 너무 아쉬웠다.

팀

내가 소통을 할 때 좀 더 차분히 할 걸, 그리고 좀 더 이유를 들어 설명할걸 하는 후회가 남긴 한다.
자세한건 소감에서 설명하기로 :)

📝프로젝트 소감

개인

내가 당황하거나 혹은 긴장하거나, 다급해지면 목소리가 다소 격양되는 습관이 있고, 어떤 내용을 이야기 할 때 이유를 들어 설명하는 점이 부족하다는 것을 이번 프로젝트를 통해 알 수 있었다.
좋은 팀원들을 만난 덕분에 해당 부분에 대해 이야기를 들을 수 있었고, 내가 한 템포 더 천천히 이야기 하고, 스스로의 감정을 컨트롤 하는 연습을 할 수 있었다.
정말 좋은 사람들..ㅠㅠ
그 외에도 내가 애니메이션에 흥미가 전혀 없는 것은 아니었다 라는 점과, 새로운 경험을 두려워하지 않고 도전할 수 있게 되었다는 점에 스스로 매우 뿌듯해했다.

특히 깃을 사용하는 것에 대해 두렵지 않게 되었다는게 가장 큰 변화였다.
그 전에는 뭔가 하나 잘못될까봐 전전긍긍하며 사용했는데, 깃을 이용해 버젼관리를 진행하며 머지되면서 파일이 날아가도 어떻게든 대안 방법을 찾을 수 있게 되었다!
누군가 인터셉트 해간 내 잔디.. 잘 키워주세요..

팀

팀으로 프로젝트를 진행하는 것이 얼마나 어려운 일이고, 또 소통의 필요성에 대해 뼈저리게 알 수 있었던 프로젝트였다.
특히 백엔드, 프론트엔드 사이의 소통이 얼만큼 중요한지 크게 와닿았었다.
처음에는 프론트, 백이 서로 나뉘어서 서로의 진행 방향과 소통을 진행했는데, 중간에 한 번 크게 수정해야 할 부분이 나왔었다.
서로 프론트, 백이 어떻게 흐름을 잡고 어떻게 진행이 되는지 알 수 없어 생겼던 부분이었다.
프론트, 백이 서로의 진행 방향과 개발 흐름에 대해 알고있어야 서로 가능, 불가능한 부분을 캐치하고 더 발전시켜 더 효율적인 개발을 할 수 있다는 것!
절대 다음 프로젝트에서도 잊지 않고 이야기를 많이 나누고 싶다.

단순히 우리 팀에 대한 소감을 작성하자면 정말정말 너무 좋은 팀이었다.
프론트, 백 사이의 이야기를 서로 전달해주고 설명도 깨끗하고 명확하게 해주셨던 예린님, 서로 으쌰으쌰 하는 분위기를 만들어주시고 내게 부족한 점을 깨닳을 수 있게 도와주신 은진님, PM으로 책임감을 가져주시고, 모두를 칭찬으로 춤추게 해주시고 기를 복돋아주신 향수님, 모두에게 애정을 가지고 정말 많은 부분을 가능케 해주시려 노력해주신 현희님, 엉뚱함으로 종종 웃음을 선물해주시면서도 묵묵히 큰 노력을 해주신 규원님까지 정말.. 을 수 없는 팀이다.

포크포크의 선물돌리기

우리끼리도 계속 어디 가도 우리 포크포크 같은 팀 못 볼 것 같아요! 라고 이야기한 것 처럼 정말 이만큼 노력하고 이만큼 마음이 맞는 팀 찾기가 참 어려울 것 같았다.
그렇다고 다른 팀들이라고 그렇지 않다는 것은 아니지만 :)

돌아오는 월요일부터 새로운 프로젝트를 진행하게 된다.
이번 프로젝트의 경험을 바탕으로 다음 프로젝트에서도 이번 프로젝트처럼 함께 최선을 다해 즐겁고, 힘든 경험을 만들어보고싶다 :)