좋아 보이는 레퍼런스의 절반은,
화면 밖에서 왔습니다

결론부터 말씀드리면 — 마음에 든 레퍼런스를 그대로 따라 만들었는데 같은 느낌이 안 나는 이유는 대개 실력 차이가 아니라 재료 차이입니다. 그 화면을 성립시킨 사진·실적·이름값은 화면 안에 있는 게 아니라 그 브랜드가 그동안 쌓아 둔 것이고, 그건 복사되지 않습니다. 레퍼런스에서 실제로 옮겨지는 것은 순서와 비중입니다.

복사한 건 결과물이고, 안 따라온 건 조건입니다

레퍼런스로 고르게 되는 사이트에는 공통점이 있습니다. 이미 자리를 잡은 브랜드의 사이트라는 점입니다. 잘 안 되는 브랜드의 사이트를 굳이 저장해 두는 사람은 없으니 당연한 일입니다. 그런데 이 당연한 일이 함정입니다.

그런 사이트의 첫 화면은 대체로 조용합니다. 큰 사진 한 장, 짧은 문장 하나, 버튼 하나. 설명이 거의 없습니다. 이 화면을 보고 절제된 자신감이라고 읽으면 절반만 맞습니다. 그 화면이 성립하는 이유는 설명할 필요가 없는 상태이기 때문입니다. 방문자가 이미 그 이름을 알고 들어왔거나, 최소한 어디서 들어 본 이름입니다.

이름을 아직 아무도 모르는 브랜드가 같은 화면을 만들면 결과가 정반대가 됩니다. 방문자는 여기가 무엇을 하는 곳인지 모른 채 화면을 닫습니다. 같은 구조인데 한쪽에서는 세련되게 읽히고 다른 쪽에서는 불친절하게 읽히는 겁니다. 화면이 달라서가 아니라 화면 앞에 선 사람의 사전 지식이 달라서입니다.

재료 쪽도 마찬가지입니다. 레퍼런스에서 가장 눈에 들어온 부분이 사진이었다면, 그 자리는 사진이 설명을 대신하기로 한 자리입니다. 스튜디오에서 찍은 제품 사진, 현장에서 찍힌 사람들, 실제로 완성된 공간. 그 자리에 급하게 구한 이미지를 같은 크기로 넣으면 자리가 넓어진 만큼 아쉬움도 같이 커집니다. 사진이 문단 셋을 이기는 자리라는 이야기는 히어로 사진 고르는 기준에 따로 적었는데, 그 자리는 이길 사진이 있을 때만 그렇습니다.

옮겨지는 것과 끝내 안 옮겨지는 것

그래서 레퍼런스를 볼 때는 옮길 수 있는 것과 없는 것을 미리 갈라 두는 편이 낫습니다. 경계는 생각보다 선명합니다.

옮겨지는 쪽은 순서와 비중입니다. 무엇이 맨 위에 오는가, 어떤 정보가 가장 크게 들어가는가, 방문자가 결정하기 전에 무엇을 몇 번 만나는가, 버튼이 어느 지점에 다시 나타나는가. 이건 그 브랜드의 자산이 아니라 그 업종의 방문자가 결정하는 경로에 가깝습니다. 남의 것을 뺏어 오는 게 아니라, 먼저 정리해 둔 경로를 참고하는 겁니다. 이걸 뼈대 이식이라고 부릅니다.

안 옮겨지는 쪽은 그 화면을 채운 재료입니다. 사진의 양과 질, 사례 수, 후기, 다뤄 본 이름들, 그리고 무엇보다 이름값. 여기에 하나 더 있습니다. 문장입니다. 문장은 기술적으로는 복사되지만, 복사하는 순간 우리 화면에서 남의 브랜드를 설명하게 됩니다. 실적이 아직 없을 때 화면을 지탱하는 재료가 무엇인지는 런칭 전에 먼저 정할 것에서 다뤘습니다.

따라 하기는 이 둘을 구분하지 않고 보이는 것 전부를 가져오려는 시도입니다. 그런데 보이는 것 중 눈에 잘 띄는 쪽은 대개 재료입니다. 그래서 따라 하기는 재료부터 복사하다가 재료가 없는 지점에서 멈추고, 그 자리를 비슷한 무언가로 메꾸게 됩니다. 급이 안 맞는다는 인상이 여기서 생깁니다. 주장하는 급과 화면에 남은 마감이 어긋나는 상태를 왜 싸 보이는가에서 다뤘는데, 레퍼런스를 재료째 복사하면 그 어긋남이 한 화면 안에서 생깁니다.

레퍼런스를 건네는 법

발주하는 쪽에서 할 수 있는 형태로 적습니다. 이 다섯 가지를 하면 레퍼런스가 취향 공유에서 지시로 바뀝니다.

