부트캠프가 끝난 후 바닐라 JS 스터디에 참여한지도 벌써 6개월이나 되었다.
그간 멤버들이 하나둘씩 취업을 하거나 개인 일정으로 바빠지면서 다 같이 한 달에 한 번은 쓰기로 했던 블로그 글도 뜸해지게 되었는데, 오늘 제이지님의 성화에 죄책감이 들어 가볍게 근황이라도 써보기로 했다.
미디엄은 주로 정보성 글을 올리는 곳이라 이렇게 개인적인 이야기를 풀어놓으면(주로 개발 이야기긴 해도) 볼 사람이 있을까 싶다. 그래도 누군가가 아닌 미래의 나 자신을 위해서 쓴다.
1. 개발 (1) : React, Firebase, Git, Vercel
이번 가을에 한 달 정도를 진행했던 개인 프로젝트다. 프로젝트명은 WILD(While I am drinking)인데, 순전히 재미로 기획한 데다 지금 보면 어설픈 점이 많지만 그래도 나름 꽤 성장할 수 있었다.
사실 이전에 진행하던 팀 프로젝트(아래에서 얘기할 커라밸) 일정이 늦춰지면서 얼결에 시작한 감이 있는 작업이다.
처음에는 부트캠프 때처럼 코치가 있는 것도, 팀 프로젝트 때처럼 동료가 있는 것도 아니라 좀 외롭고 막막했던 기억이 난다. (기획 단계에서부터 바닐라 JS 방에서 응원을 많이 해줘서 진짜 혼자는 아니었지만) 그래도 막상 프로젝트를 시작하면서부터는 모든 게 재미있게 느껴졌는데, 디자인만 해도 요즘 유행이라는 3D 리소스를 마구 투입해본다던가, 너무 과감한 색상이라 쉽게 넣지 못하는 진보라색(!)을 마음대로 질러볼 수 있어서 즐거웠다.
개발 역시, 폐를 끼치면 안 된다는 마음에 기능 구현에만 급급하던 태도에서 벗어나 공부가 필요했던 부분들을 하나씩 익히고 적용해볼 수 있어 좋았다.
단순히 보일러 플레이트를 만들어주고 웹팩을 지원하는 툴체인이라고만 생각해서 공부에 소홀했던 CRA 공식문서를 처음부터 끝까지 읽어본 것도 이때가 처음이었고, 그 외에도 폴더 구조 설계에서부터 비동기 및 에러 처리법, CSS 잘 쓰는 법(!!!) 등 이때서야 차근차근 익히고 적용해본 부분이 많다. 특히 그때쯤엔 한창 유튜브로 개발을 배우는 재미에 푹 빠져 있었어서, 나의 사이버 멘토라고 생각하는 사람들이 말해준 방법론을 이것저것 도입해보고 결과물에 뿌듯해하던 기억이 생생하다.
- (갑자기 길게 말해보는) 멘토님 1번 - CSS의 왕 Kevin Powell
구글에 CSS King이라고 검색하면 케빈 파월 영상이 첫 번째로 뜨는 걸 아시는지?
나도 저 CSS로 배틀 뜨는 영상 때문에 케빈을 처음으로 알게 됐는데, ‘대체 뭐 얼마나 잘하길래 배틀까지 하고 킹이라고 불리는 거야?’ 하고 호기심에 채널을 구독했다가 반응형 디자인을 구현하려면 CSS를 어떻게 설계해야 하는지 설명하는 영상을 본 후 ‘아… 정말 킹이구나…’란 생각이 들어서 거의 한 일주일을 이 사람 영상만 봤던 것 같다.
보통은 프론트엔드 개발을 지망해도 CSS는 잘 공부하지 않는다. 다른 분야보다는 쉽다고 여기기 때문인 것 같기도 하고(그렇지만 쉽지 않다…), 회사에 가면 UI 혹은 마크업 개발자가 따로 존재하는 경우가 많아서인 것 같기도 하다. 나만 해도 CSS보다는 JS나 브라우저 렌더링 원리, CS 지식 등을 제대로 공부하는 게 우선이라고 생각했었다.
그렇지만 프로젝트를 진행할 때마다 CSS를 잘 몰라서 간단한 레이아웃을 짜는 데에도 몇 시간을 허비한다든가, 부트스트랩 등 UI 프레임워크에 의존해야 한다든가 하는 경험이 있었던 입장으로서는 CSS를 잘 작성하는 노하우를 알게 되고 그를 프로젝트에 적용해보는 과정이 즐거웠다. 특히 아래 영상은 전체적인 설계 방법을 얘기하기도 해서, ‘역시 분야를 막론하고 일 잘하는 사람들은 큰 그림을 보는군?’ 생각했던 기억도 난다.
쓰다보니까 추천해보고 싶은 멘토가 많이 떠오르는데 아래에서 계속 언급해보도록 하겠다. 여하 간에 와일드 프로젝트는 케빈 덕에 더 즐겁게 작업할 수 있었다. 아래 화면의 반응형 네비게이션도 순수 CSS로 작업한 것.
물론 와일드에서 CSS만 열심히 하지는 않았다. 리액트 아키텍처에도 신경을 많이 썼고 Open Api로 칵테일 정보를 불러오면서 비동기 개념도 더 열심히 공부했는데(다만 칵테일을 검색해서 서버에 요청 보낼 때 debounce도 적용하지 않은 등… 지금 보면 개선할 점은 많다) 어쩌다 보니 케빈 찬양 글이 되어버렸네? 더해서 배포 때 Vercel, Cloudflare, Netlify 세 서비스를 다 이용해 보고 결국 Vercel을 선택하게 되어서 그 이야기도 해보고 싶은데 지면이 부족한 관계로 다음 기회에 더 써보겠다.
2. 개발(2) : TypeScript, React-Native, Firebase, Project-Managing
어쩌다 보니 오랜 동지가 되어버린 커라밸 프로젝트.
8월에 시작했지만 아직 현재진행형이다. 장기간이 되어버린 만큼 우여곡절도 많은데, 여기에서 다 말하기는 어렵지만 원래 백엔드 개발자와 브랜드 디자이너가 있었다가 빠지는 등 이런저런 사연을 거처 지금의 팀으로 진행하게 되었다. 빠졌다고 말하려니 부정적으로 언급하는 것 같지만, 초기에 같이 작업해주셨던 분들은 기획 단계에서 많은 기여를 해주셨기 때문에 감사하다. 론칭 시에도 응원해주시겠다고 한 걸 생각하면 더 열심히 작업해서 꼭 완성해야지 싶고.
장기간 프로젝트가 되어버린 이유는 간단한데, 초기에 디자이너가 2명이나 있었던 만큼 기획이 크고(참고로 이 프로젝트에서 나는 PM을 겸하고 있는데, 기획 당시에는 내가 수문장처럼 ‘안 됩니다 이거 다 하려고 하면 론칭도 못합니다’를 연발하면서 필수적인 것들을 제외하고 웬만한 기능은 다 빼버렸기 때문에 작은 줄 알았다.) 멤버 대부분이 취업을 하게 되면서 프로젝트에 많은 시간을 투입하기가 어려워졌기 때문이다.
그렇지만 오래 작업해온 만큼 추억이 많은 프로젝트다. 타입스크립트나 리액트 네이티브를 처음 배우게 된 것도 커라밸 덕분이고, 같이 프론트엔드 개발을 진행하는 분과도 손발이 잘 맞아서 어려운 기능을 개발할 때도 즐거웠다. 가끔씩 의견 차이가 있긴 해도 항상 내 이야기를 잘 들어주시는 데다, 본인이 원하는 방향을 말하실 때에는 늘 노션 등에 꼼꼼히 자료를 정리해와서 근거를 들어주셨기 때문에 조율이 편했다.
참고로 프론트엔드는 중간에 아토믹 패턴을 도입하는 등 크게 리팩토링을 한 적이 있는데, 이때 하루에 2~3시간씩 페어 프로그래밍을 하면서 서로의 코드를 리뷰하고 더 나은 방향을 고민했던 게 실력 향상의 계기가 됐다. 애초에 워낙 좋은 분이셔서 믿고 프로젝트를 시작하기도 했지만, 진행하면 할수록 커라밸은 팀원 복이 참 좋구나 생각이 든다.
디자인 쪽에서도 재미있는 일화가 많은데… 사실 초기에는 3D 일러스트와 레이아웃을 적용해서 지금의 플랫한 느낌과는 앱의 분위기가 많이 달랐다. 그런데 디자이너인 하마가 어느 날에서부턴가 계속 괴로워하더니 브랜드 디자이너님을 영입해왔고, 후에 “나… 그간 너무 트렌드만 쫓았던 것 같아… 기본으로 돌아가야겠어.” 라는, 뭐랄까 영화 주인공 같은 대사를 한 후에 전체 디자인을 리뉴얼해서 지금의 모습이 됐다.
백엔드도 개발자가 빠지면서 프로젝트 자체가 흔들릴 뻔했지만, 같이 프론트개발을 하는 분과 Firebase로 백단을 구축하기로 결정하면서 오히려 NoSQL 데이터베이스를 공부해볼 수 있게 됐다. 사실 그때나 지금이나 회원가입형 서비스에 Firestore DB 도입은 차악이 아닌가 싶어서 심경이 복잡하긴 해도, DB를 배우는 것 자체는 재미있었다.
예전에 Flask로 백엔드를 만들었을 때는 DB에 대해서 깊게 공부하지 못했는데(그때는 백엔드 환경 설정부터가 버거웠다) 이번에는 일단 Firebase 공식문서가 워낙 잘 되어있는 데다가 유튜브 튜토리얼도 정말 친절해서 배우는 것 자체가 좋았다.
- (이쯤에서 또 길게 말해보는) 멘토님 2번 — 로빈 윌리엄스 아니고 TODD입니다
특히 <Get to know Cloud Firestore>가 정말 좋았는데, Firestore는 물론이고 NoSQL 데이터 전반을 보다 더 잘 이해할 수 있게 해주는 시리즈다. 여기에서 transaction 등의 개념도 배웠는데 어디서도 이렇게 쉽게 가르쳐준 적이 없어서 거의 박수를 치면서 들었던 기억이 난다. 설명 중간 중간에 로빈... 아니 토드가 던지는 유머도 꽤 재미있어서 보안 규칙 설정처럼 지루할 수 있는 부분도 흥미롭게 들었다.
이 프로젝트도 정말 할 얘기가 많지만 안 그래도 일기처럼 쓰고 있는데 이렇게 다 쓰다가는 끝이 안 보이겠다.
여하간, 커라밸은 지금 디자인은 90% 개발은 70% 정도까지는 진행이 완료됐다고 생각한다. 내년 론칭까지 힘내 봐야지. 그때 가서는 처음 토이 프로젝트로 시작했던 앱 만들기가 왜 이렇게 커졌는지(^^;;)에 관해서도 써볼 참이다.
그리고 하반기 결산 글은 생각보다 너무 길어졌으므로! 다다다음주쯤에 이어서 쓰겠다.
이렇게 갑자기 안녕!
— 다음 편에서 계속
