1. 2차 프로젝트의 시작

• 1차 프로젝트가 저번 주를 끝으로 끝나고, 오늘부터 2차 프로젝트가 시작되었다. 파운데이션, 1차 프로젝트 때 만난 적 없는 사람들과 또 다른 팀이 되어 새로운 프로젝트를 시작한 것이다.
  사실 1차 프로젝트가 종료된 뒤 처음 맞은 주말, 또 색다른 사람들과 팀이 되어 프로젝트를 진행한다는 것에대해 솔직히 걱정이 많이 들었다.
  이번에는 모든 것이 지원되었던 1차 프로젝트와는 달리, Figma도 없었고, 어떤 것을 구현해야하지에 대한 가이드가 하나도 없기 떄문이었다. CSS는 어떻게 해야할 지, 또 새로운 기능은 어떻게 넣어야할 지 걱정만 너무 많은 주말이었다.
  오늘 새로운 팀이 배정되었고, 남들은 프론트엔드 3명, 백엔드 4명으로 이루어져있는데 우리 팀만 프론트엔드가 2명, 백엔드는 4명으로 이루어진 것에 좀 놀랐다.
  인원 수라도 많으면 무언가 2주라는 시간동안 해야할 것들에 대한 분배를 더 깔끔하게 나눌 수 있을 것 같았는데, 우리 팀만 2명이라는 소릴 들어서 더 그런 마음이 들었던 것 같다.

2. 새로운 팀과의 만남

• 인원 수는 우리 조만 프론트엔드 한명이 적지만, 그래도 모두 좋은 사람들과 만나게 되어 다행인 것 같다. 오히려 나보다 다들 잘하시는 분들만 모여서 얘기하시는 것을 듣고 오히려 내가 이 분들에게 폐를 끼치는 것은 아닌지 생각하게 된 것 같다. 1차 프로젝트 때 보다는 더 나은 실력으로 이번 프로젝트에 임해야 하는데, 내가 잘할 수 있을런지 걱정부터 된다. 하지만 걱정만 한다고 지금 당장 내 앞에 닥친 일들이 해결되는 것은 아니었기에, 인원이 적으면 적은대로, 남이 나보다 잘한다면 나도 폐를 끼치지 않도록 하나라도 더 공부해서 이번 프로젝트를 하기로 마음을 먹었다.

3. 프로젝트 팀과의 첫 회의

• 팀이 발표되고, 모두 모여 이번 프로젝트의 주제를 정하기로 했다.
  이번 프로젝트는 이미 제작되어 있는 유명한 웹사이트들을 참고하여 코딩을 하는 것이었는데, 주제를 정하고 그 웹사이트의 기획자의 의도나, 이 사이트에서는 어떤 것을 고객에게 어필하고 싶었는지에 대해 각자 생각해서 PET (Product, End-User, Tech) 를 작성하고, 이 웹사이트를 어떤 식으로 만들고, 기능을 구현할 것인지를 정하는 시간이었다.

• 살아생전 처음 생각해본 주제였다. 나는 다른 웹사이트를 들어가면 내가 원하는 카테고리를 찾고 사용하는데에만 집중했었지, 이걸 기회자가 어떤 의도로 웹사이트의 NavBar를 배치했고, 어떤 생각으로 이벤트 베너를 만들고, 공지사항을 알려주는 UI는 왜 여기 만들었는지, 베스트 아이템들은 어떤 기준으로 띄워주는 베스트 아이템들인지 등등 단순히 고객의 입장이었을 때는 크게 생각해본 적도 없는 것들이 직접 기능에 대해 파악하고, 내가 구현해야 할 것들이라고 생각을 하니 웹사이트를 제작한 사람들에 대한 존경심이 들게되었다.

3-1. PET 분석

• 각자 주어진 홈페이지들을 보며, 어떤 웹사이트를 참고하여 만들면 좋을지 서로 알아보았다. 동일한 제품을 파는 것이 아닌 웹사이트마다 서로 다른 제품을 팔고있었기에 사이트의 형태도 모두 달랐고, 그 웹사이트에서 지원하는 기능들도 달랐기에 거기서 어떤 것을 고르면 좋을지에 대해 서로 토론하며 정하기 시작했다.

