코딩온 x 포스코 KDT 풀스택 웹 개발 과정 첫 번째 프로젝트 회고록

- 내가 진행했던 프로젝트에 대한 소개
프론트엔드 기능에 한해서 네명의 팀원과 함께 진행한 첫번째 프로젝트이다. 발로소득과  클래스 101 사이트를 참고하였고, 미라클 모닝을 주축으로 하는 자기계발 활동에 대한 동기부여를 돕는 목적의 웹 사이트이다
처음에는 웹에 각종 챌린지 기능도 넣기로 하였으나 시간 부족으로 인해 넣지 못하였고 발로소득과 같이 앱 소개 페이지로 콘셉트를 진행하게 되었다.

 

메인페이지

 

- 진행기간

2024.01.13 ~ 2014.01.24

- 프로젝트시 개인적으로 신경썼던 점
1. 간결하고 깔끔한 코드를 짓기 위한 고민을 통해 의미없는 주석은 지우고 문맥을 분리하는 부분의 공백 라인을 띄우는 것과 같이 공백 라인을 의미있게 사용하려고 노력하였다. 

2. 협업을 할 때 팀원이 나의 코드를 보고 잘 이해할 수 있도록 하기 위해 고민하는 것을 통해 클래스나  id 이름의 의도를 명확히 알 수 있도록 짓고, 코딩 컨벤션을 지키기 위해 노력하였다. 

3. 어느 한 요소라도 일그러지거나, 일관된 레이아웃을 약간이라도 깨뜨릴 수 있는 배치 혹은 디자인을 가지지 않게 하기 위해 정리된 html 코드를 유지하고, css에 추가한 기능들이 상호적으로 충돌을 일으키지 않도록 고민하였다

4. 사용자가 느끼기에 흥미를 유발할 수 있도록 하는 디자인을 구현하기 위해 고민하였다.

5. 모바일 사용자를 위한 반응형 페이지에서도 한 눈에 들어올 수 있도록 하는 레이아웃을 구현하기 위해 고민하였다.

6. 처음 들어온 사용자도 쉽게 웹 페이지의 취지를 파악할 수 있도록 직관적으로 사용할 수 있는 페이지를 구현하기 위해 고민하였다.
 
- 팀의 관점에서 부족했던 점
사실 구체적으로 프로젝트 시행 시 어떤 점을 중점에 둬서 고민을 하고 시행했어야 했는지 잘 모르고 있었던 것 같다. 고민은 많았는데 프로젝트에 도움이 되는 내용들은 많이 없었던 것 같다. 지금와서 생각해보기에 제일 먼저   시행했어야 하는 점은 팀내 규칙 정하기였다. 아무리 내가 코딩컨벤션을 나름대로 지킨다 해도 팀원과 통일되지 않으면 팀 전체의 관점에서 봤을 때는 지키지 않은 것이 된다는 것을 알게 되었다.  코드뿐만 아니라 코드를 관리하는 깃에 대한 규칙을 상세하게 정했어야 했다. 우리  팀은 이 점을 간과해서 깃에대한 문제 해결에 시간을 빼앗겨 결과물을 제대로 만들어내지 못해서 아쉬웠다. 프로젝트 시행에 있어서 좋은 결과물을 내기 위해 기획 과정에서도 활발한 회의가 이루어졌으나 아이디어가 많았더라도 계획한 것을 모두 실행하기에 프로젝트 진행속도가 느렸고 깃이라는 변수 때문에 혼란이 커져 원활한 프로젝트 진행은 아니었던 것 같다. 전반적인 과정에서 아쉬움이 크다.

 - 개인적인 관점에서 아쉬웠던 점
조장이 아닌 조원이라고 생각하여 일부 문제에서는 비중이 커야할 조원에게 문제 해결을 의지하는 경향이 있었고 적극적으로 참여하지 못한 점을 반성하고 싶다. 성장하고 싶은 마음이 큰 만큼 문제 발생 시 해결을 위해 행동으로 보여줬어야 했다고 생각하는데 자신감 부족과 경험, 지식 부족으로 그런 면에 있어서 적극적이지 못해 계속 생각이 났다.  또, 웹 페이지의 애니메이션 측면에서만 신경을 썼던 점이 부족했다. 웹 페이지에서 구현할 수 있는 다양한 기능을 알아보고 시야를  넓혔어야 했는데 애니메이션을 통한 화려한 웹 디자인에만 집중했던 점이 아쉽다.

구현한 페이지

* 웹 사이트의 첫번째 메인페이지
- ui/ ux를 고려한 디자인에 중점을 두어 페이지를 구현함
    - 페이지 접속 시 포물선을 그리는 해 애니메이션 구현, 그라데이션 효과 등을 활용하여 웹 사이트의 목적성이 잘 드러날 수 있도록 함
    - 중요 문장을 페이지 가운데에 강조하여 페이지의 취지가 무엇인지 한 눈에 들어오게끔 함.
    - 메인 페이지인 만큼 웹 페이지에 처음 접속하는 사용자들의 이목을 끌기 위하여 애니메이션 요소를 활용하여 디자인 함.(ex ) 도형에 hover 시 빛나는 효과, 도형의 움직임, 해의 움직임, 문장이 중요한 순서대로 나타남
-
* 챌린지 상세페이지
- 디자인 보다는 요소를 중앙 배치하고, 많은 정보를 정돈되게 보이도록 하였다. 깔끔한 레이아웃을 통해 사용자가 페이지를 통해 챌린지 수행 방법, 효과 등의 정확한 정보를 얻는 데에 불편함이 없도록 하였다.

- 정보를 전달하고, 챌린지 수행을 인증하는 것이 주된 기능의 페이지이지만 챌린지라는 키워드를 통해 전달되는 활동적인 느낌을 주기 위해 애니메이션 효과와 다양한 컬러를 추가하였다.

* 느낀 점

- 웹 페이지를 만들어보고 나서 웹 페이지에 접속할 때 레이아웃을 유심히 살펴보게 되는 계기가 되었고, 또한 한 요소를 배치하고, 시각적으로 보이게 하는 데에 어떠한 코드가 필요한지 개발자의 관점에서 생각해보게 되었다.
- 팀으로 협업하다 보니 모든 팀원들이 알아볼 수 있는 간결하고 직관적으로 한 눈에 들어오는 코드 작성이 어렵다는 점을 깨닫게 되었다. 협업을 하면서 많은 커뮤니케이션을 나누게 되는데 그때마다 회의 내용을 문서로 기록해두는 것에 대한 중요성을 깨닫게 되었다.