[D+15] 2023-05-23 팀 토이 프로젝트 : 랜딩 페이지 (삼성 클론)

 

 

 

[D+15] 2023-05-23

팀 토이 프로젝트 : 랜딩 페이지 (삼성 클론)

 

 

삼성 디자인 클론 : 랜딩 페이지

 

 

<원본 페이지>

목표한 페이지 : 삼성 디자인

 

 

 

 

<랜딩 페이지 (배포버전)>

 

 

 

 

 

 

---

🎀 팀원 🎀

---

양콩(나) 💖깃허브💖

 

tanmtn님 🖤깃허브🖤

 

jwcho95님 🖤깃허브🖤

 

MINZOEY님 🖤깃허브🖤

 

 

 

---

랜딩 페이지를 8 개로 나누기

---

 

1. Header(상단바)

 

2. 메인 표지

 

3. Latest

 

4. 동영상

 

5. Stories

 

6. 카테고리

 

7. News

 

8. Footer

 

 

 

---

역할 분담

---

 

1 . 양콩 : Header(상단바), 메인표지, Footer, 깃허브

 

2 . tanmtn님 : 카테고리

 

3 . jwcho95님 : Latest, 동영상, 머징

 

4 . MINZOEY님 : Stories, News

 

 

 

 

---

❤️ 후기 ❤️

---

 

처음으로 하는 팀 프로젝트인 만큼 부족한 점이 명확히 보였다.

 

그래서 아쉬움이 많이 남는다.

 

다음에는 같은 실수를 최대한 줄이고자,

 

아쉬웠던 점을 기록해보려고 한다.

 

개선해야할 부분이나 잘한 부분은

 

랜딩페이지의 코드를

 

구석구석 씹고 뜯고 맛보고 즐긴 다음에

 

새롭게 배포하게되면, 블로그에 코드리뷰를 하면서 작성해볼까 한다.

 

 

 

 

---

1 .  아쉬운 점  :  시간의 부족함 ⏰

---

 

 

첫 번째로 아쉬운 점은, 물리적인 시간자체가 부족했던 것이다.

 

팀 프로젝트 일정은 갑작스럽게 잡혔다.

 

팀의 결성은 2023.05.18일 오후 3시였다.

 

그리고 발표는 2023.05.22일 오후 3시 였다.

 

나와 tanmtn님은 미룰수 없는 개인 일정이 있었다.

 

그래서, 기능 구현과 발표까지 시간이 상당히 촉박했다.

 

( 만만히 봤다가 낭패🤯 )

 

나는 첫 프로젝트라고 어깨에 힘이 들어가서

 

'기왕 하는 김에 이런 저런 기능을 구현해보자.' 라는 욕심이 있었다.

 

그러나 실력이 부족한 탓이었을까..

 

막상 코딩한 시간보다는

 

오히려 기능을 어떻게 구현할 지 고민하는 시간과 구글링하는 시간이 훨씬 더 길었던 것 같다.

 

주말에도 카페에 가서 코딩을하고, 잠도 줄여가며

 

랜딩 페이지 코딩에 박차를 가했다.

 

하지만 처음에 구상했던 것 만큼의 결과가 나오질 않았다.

 

일단 발표는 해야했기 때문에,

 

팀에서는

 

'포기할 것은 포기하고 일단 완성하고 발표하는 데에 의의를 두자'는 말이 나왔다.

 

사실..

 

처음으로 만들어 본 작품(?)이자 결과물이라,

 

짧은 시간이지만 아쉬움과 미련, 그리고 애착이 덕지 덕지 붙어있었고

 

그래서 눈물이 살짝 나올 뻔했다.😂😂😂

 

어쩌면 조금 나왔을지도?ㅋㅋ

 

그렇지만 이것은 나 혼자만의 프로젝트가 아니라 팀 프로젝트이기에,

 

미련은 잠시 접어두고, 다음 기회를 노려보기로 했다.

 

다음에 더 잘하면 되지!!!!

 

근데 그럼 내가 태운 시간들은?! 🫠

 

결국, 발표 전 날인 21일에

 

코딩을 완성하지 못하고 방법 만을 고민했던 부분과

 

오류 픽스하던 부분의

 

상당 부분은 주석처리(삭제)한 채로 배포해서 발표했다. 

 

 

 

 

 

---

2 .  아쉬운 점  : 첫 단추를 잘 맞춰야해 ! 

---

 

 

두 번째로 아쉬운 점은, 기획이다.

 

가장 아쉬웠던 점이라고 할 수 있다.

 

모두가 처음으로 팀프로젝트를 진행하다보니,

 

각자의 개발환경이(노트북 OS, 해상도) 다르다는 것을 간과한 것이다.

 

 

 

첫 날에는

 

어떤 페이지로 랜딩 페이지를 구현할 지도 정했고,

 

역할과 파트 등도 구분했다.

 

그리고 변수명과 함수명을 카멜(Camel) 표기법으로 정하기도 했다.

 

그러나 적응형 페이지로 만들지 않기로 정했으면,

 

각자의 해상도를 생각해서 랜딩 페이지의 규격을 통일을 했어야 했다.

 

그것을 몰랐다.😭 

 

[UPDATE] 2023년 05월 25일 기준 : 문제의 원인은 inline block이었다...

인라인블록은 적응형 페이지를 지원 안한다ㅠㅠㅠㅠ 열심히 마진 두들기면 뭐하냐구!!!!

