2024-06-07 팀 프로젝트 회고

이번 팀 프로젝트에서는 발표를 맡았다. 나의 발표 대본을 함께 올려본다.

배포주소

Our Knowledge

 

발표시작

• 안녕하세요, A10조 발표를 시작하겠습니다.
• 저는 발표를 맡은 김병준입니다.
• 발표 순서를 말씀드리겠습니다.
  • 발표 순서는 먼저 이번 프로젝트에 힘써주신 팀원분들을 소개하는 것을 시작하겠습니다.
  • 그 다음 결과보고서를 함께 보며 프로젝트에 대해 간단히 소개해드리고,
  • 웹 사이트를 직접 시연하며 구현한 기능에 대해서 소개해드린 후,
  • 소감을 발표하며 마무리하겠습니다.팀 소개
• 화면: 2. 프로젝트 팀 구성 및 역할
• 본격적인 발표에 앞서 잠도 못자고 고생해주신 저희 팀을 소개하겠습니다.
• 먼저 김재훈 팀장님이 프로젝트 셋업과 홈 뉴스피드 제작을 맡아주셨습니다.
  • 김재훈 팀장님이 제작하신 홈 뉴스피드는 애플 수석 디자이너도 긴장하게 할 감각적인 디자인으로 제작되었습니다. 이따 직접 보여드리겠습니다.
  • 게다가 새벽 5시까지 이어진 시연 영상 촬영 등 뛰어난 책임감과 열정을 보여주셨기 때문에 팀이 안정적으로 협업할 수 있었습니다.
  • 팀장님의 이런 좀비와 같은 체력과 의지는 팀원들로 하여금 강한 동기부여가 되게 하였습니다.
• 다음으로 김동신님이 프로젝트의 전체적인 퍼블리싱과 상세페이지 제작을 맡아주셨습니다.
  • 또한 이미 잘 갖춰진 개발 지식과 경험으로 프로젝트의 리드미까지 화려하게 작성해주셨습니다.
  • 그리고 팀에서 UI 배치로 고생하고 있을 때 단 시간에 해결하시는 모습을 보고, ‘코딩 천재란 이런 것이 아닐까?’ 생각하게 되었습니다.
• 다음으로 김휘진님이 회원가입과 회원 관리 기능을 맡아주셨습니다.
  • 이후에 소개해드리겠지만 auth 테이블에서 회원 관리를 하던 것을 별도의 users 테이블로 관리하는 방법을 도입하면서 저희 프로젝트에 혁신의 바람을 불러 일으켜주셨습니다.
  • 이 아이디어 외에도 크고 작은 아이디어는 김휘진님으로부터 출발한 것이 많은데요, 다음에 어느 조로 가실 지 모르겠지만 그 조는 부럽습니다.
• 다음으로 한효림님이 마이페이지 제작을 맡아주셨습니다.
  • UUID 라이브러리를 사용해서 프로필 사진마다 고유한 파일명을 부여하며 ‘라이브러리란 이렇게 사용하는 것이다’라고 깊은 울림을 주셨습니다.
  • 또한 보고 계시는 PPT 제작까지 해주셨는데, 이것도 모자라 팀원들이 어려워 하는 리덕스 전역 상태 관리를 선뜻 나서서 리팩토링을 시작하는, 마치 폭주기관차와 같은 퍼포먼스를 보여주셨습니다.
• 그리고 저 발표자 김병준은 CRUD를 맡았습니다.
  • 사실 저는 CRUD를 제대로 해본 적이 없어, 이게 멋있어 보여서 호기롭게 자원을 했던 것인데, supabase와 관련해서 이렇게 어려운 작업일 거라곤 예상하지 못했고
  • 수명을 많이 단축시켰습니다. 하지만 단축시킨 수명 만큼 배워가는 점이 많았습니다.
• 마지막으로 예병수 튜터님께서 열과 성을 다하여 전폭적인 지원을 해주신 덕에 프로젝트를 성공적으로 마무리할 수 있었습니다.프로젝트 소개
• 화면: 프로젝트 개요-1
  • 다음으로 저희 보고싶조의 프로젝트의 개요를 소개하겠습니다.
  • 저희가 제작한 사이트는 ‘코드리뷰’ 사이트입니다.
  • 개발자 뿐만 아니라 비개발자도 본인이 작성한 코드를 올리고, 질문하고, 정보를 얻을 수 있는 플랫폼을 기획했습니다.
  • 발표자인 저는 이번 프로젝트를 하면서 세상이 무너지는 경험을 했는데요,
  • 프로젝트 기간 동안 ChatGPT가 반나절 가량 먹통이 되어 버린 사건이 있었습니다.
  • 이 때 저는 제가 인공지능 없이는 코드를 작성할 수 없는 몸이 되어버렸다는 것을 깨닫고, 어설프더라도 사람 냄새가 나는 코드를 작성해보자라고 느꼈습니다.
  • 저희의 프로젝트는 이런 생각에서 출발했습니다.
  • 전체적인 프로젝트를 공유하는 사이트는 이미 수없이 많지만, 기본에 충실해서 ‘코드 한 줄’을 적는 사이트는 찾기 힘든 것으로 알고 있습니다.
  • 인공지능이 이미 개발자 생태계에 깊숙이 자리 잡은 이 시점에서, 휴머니즘이 묻어 있는 코드 한 줄을 작성하고 공유하는 사이트,
  • 그것이 저희가 기획했던 사이트입니다.
