개발자가 문학 동아리 문집의 표지를 디자인

사실 이것도 좀 지난 이야기다. 9월에 끝난 작업이니까 말이다. 참지 못하는 분들을 위해 결과물 먼저 보여드리겠다. 이 링크를 참고하시면 된다.

물론 나 없었던 오랜 시간 회지가 예쁘게 뽑혀 나왔지만, 내가 있는 동안에는 못생긴(=내 맘에 안 드는) 표지가 나올 수 없다는 일념으로 표지 디자인을 도맡았다. 저번 회지도 맡았으니 두 번째 작업이었다.

저번에는 뭐더라, 학교 라이선스로 포토샵인가를 써서 했었다. 그런데 원체 뭐 생긴 걸 만드는 데에 HTML과 CSS가 익숙하기도 하고, 공통 변수 같은 기능이 없다보니 뭐 하나 바꾸려면 일일히 우다다다 바꿔야 하는 게 그렇게 불편할 수가 없었다. 기능이 없는 게 아니라 내가 모르는 거래도 할 수 없다. 내가 밥 벌어 먹는 건 코드로 벌어 먹는 거지 포토샵이 아니기 때문이다.

그래서 HTML, CSS, JS로 표지를 만들기로 했다. HTML은 구조, CSS는 모양, JS는 동작이라는 단순한 틀에 딱 들어맞게 작성했다. 책 표지 만드는데 무슨 동작이냐고 하신다면 별 거 없지만 HTML 템플릿을 컴파일하는 것이었다.

책 표지는 크게 세 부분으로 나눌 수 있다. 앞 표지, 뒤 표지, 그리고 가운데라고 할 수 있는 책등이다. 책을 주문제작하는 사이트에서 페이지를 넣으면 책등 두께를 mm로 알려줬기 때문에 맞추어서 제작할 수 있었다. 실은 중간에 원고가 예상보다 훨씬 방대해지는 바람에 책등이 한참 두꺼워졌는데, 코드로 표지를 만든 탓에 여기에 빠르고 쉽게 대응할 수 있었다. 수치만 조금 바꾸고 끝이지, 예를 들어 포토샵 무지렁이인 내가 포토샵을 썼더라면 일일히 쉬프트 누르고… 오른쪽으로 찔끔찔끔 옮기고… 앗차 손이 미끄러져서 컨트롤 Z 누르고… 이랬을 것이다. 디자인 자체는 좋아하던 앨범을 많이 베꼈다. 그런데 이제 와서 보니까 뒷면은 욕심내다 괴상해진 것 같기도 하고, 좀 아쉽다.

이번 작업을 하면서 가장 재밌었던 건 처음 해보는 HTML + CSS 스택의 인쇄물 작업이었다는 것이다. 매일 스크린에 보이는 웹 개발만 하다가 인쇄물 작업을 해봐서, max-width나 min-width 같은 조건 없는 @media screen 쿼리를 처음 써보았다. 나름대로 기분을 내려고 스크린용 미리보기에는 격자 무늬 배경도 넣고, 실제 결과물에는 나오지 않을 영역(앞, 뒤, 책등) 구분선도 넣었다.

까다로웠던 건 결과물을 뽑아낼 때 A4나 레터지 같이 정해져 있는 크기에 들어맞지 않는다는 것이었다. 이건 레지스트리를 열고 어쩌고 해서 커스텀 사이즈를 추가하는 법을 찾아봐서 해결했다.

만약에 또 비슷한 일을 할 기회가 생긴다면? 100% 이 방법을 쓰겠다. 익숙한 도구를 쓰니까 재미도 있고 훨씬 수월했다. 어서 졸업이나 해야 할 텐데 아직도 동아리 일을 계속할 생각을 하고 있다. 졸업을 하고 싶지만, 졸업을 하기 싫은, 뭐 그런 복잡한 심정이다. 총문연에 영광 있으면 좋겠다. 끝.