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

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

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

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

1단계. 프로젝트 구상

- 프로젝트 아이디어 구상
애플리케이션을 구축할 때 '아이디어'를 찾는 것은 가장 간단하면서도 가장 어려운 부분이다. 아이디어를 찾는 데에는 코딩 기술이나 구축이 필요하지 않다. 하지만 올바른 아이디어를 찾는 것은 중요하다.

개발자는 자신이 좋아하는 것에서 영감을 얻는 것이 좋다. 좋아하는 것 또는 스스로 만들고 싶은 것을 선택하는 것이 중요하다. 왜냐하면 개발을 하며 어려움에 부딪힐 때 자신의 한계를 느끼게 될 수 있는데, 자신이 좋아하는 프로젝트를 진행한다면 더 많은 동기 부여를 받을 수 있기 때문이다.

예를 들어 금융과 주식 투자를 좋아한다면 금융 앱 개발 프로젝트를 시작한다. 그러면 프로젝트에도 더 많은 노력을 기울이고 자연스럽게 스스로의 한계에 도전하게 된다. 또 프로젝트를 완성했을 때 만족도도 높아진다.

아이디어를 구상하는 단계에서 세세한 부분을 신경 쓸 필요는 없다. 코드를 작성하거나 구성요소를 구축하는 대신 프로젝트의 큰 그림을 보고 구축된 앱을 상상하고, 사용자에게 전달하고 싶은 것이 무엇인지를 생각한다.

- 프로젝트 목표 설정
정보를 수집하고 프로젝트 목표를 설정하는 단계는 이후 단계의 방향성을 결정한다. 이때 가장 중요한 부분은 미래의 웹 애플리케이션의 목적, 얻고자 하는 주요 목표, 서비스로 끌어들이고 싶은 대상 고객을 명확히 이해하는 것이다.

예를 들어 뉴스 포털과 앤터테이면트 웹 사이트, 청소년을 위한 사이트와 성인을 위한 사이트는 서로 다르다. 웹 사이트의 종류에 따라 다른 기능을 제공하며, 목적에 따라 다른 기술을 사용해야 한다. 사전 개발 데이터를 기반으로 잘 설명되고 상세한 계획을 수립하면 설계가 변경되거나 초기에 계획되지 않는 기능이 추가되 등 변경 사항이 발생했을 때 리소스를 추가로 지출하는 것을 방지할 수 있다.

2단계. 프로젝트 분석 및 설계, 디자인

- 사용자 사례 분석 및 모델링
사용자 사례는 사용자가 웹 사이트나 애플리케이션을 이용할 때 보거나 수행하는 일을 정리하는 것이다.

모델링은 보다 기술적이다. 모델을 결정하고 모델 간 상호작용 방식을 결정한다. 이를 위해선 객체 지향 프로그래밍에 대한 지식이 필요하다. 모델링을 통해 고객-개발자, 개발자-개발자 간 의사소통을 원활히 하고, 프로젝트 구조의 로드맵을 만들 수 있다.

통합 모델링 언어(UML, Unified Modeling Language)를 활용하면 표준화된 범용 모델링 언어로 소프트웨어 개념을 시각적으로 표현할 수 있다. UML은 크게 정적 다이어그램과 동적 다이어그램으로 나뉜다. 정적 다이어그램에 프로그램 안 주요 클래스와 관계를 나타낸 클래스 다이어그램이 있다. 동적 다이어그램에서는 사용자와 시스템 사이의 상호작용과 기능·서비스를 정리한 유스케이스 다이어그램, 시간 흐름에 따른 객체 사이 상호작용을 나타내는 시퀀스 다이어그램이 대표적이다.

- 사이트 맵 및 와이어프레임 생성
개발자는 고객이 전체 사이트가 어떻게 보일지를 판단할 수 있는 데이터를 생성한다. 사이트맵에서 웹 사이트의 주요 영역 간 관계를 설명한다. 여러 페이지 간의 관계를 정리하면 최종 사용자가 메인 페이지에서 시작했을 때, 필요한 정보나 서비스를 얼마나 쉽게 찾을 수 있는지 판단할 수 있다. 이는 사용자 친화적이고 탐색하기 쉬운 웹 사이트를 구축하기 위해 필요한 과정이다.