• 화면: 프로젝트 개요-2
  • 프로젝트 폴더 구조는 간단히 보여드린 후 넘어가겠습니다.
• 나머지 프로세스는 과제 요구조건에 따라 진행하였으니 생략하겠습니다.
• 화면: 4. 프로젝트 수행 경과 - 기술적 의사 결정
  • 프로젝트에 사용한 라이브러리는 과제요구사항에 맞추었기 때문에 생략하겠고,
  • 텍스트 에디터로는 Quill 에디터를 사용한 것이 예외적이라 잠깐 언급하고 가겠습니다.
• 그리고 개발을 하며 맞닥뜨린 어려움과 소감, 개선 과제는 웹사이트를 먼저 보여드린 후 설명하겠습니다.웹 사이트 구현
• 자 그럼 저희 A10조, 보고싶조의 놀라운 웹사이트를 공개하겠습니다.홈피드 컴포넌트
• 먼저 메인에 들어오면 이러한 모습입니다.
• 가장 먼저 눈에 띄는 것은 역시 피드의 유려한 디자인과 톤앤매너가 돋보입니다.
• 다섯명이 협업을 하였는데도 모두가 페이지의 분위기에 맞게 디자인하였다는 점은 소통이 잘 되었기 때문입니다.
• 아이템에 마우스를 hover하면 과하지 않은 애니메이션도 들어가 있고, 게시글의 작성자와 프로필 사진, 닉네임과 게시글 미리보기 스냅샷까지 피드에 구성되어 있습니다.
• 프로필 사진은 유저가 지정한 사진으로 렌더링 되는데, 프로필 사진을 지정하지 않은 유저는 기본 프로필 사진으로 렌더링 됩니다.
• 또한 댓글이 몇 개가 달려있는지 표기해주어 피드에서도 무플인 글을 바로 파악할 수 있어 사이트를 이용하는 그 누구도 상처받지 않도록 배려한 설계도 인상적입니다.
• 또한 해당 글이 질문 글일 경우 해결중, 해결완료 상태도 피드에서 바로 보여주도록 설계하여 도움을 주고 싶은 이타적인 마음을 가진 사용자들은 해결되지 않은 질문을 바로 볼 수 있습니다.
• 그리고 빠릿빠릿하게 반응하는 검색 기능도 탑재되어 있습니다. 제목, 내용 모두 포함해서 필터링하고 있습니다.
• 이제 헤더를 보면 현재는 로그인이 되어 있어 글쓰기 버튼이 보이지만 비로그인 유저에게는 보이지 않게 조건부 렌더링하였습니다.회원가입 기능
• 다음으로는 회원가입 기능입니다. 눈에 보이는 부분은 적지만 가장 까다로운 기능이었습니다.
• 회원 정보를 어디까지 받을 것인지에 따라 auth 테이블로 회원 데이터를 관리할 지, 별도의 데이터테이블로 관리할 지 고민이 많이 되는 부분이 있었고,
• 많은 정보를 받게 된다면 기존 회원 데이터와 중복 여부를 검사하여 가입을 막거나 닉네임 변경을 막는 로직도 필요했고, 로그인 로그아웃 상태에 따라서 작동해야 하는 기능이나 선택적으로 렌더링 해야 하는 부분도 프로젝트 전체에 관여하고 있기 때문에 쉽지 않은 과제였습니다.
• 또한 예측하지 못한 에러가 너무 많아 supabase 공식문서를 계속 살펴보며 개발을 해야 하는 어려움이 있었지만 회원가입 기능을 맡은 김휘진님이 튜터님들도 찾아 뵙고 늦은 시간까지 다양한 시도를 해보며 기능을 완성시킬 수 있었습니다.마이페이지
• 다음으로는 마이페이지입니다.
• 저는 미리 로그인을 해두었습니다.
• 먼저 닉네임이 저와 어울리는 것 같지 않으니 저와 어울리는 닉네임으로 바꾸고 셀카를 프로필사진으로 변경해보겠습니다.
• 네 잘 변경되었습니다.
• 현재 작성한 글이 없기 때문에 마이페이지에서 보여줄 글이 없어 첫 글을 작성하라는 문구를 띄워줍니다. 가입을 했으니 글을 작성해보겠습니다.
• 피드에 글이 잘 올라가는 것을 볼 수 있습니다. 그리고 마이페이지로 오면 본인의 글이 잘 필터링 되어 보여집니다.
• 그리고 본인이 작성한 글을 클릭해보면 역시 해당 게시글의 상세페이지로 잘 들어가집니다.
• 마이페이지는 supabase에서 게시글이 저장된 테이블에도 접근해야 하고, auth 테이블에도 접근해야 하며, 저희가 따로 관리 중인 users 테이블에도 접근해야 하고, 프로필 사진을 저장하는 스토리지에도 접근해야 해서 굉장히 복잡했습니다.
• 그런데 마이페이지를 담당한 한효림님께서 수고해주신 덕에 기능 구현이 버그 없이 잘 마무리 되었습니다.상세페이지
• 다음으로 방금 잠시 보았던 상세페이지에 대해서 소개해드리겠습니다.
• 상세페이지는 홈 피드에서도 접근이 가능하고, 마이페이지에서도 접근이 가능합니다.
• 글 작성자의 프로필 사진과 글제목 등 게시글의 상세 정보가 보이고, 홈 피드에서 해결중, 해결완료 상태로 바꿀 수 있는 토글 버튼이 존재합니다. 이는 역시 당사자가 아니면 보이지 않는 조건부 렌더링을 하였습니다.
• 그리고 하단부에는 댓글까지 잘 보여줍니다.
• 홈 피드가 먼저 제작되고 후에 제작이 진행되었기 때문에 홈 피드에서 나온 디자인과 톤을 잘 유지하며 보여줘야 하는데 전체적인 구조나 디자인이 조화롭게 제작되었습니다.
• 이 뿐만 아니라 전체적인 프로젝트 구조 개선에도 도움을 주신 김동신님께서 상세페이지 구현에 수고해주셨습니다.CUD
• 마지막으로 CRUD 중 CUD입니다.
• 본인이 작성한 글에서는 수정 버튼이 동작하고, 삭제까지 가능합니다. 수정을 버튼을 눌러 제가 아까 작성한 글을 수정해보겠습니다.
• 잘 반영되는 것을 볼 수 있습니다.
• 다시 눌러서 들어가보면 처음에는 단순히 input과 textarea를 사용하였지만 밋밋한 느낌이 있고 코드를 제대로 붙일 수 없기 때문에 별도로 quill이라는 에디터 라이브러리를 사용하였고, 기본 기능 외에도 툴바에 모듈을 장착하여 다양한 글쓰기 기능을 사용 가능하도록 하였습니다.
• 덕분에 이미지 업로드도 한층 편해졌고, 밋밋한 글에 다양한 효과를 줄 수 있게 됐습니다.
• 비슷한 원리로 댓글 기능도 별도의 컴포넌트로 분리하여 구현하였고 수정과 삭제도 해당 유저에게만 렌더링 되게 구현하였습니다.
• 댓글에서도 CRUD는 동일하게 작동하고, 수정 또한 직관적으로 그 자리에서 바로 되도록 하였습니다.
• 글쓰기, 수정, 삭제, 댓글 기능은 발표자인 제가 담당했기 때문에 마지막을 장식하며 소개해드렸습니다.

