웹디자인 레퍼런스 어디서 찾나 — Awwwards·Refero·Land-book·Seesaw 4종 사용 구분

새 사이트 작업이 잡히면 대개 첫 이틀이 레퍼런스 찾는 데 날아갑니다. 구글 이미지와 핀터레스트를 번갈아 열고, 저장 폴더에 스크린샷이 40장쯤 쌓이는데, 정작 작업을 시작하면 그 40장이 별 도움이 안 됩니다. 화면 전체를 찍은 이미지라 “이 히어로의 여백이 왜 저 크기인지”를 알 수 없고, 심지어 실제로 서비스 중인 사이트인지 콘셉트 시안인지도 구분되지 않기 때문입니다.

더 흔한 실패는 목적을 안 정하고 갤러리를 여는 것입니다. 지금 필요한 게 “스크롤 인터랙션 아이디어”인지, “SaaS 가격 페이지의 표 구조”인지, “랜딩 히어로 카피와 이미지의 배치 비율”인지에 따라 가야 할 곳이 완전히 다릅니다. 그런데 대부분은 아무 갤러리나 열어 놓고 스크롤을 내리다가, 예쁘지만 이번 프로젝트와 아무 상관 없는 사이트를 저장합니다.

정리하면 갤러리는 서로 대체재가 아니라 검색축이 다른 도구입니다. 아래 네 곳은 각각 어워드 수상작(모션), 실제 제품 UI(핀포인트 검색), 랜딩 섹션(구조), 데일리 큐레이션(트렌드)이라는 다른 축을 담당합니다. 이 글은 각 사이트의 공개 사양을 기준으로 “언제 어딜 가나”를 정리하고, 마지막에 프로젝트 착수부터 무드보드까지의 루틴을 붙였습니다.

미리 밝힙니다. 네 곳 모두 유료 플랜을 결제해 장기간 운영해 본 것은 아닙니다. 아래 점수와 설명은 각 서비스가 공개한 사양과 짧은 브라우징을 근거로 한 것이고, 요금제는 변동이 잦으니 결제 전 공식 페이지를 확인하세요.

네 곳의 역할이 다릅니다

갤러리	강점	이럴 때	가격
Awwwards	심사위원 채점 어워드(SOTD/SOTM/SOTY), 하이엔드 인터랙티브	모션·인터랙션의 상한선을 볼 때	열람 무료
Refero	실제 제품 웹·iOS 화면 11.2만 장 이상, 페이지 타입·UI 요소·패턴·폰트·기업별 검색	“가격 페이지만”, “온보딩 플로우만” 같은 핀포인트 검색	무료 티어 + 유료(연간 결제 시 월 8달러 기준)
Land-book	랜딩페이지 특화, 산업별 필터 + 섹션 단위 20만 개 이상	랜딩을 섹션 단위로 뜯어볼 때	프리미엄(핵심 기능 무료)
Seesaw	매일 갱신되는 수작업 큐레이션, 애니메이션·마이크로인터랙션 중심	트렌드 빠른 브라우징, 데일리 체크	무료

핵심 차이는 수록 기준입니다. Awwwards는 심사를 통과한 소수, Refero는 실제로 서비스 중인 제품 화면, Land-book은 랜딩페이지, Seesaw는 사람이 매일 고른 것. 그래서 같은 “예쁜 사이트”라도 Awwwards에서 본 것은 고객 사이트에 그대로 못 쓰는 경우가 많고, Refero에서 본 것은 대개 그대로 참고 가능합니다.

Awwwards — 모션의 상한선을 확인하는 곳

Awwwards의 수상작(Site of the Day, Site of the Month, Site of the Year)은 심사위원 채점을 거칩니다. 실무자 입장에서 값어치는 “무엇이 지금 구현 가능한 최대치인가”를 눈으로 확인할 수 있다는 데 있습니다. 스크롤 연동 시퀀스, 커서 반응, WebGL 배경 같은 연출이 어디까지 가는지 감을 잡는 용도입니다.

