각자 시티트리클럽 프로젝트에서 어떤 역할을 하셨는지 소개해 주세요.

영인: 우선 전체적인 캠페인 기획과 디자인 콘셉트 도출, 디자인 시안 작업은 오늘의풍경에서 함께 일하는 신인아 디렉터가 주로 맡았고요. 저는 캠페인 기획 단계에서는 리서치와 아이데이션 위주로, 디자인 단계에서는 인아 님의 디렉팅을 바탕으로 시티트리클럽의 시각적 정체성이 사용자 접점 전반에서 일관되어 보이게끔 전개하는 일 위주로 진행했어요. 특히 기능명세서와 화면설계서(와이어프레임)를 작성하는 것부터 QA까지, 웹사이트 작업에 많이 참여했습니다. 

예진: 저는 영인 님이 써 주신 기능명세서를 보고 그것을 토대로 DB를 설계했어요. 데이터를 어떻게 쌓을지 설계하고, 백엔드 기능 개발과 서버 배포, 운영을 담당했습니다.

연정: 저는 영인 님이 만들어주신 디자인을 웹사이트 프론트 화면에 구현하는 작업을 했습니다.

시티트리클럽 웹사이트에는 서울 가로수 지도가 들어가 있는데요, 기술을 잘 모르는 입장에서는 이 지도를 어떻게 웹에 녹인 것인지 궁금했어요. 

연정: 지도를 이미지가 아니라 벡터로 불러오는 글로벌 서비스가 있어요. 시티트리클럽 웹사이트는 그 서비스를 끌어다가 커스터마이징하는 방식으로 운영되고 있거든요. 지도 위에 가로수가 표시되는 것은 서울시 가로수 API 값을 뿌린 거고요.
 

예진: 서울시에 있는 나무 데이터가 이십몇만 개 정도 돼요. 그걸 어떻게 지도에 뿌려야 웹사이트가 안 느려지고 잘 돌아갈까, 고민했어요. 더구나 나무 데이터를 그냥 뿌리면 끝나는 게 아니라, 이게 누구 나무인지, 누가 이 나무에 ‘좋아요’를 눌렀는지 등의 정보가 같이 보여야 하니까요. 

재밌는 에피소드가 있는데, 연정 님과 따로 만나서 로우데이터를 지도에 한번 뿌려봤거든요. 그런데 지도에 나무 데이터가 안 뜨는 거예요. ‘큰일났다’ 싶었는데 30분 후에야 뜨더라고요. 사람들이 걸어 다니면서 시티트리클럽 웹사이트를 이용할 텐데, 나무가 안 보이면 어떡하지? 나무 데이터 뜨는 속도를 어떻게 더 빠르게 할 수 있을까? 좌절하면서 집으로 돌아갔던 기억이 있어요.

그래서 어떻게 그 문제를 해결하셨어요?

예진: 사용자는 걸어다니면서 이 지도를 볼 테니까 반경을 넓게 볼 필요는 없잖아요. 줌 아웃을 하지는 않을 테니까요. 사용자가 이동할 때마다 그 반경 안에 있는 나무를 그때그때 불러오는 식으로 설정하면 한 번에 열 몇 개씩만 화면에 띄우면 되거든요. 그렇게 해결했어요.

영인 님은 어떠세요? 어떤 부분에 특히 신경 쓰면서 시티트리클럽 작업을 하셨나요?

영인: 가로수의 권리를 시민들에게 설득하는 게 프로젝트의 목표였는데요, 사실 매일 바쁜 일상을 살아가다 보면 가로수가 있는지 없는지, 잘 자라는지 아닌지 관심 가지기가 어렵잖아요. 가로수가 심하게 가지치기 되었다거나 잘려 나가면 그제야 인지하게 되고요. 그래서 나무의 권리가 침해된 후에 문제를 제기하는 게 아니라, 사전예방이 가능한 환경을 만드는 게 더욱 구체적인 목표가 되었어요. 

어떻게 디자인을 해야 사람들이 여기에 혹할까, 어떻게 가로수를 만나러 가고 싶게끔 만들까를 제일 고민했던 것 같아요. 그렇게 나온 콘셉트가 ‘다시 만난 세계’예요. 시티트리클럽을 통해 더 많은 사람들이 나무에 관해 이야기하는 재미를 느끼면 좋겠다고 생각했어요. 그래서 사람들이 좀 흥미 있게 볼만한 것으로 로딩 스플래시도 만들고, 입장할 때 비밀번호도 입력하게끔 설정해서 ‘나만 이걸 할 수 있어’ 같은 느낌을 주려고 했어요. 

