디자인 작업 전에 보는 세 쪽

즐겨찾기 폴더를 뒤지던 시간을 작업 이름 하나로

즐겨찾기에 디자인 사이트가 수십 개 쌓여 있어도, 막상 결제 화면 레퍼런스가 필요할 때는 어디를 열어야 할지 떠오르지 않습니다. 디자인 사이트 목록은 26곳을 카드뉴스·썸네일, 앱·웹 화면, 로고, 색 조합, 폰트·글자, 이미지·일러스트, 인쇄·굿즈, AI 프롬프트·배경 여덟 가지 작업으로 묶었습니다. 작업을 누르면 그 일에 맞는 곳만 남고, 사이트마다 「이럴 때」 한 줄, 비슷한 곳, 그 사이트 화면에서 뽑은 색이 붙어 있습니다.

만들 때: 미리캔버스·Canva·Figma

한글 문구가 들어간 SNS 이미지나 발표 자료는 미리캔버스, 해외 느낌의 템플릿이나 여럿이 같이 고치는 작업은 Canva, 여러 장의 화면을 일관되게 관리해야 하는 앱·웹 설계는 Figma가 맞습니다.

참고할 때: 유아이볼·Mobbin·Landbook·Awwwards

국내 서비스의 로그인·결제·온보딩 화면은 유아이볼과 What Was IT, 해외 앱의 흐름은 Mobbin, 같은 업종 랜딩 페이지의 첫 화면은 Landbook, 스크롤과 움직임이 강한 사이트는 Awwwards와 Godly에서 봅니다.

재료가 필요할 때: 눈누·いらすとや·오프린트미

무료 한글 폰트는 눈누에서 폰트마다 인쇄·웹·영상·로고 허용 여부를 표로 확인합니다. 설명 자료에 넣을 가벼운 삽화는 いらすとや(한 제작물에 20점까지 무료), 명함 100장이나 스티커 몇 장처럼 적은 수량 인쇄는 오프린트미입니다.

로고를 그리기 전에, 이미 있는 것과 겹치지 않게

로고 레퍼런스는 예쁜 로고를 고르는 곳이 아니라 내 모티프가 이미 흔한지 확인하는 곳입니다. 12곳을 형태로 찾기, 업종·색으로 찾기, 작업 사례, 색·분위기 정하기, 워드마크 폰트, 상표 겹침 확인 여섯 갈래로 나눴습니다.

네 단계로 보면 한 시간 안에 방향이 정해집니다

먼저 Logobook에서 흑백으로 모아 둔 로고를 보며 형태만 비교합니다. 같은 모양이 수십 개 나오면 그 모티프는 흔한 것입니다. 다음으로 Logggos와 Logosystem에서 우리 업종의 흔한 색과 서체를 보고, 따를지 일부러 벗어날지 정합니다. 이름이 짧고 발음이 쉬우면 워드마크, 길거나 여러 언어로 쓰이면 심벌이 유리합니다. 색과 폰트는 형태가 흑백으로 통과한 뒤에 입힙니다.

나라마다 상표 검색은 따로

비슷한 로고가 안 보였다고 해서 상표로 등록되는 것은 아닙니다. 같은 상품류 안에서 먼저 출원한 쪽이 권리를 갖기 때문에, 한국은 KIPRIS, 미국은 USPTO, 일본은 J-PlatPat에서 이름과 도형을 각각 찾고, 여러 나라를 한 번에 볼 때는 WIPO Global Brand Database의 이미지 검색을 씁니다.

말로 설명하기 어려운 분위기는 한 장으로

「따뜻하고 차분하게」라는 말은 사람마다 다르게 떠올립니다. 무드보드는 사진 6~12장, 사진에서 뽑은 색, 키워드 세 개 이내를 한 판에 놓아 같은 그림을 보게 해 줍니다. 로고·인테리어·촬영·웨딩 작업을 시작하기 전에 방향을 합의하는 데 씁니다.

올리고 맞추기

「이미지 추가」를 누르거나 사진을 판 위로 끌어다 놓습니다. 캡처한 화면은 Ctrl+V로 바로 붙습니다. 「줄 맞춤」은 사진 비율을 지키며 판을 채우고, 「격자」는 같은 크기의 칸으로 나눕니다.

사진에서 색 뽑기

