디자인 영감 사이트 주소모음: 색상·폰트·무드보드 추천

아이디어가 막힐 때 책상 앞에서만 버티다 보면, 손은 움직이는데 마음은 멈춰 있는 느낌이 든다. 현업에서 오래 버틴 디자이너일수록 이 순간을 빨리 벗어나는 법을 안다. 좋은 레퍼런스를 빠르게 훑고, 쓸 만한 요소를 붙잡아 구체적인 선택으로 전환하는 일. 여기서 핵심은 감으로 인터넷을 떠도는 게 아니라, 목적에 맞는 사이트 주소모음을 미리 갖춰 두고, 짧은 시간에 정확한 샘플을 뽑아내는 습관이다. 아래는 내가 팀과 개인 작업에서 반복적으로 참고하는 색상, 폰트, 무드보드 중심의 링크모음과 운용 노하우다. 각 링크는 실제로 써 본 경험을 바탕으로 장단을 곁들였고, 흐름이 이어지도록 작업 시나리오에 맞춰 정리했다.
색상 팔레트, 정확한 기준이 먼저다
트렌디한 팔레트는 금방 고를 수 있다. 진짜 관건은 이 팔레트가 브랜드와 제품에서 오래 버틸 수 있느냐, 그리고 접근성 기준을 통과하느냐다. 색상에서 가장 자주 벌어지는 실수는 대비가 약한 포인트 컬러를 텍스트에 얹는 일이다. 화면에서 예뻐 보이는 순간을 넘어, 버튼 상태, 그래프, 오류 메시지 등 실제 맥락을 견디는지 확인해야 한다.

색 조합을 스케치할 때는 먼저 넓은 덩어리로 본다. 배경, 기본 텍스트, 인터랙션, 강조, 경고처럼 쓰임새를 나눠 두고, 각 역할에 맞는 채도와 명도를 구한다. 이때 팔레트 제너레이터와 대비 검사기를 붙여 놓으면 속도가 확 줄어든다.