한편 인아 님은 ‘어떻게 하면 개발적으로도 친환경적인 웹사이트를 만들 수 있을까?’를 많이 신경 쓰셨던 게 기억나요. 연정 님과 예진 님이 도움을 많이 주셨는데요, 처음에는 친환경 서버 사용을 고려해 보기도 했어요. 그런데 친환경 서버 인증을 받은 곳은 한국과 너무 먼 국가(네덜란드, 영국 등)에 있어서 데이터가 이동하는 거리가 멀어지는 바람에 친환경적이지 않게 되더라고요. 그래서 데이터 전송 거리와 사용량을 줄이는 방향으로 개발, 디자인했어요. 개발적으로는 불필요한 스크립트를 제거하고 외부 서비스와의 연동을 최소화했어요. 예를 들면, 가로수 API를 크롤링 방식으로 매번 가져오는 게 아니라 저희 데이터베이스에 저장해둔 것을 불러오는 거라 비교적 데이터 사용량이 적어요. 마찬가지의 이유로 디자인 측면에서는 이미지 파일의 용량을 줄이려고 노력했는데요, 사진은 기본적으로 디더링하여 불러오게 하고 애니메이션은 ‘JSON’이라는 파일 형식으로 만들어서 최대한 가볍게 넣으려고 했어요.

시티트리클럽 로고도 굉장히 특이하고 귀여워요. 작업 과정을 구체적으로 듣고 싶어요.

영인: 로고는 실제 서울시 일대의 가로수 및 주변 환경에서 발견한 이미지를 바탕으로 만든 거예요. 프로젝트 초반에 가로수 사진을 엄청 찍으러 다녔죠. 그 사진에서 글자 모양을 따냈어요. ‘이 나무껍질 모양이 C처럼 보이네’ 싶으면 그걸 따와서 ‘C’로 만들고, 길거리를 걷다가 발견한 귀여운 소화전 사진을 찍어와서 ‘T’로 만들기도 하고요. 그렇게 처음에는 자소 만드는 작업을 먼저 했어요.

로고 작업은 전반적으로 오늘의풍경에서 인턴으로 일했던 이재인 디자이너가 맡아주었어요. 나무 사진을 정리하고, 거기서 자소들을 뽑아낸 것도 모두 재인 님이 한 일이죠. 사진에서 뽑아낸 자소를 가지고 로고를 만들었는데, ‘시티트리클럽’이라는 글자 자체를 로고로 만들자니 너무 긴 거예요. 그래서 심볼을 만들자는 아이디어가 나왔어요. 재인 님이 ‘이거 나무처럼 보이게 만들 수 있겠는데?’라는 생각으로 나무 머리 모양의 ‘CT’를 넣고, 나무 기둥과 뿌리 모양으로 ‘CLUB’을 넣어서 로고를 만든 거예요. 

저도 심볼 작업하시는 과정을 어깨너머로 조금 봤는데, 나무 사진을 찍어와서 심볼로 바꾸는 작업이 신기하더라고요. 이 외에도 일하시면서 재미있거나 흥미로웠던 부분이 있었을까요?

연정: 시티트리클럽 웹 자체가 움직이면서 사용하게 되어 있잖아요. 저도 ‘테스트하고 올게요’ 하면서 약간 말벌 아저씨처럼 나무를 살피러 다녀오고 하는 게 재미있었어요. 방구석에 앉아서 웹 기능 테스트를 하는 게 아니라, 실제로 내 나무까지 다녀오는 시간이 뭔가 환기도 되는 것 같았고요.

예진: 저는 주로 집에만 있는 편이라 테스트를 잘 못 하겠더라고요. 나무를 배정받으면 바로 보러 갈 자신이 없어서 약속 있는 날 주로 테스트를 해봤어요. 그런데 어쨌든 사이트 자체가 너무 귀엽고, 기능도 흥미로웠어요. 저는 완전 IT 사람이라 그런지 나무를 관리하는 서비스가 있다는 게 처음엔 너무 신기했거든요. ‘그게 필요한가?’ 싶었죠. 막상 만들고 보니 너무 재미있고 귀엽고 의미 있다는 생각이 들어서 이 프로젝트를 주변에 빨리 자랑하고 싶어요. (웃음)

영인: 저는 굿즈를 만든 게 기억에 남아요. 반다나, 스티커, 줄자, 조끼에 붙이는 자수 패치 등을 만들었는데 특히 스티커 작업이 재미있더라고요. 시티트리클럽 캐릭터가 줄자를 가지고 나무 둘레를 잰다거나, 카메라를 들고 있다거나 하는 모습을 스티커로 구현했어요. 또 비슷한 맥락에서, 웹사이트에 들어가는 애니메이션도 작업했는데요. 스티커도 그렇고 애니메이션도 그렇고 캐릭터가 움직이는 모습을 상상하고 만들어 내는 게 재미있었어요. 

사실 마이페이지 애니메이션은 하나의 이미지가 아니라 이미지를 여러 개의 타일로 쪼개놓고 움직이게 한 거예요. 보통 애니메이션을 웹사이트에 넣으면 무거워서 로딩 속도가 느려지는데, 시티트리클럽 웹사이트는 최대한 가볍게 만들고자 해서 ‘JSON’이라는 파일 형식을 사용했어요.

