웹 프로젝트 구축/개발 과정
웹사이트의 성공적인 개발과 제작을 위해서 기획은 꼭 필요합니다.
안녕하세요.
플래니지-Harry입니다.
다양한 성격의 웹개발 프로젝트가 있습니다.
프로젝트 수행 방법에 따라 다양하게 웹사이트 개발이 진행되는데,
오늘은 일반적으로 진행하는 프로젝트 수행 방법에 대한 설명을 진행해보려고 합니다.
웹 프로젝트 구축/개발 과정
프로젝트 수행에 앞서
우리는 프로젝트 수정 전 해당 프로젝트의 정보를 궁금해합니다.
우리가 수행할 프로젝트가 어떤 서비스, 어떤 개발 기술 그리고 어떤 요구사항들이 있는지 파악해야
정확한 작업일정과 리소스를 투입해 최적의 환경으로 프로젝트를 수행할 수 있기 때문입니다.
아래 그림을 봅시다.
일반적인 프로젝트 수행방식은 간단하게 기획 - 디자인 - 퍼블 - 개발 순으로 진행될 수 있습니다.
이런 프로젝트 수행 방식은 프로젝트에 참여한지 얼마 안된 기획자 혹은 내부에서 자체 서비스를 진행할 때 사용되곤 합니다.
[상세 프로세스]
1. 기획 수행
요구사항 확인 - 분석 - 일정산정 - 정보구조 설계 - 와이어프레임 설계 - 화면설계 제작
요구사항 확인
- 프로젝트에 필요한 요구사항등을 접수하여 분석합니다.
분석
- 요구사항을 기반으로 프로젝트에 필요한 기능들을 산정합니다. 해당 기능들을 기준으로 디자인/개발에 필요한 일정과 인력을 산정합니다.
일정산정
- 각 기능단위(또는 페이지 단위)로 산정된 일정을 토대로 전체 작업일정(마일스톤, 상세일정)등을 정리합니다.
정보구조 설계
- 분석에서 정리된 기능(페이지)단위 작업 범위가 설정되었다면, 해당 페이지들의 정보구조를 설계합니다.
분석에서 정리된 기능이나 페이지 외에 더 필요하거나 삭제가 되어야할 내용이 있다면 수정하여 담당자들과 최종협의를 진행합니다.
와이어프레임 설계
- 기능/페이지 산정을 통해 협의된 내용을 토대로 각 페이지의 레이아웃, 버튼구성, 기능 흐름 등 어떠한 컨셉을 가진 UI로 만들지 와이어프레임을 제작합니다. 디자이너, 퍼블리셔는와 해당 단계에서 많은 논의가 필요하며, 와이어프레임을 통해 협의된 내용을 가지고 상세 기능정의를 진행합니다.
화면설계
- 본격적인 화면설계가 진행되며, 프로젝트 규모에 따라 설계 분량이 달라질 수 있습니다.
UI의 기본적인 구성요소 정의, 서비스 정책 정의, 데이터 노출 정책 정의, 각 화면별 상세 기능 정의, 서비스/시스템 플로우 등 다양한 내용이 들어갈 수 있으며, 웹사이트 제작에 필요한 모든 내용이 설계서에 포함될 수 있습니다.
2. 디자인 수행
디자인 컨셉 제작 - 디자인 시안 제작 - 디자인 컴포넌트 및 갸이드 제작 - 페이지 디자인
디자인 컨셉 제작
- 기획자가 정의한 UI컨셉에 맞춰 해당 UI에 적용할 디자인의 스타일을 정의합니다.
디자인 컨셉에 맞는 폰트, 색상, 레이아웃 등을 종합하여 컨셉에 맞는 톤앤매너를 설정합니다.
디자인 시안 제작
- 디자인 컨셉에 맞는 화면을 디자인합니다. 메인/서브/기타 여러 페이지들을 미리 디자인하는 과정이며, 각 디자인 시안별 컨셉이 명확하게 보이도록 구성해야 합니다. 디자인 시안이 제작되고 난 뒤 프로젝트 담당자들과 해당 컨셉이 우리 서비스에 맞는지 여부를 협의하여 최종 시안을 결정하게 됩니다.
디자인 컴포넌트 및 가이드 제작
- 본격적인 디자인 작업에 앞서 컨셉에 맞는 가이드와 컴포넌트를 제작합니다.
다수의 디자이너가 동시에 디자인작업이 진행되는 경우 페이지 디자인보다 우선 작업되며, 디자인 가이드가 제공되어야 모든 구성원이 하나의 프로젝트에 동일한 디자인으로 페이지를 작업할 수 있기 때문에 매우 중요한 작업입니다. 또한 디자인가이드는 프로젝트 종료 후 해당 서비스의 고도화, 수정이 진행될 경우 다른 인력이 작업했을 때 동일한 스타일의 디자인을 가능하게 도와줄 수 있습니다.
페이지 디자인
- 정해진 가이드와 컴포넌트를 활용해 모든 페이지를 디자인합니다. 설계서에서 미처 정리되지 않은 다양한 화면들이 발생될 수 있으며, 이 경우 기획지/퍼블리셔/개발자와 논의 후 페이지 추가 여부를 결정합니다. 정해진 디자인 규격에 맞게 디자인하는것이 가장 중요합니다.
3. 퍼블리싱 수행
퍼블 컴포넌트 제작 - 페이지 퍼블리싱 - 단위테스트
퍼블리싱 컴포넌트 제작
- 완료된 디자인을 통해 HTML 문서 또는 개발되는 언어의 각 객체 단위별 UI 구성요소를 제작합니다. 반응형 웹사이트인 경우 각 해상도별 컴포넌트를 샘플로 제작하여야하며, 각 컴포넌트는 소스단위로 웹페이지 제작 시 즉각적으로 사용할 수 있도록 구성합니다.
페이지 퍼블리싱
- 컴포넌트를 활용해 디자인이 완료된 웹페이지를 제작합니다. 이 때 CSS나 스크립트의 경우 공통으로 사용되는 경우도 있으므로, 중복으로 사용되지 않게끔 주석처리 및 경로를 꼼꼼히 확인하여 코딩하도록 합니다.
단위테스트
- 각 페이지별 모션 또는 퍼블리싱에서 처리 가능한 세부 기능이 있는 경우 제작된 페이지를 확인하여 문제가 없는지 확인합니다. 반응형 웹사이트의 경우 해상도별로 작동되는 모션과 기능이 달라질 수 있기 떄문에 분기되는 해상도를 확인하여 각 기능이 정상적으로 수행되는지 확인합니다.
4. 개발 수행(Front End, Back End)
(Front End) 웹페이지 개발 - 페이지 DB 연동 - 단위테스트
(Back End) DB 정의 - DB Table 개발
웹페이지 개발 & 페이지 DB 연동
- 퍼블리셔가 제작한 웹페이지의 주요 기능을 모두 개발합니다.
각 페이지에 들어가는 데이터들은 DB명세서를 확인하고 데이터를 추가합니다.
DB 정의
- 서비스에 펠요한 모든 데이터들을 정의하여 각각의 테이블로 정의합니다.
테이블 제작 시 각 데이터의 유형과 길이를 지정합니다.
각 테이블별 정의된 내용은 별도 문서로 정리하여 Front End 개발자에게 전달하여 데이터가 정상적으로 보여질 수 있도록 합니다.
BD Table 개발
- 정의된 DB Table의 내용을 기준으로 개발을 진행합니다.
공통으로 사용되거나 기초가 되는 데이터들을 기준으로 별도의 Table을 생성하거나 가공하여 서비스에 필요한 Data를 생성합니다.
단위테스트
- 각 페이지의 모든 기능을 하나하나 테스트합니다.
각 기능별 데이터 출력 정상 출력 여부, 버튼 및 기능 수행 시 다음 단계 진입등을 확인하여 기능이 정상적으로 수행되는지 확인합니다.
5. QA&완료
단위테스트 - 통합테스트 - 프로젝트 완료
단위테스트
- 각 페이지별 개발이 완료되었다면, 해당 기능이 설계서 또는 시나리오에 맞게 잘 처리되는가를 확인합니다.
테스트 진행중 발생되는 버그 및 오류사항을 체크하여 처리방법에 대해 다시 정의하고 각 파트 담당자에게 해당 사실을 공유하여 수정 작업을 진행합니다.
통합테스트
- 모든 페이지의 개발이 완료된 뒤 각 프로세스 단위별 모든 기능이 설계서 또는 시나리오에 맞게 잘 처리되는가를 확인합니다.
통합테스트를 진행할 때 시작(Start Point) - 종료(End Point, End page)까지 정상적인 흐름으로 진행되는지 확인합니다.
단위테스트 단계보다 더 많은 버그 및 오류사항들이 발생될 수 있으며, 예외처리에 대한 사항도 시나리오를 통해 미리 확인하고 발생 여부를 체크합니다.
통합테스트 진행중 발생된 문제는 단위테스트와 동일하게 각 파트 담당자에게 해당 사실을 공유하여 수정 작업을 진행합니다.
모든 프로세스가 정상적으로 완료되었다면 통합테스트를 종료합니다.
프로젝트 완료
- 프로젝트 완료 사실을 프로젝트 구성원에게 알리고, 모든 산출물을 준비하여 프로젝트를 마무리합니다.
이것은 프로젝트 수행방법중 하나입니다.
각 프로젝트의 단계와 세부 수행은 프로젝트 특성에 따라 달라질 수 있습니다.
프로젝트 담당자는 자신이 담당하는 업무의 R&R을 잘 파악하여, 각 파트별로 어떤 업무를 수행하는지
프로젝트 업무 수행 전 협의를 진행하여 프로젝트 흐름이 막히지 않도록 대처하는 것이 중요합니다.