웹 사이트는 연극과 같다? 디자인으로 메시지를 연출하는 법

에어리어 17

시티호퍼스

2024.07.03

연극 배우에서 촉망 받는 영화・다큐멘터리 감독으로 성공적인 커리어 전환을 한 남자가 있었어요. 그는 팔레스타인과 이스라엘 분쟁을 주제로 한 다큐멘터리로 상도 받고, 향후 다큐멘터리와 장편 영화를 제작할 예정이었죠. 그런데 9・11 테러가 발생하면서 갑작스럽게 다큐멘터리와 영화 제작 일정이 모두 미뤄지게 돼요. 꿈이 좌절되었지만 슬퍼할 겨를이 없었어요. 생계가 급했거든요.

그는 부업으로 하던 웹 디자인과 웹 개발을 본업으로 발전시켜보기로 했어요. 그는 연극이나 영화와 웹이 표현 방식만 다를 뿐 결국 사람들에게 메시지를 전달하고자 한다는 점이 유사하다고 생각했거든요. 연극으로 좋은 경험을 주기 위해서는 무대 연출, 의상 등 시각적인 요소뿐만 아니라 배우의 연기와 동선, 무대 뒤에서 이뤄지는 의사소통 등 모든 게 유기적으로 이뤄져야 하잖아요. 이처럼 웹 사이트도 결국 ‘시스템’이 중요하다고 본 거예요.

이 남자는 디자인 에이전시 ‘에어리어 17(AREA 17)’의 CEO인 조지 이드예요. 에어리어 17은 디자인 에이전시지만 디자인만 하지 않는 에이전시로 업계에 이름을 알렸어요. 또한 오픈AI와 나이키, 뉴욕타임즈 등 내로라하는 글로벌 기업들의 브랜딩과 웹 사이트 디자인도 담당했죠. 그렇다면 웹 사이트가 연극과 같다고 보는 디자인 에이전시는 무엇이 다른길래, 이렇게 인기인 걸까요?

에어리어 17 미리보기

• 디자인 에이전시가 아닌, 회사를 디자인하는 에이전시

• ‘돈이 되는’ 고객 대신 ‘좋은 고객’의 손을 잡다

• 성장도 크리에이티브하게

• ‘시각 피질’에 영감을 받은 이름

IT 제품을 만들면서 기술과 제품 얘기는 쏙 빼고 웹 사이트를 만든 회사가 있어요. 바로 오픈AI예요. 보통의 경우 회사 웹 사이트 첫 화면엔 지금 당장 우리 제품을 써보라는 버튼이 큼지막하게 위치해요. 생성형 AI 열풍의 주역 챗GPT 경쟁 서비스인 제미나이(Gemini)를 만든 구글AI 웹 사이트에도, 클로드(Claude)를 개발한 앤트로픽(Antropic) 웹 사이트에도 제품으로 이어지는 버튼이 눈에 띄죠.

그런데 웬일인지 정작 챗GPT를 만든 오픈AI의 웹 사이트에는 그런 버튼이 보이지 않아요. 상단에 위치한 메뉴도 연구(Research)와 제품(Products), 안전(Safety), 회사(Company) 순서대로 배치돼 있죠. 보통 제품을 1순위로 배치하기 마련인데 말이에요.

ⓒ에어리어 17

그렇다면 오픈AI는 왜 웹 사이트 첫 페이지에 제품 버튼을 두지 않았을까요? 선두주자의 여유가 아니에요. 오픈AI는 챗GPT를 세상에 내놓기 전부터 사람들이 빠르게 성장하는 AI를 보면 공포심을 느낄 거라고 봤어요. AI 윤리에 대한 논쟁, 일자리를 대체 당할 거라는 논란 등을 예견한 셈이죠. 하지만 오픈AI가 생성형 AI를 만들고 진화시키는 이유는 인류를 위해서였어요. 오픈AI는 이 메시지를 꼭 전달하고 싶었죠.

그래서 웹 사이트에 AI 제품과 뛰어난 기술력을 드러내기 보다 AI를 개발하는 오픈AI의 과정과 스토리를 먼저 담았어요. 오픈AI가 AI 제품들을 만든 이유를 먼저 안다면 공포심보다는 호기심을 느끼고, AI에 압도 당하기보다는 이를 활용할 생각을 할 수 있을테니까요.

