큰 교훈을 얻었다. 앞으로는 새로운 툴을 발견(사용)하게 되면 무조건 공식문서나 튜토리얼 문서부터 보고 시작해야지. 프로젝트 처음부터 한창 사용 중이던 Figma. 앗, 아니, 사용했다고 말하면 안될 것 같다. 우리는 별 생각 없었다. 그냥 우리의 프로젝트가 남의 눈에 어떻게 보일지가 유난히 오늘따라 조금 더 궁금했을 뿐. 마침 오시영 튜터님이 계셔서 아주 가볍게 여쭤봤다. 그리고 돌아온 건 1톤 트럭이었다. 디자인을 단순히 보여주기만 한다고 생각했던 피그마에는 감히 짐작하지 못했던 너무나 많은 기능들이 있었고, 나는 그걸 사용하기는커녕 그 존재를 상상조차 하지도 못했다. 충격적이었다. 오시영 튜터님은 나를 포함한 프론트 멤버들에게 늦어도 월요일까지는 시간을 들여서 피그마 튜토리얼을 보라고 말씀하셨다. 피그마의 최대 장점인 기능들을 아무것도 이용하지 않고 있었으니 사실상 피그마 자체가 나에겐 무용지물이었다. 튜토리얼을 훑어보면서 샘플로 주어진 와이어프레임에서 이것저것 건드려보았다. 피그마 안에서 실시간으로 다른 사람들의 커서를 볼 수 있는 건 알았지만 채팅까지 가능한 줄은 몰랐다. 이래서 협업 툴 만드는 프로젝트가 어렵다고 한 거구나. 기본적이면서도 핵심적인 기능들을 사용하지 못하다 보니 디자인 요소들을 이해하는 것도 당연히 불가능했고, 디자이너분들이 차근차근 쌓아올린 정보의 토대(이를테면 베이스 디바이스 사이즈라든지, 그리드 시스템이라든지...)들을 제대로 보고 지나갈 생각도 하지 않았었다. 지금이라도 늦지 않았으니 고쳐봐야지. 다시 CSS의 지옥문이 열릴 것 같다.
이외에도 웹 퍼블리셔가 아닌 프론트엔드 개발자라면 CSS와 기능 구현 외에도 최적화, 보안 같은 것들을 두루 신경 쓸 줄 알아야 한다는 것을 또 한번 배우고 깨달았다. 그런 면에서 크롬 개발자 도구를 적극적으로 활용하라는 조언도 들었다. 꼭 공부해야겠다.
오늘은 리뷰를 작성하는 페이지에서 별점을 입력하는 방식을 어떻게 구현할지 끙끙 앓느라 하루를 다 보냈다. 어제였나, 숫자를 입력하면 입력한 숫자에 따라서 하얀 별과 회색 별이 총 5개 이내에서 적절히 비율을 나누어 나타나는 컴포넌트를 직접 만들었었다. 이걸 만들고 나니 거꾸로 5개의 별 중 하나를 클릭하면 그것이 점수로 바뀌어 입력되는 것도 쉽겠다 싶어서 무작정 도전했다. 그런데 의외로, 그 별모양 아이콘 자체도 material UI에서 가져온 것이다 보니 적용하는 게 까다로웠다. 결국 별점을 입력할 때 쓰는 react-star-rating-component 라이브러리를 찾았다. 깃허브에서는 전부 클래스형 컴포넌트로 설명하고 있어서 함수형으로 바꾸는 데도 애를 좀 먹었다. 코드를 약간 바꿔서 거의 비슷하게 구현했다고 생각해도 막상 돌려보면 별점이 0이나 undefined로 찍히기 일쑤였다. 결국 star-rating-component에 onChange를 먹여서 돌려보니 제대로 나오더라. 역시 쉬운 길 두고 멀리 돌아가면 못써.
별점 구현을 완성한 후에는 리뷰를 서버에 저장하는 API 테스트를 시도했다. 서버에 보내는 것까지는 어려운 일이 아니어서 시간이 많이 걸리지는 않았다. 다소 후련한 마음으로 서버의 응답 데이터를 콘솔에 찍어보는 순간, 이 API가 완성본이 아니라는 것을 깨닫고 다시 손을 놓았다. 너무 자주 만나는 { isCreated: true } .... 우리 그만 좀 보자.
내일 할 일
문제를 인식했을 때 바로 해결해야 한다. 내일 쉬는 날이지만 조금만 쉬고 피그마대로 CSS를 고친다. 디자이너님들의 숭고한 노력을 결코 무시 말자ㅠㅠ
말 그대로 간신히, 팀장님 주간 면담 참석 전에 2차 배포에 성공했다. 기능도 제대로 붙어 있는 게 별로 없는 프로덕트였지만 그래도 좋은 게 좋은 거라고 생각하자..
그래도 오늘은 어제보다 건강해진 서버가 잘 버텨주어서 큰 문제 없이 API 테스팅이 가능했다. 하지만 API 리스트 홍수 속에서 길을 잃은 나는 뭐부터 테스트해야 할지 모를 지경에 이르고야 말았다. 천천히 하나씩 테스트를 하고 있다. (아직도..)
텍스트 정렬이나 배경색이 적용되는 높이 같은 소소한 CSS를 수정하고, 사이트 로고 클릭 시 메인으로 이동하게 하고, 내가 맡은 게시판 안에서 탭 간 이동에 대한 라우팅을 처리하고, 이 게시판의 정보들을 처리할 수 있는 리덕스 모듈을 새로 짜고, API 테스트를 하면서 하나씩 적용하고, 필요한 곳에 페이지네이션을 넣고, 다른 사람이 보기에 다소 난해할 수 있는 코드에 주석을 달았다.
거짓말처럼 뭘 좀 본격적으로 해보려고 하면 서버가 터져버리고 말았다ㅠㅠ어제는 정말로 하루종일 한 게 거의 없었다. 서버가 없어도 할 수 있는 뷰 수정 정도? 그나마 디자이너분들이 세세한 부분까지 신경쓰고 계셔서 실시간으로 변화하는 디자인에 맞춰서 해야 하는 일들이 꽤 있었다.
Day60 한 일
벌써 60일차라니 말도 안 된다. 이제 1개월 남짓 남았다는 얘긴데... 프로젝트 진행 속도가 더뎌지니 그만큼 걱정이 쌓여간다. 잠을 줄여가며 바쁘게 자료를 찾아보고 에러 띄워서 해결해도 모자란데. 며칠간 서버가 연약했던 차에 작업이 거의 올스톱 상태였어서, 오늘은 서버가 비교적 잘 돌아가는 데 비해 머리가 돌아가지 않아 또 속도가 안 났다ㅠㅠ...
어제 오늘 API 리스트의 길이가 급격히 길어지고 있어 질문글과 이미지에 대한 리덕스 모듈을 짰다. 이미지는 게시글을 작성할 때 파일을 첨부할 수 있는데, 파일을 선택하자마자 미리보기를 띄워주는 것까지는 큰 문제가 없었는데 막상 서버에 업로드하는 부분에서 막혀서 시간이 좀 걸렸다. 한창 작업할 때는 몰랐는데, 잠깐 놓고 돌아섰을 때 생각해 보니 서버에 업로드를 정상적으로 하더라도 API가 준비되어 있지 않아 정작 게시글을 불러올 때 업로드한 이미지를 함께 가져올 수 없는 상황이었다. 그러다 보니 또 완결하지 못한 채로 다음으로 넘어가 버렸다.
내가 맡은 게시판의 페이지네이션을 해보았다. 예전에는 지금보다 더 간단한 형태의 페이지네이션을 했었는데, 그때 적어뒀던 스켈레톤 코드를 응용해서 좀 더 복잡시럽게 만들어 보았다. 세련되지 못한, 너무나 원시적인 코드라 또 어떤 문제가 있을지는 두고 봐야 알 것 같다. 그래도 기능을 혼자 구현해봤다는 것 자체가 의미 있는 걸까.
그리고 2차 배포를 앞두고 한창 작업을 하고 있는데 또 다시 서버에 문제가 생겨버렸다. 어제까지의 문제만큼 심각한 건 아니라는 것 같은데, 사실 프론트 입장에선 결과적으로 크게 다른 건 없는 듯하다. 어쨌든 또 다시 올스톱 상태가 되어버렸다.
내일 할 일
서버가 잘 돌아가는 것만 얼른 확인한 후, 다른 프론트 팀원분이 하신 로그인 유지 기능이 정상 작동하는지만 보고 2차 배포를 한다. 지난 1차 배포에 비해서 디자인적으로는 많은 게 변했지만 기능은 거의 붙어 있지 않은 상태라 영 마음이 편치 않다.
오전에는 우리 조 팀장님과 디자이너분들과 함께 의견 조율의 시간을 가졌다. 서로가 생각하는 데드라인이 어느 한쪽에는 너무 촉박하고, 또 다른 한쪽에는 너무 널널한 상황이었다. 작업할 거리가 없어 시간만 때우고 있는 프론트의 입장으로서는 꼭 필요한 자리였다. 우리 입장에서는 100%까지는 아니어도 원하는 것들을 충분히 얻어낼 수 있었다고 생각했다.
디자이너분들은, 어떤 사항들은 팀 내에서 결정된 바가 없어서 디자인 작업에 바로 착수하기가 어렵다고 하셨다. 그래서 점심 식사 직후부터 프론트끼리 지금까지 어떤 것들이 결정되지 않았는지 정리했다. 그러고 나서 백엔드에서 API 2차 작업이 끝난 후 우리가 정리한 내용을 가지고 수많은 결정들이 난무하는(ㅋㅋ) 회의를 진행했다. 그리고 다시 이 내용을 정리해서, 와이어프레임에 대한 프론트의 요청사항들과 함께 디자이너분들께 전달했다.
원하는 것을 글로 적는다는 건 생각보다 어려운 작업인 것 같다. 고치고 또 고치기를 여러 번, 그러고 나니 시간이 훌쩍 지났다. 연락을 마치고 나서 드디어 수정된 API를 다같이 테스트해보며 작업합시다, 하고 얼마 지나지 않아 서버에 뭔가 문제가 생긴 듯 보였다. 몇 초 전에만 해도 새로고침을 하면 컴포넌트 렌더링과 동시에 멀쩡히 로드되던 데이터들이 어느 순간 다시 새로고침하자 온데간데 없이 사라져버렸다. 컴포넌트에는 당연히 구멍이 뻥뻥 뚫렸다. 테스트용 데이터가 하나밖에 안 들어 있었던 상황이라, 프론트에서 삭제 버튼을 잘못 눌러서 없어진 게 아닌가 의심을 했었다. 하지만 셋 중 누구도 삭제 버튼에는 아무 기능도 달아놓지 않은 상태였다..!!(호러..?) 묻고 물은 끝에 AWS 인스턴스 자체의 문제인 것 같다는 얘기를 들었고, 아무도 예상치 못한 사태에 또 다시 길을 잃고 말았다..ㅠㅠ
엎친 데 덮친 격으로, 디자이너분들과 우리가 서로의 상황을 전혀 이해하지 못할 수밖에 없었던 이유를 알게 되었다. 디자이너분들은 우리가 이렇게까지 주6일 풀타임으로 모든 시간을 쏟아붓는 작업을 한다는 걸 모른 채로, 우리는 그분들이 현업에 계시며 오로지 포트폴리오만을 바라고 무보수로 참여하신다는 걸 모른 채로 진행했던 것이었다. 우리의 요구사항에 맞추기 위해 퇴근 후에 밤을 새며 작업하셨다는 걸 뒤늦게 듣고 나서 죄송하고 마음이 쓰렸다. 진작 알았다면 이렇게까지 서로 힘들지는 않았으리라. 아무리 이게 실전 프로젝트이고 협업하는 과정 자체가 중요하다고 하더라도 중간자 역할을 하는 항해 측에서 충분히 사전 고지를 해야 하지 않았나 싶다.
내일 할 일
서버가 복구된다면, 최대한 빠르게 많은 API를 테스트해보고 백엔드분들께 피드백을 드린다.
항상 남은 일이 많아 허덕이던 나에게 오늘 같은 상황은 낯설기 그지없었다. 피그마에서 본 디자이너분들의 와이어프레임도 금요일 이후 전혀 변화가 없었고, 그새 우리는 지금까지 나온 부분에 대한 뷰 작업을 모두 완료했다. 뷰에 관해서 할 수 있는 일은 이제 와이어프레임에서 실수로 누락된 버튼 같은 작은 요소들을 일단 적당히 임시로 끼워넣거나, 사소하게 어긋나거나 신경쓰이는 곳들을 수정하는 것뿐이었다(통일성을 갖추는 것은 나중으로 잠시 미루기로..). 리덕스는 지난번 변경 전의 와이어프레임에 붙여보느라 모듈을 미리 짜놨기 때문에, 게시판 종류별로 CRUD API가 있었다면 각 게시판 뷰에 맞게 API 콜을 해봤을 텐데 그것도 상황이 여의치 않았다. 본의 아니게 한가로웠다.
현재의 와이어프레임에 맞춰 내가 맡은 두 게시판의 뷰를 마저 조정하고, 누락된 글쓰기/수정/삭제 버튼을 적당히 붙여놓고, 클릭하면 메뉴 리스트가 나오는 형태를 포함하여 헤더를 분기시켰다.
주말이라는 걸 몸은 알고 있는 걸까? 금요일인 어제까지만 해도 이 정도는 아니었는데 오늘따라 왜 이렇게 힘이 쭉쭉 빠지고 아무것도 하기 싫은지 모르겠다. 프론트 팀원분들의 배려로 낮잠도 엄청 잤다. 슬슬 전격적으로 밤낮이 바뀌고 있는 것 같다.
오늘 뭘 했는지는 이제 깃허브 저장소 커밋 내역을 보면서 쓰는 게 빠르다. 오늘도 하루종일(이라고 말할 수 있나.. 거의 안 하고 쉬었는데) 뷰 작업만 했다. 와이어프레임이 바뀐 이후로 프론트 한 분의 컴퓨터에서만 유독 뷰가 다르게 보인다고 하셔서 그걸 해결한답시고 템플릿 파일을 하나 만들었다. 정말 신기한 건, 템플릿 코드를 붙여넣고 진행하니 뷰가 멀쩡해졌다고 하셨다. 진짜 원인 무엇이지..
프론트의 희망사항이 반영되어 수정된 와이어프레임이 오늘 윤곽이 드러나기 시작했다. 확인하자마자 바로 뷰 작업을 시작했다. css에 딱히 신경쓰지는 않았지만 그래도 1차 배포를 할 수 있을 정도로 완결성이 어느 정도 갖춰져 있던 뷰를 갈아엎으려니 마음이 아팠다ㅠㅠ.. 하지만 새로운 와이어프레임이 예쁘니 이 정도는 그냥 넘어가자.
원래는 와이어프레임 수정본이 나오면 통일성을 챙기기 위해서 컴포넌트 구조를 제대로 분석해서 만들어보자고 프론트 팀원들과 다짐했었는데, '사이드바 하나만 내가 미리 만들어놔야지' 하고 시작한 뷰 작업은 메인 페이지를 다 만들고 나서야 끝이 났다. 만들어놓은 메인 페이지에서 사이드바 따로, 헤더 따로, 바디 부분 따로 컴포넌트 독립을 시키고 나니 고정적인 틀이 갖춰져서 굳이 컴포넌트 분석을 같이 할 필요가 없어졌다...!? 어쨌든 시간을 절약했으니 좋은 일인가.
내일 할 일
디자이너분들이 짜 주신 와이어프레임에 모양이든 비율이든 최대한 맞춰서 작업하려다 보니 시간이 훅훅 간다. 내일도 뷰만 잡다 하루 다 갈 것 같다..
리덕스 유저 모듈과 댓글 모듈은 프론트 팀원분들께 하나씩 나눠 드렸다. 그 틈에 시간이 좀 생긴 나는 어제 리덕스 게시글 모듈 짠 것을 더 들여다보고 다듬을 수 있었다. 아직 완벽하게 잘 짜지는 못하는 리듀서 쪽을 이런저런 코드를 넣어가며 실험(?)도 해보고, 여러 모로 수확이 있는 시간을 보냈다.
오후 2시 반쯤 백엔드에서 API 서버를 열어주셨다. 리덕스 모듈에 API를 넣어서 axios를 적용해보고 게시판에 연결해 보았다. 중간에 오류를 발견하면 노션에 적힌 해당 API 담당자분께 말씀을 드렸는데, 알고 보니 서버를 연 분은 한 분이라 결국 그 분이 다 확인을 하셔야 하는 거였다. 백엔드 작업 절차가 어떻게 되는지 전혀 모르는 나로서는 죄송하고 민망했다.
프론트 셋이서 모듈 완성하는 대로 API를 나눠 붙이고 확인하고 오류를 잡고 반복에 반복을 거듭한 끝에 기본적인 기능 8개를 구현할 수 있었다.
내일이 디자이너님들이 와이어프레임 수정본을 주시기로 한 날이라서 생각난 김에 피그마에 들어가봤더니, 어느 정도 윤곽이 보이는 와이어프레임(매우 마음에 듦!)과 바쁘게 움직이는 디자이너님들의 커서가 보였다. 자정이 넘은 늦은 시간이었는데도 수고를 아끼지 않으시는 것 같아 감사한 마음이 들었다.
내일 매주 한 번씩 있는 팀별 중간 점검을 앞두고 1차 배포를 완료했다. 비록 도메인도 버킷도 예전에 미니 프로젝트에서 쓰던 걸 그대로 갖다 쓰긴 했지만, 그 덕에 배포에 걸리는 시간을 많이 단축했다. 배포하고 나니 마음이 한결 여유로워졌다. 오늘은 조금 편안하게 잘 수 있을 것 같다.
리액트 공식문서 중 '폼'을 읽었다. 솔직히 무슨 말인지 잘 모르겠다. ㅋㅋㅋ
내일 할 일
변경된 와이어프레임 기준으로 뷰를 다시 잡는다. 이번에는 컴포넌트 단위로 잘 나눠서 통일성을 향상시켜야겠다.