멋쟁이사자처럼 프론트엔드 5기에 참여하며 위니브와 멋쟁이사자처럼 측의 도움을 받아 진행되었던 책 집필에 대한 회고 글입니다.
Canvas, SVG에 대한 내용보다는 책 집필에 대한 내용을 중점적으로 작성하였습니다.
리디북스에서 보실 수 있습니다. 클릭 클릭 - I CAN VAS SVG
2023.04 - 집필 팀 모집 시작
멋쟁이사자처럼 프론트엔드 스쿨 5기 교육을 진행하였던 위니브 측에서는 수강생들에게 좋은 이력으로 남을만한 경험을 제공하고자 노력하셨는데 그 중 하나가 바로 프로그래밍 전자책 집필이었다.
3월 달에 공지를 하고 한 달 정도가 지난 4월 상반기 책 집필 팀 모집이 시작되었다.
책의 주제는 프로그래밍과 관련만 있다면 자유였고 인터랙티브와 Three.js 염불을 외우고 다니던 나는 Canvas와 SVG & CSS Animation 에 관련된 책을 집필하면 공부도 되고 꽤 멋진 경험으로 남겠다는 생각으로 책 집필에 참여했다.
디스코드에 Canvas와 SVG, CSS Animation으로 책 집필을 하실 분이 계신지 여쭈었고 다행히 이 주제에 관심이 있는 분들이 많이 계셔서 총 9명이 집필에 참여하게 되었다.
아쉽지만 분량 상의 문제로 CSS Animation은 빼고 Canvas와 SVG에 관해서만 집필을 하게 되었다.
집필 팀에는 회고조 조장이나 스터디 조장을 맡고 계신분들이 많아서 다들 팀장을 하기 부담스러워 하셨고 마침 관련 경험을 좀 욕심내고 싶어서 후다닥 팀장에 지원해 팀장 역할을 하게되었다.
회고조 팀장분들이 잔뜩 있는 곳에서 리더 역할을 하려니 조금 달달 떨려서 내 회고조 팀장님께 리-더 역할을 어떻게 수행하면 될지에 대한 상담도 받았었다. ㅋ ㅋ
역시 걱정대로 팀장 역할을 하고 있던 나는 소극적으로 의견 공유를 하였고 오히려 다른 분들이 회의를 적극적으로 이끌고 가셔서 꽤 걱정을 많이 했었다.
제법 바지사장의 느낌이 났었다.
팀 노션도 다른 분이 여차저차 생성해주시고 책 이름, 표지 디자인 등 다들 적극적으로 의견을 내주셔서 생각보다 빠르게 일이 진척되었다.
집필을 시작하기 전, 노션 캘린더를 이용해 팀원들 모두가 가능한 시간대를 맞추고 집필 팀을 Canvas팀과 SVG팀으로 나누었다.
원래 내 의견은 Canvas와 SVG를 굳이 나눠야할까, 나누면 한쪽만 공부하게 될 것 같다 였는데 역시 다른 사람들의 의견을 잘 들어야한다고.. Canvas만 해도 분량이 너무 많아서 정해둔 기간안에 만족할 만큼의 글을 작성해오지 못해서 참 나누길 잘했다! 고 생각했다
집필 시작
팀을 모집하고 나서 4월 중순부터는 본격적으로 팀별로 관련 공부를 진행하였다.
각자 회고 조 모임도 있고 진행 중인 스터디 모임도 있어서 시간 내기가 힘들어 일주일에 겨우겨우 맞는 시간대를 찾아내 2시간 남짓한 회의를 진행하였다.
처음 초안을 각자 작성해왔을 때에는 누가 봐도 여러 명이 쓴 것 같은 중구난방의 글이었다.
누구는 제목을 h1으로 하고 누구는 h2로 하고,
누구는 이미지 배치를 코드 블럭 밑에 하고 누구는 옆에 하고,
누구는 문장을 끝낼 때 '~습니다'를 사용하고 누구는 '이다'
로 글을 끝내는 등 너무나 통일성이 없는 글이었다.
이 상태로 계속해서 쓰다 보면 수정사항이 너무 많이 생길 것이라 생각해 글의 방향성을 잡고자 작성 규칙과 스타일 규칙을 정하고자 애썼다.
작성 컨벤션을 정하고 작성하다 헷갈리는 게 있으면 회의를 통해 하나씩 정해 나갔다.
제목 태그 방식, 문장 끝마무리, 이미지 배치, 문장 강조 네 가지에서 시작했던 작성 컨벤션은 줄 바꿈 규칙, 예제 삽입 시 규칙, 코드 블럭 작성 시 규칙 등 세밀하게 추가 되어갔다.
다들 초반에는 아리까리 적응을 하지 못하다가 최대한 한 명이 쓴 것 같은 글을 작성하고자 다른 팀원의 파트를 검토하고 수정 해주며 꽤나 일관성 있는 글이 작성되어 갔다.
다 같이 글을 작성할 때 주의해야 할 부분은 겹치지 않도록 파트를 짜는 것이다.
기존에 구성해 두었던 목차가 A B C D 고 각자 하나씩 맡아서 작성을 한다고 했을 때,
누군가 A를 작성하다 A의 세부 개념으로 B가 나와버리는 일이 있어서 B 내용을 두 명이 작성한 것이다.
이렇게 되면 B 내용을 따로 떼어내서 한 챕터로 두는 것이 맞는지, A의 세부 개념으로 넣는 게 맞는지에 대한 회의와 자료를 찾기 위한 시간 소요가 많이 든다.
최대한 작성 파트를 겹치지 않도록 사전에 조사를 해두고 파트 분배를 했지만서도 몇몇 부분은 겹쳐서 중간중간 수정을 했어야 했다.
2023.06 집필 마무리
최종 집필 마무리 단계에서는 예상치 못하게 고생을 했었다.
노션 페이지를 PDF로 추출하면 설정해둔 글 간격이 다 깨져버리고 코드 블럭은 밋밋하게 하이라이팅이 없이 출력되며, 이미지 배치까지 전부 다 와장창 깨져서 나와서 PDF 출력만 앞두고 있던 때에 아주 빨간 불이 들어왔다.
각자 집필 한 부분 캡쳐하기 -> 컴퓨터 환경이 다 달라서 안됨
웹 노션에서 인쇄 버튼으로 출력하기 -> 코드 블럭 적용이 안되서 와장창
등등등.. 여러모로 최대한 노션과 비슷하게 출력하려 노력했지만 전부 다 실패했었다.
다행이 팀원분들 중 나영님이 Figma를 아주 기깔나게 잘하셔서 해당 문제는 해결되었다.
노가다 식으로 말이다...
- 우선 한명이 웹 노션을 들어가서 전체 화면 캡쳐 확장 프로그램으로 모든 페이지를 찍는다.
- 각자 본인 집필 페이지가 잘 찍혔는지 확인한다. 그리고 pdf 파일을 이미지 확장자로 변환한다.
- 피그마에 이미지 파일을 불러온다.
- 2480 x 3300 으로 만든 기본 틀 위에 이미지를 삽입 한다.
- 챕터마다 모든 틀을 만들어 아래로 정렬시킨다.
- 완성된 기본 틀을 책의 사이즈와 같은 최종판형에 삽입한다.
- 기본 틀을 잡고 아래 위로 조정하며 읽기 편하게 잘라낸다.
- 순서대로 정렬한다.
글로 쓰려니 잘 설명이 되지 않지만 저 길쭉한 이미지들을 잘라 조정해서 기본 틀 프레임에 잘 구겨 넣고
책 사이즈와 같은 최종판형에 넣어서 그만큼 잘라내서 160 페이지를 만들어내는 작업이다.
하다보니 각자 글자가 시작하는 위치나 여백이 다 달라서 또 이걸 정하고 수정하는데만 몇 시간을 썼다.
그리고 나서 알 pdf를 사용해서 이어 붙이고 페이지 넘버링을 하고 누락된 페이지가 있으면 다시 수정하고.. 거의 이틀 동안 피그마와 알 pdf와 함께 했었다.
최종 PDF를 완성하고 며칠 뒤, 리디북스의 개발/프로그래밍 카테고리의 무료 전자책 부분에 게시되었다!
끝내며
열정 가득 설렘 가득 앉고 시작해 생각 이상으로 좋은 결과를 내었다.
4월 달만 해도 이걸 정말 제대로 끝낼 수 있을지에 대한 의문이 있었는데 정말 좋은 팀원들과 함께하니 즐겁게 책을 집필할 수 있었다.
9명의 열정과 노력이 담긴 결과물이 웹 그래픽 프로그래밍에 관심을 가지는 많은 분들에게 도움이 되길 바라며 글을 끝낸다 !
'멋쟁이사자처럼 FE 5기' 카테고리의 다른 글
| [WIL-5주차] 반성합니다 . . (0) | 2023.03.31 |
|---|---|
| [WIL-3주차] 멋쟁이사자처럼 3주차를 끝내고 (0) | 2023.03.18 |