[코딩온] 프론트엔드 입문 Day 35~37 (2차 프로젝트 6~7, 발표)
이번주는 2차 프로젝트 마무리와 발표가 있었다. 프로젝트의 완성도를 끌어올리는데 집중하느라 매일 어떤 작업을 했는지 기록해두지 않아서, 지난 일주일의 기록을 최대한 생각나는대로 적어보려고 한다.
일단 지난 주말에는 회원가입 페이지의 JS 코딩을 거의 완료했고, 미디어쿼리로 화면을 줄였을 때 아이디 '중복확인' 버튼 때문에 레이아웃이 깨지는게 보기 싫어서 과감하게 버튼을 삭제하고 input에 입력되는 값을 실시간으로 받아서 검증하도록 디자인을 변경했다. 회원가입 페이지에서 해야하는 JS가 많아서, 로그인 JS는 일요일 오후에야 겨우 손을 댔던 것 같다.😂
25일 월요일 - Day 35
✍ 팀 편성이 발표되고 팀장을 선정하라고 했을 때, 나는 JS 실력이 부족한데다 1차 팀플에서 팀장을 해봤기 때문에 팀원들에게 "팀장을 안 하는 대신에 발표를 내가 하겠다"고 얘기했었다. 그래서 발표 주간이 되니 슬슬 준비해야겠다는 생각이 들어서, 아침에 일어나자마자 CANVA에 발표용 ppt를 오픈하여 구성을 대략적으로 만들어서 팀원들에게 링크를 공유했다. 교실에서 팀원들이 작업이 아직 많이 남았는데 발표 준비를 어떻게 하나 걱정하길래, 내가 ppt 구성 만들어뒀다고 얘기했다가 대단하다는 말을 들었다. → 사실 팀원들 중에 작업이 많이 남은 분들 파일을 받아서 도와주고 싶긴 했지만, 그런 제안을 하면 그 분들이 속상할 수 있겠다는 생각도 들었고, 앞으로 진짜 개발자의 길을 걸으려면 코드 하나도 자신이 직접 작성해보는게 좋을 것 같아서 굳이 제안하지 않은 대신 ppt를 만든건데, 대단하다는 말을 들으니 왠지 쑥스러웠다.😳
💻 이 날은 회의 시간에 서로 어디까지 작업했는지 공유하고, 디자인 디테일에 대해서 피드백을 나눴다. 1차 프로젝트 당시에는 피그마가 협업 툴인지라 다른 팀원이 작업한 내용을 굳이 물어보지 않아도 바로 확인할 수 있었지만, 이번 프로젝트는 대략적인 디자인 시스템(컬러, 폰트)만 결정하고 코딩을 시작해서, 모두 자신이 담당하는 페이지를 각자의 취향대로 디자인해서 통일감이 없는 상황이라, 회의에서 서로의 진행상황을 점검하는 과정이 아주 중요했다.
회의 이후에는 회원가입 JS에서 아직 마무리하지 못한 부분들을 작업했다. 앞서도 언급했지만 회원가입 페이지에서 반드시 작성해야하는 JS가 많았다. 처음 HTML과 CSS를 끝냈을 때는 '이런 기능들만 있으면 되겠지' 생각했는데, 막상 JS를 작성해서 기능 구현에 성공하고 실험해보면 '이렇게 됐으면 저렇게도 되어야지' 하는 오류를 발견해서 추가적인 코드를 작성해야했다. 이 날도 아직 남아있던 회원가입 JS를 작업하다보니 금방 점심시간이 되었고, 밥 먹고 오후에 다시 작업하다보니 벌써 수업 종료 30분 전이었다. "한 것도 없는데 벌써 시간이 이렇게 됐어?"를 피부로 느꼈던 하루였다.
🏠 집에 돌아와서 발표용 ppt를 조금 더 다듬어놓고, 회원가입 JS에서 아직 끝내지 못한 부분을 연구했다. 그리고 작업이 끝났다고 생각되는 회원가입 CSS, 로그인 CSS, 로그인 JS를 전부 각자의 github 브랜치에 업로드했다. 문득 오후에 팀원분들과 우리 팀 진행 속도가 절대 느리지 않으니까 걱정하지 않아도 된다는 얘기를 하다가, 내 작업속도가 빠르다는 말을 들은게 생각났다. 돌이켜보면 나는 CSS는 끝났고 JS는 70% 정도 완료된 상태였고, 다른 분들은 아직도 CSS와 JS가 완료되지 않은 상태이긴 했지만, 그렇다고 내 작업속도가 빠르다고 말하기에는 내가 JS를 그리 잘하는 것 같지 않아서 아닌 것 같다.
26일 화요일
💻 회원가입 JS에서 (아마도 일주일째) 나를 괴롭히고 있는 버튼 클릭 이벤트를 연구하다가, 구글링을 해봐도 나에게 맞는 해결방법을 찾을 수 없어서 그냥 HTML 코드를 바꿨다. → 내가 기존에 생각했던 방식은 배경이 투명한 이미지(img 태그)를 버튼화 시켜서, 인스타그램의 좋아요 버튼처럼 홀수번 클릭하면 배경색이 들어가고 짝수번 클릭하면 배경이 원래대로 돌아가는 거였다. 혹은 둘 중에 하나만 클릭되도록 하는 방법도 생각했었다. 아래는 기존 디자인인데, HTML 코드를 바꾸면서 원래 코드가 사라졌고 미리 캡쳐해둔게 없어서 팀원들 보여주려고 녹화했던 영상 캡쳐를 가져왔다.😅
버튼이 클릭되면 배경색이 들어가는 코드는 작성에 성공했지만, 짝수번 클릭에 배경색이 원래대로 돌아가거나 하나만 클릭되도록 하는건 어려웠다. 예시 코드를 찾아서 실험해보고 내가 원하는 방식으로 구현되길래 선택자나 변수명 같은걸 내 코드에 맞게 바꿔서 적용해보면 어김없이 작동되지 않았다. 안 되는데 계속 이것만 붙잡고 있을 수는 없어서, img 태그를 과감하게 삭제하고 <input type="radio">로 바꾸어 accent-color를 우리 메인 컬러로 커스텀했다. 디자인은 원래보다 허전한 느낌이지만, 기능적인 부분이 더 중요하다고 생각되어 이런 결정을 내렸다.
여기까지 작업한 후에, 네이버 로그인 API의 클라이언트 아이디가 있는 로그인 HTML을 제외하고 모든 파일을 각자의 github 브랜치에 업로드한 뒤에 본격적인 ppt 준비를 시작했다. 오후에는 혹시 내가 도와줘야하는 작업이 있을지 팀원들에게 물어봐서, 팀장님 요청으로 ABOUT 페이지를 만들었다. 기업의 소개글만 간단하게 나오면 될 것 같아서, HTML과 CSS만 작성했더니 2시간 만에 작업이 끝났다.🙌
27일 수요일 - Day 36
이 날은 하루가 어떻게 흘러갔는지 모를 정도로 정신이 없었다.
💻 팀원들의 진행상황을 아주 간단하게 확인하고 각자 나머지 작업을 했다. 나는 파일들을 전부 github에 올려뒀지만, 유일하게 해결하지 못하고 있던 문제를 해결하려고 오전 내내 연구를 했다. → 네이버 계정에 로그인된 상태에서, 우리가 만든 로그인 페이지의 '네이버 로그인' 버튼을 클릭하면 콜백된 이후에 팝업이 하얀 화면에서 넘어가지 않았다. 알고보니 내가 며칠 전에 네이버 연동 로그인이 제대로 되는지 실험하면서 이미 가입을 한 상태여서, 우리 페이지에서는 따로 가입절차 안 밟고 바로 index.html을 띄워준거였고, 하얀 화면은 index.html 파일에 아무 글도 적혀있지 않아서였다.😂 네이버 회원정보에서 '연결된 서비스'를 삭제하니까 정상적으로 정보제공 영역이 떴다!
(내가 오래 끌어온 고민을 금방 해결한 우리 팀장님 최고..👍)
하얀 화면에 대한 문제는 그렇게 해결했는데, 다른 문제가 있었다. → 네이버 로그인 버튼을 클릭해서 팝업으로 로그인을 하면, 콜백이 되어 로그인하고 팝업 내부에서 index.html로 넘어가버렸다. 팝업에서 로그인이 끝나면 자동으로 닫히고 부모창에서 index가 떠야하기 때문에, HTML로 로그인이 완료되었다고 알려주는 팝업을 만들어서 콜백 URL로 지정하고, 해당 팝업에서 확인을 클릭하면 자동으로 닫히면서 부모창에서 index.html이 뜨도록 변경했다.
발표 준비를 하면서, 팀원들에게 ppt 구성이 어떻게 되어있고 팀원들 각자 작성해야하는 부분이 어디인지를 알려주었다. 수업이 끝나기 전에 github에 그동안 업로드해둔 브랜치를 하나씩 develop 브랜치로 머지했는데, 일부 파일은 거꾸로 삭제되었다며 제대로 업로드되지 않았다. 얼른 집에 돌아와서 새로운 브랜치를 만들어서 다시 업로드했다. 그리고 밤에 팀장님이 드디어 우리가 만든 페이지를 배포해서, 수정해야할 부분들이 있는지 하나씩 확인했다.👀
28일 목요일
2차 프로젝트 공식적인 종료 D-1이었다.
금요일에 발표하면서 배포된 사이트에 들어가서 직접 시연을 해야해서, 발표 연습을 하면서 이곳저곳 둘러보다가 디자인적으로 수정하면 좋을듯한 부분이 있어서 오전 일찍 팀원들에게 메시지를 보냈다. 팀원들 서로 다른 팀원의 코드를 확인하고 수정할 부분들 수정해서 push하고, 나도 사이트를 둘러보면서 발표 연습을 했다. → 1차 프로젝트 당시에도 발표는 내가 했지만, 이번에는 우리 팀의 작업을 소개하면서 시연까지 해야한다니 살짝 부담스러웠다. 팀장을 하기에는 실력이 부족해서 발표를 내가 하겠다고 먼저 제안했었는데, 괜한 얘기를 했었나 싶은 생각도 솔직히 들었다. 하지만 내가 팀에서 정리 담당이었고, 뱉은 말은 지켜야하니까 부지런히 연습을 했다.
그리고 이번 프로젝트의 공식적인 마지막 날이어서, 밤 23시까지 오류 수정하느라 고생하는 팀원들에게 그동안 함께 팀플해줘서 감사했고 덕분에 많이 배웠다고 인사를 보냈더니, 팀원 모두 돌아가면서 고생했다고 격려하고 감사 인사를 하는 시간이 되어서, 훈훈한 마음으로 하루를 마무리 할 수 있었다!😊
29일 금요일 - Day 37
드디어 발표날이 되었다.
💻 아침 등교길에는 약간 긴장이 되었는데, 교실 도착하자마자 팀장님이 회원가입 JS에 오류가 생겼다고 알려줘서 코드 수정하느라 긴장이 풀렸다. → 전날 발표 연습을 하면서 실제로 시연해보다가 약관동의를 안 했는데도 가입완료가 되어버려서 JS를 수정해서 올렸는데, 수정한 내용 때문에 약관동의를 했는데도 가입완료가 되지 않는 문제가 생겼다! 얼른 구글링을 해서 해결방법을 찾아 로컬호스트에서 실험해보고, 원했던대로 구현되는걸 확인하고 github에 올렸다. 알고보니 내가 체크박스에 대한 정의를 제대로 내리지 않았고, else if문 내부의 조건도 명확하게 작성해놓지 않은 상태여서 그랬던 것이었다. (이거 해결하는 20분이 얼마나 길었는지 모른다..😂)
아무튼 팀원들은 이날 오전까지도 오류가 생긴 부분들을 수정했고, 나는 발표 준비를 하면서 팀플 repo에 올라갈 README 파일을 수정했다. 사실 README는 내가 기획 단계에서부터 미리 만들어뒀던거라, 각 페이지 별로 사용한 기술 같은걸 정리하는 일만 남아있었다. 점심을 먹고 돌아와서 발표 순서를 정해야했는데, 모두 나서서 경매하듯이 순서를 부르길래 나도 2번으로 하고 싶다고 외쳤고, 나의 빠른 외침으로 우리 팀은 2번을 낙찰받았다!👏
🗣️ 1번을 낙찰받은 팀의 발표가 끝나고, 우리 팀의 순서가 되었다. 원래는 나 혼자 발표와 시연을 하려고 했지만 그러기에는 시간이 길어질 것 같아서, 팀원 한 분에게 ppt를 넘기고 시연하는걸 도와달라고 부탁했다. 전날 저녁에 발표 연습을 많이 해서 이날 실전에서 발표 도중에 목소리가 변해버렸고, 도와주신 팀원과 합을 맞춰보지 않고 나와서 약간의 버벅임이 있었지만, 나쁘지 않게 발표를 마쳤다. 그리고 마음 편하게 다른 팀들의 발표를 보고, 본인의 팀을 제외하고 어떤 팀이 제일 잘했는지 투표를 진행했다. 이후에는 내가 담당했던 HTML 파일들에 아주 작지만 수정해야할 사항이 있어서 수정하고 github에 올려서 develop 브랜치에 머지했다가 충돌이 생겨서 해결하고, HTML을 수정하면서 CSS 선택자를 고치지 않아서 레이아웃이 깨져버린걸 확인하고 CSS까지 수정해서 github에 올리고, 오전에 만지던 README 파일을 다시 만지면서, 길었던 오늘 하루 끝!
이렇게 해서 2차 프로젝트와 관련된 공식적인 일정은 모두 끝났지만, 아직 제대로 개발되지 못한 부분들도 있고, 오류가 생기면 즉각적으로 수정해야해서, 끝났다고는 하지만 끝나지 않은 느낌이다. 돌아오는 월요일부터는 이번 교육과정의 새로운 파트가 시작될거고, 그동안 팀플 진행하느라 고생했으니 이번 주말만큼은 편히 쉬어야지!🙂
💡 그리고 이 자리를 빌어 이번 팀플을 진행하면서 느낀 점을 짧게 기록해보자면,
각자 담당하는 페이지를 만들고, 그 페이지들을 모아서 하나의 사이트를 구축해내는 과정에서 스스로가 전보다 상당히 성장하고 있다는걸 느낄 수 있었다. 이번 팀플 일정이 종료되면 앞으로의 일정 때문에 다시 손을 대기가 어려울 것 같아서, '할 때 잘하자'라는 생각으로 자꾸 굉장히 디테일한 부분들을 잡아내던 잔소리 많은 최연장자 팀원인 나랑 함께 이번 팀플을 멋지게 마무리해준 우리 팀원들에게 감사하다. 또한 프로젝트가 막바지를 향할수록 더욱 열정을 불태워서 밤 늦은 시간까지도 연락하며 코딩했던, 정말 훌륭하고 멋진 팀원들과 함께 작업할 수 있어서 즐거웠다. 어젯밤에 직접 얘기하긴 했지만, 진짜 우리 팀원들 너무 고생했습니다!
오늘의 투표결과는 월요일에 알려주신다는데, 우리가 고생한만큼 얻는게 있을거라고 믿는다!🙏
2차 팀플 결과
(따로 적기에는 내용이 많지 않아서, 그냥 여기에 postscript 느낌으로 기록하기로 했다.)
드디어 월요일, 오전에 출석체크가 끝나자마자 리더님이 2차 팀플 투표결과부터 발표하셨다. 1등은 현장에서 엄청난 효과 덕분에 관객들(?) 리액션이 좋았던 A팀이었고, 우리 팀은 C팀과 함께 공동 2등이었다.🏆
솔직히 결과를 듣고, 주말동안 '우리 팀이 상위권을 할 수 있을까' 의구심이 들었던터라 2등이라는 것에 놀랐다. → 나는 우리팀 기획이 끝나 페이지를 하나씩 만들어내고 결과물을 직접 눈으로 확인하면서, 아이템이 참신한 편이고 페이지도 예쁘게 나오고 있으니까 우리가 하기로 했던 것들만 잘해도 상위권까지는 가능할거라고 생각했고, 실제로 팀원들에게 이렇게 얘기하기도 했었다. 하지만 금요일에 현장에서 다른 팀들의 발표를 본 이후에 우리 팀의 약점이 너무 크게 보여서, 생각이 바뀌어 '상위권을 한다면 3등도 겨우 하지 않을까' 싶었다.
그런데 2등이라니 생각보다 순위가 높아서 놀랐고, 팀원들이 고생한만큼 얻어가는게 있어서 다행이다.😊
3차 팀플은 또 어떤 팀원들과 함께 하게 될지는 모르겠지만, 그 때도 훌륭한 팀원들과 좋은 결과를 얻을 수 있기를!🙏