디자이너를 채용하기 전에 이 사람이 일을 효과적으로 할 수 있는 업무 환경을 조성하라. 어떤 직원이든 작업 도구나 권한이 없어서 성공하기 어려운 업무 환경으로 영입하는 것은 그들에게 부당하다. 그리고 당신은 어렵게 번 돈을 크게 낭비하는 셈이다. 게다가 새로운 사람과 어떻게 지내야 할지를 모르는 다른 직원들은 부담만 갖게 된다.
 

 
이 이야기의 교훈은 당신의 업무 환경으로 디자이너를 데려오기만 해서는 그들이 성공하길 기대할 수 없다는 것이다. 당신의 기대를 명확하게 계획해야 하고, 당신이 기대한 바를 디자이너가 할 수 있도록 무대를 만들어줘야 한다.
 
* 호더쇼: 호더란 물건을 버리지 못하고 모으는 일종의 강박장애를 겪는 사람이며, 호더쇼는 낡고 필요 없는 물건이나 쓰레기를 집 안에 쌓아두는 행동을 반복하는 사람의 집을 치워주는 미국 TV쇼다.
 

제 1계명: 직장에 새로운 규율 도입하기

직원 중에 디자이너가 없다고 생각해보자. 직원들은 저마다 맡은 일을 잘 수행해왔다. 자, 이제 당신이 디자이너를 새로 영입한다. 직원들이 디자이너를 고용하자고 그렇게 노래를 불러놓고도, 정작 디자이너가 들어오면 갈등이 생긴다. 인간은 익숙하고 편안한 것의 노예니까. 그들은 디자이너가 없어서 일하기 어렵다고 불평하더니 디자이너를 구해도 어떤 일에 대한 자신들의 권한을 포기해야 하므로 여전히 불평한다. 쉽지 않다. 다른 사람의 일까지 떠맡아 해야 한다는 불만은 이제 그 일을 다른 사람에게 줘야 한다는 불만으로 바뀐다. 인간이란 존재가 참 놀랍지 않은가.

디자이너는 회사가 만들어내는 결과물을 분명히 바꾸고, 회사의 운영 방식에도 영향을 끼친다. 디자이너가 들어오면 당신은 업무 흐름을 새로운 사람에게 맞춰야 하고, 그들이 업무 흐름에 적응하도록 여지를 줘야 한다.

어떤 사람을 구성원 속으로 밀어 넣기 전에 모든 직원을 앉혀 놓고 왜 디자이너를 채용하는지, 회사에 어떻게 이익이 되는지, 디자이너의 책임과 역할이 무엇인지 설명하라. 전 직원의 일이 좀 더 수월해지려면 (칼퇴근이 가능해지려면!) 디자이너의 역량이 어떻게 회사에 더해져야 하는지를 설명하라. 오랫동안 디자이너가 없이 일해준 직원들에게 고마움을 표하라. 새로운 디자이너 덕분에 그들이 더 이상 떠맡을 필요가 없게 된 일들에 대해 이야기해줘라. 더불어 새로운 디자이너가 팀에 합류할 때 문제들이 생길 수도 있다고 말해줘라.

그러고 나서 그 문제들이 발생했을 때는 디자이너를 도와줘라.

당신의 디자이너는 맨 윗사람의 도움 없이 일을 기똥차게 잘할 수 없다. 그들의 업무가 제품이 작동하는 방법과 사람들이 서로 소통하고 일하는 방식을 바꾼다면 (모든 디자인이 그렇듯), 여러 사람을 짜증이 나게 할 것이다. 동료가 당신의 사무실로 달려와서 “디자이너가 죄다 바꾸고 있어요!”라고 말하면 “바로 그런 일을 하라고 내가 디자이너에게 월급을 주는 겁니다.”라고 콕 찍어 말해줘라. 명심하라. 디자이너는 자신의 이익만을 위해서 그 자리에 있는 게 아니다. 그들은 당신을 대변한다.

