웹디자인이나 UI/UX 프로젝트를 시작할 때 가장 중요한 것은 좋은 디자인 레퍼런스를 찾는 일입니다. 트렌디한 해외 디자인, 실무형 국내 사이트, 그리고 최근 디자인 프로세스를 혁신하고 있는 AI 웹디자인 툴까지 목적에 맞게 활용할 수 있는 추천 사이트를 정리했습니다.
어워드형 웹디자인 레퍼런스
전 세계의 혁신적이고 실험적인 웹사이트들이 모이는 곳입니다. 최신 웹 기술과 화려한 인터랙션을 참고하고 싶을 때 방문하기 좋습니다.
- Awwwards (https://www.awwwards.com/) : 세계적인 권위를 자랑하는 웹디자인 어워드 사이트입니다. 창의적이고 예술적인 디자인 트렌드를 한눈에 볼 수 있습니다.
- CSS Design Awards (https://www.cssdesignawards.com/) : UI/UX, 이노베이션 등을 기준으로 매일 최고의 사이트를 선정합니다.
- CSS Winner (https://www.csswinner.com/) : 글로벌 웹디자이너들의 수준 높은 포트폴리오와 커머셜 사이트들이 가득한 곳입니다.
- [추가] FWA (Favorite Website Awards) (https://thefwa.com/) : 최첨단 디지털 기술과 인터랙티브 미디어가 융합된 미래지향적인 웹사이트들을 만날 수 있는 유서 깊은 어워드입니다.
갤러리형 웹디자인 레퍼런스
실제 서비스 중인 랜딩 페이지 중심의 레이아웃을 모아둔 곳입니다. 구조적인 배치와 실용적인 UI를 참고하기에 최적화되어 있습니다.
- Land-book (https://land-book.com/) : 깔끔하고 직관적인 랜딩 페이지 위주로 모여 있어 스타트업이나 IT 기업 웹사이트 기획 시 유용합니다.
- Lapa Ninja (https://www.lapa.ninja/) : 수천 개의 랜딩 페이지 디자인을 카테고리별로 쉽게 찾아볼 수 있는 갤러리입니다.
- [추가] One Page Love (https://onepagelove.com/) : 오직 한 페이지로 구성된 싱글 페이지(원페이지) 웹사이트만 전문적으로 모아둔 곳으로, 스크롤 연출과 간결한 정보 배치를 참고하기 좋습니다.
- [추가] Godly (https://godly.website/) : 애니메이션 효과가 훌륭하고 모던한 감성의 감도 높은 웹사이트들을 모아둔 트렌디한 갤러리입니다.
국내 웹디자인 레퍼런스
국내 사용자의 정서와 비즈니스 환경에 맞는 웹사이트를 참고하고 싶을 때 필수적인 사이트들입니다. 대기업, 공공기관, 국내 에이전시의 결과물이 많습니다.
- GDWEB (https://www.gdweb.co.kr/) : 국내 웹디자인 우수작들을 매주 선정하여 업데이트하는 대표적인 국내 어워드 사이트입니다.
- DBCUT (https://www.dbcut.com/) : 오픈한 지 얼마 되지 않은 따끈따끈한 국내 웹사이트들을 실시간으로 확인하기 좋습니다.
- DBDIC (http://www.dbdic.co.kr/) : 국내외 다양한 웹 디자인 아카이브를 제공하여 기획 단계에서 참고하기 좋습니다.
- [추가] 디자인정글 (Design Jungle) (https://jungle.co.kr/) : 웹디자인뿐만 아니라 국내외 전반적인 디자인 트렌드 뉴스, 공모전 정보, 포트폴리오를 접할 수 있는 종합 디자인 미디어입니다.
모바일 UI/UX 레퍼런스
모바일 앱의 스크린샷과 유저 플로우(User Flow)를 분석할 때 유용한 사이트들입니다. 실제 작동하는 화면 위주로 구성되어 있어 실무 활용도가 높습니다.
- Mobbin (https://mobbin.com/) : 글로벌 유명 앱들의 화면 흐름을 그대로 캡처해 두어 로그인, 결제 등 특정 기능의 UX를 연구할 때 유용합니다.
- Appshots (https://appshots.design/) : 다양한 모바일 앱의 디자인 패턴과 인터페이스를 깔끔하게 모아둔 갤러리입니다.
- UI Bowl (https://uibowl.io/) : 모바일 중심의 트렌디한 UI 컴포넌트와 소스를 참고할 수 있습니다.
- [추가] Page Flows (https://pageflows.com/) : 유저의 가입 절차, 온보딩, 결제 등 실제 서비스 내 ‘움직이는 사용자 여정(User Flow)’ 동영상을 제공하여 실무 UI/UX 기획에 강력한 도움을 줍니다.
브랜드 디자인 레퍼런스
로고, 패키지, 브랜드 가이드라인 등 웹을 넘어 브랜드 전반의 아이덴티티를 참고할 수 있는 아카이브입니다.
- World Brand Design (https://worldbranddesign.com/) : 전 세계 크리에이티브 에이전시들의 기업 브랜딩 및 패키지 디자인 작업물을 소개합니다.
- Brand Archive (https://brandarchive.xyz/) : 감도 높은 브랜드 시스템과 비주얼 아이덴티티를 심도 있게 다룹니다.
- BrandB (https://www.brandb.net/) : 국내 유일의 브랜드 디자인 전문 플랫폼으로, 국내 기업들의 생생한 리브랜딩 소식과 트렌드를 파악할 수 있습니다.
- UnderConsideration (Brand New) (https://www.underconsideration.com/brandnew/) : 유명 글로벌 브랜드들의 로고 변경 및 리브랜딩 전후를 날카롭게 비평하는 곳입니다.
[New!] AI 웹디자인 및 영감을 위한 사이트
최근 웹디자인은 AI를 활용해 초기 기획 단계(와이어프레임)나 시각적 영감을 빠르게 얻는 것이 대세입니다. AI로 웹디자인을 만들거나 아이디어를 확장할 때 매우 유용한 사이트들입니다.
- Relume (https://www.relume.io/) : 텍스트 프롬프트만 입력하면 AI가 웹사이트의 와이어프레임과 사이트맵을 순식간에 구조화해 줍니다. 피그마(Figma)나 웹플로우(Webflow)로 바로 내보낼 수 있어 초기 기획 시간을 획기적으로 줄여줍니다.
- Framer AI (https://www.framer.com/) : “스타트업을 위한 어두운 테마의 랜딩페이지를 만들어줘” 같은 문장 하나로 완전한 웹사이트 디자인과 반응형 레이아웃을 생성해 줍니다. 실시간 수정과 퍼블리싱까지 가능합니다.
- v0 by Vercel (https://v0.dev/) : 개발자 및 디자이너를 위한 UI 생성 AI입니다. 말로 UI 구조를 설명하면 현대적이고 깔끔한 웹 컴포넌트 소스코드(React, Tailwind CSS 기반)와 디자인 뼈대를 바로 만들어 줍니다.
- Midjourney (https://www.midjourney.com/) : 웹 전용 툴은 아니지만, 프롬프트 뒤에
--ar 16:9형태의 비율과web UI design,clean layout,UX/UI같은 키워드를 조합하면 기발하고 환상적인 비주얼의 웹 배경이나 목업(Mockup) 영감을 얻을 수 있습니다.
정리하며 기존의 훌륭한 디자인 레퍼런스를 보며 눈을 높이는 동시에, Relume이나 Framer 같은 최신 AI 툴을 융합한다면 기획부터 완성까지 디자인 작업의 속도와 퀄리티를 모두 잡을 수 있을 것입니다. 프로젝트 성격에 맞춰 위 사이트들을 스마트하게 활용해 보세요!
