책이나 문서 작업을 할 때 으레 마이크로소프트 워드 프로그램을 떠올리게 됩니다. 그런데 모든 책을 반드시 워드로 작성해야 할까요? 저는 그렇게 생각하지 않습니다. 최근 현업 경험을 토대로 2023년 1월에 Do it! 프로덕트 디자인 입문 with 피그마 라는 책을 출간했는데요. 이 글에서는 책의 초고를 100% 피그마로 작업한 과정을 기승전결(4steps) 로 공유하고자 합니다.
클라이언트
이지스퍼블리싱
역할
Author
기간
출간
주요 지표
538페이지 분량의 원고를 피그마로 집필
들어가며
Step 1 - 문제점 발견
IT회사에서 프로덕트&플랫폼 디자이너로 일하면서 좋은 기회가 있으면 업무 외 시간에 디자인 관련 강의를 병행하고 있었습니다. 그러던 중 출판사에서 관련 경력을 기반으로 디자인 입문서 집필을 제안해 주셨습니다.
02.png
03.png
04.png
마이그레이션이란? → 프로젝트 관리 툴을 옮기는 것입니다. 예를 들어 PPT로 만든 발표 자료를 레이어 살려서 포토샵으로 옮기는 것, 원문처럼 납품을 위해 책 원고를 피그마에서 워드로 옮기는 것 등을 마이그레이션이라고 부를 수 있습니다. 효율적인 프로젝트 진행 혹은 신규 기술 도입 등을 위해 진행하는 경우가 많습니다. 프로젝트에 사용하는 개발 언어나 환경이 다양한 개발자들에게 조금 더 익숙한 용어입니다.
05.png
피그마에 작성한 텍스트를 스타일별로 일괄 선택합니다.
[제목1], [이지스주석] 등의 접두어를 추가하고, CSV 형태로 추출했습니다.
07.png
스크린샷처럼 CSV와 친한 구글 스프레드시트로 CSV파일을 옮겨서 원하는 데이터만 선택합니다.
시트에 저장된 글을 워드에 붙여넣습니다.
이후 워드 기능 중 하나인 ‘찾기 및 바꾸기’ 기능을 활용해, 아래와 같은 작업을 스타일별로 실행합니다.
- [제목1]이라는 접두어가 있는 영역에 워드의 원하는 스타일을 입힙니다.
- [제목1] 접두어를 삭제합니다.
책을 쓰기로 결심한 후에는 상세 내용을 고민하며, 노션이라는 툴로 출판사와 함께 이 책을 전반적인 기획 내용을 관리하기로 했습니다. 노션은 구글 독스와 비슷한 클라우드 기반 문서 작성 툴인데요. 인터넷만 된다면 언제 어디서나 프로젝트나 세부 책 기획을 정리할 수 있어서 무척 편리하게 책 내용을 기획할 수 있었습니다.
하지만 노션을 그대로 사용하며 책 원고까지 완성하기는 어려웠습니다. 디자인 실용서적이니만큼 책 중간중간 디자인 실습 코너가 들어가야 했고, 그 외에도 이해를 돕기 위해 다양한 스크린샷과 예시 이미지가 필요했기 때문이었습니다. 텍스트 중심 툴인 노션만으로는 작업하기 어려웠습니다.
또한, 출판사에 원고를 최종 납품하려면 또 다른 툴인 Microsoft Word(이하 워드)를 써야만 했습니다. 출판사는 원고를 효과적으로 출판하기 위해 워드로 최종본을 받아 내부적으로 적절한 리뷰, 편집, 교열, 디자인 등 필요한 작업을 진행하는 체계를 갖고 있었기 때문입니다. 이에 맞게 워드에서도 무작정 글을 작성하는 것이 아니라, 제목이나 본문, 캡션 등 글의 맥락이나 위계에 맞게 활용할 수 있는 출판용 스타일과 관련 가이드 문서가 준비되어 있었습니다.
위 상황을 고려했을 때, 저자인 제 입장에서는 출판사에서 제안한 스타일과 가이드를 지키면서도 방대한 분량의 원고와 이미지를 효율적으로 작업해 전달하고 싶었습니다.
Step 2 - 해결책 탐색
출판 작업은 회사를 다니면서 최대한으로 여유 시간을 끌어내 작업해도 가늠이 안 될 정도로 큰 프로젝트라고 생각했고, 여느 현업 디자인 프로젝트와 마찬가지로 초반에 작업 프로세스를 잘 잡아서 진행할 수록 시간을 크게 아낄 수 있을 것이라고 생각했습니다.
당시 저는 두 가지 선택지를 떠올렸습니다.
출판사 스타일 가이드를 배워 워드에서 직접 집필하고, 필요한 이미지를 따로 제작한다.
피그마에서 이미지 작업과 집필 작업을 함께 진행한다. 단, 이 때 워드 스타일 가이드를 숙지하고 지킨다.
처음에는 무작정 워드 스타일 가이드를 보며 1안을 시도해 보았습니다. 하지만 반나절 동안 시도해보니 금새 비효율적일 것 같다는 생각이 들었습니다. 출판사에서 제공한 워드 스타일 가이드를 숙지해야 했고, 저는 워드 작업에 익숙하지 않았으며, 저는 출판 작업이 끝나면 워드를 사용할 일이 없는 사람이었기 때문입니다.
결정적으로 집필한 문구와 가장 잘 연결되는 예시 이미지를 떠올리고 빠르게 만들어야 하는데, 두 툴을 왔다갔다 하면서 작업하는 것이 너무 비효율적이었습니다. 이런 상태에서 1안을 채택하면 불필요한 시간이 많이 들 것 같았습니다.
바로 2안을 고려했습니다. 피그마는 주로 UI 디자인할 때 사용하는 툴인데요, 자유도가 높아 그 외 분야에서도 폭넓게 활용할 수 있는 툴입니다(Link). 클라우드 기반이라 인터넷만 되면 다양한 환경에서 작업할 수 있고, 디자인 툴이기 때문에 자유롭게 책에 들어갈 이미지 작업을 빠르게 할 수 있었으며, 오토 레이아웃(Auto Layout)이라는 기능을 사용하면 텍스트와 이미지를 한꺼번에 작업하기도 좋았습니다. 또한 저는 현역 디자이너로서 피그마를 일상적으로 사용하고 있기 때문에 추가로 새로운 툴을 배울 필요도 없게 됩니다. 2안으로 작업하면 효율적으로 작업할 수도 있고, 책 내용에 피그마라는 툴에 대한 소개도 함께하고 있으니 1안 대비 장점이 많은 작업 방식으로 보여졌습니다.
하지만 본격적으로 2안을 채택하기 전에 정말 이 방법이 더 효율적일지 최종 검토해 보기로 했습니다. 작업 방식이야 어찌 되었든 원고는 출판사에서 원하는 방식인 워드로 제출해야 했고, 아무리 피그마로 원고 작업을 효율적으로 진행하더라도 워드로 최종 제출하려면 마이그레이션 작업이 필수적이며, 마이그레이션 시간이 과도하게 오래 걸린다면 1안이 나을 수도 있었기 때문입니다.
저는 검토 과정 중 피그마에서 워드로 효과적으로 마이그레이션하는 방법이 없는지 알아보았습니다. 조금 알아보니 피그마 작업물을 워드 형태로 변환해 주는 플러그인이 있다는 것을 확인했는데요(Link). 가볍게 테스트해 보니 잘 옮겨지는 것 같아, 피그마에서 모든 작업을 진행하고 마이그레이션하기로 최종 결정했습니다.
Step 3 - 허들 넘기, 실전에서 느낀 피그마 원고 집필의 장점
실제 집필 작업을 진행하며 여러 허들과 장점을 발견했는데요, 크게 아래처럼 정리할 수 있을 것 같습니다.
허들1: 피그마 to 워드 플러그인이 제대로 동작하지 않았습니다.
피그마와 워드 모두 ‘스타일’ 이라는 기능이 있는데요. 원고에 들어갈 위계를 지키기 위해, 출판사 스타일 가이드와 동일한 위계의 스타일을 피그마에도 만들고 적용했습니다. 그런데 막상 집필을 마치고 스타일을 옮기려고 하니, 리서치한 플러그인이 생각처럼 잘 작동하지 않았습니다. 최초 기획 당시 생각했던 것보다 마이그레이션에 필요한 시간이 길어져 좌절스러웠지만, 538페이지에 달하는 원고의 문장별로 일일이 스타일을 입히는 일만큼은 정말 하고 싶지 않았습니다. 최소한의 작업으로 빨리 옮기고 놀고 싶었던 저는, 피그마 속 내용을 효율적으로 옮기기 위해 다른 방법이 없을지 살펴보았습니다.
좀 더 방법을 찾아보니, 같은 플러그인에서 피그마의 텍스트를 CSV로 옮겨주는 기능을 제공하고 있었습니다. CSV는 컬러나 폰트 사이즈 등 스타일 관련 기능을 제외하고 ‘텍스트’만 저장하기 때문에, 이를 실제로 활용하려면 약간 번거로운 작업을 몇 단계 추가해야 했습니다.
이 프로세스를 발견해 적용하는 것으로, 텍스트 마이그레이션은 꽤 수월하게 끝낼 수 있었습니다. 하지만 이 방법으로는 알맞은 위치에 이미지를 붙여넣을 수 없었는데요. 결국 이 부분에서는 효율화를 포기했습니다. 473장의 이미지를 한데 모아 추출하고, 워드로 들어가 글과 관련있는 부분에 하나하나 붙여넣어 해결했습니다. 너무 큰 시간 낭비 없이 끝낼 수 있어서 다행이라고 생각했지만, 나중에는 더 나은 해결책이 생기길 바래봅니다.
허들2: 집필 기간이 길어지며 내용을 재작업해야 했습니다.
출판사 최초 제안 시점은 2021년 4월이었는데요, 출간되기까지 거의 2년이라는 시간이 흘렀습니다. 집필 시간이 길어지며 초반에 작업한 책 이미지나 설명글이 최신 버전의 피그마 기능이나 화면과 달라지는 상황을 마주하게 되었습니다. 그 2년 동안 피그마는 여러 대규모 업데이트를 진행했는데요. 피그마를 사용하는 유저로서는 반가운 업데이트가 많았지만, 피그마 글을 쓰고 있는 저자 입장에서는 473장의 이미지를 다시 검토하고 필요한 부분을 파악 후 재작업해야 하는 상황이 되었습니다. 별 수 없이 출간 마지막까지 전수 검토를 진행하며 업데이트했는데요, 다행히 허들1을 진행하며 모아둔 최종 이미지 파일이 모두 피그마에 모여있었기 때문에, 한 눈에 파악하여 오류를 최소화할 수 있었습니다.
허들3: 교정 작업은 워드가 아닌 PDF로 하게 되었습니다.
첫 원고를 전달하고 난 후부터는 출판사와 저자가 함께 교정 작업을 진행하게 됩니다. 원문 내용을 전부 그대로 싣는 것이 아니라, 분량이나 편집점 등을 고려해 내용을 빼거나 추가하게 되는데요. 좋은 책을 출간하기 위해 꼭 필요한 과정이지만, 저자 입장에서는 교정본을 받아봤을 때 출판사가 어디를 어떻게 어떤 맥락으로 편집했는지 한눈에 알기 어려웠습니다. 편집된 문장 사이를 잇는 과정에서 저자의 의도와 다르게 들어가거나 틀린 표현이 생기게 되는데, 교정본은 실제 책 디자인이 입혀진 PDF로 확인하게 됩니다. PDF는 대중적인 확장자이고 내용 손실 없이 파일을 전달할 수 있어 좋지만, 기존 버전 대비 어떤 문구가 어떻게 수정되었는지 알기는 어려웠습니다.
이 간극과 오류를 최대한 효율적으로 해결하기 위해, 다시 한 번 피그마로 마이그레이션을 진행했습니다. 4차에 이르는 조판본 교열 과정에서 PDF to Figma 를 활용해 PDF의 모든 내용을 피그마로 옮긴 후, 수정이 필요한 표현이나 내용에 피그마 코멘트로 피드백을 드리며 내용을 함께 확정해 나갔습니다.
실제로 원고를 피그마로 쓰며 느낀 장점
장점1: 이미지와 원고를 통합적으로 작성, 관리할 수 있다는 것은 생각보다 강력했습니다.
원고를 집필할 때 오토 레이아웃 기능을 적극 활용했기 때문에 자연스레 웹에서 보기 편한 형태가 되었고, 원고의 일부를 바로 브런치에 선보일 수 있었습니다. 이를 통해 원고 내용의 반응을 미리 볼 수 있었고, 브런치 작가도 되었습니다. 그 덕분에 이번 글도 빠르게 공유할 수 있게 되었네요.
장점2: 초반에 생각했던 것보다 훨씬 다양한 영역을 효율적으로 작업할 수 있었습니다.
책에 쓰일 예시 이미지와 텍스트뿐 아니라, QR코드와 연동되는 예시 동영상이나 UI 프로토타입, 간이 디자인 시스템, 예제 프로젝트 등 독자의 성장을 위해 준비한 모든 콘텐츠를 하나의 툴에서 작업, 관리했기 때문입니다. 모두 직접 만들었기 때문에 저작권을 걱정할 필요도 없었습니다. 더욱이 피그마는 클라우드 기반으로 최신 파일을 언제나 자동으로 저장해 주고 특정 버전을 따로 기록해둘 수도 있었기 때문에, 작업할 때마다 [최종의 최종.word]파일을 찾거나 별도 파일로 관리할 필요가 없었습니다.
장점3: 집필한 내용을 강의 교보재로 활용할 수 있었습니다.
집필 도중에도 감사한 제안으로 인해 여러 차례 관련 강의를 하게 되었습니다. 그러다 집필한 내용을 수강생 분들께 공유해 교보재로 활용하면 좋겠다는 생각을 하게 되었습니다. 마침 피그마는 링크를 통해 자유롭게 프로젝트를 공유할 수 있었는데요. 비밀번호를 설정해 최소한의 보안 기능을 설정할 수 있으면서도, 교보재용으로 가공하기 위해 시간을 쏟을 일이 거의 없어서 무척 효율적이었습니다. 원고를 교보재로 다듬고 공유하는 과정을 통해 더욱 탄탄하게 디자인 강의를 준비할 수 있었고, 이미 많은 고민과 함께 작성한 내용을 교보재로 활용했기 때문에 강의 만족도도 높일 수 있었으며, 강의 도중 생겨난 인사이트나 개선점을 역으로 책에 반영할 수도 있었습니다.
Step 4 - 마치며
처음 집필 제안을 수락했을 때는 책 출간이 이 정도로 큰 노력이 필요한 일인지 몰랐습니다. 양질의 내용을 전달하면서도 효율적으로 작업하기 위해 프로젝트 내내 고민했지만, 역시 실전은 다르다는 것도 배운 것 같습니다.
책은 독자들을 위해 쓰여지지만 책을 출간하는 과정을 통해 가장 많이 도움받고 성장하는 것은 저자라는 생각이 들었습니다. 집필 과정이 다른 누구보다 스스로의 업무적인 성장에 큰 도움이 되었기 때문입니다. IT 업계는 다른 산업 대비 굉장히 빠르게 변화한다고 생각합니다. 많은 것들을 빠르게 습득하고 적응해야 하는 환경에서 일하다 보니, 상대적으로 어떠한 내용을 정확하게 알고 전달하는 능력을 계발할 기회가 적었던 것 같습니다. 그런데 책을 내려고 글을 쓰다 보니 내가 타이핑하고 있는 단어나 표현 하나하나 신경이 쓰이기 시작했고(내가 맞는 소리를 하는 것인지, 이해하기 쉬운지, 업계에서 통상적으로 사용되는 단어인지, 맞춤법은 맞는지 등), 내 표현을 더욱 공들여 검증해야 했고, 그렇게 검증하는 과정 속에서 어림짐작으로 알고 있던 개념이나 용어를 보다 명확히 이해하고 설명할 수 있게 되었습니다.
막상 출간하니 아쉬운 부분도 많습니다. 누군가 보시기에 틀린 표현이나 동의하기 어려운 내용도 있을 수 있습니다만, 제가 부족한 탓이니 부디 너그럽게 양해해 주시면 감사하겠습니다. 2년간의 집필 과정을 통해, 예전보다 빠르게 생각을 글로 쓸 수 있게 되는 의외의 성장도 가져갈 수 있었습니다. 혹시 책 관련 피드백이나 제보처가 필요하시다면 artpen@naver.com 으로 편히 메일 주세요. 검토 후 2쇄 때 반영할 수 있도록 노력하겠습니다.
가장 기쁜 점은, 집필 과정에서 간직하고 있던 희노애락을 녹인 책을 다양한 서점이나 플랫폼에서 실제로 구매할 수 있게 되었다는 것입니다. IT 업계에서는 실물로 작업물을 만져볼 일이 거의 없기 때문에, 더욱 각별한 일이었습니다. 이 자리를 빌어 이 책의 출간을 응원하고 추천해주시고 출간에 도움을 주신 많은 분들께 다시 한 번 감사 인사를 드립니다.
만약 이 글의 과정이 재밌었고, 프로덕트 디자인(특히 그 중에서도 UI 디자인과 화면 기획 영역)에 관심이 생긴 분들이라면 아래 링크를 참고해 주세요. 많은 관심 부탁드립니다. 감사합니다.
