총 2주로 진행되는 위코드의 프로젝트.
매일 하고 있는 내용이나 느낀점을 정리해두긴 했지만 블로그로 정리할 시간이 없다는 핑계로.. 1주일씩 몰아서 정리를 해본다.

Project 1일차

첫 만남!

팀이 정해지고 조원들과의 첫 만남.
팀원분들과 플래닝 미팅을 진행했다. 각자의 기술 스펙이 어느정도인지 모르는 상황에서 페이지를 분석하고 어디까지 구현해볼 지 결정하는 일은 너무 흥미로웠다.
내 실력을 의심하면서도 실력을 정확히 모르기 때문에 오는 자신감? 이 있었다.
하지만 이어지는 멘토님들과의 플래닝미팅에서 적정 난이도로 조정받았고 역할을 분배 후 초기 세팅에 들어갔다.

초기세팅!

택준님이 초기세팅을 맡아 난 옆에서 지난번 초기세팅을 떠올리며 내가 직접 하는 것이라고 생각하고 문제가 날 때마다 같이 해결하기위해 고민했다.
분명 똑같은 방법으로 전에 한 번 해본 초기세팅이었지만 확실히 여러 번 반복하며 내 것으로 만들지 않으면 안된다는 생각을 했다.
지금 배우는 시점에 오류가 많이 생긴다는건 오히려 좋다는 뜻!

내가 맡은 역할

이제 본격적으로 내가 맡은 페이지를 만들 차례.
난 메인페이지를 맡았는데 사실 말이 메인페이지지, 위에 nav bar나 footer는 다른 분들이 만들어서 내가 직접 만들어야 할 것은 배너와 베스트 아이템 목록 두 가지 였다.

옆으로 누르면 넘어가는 배너!
이미지 슬라이드 기능으로 알고 있었는데 정확한 용어는 carousel(캐러샐) 이라고 한다!

이것도 밑에는 배너와 마찬가지로 캐러샐 기능이 들어있지만 그림 하나가 아닌 여러개의 상품 목록으로 되어있었다..!
그리고 위에 각 각의 카테고리를 클릭하면 그 목록이 나와야 하는 아주 무시무시한 기능..!

첫 날은 가볍게 html과 css를 끝내놓고 다음날부터 열심히 기능구현을 해보자고 다짐했지만... 이제는 혼자 하는 프로젝트가 아니라 다른 사람들과 함께 작업을 하는 것이라고 생각하니 아무렇게나 할 수가 없었다.
나 혼자 보기 좋은 코드가 아닌 다른 사람을 배려해서 짜야한다는 걸 알고 나니 html, css 구조를 구상하는 데만 오랜 시간이 걸렸다.

project 2-3일차

첫 번째 고비

html과 css구조를 기능을 무시하고 그냥 짜는 것은 불가능했다.
그래서 주요 기능인 carousel 기능을 찾아보고 여러 방법을 찾아보는데 시간을 많이 썼다.
가장 많이 사용하는 방법은 이미지 컨테이너를 만들어 이미지를 옆으로 나열한 뒤 시야에서 벗어난 이미지들은 overflow: hidden 으로 숨기고 화살표를 클릭할 때마다 옆에 이미지가 보이도록 이미지 컨테이너들을 옮겨주는 것이었다.
이렇게 두 세 줄의 글로 뚝딱 쓰면 너무 간단해 보이지만 나의 작고 소중한 지식으로는 구조를 짜는 것 만으로도 아주 힘겨웠다.
중간중간 멘토님의 코드리뷰를 받으며 잊고 있던 구조분해할당이라던가 scss속성 순서라던가 아주 기본적인 것들이지만 놓치고 있던 부분을 다시 떠올릴 수 있었고 드디어 배너 carousel 기능을 완성했다!(carousel 기능은 다음 글에서 구체적으로 다룰 예정!)

project 4-5일차

이게 왜 안되지..?

이제 '이번주 베스트' 카테고리 기능을 구현할 차례!
한 카테고리당 하나의 캐러샐이 있다고 생각하고 일단 캐러샐기능 먼저 구현하기로 했다.
분명 배너를 만들때와 같은 기능이었지만.. 배너처럼 그림 하나가 아닌 여러개의 (그림과 글이 합쳐진)목록들의 모음으로 캐러샐을 만드는 것이라 약간 혼란스러웠다.
머릿속으로는 그냥 상품목록을 하나의 카테고리로 만들어서 그림처럼 여러 개를 한 번에 이어붙이면 되지 않나 라고 생각이 들었지만 막상 시작해보니 내가 머릿속으로 그린대로 구성이 안돼 애를 먹었다.
가장 처음 만들었던 인스타그램 클론을 떠올리며 다시 차근차근 구조를 뜯어 천천히 시도했고 위의 배너와 같은 방법으로 만들어내는데 성공했다.

등잔 밑이 어둡다..!

이제 위의 카테고리 목록 중 하나를 골라 클릭하면 해당하는 상품 목록이 나오는 필터? 기능을 구현할 차례.
마지막 5일차에는 이 하나의 기능으로 하루종일 붙잡고 있던 것 같다.
하지만 등잔 밑이 어둡다고 했던가.. 가장 쉬운 방법을 앞에 두고 너무 어렵게만 생각하다가 결국은 방법을 찾아냈다!( 이 방법도 다음 블로그 포스팅으로 다룰 예정!)

1주차에서 느낀 점

- 프론트엔드와 백엔드의 소통의 중요성!

소통의 문제는 단순히 언어가 달라 생긴다기 보다도 서로가 하고 있는 일이 정확히 파악이 안되고 이해하지 못할 때 생긴다고 생각한다.
위 글에서만 보다시피 난 내 할 일도 벅찼기 때문에 딱히 소통이라고 할 게 없었다.
하지만 처음 기획단계부터 중간중간 일이 매끄럽게 진행될 수 있었던 건 프론트와 백의 원활한 소통을 가능하게 했던 팀원들 덕분이다..!
1차 프로젝트는 완벽한 성과물보다는 개인의 성장을 목표로 하자던 우리 팀의 목표처럼 결과물에 집착하지 않고 묵묵히 자신들의 역할을 해내 준 팀원들에게 너무 고마웠다! (물론 지금까지는 결과물도 아주 훌륭히 나와주고 있다!)

- 일을 할 땐 세분화 시키기!

난 계획을 세우고 목표를 정하고 하는 것이 서툴다.
계획이 망가질까봐 목표를 달성하지 못 할까봐 아예 시도를 안하는 경우가 많다.
이번 일주일은 나의 이런 성향을 조금은 고쳐준 계기가 되었다.
내가 맡은 일을 책임지고 해내기 위해 하나의 일을 작게 세분화 시켜 나만의 목표를 정하고 하나하나 해결해 가는데 뿌듯함이 있었다.
맡았을 땐 부담이었지만 해결했을 땐 그 부담보다 더 큰 뿌듯함으로 다가오는 경험을 하고 나니 이제는 진짜 계획적인 사람으로 달라져야겠다는 생각이 들었다.

남은 1차 프로젝트 일주일/ 그리고 대망의 2차 프로젝트까지 지치지 말고 열심히!