디자이너를 영입하는 일이 어려울 수 있다. 그래도 형편없는 디자이너가 이미 자리 잡고 있는 직장으로 디자이너를 영입하는 일보다 훨씬 쉽다. 산업 현장에서 흔히 일어나는 일화를 하나 소개하겠다. 한번은 동료들이 내 자리로 오더니 자신들의 바자회에 사용할 홍보 표지판을 만들어 달라고 요청했다. 그건 내 일이 아니라고 알려줬더니, 그들은 이전에 함께 일했던 디자이너는 그런 일도 항상 했다고 대답했다. 나는 그들에게 이전 디자이너는 마감일을 제대로 지키지 못해 잘렸다는 점을 상기시켜줬다. 그제야 더 이상 부탁하지 않았다. 내가 그들의 요청을 흔쾌히 들어 줬다면 디자이너는 동료들의 바자회 표지판이나 만드는 사람이라는 이미지가 완전히 박혔을 수도 있다.
새로운 디자이너가 일을 시작하기 전에 이런 헛소리들은 깔끔히 정리해줘라. 이 메시지는 당신의 입으로 전하는 게 훨씬 쉽다. 새로운 사람에게 이 일을 떠넘기지 마라.
 

제 2계명: 디자이너가 책임지는 업무 파악하기

‘디자이너는 디자인을 책임진다’는 말은 당연한 소리처럼 들릴 것이다. 그렇지 않은가? 여기서 말하는 디자인이란, 보이는 방법뿐 아니라 문제를 푸는 해결책을 나타내기도 한다. 대기업에서 근무하던 그 젊고 훌륭한 디자이너가 기억나는가? 그는 전략 회의에 참석하지 못했다. 그에게 작업이 주어졌을 즈음에는 아주 사소한 세부 사항까지도 다 정해져 있었고 그는 그저 실행에 옮겨야 했다. 그는 디자인을 한 것이 아니다. 다른 누군가의 디자인을 그대로 실행에 옮겼을 뿐이다.

사실 그는 단호하게 자기주장을 해야 했다. 하지만 이 글에서는 당신이 주인공이다. 디자인은 문제에 대한 해결책이고, 당신은 이를 다루는 전문가에게 돈을 준다. 정의에 따라 풀어보자면, 디자이너는 그 문제들을 해결하는 고유한 자격을 갖춘 사람들이다. 그들은 당신이 생각하지 못한 해결책을 제시하도록 교육을 받았다. 당신의 디자이너는 전략 회의에 참여하고 싶어 안달이 났을 것이다.

디자이너가 자신의 역량을 최대한 발휘하도록 만들어라. 그들을 전략 회의에 참여시켜라. 그들이 그저 주어진 해결책을 실행에 옮기는 일만 하는 것이 아니라 문제 해결에 직접 관여할 수 있도록 만들어라. 무엇보다도 그들이 이것을 업무 일부분으로 여길 수 있도록 해야 한다. 만약 그렇지 않다면, 당신의 디자인은 디자이너가 아닌 일반 사람들이 생각해낸 수준과 별로 다를 게 없다.
 

제 3계명: 디자이너에게 필요한 공간과 권한 제공하기

사무장, 회계사, 개발자가 가진 권한이 아주 명확한 것처럼 당신의 회사도 디자이너가 어떤 권한을 가졌는지를 제대로 이해해야 한다. 그렇다면 이제 권한의 개념을 “그들이 소유한 것들”로 확장해서 이야기해보자. 경리가 회계 장부를 갖고 있고, 개발자는 코드를 마음대로 하는 것과 마찬가지다. (그렇다. 나는 당신이 그 모든 기술을 갖추고 있다는 사실을 알고 있다. 그러니 여기서 나와 함께 일하자)

디자이너를 전적으로 신뢰하라. 만드는 데에 가장 적격인 그들에게 결정할 수 있는 권한을 줘라. 디자이너를 회사로 영입하기 전에, 업무 흐름이나 결과물 일부분을 넘어 그들에게 어떤 권한을 줄지를 결정하라. 그들이 사용자 인터페이스에 대한 최종 결정권을 갖고 있는가? 다른 이해 당사자들에게 조언을 구해야 하는가? (언제나 좋은 생각이다) 모든 이해 당사자들로부터 승인을 받아야 하는가? (늘 그렇듯 정치판처럼 지저분한 상황이 연출된다. 진짜다)

