참고 사이트 찾는 법 — 영감·분석·카피 사이의 경계

참고 사이트는 디자인의 출발점입니다. 다만 영감 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단계: 본인 사이트에 맞춰 변형

• 같은 구조 + 본인 콘텐츠
• 같은 색 비율 + 본인 색
• 같은 폰트 위계 + 본인 폰트

→ 결과: 익숙하면서 본인 것.

>

트렌드 — 최근 자주 보이는 흐름

>

영감용·맹목적 따라가지 말 것.

현재 인기 패턴

• 미니멀 + 큰 타이포 (헤딩 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. 참고 사이트 + 디자이너 의뢰 (외주). 본인이 의사결정·디자이너가 실행.

관련 가이드

• 디자인 시스템·토큰
• 컬러·타이포 잡는 법
• 업종별 디자인 패턴
• 의뢰 전 요구사항 정리
• 기업 홈페이지 제작 가이드 — 페이지 구성과 콘텐츠 설계 기준