프론트엔드 프로젝트를 설계할 때 고려해야할 필수 13가지

마켓 상품관리, 주문관리 기능을 가진 회사 프로그램을 보면서 내가 개발해도 저거보다 이쁘게, 성능 좋게 만들 수 있겠다 싶었다. (안타깝게도 외주 프로그램)

하지만 해당 프로그램은 3~4년의 개발 기간 및 운영 기간을 거쳤으며, 9가지 마켓에 상품을 등록할 수 있는 기능과 주문확인 기능이 있다. 개인의 프로젝트로 이것을 단기간에 따라잡는것은 기만이다.

따라서 나는 기획부터 제대로 하여 mvp 버전을 빠르게 만드는것으로 목표를 설정했다. 간단하게 생각하면 다음과 같다.

처음부터 기획은 나 혼자. 하나부터 열까지 최대한 자세하게 문서화 한다.

1인 개발이지만 다른 개발자에게 인수인계할 때 문서 하나로 정리할 수 있도록 한다.

mvp 버전은 쿠팡 상품등록 까지다. 기획부터 mvp 버전 완료까지는 3개월이다.

개발은 flutter 로 한다. 윈도우 데스크탑 앱으로 만드는 것이 목적.

모바일 버전도 고려는 해야한다..

그러면 기획단계를 어떻게 세분화 하고, 이를 문서화 할 수 있을까? 프롱트 라는 유튜브를 참고하여 작성해 본다.

1. Git 전략

2. 디렉토리 구조

프론트엔드 아키텍쳐

3. 컴포넌트 디자인

4. state 상태관리

글로벌 (최소화)
서버 통신 상태
지역별

5. API 통신

흐름을 깨트리는 비동기 통신
에러처리
로딩상태
캐싱 전략
동기화 주기(타이밍)

6. 코드 스타일

7. 라우팅 설계

8. 빌드 배포

Git
CI, CD
Cloud Storage
CDN 퍼지

9. 디자인 시스템

협업 중요
일관된 UX, UI
용어정리, 문서화
어떻게 일관성을 유지하지?
어떻게 커스터 마이징?
어떻게 확장성을 갖지?

10. 테스트 전략

함수, 컴포넌트 단위
전체적인 동작
잘 되고 있는가? 지속적 진단 방법 찾기

11. ai 가이드

12. 기타

환경변수 (서버주소, api주소, 주요 토큰, 개발/운영별 설정)
에러 핸들링 (사용자용 / 내부 로깅용, 공통 에러처리 모듈, 행동기반 로그분석 수집 전략)

13. 팀워크

피드백과 리액션
함께 성장
스탠딩 스크럼

출처: 프롱트 유튜브