정답은 당신이 운영하는 조직의 유형과 디자이너의 역량에 따라 달라진다. 하지만 어떤 결정을 내려야 하든지 간에, 디자이너에게 권한을 최대한 줘서 그들의 업무를 잘 완수할 수 있도록 해줘라. 아무도 회계사의 업무 방식에 대해 왈가왈부하지 않는다. 하지만 디자이너가 업무를 어떻게 해야 하는지를 참견하는 회사 100군데는 가봤다.

줏대 있고 경험 많은 디자이너는 자신이 맡아야 하는 자리를 개척하는 데에 아무 문제가 없을 것이다. 하지만 당신이 그들에게 권한을 주지 않으면, 그들도 그렇게 할 수 없다. 그렇지 않으면, 당신은 주변 사람들의 변덕에 따라서 움직이는 사람을 데려오는 위험을 감수해야 한다. 그런 사람은 팀의 정식 일원이 되지 못한다. 그저 회사의 다른 직원들이 픽셀을 그려 넣어야 할 때마다 사용하는 복사 기계에 지나지 않는다.
이런 식으로 웹 사이트의 사용자 인터페이스 작업을 하려던 사람이 결국 ‘베티가 잃어버린 고양이를 찾습니다.’와 같은 홍보 전단지나 만드는 신세로 전락하고 만다.
 

제 4계명: 디자이너에게 필요한 작업 도구 갖추기

이러니저러니 말할 것 없이, 한번은 직장에서 회사가 불필요한 소프트웨어라고 여겼던 포토샵과 BBEdit 복제품을 얻기 위해서 엄격한 신청 절차를 거치며 첫 2주를 다 써 버린 적이 있었다. IT 업계 출신의 누군가가 1시간 동안 나에게 포토샵으로 작업해야 하는 일을 죄다 파워포인트로도 할 수 있는 방법을 설명해줬다. (나는 그를 말렸어야 했지만, 어느 순간 짜증이 누그러지면서 그가 얼마나 신중하게 이런 생각을 해냈을까 싶어서 흥미가 생겼다)

여느 장인처럼 디자이너 역시 자신들의 작업 도구와 한몸이나 마찬가지다. 그들이 필요한 작업 도구를 갖추고 있는지를 반드시 확인하라. 그들이 제대로 사용하는지를 알아보기 위해서 물어보는 건 당연하다. 그렇다고 모든 작업 도구의 기능을 전부 알 필요까지는 없다. 그냥 디자이너가 하는 대로 믿어줘라.
 

제 5계명: 성공 여부 가늠하기

디자이너를 위해서 당신의 팀은 얼마나 잘 준비되어 있는가? 디자이너는 사람들과 얼마나 잘 어울리고 있는가? 만약 디자이너가 목적을 달성하지 못하면 그들은 아무 일도 아닌 듯이 얼마나 전문가처럼 행동하는가? 어떤 직원이든 회사로 영입하기 전에 당신은 그들의 성공을 가늠할 방법을 알아야 한다. 계산하기 어려운가? 당신은 웹 사이트에서의 판매나 전환이 일정하게 증가하길 기대하는가? 앞으로 다가올 큰 프로젝트를 시간과 예산에 맞춰 제공하는 것이 목표인가?

당신의 비즈니스는 다양성이 필요하다. 그래서 나는 성공하는 디자인에 관한 기가 막힌 해답을 줄 수가 없다. 하지만 나는 이렇게 말할 수 있다. 당신의 성공 비법이 무엇이든 간에 디자이너는 그 비법을 알아야 하고, 이를 달성할 수 있는 권한도 반드시 가져야 한다고 말이다.

