사전스터디가 끝났다!

웹 개발 종합반 강의와 함께 진행했던 사전 스터디 및 프로젝트가 끝났다!
이런저런 우여곡절이 많았지만 아무튼 무사히 종료되었다... >_<...!

우리 팀이 진행한 프로젝트는 특정 인터넷 서점의 1월 소설 베스트셀러 20권을 보여주고, 리뷰를 공유하는 사이트.

기획 단계에서 나왔던 아이디어 중 페이징 기능을 제외하곤 다 해결한 것 같다...!
태어나서 처음으로 직접 부딪히며 만들어본 사이트라 여기저기 자랑을 많이 하고 다녔는데, 생각보다 칭찬도 많이 들었고 너무 즐거웠다.

피드백 받았던 내용들

내가 혼자 고민했던 것들이 괜한 것은 아니었구나 싶었던 순간!

1. 정렬 방식은 우리가 다룬 책 권수가 많지 않기도 했고, 베스트셀러를 제공하는 만큼 순차적으로 보여주는 게 더 좋다 생각했다. (구현에 어려움을 느껴 드랍한 기능이기도 했다...)

2. 별점이 보여지는 방식, 그리고 별점의 기준에 대해 혼자 나름대로 고민을 많이 했다. 예를 들어 이 페이지를 방문한 사람들이 이 별점이 어떤 식으로 매겨졌으며, 왜 이런 점수인지 궁금해하진 않을까? 같은.

   a. 처음엔 별점 수치를 따와 우리만의 방식으로 표현을 하고 싶었지만, 사이트를 까보니 대부분의 서점 사이트들이 별점을 이미지로 보여주고 있었다.

   b. 우리 페이지에서 작성된 리뷰를 기준으로 보여줄까 하는 생각도 했으나 아무도... 리뷰를 작성해 주지 않을 것 같아 혼자 생각만 하고 말았다. (하지만 다시 기획 단계로 돌아간다면 이 방식으로 진행하자고 할 것 같다...)

3. 책 소개글을 크롤링해오고 보여주는 과정에서 정말 많은 어려움을 겪었다.

   a. 처음엔 책 소개가 아닌 책 서평을 가져오고자 했다. 가능하면 셀레니움을 사용하지 않고 진행을 하고 싶었는데, 하필 가져오려던 책 서평 데이터가 더보기 기능으로 묶여있어 bs4만으로는 데이터를 가져올 수가 없었다.

   b. 게다가 책마다의 상세페이지 구성이 전부 달라서 selector도 뒤죽박죽이었다. 하룻밤을 꼬박 새고도 해결을 못했다.(bs4만 붙들고 있으니 해결될 리가 없었다.)

   c. 결국 '책 소개' 데이터를 가져왔다. (진작에 그럴 것을.)

   d. 책 소개의 내용이 너무너무 길었다. 이걸 어떻게 처리할까 고민하다 줄 단위로 자르고, 뒤를 ...으로 표시해 주는 기능을 찾아 사용했다. 그러나 윈도우와 맥 각각의 환경에서 보여지는 모습이 다르다는 사실을 간과했다. 결국 스크롤 기능으로 처리하였다.

1. 진행 내내 생각지도 못했던 내용이었다! width 값을 죄다 고정 값으로 처리해놓은 바람에 모바일 환경에선 너무너무 형편없는 모습을 하고 있었다.

   a. @media 미디어쿼리를 사용해 특정 해상도에서의 css를 변경하는 방식으로 수정하였다.

   b. 목록에선 모바일 해상도에서 이미지가 보이지 않도록 하였으나, 상세페이지에선 인포 위에 이미지를 표시하고 싶었는데 결국 해결하지 못해 동일하게 이미지를 삭제하는 방향으로 처리하였다.

1. 서점 사이트들의 배치를 많이 참고하면서 구성했는데, 다행히 좋은 피드백을 받았다.

