홈페이지를 의뢰하거나 직접 만들 때, 원하는 느낌을 말로 설명하기는 생각보다 어렵습니다. 이럴 때 잘 만든 예시, 곧 레퍼런스 몇 개가 긴 설명을 대신합니다. 문제는 어디서 찾고 무엇을 보고 어디까지 참고해도 되는가입니다.
레퍼런스는 어디서 찾나
가장 가까운 곳은 같은 업종의 사이트들입니다. 지역과 업종으로 검색해 상위에 나오는 곳들을 둘러보세요. 더 넓게 보고 싶다면 Awwwards, Behance, Pinterest 같은 해외 디자인 모음 사이트와 국내 제작사들이 공개한 포트폴리오 페이지가 유용합니다. 다만 수상작 위주의 사이트는 보기엔 화려해도 소상공인 사이트의 목적과는 거리가 있을 수 있으니 감탄용과 적용용을 구분해서 보세요.
무엇을 봐야 하나
겉모습만 훑으면 남는 게 없습니다. 첫 화면에서 무엇을 하는 곳인지 몇 초 만에 파악되는지, 메뉴 구성과 페이지 순서가 어떤지, 전화·예약 버튼이 어디에 있는지, 모바일에서는 어떻게 바뀌는지를 보세요. 그리고 마음에 든 이유를 사진이 좋다, 글꼴이 단정하다, 첫 문장이 명확하다처럼 구체적인 말로 적어두세요. 이 메모가 제작사와 소통할 때 가장 좋은 자료가 됩니다.
참고와 베끼기의 경계, 저작권
여기가 가장 중요한 대목입니다. 다른 사이트의 사진, 문구, 로고, 일러스트를 그대로 가져다 쓰는 것은 저작권 침해이며 법적 분쟁과 배상으로 이어질 수 있습니다. 디자인을 통째로 똑같이 만드는 것도 분쟁의 소지가 있고 무엇보다 손님이 알아봅니다. 참고해도 되는 것은 구조와 아이디어의 차원입니다. 첫 화면에 대표 사진을 크게 두는 방식, 후기를 중간에 배치하는 구성 같은 것들이죠. 반대로 콘텐츠 자체, 곧 글과 이미지와 상표는 반드시 우리 것으로 채워야 합니다. 무료 이미지도 사이트마다 이용 조건이 다르니 상업적 사용 가능 여부를 확인하고 쓰세요.
레퍼런스를 전달하는 요령
제작사에 전달할 때는 3~5개면 충분합니다. 사이트마다 어느 부분이 왜 좋은지 한 줄씩 붙이고 반대로 싫은 예시도 한두 개 알려주면 결과물의 방향이 훨씬 정확해집니다. 이것도 저것도 다 좋다는 말보다 이 사이트의 첫 화면과 저 사이트의 메뉴 구성이라는 말이 백 배 유용합니다.
찾고, 보고, 지킬 것
동종 업계 사이트와 디자인 모음 사이트를 돌 때는 감탄용과 적용용을 구분하세요. 볼 것은 겉모습이 아니라 구조와 동선입니다. 좋은 이유를 구체적인 말로 메모해 두어야 나중에 쓸모가 있습니다. 구조는 참고해도 되지만 사진과 문구, 로고를 가져오는 것은 저작권 침해입니다. NOAH는 21개 업종의 레퍼런스를 실제 작동하는 페이지로 공개하고 있어 우리 업종의 예시를 직접 클릭해 보며 고를 수 있습니다.