팀 프로젝트 최종 회고록

1차 구현 결과

1차 프로젝트는 HTML, CSS, JS, JQuery에 대해 어느 정도 습득한 상태에서 프로젝트를 진행하였기에 보이는 부분에 초점을 맞춰서 개발을 진행했다. 최대한 배운 내용을 토대로 주제를 선정하였고, 우리 조는 처음 정했던 대로, 소니 웹페이지의 음향기기 전용 사이트로의 리뉴얼하는 프로젝트를 시도했다. 

 

우리가 만든 '소니 웹페이지'는 총 세개의 페이지로 구성되어 있다.

1. 메인페이지
2. 기술력 페이지
3. 회사의 연혁 및 제품의 발전과정

 

우리 조는 4명씩 개발했던 다른 조와 달리 3명으로 팀을 짜서 개발을 진행했기에 시간상 워낙 빠듯했기에 그 부분에 있어서도 고민이 있었다. 강사님께서는 팀원의 숫자와 프로젝트의 퀄리티는 크게 연관이 없다고 용기를 주셨지만, 사람 마음이란 게 편한 마음을 먹긴 쉽지 않았다.

 

프로젝트 개발에 걸린 시간

 

1. 제작 기간 : 24.09.28 ~ 24.10.06 (총 9일)
2. 프로젝트 주제 : 소니의 음향기기 전용 페이지
3. 기술 : html, css, javascript, JQuery
4. 소통 : 카카오톡, Slack, Figma

★ 2. 주제 선정과정

1) 영화관 사이트
2) 세이버메트릭스 관련 야구 관련 사이트
3) 쇼핑몰 사이트

 

일단, 각자 프로그래밍 역량과는 상관 없이 여러 주제를 먼저 늘어놓았다. 당시에 내가 말했던 프로젝트 아이디어는 저 3가지였었다. 하지만 너무 대중적이거나 전문적인 내용이 될 가능성이 높았다. 그러다가, 각자의 취미에 대해 얘기해보는 시간을 가졌고, 셋다 전자기기에 대해 흥미가 있는 걸 알게 되었다. 그래서 주제를 찾다가 우리나라 기업이 아닌  전자제품 기업을 떠올리게 되었고, 그러다가 나온 게 소니와 샤오미였다. 그 중에서 자료를 수집하는데 비교적 원활할 것으로 파악되었던 '소니 웹사이트'의 리뉴얼을 선택하게 되었다.

 

★ 3. 초안 기획

우리 조는 아까도 말했다시피 조의 인원수가 한명 부족했다. 그리고 내가 간단한 시술을 받아야 해서, 이틀간 병원에 입원해야 하는 일도 있었다. 늘 책상에 앉아 컴퓨터와 씨름해야 하는 개발자에게도, 어느 직장인들에게나 건강은 중요한 법인데, 반성되는 부분이었다. 뭐, 어찌됐든 시간의 부족도, 팀원수의 부족도, 다 핑계일 뿐이라고 생각했기에 우리 조는 어떻게 해야 "개발 속도"와 "실력 대비 괜찮은 퀄리티"라는 두 마리 토끼를 잡을 수 있을 까에 대한 고민을 하게 되었다.

그래서 웹 페이지를 크게 3개로 구분짓고, Figma를 통한 디자인 작업에 들어갔다.
하지만, 내가 전공자이긴 했지만, 컴퓨터 보안 관련 공부 위주로 해왔기에 웹 디자인을 해본 경험은 부족한 편이었다. 그나마, 불행 중 다행이도  팀원들 중 한분이 포토샵을 활용한 디자인 경험이 있어서 각자 맡은 페이지의 뼈대를 구상하고, 그 뼈대를 토대로 디자인을 담당해주셨다.  그  완성된 디자인을 바탕으로 개발을 진행하니, 생각했던 것보다 훨씬 빠르게 개발할 수 있었다. 

프로그램을 개발하는 데 있어, 중요하지 않은 파트는 없다는 것을 다시금 느꼈다.

 

★ 깃허브 협업 방법

