핀터레스트만 보고 있다면 — 목적별 디자인 레퍼런스 사이트 정리

디자인 작업을 시작할 때 대부분 핀터레스트부터 연다. 빠르고 예쁜 이미지가 많으니까. 그런데 핀터레스트에서 아무리 스크롤해도 “이 앱은 결제 단계를 몇 개로 쪼갰지?” 같은 질문에는 답이 안 나온다. 이미지 한 장 단위로 모이는 곳이라 화면의 앞뒤 맥락이 없기 때문이다.

레퍼런스 사이트는 저마다 모으는 단위가 다르다. 어떤 곳은 앱의 화면 흐름 전체를, 어떤 곳은 랜딩페이지 한 장을, 어떤 곳은 완성된 프로젝트를 모은다. 그래서 만들려는 결과물에 따라 여는 사이트가 달라져야 한다. 이 글은 그 기준으로 정리한 것이다(조회일 2026-08-20).

지금 만들려는 게 뭔가 — 목적별 지도

한 사이트만 오래 쓰면 결과물의 톤도 그 사이트를 닮아간다. 목적별로 두세 곳을 번갈아 보는 것만으로 시야가 넓어진다.

1. 앱·웹 화면 흐름을 통째로 보고 싶을 때

Mobbin — 실제 서비스의 화면을 플로우 단위로 모아둔 곳이다. 온보딩, 회원가입, 결제, 검색 같은 흐름을 앱별로 순서대로 볼 수 있어서, 화면 한 장이 아니라 “이 단계를 어떻게 넘겼는지”를 확인할 때 쓴다. iOS·안드로이드·웹을 나눠 보고 패턴·산업별 검색이 되며, 피그마 플러그인도 있다. 무료로도 열람할 수 있고 전체 이용은 유료 구독 구조다.

Page Flows — 실제 사용 과정을 영상으로 기록해두는 곳이다. 정지된 화면으로는 안 보이는 전환·애니메이션·마이크로 인터랙션을 볼 때 유용하다.

이 두 곳의 공통점은 “완성된 예쁜 화면”이 아니라 “일하는 화면”을 보여준다는 것이다. 기획·설계 단계에서 특히 쓸모가 있다.

2. 랜딩페이지·웹사이트 한 장을 만들 때

Land-book — 랜딩페이지와 소개 사이트를 모아둔 곳. 업종·스타일별로 묶여 있어서 “SaaS 소개 페이지는 보통 어떤 순서로 구성하나” 같은 걸 훑기 좋다.

Awwwards — 인터랙션과 비주얼 완성도가 높은 사이트들이 모인다. 상을 겨루는 곳이라 실험적인 작업이 많다. 실무에 그대로 옮기긴 과할 수 있지만, 표현의 상한선을 보고 오는 용도로 좋다.

랜딩페이지는 유행을 빠르게 타는 영역이라, 두 사이트를 한 달에 한 번쯤 훑어두면 감이 뒤처지지 않는다.

3. 비주얼 아이디어가 필요할 때

Dribbble — 디자이너들이 시안·컨셉 작업을 올리는 곳. 실제 서비스가 아니라 컨셉이 많다는 점이 장점이자 함정이다. 표현 아이디어를 얻기엔 좋지만, 여기 있는 화면이 실제 환경에서 그대로 작동하리라 기대하면 안 된다(빈 상태, 긴 텍스트, 오류 화면이 대부분 생략돼 있다).

Behance — 프로젝트 단위로 올라와서 과정과 맥락까지 볼 수 있다. 브랜딩·편집·패키지처럼 UI 밖의 작업을 찾을 때 특히 강하다.

핀터레스트 / Savee — 이미지 단위 수집에 최적화된 곳. 색감·질감·타이포 분위기를 모으는 무드보드 용도로 쓰면 제 역할을 한다. 앞서 말한 한계는 “화면 설계”에 쓸 때 생기는 것이지, 무드보드로는 여전히 강력하다.

4. 국내 트렌드를 봐야 할 때

해외 사이트만 보면 한글 타이포그래피, 국내 서비스 특유의 정보 밀도, 결제·본인인증 같은 국내 플로우가 빠진다.

노트폴리오 — 국내 창작자·디자이너들이 작업물을 올리는 플랫폼. 한글 조판과 국내 트렌드를 확인할 수 있고, 신입·주니어의 포트폴리오 참고용으로도 많이 쓰인다.

