flex & grid 책을 출간하기까지(총괄은 쉽지 않다! 하지만 많이 배웠다.)

 

소스코드:https://github.com/flexandgrid/flexandgrid

URL:https://flexngrid.com/

리디북스 바로가기: https://ridibooks.com/books/2773000058

알아서 잘 딱 깔끔하고 센스있게 정리하는 flex & grid - flex가 grid 어렵드나

---

드디어, 책 출간!

안녕!

드디어 책이 출간되었다. 마지막 퇴고를 제외하고는 처음부터 끝까지 동료들과 힘을 합쳐 직접 만들었다. 항상 책을 쓰고싶다곤 생각했는데 난 그게 에세이나 소설이 될 줄 알았지 '기술 서적'이 될 거라곤 상상하지 못했다. 역시 인생은 어떻게 흘러갈 지 모르는 거야.

 

저자가 세줄이나 되는데 사실 저렇게 많지는 않고, 애초에 오픈소스로 홈페이지를 제작하는 팀과 책 집필팀이 나뉘어져 작업했고 홈페이지 제작팀도 저자에 이름을 올리면서 많아지게 되었다.

 

이 프로젝트는 공공의 이익을 위해 제작되었고, 100% 무료로 다운받고 사용하고 배포할 수 있다. 많은 사람들이 유용하게 사용하는 material이 되었으면! 

---

집필 총괄을 맡다

 

일단 뜻이 같은 사람들끼리 모이긴 모였다. 모였는데...

처음에 가장 많이 한 질문이 이거였던 것 같다.

 

뭐야..? 그냥 하는거야? 이렇게 해도 되는거야? 

 

특히나 grid는 아예 처음부터, 목차부터 짜야하는 상황에서 한번도 책 비스무리한것도 집필해본 적 없는 사람들이 모였으니 우왕좌왕한것은 당연했다. 이렇게 가다가는 기한내에 끝낼수도 없거니와 서로 약속된게 없으니 책의 퀄리티도 들쭉날쭉 될 수 밖에 없다고 생각해 이런저런 아이디어를 제시했고, 이런 생각을 똑같이 하고계셨던 개발자 선배 한분이 자기가 flex를 끌고 갈테니 내가 grid의 총괄을 맡아주는게 어떻겠냐고 제안을 하셨다. 그리고 나의 첫 출판물에 긍정적인 기여를 할 수 있겠다는 생각에 그 제안을 수락하게 되었다.

 

---

Leader로서 기여 

 

사실 총괄이지만 누구도 나에게 지시를 내리지 않기 때문에.. 스스로의 역할을 정의하고 그것에 따라 진행했다.

 

 

1. 목차구성

 

grid는 특히나 한국어로 된 레퍼런스가 부족하다. 해외 레퍼런스까지 많이 뒤져서 중요도에 따라 비중을 나누고 목차를 구성하려고 노력했다. grid row/column과 grid 영역지정부분을 나누고 두 파트를 비중있게 가져갔다. 

완성본은 리디북스에서 확인하세요!

 

2. 예제코드 배포

 

예제에 사용할 기본 코드를 만들어 배포했다. 디자인팀의 도움을 받았고, gab이나 padding, height 등등을 독자가 가장 쉽게 이해할 수 있고 통일성있게 보여질 수 있도록 여러가지를 시도해보고 정했다.

 

3. 컨벤션 

코딩 협업프로젝트에만 컨벤션이 있나? 한 책을 여러명이 나누어서 집필할 때에도 꼭 필요한게 컨벤션이라고 생각했다. 

사실 기술서적은 영어표기때문에 참 애매하고 어려운 부분이 많았다. grid라고 할 것인가, '그리드'라고 할 것인가. 혼용해서 사용한다면 어느상황에서는 어떤걸 쓸건가. 뭐 이런 세세한부분도 신경쓸 게 많았다. 노력은 했는데 처음이라 잘 해낸것 같지는 않다. 그래도 아무런 컨벤션 없이 진행했었을 경우보다 훨씬 나은 결과물이라는건 확실하다.  

 

