Project 1-2 HOLO 기술명세서, 페이지구성 구현

기획을 마치고 오피스아워미팅으로 얻은건 "기술명세서 확립이 필요하다." 여러 사람이 모여 하는 일이기에 상세한 기술명세서가 반드시 있어야 한다는 것. 나는 '나'를 기준으로 다들 이해했구나라고 생각했지만 지금 와서 생각하면 아주 얼토당토않는 소리였다는 생각이 든다.

엘리스에서 제시한 건 아래와 같았다.

• 사용자 관련 기능

  • 회원가입 - 회원가입 폼의 입력 값이 조건에 안 맞을 시 (이메일 형식, 비밀번호와 비밀번호확인의 일치 여부 등) 이를 사용자에게 알려준다.
  • 회원가입 - 조건에 맞게 입력 후 제출 버튼을 누를 시, 백엔드 서버와 연결되어 회원가입 정보가 db에 저장된다.
  • 로그인 - 로그인 폼의 입력 값이 조건에 안 맞을 시 (이메일 형식이 안 맞거나, 비밀번호가 틀리거나 등) 이를 사용자에게 알려준다.
  • 로그인 - db에 저장된 정보로 로그인 성공 시, JWT 토큰이 프론트 단(sessionStorage, localStorage 등)에 저장되고, 다른 페이지(랜딩페이지, 상품페이지 등)로 이동한다.
  • 로그아웃 - 로그아웃 시, 프론트 단에 저장되어 있던 JWT토큰이 제거된다.
  • 사용자 정보 조회 - 사용자는 개인 페이지에서 자신의 회원 정보를 조회할 수 있다.
  • 사용자 정보 수정 - 사용자는 개인 페이지에서 자신의 회원 정보를 수정할 수 있다.
  • 사용자 정보 삭제 - 사용자는 개인 페이지에서 자신의 회원 정보를 삭제(탈퇴)할 수 있다.
  • 관리자 기능 - 관리자 계정이 존재하며, 일반 사용자 계정과 구분된다.
  • 사용자 정보 - db에 사용자의 이메일, 이름, 비밀번호(해쉬화된 문자열), 주소를 저장할 수 있다.

• 상품(제품) 관련 기능

  • 카테고리 조회 - 사용자가 카테고리 목록을 화면에서 확인할 수 있다.
  • 카테고리 추가 - 관리자는 관리자 페이지에서, 상품이 속할 카테고리를 추가할 수 있다.
  • 카테고리 수정 - 관리자는 관리자 페이지에서, 상품이 속할 카테고리 관련 데이터 (카테고리 이름 등)를 수정할 수 있다.
  • 카테고리 삭제 - 관리자는 관리자 페이지에서, 상품이 속할 카테고리 관련 데이터를 삭제할 수 있다.
  • 상품 추가 - 관리자는 관리자 페이지에서 상품을 추가할 수 있다.
  • 상품 수정 - 관리자는 관리자 페이지에서 상품 관련 데이터를 수정할 수 있다.
  • 상품 삭제 - 관리자는 관리자 페이지에서 상품 관련 데이터를 삭제할 수 있다.
  • 상품 정보 - 상품은 특정 카테고리에 속해 있다.
  • 상품 목록 - 사용자가 특정 카테고리를 선택할 시, 해당 카테고리에 속한 상품 목록이 화면에 나타난다.
  • 상품 상세 - 사용자가 특정 상품을 선택할 시, 해당 상품의 상세 정보가 화면에 나타난다.
  • 상품 정보 - db에 상품의 이름, 가격, 설명, 제조사를 저장할 수 있다.