사이트 맵을 사용하면 웹 사이트의 내부 구조를 파악할 수 있다. 하지만 사용자 인터페이스는 여기에 포함되지 않는다. 이 경우 와이어프레임 또는 실물 모형을 생성한다.

와이어프레임은 생성해야 되는 사용자 인터페이스를 시각적으로 표현한 것이다. 여기에 색상, 로고 등과 같은 디자인 요소는 포함되어있지 않으며, 페이지와 위치에 추가될 요소만 설명한다. 디자이너가 아니더라도 기본 개념 레이아웃을 스케치하는 것은 코딩 프로세스를 쉽게 만드는 데 좋다. Material UI 또는 부트스트랩(Bootstrap)과 같은 UI 라이브러리를 사용하는 경우 어떤 구성 요소/클래스를 미리 사용할지 계획할 수 있기 때문에 이 단계가 수월해진다.

- 컴포넌트 계획
리액트와 같은 컴포넌트 기반 프레임워크를 사용하는 경우 스케치를 보고 컴포넌트로 구분하는 것이 좋다. 컨테이너의 위치, 상태를 유지하는 컴포넌트가 무엇인지, 제작한 웹사이트가 당신의 상태를 확인하기 위해 '단일 진실 소스'를 만들 수 있는지 등을 계획한다. 이러한 것을 미리 계획하면 후속 단계에서 시행착오를 줄일 수 있다.

- 페이지 레이아웃 설계
디자인 단계에서 웹 사이트가 구체화된다. 이미지, 사진, 비디오와 같은 시각적 콘텐츠를 이 단계에서 생성한다. 이때 대상 고객을 항상 염두에 두어야 한다.

웹 사이트 레이아웃은 디자이너가 작업하는데, 그래픽 스케치 또는 실제 그래픽 디자인으로 만들 수 있다. 렝아웃의 주요 기능은 정보 구조를 나타내고 내용을 시각화하며 기본 기능을 시연하는 것이다. 레이아웃은 색상, 로고, 이미지를 포함한다. 레이아웃은 향후 제품에 대한 전반적인 이해를 제공할 수 있고, 고객이 레이아웃을 검토해 피드백을 보낼 수 있다.

3단계. 데이터베이스 설계

- 데이터베이스 모델링
데이터베이스의 종류는 다양하다. 어떤 데이터베이스를 사용할 것인지부터 데이터베이스 모델, 관계형 데이터베이스를 사용할 경우 모델 간의 관계 설정 등 세부 내용을 정한다. 몽고DB(MongoDB)를 사용할 경우 컬렉션을 넣을 수 있는 클러스터가 있는지도 설정한다.

- 스키마(Schema)
스키마는 모델을 데이터베이스에 저장할 때 저장할 속성을 결정하는 것이다. 예를 들어 사용자에 대한 정보를 저장할 때 성(姓), 이름, 이메일, 비밀번호를 정하도록 선택할 수 있다. 프로젝트에 필요한 속성은 사용자에게 달려있다. 스키마는 고정된 것이 아니며, 프로젝트를 진행하며 모델에 더 많은 정보가 필요한 경우 속성을 추가할 수 있다.

- API endpoint 계획
데이터 베이스 모델링이 끝났다면 이제 엔드 포인트를 계획할 때이다. 모든 모델에 대해 전체 CRUD 엔드 포인트가 필요한가? API를 사용해 쿼리 매개변수를 처리할 계획인가? 어떤 엔드포인트는 공개로 설정하고 어떤 것은 비공개로 설정할 것인가? 공개적으로 접근해서는 안 되는 엔드포인트를 보호할 방법은 무엇인가? 등에 관해 결정한다.

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

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