우리 조는 "프로젝트"의 개발에만 집중했던 나머지, fork 방식과 branch를 이용한 3-way-merge 중에서 어떤 방식으로 진행할지는 크게 논의하지 않았다. 그러다 보니, 첫날 프로젝트를 개발하고, push를 하려고 보니까, 나 혼자만 fork 방식으로 프로젝트를 개발하고 있었다.
(첫 프로젝트라 발생한 작은 헤프닝이 아닐까....)
어쨌든, 각자 프로젝트를 개발하고, merge를 진행했는데, 나 혼자만 merge 방법이 달랐다 보니까, sync를 맞추려다 보니, 실수로 프로젝트를 날려먹는 일이 발생했다ㅠㅠㅠ 그나마, 어떤 식으로 개발할 지 메모장으로 다 적어놓고 시작했기 떄문에 다시 개발할 때 문제 없이 개발 가능했다.
어쨌든 간에 개발할 때 어떤 방식으로 협업을 진행할 지 역시, 정해둬야 한다는 걸 느꼈고, merge도 하기 전에 sync 버튼을 누르면 로컬 스토리지의 프로젝트도 날라갈 수 있다는 걸 배웠다.
사실, 학부를 졸업할 때에는 깃허브를 써서 개발해야 겠다는 생각은 하지 못했고, 디스코드로 토의를 하면서 카카오톡으로 파일을 주고 받아 더하는 식으로 개발을 진행했는데, 깃허브를 이용한 협업에 대해 배우며 개발자로써 걸음마를 땐 기분이었다.
아직 많이 모자른 걸음마 단계지만 말이다.

 

5. 프로젝트를 통하여 얻은 것.

내가 담당했던 회사의 일대기와 제품의 역사는 
1. CSS 변경을 통한 움직이는 생동감 있는 연혁표
2. 드래그 방향에 따라 변화하는 슬라이더
3. 제품의 역사와 일대기 두 페이지로 이동하는 버튼
4. 연대별로 달라지는 제품의 역사 이미지

세가지 중점 포인트를 잡고 개발을 진행했다. 
그 중 연혁표의 경우 연혁을 가르는 선 위의 화살표가 스크롤을 내리거나 화살표를 눌렸을 떄 끝까지 내려가면서 시간이 흘려가고 있음을 표현하도록 구현하였다. 원래는 반응형을 구현한 다음, 키보드의 <- 키와 ->를 눌렸을 때 슬라이더가 이동하게끔 추가하려 했는데, 시간이 부족해 그 부분은 구현하지 못했다.

 

 

 

구체적으로는 "스크롤" 이벤트가 발생함에 따라,

1. ScrollTop()을 활용하여, 페이지 최상단 기준으로 얼마나 스크롤이 되었는지를 판단하고, clientHeight 옵션을 사용하여, 전체 padding 범위의 viewport를 넘어가지 않도록 설정하였다.

 

 

두번쨰는 제품의 역사 관련 TAB을 개발할 떄 중점적으로 고민했던 부분은.....
1. 사용자가 페이지 내 어떤 이미지를 눌러도, model 창을 통해 세부 정보를 띄운다.
2. 세부 정보를 표현할 때에는 활용하기 쉽도록 image 테그의 alt 속성을 활용한다.
3. 선택된 버튼을 눌렸을 때 alert를 반환하게끔 프로젝트를 만들었다.

 

메인 페이지

 

팀원 분이 담당해준 메인 페이지는 가운데  WH-1000XM5가 마우스 스크롤에 따라 내려오도록 만드셨다. 동일한 이미지를 반복하여 사용하는 것보다, 훨씬 생동감 넘치는 페이지가 되는 것 같았다. 

 

소니의 기술력 페이지

 

 

또 다른 팀원분이 담당해주신 서브페이지는 소니의 기술력을 설명하는 기술 페이지이다.
대 주제가 기술력에 대한 설명이니 만큼 글자 위주로 이루어진 페이지였으며, 정적이고 심심한 페이지가 될 수 있었다.
하지만 스크롤에 따라 투명하던 컨텐츠들이 하나하나 등장하는 등 DOM 조작을 최대한 활용하여 역동적 이고 인상적 인 페이지가 될 수 있었다.

 

nav와 footer 요소 한번에 제작하기

불필요한 코드의 중복을 줄이기 위해서 모든 페이지에 해당 요소를 한번에 제작한 후 넣기로 결정했다.

 

 

html 요소를 js를 활용해 삽입하기

이를 위해서는 스타일이 아닌 html 요소를 만들어서 모든 html페이지에 넣는작업이 필요했다.
떠올린 방법은 두가지였으며 모두를 활용해 제작하게 되었다.
1. CreateElements로 직접 만들어 삽입한다.
2. fetch 함수를 사용해 html파일을 네트워크로 받아온다.

 

CreateElements를 사용하는 방법

직접 요소를 제작해서 추가시키는 방법이다.
원하는 요소를 직접 만들어서 속성을 추가시킨다.

 

 

장점

js 문서를 읽어내려가며 어떤 요소가 만들어지고 무슨 속성이 들어갔는지를 순차적으로 흐름에 따라 확인할 수 있다.

단점

코드 자체가 길어진다. 가독성이 떨어져서 무슨 요소가 만들어진건지 한번에 눈에 안들어올 수가 있다.

 

fetch 함수 사용

이 방법은 html 파일을 js 파일로 네트워크 요청을 통해 가져올 수 있는 함수를 사용하는 방법이었다.

 

 

