홈페이지 디자인 레퍼런스,
제대로 찾고 제대로 전달하는 법
안녕하세요. 브랜드 홈페이지 제작 스튜디오, 스러운스튜디오입니다.
"예쁘게 해주세요." 홈페이지 제작 업체에 처음 문의할 때, 정말 많은 분들이 이렇게 말씀하십니다. 업체는 다시 묻죠. "어떤 느낌이 좋으세요?" 그럼 또 막막해집니다. "음... 깔끔하고, 세련되고, 그런 거요?"
예쁘다는 기준은 사람마다 다릅니다. 업체가 생각한 예쁜 디자인과 의뢰하신 분이 원한 디자인이 다를 수 있습니다. 그래서 필요한 게 홈페이지 디자인 레퍼런스입니다. 그런데 레퍼런스를 찾는 것과, 그것을 제대로 전달하는 것은 다릅니다. 그리고 레퍼런스를 잘 전달하는 것과, 우리 브랜드에 맞는 방향으로 해석하는 것도 또 다릅니다.
오늘은 홈페이지 레퍼런스를 찾는 법부터 제대로 전달하는 법, 그리고 단순히 예쁜 사이트를 따라 하는 것이 아니라 우리 브랜드에 맞는 방향으로 활용하는 법까지 정리해 드립니다.
이 글을 다 읽으면 알 수 있어요
✏️ 홈페이지 디자인 레퍼런스를 찾는 5단계
✏️ 업종별 참고사이트 추천 리스트
✏️ 레퍼런스 제대로 전달하는 법 vs 잘못된 방법
✏️ 레퍼런스를 브랜드 방향으로 해석하는 법
1. 레퍼런스가 없으면 생기는 일
실제로 있었던 상황입니다.
- 대표님: 전체적으로 고급스럽게 해주세요.
- 홈페이지 제작사: 네, 알겠습니다. → 다크 컬러, 미니멀 시안 전달
- 대표님: 너무 어두운데요. 밝고 고급스럽게...
- 홈페이지 제작사: …
대표님이 원한 건 밝은 화이트 베이스에 골드 포인트가 들어간 고급스러움 이었습니다. 말로는 설명이 되지 않았던 것입니다.
홈페이지 디자인 레퍼런스가 주는 3가지 효과
소통 시간 단축: 이런 느낌 한마디로 방향이 잡힙니다
기대치 일치: 시안을 받았을 때 "이게 아닌데..."가 줄어듭니다
수정 횟수 감소: 방향이 맞으면 수정이 줄고 일정이 빨라집니다
2. 홈페이지 레퍼런스 찾는 법: 5단계
1단계: 구글·네이버 검색
검색어: 우리 업종 + 홈페이지 또는 우리 업종 + 웹사이트
예시: 법무법인 홈페이지, 인테리어 브랜드 웹사이트, 스타트업 홈페이지
💡 팁: 경쟁사 홈페이지를 먼저 찾아보세요. 잘된 점, 아쉬운 점을 메모해 두면 방향을 잡는 데 큰 도움이 됩니다.
2단계: 전문 갤러리 사이트
잘 만들어진 웹사이트만 모아둔 전문 갤러리 사이트를 활용하세요.
[해외 레퍼런스 사이트 예시]
Awwwards.com — 세계 최고 수준의 웹 디자인 수상작 모음
Behance.net — 디자이너들의 작업물 포트폴리오
Dribbble.com — UI·UX 디자인 레퍼런스
Siteinspire.com — 미니멀하고 세련된 사이트 큐레이션
[국내 레퍼런스 예시]
국내 갤러리:
RWDB.kr — 국내 최대 웹 디자인 갤러리, 업종별 필터 제공
Webdesignclip.com — 국내외 웹사이트 디자인 클립
3단계: 업종별 필터링
레퍼런스 사이트에는 업종별 필터가 있습니다. 우리 업종과 유사한 카테고리만 골라서 보세요. 전체를 보면 오히려 방향이 흐릿해집니다.
4단계: 3~5개만 선정
너무 많이 보내면 업체도 혼란스럽습니다. 3~5개가 적당합니다.
- 우리 업종 또는 분위기가 비슷한 사이트
- 전체적인 톤이 마음에 드는 사이트
- 특정 섹션이나 기능이 마음에 드는 사이트
5단계: 어떤 부분이 왜 좋은지 메모
사이트 주소만 보내지 마세요. 어떤 부분이 왜 마음에 드는지를 함께 전달해야 합니다.
좋은 예시: 이 사이트의 메인 첫 화면 레이아웃이 마음에 들어요. 큰 이미지 위에 짧은 카피만 있는 구성이 인상적입니다.
나쁜 예시: 이 사이트처럼 만들어주세요. (뭐가 좋은지 알 수 없습니다)
3. 업종별 홈페이지 레퍼런스 추천
| 업종 | 참고 사이트 | 특징 |
| IT·스타트업 | 토스 (toss.im), 당근 (daangn.com) | 미니멀, 직관적, 메시지 중심 |
| B2B·제조 | 삼성전자 (samsung.com/kr), SK (sk.com) | 신뢰감, 프리미엄, 정보 전달 명확 |
| 의료·헬스케어 | 아산병원 (amc.seoul.kr), 세브란스 (severance.healthcare) | 환자 중심, 신뢰감, 따뜻함 |
| 인테리어·건설 | 오늘의집 (ohou.se), Awwwards 인테리어 카테고리 | 비주얼 중심, 감성적, 이미지 강조 |
| 교육·아카데미 | 패스트캠퍼스 (fastcampus.co.kr), 클래스101 (class101.net) | 젊고 역동적, 명확한 CTA |
| 법률·노무·컨설팅 | 구글에서 "법무법인 홈페이지" 검색 후 실제 사례 참고 | 신뢰·권위·전문성 강조 |
| 뷰티·패션 | 아모레퍼시픽 (apgroup.com), 29CM (29cm.co.kr) | 감각적, 트렌디, 비주얼 임팩트 |
4. 레퍼런스 전달하는 법 : 좋은 방법 vs 잘못된 방법
| 방법 | 좋은 예시 | 잘못된 예시 |
| 느낌 전달 | 이 사이트처럼 미니멀하고 텍스트 중심으로 해주세요 | 이 사이트처럼 해주세요 |
| 부분 참고 | 이 사이트의 메인 비주얼 레이아웃만 참고해주세요 | 10개 사이트 다 참고해주세요 |
| 조합 요청 | A 사이트 분위기 + B 사이트 정보 구조 조합해주세요 | 알아서 잘 해주세요 |
| 복사 요청 | 참고는 OK, 느낌만 차용 | 이거 똑같이 만들어주세요(저작권 문제) |
5. 레퍼런스를 우리 브랜드 방향으로 해석하는 법
이 부분이 핵심입니다. 예쁜 사이트를 찾는 것과, 우리 브랜드에 맞는 방향을 잡는 것은 다릅니다.
많은 분들이 레퍼런스를 보낼 때 "이게 예뻐서"를 이유로 드십니다. 그런데 예쁜 이유가 반드시 우리 브랜드에 맞는다는 의미는 아닙니다. 레퍼런스를 고를 때 이 세 가지를 함께 생각해보세요.
① 우리 고객이 이 사이트를 보면 어떤 느낌을 받을까?
내가 예쁘다고 느끼는 것과, 우리 고객이 신뢰를 느끼는 것은 다를 수 있습니다. B2B 제조사 거래처 담당자와 개인 소비자가 같은 디자인에서 다른 반응을 보이는 이유입니다.
② 이 사이트의 어떤 요소가 경쟁사와 다른 인상을 주는가?
같은 업종 경쟁사들이 쓰는 디자인 문법이 있습니다. 그것을 그대로 따라가면 차별점이 없습니다. 경쟁사와 다른 인상을 줄 수 있는 요소가 레퍼런스에 있는지 확인하세요.
③ 우리 브랜드가 전달하고 싶은 핵심 메시지와 맞는가?
"신뢰를 주고 싶다", "감성적인 브랜드로 보이고 싶다", "전문성을 강조하고 싶다" — 이 메시지와 레퍼런스의 분위기가 일치하는지 확인하세요.
스러운스튜디오는 레퍼런스를 받으면 이 세 가지 질문을 먼저 합니다. 그리고 레퍼런스의 느낌만 차용하되, 그 느낌이 우리 브랜드 차별점과 연결될 수 있는 방향으로 해석해서 기획에 반영합니다.
자주 묻는 질문
Q. 레퍼런스가 하나도 없어도 의뢰가 가능한가요?+
Q. 레퍼런스 사이트를 많이 보내도 되나요?+
Q. 경쟁사 사이트를 레퍼런스로 보내면 안 되나요?+
Q. 해외 사이트를 레퍼런스로 보내도 되나요?+
Q. 레퍼런스와 완전히 다른 결과물이 나왔는데, 어떻게 해야 하나요?+
마무리하며
오늘은 홈페이지 디자인 레퍼런스를 찾는 법, 전달하는 법, 그리고 브랜드 방향으로 해석하는 법까지 정리해드렸습니다.
핵심을 다시 정리하면, 레퍼런스는 3~5개만, 어떤 부분이 왜 좋은지 이유와 함께, 우리 브랜드가 전달하고 싶은 메시지와 맞는지 먼저 확인하고 전달하는 것이 중요합니다.
레퍼런스는 "이렇게 만들어달라"는 주문서가 아닙니다. 이런 방향에서 시작해달라는 나침반입니다. 잘 전달된 레퍼런스가 우리 브랜드에 맞는 홈페이지를 만드는 출발점이 됩니다.
