홈페이지 디자인 레퍼런스는 마음에 드는 사이트 링크만 보내기보다, 그 사이트의 분위기와 정보 구성과 기능 중 무엇이 좋은지 나눠 적어 전달하는 편이 좋습니다. 같은 사이트를 보고도 고객은 색감을, 제작자는 메뉴 구성을 떠올릴 수 있기 때문입니다.
레퍼런스는 완성본의 정답이 아니라 원하는 방향을 설명하는 재료입니다. 무엇이 좋은지 구체적으로 적을수록 디자인 방향을 맞추기 쉽고, 기능처럼 제작 범위와 비용에 영향을 주는 부분도 미리 드러납니다.
링크만 보내면 왜 오해가 생기나요?
"이 사이트처럼 해 주세요"라는 말에는 여러 뜻이 섞여 있습니다. 차분한 색감이 좋다는 뜻일 수도, 첫 화면에 사진이 크게 들어간 배치가 좋다는 뜻일 수도, 화면 안에서 바로 예약되는 기능이 좋다는 뜻일 수도 있습니다.
제작하는 쪽은 이 중 무엇을 원하는지 추측해야 하고, 추측이 어긋나면 시안을 본 뒤에야 차이를 알게 됩니다. 처음부터 무엇이 좋은지 짚어 두면 이런 되돌림을 줄일 수 있습니다.
마음에 드는 점은 어떻게 나눠 적나요?
레퍼런스 사이트마다 아래 세 칸 중 어디에 해당하는지 한두 줄로 적어 보세요.
- 분위기: 색감, 글꼴, 사진의 느낌, 여백처럼 첫인상을 만드는 요소입니다. "흰 배경에 남색 글자, 사진은 밝고 자연광 느낌"처럼 눈에 보이는 대로 적습니다.
- 정보 구성: 메뉴 이름, 첫 화면에서 아래로 내려가는 순서, 서비스 소개 방식입니다. "첫 화면 다음에 바로 가격 안내가 나오는 순서"처럼 적습니다.
- 기능: 예약, 검색, 지도, 자동으로 넘어가는 화면처럼 방문자가 조작하는 동작입니다. 어느 화면에서 어떤 동작이 되는지 적습니다.
같은 사이트에서 세 칸을 모두 가져올 필요는 없습니다. 분위기는 A 사이트, 메뉴 순서는 B 사이트처럼 나눠 고르는 편이 오히려 원하는 모습을 정확히 보여 줍니다.
아래는 이해를 돕기 위한 가상의 메모이며, 실제 고객 사례가 아닙니다. 동네 베이커리 카페가 홈페이지를 준비한다고 가정한 예시입니다. 분위기는 A 사이트의 밝은 베이지 배경과 자연광 느낌의 빵 사진, 정보 구성은 B 사이트처럼 오늘의 메뉴 다음에 오시는 길이 나오는 순서, 기능은 주소를 누르면 지도 앱 길찾기가 열리는 점을 적었습니다. 피하고 싶은 점으로는 C 사이트의 자동으로 넘어가는 큰 사진과 작고 흐린 회색 글자를 적었습니다.
피하고 싶은 사이트도 알려 줘야 하나요?
알려 주시면 도움이 됩니다. 좋아하는 것보다 싫어하는 것이 더 분명한 경우가 많고, "글자가 너무 작다", "움직이는 효과가 많아 정신없다"처럼 피하고 싶은 이유는 디자인 방향을 정할 때 바로 쓸 수 있는 기준이 됩니다.
뉴클리어웹 제작 안내에서도 상담 전에 마음에 드는 디자인과 함께 피하고 싶은 표현을 알려 달라고 안내합니다. 이유가 한 줄이라도 붙어 있으면 충분합니다.
레퍼런스를 그대로 따라 만들면 안 되나요?
레퍼런스는 방향을 맞추는 데 쓰고, 화면을 그대로 옮기는 기준으로 쓰지 않는 편이 안전합니다. 다른 사이트의 사진, 문장, 로고, 그림은 그 사이트가 권리를 가진 자료이므로 사용 권한이 확인되지 않았다면 가져오지 않습니다. 우리 홈페이지에는 직접 가진 자료나 사용 권한이 확인된 자료를 씁니다.
업종과 방문자가 다르다는 점도 있습니다. 다른 회사의 첫 화면 순서가 그 회사 방문자에게 맞았더라도, 우리 방문자가 먼저 궁금해하는 내용은 다를 수 있습니다. 레퍼런스에서 가져올 것은 느낌과 원리이고, 문장과 순서는 우리 사업 정보로 다시 정리합니다.
보내기 전에는 다음 다섯 가지를 확인해 보세요.
- 사이트마다 분위기, 정보 구성, 기능 중 무엇이 좋은지 적었나요?
- 좋은 점을 한 줄이라도 문장으로 붙였나요?
- 피하고 싶은 사이트와 그 이유도 적었나요?
- 그 사이트의 사진, 문장, 로고를 가져다 쓰려는 것은 아닌가요?
- 마음에 드는 기능은 원하는 동작으로 적었나요?
마음에 드는 기능이 있으면 무엇을 확인해야 하나요?
기능 레퍼런스는 디자인 취향보다 제작 범위에 가깝습니다. 예약, 결제, 회원, 관리자 화면, 외부 서비스 연결은 화면을 꾸미는 일과 달리 따로 만들거나 연결해야 하고, 사용할 계정과 운영 비용이 생길 수 있습니다.
뉴클리어웹은 필요한 기능을 확인해 견적과 납품 범위에 명시하며, 관리자·예약·결제·외부 연결이 기본으로 모두 포함되는 것은 아니라고 안내합니다. 레퍼런스에서 기능이 마음에 들었다면 "이 화면의 예약 버튼처럼"보다 "방문자가 날짜를 골라 신청까지 마치는 것"처럼 원하는 동작을 적어 상담 때 범위를 함께 확인하세요.
뉴클리어웹 사이트 템플릿은 어떻게 활용하나요?
참고할 사이트가 떠오르지 않는다면 뉴클리어웹 사이트 템플릿에서 여러 디자인을 둘러보는 방법이 있습니다. 마음에 드는 디자인을 고른 뒤에도 위의 세 칸으로 무엇이 좋은지 나눠 적어 두면 상담이 빨라집니다. 템플릿은 참고용 디자인이며, 실제 제공 범위는 상담에서 구분해 안내합니다.
진행 과정에서는 구성과 원고를 정리한 뒤 핵심 화면에서 서체, 색상, 이미지와 필요한 모션을 먼저 확인하고, 방향을 맞춘 다음 나머지 화면으로 넓힙니다. 레퍼런스 메모는 이 디자인 방향 확인 단계에서 기준으로 쓸 수 있습니다. 자세한 순서는 제작 안내에서 볼 수 있습니다.
정리된 메모가 없어도 상담을 시작할 수 있습니다. 문의 방법은 무료 상담 신청하기 페이지에서 확인하시고, 전화 010-5611-8632로 연락하셔도 됩니다.
자주 묻는 질문
레퍼런스가 하나도 없으면 상담이 어렵나요?
어렵지 않습니다. 사업 내용과 방문자에게 먼저 전하고 싶은 내용을 알려 주시면 방향을 함께 정할 수 있습니다. 평소 자주 쓰는 앱이나 가게 간판처럼 홈페이지가 아닌 것에서 좋아하는 분위기를 말해 주셔도 참고가 됩니다.
같은 업종의 다른 회사 사이트를 레퍼런스로 줘도 되나요?
방문자가 무엇을 궁금해하는지 살펴보는 참고로는 쓸 수 있습니다. 다만 문장, 사진, 화면 배치를 비슷하게 옮기면 방문자가 두 회사를 구분하기 어려워지고 권리 문제도 생길 수 있으니, 차이를 보여 줄 우리만의 정보로 다시 구성합니다.
레퍼런스와 똑같은 결과가 나오나요?
똑같이 만드는 것을 목표로 하지 않습니다. 레퍼런스에서 좋다고 적은 분위기와 구성을 바탕으로 우리 사업 정보와 자료에 맞춰 디자인하며, 핵심 화면을 확인하면서 방향을 맞춰 갑니다.
