[엘리스] 1차 프로젝트 회고록 - 01 전체 기획, 설계

전체적인 기획, 설계

9팀 [아침엔]
날짜: 23-10-30
작성자: 하윤아





스크럼

 
1. 주제: 신발 쇼핑몰
2. 쇼핑몰 이름: 신밧드(SHINB_D)
3. 서비스 목적: 신발을 좋아하는 사람을 위한 신발 판매 플랫폼
4. 프론트 엔드 사용 언어: HTML, CSS, JAVASCRIPT
→ 리액트를 쓰는게 좋겠으나, 익숙하지 않아 바닐라 자바스크립트로 진행
5. 깃랩 프론트엔드 폴더 구조
src
public
css
img
js
API
6. 기능구현 계획

• (~10/31 화요일까지) VM에서 서버 배포 각자 완료.
• (~ 금요일) 상품기능, 장바구니기능 일단 모든 사용자가 상품crud, 카테고리crud 가능하게 한 후 나중에 관리자체크 백엔드에서는 crud기능을, 프론트는 상품 레이아웃과 장바구니기능 구현 로컬스트리지나 indexedDB -> 뭐로 할지 상의후 내일 스크럼에 공유
• 프론트엔드 → MVC 패턴으로(임시계획)
• 백엔드 → 상품API정리 후 포스트맨명세서로 공지
• 기능 명세서 & 와이어프레임(레이아웃) & 플로우 차트 작성하기

7. 서버: 프론트엔드 & 백엔드 서버를 따로 띄우기
→ 경험이 있으신 현지님의 의견을 적극적으로 따르기로 했다. 



프론트엔드 회의

---

1. 레퍼런스

폴더 https://folderstyle.com/
마켓컬리 https://www.kurly.com/main
크림 https://kream.co.kr/
네이버 https://www.naver.com/
주조컬러, 보조컬러 색상 참고 https://coolors.co/palette/

2. 사용 툴

피그마: 디자인 협업에 간편

3. CSS 프레임워크

https://bulma.io/
https://tailwindcss.com/
https://fontawesome.com/start 
4. 반응형(미디어쿼리)적용

• 데스크탑, 노트북, 태블릿, 모바일 → 4개 화면으로 구성

5. 페이지네이션 숫자

• 한 페이지에 제품 40개 (10행 4열)

6. 루트 컬러

1. 주조컬러
2. 보조컬러

7. 폰트 사이즈

1. 대제목: h2(50px)
2. 목록페이지
3. 상세페이지
4. 장바구니

8. 변수명

• 카멜표기법

9. 데이터 관리

• indexedDB

 
레퍼런스를 참고한 전체적인 기능, 구성

---

공통

• TOP버튼(오른쪽 아래)

상품

1. 헤더

 - 로고

• 메뉴
• 하단메뉴

• 로그인
• 장바구니
• 검색

2. 메인페이지

• 이미지슬라이드
• 신제품 section
• 랭킹 section

3. 상품 목록

• 사이드메뉴
• 상품레이아웃

4. 상세페이지

• 이미지
• 브랜드, 상품명, 가격, 사이즈(셀렉트), 장바구니 버튼, 바로구매 버튼

5. 푸터

• 하단로고
• 저작권
• SNS

로그인/회원가입

1. 로그인

• 아이디 input
• 비밀번호 input
• 로그인 버튼
• 회원가입 버튼

2. 회원가입

• 아이디
• 비밀번호
• 비밀번호 확인
• 이름
• 생년월일

오늘 한 일 요약

---

✔️ 프론트엔드, 백엔드 서버 관련 의논
✔️ 전체적인 레이아웃 기획, 관리 방법, 툴 등 의논
✔️ 피그마 사용하여 와이어프레임 구성 → 프론트엔드끼리 상의후, 백엔드 피드백



공부가 더 필요한 부분

---

✔️백엔드 서버는 어떻게 받아서 사용하는가?
✔️ 깃랩 사용법 복습 & 우리팀 커밋컨벤션에 관해 공부하기
✔️ 장바구니 구현시 데이터 관리(indexeddb) 방법 찾아보기 



느낀점

---

프론트엔드가 단순히 동작 구현에서 끝나는게 아니라 서버를 위해 백엔드분들이 전달해준 데이터를 받아와야하는데 아직 그 부분에 대해 지식과 이해가 많이 부족하여 의견을 내지도, 질문을 어디서 부터 해야할지 감이 거의 잡히지 않았다. 다행히 백엔드 두분께서 협업 경험이 많으시고 전공자이셔서 부족한 부분을 너무 잘 알려주셨다. 서버에 대한 부분, API, MVP, SSR 등 이름은 알지만 정확히 어떤 부분으로 쓰이는지 많은 공부가 필요함을 느꼈다. 어디서 어떻게 공부해야 할지 모르겠지만 우리 팀원의 좌우명처럼 일단 해보자! 뭐든 공부해보자! 라는 마음으로 제일 접근성이 쉬운 유튜브로 개념부터 확실하게 정리해야겠다고 느꼈다.
모르는 내용과 얻는 내용이 동시에 많아져서 기록과 소통의 중요성을 느껴 모든 자료는 디스코드로 공유하고, 빠른 소통을 위해 카카오톡 단톡방도 만들었다. 온라인으로 스터디를 해오다가 이번 프로젝트를 계기로 첫날 프론트엔드가 모여 디테일한 결정을 많이 했는데 다들 의견도 잘 들어주고 많은걸 공부해와서 이야기하는거 보고, 아직 많이 부족하지만 협업의 즐거움도 얻어가는것 같다. 온라인으로 하는것보다 직접 얼굴을 마주하고 이야기 하는게 의사소통에 있어 더 효율적이고 전달이 잘 되는거 같고, 친밀감도 쌓여서 더 편하게 질문도 하고 문제나 궁금한점은 서로 적극적으로 나서서 해결해 주는것을 느꼈다. 너무 친절하게 잘 설명해주셔서 많이 배워가는 느낌이었다.
전날에 이전 프로젝트 회고록을 찾아보면서 이것저것 찾아본 지식으로 프론트엔드 회의때 많은 도움이 되었다. 스크럼 하기전 적극적인 의견과 의논을 위해 많은 지식이 요구되는거 같아서 전날 준비할 필요성을 느꼈다.
오늘 많이 정한것 같은데, 아직 생각해야할 부분이 좀 남은거같다. 내일 확실하게 팀원과 이야기해서 좋은 결과물이 나올 수 있게 노력해야겠다. 첫 프로젝트인데, 걱정반 기대반이다.