• 장바구니 관련 기능

  • 장바구니 관련 데이터는 백엔드 데이터베이스가 아닌, 프론트단(localStorage, sessionStorage, indexedDB 등)에서 관리된다.
  • 프론트 단에, 장바구니에 속한 상품 관련 데이터가 저장되어서, 페이지를 새로고침해도 장바구니에 상품들이 그대로 남아 있다.
  • 장바구니 추가 - 사용자는 상품을 장바구니에 추가할 수 있다.
  • 장바구니 수정 - 사용자는 장바구니에 속한 상품의 수량을 수정할 수 있다.
  • 장바구니 전체 삭제 - 사용자는 장바구니에서, 버튼 1번의 클릭으로, 장바구니 상의 전체 상품을 제거할 수 있다.
  • 장바구니 부분 삭제 - 사용자는 장바구니에서, 일부 상품을 골라서 제거할 수 있다.
  • 장바구니 조회 - 사용자는 장바구니에 담긴 상품 목록을 확인할 수 있다.
  • 장바구니 가격 조회 - 사용자는 장바구니에 담긴 상품들의 총 가격을 확인할 수 있다.

• 주문 관련 기능

  • 주문 추가 - 사용자는 장바구니에 속한 상품들로 주문을 추가(진행)할 수 있다.
  • 주문 수정 - 관리자는 사용자의 주문 내역에서 배송 상태를 수정할 수 있다.
  • 주문 수정 - 사용자는 주문 완료 후 배송이 시작되기 전까지 주문 정보를 수정할 수 있다.
  • 주문 완료 - 주문 완료 시, 주문 완료 페이지로 이동한다.
  • 주문 조회 - 사용자는 개인 페이지에서 자신의 주문 내역을 조회할 수 있다.
  • 주문 조회 - 관리자는 관리 페이지에서 사용자들의 주문 내역을 조회할 수 있다.
  • 주문 취소 - 사용자는 개인 페이지에서 자신의 주문 내역을 취소할 수 있다.
  • 주문 삭제 - 관리자는 관리 페이지에서 사용자들의 주문 내역을 삭제할 수 있다.
  • 주문 정보 - db에 배송 상태가 저장된다.
  • 주문 정보 - db에 배송지 정보, 주문 총액, 수령자 이름 및 연락처가 저장된다.

기술명세서

빨간색을 필수 기능으로, 노란색을 추가 기능으로 생각하고 만들지만 2주라는 시간을 만만히 생각한 나는 여기서 꽤나 많은걸 포기해야 했다..
1. 정기배송
2. 결제
3. 옵션
4. 품절상품 처리

화면구성

이렇게 짠 기술명세서로 프론트에서 📎화면구성을 피그마로 잡았고 본격적인 작업에 착수할 수 있었다.
이렇게까지 완성한 것이 수요일?목요일 쯤이었으니 기획, 구성에 얼마나 시간이 많이 드는지 새삼 깨닫는 순간이었다.

느낀 점

1. 아이디어가 채택되고 나면 기획과 구성은 오프라인으로 하는 것이 좋을 것 같다. 팀 내에는 적극적인사람/소극적인 사람이 같이 있기 때문에 온라인에서는 의견을 듣기가 쉽지 않다.
2. 시간이 많이 부족하기 때문에 필수기능을 위주로 짠 뒤 추가 아이디어는 추가기능으로 가는 것이 좋을 것 같다. (기본 기능을 업그레이드 할 것도 굉장히 많기 때문)
3. 라포형성은 빠르면 빠를 수록 좋다. 기획과 구성을 오프라인으로 추천하는 이유기도 한데 사람은 확실히 눈을 맞추며 밥도 먹고, 이야기도 해야 친해질 수 있는 것 같다. 물론 온라인으로도 충분히 친해질 수 있겠지만 오프라인은 그 장소에서 피할 수 없이 눈을 마주치며 이야기를 해야하기 때문에 친해지는 속도는 오프라인이 온라인에 비해 빠를 수 밖에 없다. 이렇게 라포를 쌓아야 도와주고 싶은 마음과 힘들면 기대고 싶은 마음이 생긴다. 팀은 개인작업이 아니기 때문에 '제 파트 아닌데요'가 통하지 않는다. 그렇기 위해선 서로를 위해야 되는데, 이 모든건 라포에서 온다.