[부록] 웹 앱 레퍼런스 참고 사이트 정리

이 장에서는 디자인 영감을 얻을 수 있는 레퍼런스 사이트들을 정리합니다. Mobbin, Awwwards, Behance 등 카테고리별로 유용한 사이트를 소개합니다.

좋은 디자인을 만들려면 먼저 좋은 디자인을 많이 봐야 합니다. 여기 제가 자주 참고하는 사이트들을 정리했습니다.

카테고리	대표 사이트	특징
실제 서비스 UI/UX	Mobbin, WWIT	실제 앱/웹 화면 흐름 분석
디자인 영감/트렌드	Awwwards, httpster	최신 웹 디자인 트렌드
디자이너 포트폴리오	Behance, Dribbble	전문 디자이너 작업물
국내 특화 플랫폼	디자이너스, 노트폴리오	국내 감성 디자인 레퍼런스

1. 실제 서비스 UI/UX 분석

1.1 Mobbin

모바일 및 웹 앱의 실제 UI/UX 디자인 흐름을 캡처하여 보여주는 사이트입니다. 특정 앱의 화면 전환이나 사용자 경험 전체를 파악하고 싶을 때 유용합니다. (일부 유료)

Mobbin: https://mobbin.com/

1.2 WWIT - 윗 (What Was IT)

한국판 Mobbin입니다. 국내외 웹사이트 및 모바일 앱의 UI/UX 사례를 분석하고 공유하는 곳입니다. 한국 사용자들에게 익숙한 국내 서비스 레퍼런스가 풍부합니다.

WWIT: https://wwit.design/

1.3 appshots

다양한 모바일 앱의 스크린샷을 모아놓은 곳입니다. 특정 기능이나 화면 구성에 대한 아이디어를 얻을 때 유용합니다.

appshots.design: https://appshots.design/

1.4 Scrnshts

모바일 앱의 스크린샷과 UI 디자인 요소를 탐색할 수 있는 사이트입니다. 카테고리나 디자인 스타일별로 필터링할 수 있습니다.

Scrnshts: https://scrnshts.club/

2. 디자인 영감과 트렌드

2.1 Awwwards

전 세계에서 가장 혁신적이고 아름다운 웹사이트들을 선정하여 수상하는 사이트입니다. 높은 수준의 웹 디자인 트렌드와 기술적 구현 사례를 참고할 수 있습니다.

Awwwards: https://www.awwwards.com/

2.2 httpster

깔끔하고 미니멀한 웹사이트 디자인을 주로 소개하는 큐레이션 사이트입니다. 감각적인 레이아웃과 색상 조합을 참고하기 좋습니다.

httpster: https://httpster.net/

2.3 지디웹

국내외 우수 웹사이트 디자인을 모아놓은 갤러리 사이트입니다. 다양한 디자인 트렌드를 한눈에 파악하기 좋습니다.

지디웹: https://www.gdweb.co.kr/main/

3. 디자이너 포트폴리오와 커뮤니티

3.1 Behance

어도비에서 운영하는 크리에이티브 전문가를 위한 포트폴리오 공유 플랫폼입니다. 웹/앱 디자인뿐만 아니라 그래픽, 브랜딩 등 다양한 분야의 완성도 높은 프로젝트를 볼 수 있습니다.

Behance: https://www.behance.net/

3.2 Dribbble

전 세계 디자이너들이 자신의 작업물을 공유하는 커뮤니티입니다. 빠르게 디자인 영감을 얻고 최신 UI 트렌드를 파악하기에 좋습니다.

Dribbble: https://dribbble.com/

3.3 Pinterest

이미지 기반 소셜 미디어입니다. 'UI design', 'UX flow', 'app layout' 등 키워드로 검색하면 방대한 디자인 아이디어를 시각적으로 탐색할 수 있습니다.

Pinterest: https://kr.pinterest.com/

4. 국내 특화 플랫폼

4.1 디자이너스

국내 디자이너들의 다양한 그래픽 및 웹/앱 디자인 포트폴리오를 볼 수 있는 커뮤니티 플랫폼입니다.

디자이너스: https://designus.io/

4.2 노트폴리오

국내 창작자와 디자이너들의 작품을 공유하는 플랫폼입니다. 한국적인 감성이나 국내 사용자들에게 익숙한 디자인 레퍼런스를 찾을 때 유용합니다.

노트폴리오: https://notefolio.net/

4.3 유아이볼

매일 하루에 한 개씩 새로운 UI 패턴을 업데이트하는 사이트입니다. 특정 기능에 대한 다양한 UI 구현 방식을 참고할 수 있습니다.

유아이볼: https://uibowl.io/

5. 효과적인 레퍼런스 살펴보기

목적을 명확히 하기: "그냥 구경"이 아니라 "필터 UI 참고"처럼 구체적인 목표를 갖고 탐색합니다.
스크린샷 폴더 만들기: 마음에 드는 디자인은 바로 캡처해서 프로젝트별로 정리합니다. 프로젝트 폴더 안에 reference 같은 이름의 폴더를 두고 모아 두면, Code 탭에 "reference 폴더의 이미지들 분위기로 만들어줘"라고 한 번에 건넬 수 있습니다.
분석하며 보기: "왜 이게 좋아 보이지?", "어떤 요소 때문에 깔끔해 보이지?" 질문하며 봅니다.

이 사이트들을 자주 방문하다 보면 자연스럽게 디자인 감각이 향상됩니다. 처음엔 "이게 왜 좋은지" 모르겠지만, 계속 보다 보면 "아, 이래서 좋구나"를 알게 됩니다.