2. 스크롤바가 너무 못생겨서 숨겨버렸다. 배경과 구분되지 않아 많이들 헷갈리지 않으실까 고민을 잠깐 해놓고 그냥 밀어붙였는데, 아니나 다를까 고민을 더 해봤어야 하는 문제였다. 🤣

어려웠던 부분

1. 페이지 기능
   다 같이 많이 고민했지만, 아직 우리가 다루기엔 너무 어려운 기능이기도 했고, 제출 기한도 얼마 남지 않아 결국 포기하게 되었다.

2. 책마다 다른 상세페이지를 보여주는 것
   밤을 새고도 혼자 해결이 안 돼서 엄청나게 스트레스를 받았다. 식욕도 뚝 떨어지고 화가 나고 억울해서(ㅋㅋㅋ) 울고 싶었는데 눈물도 안 났다.
   결국은 백엔드를 지망하시는 팀원분이 해결해 주셨는데, 구현 방법은 이해했으나 정작 코드를 여전히 잘 이해하지 못해서 종종 다시 들여다보고 있다.

3. 이벤트가 있는 데이터를 가져오는 것
   사용하는 패키지에 대해 자세히 알지를 못하니 bs4만 붙들고 밤새 부딪혔으나 당연하게도 해결되지 않았다. selenium을 사용하면 된다고는 하는데, bs4만으로도 해결될 줄 알고 정말 언어 그대로 삽질을 했다.

프로젝트를 진행하며 느낀 점

프로젝트를 진행하지 않은 팀들도 많았기 때문에, 절대적으로 우리 팀에 큰 도움이 되는 시간이었다고 생각한다. 조금 과장해서 표현한다면 풀스택 미니 프로젝트를 하나 더 진행한 것과 같지 않았을까?(ㅋㅋㅋ) 분명 강의를 통해 미리 배우고 경험했던 부분임에도 생각보다 어려운 부분도 많았고, 강의를 따라하며 배울 땐 잘 이해되지 않았던 부분이 단번에 이해되기도 했다.

처음엔 나름대로 파트도 나눠가졌으나, 업무 분배에 있어 균형이 안 맞기도 했고, 다양한 부분들을 각자 직접 경험해 보자! 하는 의미에서 결국 모든 부분을 각자 과제처럼 진행하며 서로 모르는 부분을 질문하고 함께 고민해보는 식으로 프로젝트를 진행했다. 개인적으론 괜찮은 방식이었던 것 같다. 풀스택 프로젝트 후 3주 차에 주특기를 정한다는 커리큘럼과는 다르게 우린 느닷없이 개강(3월 7일) 전부터 주특기를 선택해야 했기 때문에, 이 진행 방식이 예상외로 꽤 많은 도움이 되었다. (이후에 알아보니 4기부터 커리큘럼이 바뀌어 주특기를 먼저 선택하고 들어가는 방식이 되었다고 합니다. 혹시나 글을 보게 되시면 참고하세요!)

지원 전부터 백엔드에 대한 많은 환상... 같은 게 있었는데(ㅋㅋㅋ) 실제로 경험해보니 역시나 환상은 환상일 뿐... 나는 프론트엔드가 훨씬 적성에 맞았다. 눈에 보여지는 많은 부분에 내가 짠 코드를 사용하게 되었는데, 그 부분에 대한 칭찬을 많이 받아서 기분이 너무... 좋았다...!

내가 혼자서 새벽에 열심히 짜본 것들을 말없이 깃허브에 올려두면 팀원분들이 별 말씀 없이 다 그대로 수용해주셨는데, 정말 감사하면서도 한 편으론 죄송스러웠다. 다음 프로젝트부턴 조금 더 내 진행에 대한 상황을 공유하며 교류하는 것이 필요할 것 같다.

TIL이나 WIL을 작성하는 연습을 하고 버릇을 들이는 것도 필요할 것 같다...!