Open door 회의가 있었다. 선이해 후기획, 이런 건 둘째치고 일단 다같이 붙어서 와이어프레임부터 그려보자, 하고 시작한 시간이었다. 피그마는 분명히 튜토리얼 공부를 했었는데 한동안 안 쓰다 보니 새까맣게 잊어버렸고, 단축키 같은 건 버려두고 가장 원시적인 방식으로 '막' 그려버렸다. 다른 분들이 기획과 관련해 열띤 토론을 진행하시는 동안 성미 급한 나는 일단 뭐라도 만들어보려는 생각에 이것저것 끄적여봤는데 칭찬을 해주셔서 매우 민망했다... 어쨌든 결과적으로 진전이 있었던 것 같아 마음이 편하다. 뭔가 되어가는 게 눈에 보여야 속이 시원한 한국인.
큰 교훈을 얻었다. 앞으로는 새로운 툴을 발견(사용)하게 되면 무조건 공식문서나 튜토리얼 문서부터 보고 시작해야지. 프로젝트 처음부터 한창 사용 중이던 Figma. 앗, 아니, 사용했다고 말하면 안될 것 같다. 우리는 별 생각 없었다. 그냥 우리의 프로젝트가 남의 눈에 어떻게 보일지가 유난히 오늘따라 조금 더 궁금했을 뿐. 마침 오시영 튜터님이 계셔서 아주 가볍게 여쭤봤다. 그리고 돌아온 건 1톤 트럭이었다. 디자인을 단순히 보여주기만 한다고 생각했던 피그마에는 감히 짐작하지 못했던 너무나 많은 기능들이 있었고, 나는 그걸 사용하기는커녕 그 존재를 상상조차 하지도 못했다. 충격적이었다. 오시영 튜터님은 나를 포함한 프론트 멤버들에게 늦어도 월요일까지는 시간을 들여서 피그마 튜토리얼을 보라고 말씀하셨다. 피그마의 최대 장점인 기능들을 아무것도 이용하지 않고 있었으니 사실상 피그마 자체가 나에겐 무용지물이었다. 튜토리얼을 훑어보면서 샘플로 주어진 와이어프레임에서 이것저것 건드려보았다. 피그마 안에서 실시간으로 다른 사람들의 커서를 볼 수 있는 건 알았지만 채팅까지 가능한 줄은 몰랐다. 이래서 협업 툴 만드는 프로젝트가 어렵다고 한 거구나. 기본적이면서도 핵심적인 기능들을 사용하지 못하다 보니 디자인 요소들을 이해하는 것도 당연히 불가능했고, 디자이너분들이 차근차근 쌓아올린 정보의 토대(이를테면 베이스 디바이스 사이즈라든지, 그리드 시스템이라든지...)들을 제대로 보고 지나갈 생각도 하지 않았었다. 지금이라도 늦지 않았으니 고쳐봐야지. 다시 CSS의 지옥문이 열릴 것 같다.
이외에도 웹 퍼블리셔가 아닌 프론트엔드 개발자라면 CSS와 기능 구현 외에도 최적화, 보안 같은 것들을 두루 신경 쓸 줄 알아야 한다는 것을 또 한번 배우고 깨달았다. 그런 면에서 크롬 개발자 도구를 적극적으로 활용하라는 조언도 들었다. 꼭 공부해야겠다.
오늘은 리뷰를 작성하는 페이지에서 별점을 입력하는 방식을 어떻게 구현할지 끙끙 앓느라 하루를 다 보냈다. 어제였나, 숫자를 입력하면 입력한 숫자에 따라서 하얀 별과 회색 별이 총 5개 이내에서 적절히 비율을 나누어 나타나는 컴포넌트를 직접 만들었었다. 이걸 만들고 나니 거꾸로 5개의 별 중 하나를 클릭하면 그것이 점수로 바뀌어 입력되는 것도 쉽겠다 싶어서 무작정 도전했다. 그런데 의외로, 그 별모양 아이콘 자체도 material UI에서 가져온 것이다 보니 적용하는 게 까다로웠다. 결국 별점을 입력할 때 쓰는 react-star-rating-component 라이브러리를 찾았다. 깃허브에서는 전부 클래스형 컴포넌트로 설명하고 있어서 함수형으로 바꾸는 데도 애를 좀 먹었다. 코드를 약간 바꿔서 거의 비슷하게 구현했다고 생각해도 막상 돌려보면 별점이 0이나 undefined로 찍히기 일쑤였다. 결국 star-rating-component에 onChange를 먹여서 돌려보니 제대로 나오더라. 역시 쉬운 길 두고 멀리 돌아가면 못써.
별점 구현을 완성한 후에는 리뷰를 서버에 저장하는 API 테스트를 시도했다. 서버에 보내는 것까지는 어려운 일이 아니어서 시간이 많이 걸리지는 않았다. 다소 후련한 마음으로 서버의 응답 데이터를 콘솔에 찍어보는 순간, 이 API가 완성본이 아니라는 것을 깨닫고 다시 손을 놓았다. 너무 자주 만나는 { isCreated: true } .... 우리 그만 좀 보자.
내일 할 일
문제를 인식했을 때 바로 해결해야 한다. 내일 쉬는 날이지만 조금만 쉬고 피그마대로 CSS를 고친다. 디자이너님들의 숭고한 노력을 결코 무시 말자ㅠㅠ