[개발자를 위한 프로젝트 A to Z] 풀 스택 개발 프로젝트, 어떤 순서로 해야 할까? (2/2)

이진영

gina1404@codingworldnews.com | 2021-06-28 20:19:51

웹 사이트 개발은 어떻게 진행될까? 웹 사이트 개발 프로젝트는 '코딩'으로 시작하지 않으며, 사이트 구축이 완료되었다고 끝나지 않는다. 개발자는 코드를 잘 쓰는 것만 중요한 것이 아니라, 프로젝트 준비 단계부터 개발, 테스트, 유지보수에 이르기까지 개발 프로세스 전반에 대해 고려해야 한다.

프로젝트 개발의 모든 단계가 중요한데, 각 단계는 자체적으로 포함되고 이전 단계를 기반으로 구축된다. 하지만 사전에 모든 것을 계획할 필요는 없으며, 고정된 순서는 존재하지 않는다. 예를 들어 프론트 엔드를 구상하기 전 데이터베이스를 설계하고 구축할 수도 있고, 프론트 엔드 디자인이 끝난 뒤 백엔드를 설계하는 등 순서는 바뀔 수 있다.

그럼 풀스택 개발은 어떤 순서로 진행되는지 프로젝트 개발 프로세스를 이어서 알아보자.

사진 출처: freepik.com

4단계. 프론트엔드/백엔드 빌드 및 테스트

- 백엔드/프론트엔드 빌드
이제 본격적인 프로그래밍을 시작하는 단계이다. 백엔드를 프로그래밍할 때에는 레일스(Rails), 익스프레스(Expres), 디장고(Django)를 사용할 수 있다. 백엔드 개발자는 서버 측 웹 개발 구조 개발에 집중한다.

프론트엔드 개발은 표면적으로는 마지막 단계이다. 하지만 가장 긴 단계 중 하나가 될 수 있다. 이때 어떤 프레임워크 또는 CSS 사전 프로세서를 사용하는지, 어떤 글꼴, 색상, 스타일 요소를 선택했는지, 모바일 우선 설계와 접근 용이성을 염두에 두고 있는지 등을 확인한다.

- 백엔드/프론트엔드 테스트
구축된 프로그램을 테스트하는 단계이다. 파손된 링크가 없는지, 모든 양식 및 스크립트를 지켰는지, 오타가 없는지를 확인한다. 코드가 현재 웹 표준을 준수하는지 확인하기 위해 코드 검증기를 사용할 수 있다.

백엔드 테스트에서 프레임워크, 툴을 사용해 테스트를 구성할 수 있다. API 엔드포인트를 수동으로 테스트하기 위해 포스트우먼(Postwoman), 포스트맨(Postman) 또는 인섬니아(Insumnia)를 사용할 수 있다. 이를 통해 API 호출을 시뮬레이션해 응답이 예상대로 수행되는지 확인할 수 있다.

프론트 엔드 테스트는 이전 빌드 테스트와 결합된다. 테스트를 진행하며 엔드 케이스를 적절하게 다루고 있는지 확인한다. UI 관점에서 오류를 어떻게 처리하고 있는지, 웹 사이트에 장애가 발생하지 않는지 등을 체크한다.

사진 출처: freepik.com

5단계. 사용자 피드백 및 유지보수
웹 사이트는 제품이라기보다는 서비스에 가깝다는 사실을 기억해야 한다. 기억해야 할 중요한 사실 중 하나는 웹 사이트 제품이라기보다는 서비스에 가깝다는 것이다. 웹 사이트는 사용자에게 '제공'하는 것만으로는 충분하지 않다. 모든 것이 잘 작동하고, 모든 사람이 만족하고, 다른 경우에 변화를 줄 수 있도록 준비해야 한다.

사용자로부터 의견을 듣는 것도 중요하다. 개발자가 프로젝트와 너무 가까워 놓친 부분을 찾거나, 사이트 개선을 위한 제안 사항이 있을 수 있다.

피드백을 통해 제품을 업데이트할 때에는 가장 우선순위가 높은 것은 '최대한 신속하게 문제를 해결하는 것'이다. 문제가 빠르게 해결되지 않으면 사용자들은 불편함을 참기보다는 다른 웹사이트로 이동하게 될 것이다.

또 웹 사이트를 최신 상태로 유지하는 것이 중요하다. CMS를 사용할 경우 정기적인 업데이트를 통해 버그를 방지하고 보안 위험을 줄일 수 있다.

6단계: 그 외 참고사항 - 웹 사이트 개발 일정
웹 애플리케이션을 구축할 때 개발자는 '가격', '시간'이라는 두 가지 주요 문제를 중심으로 돌아가게 된다. 이 두 가지는 프로젝트의 규모와 범위에 따라 크게 달라진다.

전체 개발 프로젝트를 개략적으로 설명하기 웹 애플리케이션 개발 일정을 생성하고, 태스크(task)를 추가하고, 프로젝트 이정표를 세울 수 있다. 프로젝트 구현을 추적하는 것은 마감일을 준수할 수 있는 가장 좋은 방법이다.

프로젝트 개발 일정을 추적하기 위해 간트프로(GanttPRO)와 같은 직관적인 간트 차트를 사용할 수 있다.


참고 사이트: DEV.to, moustafamm 미디엄, XB 소프트웨어

[ⓒ CWN(CHANGE WITH NEWS). 무단전재-재배포 금지]

WEEKLY HOT