피터 멘델선드의 커버
카프카 <심판> 일러스트를 인터랙티브 하게 만들기
01. cover
<cover>는 발간됐을 당시 교보문고 예술 코너에서 신간을 둘러보다 알게 됐다. 그 당시에는 책의 커버만 보고 한 디자이너의 포트폴리오 북이 아닌 좋은 북커버 디자인 모음 사진집이라고 생각했었다. 책장을 휘리릭 넘기다가 카프카의 <성> 커버를 발견했는데, 이미 알고 있는 북커버였음은 물론이고 이 시리즈의 눈의 형태와 색감의 조합을 매우 좋아하고 있기까지 했다! 이 일러스트의 간결한 형태와 집중력 있는 색감은 내가 언제나 매혹되는 순수한 조형성 그 자체이다. 스타일이 폴 랜드와 비슷했고 기존에 인터넷 서치로 접한 책이 빈티지처럼 보여 이미 작고하신 분의 디자인인 줄 알았는데 (...) 요즘 한창 활발히 활동하고 있는 디자이너였다.
관심을 갖고 흥미롭게 책장을 넘기다가 <변신>의 커버와 관련된 카프카의 의견—어찌 보면 절규—을 발견했을 때, 나는 이 디자인을 완전히 사랑하게 되어버렸다.
“(예술가가) 곤충 그 자체를 그리고 싶어 할지도 모른다는 …… 생각이 떠올랐습니다. 제발, 그건 아니었으면, 다른 건 몰라도 그것만은 아니었으면! 곤충 그 자체는 그려질 수 없는 것입니다. 멀리서는 보이지도 않는 것입니다.”
— 카프카가 출판사에게
커버 디자인과 관련해서 이보다 더 웃긴 문장을 찾을 수 있을까? 머릿속으로 그동안 봐왔던 한국의 수많은 <변신> 표지들이 스쳐 지나가며… 도저히 웃음을 멈출 수 없었다.
벌레들...피터 멘델선드는 이미지 그 자체가 아니라 우리가 책을 읽으면서 느낄 감정과 감상들을 이미지화하는데 너무나 탁월한 능력을 갖고 있는 디자이너이다.
카프카의 미스터리는 포착하기가 너무 어렵다. 그는 너무나도 꼼꼼하고, 까다롭고 너무나도 어려워 적확하게 짚어낼 수가 없다. 나는 그 응시하는 시선을 독자에게 돌리는 것이, 독자들도 불안을 초래하는 저 철저함에, 카프카의 많은 인물들을 끈질기게 괴롭히는 그 지독함에 시달리게 하는 것이 좋다. — 수전 버노프스키
아무튼, 이 책은 아름다운 것을 좋아하는 사람은 누구든지 한 번 읽어볼 만하다. 두께는 두껍지만 그림이 많아 두 시간 정도면 다 볼 수 있다. 아래에 책 속에서 마음에 들었던 구절을 꼽아봤다.
⊹ 세상에서 가장 무시무시한 추천사
훌리오 코르타사르를 읽지 않는 사람은 망한 것이다. 그를 읽지 않는 것은 보이지 않는 심각한 중병에 걸린 것이어서 머지않아 끔찍한 결과를 초래할 수 있다. 한 번도 복숭아를 맛보지 못한 사람과 비슷한 무엇이다. 그런 사람은 조용히 점점 슬퍼지고, 눈에 띄게 창백해지고, 그러다 아마도 조금씩 머리숱이 줄 것이다. 나는 이런 일들이 내게 일어나길 바라지 않는다. 그래서 나는 탐욕스럽게 위대한 훌리오 코르타사르의 모든 가공물들, 신화, 모순, 죽음의 게임들을 걸신들린 듯 먹어치운다. — 파블로 네루다, 48p
⊹ 북커버의 속성
재킷은 … 어쩌면 독자의 몸에서 잠자고 있던 화학 성분을 일깨우고 일종의 날카로운 욕망, 오로지 그 책을 실제로 먹어치워야만 만족시킬 수 있을 정도의 욕망을 불러일으켜야 할지도 모른다. 달리 말하면, 작가는 재킷에서 뭔가를 아주 절실하게 원하지만, 재킷은 그것을 결코 줄 수가 없는 것이다. — 벤 마커스. 122p.
⊹ 추하게 만들기
‘추하게 만들기’라는 회사의 석회화된 과정을 최소화하라. 추하게 만들기는 디자이너들이—요구 혹은 지시에 의해—그들의 작품을 한 번에 한 가지씩 더 추하게 만드는 과정이다(폰트 좀 바꿀 수 있을까? 난 빨강이 마음에 안 드는데. 다른 그림을 쓸 수 있겠나? 등등의 지겹도록, 불합리하게 듣는 소리들). 추하게 만들기는 미학적 판단을 할 자격이 안 되는 사람들이 어떤 것이 어떻게 보일 지를 결정할 때 일어나는 현상이다. — 162p.
(그런데 과연 ‘추하게 만들기’ 과정을 디자이너 혼자 최소화할 수 있는 것인가? 이 주제에 대해 제대로 말하자면 a4 용지에 10pt로 3장도 부족하다.)
⊹ 디자인은 쉽다
어떤 경우이든, ‘디자인은 쉽다’(그리고 책 재킷은 사소하며 필수적인 것도 아니다)라는 말은, 독자들이 이미 눈치챘을지도 모르겠지만, 내게는 일종의 주문 같은 것이다. 어느 정도까지는 사실이기도 하고, 또 그렇게 믿는 것이 내게 유용하기 때문이다. 디자인의 단순성을 믿음으로써 나는 과도하게 신경증적이지도 않고 불필요하게 복잡하지도 않은 디자인 작업을 유지할 수 있는 것이다. — 서문 중. 18p
이 책의 서문을 읽고 디자인에 대한 생각을 바꾸게 됐다(물론 온전히 책 때문은 아니고, 그 전의 여러 과정들을 겪었기 때문이기도 하지만). 나는 대학 때부터 이 문제로 굉장히 골머리를 앓았는데, ‘어떻게 더 좋은 내용과 의미를 담을까? 더 좋은 내용과 의미는 뭘까?’를 고민하다가 정작 좋은 디자인을 못한 경우가 많았다. 그 당시에는 정말 열심히 했는데, 내게 필요했던 건 더 쉽게 생각하고 쉽게 표현하기였던 것 같다.
02. 북커버를 인터랙티브하게 만들기
강의 노트 필기두 달 전 Kadenze에서 Daniel Shiffman의 <The Nature of Code> 강의를 봤다. kadenze는 coursera와 같이 고퀄리티의 강의를 무료로 볼 수 있는 곳이다. 주로 창작자를 위한 강의(예: typography, microgame design, digital fabrication, synthesizer sounds...)가 많다. 물론 daniel shiffman의 강의는 그의 유튜브에 가장 많이 올라와 있다. 같은 강의도 유튜브에 업로드되어있지만, kadenze에서 보는 게 가장 최신판이다.
강의는 총 5개의 세션—Introduction / Overview, Vectors / Forces, Steering Behaviors, Fractals, Genetic Algorithm—으로 구성되어있다. 내가 응용한 코드는 3강 ‘steering behavior’이다. 이 강의를 따라가면 타겟(마우스)을 따라오는 물체를 만들 수 있다. 원리는 간단하다. 타겟의 위치(vector)에서 물체의 현재 위치(vector)를 빼면, 물체가 가야 하는 거리가 나온다. 예를 들어 타겟이 (10, 8)에 위치하고 내가 (5, 2)에 위치한다면 x축은 5만큼, y축은 6만큼 이동하면 타겟 지점에 도달한다.
다만 vector의 '길이'는 콤마 값이 아니라 숫자여야 하기 때문에 mag()*로 값을 변환해준다. (5, 6)을 변환하면 7.810249675906654이 나온다.
*mag()는 processing과 p5.js에 있는 명령어로 벡터의 길이 값을 구해준다. processing, p5.js에 dist()와 같은 기능이다.
3강 steering behaviors 결과물03. application
학습 내용을 완성된 형태로 구현해보고자 했을 때 가장 먼저 떠오른 게 맨델선드의 <성> 북커버였다. 다만 반복적인 효과를 강화하기 위해서 2 * 6으로 배치된 눈을 4 *6으로 두 배 늘렸다.
이 프로젝트가 위의 steering behaviors 강의 결과물과 다른 점은 아래와 같다.
1. 눈동자가 따라오더라도 눈의 위치에서 이탈하지 않는다.
2. 타겟과의 거리가 일정 이상 멀어지면 눈동자가 제 위치에 온다.
3. 눈동자는 파란색 홍채와 검은색 동공으로 이뤄져 있고, 이 둘의 기준점은 같지만 크기가 다르므로 움직이는 정도가 조금씩 다르다.
✐ 우선 포토샵으로 일러스트의 눈동자를 지우고 이미지를 캔버스에 가져와서 눈 숫자에 맞는 눈동자를 만들고, 위치를 조정했다.
✐ 그리고 클래스를 만들어 steering behavior의 코드를 달라진 점에 맞게 수정했다. 움직임은 총 3개에 나눠 구현했는데, steering, applyForce, update이다. 그중 가장 핵심인 steering을 플로우 차트로 만들어봤다.
✐ 그다음 update에서 가속도를 속도에, 속도를 위치에 더해주면 타겟에 따라 눈동자들이 움직인다.
✐ 이 프로젝트에서 가장 어려운 점은 눈동자가 타겟을 따라오는 힘의 정도를 조절하는 일이었다. 잘못 조정하면 바로 오른쪽 그림처럼 돼버린다. 수십 번 숫자를 조정하며 위치를 잡아줬다.
04. result
사실 완성한 건 오래전인데, 그동안 정리 글을 써야지 하다가 몇 달 만에 글을 완성했다. 글과 코드는 지겹지만, 맨델선드의 표지는 다시 봐도 너무 아름답다 :)