「색 뽑기」를 누르면 올린 사진들에서 대표 색 6개가 나옵니다. 색을 누르면 코드가 복사되고, 「판에 넣기」로 판 아래에 색 조각을 붙입니다. 6색 가운데 배경·글자·포인트로 쓸 세 가지만 정하면 됩니다.

비율 고르고 PNG로 저장

발표와 화면 공유는 16:9, 인스타그램 피드는 4:5나 1:1, 휴대폰 배경과 스토리는 9:16, 인쇄는 A4 가로를 고릅니다. 「PNG 저장」을 누르면 긴 변 2,400픽셀 이미지로 저장되고 워터마크는 없습니다.

실제로는 이렇게 씁니다: 작업별 예시

다섯 가지 작업을 이 사이트의 목록과 무드보드로 처리한 순서입니다. 저장 크기는 무드보드의 「PNG 저장」이 판 비율별로 실제로 만드는 픽셀 수입니다(긴 변 2,400픽셀 고정).

「색 뽑기」는 올린 사진마다 48×48픽셀로 줄인 뒤 모든 픽셀을 모아 비슷한 색끼리 여섯 묶음으로 나누고, 묶음마다 평균 색을 밝은 순서로 보여 줍니다. 예를 들어 빵집 사진 8장을 올리면 벽·빵·간판에서 많이 나온 색이 순서대로 6개 나오고, 그중 배경·글자·포인트 세 가지만 고르면 됩니다. 사진이 없으면 빈 판의 「예시로 채우기」로 기능부터 시험할 수 있습니다.

동네 빵집 로고

Logobook에서 「밀」「빵」 모티프를 찾아 밀 이삭을 원으로 감싼 모양이 흔하다는 것을 확인합니다. Logggos에서 식음료 업종의 색을 보고 갈색 대신 짙은 남색을 후보로 둡니다. 무드보드에 가게 사진·포장지·좋아하는 간판을 올려 색을 뽑고, 눈누에서 로고 사용이 허용된 폰트로 가게 이름을 써 본 뒤, KIPRIS에서 제30류(빵)·제43류(카페) 기준으로 이름을 검색합니다.

앱 결제 화면 고치기

유아이볼에서 국내 서비스의 결제 화면을 3~5개, Mobbin에서 해외 앱의 결제 흐름을 몇 개 엽니다. 버튼 위치, 금액을 보여 주는 순서, 약관 동의를 두는 자리처럼 여러 곳이 똑같이 한 것만 적어 두고, 그 구조로 Figma에서 다시 그립니다.

인스타그램 카드뉴스 10장

무드보드를 4:5 판으로 열어 참고 이미지를 모으고 색 세 가지를 정합니다. 미리캔버스 템플릿을 고른 뒤 그 세 가지 색으로만 바꾸고, 제목 폰트는 눈누에서 웹·인쇄 허용을 확인한 것으로 씁니다. 열 장의 톤이 한 사람이 만든 것처럼 맞춰집니다.

참고와 베끼기의 선

배치 순서, 정보의 우선순위, 여백 비율 같은 구조는 참고할 수 있습니다. 그림·아이콘·문구·로고를 그대로 옮기거나 선을 따라 그리는 것은 저작권과 상표권 문제가 됩니다. 한 곳만 보지 말고 세 곳 이상을 본 뒤 공통점만 가져오세요. 다른 사이트의 사진으로 만든 무드보드는 내부 논의용이고, 광고나 판매 페이지에 그대로 실으려면 원작자의 허락이 필요합니다. 이미지 생성 AI가 그린 로고는 기존 상표와 닮게 나올 수 있어 시안 탐색에만 쓰고, 최종본은 다시 그린 뒤 상표 검색을 거칩니다. 이 사이트도 같은 이유로 로고 그림을 싣지 않고 링크와 설명만 둡니다.

가입 없이 바로

세 쪽 모두 가입이나 결제 없이 씁니다. 목록에 오른 서비스의 요금은 곳마다 다릅니다. 레퍼런스 사이트는 보는 것이 무료이고, 템플릿 도구는 무료와 유료 요금제가 나뉘며, 인쇄 서비스는 주문할 때 비용이 듭니다. 목록의 사이트는 직접 열어 보고 지금 접속되는 곳만 실었으며, 사이트마다 확인한 날짜를 적어 두었습니다. 제휴 링크가 걸린 곳은 목록에 「제휴 링크」라고 따로 표시합니다.