수상작 페이지에는 제작 에이전시와 사용 기술 태그가 붙는 경우가 많아서, 스택을 추정하기 쉽다는 점도 실무에 도움이 됩니다. 어떤 라이브러리로 만들었는지 짐작이 서면, 우리 프로젝트에서 재현 가능한 범위인지 바로 판단할 수 있습니다.

다만 어워드용 과잉 연출이 상당수라는 점은 감안해야 합니다. 로딩 3초를 감수하는 브랜드 캠페인 사이트와, 문의 전환이 목적인 중소기업 사이트는 요구 조건이 다릅니다. 볼 때는 사이트 전체가 아니라 효과 하나 단위로 분해해서 가져올 것을 고르는 편이 낫습니다.

점수: 8.2 — Awwwards

좋은 점

• 모션·인터랙션 레퍼런스의 밀도가 가장 높습니다. 상한선을 알고 작업하면 견적과 일정 판단이 쉬워집니다.
• 제작사·기술 태그가 함께 노출돼 구현 스택을 역추적하기 좋습니다.
• 열람 자체는 무료라 진입 장벽이 없습니다.

아쉬운 점

• 어워드 지향 연출이 많아 실무 사이트에 그대로 옮기기 어려운 사례가 섞여 있습니다.
• 검색축이 카테고리·태그 중심이라 “가격 페이지만” 같은 핀포인트 탐색에는 약합니다.
• 화려한 사례를 계속 보다 보면 기준이 올라가 과설계로 흐르기 쉽습니다.

이럴 때 쓰세요: 클라이언트가 “요즘 나오는 그런 움직임”을 요구할 때, 구현 가능한 범위와 비용을 판단할 기준점이 필요할 때.

Refero — 페이지 타입과 UI 요소로 찍어서 찾는 곳

Refero는 검색축이 독보적입니다. 실제 서비스 중인 제품의 웹·iOS 화면을 11.2만 장 이상 모아 두고, 페이지 타입(Billing, Onboarding 등) × UI 요소 × 디자인 패턴 × 기업 × 폰트로 걸러 볼 수 있습니다. 콘셉트 시안이 아니라 실서비스 UI만 수록한다는 점이 중요합니다. “이 화면 실제로 굴러가고 있다”는 전제 자체가 설득 근거가 되기 때문입니다.

관리자 화면, 결제·구독 흐름, 빈 상태(empty state)처럼 예쁘게 만들기보다 틀리지 않게 만들어야 하는 기능성 UI에서 특히 값어치가 큽니다. 이런 화면은 참고할 사례를 구글 이미지로 찾기가 거의 불가능합니다.

Refero는 Figma 플러그인과 MCP 서버를 함께 제공한다고 공개하고 있습니다. MCP를 붙이면 에디터나 AI 도구 안에서 바로 레퍼런스를 검색하는 흐름이 가능해집니다. 다만 이 연동은 아직 직접 붙여 확인하지 못했으니, 실제 동작은 공식 문서로 확인하시길 권합니다.

점수: 8.8 — Refero

좋은 점

• 페이지 타입·UI 요소·패턴·기업·폰트로 조합 검색이 되는 곳은 흔치 않습니다. 탐색 시간이 크게 줄어드는 축입니다.
• 실서비스 화면만 수록해, 클라이언트 설득용 근거로 쓰기 좋습니다.
• Figma 플러그인과 MCP 제공을 밝히고 있어 도구 안으로 끌어들일 여지가 있습니다.

아쉬운 점

• 무료 티어가 있지만 본격적인 활용은 유료 구간입니다(연간 결제 기준 월 8달러대로 공개).
• 실제 제품 위주라 브랜드 사이트·캠페인 페이지 같은 표현 중심 레퍼런스는 약합니다.
• 국내 서비스 수록 비중은 기대하지 않는 편이 좋습니다. 한국형 UI 관습이 필요한 작업에는 별도 수집이 필요합니다.

이럴 때 쓰세요: SaaS·관리자·커머스처럼 화면 종류가 많은 제품에서 특정 페이지 하나의 구조를 빠르게 정해야 할 때.

