참고 사이트 찾는 법 — 영감·분석·카피 사이의 경계
참고 사이트는 디자인의 출발점입니다. 다만 영감 vs 카피 사이의 경계가 중요해요. 어디서 찾고·어떻게 분석하고·어디까지 따라할 수 있는지 정리.
영감 vs 카피 — 경계
OK (영감)
- 레이아웃 패턴 (3컬럼·Hero·CTA 배치)
- 색 조합의 분위기 (정확한 hex X)
- 타이포 위계
- 사용자 흐름
NG (카피)
- 이미지·동영상 직접 사용
- 텍스트·카피 그대로 복사
- 픽셀 단위 동일 디자인
- 로고·브랜드 요소 활용
💡 **“왜 이렇게 만들었나”**를 이해하면 영감. 시각만 모방하면 카피.
참고 사이트 — 디렉토리 7곳
1. Awwwards (awwwards.com)
수상 사이트 큐레이션. 최신 트렌드.
- 장점: 최고 수준 사이트
- 단점: 너무 화려·실용성 ↓
- 추천: 트렌드 파악·시각 영감
2. Site Inspire (siteinspire.com)
깔끔한 비즈니스 사이트 모음.
- 장점: 실용·고급
- 카테고리·색·산업별 필터
3. Land-book (land-book.com)
랜딩 페이지 전문.
- 장점: 전환 중심 사이트
- 추천: SaaS·개인 사업
4. Httpster (httpster.net)
자유로운·창의적 사이트.
- 추천: 디자인·창작 분야
5. CSS Design Awards (cssdesignawards.com)
기술적 우수성 + 디자인.
6. Mobbin (mobbin.com)
모바일 앱·웹 UI 모음. 디테일 비교에 강함.
- 옷·뱅킹·O2O 등 카테고리
7. Dribbble·Behance
디자이너 시안 + 실제 사이트.
- 영감 풍부
- 다만 실제 작동하는 사이트가 아닌 시안 多
업종별 참고 — 한국 중심
한국 비즈니스 사이트 찾기
- 네이버 검색: “기업 홈페이지 디자인” + 업종
- 구글: site:co.kr + 업종
- 인스타그램: 디자인 에이전시 작품
- 포트폴리오 사이트: 디자이너 개인 포트폴리오
글로벌 사이트 — 영감만
한국 vs 해외 디자인 코드 다름:
- 한국: 정보 밀도 ↑·텍스트 多
- 해외: 미니멀·시각 多
해외 참고 시 한국 사용자에 맞게 조정.
참고 사이트 분석 — 5가지 항목
발견 사이트를 단순히 “예쁘다” X. 분석:
1. 첫 화면 (Hero)
- 어떤 메시지가 가장 먼저?
- 시각 요소는?
- CTA는 어디·뭐라고?
2. 정보 구조
- 메뉴 몇 개?
- 어떤 순서로 펼침?
- 페이지 깊이?
3. 색·폰트
- 주조색 비율
- 폰트 (한·영 어느 거 쓰나)
- 헤딩 vs 본문 크기 차이
4. 모바일
폰으로 같은 사이트 보고:
- 어떻게 변하나
- 헤더·메뉴 모바일 디자인
5. 인터랙션
- 스크롤 효과
- 호버 효과
- 페이지 전환
- 폼 디자인
카피 자제·영감 활용 — 워크플로우
1단계: 참고 사이트 수집
10~20개 사이트 북마크. 다양한 업종·시기.
2단계: 공통 패턴 파악
“5곳에서 비슷한 패턴이 보이면 = 검증된 패턴”.
흔한 예:
- 위 Hero + 아래 3특징 + 사례 + CTA
- 헤더 우측 강조 버튼
- 푸터 4컬럼
3단계: 본인 사이트에 맞춰 변형
- 같은 구조 + 본인 콘텐츠
- 같은 색 비율 + 본인 색
- 같은 폰트 위계 + 본인 폰트
→ 결과: 익숙하면서 본인 것.
트렌드 — 2025~2026 흐름
영감용·맹목적 따라가지 말 것.
현재 인기 패턴
- 미니멀 + 큰 타이포 (헤딩 80px+)
- 부드러운 그라데이션 배경
- 둥근 모서리 (border-radius 16~32px)
- 다크 모드 옵션
- 3D·일러스트레이션 차별화
- 마이크로 인터랙션 (호버·스크롤)
거의 사라진 패턴
- 카루셀 (반응 ↓)
- 큰 슬라이드 비주얼섹션
- 너무 많은 깊은 카드
사이트 분석 도구
비주얼·코드 분석
- Chrome DevTools: 우클릭 > 검사 → CSS·구조 확인
- WhatRuns (Chrome 확장): 사이트의 기술 스택 (테마·플러그인·CMS)
- BuiltWith: 사이트가 쓰는 기술 전체
디자인 도구
- Visbug (Chrome 확장): 페이지 요소 측정·편집
- Page Ruler: 픽셀 측정
- ColorZilla: 색 추출
성능 분석
- PageSpeed Insights: 속도
- GTmetrix: 폭포·로드 시간
참고 사이트로 클라이언트 합의
좋은 합의 방법
3~5개 참고 사이트 + 각각:
- 좋은 점 (이 부분이 좋다)
- 피하고 싶은 점
→ 디자이너가 정확히 알 수 있음.
나쁜 합의 방법
“이 사이트 그대로 만들어주세요” → 카피 + 본인 사이트 맞춤성 ↓.
⚠️ 자주 하는 실수
- 트렌드만 따라: 본인 업종·사용자 무시
- 외국 사이트 그대로: 한국 사용자에 안 맞음
- 너무 많은 참고: 한 사이트가 짬뽕
- 시각만 보고 구조 무시: 사용성 ↓
- 무단 카피: 저작권 문제 + 차별성 ↓
❓ FAQ
Q. 참고 사이트는 몇 개가 적정? A. 한 프로젝트당 5~10개. 너무 많으면 결정 ↓, 너무 적으면 단편적.
Q. 디자이너에게 참고 사이트 줘도 되나요? A. 권장. 다만 그대로 만들어주세요 ❌, 이 부분이 좋다·왜 O.
Q. AI로 사이트 디자인 생성? A. Galileo·v0.dev 등 영감용. 그대로 사용 X. 본인 맞춤화 필수.
Q. 옛 사이트가 트렌드 따라잡으려면? A. 1년 1회 점검. 변경 시 SEO 영향 고려.
Q. 본인이 디자이너 아닌데 디자인 결정 어떻게? A. 참고 사이트 + 디자이너 의뢰 (외주). 본인이 의사결정·디자이너가 실행.