• 우리의 주제는 이솝, 러쉬, 와이즐리, 이케아, 마켓컬리, 정육각, 오셜록, 시디즈, 나이키, 닥터마틴, 스파오 중에 골라서 정하는 것이었는데, 우리는 시디즈를 타겟으로 하기로 했다.
  솔직히 말해서, 웹사이트들 중에서 가장 HTML과 CSS를 최대한 덜 신경을 써도 될 것 같았고, 기능도 크게 많지 않았기 때문에 선택한 것이 제일 컸다.

• 그런데, 막상 시디즈를 선택하고 토론을 하다보니 어떠한 고객이 우리 서비스의 주요 회원층이 될 수 있을까? 라는 질문에 선뜻 대답할 수가 없었다.
  의자라는 특성상 한 곳에 치우치지않고, 어디에든 존재하는 것이 의자라는 상품인데, 어디에도 있고, 왠만해서는 한 번 사고나면 최소 3년에서 5년까지는 바꾸지 않는 제품이라는 특성 때문에 주요 타겟층을 정할 수가 없는 것이었다.

• 그래서 우리는 결국 다른 제품으로 바꾸는 것을 택했다. 이번에는 단순히 웹사이트 제작에 대해 쉬운가? 가 아닌 실제로 주요 타겟층이 있고 뚜렷한 특성이 있는 것을 찾아본 것이었다.
  우리 팀에서 최종적으로 선택한 주제는 오셜록 이었다. 티(차)와 관련된 제품을 파는 곳이었는데 주요 타겟층이 뚜렷하고 티(차) 를 좋아하는 사람들이라면 누구라도 와서 구매를 하는... 뚜렷한 목적이 있는 제품이었다.

3-2. 페이지 별 기술 구현에 대해 생각해보기

• 각자 페이지 별 기술 구현을 어떤 것을 해야할 지에 대해 생각해보기 전 이미 만들어진 웹사이트에는 어떤 기획자의 의도와 개발자의 의도가 들어갔을지를 분석해보기로 했다.

• 고민은 로그인/회원가입, 제품, 결제, 주문에 관련된 것이었는데, 각각의 페이지는 어떤 기능이 들어가있고, 어떤 걸 개선하면 좋을 지 서로 의견을 내보는 시간이었다. 우리는 일단 로그인 화면에서는 눌리진 않고 보이기만하는 PC 키보드라던가, 요즘에는 모든 웹사이트들에는 꼭 있는 간편 소셜 로그인 같은 기능에 대해 의문을 가졌다.

• 일단 로그인 화면 에서 PC 키보드 같은 경우 화상키보드를 목적으로 넣어놓은 것 같았는데 막상 눌러보면 동작은 하지 않는 단순한 이미지 파일이었고, 요즘 젊은 층들이나 어느정도 나이가 있는 30~40대 들은 소셜 간편 로그인이 편하겠지만 정작 소셜을 쓰지않고 아직도 문자를 쓰는 고연령층들 같은 경우에는 소셜로그인을 못하지는 않을까?에 대한 의문이었다. 물론 일반 휴대폰 인증으로 가입하는 것도 있기는 했지만 요즘 소셜 로그인 또는 소셜 로그인 회원가입이 주가 되는 것이 고 연령층분들에게도 과연 좋은 것일까에 대한 의문이 들었다.

• 다음은 제품 이었다. 이미 이 웹사이트를 기획하고 개발한 분들이 여러 피드백을 받아 많은 것을 구현하고 업데이트 해오셨겠지만 우리는 이 사이트에 있는 구독 이라는 시스템에 대해 조금 더 소비자를 생각할 수 있지 않았을까? 라는 생각을 해보았다. 구독은 소비자가 월 결제를 하고 랜덤으로 차를 받는 시스템이었는데 랜덤이라는 단어가 소비자에게 궁금함과 설레임을 선사하기도 하지만 실망을 줄 수도 있었기에 우리는 소비자에게 랜덤 중에서도 내가 싫어하는 차는 뺄 수 있도록 하는 기능을 넣으면 어떨까 하는 생각을 해보았다.

• 추가로 차는 모르지만 일단 한번 구매해서 먹어보고 싶거나, 내가 누구에게 차를 사주거나 추천해주고 싶은데 어떤 걸 추천해야할 지 모르는 사람들을 위해 약간의 설문을 통해 추천하는 기능을 추가하면 어떨까? 하는 생각도 했고, 차를 좋아하는 사람들이 차를 어떻게 우려서 어떻게 먹으면 더 맛있게 먹을 수 있을 지에 대해 레시피를 올린 것을 참고해서 이 차를 더 맛있게 먹는 방법 을 상세설명 페이지에 추가하면 어떨까라는 생각도 해보았다.