Land-book — 랜딩을 섹션 단위로 뜯어보는 곳

Land-book은 랜딩페이지 특화 갤러리입니다. 실무에서 가장 유용한 기능은 사이트 단위가 아니라 섹션 단위 브라우징입니다. 히어로, 가격표, 후기, 푸터 같은 섹션만 모아 놓은 데이터가 20만 개 이상 공개돼 있습니다.

이게 왜 중요하냐면, 랜딩 작업은 사실상 섹션 조립이기 때문입니다. 카피를 먼저 쓰고 섹션 순서를 정한 뒤 각 섹션의 시각 구조를 채우는 순서로 진행하면, 필요한 레퍼런스도 “사이트 5개”가 아니라 “히어로 10개, 가격표 8개, 후기 6개”가 됩니다. 섹션 단위 검색은 이 방식과 정확히 맞물립니다.

산업 필터(SaaS, 에이전시, 이커머스, 포트폴리오 등)도 제안서용 수집에 씁니다. 고객 업종과 같은 카테고리에서 대여섯 개를 뽑아 두면, 시안 방향을 논의할 때 “왜 이 구성인지”를 설명하기 쉬워집니다.

점수: 8.5 — Land-book

좋은 점

• 섹션 단위 20만 개 이상이라는 데이터 구조가 랜딩 작업 순서와 그대로 맞습니다.
• 산업별 필터가 있어 업종 맞춤 제안서용 수집이 빠릅니다.
• 핵심 기능을 무료로 쓸 수 있는 프리미엄 구조라 도입 부담이 적습니다.

아쉬운 점

• 랜딩 특화라 여러 페이지짜리 사이트의 내부 화면 레퍼런스로는 거의 쓸모가 없습니다.
• 모션·인터랙션 정보는 정지 이미지 기반이라 잡히지 않습니다.
• 유료 플랜(PRO)의 기능 경계는 시점에 따라 바뀌므로 공식 PRO 페이지에서 확인이 필요합니다.

이럴 때 쓰세요: 원페이지 랜딩이나 제품 소개 페이지를 만들면서 섹션 순서와 각 섹션의 시각 구조를 결정할 때.

Seesaw — 아침 5분 트렌드 피드

Seesaw는 매일 갱신되는 수작업 큐레이션 갤러리입니다. 애니메이션과 마이크로인터랙션 중심으로 고르는 성향이 있어, 지금 어떤 표현이 반복해서 등장하는지 감을 잡는 데 적합합니다. 사람이 고르기 때문에 잡음이 적다는 게 가장 큰 장점입니다.

대신 필터는 약합니다. AI, 크립토, 이커머스, 핀테크 같은 카테고리 브라우징 정도이고, 조건 조합 검색은 기대하기 어렵습니다. 그래서 “찾으러 가는 곳”이 아니라 “흘려보는 곳”으로 쓰는 게 맞습니다. 아침에 5분 훑고, 꽂히는 사이트가 나오면 그때 따로 분석하는 용도입니다.

무료라는 점도 이 용법과 잘 맞습니다. 매일 여는 탭에 유료 게이트가 있으면 습관이 안 붙습니다.

점수: 7.6 — Seesaw

좋은 점

• 수작업 큐레이션이라 목록의 신호 대 잡음 비율이 좋습니다.
• 무료라 매일 열어보는 루틴에 부담이 없습니다.
• 애니메이션 중심 선별이라 인터랙션 트렌드 감지에 유리합니다.

아쉬운 점

• 필터·검색이 약해 특정 조건으로 과거 항목을 되찾기 어렵습니다.
• 아카이브 규모가 Refero·Land-book처럼 크지 않아 자료 창고로는 부족합니다.
• 큐레이터 취향이 반영되므로 특정 스타일에 편향될 수 있습니다.

이럴 때 쓰세요: 프로젝트가 없을 때도 감을 유지하려고 매일 훑는 용도. 특정 자료를 찾으러 가는 곳은 아닙니다.