오픈AI의 웹 사이트는 개편 후 화제가 됐어요. 챗GPT라는 제품에 가려져 있던 오픈AI의 철학과 존재감이 드러나며, 성공한 브랜딩 사례로 평가받았죠. 인터넷 우수성을 기리는 최고의 상으로 꼽히는 웨비 어워즈(Webby Awards)에 노미네이트되기도 했고요.

오픈AI의 성공적인 리브랜딩에는 숨은 공신이 있어요. 바로 ‘에어리어 17’이라는 디자인 에이전시예요. 파리와 뉴욕에 거점을 두고 다양한 글로벌 클라이언트와 폭넓게 협업하는 에어리어 17은 디자인 에이전시의 역사를 새로 쓰고 있다고 해도 과언이 아닌데요. 에어리어 17은 무엇이 다를길래, 두각을 나타내는 걸까요?

디자인 에이전시가 아닌, 회사를 디자인하는 에이전시

에어리어 17의 CEO이자 파운더인 조지 이드는 영화・다큐멘터리 감독이었어요. 극본 작성과 무대 연출, 연기를 하는 연극 배우를 하다가 커리어를 전환했죠. 그는 팔레스타인과 이스라엘 분쟁을 주제로 한 다큐멘터리로 상을 받을 정도로, 유망한 영화 감독으로 주목을 받았어요.

그러던 그가 웹 디자이너이자 웹 개발자로 커리어를 또 한 번 바꾼 건 순전히 우연이었어요. 2001년 9・11 테러가 발생하면서 조지 이드의 다큐멘터리나 장편 영화 계획이 모두 취소됐거든요. 그러자 조지 이드는 순전히 돈을 벌기 위해 시작한 웹 디자인과 웹 개발 역량을 더욱 발전시키기로 결심하죠.

그는 연극이나 영화와 웹이 유사하다고 생각했어요. 표현 방식만 다를 뿐 결국 사람들에게 메시지를 전달하고자 하니까요. 연극으로 좋은 경험을 주기 위해서는 무대 연출, 의상 등 시각적인 요소뿐만 아니라 배우의 연기와 동선, 무대 뒤에서 이뤄지는 의사소통 등 모든 게 유기적으로 이뤄져야 하잖아요. 이처럼 웹 사이트도 결국 ‘시스템’이 중요하다고 본 거예요.

그의 철학은 프랑스에서 인터랙티브 디자이너로 주목받은 아르노 마르시에를 만나면서 더욱 확고해졌어요. 조지 이드는 아르노 마르시에와 함께 2003년에 에어리어 17을 설립하면서 시각적으로도, 경험적으로도, 기술적으로도 뛰어난 웹 사이트를 만드는 에이전시가 되는 걸 목표로 삼았어요.

에어리어 17의 이러한 방향은 작업물에서 잘 드러나요. 옥스맨(OXMAN) 사례를 들어볼게요. 옥스맨은 자연을 해치는 디자인 시스템에서 벗어나 자연 친화적인 방식으로 구조물을 만드는 회사예요. 실크를 양산하기 위해 좁은 공간에서 누에를 키우고 도살하는 기존의 시스템과 달리, 누에가 자율적으로 만든 실크를 활용해 만든 ‘실크 파빌리온’이 대표 작품이죠. 이 구조물은 사회와 디자인 업계에 중요한 메시지를 던졌다는 평가를 받아요.

SILK PAVILION I ⓒOXMAN

에어리어 17은 옥스맨의 철학을 웹 사이트에 녹였어요. 웹 사이트에 접속하자마자 보이는 첫 화면에 누에가 실을 뽑는 영상을 생생하게 담고 스크롤을 내릴 때마다 또 다른 동식물의 모습을 보여주며 화면을 전환했어요. 당장이라도 화면에서 나올 것 같은 생생한 영상과 함께 옥스맨의 비전과 미션을 미니멀한 텍스트로 표현했고요. 굳이 어떤 회사인지 알아보지 않아도, 자연 친화적인 회사라는 점을 알 수 있게끔 말이에요.

ⓒOXMAN

