다시 블로그에 기록을 남기기 전에 이전의 기록들을 보면서 "어떤 과정에서 가장 많은 시간을 썼을까?"하는 궁금증이 생겼었다. 어렵지 않게 그 답을 찾을 수 있었다. 바로 "뼈대를 구성하는 일"이었다. 흔히 떠오르는 플로우 차트, 더 나아가 와이어 프레임 뿐만이 아니라 vue.js 에서의 view 단위, component 단위를 구조화하고 firebase db에 데이터를 어떤 구조로 저장할 것인지 등을 모두 포함하여 "뼈대"라고 표현하겠다. 이 과정은 사실상 "1달, 2달이 걸렸습니다." 라고 말하기도 애매할 만큼 처음에 전체적인 뼈대를 약 2-3주간 고민하고 진행하는 중에도 계속 우리의 회의 주제가 되었다. 일을 하면서 깨달았지만 뼈대를 작업하면서 수정하고 추가해 나가는 것은 정말이지 비효율적이었다.
플로우 차트와 와이어 프레임
플로우 차트는 말 그대로 웹페이지의 흐름을 대략적으로 보여주는 차트를 말한다. 왼쪽은 우리 웹사이트 플로우 차트의 일부로 Figma 툴을 이용해 만든 것이다. 이렇게 한눈에 웹페이지의 흐름과 구조를 파악할 수 있게 만들어 둔 후 작업을 시작하면 협업 과정에서 역할을 나누기도 용이하고 부족한 부분이나 피드백을 주고 받을 때도 편리하다. 오른쪽은 와이어 프레임의 일부로 플로우차트가 전체적인 흐름을 보여준다면 와이어 프레임은 각 페이지를 조금 더 자세하게 구조화한다. 웹의 와이어 프레임의 경우 디자인팀과 개발팀이 함께 논의하여 작성했었기 때문에 디자인적인 요소가 많이 가미된 편이다. 보통 이렇게까지 디자인적 요소를 많이 가미하지는 않고 더 러프하게 짜는 편이 일반적이다. 우리는 이후 어플을 만드는 과정에서 러프한 디자인으로 와이어프레임을 작성했었는데 그 자료는 어플 게시물을 참고하면 될 것 같다.
당시 아쉬웠던 점은 처음에 구조화를 제대로 하지 못하고 개발을 시작했던 점이다. 기획팀도 개발팀과의 협업이 익숙하지 않았던 터라 기획안을 뒤늦게 추가하는 경우가 많았고 우리 역시 구조의 중요성을 체감하지 못한 상태로 개발에 들어가서 중간중간 구조를 추가하고 다시 개발, 추가하고 개발하는 비효율이 발생했다.
Vue.js 에서 view와 component
view와 component 단위로 우리는 구조화를 진행했고, 현재 운영되고 있는 사이트의 코드는 위의 사진처럼 구조화되어 짜여진 것을 확인할 수 있다. view는 해당 페이지의 바탕, component는 그 페이지 안에 들어가있는 각 요소 (문단)이라고 생각하면 쉽게 이해할 수 있을 것이다. 이렇게 component화 하여 코드를 작성하면 유지, 보수가 쉽다는 장점이 있다.
Firebase DB 구조
우리는 firebase 서비스를 백엔드로 사용했고, firebase 안의 firestore를 주로 사용했다. 우리의 웹페이지는 주 기능이 설문을 업로드 하는 것이기 때문에 설문에 대한 어떤 정보를 받아서 어떤 방식으로 저장할 것인지, 설문을 올린 고객의 데이터를 어떻게 저장하는지 등이 주요한 기능이다. 따라서 이와 관련해 firestore 안에 배열을 만들고 collections, documents를 만들어 구조화하고 이를 기록하여 공유하는 데 많은 시간을 썼던 것 같다.
'WEB 프로젝트' 카테고리의 다른 글
| 4. 개발 X 기획 X 디자인 협업 (1) (0) | 2022.08.10 |
|---|---|
| 3. Vuex store & firebase firestore 이용하기 (0) | 2022.08.05 |
| 1. 웹 프로젝트 시작 (0) | 2022.08.01 |
| 3. 웹 개발 프로젝트 요약 (3) (0) | 2022.07.24 |
| 2. 웹 개발 프로젝트 요약 (2) (0) | 2022.07.24 |
