[새싹x코딩온] 풀스택 개발자 부트캠프 과정 1차 팀프로젝트 회고(1주차)

Team 2TheCode

 

 

팀 설명

인원: 백엔드 2명, 프론트엔드 2명

작업기간: 12. 16일 ~ 12. 30일 

사용기술: NODE.JS, Express, Sequelize, EJS, JWT, AWS 등

사용 API: YOUTUBE.JS, CKEDIT5, Sheet.JS

 

담당하게 된 역할: 프론트엔드

작업페이지: main, search, detail, favorites, 404

프로젝트 주제에 관한 이야기

새싹에서 처음 진행하는 팀 프로젝트이기도 하면서 살면서 처음 경험해 보는 프로젝트이기 때문에 기대와 설렘 그리고 압박감이 장난 아니었는데! 1주 차가 지난 회고를 작성해 보겠습니다

 

왜 이 주제를 정했는지? 🤔

첫날 주제에 대해 회의를 할 때 레시피라는 주제어가 나오게 되었고 현재사회에서 1인 가구가 늘어나고 있기도 하고 흑백 요리사 등의 예능프로그램의 인기로 요리 키워드가 상승세였습니다 그리고 일상에서 쉽게 사용할 수 있는 주제라 판단되어 팀원들과 협의하에 최종결정을 하게 되었습니다

 

맡은 작업

전체적인 디자인 가이드라인 피그마로 설계

main, search, detail, favorites, 404 페이지 프론트 개발

 

전체적인 시안

 

프로젝트 초기 단계에서 웹사이트의 기초 시안 디자인을 제작하는 역할을 자연스럽게 맡게 되었습니다 먼저 팀원들과의 회의를 통해 각자의 의견과 요구할 사항이 있는지 확인 후 정리를 하고 정리된 의견을 기반으로 주요 기능과 화면 구성을 설계하면서 디자인 과정에서 팀원들의 의견을 최대한 반영하고자 노력했습니다

 

구체적으로는, 팀 내 디자인과 관련된 전공자가 없기 때문에 여러 국내/해외 사이트의 디자인을 최대한 참고하면서 사용자 경험을 중심으로 레이아웃과 UI 요소를 설계하고 이를 구체적인 시각적 시안으로 구현했습니다 이후 제작된 시안을 팀원들과 공유하며 피드백을 주고받았고, 필요한 부분을 수정/보완하여 최종안을 확정했습니다

 

이 과정에서 디자인된 시안을 공유하는데 adobe XD를 사용하려 했으나 시안 공유에 대한 한계점이 있었고 이후 피그마를 따로 공부하여 XD로 디자인된 시안을 피그마로 옮기는 작업을 해보게 되었습니다 이후 팀원들이 시안을 실시간으로 수정사항을 확인하면서 작업효율성이 좀 더 높아졌습니다

 

개발현황

 

 

프로젝트 회고

목표와 할 일을 목록화하자!

개발에 들어가기 앞서 각 페이지에서 사용자들이 이 페이지에서 얻고자 하는 정보가 무엇인지 좀 더 자세하게 고민해 보고 어떤 기능이 제공되어야 하는지를 파악한 후 목록화하여 우선순위를 정하고 개발에 들어갔습니다 개발의 구체적인 목록은 노션의 템플릿을 이용해 이슈트래커를 작성하도록 하였습니다

 

우선 제일 먼저보이는 메인페이지에서는 이용자가 어떤 성격의 사이트인지 알 수 있도록 주 콘텐츠와 검색폼을 배치하여 정보를 제공하는 사이트임을 알 수 있도록 하였습니다 그리고 검색, 로그인, 회원가입,  회원탈퇴, 북마크 등 필수기능을 제외한 불필요한 기능은 제거하여 짧은 기간 내 프로젝트를 안정성 있게 완성 후 제출을 목표로 계획했습니다

 

 

CSS 프레임워크? 라이브러리?

저희는 프로젝트를 시작할 때, CSS 프레임워크를 사용하지 않기로 결정했습니다 이유는 CSS를 제대로 이해하지 못한 상태에서 프레임워크에 의존하게 되면  내가 사용한 CSS의 속성이 무엇인지와 사용해야 하는 이유 그리고 구조를 깊이 이해하지 못할 것이라 생각하였고 CSS를 직접 작성하며 레이아웃 작성하며 반응형 디자인 구현을 해보며 발생하는 문제를 스스로 해결할 줄 알아야 진정으로 할 줄 안다라고 생각되었기 때문에 순수 CSS를 사용하기로 하였습니다

 

1차 팀프로젝트의 CSS 최적화를 제대로 완료한다면 2차 팀 프로젝트에선 다양한 프레임워크를 사용해 좀 더 화려하고 복잡한 기능의 웹 사이트를 만들어볼 예정입니다😁 아니면 직접 경량 라이브러리를 만들어보는 것도 좋은 경험이 될 것 같아요

 

디자인과 개발은 다르지만, 일관성과 규칙이 핵심!

개발과 디자인은 다르지만 본질은 매우 유사하다고 생각했는데요 개발할 때의 변수나 함수의 규칙을 정하고 코드를 일관성 있게 작성하듯, 디자인에서도 크기나 여백, 폰트 등을 규칙 있게 작성하고 그 규칙을 유지하는 것이 어렵기도 하면서 중요한 핵심이기 때문입니다 이번 프로젝트에서도 나름 규칙적이고 공통으로 쓰이는 CSS의 컴포넌트화를 한다고는 했지만 생각대로 잘 되진 않았습니다 초반엔 나름 규칙적인 CSS를 작성을 했지만 유사한 요소들로 인한 재사용되는 태그의 스타일변경의 복잡함, 중복사용된 클래스의 예상치 못한 스타일 변경 그리고 애니메이션 같은 효과적용을 위한 CSS를 사용할 때 점점 지저분해지는 문제를 확인했습니다

 

공통된 CSS를 common 으로 관리 이후 공통된 CSS에서 추가로 설정해야 하는 스타일은 페이지의 독립된 CSS에서 따로 작성하는 방법으로 한다면 좀 더 유지보수성이 좋고 가독성 있는 스타일을 작성할 수 있겠다는 생각을 하였습니다 프로젝트 기한 내에 할 수 있다면 좋겠지만 끝나더라도 해볼 생각입니다!🤔

 

애초 디자인이 완료된 후 공통적으로 쓰이는 버튼, 폼, 헤더, 푸터, 목록, 리스트 같은 재사용이 될만한 요소를 먼저 스타일을 묶어놨더라면 좀 더 깔끔한 CSS코딩을 할 수 있지 않았을까 하는 아쉬움 그리고 클래스명의 중요성 짧고 명확하게 작성할 수 있도록!

 

 

다음회고는 Javascript 그리고 반응형과 서버와 요청처리에 대한 회고를 이야기해 보겠습니다