프로젝트 페이지도 마찬가지예요. 결과를 보여주기보다 해당 구조물을 만들기 위해 옥스맨이라는 회사가 어떤 과정을 거쳤는지, 이 구조물에 어떤 자연 친화적인 재료가 쓰였고 그 재료는 어떻게 얻었는지 등에 대한 이야기를 담았죠. 뉴욕에 위치한 박물관에 놓여있는 아구자오자(AGUAHOJA)도 플라스틱 등 자연을 병들게 하는 디자인 작품들을 꼬집은 구조물인데요. 이 프로젝트의 페이지엔 아구자오자를 만들기 위해 낙엽 5,740개와 사과 껍질 6,500개, 새우껍질 3,135를 썼다는 점이 적혀 있어요.

ⓒOXMAN

그뿐 아니라 마우스 포인터가 움직이는 대로 새로운 이미지와 텍스트를 표현하고, 스크롤을 할 때마다 새로운 이미지와 정보를 보여주면서 사용자의 감각을 자극하고자 했어요. 예상과는 다른 흐름을 의도하며 자연에 대한 경외심을 느끼길 바라는 의도를 담았죠.

ⓒ에어리어 17

또 국제 에너지 기구(International Energy Agency, IEA) 사례도 있어요. 국제 에너지 기구는 1974년 창설된 뒤 화석연료를 중심의 에너지 정책을 제안해왔는데요. 시간이 흐를수록 기후변화에 대한 문제 의식이 커지면서 친환경 에너지 중심으로 업계를 재편해야 한다는 과제를 안았어요. 에너지 위기와 기후변화 위기 사이에서 균형을 잡으며 신뢰를 줘야 하는 입장이 된 거죠.

국제 에너지 기구의 리브랜딩을 맡은 에어리어 17은 일단 국제 에너지 기구에 대한 인식을 현대화하고자 했어요. ‘국제기구’라고 하면 등장한지 오래된 만큼 현재 문제를 제대로 마주하지 못하고 있다는 의구심이 들 수도 있잖아요. 이런 인식을 깨고 국제 에너지 기구가 사회의 흐름에 발맞추는 젊은 기구라는 인상을 줘야 했어요. 그래서 ‘신뢰’를 뜻하는 ‘프라이머리 블루(Primary Blue)’를 브랜드 색상으로 정하고, 직원도 기구의 메시지를 충분히 인지하고 일할 수 있도록 사원증과 명함, 회사 내부에도 이를 적용했죠.

ⓒ에어리어 17

무엇보다 에너지와 관련된 데이터와 전문가의 분석을 누구나 알기 쉽게 이해할 수 있도록 구현하는 게 중요하다고 봤어요. 이에 따라 길고 어려운 보고서를 짧고 눈에 띄도록 만들고, 전문가 분석을 강조했죠. 데이터 역시 차트와 이미지를 활용해 대중과 상호작용할 수 있도록 하며 콘텐츠 형식을 다시 만들었고요.

ⓒ에어리어 17

‘돈이 되는’ 고객 대신 ‘좋은’ 고객의 손을 잡다

“돈이 목표인 클라이언트는 우리를 산만하게 만듭니다. 따라서 ‘돈이 되는’ 클라이언트보다 ‘좋은’ 클라이언트와 함께 하고자 합니다.”

-에어리어 17, 사업 개발 선언문에서

에어리어 17의 CEO인 조지 이드가 무려 사업 개발 선언문에 적어 놓은 문구예요. 에이전시가 돈이 되는 클라이언트를 마다한다니 이게 도대체 무슨 일일까요?

에어리어 17은 웹 사이트로 사람들이 공감할 수 있는 경험을 만들어 삶을 긍정적으로 바라볼 수 있도록 하는 걸 목표로 해요. 하지만 이 목표는 혼자서 이룰 수 없죠. 세상을 좋은 방향으로 바꿔나가는 고객과 협업할 때만 실현 가능한 일이에요. 그래서 에어리어 17은 고객을 통해 돈을 벌 수 있다는 점보다 꿈을 현실로 만들 수 있다는 점에 주목했어요.

이런 철학을 바탕으로 에어리어 17은 사회에 선한 영향력을 미치는 프로젝트에도 많이 참여했어요. 이는 에어리어 17에게 선순환 구조를 만들어줬죠. 사회적으로 화제가 되면 더 많은 기업이나 조직의 눈에 띄어, 더 원하는 일을 골라서 할 수 있는 위치에 놓이게 된 거예요. 그 결과 에어리어 17은 예술, 과학, 문화, 교육 등 다양한 분야의 고객과 협업하며 전반적인 산업에 대한 이해도를 쌓을 수 있었죠.