CreateElement를 사용하지말고 다른 방법으로 html요소를 가져올 수 있을지 찾아보다가 시도해본 방법이었다.

 

html요소를 노드로 바꾸기

하지만 html 파일을 가져온다고 해당 html 태그를 곧바로 DOM에 노드로써 추가시킬순 없었다.
그러기 위해서는 세가지의 단계를 거쳐 html 태그를 노드로 변환을 시켜줘야 했다.
HTML 태그 >> 문자열 >> 노드 이 세가지 단계를 거쳐야만 사용할 수 있었다.

0. fetch 와 then

fetch 함수는 비동기 함수로써 프로미스 객체를 반환한다.
그래서 이후 작업들을 then과 catch를 통해서 받아 순차적인 진행이 가능하다는 특징이 있었다.

1. text()

첫번째 then에서 응답으로 받은 html 코드를 response 매개변수에 받아 text() 메서드로 문자열로 바꾼다.

2. createRange(), createContextualFragment();

다소 생소한 방법이었지만 익혀서 적용해보았던 메서드다.
변환된 문자열을 data 변수에 받아 적용시킨다.
crateRange()메서드로 DOM을 조작할 수 있는 범위 객체를 생성한다.
범위 객체의 메서드인 createContextualFragment()를 통해서 문자열 data를 노드로 변환시킨다.
이후 appendChild 등을 통해서 정상적으로 DOM에 추가해 사용할 수 있었다.

단점

• 처음엔 작업 과정이 생소해서 다소 복잡하게 느껴진다는 단점이 있었다.
• fetch 함수로 인해 네트워크 요청으로 작업이 진행되므로 에러처리가 필요하다.

장점

• 익숙해진다면 JS코드의 양을 많이 줄여서 작업할 수 있다.
• HTML 파일로 추가할 요소를 작성해주기 때문에 작성이 다소 쉬웠다.

---

▣ 개발을 진행하며 느꼈던 점?

이 내가 담당했던 페이지에서 가장 중요했던 건 슬라이더였다. 미리 앞선 1차 포스팅에 적어두긴 했지만, 사실 처음엔 바닐라 코딩으로 슬라이더를 먼저 만들었었다. 하지만, 만든 슬라이더를 넣은 이미지를 상상해봤을 때, 너무 기능적으로 단조롭다는 생각이 들었다. 그래서, 컴퓨터공학부 졸업생이기도 했고,  보안업체긴 하지만 QA 겸 서버 엔지니어로 근무했던 경험 덕분에 관련 라이브러리가 있다는 사실은 이미 알고 있었다. 그래서 시간 관계상 라이브러리를 사용하기로 했던 것이다.
그렇게 해서 프로젝트를 만들어놓고 보니, 생각보다 슬라이더를 정지시키고 사용자가 슬라이드 부분으로 마치 기차가 정거장에 섰다가 출발하는 것처럼 중간에 멈추게끔 구현하는 게 어렵진 않았을 거란 생각이 들었다.  만들어 놓고 반응형을 하다가, 함수가 떠올랐다ㅠㅠㅠㅠㅠ 
처음부터 알고 있던 지식을 바탕으로 개발을 진행한 건 나쁘지 않았지만, 머리로 충분히 개발할 수 있었을 텐데, "라이브러리"를 쎴던 건 좋았다고 생각하진 않는다.
왜냐하면 지금은 현업에서 프로그램을 만드는 것이 아니라, 퇴사 후 처음으로 프로젝트를 만드는 상황이었기에 직접 만들어보는 편이 훨씬 나았을 거라는 정말이지 아쉬움이 남는 부분이었다.
내가 아무래도 소프트웨어 QA를 1년이상 경험했던  사람이다 보니, 은연중에 에러 코드가 발생할 만한 상황을 스스로 안만들지 않았을까 싶다. 솔직히 프로토타임을 개발하는데 있어, 함수가 생각과 달리 동작하는 에러는 어느정도 따라오는데........
또, 협업 중요성도 깊게 느꼈다. 팀원들과 소통하며 코드 리뷰를 통해 서로의 코드를 개선하고, 다양한 피드백을 받으며 개발 관점을 확장했다. 팀원의 수가 적거나, 몸이 안좋은 일도 있어서 막막하고 걱정도 많았지만 팀원들과 함께해 완성할 수 있었다.  

 

 

프로젝트 회고를 마치며.

 

미리 개발 방향을 정해놓고 진행했던 덕분에 코딩온 프로젝트 팀 중에 1등을 하여 대상을 받았지만, 여러가지로 생각이 많았던 첫번째 프로젝트였던 것 같다. 함께한 팀원들과 나, 모두 좋은 회사에서 개발자로써 첫발을 내딛을 수 있기를 바래본다.