디자인을 시작할 때 가장 오래 걸리는 일은 멋진 화면을 찾는 일이 아니라, 지금 필요한 참고 자료가 무엇인지 정하는 일이다. 어제 모아 둔 디자인 레퍼런스를 다시 살펴보니 다섯 서비스는 서로 경쟁하는 목록이 아니었다. 각자 맡길 일이 달랐다.

이 글은 2026년 7월 25일에 확인한 공식 사이트를 바탕으로 썼다. 기능, 가격, 라이선스는 바뀔 수 있으므로 실제 프로젝트에 쓰기 전에는 각 서비스의 최신 조건을 다시 확인해야 한다.

먼저 결론: 역할로 나누면 덜 헤맨다

필요한 것 먼저 열 곳 쓰임
분위기와 방향 Cosmos 흩어진 영감을 묶어 시각 언어 찾기
레퍼런스 보관 Savee 프로젝트별 보드와 빠른 수집
이미지 소재 Lummi AI 기반 스톡 이미지·일러스트 탐색
패키지·브랜드 사례 The Dieline 완성도 높은 편집·패키지 사례 읽기
색과 가독성 검증 Realtime Colors 실제 UI에서 팔레트와 대비 확인

핵심은 다섯 곳을 전부 오래 보는 것이 아니다. 질문 하나를 정하고 필요한 서비스만 짧게 거치는 것이다.

1. Cosmos: 취향을 검색 가능한 재료로 바꾸기

Cosmos는 이미지 한 장을 저장하는 것보다, 서로 관련 있는 이미지가 어떤 분위기를 만드는지 보는 데 유용했다. 새 프로젝트를 시작할 때 minimal editorial, warm technology, human AI처럼 형태와 감정을 함께 검색하면 방향이 더 빨리 좁혀진다.

좋았던 점은 레퍼런스를 단순히 예쁜 화면으로 소비하지 않고 하나의 시각적 문장으로 묶을 수 있다는 것이다. 반대로 떠다니는 이미지와 풍부한 모션을 그대로 제품 화면에 옮기면 핵심 메시지가 약해질 수 있다. 레퍼런스는 분위기를 정하는 데만 쓰고, 정보 구조는 별도로 설계하는 편이 안전하다.

2. Savee: 수집보다 버리는 기준 만들기

Savee는 빠르게 저장하고 보드로 묶는 경험이 단순하다. 나는 프로젝트마다 보드를 하나 만들고 아래 세 묶음만 유지하는 방식이 잘 맞았다.

  • Keep: 실제 화면에 적용할 수 있는 패턴
  • Maybe: 방향은 좋지만 맥락이 다른 사례
  • No: 멋있지만 이번 목표에는 맞지 않는 사례

No 보드가 의외로 중요하다. 무엇을 피할지 기록하면 팀이나 AI Agent가 다음 시안을 만들 때 같은 유혹으로 되돌아가지 않는다. 다만 저장 자체가 목적이 되면 핀만 늘어난다. 한 세션에서 남길 이미지를 12개 정도로 제한하는 편이 낫다.

3. Lummi: 빈칸을 채우되 정체성을 대신하게 하지 않기

Lummi는 AI 기반 스톡 이미지와 일러스트를 찾을 때 빠르다. 특히 일반 스톡 사진에서 찾기 어려운 추상적 기술 이미지나 3D 오브젝트를 탐색하기 좋다. 초안의 빈칸을 채우거나, 어떤 비주얼 톤이 맞는지 시험하는 용도로 충분히 가치가 있다.

하지만 AI 이미지가 브랜드를 대신하게 두면 화면이 금방 비슷해진다. 이미지가 글보다 먼저 말하지 않도록 크기와 수를 제한하고, 내려받기 전에 현재 라이선스와 상업적 사용 조건, 인물·상표 표현을 확인해야 한다.

4. The Dieline: 장식이 아니라 결정의 이유 읽기

The Dieline은 패키지 디자인 중심의 편집 매체다. 웹 UI 레퍼런스만 볼 때 놓치기 쉬운 재료, 색, 타이포그래피, 제품의 맥락을 함께 볼 수 있다. 사례를 볼 때는 결과 이미지보다 다음 세 가지를 읽는 편이 도움이 됐다.

  1. 누가 어떤 상황에서 이 제품을 만나는가
  2. 경쟁 제품 사이에서 무엇을 먼저 보이게 했는가
  3. 장식 요소가 브랜드의 어떤 약속을 설명하는가

개인 블로그에 그대로 적용하면 잡지처럼 무거워질 수 있다. 큰 마스트헤드나 강한 카테고리 구분처럼 편집 원칙만 가져오고, 프로모션 바와 팝업은 덜어내는 쪽이 낫다.

5. Realtime Colors: 팔레트를 취향에서 테스트로 바꾸기

색 조합은 컬러 칩만 볼 때와 실제 제목, 본문, 버튼에 적용했을 때가 다르다. Realtime Colors는 배경·텍스트·강조·보조 색을 실제 페이지 구조에서 바로 바꾸어 볼 수 있어, 팔레트를 고르는 일을 빠르게 검증하는 일로 바꿔 준다.

나는 다음 순서로 확인한다.

  • 본문 텍스트와 배경의 대비가 충분한가
  • 링크가 색만으로 구분되지 않아도 알아볼 수 있는가
  • 강조색을 빼도 정보의 우선순위가 유지되는가
  • 다크 모드에서도 같은 의미가 유지되는가

도구의 미리보기는 출발점일 뿐이다. 최종 화면에서는 실제 브라우저의 접근성 검사와 모바일 밝기 환경까지 다시 봐야 한다.

내가 쓰는 30분 레퍼런스 루틴

0–5분: 질문 한 문장

따뜻하지만 기술적으로 보이는 개인 AI 블로그처럼 대상, 감정, 형식을 한 문장으로 적는다. 질문이 없으면 레퍼런스는 끝없이 늘어난다.

5–13분: Cosmos와 Savee

넓게 탐색하되 12개만 남긴다. 비슷한 이미지가 세 장 이상 모이면 그 안의 공통점을 큰 산세리프 제목, 오프화이트 배경, 얇은 경계선처럼 말로 바꾼다.

13–18분: Lummi 또는 The Dieline

이미지 소재가 필요하면 Lummi, 편집과 브랜드 맥락이 필요하면 The Dieline을 연다. 둘 다 볼 필요는 없다.

18–25분: Realtime Colors

후보 팔레트를 실제 본문과 버튼에 적용해 대비와 위계를 본다. 통과한 색만 디자인 토큰으로 남긴다.

25–30분: 결정 기록

가져올 것 세 가지와 피할 것 세 가지를 적는다. 이번 블로그에서는 넓은 여백, 큰 에디토리얼 제목, 명확한 태그 인덱스를 가져오고, 팝업, 무한 피드, 과한 모션은 제외했다.

마지막 기준

좋은 레퍼런스는 화면을 닮게 만드는 자료가 아니라 결정을 더 빨리 설명하게 만드는 자료다. 출처를 많이 모으기보다 각 서비스에 역할을 하나씩 주면, AI Agent와 함께 디자인할 때도 프롬프트가 구체적으로 바뀐다. 세련되게 만들어 줘 대신 오프화이트 배경, 820px 본문 폭, 파란색은 링크와 핵심 강조에만이라고 말할 수 있게 된다.

그 순간부터 레퍼런스 수집은 취향 구경이 아니라 설계가 된다.