CSS 초딩이 반응형 웹 외주 완료한 썰

외주 후기. 외주 구하는 글에 썼던 CSS는 초딩 수준이니 맡기면 후회합니다에도 불구하고 반응형 웹 프론트 외주였다. 검수까지 거의 끝난 막판에 디자인 수정이 우르르 들이닥쳐 막판 3일 정도는 헬이었지만 사람이 너무 바쁘면 빡칠 시간도 없을뿐더러 외주 회사 경영진들에게는 화를 잘 내지 않는 내 성격 탓에 무리 없이 마무리 짓고 잔금까지 잘 받았다.

리액트 16.8에 추가된 hooks로 도배를 했다. 플러터를 하도 많이 써서 그런지 리액트를 하며 빡친 기억은 별로 없었다. 앵귤러 할 때는 프레임워크 이해도에 따라 갖가지 엿을 먹었던 반면, 리액트는 훅 너댓 개만 이해하면 굳이 프레임워크에 대해 알 필요가 없는 느낌이었다. 상태 관리는 언제나 스코프가 좁으면 좁을수록 개이득이라 리덕스는 거의 쓰지 않았고 라디오 그룹 컴포넌트처럼 부모 자식 간 밀접한 교류가 있을 때는 컨텍스트를 쓰고, 대부분은 useState로 문제가 없었다. 프로젝트 초반에 타입스크립트로 하던 걸 flow로 바꿔서 진행했다. 정적 타입 애호가인 나도 ES6에 flow만 써도 매우 만족했고 타입스크립트는 오바스러웠다. 네이티브 앱 개발하는 거랑 별 차이가 느껴지지 않았다. 나는 더 이상 웹 개발에 편견을 갖지 않게 됐다.

프로젝트의 꽃은 역시 CSS와 꾸미기였다. 그동안 개발팀의 입김이 세지 않았는지 어땠는지 디자이너들이 보기 좋은 한 폭의 그림들을 그려줬다. 사람(이미지)이 서 있고 그 사람이 말풍선으로 중얼거리는 씬이 있는데 말풍선의 내용은 동적이고 멀티라인이라 풍선을 따로 그려야 했다. 말풍선 꼬리가 모바일에서는 오른쪽이고 데스크톱에서는 왼쪽인데 꼬리 모양새도 다르다. 처음에는 보더 래디우스 포함 그 안의 내용물만 CSS로 하고 꼬리만 캔버스로 그리려고 했는데 브라우저 줌을 계속 하다 보면 어느 시점엔가 캔버스의 선과 CSS의 선 그리는 로직이 미묘하게 다르길래 결국 말풍선 외곽까지도 캔버스로 바르고 그 내부만 CSS로 그렸다. 아무튼 IE11에서도 잘 나오니까 뭐 괜찮아.

캔버스는 오바고 그렇다고 CSS만으로는 비율 잡기가 어려운 몇몇 부분들은 쿨하게 useLayoutEffect에서 리액트 레퍼런스로 boundingClientRect 잡아다 계산했다. 이 지경까지 오면 포지션 static fixed relative absolute만으로도 다 할 수 있는 것 같다.

React의 핫 리로드도 나름 괜찮았지만 Flutter의 핫 리로드에 비하면 아주 별로였다. 하지만 이건 리액트의 문제가 아니라 웹의 문제겠지. 플러터도 아이폰 안드로이드 맥 앱에서는 날아다녀도 웹 빌드하면 똥망이다.

세금 문제도 해결됐고, 본인의 무지와 게으름으로 인해 20년간 두려워했던 웹 기술에 자신감도 꽤 생겼다. 돈 문제가 없더라도 간간히 외주를 하며 세상 공부하면 리프레시도 되고 참 유익한 것 같다. 피그마 단축키를 외우게 돼서 기쁘다.