어쨌든 당신에게 들려줄 이야기가 있다. 한번은 고용 계약을 한 적이 있는데, 출근 첫날에 크리에이티브 디렉터가 나를 앉혀 놓고 자신이 나에게서 기대하는 바가 무엇인지, 내가 스튜디오의 다른 직원들과 얼마나 잘 맞을지 모르겠다고 말했다. (자기 자신도 정리가 안 된 것이다) 계약 기간이 끝날 즈음에, 그는 나와 계속 일을 할지 말지를 평가해야 했다. 그때 나는 어리고 멍청했다. 그래서인지 단호하게 밀고 나가지 못했고 가능하면 분위기에 잘 맞추자고 마음먹었다. (신입들이 으레 하는 실수다) 계약이 끝나자, 크리에이티브 디렉터가 나를 자신의 사무실로 불렀다. 그리고 그들이 기대한 만큼 내가 성과를 올리지 못했다고 말했다. 말도 안 되는 소리였다. 왜냐하면 양쪽 다 어떤 기대를 하고 있었는지 몰랐으니까. 기분이 정말 더러웠다. 내가 무엇을 더 잘할 수 있었을지도 궁금했다. 그리고 솔직히 말해, 크리에이티브 디렉터도 기분 별로였다고 확신한다. 성공에 대한 기대를 제대로 정하지 않았다는 사실을 깨달았을 테니까.

그러니까, 그렇게 행동하지 마라. 당신을 위해서 일하는 사람이 누구든지 간에, 그들이 일을 잘하지 못한다는 사실에 절대 놀라지 마라. 잘한다고 해도 마찬가지다. 그들이 성공하기 위해서 무엇을 해야 하는지를 알려줘라. 그들이 잘하고 있다고 알려줘라. 만약 그들이 잘하지 못한다면 그들이 방향을 잘 잡도록 도와줘라. 그리고 마지막으로 그들이 성과를 냈다 싶으면 바로 알려줘라.
 

직무 기술서를 만들고 디자이너를 찾아보자!

디자이너를 영입하기 전에 무엇보다도 중요한 준비사항은 그들의 참여로 회사나 조직에 얼마나 이익이 될지를 파악하는 것이다. 그들을 영입하면, 당신은 무엇을 할 수 있는가? 몇 년 후 당신의 모습을 설계해봐라. 무엇을 달성하고 싶은가? 그 목표들을 적어라. 당신이 적은 내용은 직무기술서의 기본이 된다.

디자이너가 했으면 하는 일을 목록으로 만들어라. 그들이 가지고 있어야 할 기술이 아니라 그러한 기술들로 어떤 작업들을 하고 싶은지를 작성하라. 당신에게 필요한 것이 브랜딩인가? 인터페이스 디자인인가? 일러스트레이션인가? 아니면, 구성인가? 어떤 사업을 진행하고 있는가? 편집인가? 당신은 카탈로그 디자인이 필요한 소매상인가? 모바일 환경에 대응해야 한다는 점도 잊지 마라. 단언컨대, 당신은 모바일 환경에도 대응해야 한다. (어제 이후로 좋은 시절은 다 지나갔다)

이 훈련의 결과는 다음과 같을 것이다. “우리는 모바일 경험이 있는 디자이너가 필요합니다. 물론 복잡한 데이터에 관한 브랜딩과 인터페이스 디자인도 할 줄 알아야 합니다.” 이제 더 이상 이런 목록은 작성하지 마라. 디자이너한테 돈만 더 많이 줘야 한다. 그리고 이 훈련을 통해 당신은 디자이너가 한 명 이상 필요하다는 사실을 깨닫게 된다. 일러스트가 가능하고 반응형 웹 사이트를 만들 수 있으며 애자일 작업 방식을 선호하는 유능한 디자이너는 외계인이다.
자. 이제 디자이너를 한 번 찾아보자!

최근 몇 년 동안, 파노라마 배경 이미지^{Panoramic Background Images}는 웹 디자인의 대세로 자리 잡기 시작했습니다.

웹에는 이 기법을 아주 잘 이용한 인상적인 사례들로 가득합니다. 눈길을 사로잡는 랜딩 페이지^{Landing Pages}, 화려한 포트폴리오 사이트와 더불어 점점 대기업들도 자신들의 영향력을 나타내기 위해 어마어마한 크기의 배경 사진을 사용합니다.

한 장의 사진은 천 페이지 글만큼 가치가 있다

글로 표현된 자료보다 형상화된 이미지에서 훨씬 쉽게 정보를 기억하고 전달한다는 연구가 발표되고 있지만, 개발자들은 이 원칙을 언제 어떻게 웹 디자인에 적용할지 꾸준히 주목해야 합니다.