라우드소싱 — 디자인 공모가 진행되는 곳이라, 같은 요구사항에 대해 여러 디자이너가 낸 서로 다른 답을 한 번에 볼 수 있다. 클라이언트가 원하는 방향을 가늠할 때 참고가 된다.

5. 무료와 유료, 어떻게 갈리나

• 유료 구독형은 검색과 정리 기능에 돈을 내는 구조다. 레퍼런스를 찾는 시간이 길다면 구독이 시간을 아껴주고, 가끔 보는 정도라면 무료 범위로 충분하다.
• 요금제와 무료 범위는 자주 바뀌므로 결제 전 각 사이트의 요금 안내를 직접 확인하는 게 정확하다.

6. 모으기만 하면 안 쓰게 된다 — 레퍼런스 쓰는 법

레퍼런스는 많이 모으는 것보다 왜 좋은지 기록하는 것이 중요하다. 실무에서 통하는 방식은 단순하다.

1. 한 줄 메모를 붙인다 — “여백이 넓어서 정보가 정리돼 보임”, “CTA가 스크롤 내내 따라옴”처럼 좋은 이유를 적는다. 이유 없이 모은 이미지는 나중에 다시 열지 않는다.
2. 목적별로 나눈다 — “예쁜 것” 폴더 하나에 다 넣지 말고 온보딩·빈 화면·가격표처럼 문제 단위로 나눈다. 막힐 때 바로 꺼낼 수 있다.
3. 3개 이상 비교한다 — 하나만 보면 따라 하게 되고, 셋을 비교하면 공통 원리가 보인다. 그 원리가 내 작업에 옮길 수 있는 것이다.
4. 빈 상태·오류·긴 텍스트를 같이 본다 — 시안에는 거의 없지만 실제 서비스에는 반드시 생기는 화면이다. 이걸 챙기면 완성도가 확 올라간다.

7. 짚고 갈 것 — 참고와 복제는 다르다

레퍼런스 사이트의 화면은 원작자에게 저작권이 있다. 모아서 보여주는 사이트가 이용 권리까지 주는 것은 아니다.

• 화면 캡처를 그대로 내 포트폴리오·발표자료·상업 결과물에 넣는 것은 문제가 될 수 있다.
• 반면 구조와 원리는 저작권 대상이 아니다. “결제를 3단계로 쪼갠다”, “빈 화면에 다음 행동 버튼을 둔다” 같은 패턴은 배워서 내 방식으로 다시 만들면 된다.
• 팀 내부 공유 자료에 캡처를 쓸 때도 출처(서비스명)를 함께 적어두는 습관이 안전하다.

핵심 요약 — 이것만 기억하자

1. 핀터레스트는 무드보드용이다. 이미지 단위라 화면의 앞뒤 맥락이 없어서, 설계 단계에는 다른 도구가 필요하다.
2. 흐름을 보려면 Mobbin·Page Flows, 랜딩페이지는 Land-book·Awwwards, 비주얼 아이디어는 Dribbble·Behance.
3. 국내 감각은 노트폴리오·라우드소싱 — 해외 사이트만 보면 한글 조판과 국내 플로우가 빠진다.
4. 무료 / 무료+유료 구독 / 무료+유료 기능 세 가지로 갈린다. 유료는 대개 검색·정리 기능값이니 레퍼런스 찾는 시간이 길 때만 고려하면 된다.
5. 모으는 것보다 이유를 적는 게 중요하다. 문제 단위로 분류하고, 3개 이상 비교해 공통 원리를 뽑자.
6. 참고는 자유, 캡처 재사용은 아니다. 구조는 배우고 표현은 내 손으로.

이 정보들, 어디서 직접 확인하나?

출처

• Mobbin — 실제 앱·웹 화면을 플로우 단위로 수집, 무료 열람 + 유료 구독 구조 (요금 안내)
• 노트폴리오 — 국내 창작자·디자이너 작업물 플랫폼
• 각 사이트의 성격은 공개된 서비스 소개와 디자이너 커뮤니티에서 통용되는 설명을 기준으로 정리했습니다. 다수 사이트가 자동 접근을 차단해 원문 확인이 제한되었고, 요금제·무료 범위는 변동이 잦아 수치를 명시하지 않았습니다 — 결제 전 각 사이트에서 직접 확인하세요.

조회일 2026-08-20 기준. 사이트 정책과 요금은 바뀔 수 있습니다. 레퍼런스 화면의 저작권은 각 원작자에게 있으며, 이 글은 참고 방법을 안내할 뿐 무단 사용을 권하지 않습니다.