4. 머리말, 그리드 예시, grid-row&column, IE지원을 위한 그리드 작성 

 

마지막으로 머리말을 작성할 사람을 구하셨는데 아무도 없길래 내가 나섰다. 딱봐도 아무도 하기 싫은게 있다면 나서서 하라는 말이 생각나서 그냥 하겠다고 했다. 또 아무래도 총괄을 맡아 대략적인 내용흐름을 읽고 큰 줄기를 뽑아내는게 다른사람보다 수월하기 때문에 머리말을 작성하는게 그렇게 큰 시간을 잡아먹을거라고 생각하지는 않았다. 나머지(그리드 예시, grid-row&column, IE지원을 위한 그리드 작성)는 집필에 직접적으로 참여한 주제들이다.

 

---

집필과정

 

일단 목차에서 각각의 팀원들이 몇 개 씩 주제를 가져간다.

정해진 컨벤션에 맞추어 자료조사 및 교안을 작성하고 예제코드를 넣은 뒤, 일주일에 한번 씩 정해진 시간에 모여 진행상황 및 내용을 공유하고 노션에 피드백을 받아 추가 및 수정하는 방식으로 진행되었다.

노션 코멘트를 이용하여 피드백을 주고받았다.

---

follow로서 기여

 

오픈소스 홈페이지 cheat-sheet제작

 

https://codepen.io/enxaneta/full/adLPwv

위 코드펜과 같이 눈으로 직접 그 차이점을 비교해볼 수 있는 페이지를 꼭 넣고싶었다.

 

지금 보면 간단히 Dom을 조작해주면 되는 기능이지만 당시(한달 여 전) 만 해도 돔조작을 배우지 않았던 때라 웹페이지를 함께 제작하는 다른 개발자들의 도움을 받아 진행했다. 

---

어려웠던 점, 그리고 배운점

 

• 확실히 영어로 레퍼런스들을 찾는게 양질의 정보를 얻을 확률이 훨씬 높다. https://gridbyexample.com/examples/ 에서 아주 다양한 예제들을 접할 수 있어 좋았다. 좋아하는 CSS 유투버인 Kevin Powell의 grid영상도 정말 많이 돌려봤다. 정보를 찾으면 찾을수록 영어를 사용해서 정보를 찾는걸 습관화해야겠다는 생각이 들었다. 
• 역시 여러사람이 함께하는 만큼 열정이나 참여도에서 차이가 나는건 어쩔 수 없었다. 팀원들을 고무시키고 데드라인 안에 맞추도록 하는건 쉬운일이 아니다. 사실 나도 이래저래 바쁘다보니 그분들을 개인적으로 고무시키려고 하기보다는 그냥 내가 하고 말지 뭐 하고 해버린 부분도 적지 않았다. 정답은 없는 것 같다. 그래도 배운것이라면, 무언가 되게 하고 싶은게 있다면 take initiative(주도권을 잡아라) 하라는 것이다. 남들보다 더 많은 열정과 에너지를 쏟고 희생하는건 애초에 알고 시작하는거다. 내가 성장할 수 있다면 그렇게 하자. 남는게 그만큼 많을 것이다. 

---

 

마무리하며

 

• 고생했다. 완벽하지 않고 부족한 점도 분명 있겠지만, 일단 끝내는 것이다. 한정된 시간을 정해놓고 그 안에서 최선을 다해 결과물을 만들어내는것의 뿌듯함을 느꼈다. 나 이제 작가다(ㅋㅋ)
• 책이 출판된 기념으로 grid관련 유투브 영상을 하나 제작하면 좋을 것 같다. 실무에서 어떻게 사용하는지를 예시로 들어서 반응형으로 예쁜 UI를 만들 수 있도록 해봐야겠다.