• 다음은 결제 와 주문 이였는데, 솔직히 이 두 개의 주제에 관련 내용은 왠만한 사이트들이 다 같았기에 따로 개선해야할 사항이 보이지는 않았다. 단지 우리가 이걸 나중에 어떻게 구현해야 할 지에 대한 걱정만 들었다.

3-3. 구현 기능 선정

• 이제 페이지들을 보며 어떠한 기능들이 있는지 보았으니 어떤 기능을 구현해야할 지 생각할 시간이었다. 프론드엔드와 백엔드가 서로 어떤 기능을 구현할 수 있고, 구현할 지에 대해 정하는 시간이었는데 솔직히 나는 이것들을 다 구현할 수 있을까에 대한 걱정만이 있었다. 기간은 2주인데 구현 사항이 내가 생각했던 것보다 더 많았다.

3-3-1. 필수 구현 사항

1. 로그인/로그아웃/회원가입
   • id, pw 입력 시 로그인 버튼 활성화
   • id, pw validation(로그인, 회원가입 공통)
   • 아이디 저장
   • 약관선택(체크박스)
   • 소셜 로그인/회원가입(카카오만)
   • 로그아웃 기능
2. 메인 페이지
   • Navigation Bar / Footer (공통)
   • 베스트 상품(해당 주의 베스트 상품/Top5 → 이동)
   • 스토리 이미지 추가
   • 구독 관련 홍보
3. 상품 리스트
   • 각 카테고리에 맞는 제품 나열
   • 상품 클릭 시 상세페이지로 이동
   • 장바구니 추가 버튼
   • 좋아요 버튼
   • 리뷰 버튼
   • Sorting 정렬
   • 페이징 처리
4. 상품 상세
   • url 복사
   • 구매 수량
   • 리뷰 리스트 보기
   • 선물/장바구니/바로구매 버튼
   • 리뷰 평점
   • 상품 설명
   • 상품 정보/ 유의사항
5. 장바구니
   • 선택 상품/전체 상품 주문하기
   • 장바구니 선택 삭제/ 전체 삭제
6. 구독
   • 구독 홍보 이미지
   • 랜덤 박스
   • 결제 주기
   • 결제 및 선물하기 버튼
7. 결제
   • 배송지 정보 입력
   • 배송 요청사항 입력
   • 주문 고객과 동일 버튼
   • 기본 배송지 저장 버튼
   • 주문 상품 리스트
   • 동의 사항 체크
   • 결제 수단 선택
   • 결제하기 내역 및 버튼
8. 선물하기
   • 선물 편지 작성
   • 보내는 분(내 정보)
   • 받는 분 ( 이름/ 전화번호)
   • 선물 상품 확인

3-3-2. 추가 구현 사항

1. 큐레이션
   • 팝업 창으로 선호도 체크해서 결과 출력 → 차 추천을 위해
2. 선물하기
   • 선물 편지 작성 카드 이미지
3. 검색
   • 인기 검색어, 최근 검색어

• 정리를 해보니 이렇게 많아졌는데, 주어진 시간 안에 어느정도 구현해낼 수 있을까? 한숨밖에 안나오는 기능들이지만 할 수 있는데까지는 무조건 해야되지 않겠는가! 열심히 해보자..

4. 2차 프로젝트를 시작하며 ..

• 내일 일단 같은 팀원분과 프론트 엔드 쪽은 하루를 잡더라도 페이지 별로 어떻게 구현을 할지, 어떤 컴포넌트를 만들어야할지, 기능은 어떤 식으로 만들어야할지, 하드 코딩은 어디를 할 지에 대해 먼저 정하기로 했다.

• 1차 프로젝트 때는 github도 기능별로 구분하지 않고 저장했었고, 네이밍 컨벤션 같은 것도 정하지 않고해서 난리였지만, 이번에는 같이하는 팀원에게 말해서 서로 이것만은 지켜가며 하자고 말하였다. 1차 프로젝트 때는 몰라서 못했다고 쳐도 2차 프로젝트 부터는 그런 변명은 안통하지 않겠는가.
  일단 될 때까지 해보자, 어떻게든 해보자. 우리 팀 화이팅, 나는 더 화이팅