레티나-레디^{Retina-Ready[1]} 배경 화면이 로딩 시간과 더 나아가 사용자 경험^{User Experience}에 미치는 엄청난 영향을 과소평가하지 마세요. 보통 배경 이미지는 필요한 정보를 전달하기보다 시각적인 분위기를 연출하기 때문에 수많은 사용자의 편의성은 뒤로하고 페이지 용량만 늘어나게 하죠.

웹 퍼포먼스 투데이^{Web Performance Today}의 최신 보고는 다음과 같습니다.

온라인 쇼핑중 결제가 2초 지연되면 구매 포기율이 87%로 올라간다 ^{Source: WebPerformanceToday.com}

어때요? 화려한 겉치레에 비중을 두던 전략이 제대로 한 방 먹은것 같지 않나요?

물론 일부 이미지는 웹사이트에서 굉장히 인상적인 시각적 효과를 주기도 합니다. 그렇지만 특히 모바일 사용자를 중요하게 여기는 웹사이트에서는 이를 대체 할 수 있는 방법에 대해 고려해보아야 합니다.

첫 번째 유용한 팁은 제품이나 서비스를 잘 소개하는 짧은 문구를 선택하고, 눈길을 끄는 직관적인 이미지와 조합하는 것입니다. 구체적인 이미지가 목적을 훨씬 명확하게 전달하니까 두루뭉술한 이미지는 피하시고요.

특히 이미지의 느낌과 전달하고자 하는 메시지의 어조가 잘 어울리는지가 매우 중요합니다.

큰/파노라마 이미지를 사용할 때의 팁

큰 이미지를 사용할 경우는 이미지가 잘 압축^{Compression[2]}되는지 꼼꼼히 따져봐야 합니다. 압축은 사진의 주제와 별개의 문제지만, 사진의 특성 (구성 및 구도^Framing, 스타일링)과는 밀접한 관련이 있습니다. 대부분의 이미지는 다음과 같은 특성 중 적어도 한 가지를 가지게됩니다.

흐림 효과나 소프트 포커스^{Soft Focused[3]}를 사용한 이미지

사진 속 흐릿한 영역은 몽환적인 매력을 극대화할 뿐만 아니라 압축에도 아주 효과적입니다.

(이미지 제공: Gioia De Antoniis)

밤 촬영사진^{Night Shots}

대체로 어두운 영역이 넓은 이미지가 압축률이 좋습니다. 다음 사진은 대부분이 어둑어둑하지만 따뜻한 느낌과 색상이 캠핑, 바비큐, 캠프 파이어의 추억으로 우리를 인도합니다. 이내 두뇌는 이미지로 빼곡히 채워지죠.

(이미지 제공: Behan)

단색^{Flat Color}

절반 가까이 단색(파란 하늘)으로 채워진 아래 이미지는 압축에 아주 적절합니다.

(이미지 제공: Daniel Horacio Agostini)

위에서 본 각각의 이미지들은 또 다른 장점을 갖고 있습니다. 바로, 텍스트를 배치하기 좋은 여백이 넉넉하다는 거죠.

이제 어떤 이미지를 골라야 하는지 감이 잡히셨을 거예요. 그렇다면 텍스트와 이미지를 조화롭게 배치하는 가장 효과적인 방법이 무엇인지 알아봅시다. 어떤 텍스트를 선택해야 할까요? 어디에, 어떻게 넣어야 할까요? 역시 단순한 문제가 아닙니다.

1. 색상과 명암 대비^Contrasts를 이용해봅시다

다양한 필터^Filters나 오버레이^Overlay[4]를 사용해서 이미지를 어둡게 하고, 그 위에 밝은 텍스트를 겹치게 하는 것이 비교적 ‘명쾌한’ 방법처럼 여겨집니다. 하지만 그리 널리 사용되는 방법은 아니예요. 많은 디자이너는 색상 대비는 전혀 신경 쓰지 않은 채 그대로 사용하는 실수를 범하죠.

색상과 명암 대비가 잘 됐는지 확실히 하고 싶다면, 다음 내용을 잊지 마세요.