에어리어 17이 선한 영향력이 큰 프로젝트에 관심이 많다는 건 포트폴리오를 보면 금세 알 수 있어요. 하버드 래드클리프 연구소(Harvard Radcliffe Institute) 사례만 봐도 그렇죠. 에어리어 17은 이 연구소와 제휴해 하버드와 노예 제도의 유산(Harvard & the Legacy of Slavery) 프로젝트를 위한 웹 사이트를 만들었어요.

이 프로젝트는 전 세계적으로 큰 영향을 미치는 데다 미국에서 가장 오래된 고등 교육기관인 하버드 대학교의 과거를 들추는 게 목표예요. 과거 노예제도와 인종차별 이데올로기로부터 혜택을 받았다는 점과 하버드 대학교의 부당함에 저항한 흑인 학생들의 역사를 밝히고자 했죠. 하버드 래드클리프 연구소는 이 보고서를 최대한 많은 사람에게 퍼뜨리고 싶었어요. 역사를 잊지 않고 성장의 밑거름으로 쓰겠다는 하버드 대학교의 의지를 나타내기 위해서요.

ⓒ에어리어 17

에어리어 17은 주제가 무거운 만큼 그동안 만들었던 웹 사이트와 달리 톤 다운된 색을 사용하고 꾸밈 없이 정제된 디자인을 적용했어요. 보고서는 첫 페이지에 링크로 걸어두고, 대화형 각주를 통해 독자가 흐름상 방해받지 않도록 설계했죠. 이 웹 사이트는 주제를 잘 표현하는 데다 유용하다는 점에서 ‘걸작’으로 평가받기도 했어요.

또한 콘텐츠 진정성 이니셔티브(Content Authenticity Initiative, CAI)를 브랜딩한 사례도 있어요. CAI는 AI의 등장으로 점점 더 가짜 뉴스가 늘어가는 온라인에서 콘텐츠 투명성을 회복하기 위해 기술, 출판, 창의적 기업들로 구성된 커뮤니티예요. CAI는 2024년 대선이 다기오기 전 오픈소스 기술 및 방법을 전 세계에 전달해 뉴스의 투명성을 높이고 싶었어요.

그러기 위해서는 일단 ‘AI’에 대한 공포심이나 혐오감을 누그러뜨릴 필요가 있었어요. 따라서 친근한 이미지와 제너럴한 컬러를 쓰고, 둥근 모서리를 부각하며 마음의 벽을 허물고자 했죠. 또한 웹 사이트 첫 화면에 CAI가 일상에서 중요한 이유와 알아야 할 점, 참여하는 방법 등을 알기 쉽게 정의했어요. 그 결과, CAI는 다양한 매체에서 투명성의 아이콘으로 소개됐죠. 미국 상원의 선거 및 민주주의에 관한 AI 통찰력 포럼에 등장하기도 했고요.

ⓒ에어리어 17

성장도 크리에이티브하게

디자인 에이전시라고 클라이언트 작업물 만들기에 바쁘다고 생각하면 오산이에요. 에어리어 17은 클라이언트의 성장만큼이나 팀과 팀원 개개인의 성장을 중요하게 생각하거든요. 그래서 에어리어 17은 ‘최고의 삶이 최고의 성과를 만든다(Living our best lives makes our best work)’는 걸 모토로 조직문화를 만들어가고 있어요.

그렇다면 최고의 성과를 내기 위해서는 어떤 게 필요할까요? 일단 팀원이 팀과 회사의 목표를 제대로 이해하고 있어야 해요. 어떤 주제나 언어에 대한 자의적인 해석이 이뤄지지 않도록 지속적인 합의가 필요하죠. 작업물에 대한 자유로운 피드백도 오가야 하고요.

에어리어 17은 이 모든 걸 촘촘하게 마련해뒀어요. 경영진이 지속적으로 가치를 창출하기 위해 중요하다고 생각하는 방법을 문서로 정리했죠. 중대한 의사결정이 있다면 지체하지 않고 게시판에 공유를 해요. 뿐만 아니라 팀원들이 쓰는 어휘를 단어집으로 정리해두기까지 했어요.

