-
Project WorkflowBackground 2022. 2. 22. 14:51
웹프로젝트를 진행할 때 어떤 흐름으로 진행되는지 정리하고 참고하기 위해 작성하였습니다.
< Introduction >
프로젝트의 각 개발 단계를 말하기에 앞서 :
각 개발 모든 단계가 프로젝트에 있어서 중요하지만, 반드시 사전에 모든 것을 계획하여 진행할 필요는 없고 고정된 순서는 없다는 점 참고 바랍니다. 사전에 모든 것을 완벽히 계획하더라도 기획이 바뀌거나 요구되는 기능이 바뀔 경우 다시 전 단계로 돌아갈 수 있습니다. 또한 프론트엔드를 구상하기 전 데이터 베이스를 설계하거나, 프론트엔드 디자인이 끝난 뒤 백엔드 API를 설계하는 등 순서는 바뀔 수 있습니다.
< 1. 프로젝트 구상 >
- 어떤 아이디어를 이용해 웹사이트를 만들지 구상합니다.
이 단계에서 세세한 부분을 신경 쓸 필요는 없습니다. 코드를 작성하거나 구성요소를 구축하는 게 아닌, 프로젝트의 큰 그림을 생각하고 구축된 앱을 상상하고, 사용자에게 어떤 것을 전달할지를 생각합니다.
개인적으로 자신이 좋아하는 것 또는 만들어 보고 싶은 것을 선택하는 것이 중요한 것 같습니다. 개발을 하면 여러 문제들을 만나며 힘들 수 있는데, 자신이 좋아하는 프로젝트를 진행한다면 이를 동기 부여로 받을 수 있기 때문입니다.
< 2. 페이지 기획 >
- 웹사이트 모형(와이어 프레임)을 생성합니다.
와이어 프레임은 전체 사이트가 시각적으로 어떻게 보일지를 나타내는 모형입니다. 와이어 프레임에 색상이나 로고, hover시 효과 등과 같은 디자인 요소는 포함되어 있지 않으며, 페이지 안에 위치시킬 요소들만 간단히 스케치 합니다.
이 단계에서 웹 사이트가 구체화됩니다. 이미지, 사진, 비디오와 같은 시각적 콘텐츠를 이 단계에서 생성합니다.
간단히 A4용지에 스케치하셔도 되고, Figma와 같은 와이어프레임 툴을 사용하셔도 됩니다!
Wire Frame 1 Wire Frame 2 : 출처 : 슬로우워크 블로그 https://slowalk.tistory.com/2140 - 페이지별 필요 기능을 정의 및 기획합니다.
와이어 프레임을 만들면서 이 페이지는 무슨 역할을 하는지, 그렇다면 무슨 기능이 있어야 하는지를 정의하며 만듭니다.
+. 각 페이지의 모형을 생성하면서, 플로우 차트도 같이 생성하면 매우 도움이 됩니다.(이 페이지에서 어느 페이지로 네비게이트 되는지, 로그인 실패시 어느 페이지 성공 시 어느 페이지 등)
플로우차트란 무엇인가? (흐름도, 순서도) / 기호 설명과 그리는 방법, 주의사항 (알고리즘, Algorit
플로우차트란? 플로우차트(Flowchart)는 순서도, 흐름도라고도 한다. 순서도는 어떠한 일을 처리하는 과정...
blog.naver.com
개인적으로 페이지 기획 단계가 제일 중요하다고 생각합니다.
나중에 개발을 진행하기에 앞서 미리 어떤 식으로 개발할지 계획하고 큰 그림을 그릴 수 있습니다.
프론트일 경우 :
- Material UI 또는 부트스트랩(Bootstrap)과 같은 UI 라이브러리를 사용하는 경우 어떤 구성 요소/클래스를 사용할지 미리 계획
- React를 사용하는 스케치(와이어프레임)을 보고 컴포넌트로 구분, 어떤 컴포넌트에 state를 넣어야 할지 미리 구상 등
백엔드일 경우 :
- 개발할 핵심 기능들 미리 구상하고 파악
- 어떤 API를 만들고 어떤 엔드포인트를 사용할지 결정 등
< 3. 개발 >
기획서 및 와이어프레임에 따라 개발을 진행합니다.
프론트엔드와 백엔드에서 각각 어떤 작업을 해야하는지 이해하고 개발합니다.
백엔드일 경우 DB를 모델링하고 API를 구체적으로 설계합니다.
팀으로 작업하는 경우 서로 코드리뷰를 진행하며 Git Flow에 맞춰 협업합니다.
Wire Frame 2 : 출처 : 슬로우워크 블로그&amp;amp;nbsp;https://velog.io/@couchcoding/웹-개발자-포트폴리오-A-to-Z기획부터-배포까지 DB Schema
< 4. 도메인 설정 및 배포 >
AWS와 같은 배포 서비스를 이용하여 배포하고 도메인을 설정합니다.
Git ReadMe에 프로젝트 설명글을 작성합니다.
< 5. 결과 분석 및 회고 >
프로젝트의 목표는 달성하였는지, 프로젝트를 진행하며 아쉽거나 부족하다고 느낌 점이 있었는지 등 프로젝트의 전반적인 과정을 회고합니다.
참고 글 :
웹사이트 개발까지의 추천 10단계
웹사이트 개발까지의 추천 10단계 (참조 : 10 steps for developing a website ) 다른 여느 기술적인 프로젝트와 같이, 웹사이트 개발도 쉬운 일은 아니다. 주의해야 할 점이 너무도 많기에, 웹사이트 개
freemoa-blog.com
[개발자를 위한 프로젝트 A to Z] 풀 스택 개발 프로젝트, 어떤 순서로 해야 할까? (1/2) - 코딩월드
웹 사이트 개발은 어떻게 진행될까? 웹 사이트 개발 프로젝트는 \'코딩\'으로 시작하지 않으며, 사이트 구축이 완료되었다고 끝나지 않는다. 개발자는 코드를 잘 쓰는 것만 중요한 것이 아니라,
www.codingworldnews.com
웹 개발자 포트폴리오 A to Z(기획부터 배포까지)👩🏻💻
IT 회사에 개발자로 취업을 하려면 개발에 대한 지식 / 경력 / 실력이 필요합니다. 경력이 없는 신입(~3년 차)에게 회사가 지식과 경력과 실력을 확인하는 방법은 무엇일까요? 첫째는 학습한 기록(
velog.io
'Background' 카테고리의 다른 글
let, var, const의 차이점 & 호이스팅(Hoisting) (0) 2022.04.29 HTTPS (0) 2022.03.14 HTTP (0) 2022.02.10 Server-Side API Calls to External APIs (0) 2022.01.10 MVC : How to Structure your App (0) 2022.01.09