저희 프로젝트에 대한 소개가 끝났는데요,
마지막으로 프로젝트를 진행하면서 개별적으로 발생한 어려움도 준비를 했지만, 시간관계상 발표에서는 생략하고 저희 사이트에 연재할 테니 많이 찾아와주시기 바라겠습니다.
그러면 공통적으로 느낀 어려움과 개선 과제, 소감을 발표하는 것으로 마무리하겠습니다.

개별 어려움과 해결 과정 (생략)

홈 피드

• 먼저 홈 피드를 담당하신 김재훈 팀장님이 겪은 어려움과 해결 과정을 소개해드리겠습니다.
• 홈 피드를 제작하면서 반응형 CSS에서 어려움을 겪었습니다. 헤더 영역에서 버튼으로 사이트의 기능을 이용할 수 있게 구현했지만 페이지를 확대하거나 창을 축소하는 등의 행동이 있으면 버튼들이 중앙으로 몰리는 현상이 발생하여 UI가 깨졌습니다.
• 이런 문제가 발생했을 때 튜터님을 찾아 뵙는 다거나 인공지능의 힘을 빌릴 수도 있겠지만 다른 웹 사이트는 어떻게 처리를 하고 있는지 관찰을 했고, 네이버는 줌 레벨을 백분율로 계산해서 값이 150 이상이면 버튼을 숨김 처리하고 있다는 것을 발견했고, 이를 저희 프로젝트에 적용시켜 문제를 해결하였습니다.
• 그리고 글쓰기 에디터로 quill 에디터를 쓰기로 정해졌는데, quill 에디터로 글을 쓰면 기본적으로 p 태그로 감싸지는 등 모든 글에 HTML 태그가 적용되어 반환되기 때문에,
• 우리가 지금까지 배운 방법으로는 정상적인 렌더링이 안 되었습니다. 물론 게시글 제목만 보여준다면 상관 없겠지만 게시글 내용도 미리보기로 보여주고 싶었고,
• 여기서 작성된 게시글을 홈 피드에서 어떻게 보여줄 수 있을까 고민하였습니다.
• 이미지가 들어간 경우 가장 첫번째 사진을 썸네일로 지정하여 피드에서 보여주는 방식도 고려해보았습니다.
• 하지만 quill 에디터에서 이미지를 업로드한 경우 supabase에 base64로 인코딩되어 이미지가 업로드 되었고, 해결 방법은 모두 찾아보았지만 많이 복잡하였습니다.
• 따라서 dangerouslySetInnerHTML 를 사용하며 글쓴이가 작성한 HTML을 렌더링하여 스냅샷 형태로 미리보기를 보여주어 코드가 피드에서 더 직관적으로 보이게끔 해결하였습니다.
• 하지만 이름에서도 알 수 있듯 XSS 공격 등에서 취약할 수 있다고 알려져 있으니, 우리의 경우에도 해당사항이 있는지 검토해보고 개선할 점이 있다면 개선 과제로 두려고 합니다.
• 회원가입
• 다음으로는 회원가입을 맡아주신 김휘진님이 겪은 어려움과 해결 과정을 소개해드리겠습니다.
• 회원관리 기능을 구현하는 중 자잘한 버그가 많았고, supabase 메서드에도 익숙하지 않아 오타가 난다든지 하는 문제 상황도 많이 발생했습니다.
• 또한 닉네임을 회원가입 할 때부터 유저의 추가 정보를 받기로 결정하고 기능을 구현하는 과정에서 이미 유저 테이블에 있는 닉네임이나 이메일이면 적절한 경고를 띄우고 진행되지 않도록 막는 로직을 논리연산자를 사용하여 구현하였습니다.
• 상세페이지
• 다음으로 상세페이지를 맡아주신 김동신님이 겪은 어려움과 해결 과정을 소개해드리겠습니다.
• 상세페이지에서 게시글을 수정하거나 댓글을 수정하고 홈 피드로 다시 돌아가면 리렌더링 되지 않는 문제가 발생했습니다.
• 상세페이지에서는 supabase로 제대로 수정된 데이터를 보내 원본 posts 테이블이 수정되는 것에는 이상이 없었지만 상세페이지가 홈피드의 자식 컴포넌트이기 때문에 여기서 발생한 상태 변화를 홈 피드가 인식하지 못하여 발생한 문제였습니다.
• 저희 조는 리덕스 사용에 어려움을 느끼고 있어 처음부터 리덕스로 상태 관리를 시작하지 않고 props drilling으로 개발을 시작하였고 이후에 리팩토링 하는 절차로 진행했는데,
• 진행하는 과정에서 props drilling도 많이 발생하지 않아 크게 필요성을 못 느꼈었으나 이 부분에서 리덕스를 쓰지 않으면 문제가 해결되지 않아 뼈저리게 전역 상태 관리의 필요성을 깨닫고 리팩토링을 일부 진행했고 문제를 해결했습니다.
• 마이페이지
• 다음으로는 마이페이지를 맡아주신 한효림님이 겪은 어려움과 해결 과정을 소개해드리겠습니다.
• 마이페이지에서는 supabase와 연동하여 백엔드에서 처리해야 할 부분이 많았다 보니 상대적으로 디자인에 시간을 할애하기 어려웠던 점이 있었습니다.
• 그래서 오히려 서툴지만 리덕스로 필요한 부분을 리팩토링 하면서 코드 구조를 개선하는 데 조금 더 시간을 할애했고 배울 점이 많았습니다.
• CRUD
• 저희 웹 사이트에 닉네임이 처음에는 없었으나 생기고 나서 점점 받아야 하는 정보가 늘어날 수도 있다는 점을 인지하고 이를 개선할 방법을 찾던 중 별도의 데이터 테이블을 만들어 관리하는 것도 권장되는 방법임을 알게 되었고, 이미 개발이 어느정도 진행이 된 상태에서 팀원분들께서 양해해주셔서 auth 테이블에서만 관리하던 방식에서
• 로직을 완전히 바꾸면서 수많은 에러가 발생했습니다. 예를 들어 기존에는 해당 글의 작성자만 글이나 댓글을 삭제할 수 있게 구현되어 있었지만
• 회원 관리 로직을 바꾸면서 모두가 삭제할 수 있는 에러가 발생하였는데, find 메서드를 통해 현재 로그인 한 사용자의 id와 게시글 작성자의 id를 찾아오는 방식과 supabase의 eq 메서드를 사용하여 원하는 정보만 추출하는 방식 두 가지를 혼용하여 해결하였습니다.
• 그리고 현재 진행형 중인 문제인데 데이터 테이블에 fetch 요청을 하고 화면에 렌더링 되는 속도가 느린데 코드 전체적으로 구조 개선을 해야 하는지, supabase의 문제인지 과제가 종료되더라도 이 부분은 리팩토링하며 점검해 볼 예정입니다.
• 또한 quill 에디터라는 외부 라이브러리를 사용하면서 이미지를 업로드하는 방식을 input type 파일이 아니라 에디터의 기능에 의존하면서 생긴 문제인데 base64 방식으로 이미지 파일이 업로드 되어서 이를 활용하기가 어려웠습니다. 이것도 개선을 해보려고 시도하다가 시간이 너무 지연되어 개선 과제로 남겼는데 계속 진행해 볼 예정입니다.
• 공통 소감
• 마지막으로 프로젝트를 마친 소감을 발표하겠습니다.
• 저희 팀은 리덕스가 어렵게 느껴져 프로젝트 셋업을 할 때 일단 잘 할 수 있는 props drilling으로 먼저 시작하고, 추후에 필요한 부분을 전역 상태 관리하는 방식으로 리팩토링하는 쪽으로 방향을 잡고 시작했습니다.
• 그런데 시간만 있었다면 더 진행할 수 있었을 지 모르겠지만 일부만 리덕스로 리팩토링하였고 전체적인 코드 구조 개선은 하지 못해 마이너한 버그들이 많이 있어, 개선 과제로 넘긴 것들이 많습니다.
• 이런 부분은 아쉽게 느껴지지만 오히려 아쉽기 때문에 프로젝트가 종료 되더라도 팀원들이 힘을 모아 계속 리팩토링을 진행하자고 모두가 마음을 모았습니다.
• 하지만 오히려 그랬기 때문에 좋았던 점은, 발표자인 제가 PPT 순서를 살짝 변경해서 팀원 소개부터 한 이유와도 같은데요,
• 팀 프로젝트를 하다 보면 실력 편차에 따라 붕 뜨는 경우가 생기기도 한 것 같습니다. 하지만 저희 조는 모두가 할 수 있는 부분 부터 시작했기 때문에 팀원 한 명 한 명이 고르게 역할이 분배되었고
• 또 모두가 각자 맡은 영역에서 하고 싶은 것도 해보며 각자 성장할 수 있었습니다.
• 이번 프로젝트에 있어서 개개인의 역할일 중요해지다보니, 단 한 명도 프로젝트에서 빠져서는 안 되었고, 모두가 중요해졌습니다.
• 역할 분배가 밸런스있게 잘 되었기 떄문에 다른 팀원도 직관적으로 이해할 수 있는 로직이나 코드로 작성을 했기 때문에 서로가 작성한 코드를 배워갈 수도 있었습니다.
• 화려하면서 깔끔한 코드를 작성하는 것도 배우는 점이 있고 의미 있겠지만
• 팀 프로젝트에서는 모두가 한 마음으로, 비슷한 수준에서 프로젝트를 진행할 수 있도록 회의와 소통을 거듭하는 것이 중요하다고 다시 한 번 느꼈습니다.
• 저희 조는 이렇게 프로젝트를 진행했기 때문에, 코드 완성도나 결과물의 완성도는 떨어질 수 있어도 모두가 만족하면서 중요해지는 프로젝트가 될 수 있었던 것 같습니다.
• 다시 한 번 밤낮으로 고생 많으신 팀원 분들께 감사하다는 말씀 드리면서, 이번 주말에는 이 zoom에 계시는 모든 분들도 좀 편하게 주무시길 바라겠습니다.
• 이상으로 발표를 마무리 하겠습니다. 감사합니다.