피드백과 관련해서는 ‘피드백의 기초(Foundations of Feedback)’라는 피드백 방법론이 담긴 문서를 만들어 무료로 배포하기도 했어요. 웹 사이트는 ‘디지털 간판’과도 같은데요. 사람들은 기업이나 제품에 대한 궁금증이 생기면 웹 사이트부터 방문하니까요. 그만큼 사람들의 마음에 파고들고 행동을 이끄는 웹 사이트를 만들기 위해서는 개선에 개선을 거듭해야 하는데요. 에어리어 17은 피드백이 그 방법이라고 생각했어요. 피드백을 어떻게 받아들이냐에 따라 작업물의 수준이 달라질 수 있다고 보고 피드백의 장애물이 무엇인지, 어떻게 극복해야 하는지 등을 스터디한 뒤 정리한 거예요.

Foundations of feedback 중 ⓒ에어리어 17

그뿐 아니라 에어리어 17은 팀원들의 생각이 곧 작업물로 구현된다고 보고 팀원의 인식 교육에도 힘을 쓰고 있어요. 다양성(Diversity)과 형평성(Equity), 포용성(Inclusion)에 대한 DEI 교육을 꾸준히 실시하면서 관련 자료를 무료로 풀기도 했죠.

이밖에도 에어리어 17은 팀원의 영감을 일깨울 만한 장치를 곳곳에 마련해 뒀어요. 팀원들을 자주 볼 수 없던 코로나19 팬데믹 시기엔 매주 ‘쇼쇼(Shout out & Showcase)’라는 프로그램을 진행해 팀원들이 서로 작업중인 내용과 영감을 공유하도록 했어요. 스튜디오가 있는 파리와 뉴욕에 클럽하우스를 열어 팀원들이 자유롭게 드나들고 영감을 얻을 수 있는 장소를 마련하기도 했고요.

다른 팀원이 경험과 영감에 대해 공유하고 있는 모습 ⓒ에어리어 17

에어리어 17은 리뷰를 통해서도 학습해요. 2019년부터 매년 한 해를 회고하는 웹 사이트도 만들어 한 해 동안 만들어낸 작업물을 공유하고, 사회에 어떤 영향력을 미쳤는지 짚어봐요. 성과를 낸 부분은 충분히 기뻐하되 변화하는 환경에 적응하기 위해 어떤 고민과 노력을 하고 있는지도 스스럼 없이 공유하죠. 마지막으로 다음 해를 맞이하는 마음가짐도 밝히고요.

“우리는 성공으로부터 많은 것을 배웠지만 실패로부터 더 많은 것을 배웠습니다.”

- 조지 이드, 15주년 회고에서

2023 회고 페이지 ⓒ에어리어 17

‘시각 피질’에 영감을 받은 이름

ⓒ에어리어 17

브로드만 17 구역(Brodmann area 17)은 일차 시각 피질(Optical Cortex)로 후두엽 뒤에 위치해 있어요. 시각적 데이터를 받아들이고 패턴을 인식하며 이미지를 형성하는 역할을 담당하죠. 갑자기 우리의 뇌에 대해 이야기하는 이유는요, 에어리어 17이 바로 브로드만 17구역에서 따 온 이름이기 때문이에요.

실제로 에어리어 17은 작업을 할 때 시각 피질을 자극할 수 있을 만한 시각적 요소와 패턴, 이미지에 집착해요. 단순히 디자인 에이전시가 아니라 깊이 있는 시각적 이해와 기술적 역량을 갖췄다는 점을 강조하죠.

조지 이드 CEO는 창립 20주년을 맞아 에어리어 17이 앞으로 가야 할 방향에 대해 확고하게 말했어요. 디자인 에이전시를 넘어, 디자인 업계에 영향을 미치는 디자인 회사가 돼야 한다고 말이에요. 에어리어 17은 디자인 업계의 발전을 위해 CMS 툴인 TWILL이나 피드백 가이드, 디자인 가이드 등을 무료로 배포해 왔는데요. 앞으로는 더 많이 연구하고 활동해 업계에 더 많은 것을 공유하는 디자인 회사로 거듭나겠다고 선언했어요.

디자인 에이전시를 다시 정의하며 기준을 새로 쓰고 있는 에어리어 17. 앞으로는 어떤 웹 사이트로 우리의 시각 피질을 자극할지 궁금해지는 이유예요.