첫번째 프로젝트 회고

서혜선·2023년 7월 23일
0

프로젝트

목록 보기
1/1

NIKE 공식몰 신제품 프로모션 사이트 기획 제작

✔️ 진행 기간 : 2022.12.02 - 2022.12.16 (2주)

✔️ 전체 인원 : Front-end(3인), Back-end(2인)

✔️ 프로젝트 요약

  • 목적

  • 해당 브랜드의 웹사이트는 상품 판매 보다는 브랜드의 이미지를 사용자에게 각인시키기 위한 목적으로 제작된 것이라 분석했습니다.

  • 자체 멤버십 운영을 통해 회원 만을 위한 다양한 서비스와 혜택을 우선적으로 제공해 브랜드 충성도를 높이고 있으며, 브랜드 관련 소식을 가장 먼저 접할 수 있도록 메인에 노출시켜 기존회원과 함께 새로운 고객의 유입을 유도하는 웹 사이트를 구상했습니다.

  • 사용자의 경우 방문시 특정 상품을 고려한 검색이 많을 것으로 예상되어, Navigation 메뉴를 간소화 하고 검색창을 활용하여 바로 상품을 조회해 썸네일 이미지로 미리볼 수 있도록 캐러셀을 구현했습니다.

  • 구현하고자 한 기능

  1. 멤버십 회원 서비스를 제공하기 위한 회원가입 및 로그인 기능
  2. Navigation 상단 상품 검색 기능
  3. Navigation 마우스 이벤트(hover)를 통해 제품을 한눈에 파악할수 있는 캐러셀 기능
  4. 장바구니 / 위시리스트 기능
  • 기술 스택
    - Front-end : JavaScript, React, Scss, HTML, CSS3
    - Back-end : JavaScript, Node.js, Express, MySQL
    - All : Git, Github, Trello, PostMan, Trello

✔️ 역할

  • Front-end / Project Manager

  • Trello와 Slack을 활용해 프로젝트의 스케줄 관리를 진행했다.

  • 각 팀원들의 성향이 오전에 집중도가 높은 것으로 파악되어, 매일 오전 지정된 시간 간단한 스크럼 회의를 통해 각 팀원의 진행상황과 Blocker를 신속하게 공유해 해당 Blocker들은 유동적으로 대처할 수 있었다.

  • 1주차 - 팀원들의 성향 및 작업방식을 파악하고 레이아웃을 완성하는데 집중했고, 해당 인원의 Blocker들을 해결하기 위한 방법을 모색하는데 집중했다. 기능 구현보다는 전체적인 웹사이트의 레이아웃 및 라우팅을 관리했고, 필수 기능인 회원가입 및 로그인 페이지에서 중복되는 레이아웃을 컴포넌트화 하여 재사용성을 높였다.

  • 2주차 - 1주차에서 목표했던 Ticket들의 달성률이 약 70%로 마무리되면서, 기한 내 완성도를 높이기 위해 기존에 기획했던 페이지들을 축소하고, 각 팀원들이 작업하던 컴포넌트들을 모아서 합치는 작업을 진행했다.


✔️ 성과

  • 사용자의 이메일, 비밀번호 입력을 통한 로그인 / 회원가입 기능을 구현했다

    • 유효성 검사를 통해, 사용자들의 입력 오류를 사전에 방지할 수 있도록 구현했다
      - 에러 발생 시 사용자에게 조건에 맞는 입력을 요구하는 UI 구현
      - 회원가입 성공 시, 로그인으로 바로 이동
      - 로그인에 성공 시, 알림 메세지 노출 후 메인페이지로 이동
  • 등록된 상품들을 노출시키는 상품 리스트 페이지 제작했다

    • 상품 리스트 페이지용 Mock Data를 제작 준비
    • 현재 웹 페이지의 UI/UX 관점을 고려한 상품 배치
  • 중복된 레이아웃을 컴포넌트화하여 페이지 내에서 재사용성을 높였다.

    • 로그인 / 회원가입은 같은 Form 형식, 레이아웃을 공유
    • 상품 리스트페이지 하나의 레이아웃 컴포넌트 생성 후 map메서드를 통해 리스트로 구현
  • 조건에 따른 분기처리 방식으로 스타일을 관리했다.

    • 회원가입/로그인 버튼의 className에 삼항연산자를 활용, 유효성 검사 조건에 따라 동적으로 활성화/비활성화
    • 사용자에게 조건에 맞는 입력을 요구할 수 있도록 메세지를 출력

🧐 KPT 관점으로 바라본 프로젝트

KEEP

  • 작업을 시작하기 전 사이트 안에서 재사용이 가능한 레이아웃들을 먼저 파악해, 컴포넌트 작업을 우선 진행했다.
  • 재사용을 통해 하나의 컴포넌트로 여러 페이지를 관리할 수 있어 전체적인 작업 시간을 많이 아낄 수 있었다.
  • Convention을 잘 지켜 비교적 적은 Conflict로 작업을 완료했다.

PROBLEM

  • Scss Convention 중 공통적으로 사용하는 부분들이 Nesting이 되지 않아 작업을 합쳤을때 다른 페이지에도 영향을 줘 불필요한 시간이 소요됐다.
  • 마지막 데이터 통신 과정에서 key와 value값이 달라 수정하는 시간이 많이 소요됐다.

TRY

  • Nesting이 되지 않은 공통 Convention
    - Depth가 깊어지는 문제로 인해, 소극적으로 Nesting을 활용했는데 좀 더 신경써서 작업할 필요가 있을 것 같다.
    - 좀 더 세부적인 Convention을 정할 필요가 있을 것 같다.

  • 작업 초반에 비해 줄어든 소통 탓에 통신하며 직접 수정해야하는 부분
    - 개인 작업에 집중하는 것도 좋지만, 꾸준한 소통!


📝 프로젝트를 마치며,

첫 프로젝트에서 Project Manager로 참여하게 되어 2주간 정말 정신없이 보낸 것 같다.
처음 써보는 협업툴도 이것저것 만져보기만 한 것 같은데 어느새 끝나버린 느낌 😭 Project Manager로 나름 꼼꼼히 계획을 세웠다고 생각했는데, 2주간 예상치못한 Blocker들을 만나 계획했던 부분들을 대폭 수정하게되어 좀 아쉬웠다.

profile
FE, 기록하고 기억하기

1개의 댓글

comment-user-thumbnail
2023년 7월 23일

좋은 정보 얻어갑니다, 감사합니다.

답글 달기