Flexbox라는 놀라운 발명품이 있었다니.

 

 

 

왜냐하면 발표 전날에나 되어서 하나씩 합치기도 했고,

 

합치기 전까지는

 

분명 각자의 노트북에서는 원하는 기능이나 CSS적 요소들이 대부분 잘 구현이 되었기 때문이다.

 

막상 합치려고하니, 오류(적용이 잘 안되는 상황)가 나는데 원인을 몰라 모두가 당황했다.

 

 

 

 

이전의 역할 분담대로

 

4명이서 작업을 한 후에 합치는 것을 jwcho95님의 노트북으로 진행했다.

 

tanmtn님과 나는 14인치 맥북이었고,

 

MINZOEY님, jwcho95님은 16인치 윈도우 노트북이었다.

 

그래서 CSS 들이 오류가나서 이상한 위치에 가있거나, 기능 작동이 멈추는 경우가 생겼다.

 

 

 

발표 전 날에 합치는 바람에, 모두가 부리나케 수정을 했는데

 

그것 때문에도 시간이 부족했던 것 같기도 하다.

 

다음엔 꼭 이런 점들을 주의해가며 기획을 해야겠다.

 

 

 

 

 

---

3 .  아쉬운 점  :  역량 부족 , 팀원들의 실력 모름

---

 

프로젝트를 진행하기 전에,

 

기획 단계에서 각자의 파트와 역할을 정해서

 

진행을 하였다.

 

 

나는 내가 맡은 부분이 쉽다고 생각했다.

 

그래서 빨리 끝내고 팀원들을 도와주려고 했는데... 그랬는데...

 

막상 실제로 코딩을해보니,

 

내가 맡은 부분이 기능적으로 꽤나 어려운 부분이었다. 😵

 

 

 

팀원들의 경우엔, 대부분 HTML과 CSS로 클론 구현이 가능했다.

 

반면에, 내가 맡은 부분들은 자바스크립트로 구현해야 하는 것들이 좀 있었다.

 

기술의 한계가 있어서, 그 부분을 어떻게든 CSS로 구현하려니 어려움이 있었다.

 

 

자바스크립트 잘몰라요...😅

 

 

 

기능 구현이 잘 안되는 부분은 구글링으로 최대한 방법을 찾았다.

 

문제는... 그렇게해서 구현해 낸 기능들이.....

 

내 노트북에서만 구현이 되었다는 것이다.🫠

 

 

결국 상당 부분이 삭제되거나 축소되었다.

(해상도 때문이라는 것을 나중에 알게됐다.🤬)

 

 

 

그리고 팀원들 개개인의 역량을 잘 파악하지 못해서,

 

맡은 역할과 파트 분배에 약간은 실패한 것 같다는 생각이 든다.

 

 

 

 

 

---

4 .  아쉬운 점  :  깃허브 활용

---

 

처음에 내가 깃허브를 활용해서 협업 하자고 설득을 하였다.

 

팀원들이 깃허브를 잘몰랐고,

 

내가 하자고 주장했기 때문에 깃허브 관련된 것은 내 담당이었다.

 

동영상으로 공부도 따로 해가면서, 협업에 이용하려고 애쓰기도 했다.

 

하지만 생각보다 깃허브 활용이 잘 안된 것 같다.

 

팀원들은 디코로 소통하다보니,

 

파일도 거의 디코로 올려서 (어렵다고😥) 

 

각자 파일을 수정했을 때,

 

어떤 부분이 이전과 달라졌는지를 알아보기가 어려웠다.

 

커밋을 하면 디코로 올리는 것의 여러 단점들이 상쇄 되기도 하고,

 

머징할 때도 도움이 되는데.. 이게 좀 아쉽다.

 

물론 나의 설명이 부족한 탓도 있고,

 

내가 맡은 부분을 코딩하는 것에도 벅찬 탓에

 

커밋을 강력하게 주장을 하지 않았다.

 

나중에 따로 깃허브도 공부해야할 것 같다.

 

개발자라면 깃허브는 필수니까.

 

 

 

 

 

---

🗣️ Feed Back

---

 

 

피드백 주신 분	피드백
양XX 강사님	- 깃허브를 활용한 팀 플레이가 좋았음. - 변수명 작성 방식의 통일로 코드 생산성 향상 시도 좋음. - CSS를 활용한 시각적 효과 표현이 우수함. - 본인들의 한계를 뛰어넘기 위해 도전하려는 정신이 뛰어남. - 부족한 부분과 개선하고자 하는 코드의 문제를 정확하게 이해하고 있어 가장 많이 발전할것 같음.
김XX 조교님	- 깃 협업 시도한게 좋았다. - 헤더에 겹쳐보이는 부분은 여러화면마다 다른 레이아웃이 생기는걸 고려해서 배치를 해야함. - 클론하고자 했던 사이트와 유사하게 구현했기 때문에 레이아웃에 대한 이해도가 높음. - 역할 분담이 잘 된 거 같아서 좋았다.
백XX 조교님	- 목표 설정이 좋았다 👉🏻 확실하게 분업을 나누고 목적성을 가지고 있는게 좋았다 - 변수명 통일 한게 협업을 잘 하기위한 노력이 있어서 좋았다. - 구현하려고 하는 노력이 보여서 좋았다 - 발표를 천천히 만든 사이트 위주로 설명했으면 더 좋았을 것 같다.