다음 이미지에서 꽃 위에 겹쳐진 텍스트를 한 눈으로 알아보기가 얼마나 어려운지 보이실 것입니다. 흰색 텍스트와 사진에서 가장 밝은 영역 사이의 대비는 쉽게 문자를 구분하지 못하도록 방해만 합니다. 누가봐도 좋지 않은 결과물이죠.

그렇다면 이미지를 조금 어둡게 바꿔볼게요. 훨씬 읽기 쉬워지지 않았나요?
CSS 필터는 최신 브라우저에서 이런 작업을 간단하게 할 수 있도록 도와줍니다. 버전이 낮은 브라우저를 사용하시는 분들은 루이스 라자리스^{Louis Lazaris}가 소개한 방법을 참고하시면 좋겠네요.

2. 크기와 위치를 바꿔봅시다

이미지의 색상과 대비를 조절하면 겹쳐진 텍스트와의 관계를 개선할 수 있습니다. 그리고 또 하나 중요한 사실은 텍스트 크기와 위치만으로도 그 자체의 가독성^{Readability[5]}을 높인다는 것이죠. 같은 이미지에서 텍스트 위치를 변경하는 것만으로도 그 가독성이 얼마나 향상되는지 한번 살펴봅시다.

위 이미지에서 텍스트 위치는(게다가 색상 선택마저 잘못했네요) 이미지의 렌더링을 방해합니다.

주변 이미지(땅바닥)와 비스름한 색상과 더불어 아래에 배치한 텍스트 구성은 보기에 좋지 않은 영향만 미칩니다.

텍스트를 사진 아래에서 위로 옮기기만 하더라도, 훨씬 읽기 쉽고 눈에 확 띄게 정리되는데 말이죠.

3. 심도^depth를 생각해봅시다

텍스트와 이미지를 결합할 때 염두에 두어야 할 세 번째 요소는 심도^{Field of depth[6]}입니다. 흐릿한 영역이 있는 사진을 고르면 압축 시에 장점이 있다는 것을 이미 배웠습니다. 이런 이미지는 텍스트를 더욱 쉽게 읽을 수 있도록 부드러운 배경을 제공하죠.

흐리게 처리된 영역은 초점이 맞춰진 부분에 비해 상대적으로 ‘밋밋한’ 색상처럼 보일 것이고, 이는 자연스럽게 텍스트 색상과 대비됩니다.

바로 아래 사진에서는 텍스트가 이미지 초점이 맞춰진 부분 위에 겹쳐졌습니다. 예상대로 효과적인 방법은 아니죠.

텍스트 위치를 초점에서 벗어난^out-of-focus 왼쪽으로 살짝만 옮겨도 훨씬 나아집니다. 이미지를 전혀 수정하지 않고 메시지를 강조할 수 있죠.

세 가지 방법을 예시를 통해 확인했어요. 마지막으로 세 가지 팁을 더 알려드릴게요.

결론

앞서 말했듯이, 그냥 아무 사진 위에 텍스트를 평범하게 배치하면 그럴싸할 것이라는 실수는 하지 마세요. 텍스트 위치까지 통일시키려면, 사진의 세세한 부분까지 함께 통일시켜야 합니다.

사용하고자 하는 이미지, 사용자가 잘 읽을 수 있는 텍스트, 전달하고자 하는 메시지. 이 3박자 모두 고려해서 가능한 최고의 해답을 연구하는 것이 우리의 몫입니다.

기억하세요. 연구가 선행될 때 성공이 따라옵니다.

아나리타 트란피치 Annarita Tranfici

나폴리 대학에서 유럽 언어, 문화, 그리고 문학 학사를 취득했습니다. 그래픽과 웹 디자인에 열정이 가득하고요, 몇 년 동안 많은 기업에서 진행한 다양한 프로젝트와 디자인에 참여했어요. 그리고 오데로 사용자 그룹^{Audero User Group}의 작가이기도 하고요. 전문 분야는 HTML, CSS, 웹 디자인, 포토샵 입니다.

스매싱 매거진Smashing Magazine

스매싱 북 2

사용자를 이해할수록 견고해지는 웹 디자인심리학과 인문학이 웹 디자인에 스며들다

책 구매하기책 미리보기책 상세설명