아까 잠깐 웹 기능을 테스트하면서 나무를 만나러 갔던 이야기를 해주셨잖아요. 시티트리클럽의 핵심이 나무를 직접 만나보는 경험일 텐데, 세 분께는 그 경험이 어땠는지 궁금했어요. 

연정: 첫 번째 테스트를 하면서 제가 처음 만난 나무가 공사장 옆에 있었거든요. 나무를 만나러 갔는데 공사장에 있고, 애는 시들시들하고, 어떤 부분은 뿌리째 다 잘려서 주황색 천으로 덮여있고 이런 모습을 보니 화가 나더라고요. 그걸 사진 찍어서 (신)인아 님에게 보내면서 “이래도 되는 거예요?”라고 했더니, 인아 님이 “벌써 나무에 빠지셨군요”라고 하셨어요. 예전 같았으면 가로수에 관심을 가지지 않았을 텐데, 시티트리클럽 웹사이트를 통해서 가로수에 관심도 생기고 뭔가 싸울 힘도 생기는 듯한 기분이 들더라고요.

영인: 저는… 잘 모르겠어요. 너무 고민하면서 작업하다 보니 ‘내 나무를 만난다’는 사실보다 ‘이 기능이 잘 되고 있나?’에 몰입해 있었던 것 같아요. 연정 님 얘기를 들으니 내 나무를 만나는 기쁨을 잘 못 느낀 것 같아서 아쉬움이 들기도 하네요. 

인아 님이 이야기해 주셨던 에피소드를 대신 전하자면, 한 번은 도로 한가운데 있는 나무가 배정되어서 가까이 다가갈 수 없었던 적이 있었다고 해요. 나무를 만나러 갈 때 노래가 들리는 기분이 든다는 말씀도 자주 하셨던 것 같고요. (웃음)

예진: 저도 영인 님이랑 비슷했어요. 특히 테스트를 집 근처에서 하지 않고 어디 갔을 때 ‘여기 있는 나무에 한번 가볼까?’라는 식으로 했기 때문에 나무에 애정이 막 생긴다기보다는 ‘여기서도 잘 되네’, ‘이 장소에 나무가 잘 뜨네’ 같은 생각을 많이 했어요. ‘내가 테스트를 해봤는데 나무가 이 장소에 잘 안 뜨면 어떡하지?’처럼 기능이 잘 돌아가지 않았을 때를 걱정했던 거죠. 한 번은 연정 님이 버스 타고 가면서 테스트하다가 나무를 성공적으로 배정받았다고 해서 ‘기능적으로 잘 돌아가는구나, 너무 잘 됐다’라고 안심했던 기억이 나요. 

같은 기능에 대해서 감상이 전혀 다르셨군요. (웃음) 나중에 시간이 더 흘러서 시티트리클럽 프로젝트를 돌아봤을 때, 어떻게 기억에 남을 것 같나요?

연정: 일단 저는 영인 님으로부터 완벽한 기능명세서를 받아본 프로젝트, 그리고 예진 님과 일하면서 ‘백엔드 개발자와도 이렇게 잘 의사소통할 수 있구나’라고 생각했던 프로젝트로 기억할 것 같아요. 영인 님은 기획 단계에서 기능명세서를 하나하나 함께 읽어주시면서 빨간펜 선생님처럼 친절하게 저를 이끌어주셨고, 예진 님은 제가 놓치고 있던 부분을 계속 물어봐 주셔서 브레인 스토밍을 시켜주셨어요. 즐거웠던 프로젝트로 남을 것 같아요. 

예진: 소통하기가 어려운 게 하나도 없었던 프로젝트였어요. 보통 일할 때 의사 소통이 가장 중요한 것 같은데, 연정 님과도 오늘의풍경과도 소통이 되게 잘 됐다고 생각해요. 

영인: 저한테는 엄청 큰 브랜딩 프로젝트로 오래 기억에 남을 것 같아요. 기획부터 결과물까지 쭉 참여했는데, 그 결과물이 로고부터 시작해서 굿즈, 웹사이트까지 되는 경험은 사실 하기 힘들거든요. 또 개인적으로 서울환경연합 후원회원이기도 해서 더욱 뜻깊은 프로젝트로 오래오래 기억에 남을 것 같아요. 

마지막으로, 시티트리클럽 웹사이트가 어떻게 사용되었으면 하시나요?

연정: 단순한 이벤트보다는, 좀 오래 사용되는 사이트가 되면 좋겠어요. 

예진: 저도 그렇게 생각해요. 잘 쓰여서 이름을 널리 떨칠 수 있기를 바라요. 

영인: 서울환경연합에서 시티트리클럽 첫 베타테스트 워크숍을 진행해 주셨던 날이 떠올라요. 사람들이 이 웹사이트를 실제로 이용하는 모습을 보니 신기하고 벅차더라고요. 다들 신나서 막 웃으면서 활동하시고요. 앞으로도 많은 분들이 그런 모습, 그런 얼굴로 시티트리클럽 웹사이트를 사용해 주시면 좋겠어요.