실전 루틴 — 착수부터 무드보드까지

네 곳을 다 열어 두면 오히려 시간을 더 씁니다. 순서를 정해 두는 편이 낫습니다.

1. 착수(구조 먼저) — Land-book에서 고객 업종 필터로 사이트 5~6개, 섹션 단위로 히어로·가격·후기 레퍼런스를 각각 수집합니다. 이 단계 결과물은 “예쁜 그림”이 아니라 섹션 순서 초안입니다.
2. 디테일(UI 채우기) — Refero에서 페이지 타입과 UI 요소로 찍어 구체 화면을 모읍니다. 폼, 표, 빈 상태처럼 구조가 까다로운 부분만 골라 담습니다.
3. 모션 요구가 있을 때만 — Awwwards에서 유사 연출을 찾고, 우리가 실제로 재현 가능한 기법인지 대조합니다. 재현 난도가 안 맞으면 이 단계에서 잘라내는 게 일정 관리에 유리합니다.
4. 상시 — Seesaw는 프로젝트와 무관하게 매일 아침 훑습니다. 건진 사이트는 따로 기록해 둡니다.

수집물은 스크린샷만 쌓아 두면 나중에 못 씁니다. 파일명과 메모 형식을 고정해 두면 재사용률이 확 올라갑니다.

refs/
  2026-07-18_landbook_saas-hero_stripe.png
  2026-07-18_refero_pricing-table_linear.png
  2026-07-18_awwwards_scroll-sequence_studio-x.png

날짜_출처갤러리_무엇_사이트명 순서로 고정하면 폴더 정렬만으로도 용도별로 묶입니다. 여기에 한 장짜리 메모를 붙입니다.

## stripe 가격표 (Refero, 페이지 타입: Pricing)
- 훔칠 것: 3열 중 가운데 카드만 배경 반전 + 테두리 강조
- 훔칠 것: 연/월 토글이 카드 위가 아니라 표 상단 중앙
- 안 가져올 것: 기능 비교표는 우리 제품 대비 항목이 과함
- 재현 난도: 낮음 (CSS만)

“훔칠 것”과 “안 가져올 것”을 같이 적는 게 핵심입니다. 나중에 시안을 설명할 때 근거가 되고, AI로 시안 이미지를 뽑을 때도 이 메모를 그대로 프롬프트 재료로 쓸 수 있습니다.

SaaS 가격 페이지 히어로. 3열 요금제 카드, 가운데 카드만 배경 반전.
연/월 토글은 카드 상단 중앙. 여백 넉넉하고 폰트는 산세리프 한 종.
장식 일러스트 없음. 데스크톱 1440 기준 시안.

주의사항과 다른 후보들

레퍼런스와 표절의 경계는 생각보다 가깝습니다. 실무 기준은 단순합니다. 구조와 원리는 가져오되, 그래픽 자산과 카피는 가져오지 않는 것입니다. 섹션 순서, 정보 위계, 인터랙션 원리는 업계 공통 문법에 가깝지만, 일러스트·사진·문구는 남의 자산입니다.

또 하나. 갤러리에 올라온 사이트는 대체로 “잘 만든 것”이지 “잘 되는 것”이 아닙니다. 심사 기준은 디자인 완성도이지 전환율이 아닙니다. 전환이 목적인 페이지라면 레퍼런스는 참고로 두고, 실제 판단은 목적과 대상 사용자 기준으로 하는 편이 안전합니다.

이 네 곳 외에 후보로 이름이 자주 오르는 곳으로는 Godly, 앱 UI 중심의 Mobbin, 다크 테마 모음인 Dark.design 등이 있습니다. 다만 이 글에서는 직접 확인한 범위가 아니라서 비교 대상에 넣지 않았습니다. 필요하면 각 사이트를 열어 수록 기준과 검색축부터 확인해 보시길 권합니다. 갤러리를 고르는 기준은 결국 “예쁜가”가 아니라 “내가 지금 찾는 축으로 걸러지는가”입니다.