Coolors(https://coolors.co)는 키보드 스페이스로 빠르게 조합을 뽑아내기 좋다. 다만 랜덤에만 의존하면 맥락이 약해진다. 브랜드의 핵심 색상 하나를 잠그고, 나머지를 탐색하는 방식으로 쓰면 생산성이 훨씬 올라간다. Adobe Color(https://color.adobe.com)에서는 보색, 삼각형, 사각형 같은 조화 규칙을 훑어 보고, 업로드한 이미지를 기반으로 팔레트를 추출하는 기능까지 한번에 해결한다. 로고 시안을 받은 상태에서 그 안의 색감을 구조화할 때 특히 유용하다.

미니멀한 작업에는 Color Hunt(https://colorhunt.co)처럼 검증된 4색 위주의 팔레트를 빠르게 훑어보는 게 낫다. 반대로 실험적 브랜딩을 시도할 때는 Khroma(https://khroma.co) 같은 선호 학습 기반 도구가 도움 된다. 좋아하는 색을 여러 개 학습시키면, 그 취향대를 따라 다양한 조합과 타이포 시각화 샘플을 준다. 한 가지 주의점은, 기계가 제안한 대비를 그대로 믿지 말고 반드시 대비 검사기로 재검증하는 것이다.

접근성 측면에서는 WebAIM Contrast Checker(https://webaim.org/resources/contrastchecker/)가 기본기다. 배경과 전경 색을 넣으면 WCAG 기준에 맞는지 바로 확인된다. 제품 팀에서는 Stark(https://www.getstark.co) 같은 플러그인을 디자인 툴에 붙여두면, 상태별 컴포넌트에 일괄 검사를 적용하기 편하다. 대시보드처럼 데이터 밀도가 높은 화면일수록, 명도 차이 12~18%p 내에서 색상만 여러 개 쓰는 것보다 톤 단계와 패턴을 함께 써서 구분하는 쪽이 안전하다.

브랜드 레퍼런스가 필요할 땐 BrandColors(https://brandcolors.net)에서 글로벌 브랜드의 공식 팔레트를 확인한다. 빨간색이라고 다 같은 빨강이 아니다. 코카콜라의 빨강과 넷플릭스 빨강은 인상은 비슷하지만 사용 맥락이 다르다. 포장재나 인쇄 노출이 잦다면 잉크 색 재현성과 용지에 따른 색 편차까지 감안해 CMYK 변환값을 함께 기록해 둔다. 화면 작업만 한다면 sRGB와 Display P3의 차이, 모바일에서 과포화되는 현상도 체크한다. 특히 P3 디스플레이가 보편화되면서, 데스크톱에서 보던 채도와 모바일에서의 채도가 달라 보이는 일이 늘었다.
폰트 선택, 한국어 기준을 세워야 한다
폰트는 내용의 목소리다. 기획이 정리되지 않은 상태에서 폰트를 고르는 건 소음만 키운다. 먼저 문체와 톤을 정의하고, 길게 읽히는 본문과 짧게 치는 UI 텍스트를 분리해서 본다. 한국어 프로젝트에서는 영문 위주의 폰트 추천을 그대로 받아들이기 어렵다. 자간, 낱자 구조, 초성·중성 조합의 묵직함이 영어와는 다르게 작동한다.

무료 폰트의 기본 축으로는 Google Fonts(https://fonts.google.com)와 함께, 한국어 환경에서 널리 쓰이는 Pretendard(https://github.com/orioncactus/pretendard), 스포카 한 산스 네오(https://spoqa.github.io/spoqa-han-sans/), 나눔 계열(https://hangeul.naver.com/font) 정도를 깔아 둔다. 프로젝트 초입에서는 Pretendard를 시스템 폰트와 함께 테스트해 보는 걸 추천한다. 가독성과 범용성의 균형이 좋고, 가변 폰트 지원으로 화면에 따라 두께를 정밀하게 조절하기 쉽다. 영문 인상이 중요한 프로젝트라면 Inter(https://rsms.me/inter)와 한국어 조합을 비교해 보되, 대문자 대비와 숫자 자폭 때문에 표 구성에서 줄바꿈이 출렁이는지까지 확인해야 한다.

상업적 프로젝트에서 차별화를 주려면 유료 폰트도 고려해야 한다. 산돌(https://www.sandoll.co.kr), 윤디자인(https://www.yoondesign.com), 아코폰트 같은 레이블에서 라이선스 모델이 다양하다. 계약 전에 인쇄, 웹 임베드, 앱 번들 등 채널별 권리를 구체적으로 체크한다. 인디 레이블에서 배포하는 서체는 개성이 강한 대신, 굵기 단계가 부족하거나 수치 디자인이 빈약할 때가 있다. 가격만 보고 선택하지 말고, 제목과 본문의 역할 분리가 가능한지, 숫자와 기호의 구성이 균형 잡혔는지 샘플 텍스트로 테스트해야 한다.

폰트 페어링에는 Fontshare(https://www.fontshare.com), Fontpair(https://www.fontpair.co), Fontjoy(https://fontjoy.com)가 도움이 되지만, 한국어 조건에서는 직접 시트 하나를 만들어 보는 게 제일 빠르다. 제품 팀에서는 Figma에서 타입 스케일을 12, 14, 16, 20, 24, 32, 48 같은 배열로 잡고, 행간과 자간을 화면별로 달리 적용한 비교 보드를 만들어 두면 의사결정이 빨라진다. 본문 16pt 기준으로 모바일에서는 행간 1.5 전후, 데스크톱에서는 1.6 내외로 조금 넉넉히 잡는 편이 읽기 피로를 줄여 준다. 제목은 자간을 -1%에서 -2%범위로 당겨 타이트하게 쓰는 식으로 대비를 만든다. 다만 한국어에서는 과도한 자간 축소가 받침 부딪힘을 유발할 수 있어 실제 문단 단위로 검토해야 한다.

라이선싱과 기술적 배포까지 연결하려면 Noonnu CDN(https://noonnu.cc)을 즐겨 쓴다. 웹폰트 호스팅이 익숙하지 않은 개발 환경에서도 빠르게 적용할 수 있고, 성능과 캐시 관리도 용이하다. 다만 트래픽 규모가 크거나, 폰트 변경 가능성이 잦은 서비스라면 자체 호스팅으로 전환해 캐싱 정책을 맞추는 게 낫다.
무드보드, 속도를 위한 구조 만들기
무드보드의 목적은 느낌을 통일하고, 이해관계자 간 언어를 맞추는 것이다. 잡다한 영감 이미지를 복사해 붙이는 일로 끝나면, 회의에서 말이 엇갈린다. 브랜드의 키워드, 산업 카테고리, 사용자 정서, 기기 제한 같은 구획을 먼저 나누고, 각 영역에 드는 이미지를 선별하는 방식으로 시작한다.

Pinterest(https://www.pinterest.com)는 탐색 속도가 가장 빠르다. 이미지 기반 추천이 강해서 신선한 레퍼런스를 연속으로 만나기 쉽다. 단점은 링크의 원본 출처가 흐려지는 경우가 잦다는 것. Are.na(https://are.na)는 반대로 출처 유지와 보드 간 연결이 뛰어나다. 스튜디오 단위로 지식 아카이브를 만들기에 적합하고, 글과 링크, 파일까지 섞어 담기 편하다. Milanote(https://milanote.com)와 Miro(https://miro.com)는 협업 프레임이 좋다. 클라이언트와 함께 보드 위에서 즉시 코멘트를 주고받을 때 유용하다. Figma의 FigJam(https://www.figma.com/figjam/)은 디자인 산출물과의 거리감이 가장 짧다. 무드보드에서 곧장 와이어프레임으로 넘어갈 수 있어, 초기 스프린트에 시간을 아낀다.

보드 구성에서 자주 쓰는 트릭은 텍스트 설명을 과하게 달지 않는 것이다. 한 장의 스크린샷에 두 줄 이내 설명으로, 왜 저장했는지, 어느 요소를 차용하려는지만 적는다. 시간 제한도 중요하다. 무드보드에 주말을 다 태우면 실행이 늦어진다. 첫 수집 40분, 12개 항목, 3개 버전 같은 가드레일을 걸어 두면 팀이 경로를 잃지 않는다.
UI와 제품 레퍼런스, 실전에서 거르기
Dribbble(https://dribbble.com)과 Behance(https://www.behance.net)는 큰 풀이다. 많은 것을 얻지만, 설익은 콘셉트나 보는 맛 위주의 샷이 섞여 있다. 제품화된 패턴을 보고 싶다면 Mobbin(https://mobbin.com), Pttrns(https://pttrns.com), Screenlane(https://screenlane.com)이 낫다. 대형 서비스의 실제 스크린을 흐름 단위로 묶어 보여 주기 때문에, 온보딩, 결제, 설정, 에러 복구 같은 구체 장면에서 아이디어를 얻는다. 다만 이런 레퍼런스는 북미 시장 비중이 높다. 한국 사용자에게 익숙한 인터랙션이나 결제 플로우의 미세한 차이는 로컬 앱을 직접 스크린샷으로 수집해 균형을 맞추는 게 안전하다.

랜딩과 마케팅 디자인은 Awwwards(https://www.awwwards.com), Land-book(https://land-book.com), Lapa Ninja(https://www.lapa.ninja), SaaS Pages(https://saaspages.xyz)를 섞어 본다. 화려한 인터랙션은 테스트 기기에서 프레임 드랍 없이 돌아가는지까지 고려해야 실제로 쓸 수 있다. 내 경험상, CSS만으로 처리 가능한 인터랙션을 우선 삼고, WebGL이나 무거운 비디오 백그라운드는 런칭 이후 트래픽이 안정되면 실험판으로 붙이는 편이 리스크가 낮았다.
브랜드와 로고, 아카이브를 파고들기
브랜딩 작업에서는 레퍼런스의 폭이 넓을수록 사고가 단단해진다. LogoArchive(https://logoarchive.org)는 시대별 로고 문법을 읽는 데 탁월하고, UnderConsideration의 Brand New(https://www.underconsideration.com/brandnew/)는 리브랜딩 사례를 비평과 함께 보여 준다. BP&O(https://bpando.org)는 그래픽 시스템을 제품과 공간, 패키지까지 확장한 케이스가 많아, 터치포인트 설계 감각을 기르기에 좋다. 이런 아카이브를 보며 그들의 색, 폰트, 그리드가 서로 어떻게 힘을 주고받는지 수첩에 간단히 도식화해 보면, 나중에 내 프로젝트에서 빠르게 응용할 수 있다.
사진, 아이콘, 일러스트, 라이선스 체크
무료 사진은 Unsplash(https://unsplash.com)와 Pexels(https://www.pexels.com)가 여전히 무난하다. 단, 많이 쓰인 이미지는 어디서 본 듯한 인상을 준다. 검색어를 영어와 한국어로 번갈아 시도하고, 촬영 구도나 색감이 덜 쓰인 작가를 팔로우해서 조금 비켜 가는 게 낫다. 인물 사진을 쓸 때는 DEI 관점에서 연령과 인종, 직군의 균형을 반드시 확인한다. B2B 서비스에서 개발자 이미지만 젊은 남성으로 채워지지 않도록 크리에이티브 브리프에 아예 기준을 써 넣는다.

아이콘은 Phosphor Icons(https://phosphoricons.com), Remix Icon(https://remixicon.com), Heroicons(https://heroicons.com) 같은 오픈 라이브러리를 많이 쓴다. 굵기, 모서리 라운드, 코너 조인트를 일관시켜 UI 톤과 맞추는 게 핵심이다. 브랜드 톤에 일러스트가 어울린다면 Open Peeps(https://www.openpeeps.com)나 Humaaans(https://www.humaaans.com)를 테스트해 본다. 라이선스는 CC0인지, 상업적 사용이 가능한지, 재배포 조건이 있는지 반드시 확인한다. 재사용 조건을 깜박하면 나중에 배포 채널을 확장할 때 제약을 맞닥뜨린다.
모션과 인터랙션, 과감하되 가볍게
서비스의 첫인상은 마이크로 사이트 주소모음 https://itunesadvisor.com 인터랙션에서 완성된다. LottieFiles(https://lottiefiles.com)로 초경량 애니메이션을 붙여 보거나, Rive(https://rive.app)에서 상태 기반 인터랙션을 설계하면 코드 레벨에서 제어가 편해진다. Motionographer(https://motionographer.com) 같은 큐레이션 사이트로 큰 흐름을 체크하면서, 실제 컴포넌트 안에서는 프레임 수와 지속 시간을 줄여 보라. 버튼 피드백은 120~180ms, 스낵바 표시는 2.5~3초, 로딩 인디케이터의 루프는 600~900ms 같은 범위부터 시작하면 무난하다. 물론 제품의 톤과 사용자 작업의 무게에 따라 조절한다.
접근성, 색각이상 시뮬레이션을 루틴으로
색각이상 시뮬레이션은 습관처럼 돌려야 한다. Color Oracle(https://colororacle.org)이나 Sim Daltonism(https://michelf.ca/projects/sim-daltonism/)을 사용하면 프로토타입 단계에서 치명적인 오류를 조기에 잡는다. 빨강과 초록만 바꾼다고 해결되지 않는다. 선 두께, 패턴, 여백, 텍스트 라벨이 함께 설계되어야 한다. 차트에서는 색뿐 아니라 점선, 해칭, 마커 모양으로도 계열을 구분하고, 범례를 차트 안에 붙여 시선 이동을 줄인다.
링크모음과 사이트 주소모음, 작동하는 운영법
링크를 많이 모으는 것보다 중요한 건, 필요할 때 30초 안에 꺼내는 시스템이다. 북마크 폴더를 무한정 늘리면 나중엔 찾기 힘들어지고, 개인의 머릿속 규칙에만 의존하면 팀에서는 공유가 안 된다. 내가 오래 사용해 온 방식은, Notion과 Are.na를 중심 저장소로, 브라우저 북마크는 작업 주차별 단기 스택으로 쓰는 구조다. 폴더 이름은 디자인 단계와 역할로 명명한다. 예를 들어 “00brief”, “10color”, “20type”, “30uipatterns”, “40assets”, “90_review”처럼 숫자를 앞에 붙여 정렬 순서를 고정한다. 링크를 붙일 때는 꼭 한 줄 요약을 적는다. 왜 저장했는지, 요소의 어느 부분을 쓰려는지, 만료될 리스크가 있는지. 만약 추후 검색을 위해 태그를 쓴다면, 플랫폼(pinterest, arena), 형식(landing, dashboard), 톤(minimal, playful), 언어(ko, en) 같은 3~4개의 축만 유지한다. 태그가 많아질수록 의미가 사라진다.

아래는 팀 온보딩 때 공유하는 최소 규칙이다.
링크를 저장할 때 출처, 한 줄 요약, 라이선스 문구를 함께 기록한다. 외부 링크는 UTM 파라미터를 삭제하고 저장한다. 무드보드는 12개 이하 이미지로 시작하고, 48시간 이내에 1차 선택을 확정한다. 색상과 폰트는 사용 시나리오 캡처와 함께 저장한다. 대비 검사 스크린샷을 붙인다. 매달 마지막 주 금요일, 죽은 링크와 중복 레퍼런스를 청소한다.
이렇게 굴리면, 링크모음이 쌓일수록 빨라진다. 무엇보다 팀 합의가 있기 때문에, 누가 보더라도 맥락을 잃지 않는다. 폴더와 태그보다 중요한 건, 결정과 실행으로 연결되는 기록 방식이다.
실무에서 바로 쓰는 툴킷, 다섯 개만 북마크
첫날 환경을 세팅해야 한다면, 시간을 많이 쓰지 말고 아래 다섯 개부터 북마크에 꽂아 두자.
색상: Adobe Color, 대비: WebAIM Contrast Checker 폰트: Pretendard 저장소, Google Fonts 무드보드: Are.na, FigJam UI 패턴: Mobbin 에셋: Phosphor Icons, Unsplash
이 조합이면 초기 시안과 프로토타입을 만드는 데 필요한 최소한의 재료가 갖춰진다. 도구는 가볍게 시작하는 게 좋다. 실제로 쓸 수 있는 결과물이 빨리 나와야 대화가 진행된다.
작은 사례, 카페 브랜드 리뉴얼의 흐름
작년 여름, 동네 스페셜티 카페의 브랜드 리뉴얼을 도왔다. 온라인 주문과 멤버십을 붙여 앱 경험까지 연장하는 프로젝트였다. 첫 주에는 사장님이 좋아하는 브랜드와 싫어하는 브랜드를 듣고, 방문 고객 12명을 짧게 인터뷰했다. 커피 맛의 묵직함과 매장의 햇살이 대비되는 공간이라는 인상이 반복적으로 나왔다. 키워드를 강약, 질감, 투명으로 묶고, 무드보드를 세 버전 만들었다. 보드당 이미지 10장, 텍스트 설명은 문장 두 개. 48시간 안에 한 버전으로 합치고, 색상은 잉크가 번진 종이의 다크 그린과 아이보리, 악센트로 얇은 주홍을 잡았다.

색상을 확정하는 데 Coolors와 Adobe Color를 함께 썼다. 텍스트 대비는 WebAIM 기준 AA를 최저선으로 삼았고, 메뉴판 인쇄 견본에서 CMYK 변환값을 돌려 보며 명도를 6%p 올렸다. 앱 UI에서는 녹색의 채도를 8% 낮춰 과포화를 줄였다. 폰트는 제목에 산돌 고딕의 각을 살짝 둔 버전을, 본문에는 Pretendard를 썼다. 숫자 정렬이 많은 멤버십 포인트 화면에서는 탭별로 라벨 자간을 -1%만 조정해 전체 감도를 정리했다. 모션은 Lottie로 하트 필 애니메이션을 140ms로 짧게 처리했고, 스켈레톤 로딩은 700ms 주기의 은은한 쉬머로 제한했다. 결과적으로 3주 차에 출력물과 앱 하이파이 시안을 동시에 보여 줄 수 있었고, 현장 반응도 좋았다. 무엇보다 기록된 보드와 링크가 다음 시즌의 시즌 한정 패키지에도 그대로 재사용됐다.
한국어 리소스, 현지화의 감
글로벌 레퍼런스만 보면 한국 사용자 맥락을 놓치기 쉽다. 현지 UX와 브랜딩 사례는 토스 디자인 블로그(https://toss.im/slash/design), 카카오 디자인(https://design.kakao.com), 네이버 D2(https://d2.naver.com), 무신사 매거진의 디자인 관련 글(https://www.musinsa.com/magazine)처럼 제품팀 블로그가 현실적이다. ‘요즘IT’와 브런치에는 실무자 칼럼이 정리돼 있고, 채용 공고 속 포트폴리오 가이드도 장단을 읽는 데 도움 된다. 컨퍼런스 발표 자료는 키노트가 전부가 아니다. Q&A와 발표자의 링크모음을 따라가면, 비하인드 레퍼런스가 종종 나온다.
안전과 위생, 링크의 질을 지키는 습관
사이트 주소모음을 운영하다 보면, 스팸과 무관한 링크가 끼어들 때가 있다. 특히 검색을 통해 링크를 긁어 모을 때 연관성이 낮은 키워드, 예를 들어 프로야구 무료중계 같은 전혀 다른 카테고리의 낚시 페이지가 섞여 들어오기도 한다. 디자인과 무관한 링크를 걸러내는 필터를 두고, 저장 전에 도메인을 육안으로 검토하는 절차를 지키면 피해를 줄인다. 팀 단위에서는 브라우저 확장 프로그램으로 UTM 파라미터 자동 제거, 리다이렉트 가시화, 광고 차단을 기본 세트로 깔아 둔다. 의심스러운 사이트는 샌드박스 브라우저나 가상 머신에서만 연다. 레퍼런스의 품질은 양보다 위생에서 갈린다.

또 하나, 크리에이터의 권리를 존중하는 태도가 필요하다. 이미지 원본을 가능하면 링크로 연결하고, 파일을 다운로드해 내부에서만 쓰는 경우에도 출처를 명확히 남긴다. 오픈 라이선스의 경계는 플랫폼마다 다르다. Unsplash의 라이선스 정책, Noun Project의 크레딧 규정처럼 세부 조항을 주기적으로 다시 확인한다. 팀이 커질수록 이런 기본기를 문서로 남겨야 일관성을 유지할 수 있다.
작업 흐름으로 묶기
여기까지 읽고 링크를 전부 북마크에 넣을 필요는 없다. 오히려 너무 많으면 손이 느려진다. 목표는 색상, 폰트, 무드보드라는 세 축에서 빠르게 시작하고, 프로젝트가 전개되며 필요한 영역을 유기적으로 확장하는 것이다. 실제로는 다음의 흐름으로 굴러간다. 1) 무드보드 40분 수집 - 12개 이미지, 3버전. 2) 색상 후보 3세트, 대비 즉시 확인. 3) 폰트 후보 2쌍, 타입 스케일로 실사용 문단 테스트. 4) UI 패턴 레퍼런스에서 구체 장면을 클립. 5) 에셋과 모션을 얹어 가라앉힘. 각 단계에서 저장한 링크는 폴더 규칙과 한 줄 요약으로 정리하고, 일주일에 한 번 15분 정리 시간을 캘린더에 고정한다. 설계의 절반은 정리에서 나온다.

디자인은 결국 선택의 연속이다. 좋은 링크모음과 사이트 주소모음은 선택을 빠르고 정확하게 만든다. 색상은 쓰임새로, 폰트는 문장으로, 무드보드는 합의로 연결될 때 힘을 가진다. 도구와 링크는 바뀌어도, 그 원리는 그대로다. 오늘 필요한 다섯 개만 북마크하고, 다음 주에 다시 점검하라. 그 루틴이 쌓일수록 당신의 작업은 더 맑고 단단해진다.