Spirit of Keynote 연재 1화 : 키노트는 대표적인 아웃라인 포맷인 SVG 파일을 읽어들일 수 없지만 파워포인트는 가능하다. 그런데 키노트는 파워포인트 파일을 읽을 수 있으므로 파워포인트를 경유해 키노트 도형으로 변환할 수 있다. 이 방법으로 아이패드와 애플펜슬을 이용해 지도를 그린다음 이를 멋지게 키노트에서 이용하는 방법을 설명한다.
딜레마에 빠진 지도
지도는 문서를 만들때 자주 등장한다. 전국적인 조직망을 한 눈에 보여주려 할 때, 서울시에 1인가구가 어느 지역에 가장 밀집해 있는지 표현하고 싶을 때, 선거 개표방송에서 지방별 판세를 보여줄 때 지도가 나온다. 나의 문서에서도 지도는 언제나 단골손님이었다.
나의 바램은 전국지도에서 5대 광역시만 오렌지 색으로 나타내고 나머지 시도는 윤곽선만 얇은 검정색으로 바탕색에 묻혀있는거였다. 그렇게 생긴 지도를 구해 마우스로 광역시만 클릭해 오렌지색을 칠하면 간단할 것 같았는데 그 조건을 만족하는 지도를 유료 사이트에서도 찾을 수 없었다.
예를들어 내가 자주 이용하는 셔터스톡(Shutterstock)에서 북아프리카 지도를 찾으면 정말 많은 결과가 나온다. 이 파일은 EPS 형식이라 키노트에서 불러올 수 있지만 편집할 수는 없다. 리비아의 색상만 남색으로 칠하기 원한다면 일러스트레이터나 비슷한 도구를 열어 거기서만 바꿀 수 있었다.
키노트내에도 도형 라이브러리에 지도가 있다. 키노트의 도형지도는 전체 색상과 테두리의 스타일을 바꿀 수는 있지만 플로리다주만 떼어내 다른 색상으로 칠할 수는 없다. EPS와 SVG와 같은 아웃라인 포맷이 아닌 JPG나 PNG와 같은 비트맵 포맷은 더욱 어렵다. 그때부터 난 키노트 도형 형식으로 만든 지도가 있지 않을까 찾아왔고(미국의 경우는 일부 있는걸 확인했다) 그것이 힘들어지자 내가 자유롭게 그린 그림을 도형으로 변환할 수 있는 방법을 탐색해 왔고 현시점에서 가장 간단한 방법을 나름 찾아냈다.
지도의 요건과 접근방법
우리가 만들게 될 지도는 두 가지 요건을 갖추면 된다. 첫 번째 요건은 지도내 행정구역이 독립적으로 분리되는 도형일 것. 두 번째는 (당연한 얘기겠지만) 각 도형의 크기, 색, 테두리 스타일을 자유롭게 조절할 수 있을 것이다.
이 작업엔 맥과 아이패드, 애플펜슬이 필요하다. (이 세 가지를 갖추지 못한 분들께는 죄송하다) 소프트웨어로는 키노트외에 파워포인트가 맥에서 필요하며 아이패드에서는 간단한 드로잉 앱인 잉크패드(InkPad)가 필요하다. 잉크패드외의 드로잉 앱, 가령 어도비 일러스트레이터(Adobe Illustrator)나 어피니티 디자이너(Affinity Designer) 등도 물론 가능하다.(이 두 앱은 잉크패드의 기능을 한참이나 상회한다)
우린 아이패드에서 손으로 지도를 그려 SVG로 저장한 다음 그걸 파워포인트로 읽어들여 도형으로 변환할 것이다. 그리고 그 파워포인트 파일을 키노트로 불러들여 최종적으로 도형을 정리해 완성할 계획이다. 파워포인트는 SVG 포맷을 읽어들일 수 있지만 키노트는 불가능하다. 하지만 파워포인트 파일은 불러올 수 있기 때문에 파워포인트는 중간 경유지 역할을 하게 될 것이다. 전국 지도중 가장 간단한 제주도 지도를 그려보자.
1단계 작업 : 아이패드에서 지도 그리기
- ‘제주도 행정지도’로 검색해 행정 경계선이 분명하고 단순한 그림을 찾아 저장한다
- 잉크패드에서 새로운 도큐먼트를 생성한다. 크기는 custom 4000×4000 픽셀 정도로 충분히 크게 한다.
- (잉크패드) 저장한 제주도 지도그림을 도큐먼트내로 불러들이고 크기를 캔버스에 꽉차도록 키운다
- (잉크패드) 지도그림이 있는 레이어1의 투명도를 50%정도로 낮춰 따라그릴때 선이 잘 보이도록 하고, 자물쇠 아이콘을 눌러 그림이 움직이지 않게 고정한다
- (잉크패드) 레이어를 하나 더 만든다(레이어2) 우리는 레이어2에서 트레이싱 페이퍼를 대고 그리듯 레이어1의 원본 그림의 윤곽선을 따라 그릴 예정이다
- (잉크패드)붓아이콘을 선택해 경계선을 따라 그린다. 이때 완전히 닫힌 도형이 되도록 그린다. 여기서 주의할 것은 경계선이다. (아래그림) 한경면을 그리고 나서 한림읍을 그릴때 한경면과 맞닿은 경계선 을 중복해서 그리지 않고 그림과 같이 한경면 안쪽으로 적당히 침범한다. 이 선은 나중에 키노트에서 도형연산(도형빼기 기능)을 통해 깨끗하게 정리될 것이다. 그리고 이 부분이 우리 지도의 가장 큰 특징이고 장점이다.
7. (잉크패드)6과 같은 방법으로 다 그리고 나면 대략 아래와 같은 그림이 된다.
8. (잉크패드) 맨오른쪽 상단 내보내기 아이콘을 눌러 Export를 선택하고 포맷을 SVG로 설정한다. 내보내기는 AirDrop을 통해 막바로 맥으로 보낸다. 아이패드에서의 작업은 이것으로 끝났다
2단계 작업 : 파워포인트에서 SVG 읽어들이기
- 맥에서 파워포인트를 열고 새로운 파일을 만든다. 그리고 아이패드에서 보낸 SVG 파일을 다운로드 폴더에서 찾아 드래그앤드롭으로 슬라이드내로 가져온다
- 가져온 오브젝트를 클릭하고 마우스 오른쪽 버튼을 통해 메뉴의 ‘세이프로 변환’을 누른다. 이로써 SVG파일이 도형으로 변환되었다. (같은 기능이 키노트에서도 구현되길 바래본다)
- 방금작업한 파일을 저장한다
3단계 작업 : 키노트에서 도형 정리하기
- 저장한 파워포인트 파일을 불러온다
- 지도를 클릭하고 오른쪽 마우스 버튼을 눌러 그룹을 해제한다.
- 이제부터 도형을 정리할 시간이다. 시작하기전 도형연산에 대해 간단히 설명한다. 아래 그림과 같이 동그라미를 위에 네모를 뒤에 둔다. 두 도형을 모두 선택한 다음 포맷메뉴에서 도형 및 선>도형 빼기를 선택하면 아래 오른쪽과 같이 뒤에 있던 네모에서 앞의 동그라미를 뺀 결과가 나온다. 이 기능을 이용해 경계선을 정리할 예정이다. 주의할 것은 이때 동그라미는 사라진다는 것이다
- 한경면과 한림읍을 정리할 때 한경면을 하나 더 복사해 같은 지점에 겹쳐두고 한림읍을 같이 선택해 빼준다. 그럼 한림읍의 경계선이 깨끗하게 정리된다. 같은 방식으로 상단 맨오른쪽의 구좌읍까지 정리한다
- 표선면은 성산, 구좌, 조천과 겹쳐있어 복잡할 것 같지만 방법은 동일하다. 처음엔 성산읍을 빼주고 그 다음은 구좌읍, 마지막으로 조천읍을 표선면에서 연속적으로 빼주면 경계선이 모두 정리된다
- 아래 그림이 그렇게 정리된 모습이다. 여기서 섬을 제외한 행정구역 전체를 선택해 복사-붙여넣기를 한다. 이 모두를 통합해 제주도 전체의 경계선을 만들기 위함이다. 그림처럼 도형 합치기를 선택하면 된다
- 아래 그림은 도형이 모두 합쳐진 모습이다. 중간중간 찌꺼기 같은 선이 남아 있는데 이는 오른쪽 마우스를 클릭해 ‘편집할 수 있게 만들기’를 선택한 후 지워주면 된다
위의 일련의 과정과 내용은 아래의 파워포인트블루스 유튜브 채널을 통해 동영상으로 보는 것을 추천한다. 중간중간 만나게 될 장애물까지 작업의 전과정을 여과없이 담아내었으므로 동영상을 놓고 직접 따라서 해보는 것이 좋다.
키노트 지도프로젝트
이것으로 완성되었다. 선의 두께와 색상을 자유롭게 조절할 수 있으므로 아래와 같이 단색조의 딱딱한 문서에도 얼마든지 어울리게 꾸밀 수 있다. 위의 전체 작업을 진행하는데 30분정도가 소요되었다. 이 정도의 시간과 노력을 투자해서 얻어진 결과물로 나쁘지 않으며 이는 앞으로도 두고두고 쓸 수 있는 자산이기 때문에 따로 보관해두기 바란다.
오늘은 지도를 그리는데 신경을 집중했지만 SVG를 키노트 도형으로 만드는 기법은 다른곳에도 충분히 응용할 수 있다. 오늘 제주도 지도를 시작으로 시간이 날때마다 전국의 지도를 세세하게 같은 방법으로 그려 블로그를 통해 키노트 파일로 공개할 생각이며 이를 키노트 지도프로젝트로 명명했다. 오늘 그린 제주도 파일은 다음 링크를 통해 다운로드 받을 수 있다. (제주도 다운로드 받기)
Spirit of Keynote 시리즈에 대하여
이 시리즈는 유튜브와 인프런에서 동영상으로 연재할 계획이며 무료이다. 동영상뿐만 아니라 블로그에서도 동영상과 진도를 맞추어 해설을 곁들여 에피소드마다 실습파일과 함께 연재하려 한다. 인프런에 공개한 세 편의 유료 동영상 강의가 모두 기획에 초점을 맞춘 강의였다면 Spirit of Keynote는 키노트 스킬업에만 전적으로 초점을 맞춘 테크니컬 강의이다.
강의는 크게 네 개의 소주제를 가진다. ①슬라이드 작성, ②애니메이션, ③프레젠테이션, ④설정 과 외부연계이다. 순차적으로 강의하기 보다는 소주제 사이를 부지런히 오가며 주제를 선정하려 한다. 아래 그림에 나타난 것 처럼 강의분량은 ①슬라이드 작성편이 압도적으로 많을 것 같다. 오늘 주제인 ‘SVG를 도형으로 변환하기’는 ④설정과 외부연계에 해당하고 난이도는 고급으로 높은 편이다. 앞으로도 에피소드 마다 난이도를 제시할 생각이다.
이 강의를 출퇴근 시간의 버스나 전철에서 보는 것도 좋겠지만 가급적이면 각 에피소드를 따라 해본다는 마음가짐으로 충분한 시간여유를 두고 맥앞에 앉아 동영상을 때때로 세워가며 실습해보는 것이 가장 좋다고 생각한다. 모든 에피소드마다 교안대신 키노트 실습파일이 제공될 것이고 동영상과 블로그가 교안을 대신할 것이다.
끝으로 인프런에 개설된 기획과 문서작성 온라인 강의도 많은 이용을 바란다.
- 인프런 ‘내러티브 있는 문서와 프레젠테이션’ (강의링크:https://inf.run/vEr8 )
- 인프런 ‘스타트업 사업계획서를 위한 337프레임웍’ (강의링크:https://inf.run/zj4n )
- 인프런 ‘승리하는 제안서’ (강의링크:https://inf.run/WePM )
Pingback: 키노트 지도프로젝트 V1.0 – Sonar & Radar