1. 사이트가 아니라 구간을 줍니다. 주소 세 개를 보내면 받는 쪽은 무엇을 가져오라는 건지 알 수 없습니다. 색인지, 순서인지, 글꼴인지, 그 브랜드의 분위기인지. 좋았던 자리를 화면 단위로 잘라서 주시면 됩니다. 스크롤하다 멈춘 지점에서 캡처 한 장이면 충분합니다. 사이트 하나에서 좋았던 구간이 하나뿐인 경우가 대부분이고, 그게 정상입니다.
2. 왜 좋았는지 한 줄을 붙입니다. 단, 판별법이 있습니다. 그 한 줄을 다른 사이트 절반에 붙여도 말이 되면 정보가 없는 문장입니다. "깔끔해서", "고급스러워서", "세련돼서"가 전부 여기에 해당합니다. 대신 이렇게 적으면 옮길 수 있는 지시가 됩니다. "가격을 여기서 바로 보여 주는 게 좋았다", "설명을 읽기 전에 실물 사진이 먼저 나온 게 좋았다", "문의 버튼이 계속 따라다니지 않아서 편했다."
3. 재료를 대조합니다. 그 구간이 쓰고 있는 재료를 적어 보고, 우리가 가진 것과 없는 것을 나눕니다. 사진 몇 장, 사례 몇 건, 후기, 로고들, 숫자. 없는 것이 나오면 그 자리에서 결정하셔야 합니다. 만들 것인가, 다른 재료로 바꿀 것인가, 그 구간을 포기할 것인가. 이 결정을 미루면 제작 중간에 임시 이미지와 임시 문구로 채워지고, 나중에 진짜 재료가 들어오면서 분량이 안 맞아 디자인을 두 번 하게 됩니다. 재료 재고를 먼저 세는 이야기는 시안이 안 나오는 구간에 있습니다.
4. 우리 업종 밖에서도 두어 개 고릅니다. 같은 업종 레퍼런스만 모으면 그 업종의 관행을 모으게 됩니다. 관행은 보통 이유가 있어서 참고할 값이 있지만, 그것만 보면 경쟁사와 같은 구조에 이름만 바꾼 사이트가 나옵니다. 방문자가 여러 후보를 나란히 열어 놓고 비교하는 중이라면, 구조가 같다는 건 비교할 거리가 없다는 뜻이 됩니다. 결정 경로가 비슷한 다른 업종에서 하나둘 가져와 보시는 편이 낫습니다.
5. 싫은 레퍼런스도 같이 줍니다. 좋은 것보다 경계가 선명하게 잡힙니다. "이건 우리랑 안 맞는다"에 이유를 한 줄 붙이면 그게 기준이 됩니다. 특히 경쟁사 사이트 중 싫은 것이 값이 큽니다. 왜 싫은지를 말하다 보면 우리가 무엇을 다르게 하는 곳인지가 같이 나옵니다.

이렇게 정리해서 넘기면 검토 자리의 질문도 바뀝니다. "이 레퍼런스랑 비슷한가" 대신 "이 순서로 읽히는가"를 묻게 됩니다. 시안 검토가 마감 이야기부터 시작되는 이유와 그걸 나누는 방법은 확정을 두 번으로 나누기에 적어 뒀습니다.

반대 방향의 실수

레퍼런스를 안 주는 게 답은 아닙니다. 오히려 흔한 문제 쪽입니다. 기준을 안 주면 그 자리를 업체의 최근 취향이 채웁니다. 그러고 나서 시안을 보고 "뭔가 아닌데"라고 말하게 되는데, 그 말은 옮길 수 없는 말이라 다음 시안도 같은 자리를 맴돕니다. 취향과 기준을 나누는 이야기는 내 눈과 기준에 따로 있습니다.

반대쪽 극단도 있습니다. 레퍼런스를 열 개 스무 개 모아서 "이것들 좋은 점만 섞어 주세요"라고 넘기는 경우입니다. 각각의 좋은 점은 그 사이트의 나머지 부분이 받쳐 줘서 좋은 것이라, 떼어다 붙이면 서로 싸웁니다. 결과는 한 화면에 성격이 다른 구간이 줄줄이 붙은 사이트입니다. 그리고 이건 첫 화면에 넣을 것이 계속 늘어나는 상태이기도 해서, 실은 1순위가 아직 안 정해진 문제에 가깝습니다.

마지막으로 하나 더. 리뉴얼을 하면서 레퍼런스를 새로 모으는 경우, 바꾸려는 층과 레퍼런스가 가리키는 층이 다를 수 있습니다. 문제가 구조에 있는데 색과 사진이 좋은 레퍼런스만 모으면, 끝나고 나서 이전과 같은 느낌이 납니다. 같은 층만 반복해서 갈아 끼우는 경로를 리뉴얼을 해도 같은 이유에서 다뤘습니다.

레퍼런스를 넘기기 전에 확인해 보세요

제작을 앞두고 계시든 이미 자료를 정리하는 중이든 같은 목록입니다.

• 레퍼런스마다 좋았던 구간이 화면 단위로 표시되어 있는가?
• 왜 좋은지 적은 한 줄이 다른 사이트에는 안 붙는 문장인가?
• 그 구간이 쓰는 재료 중 우리에게 없는 것을 적어 봤는가?
• 없는 재료에 대해 만들지·바꿀지·뺄지가 정해져 있는가?
• 고른 레퍼런스가 전부 같은 업종이거나, 전부 이름이 알려진 브랜드이지 않은가?

마지막 줄이 걸린다면 한 가지만 더 해 보시면 됩니다. 그 레퍼런스에서 로고와 브랜드 이름을 가리고 첫 화면을 다시 읽어 보는 겁니다. 이름을 가려도 무엇을 하는 곳인지 읽히면 그 화면은 구조로 서 있는 겁니다. 이름을 가리는 순간 무슨 말인지 모르겠다면, 그 화면은 이름값으로 서 있던 것이고 우리가 지금 가져올 수 있는 화면이 아닙니다.