혼자 만드는 브랜드 비주얼 세트 (색 3개·서체 2종·로고 3버전)

디자이너 없이 시작한 첫 해에는 상세페이지마다 색이 달랐어요. 이번엔 베이지, 다음엔 검정, 그다음엔 갑자기 파랑... 손님 입장에선 매번 다른 가게 같았겠죠. 비주얼 아이덴티티는 예쁘게 만드는 작업이 아니에요. 같은 걸 지겹도록 반복하는 규칙이에요.

VI는 예쁨이 아니라 반복이에요

브랜드가 기억되는 조건은 딱 하나예요. 같은 신호를 여러 번 보는 거요. 손님이 인스타에서 우리 사진을 보고 스크롤을 멈추려면 이미 몇 번 본 색이나 서체여야 해요. 그래서 처음에 정할 건 많지 않아요. 색 3개 · 서체 2종 · 로고 3버전. 이 최소 세트만 있으면 시작할 수 있어요.

반대로 이걸 안 정하고 시작하면 매번 새로 고민해요. 상세페이지 하나 만드는 데 반나절이 날아가요. 규칙을 정하는 진짜 이유는 예뻐서가 아니라 빨라서예요.

색은 딱 세 개만 정해요

색을 다섯 개씩 쓰는 순간 아무것도 기억에 안 남아요. 역할을 나눠서 세 개만 잡으세요.

역할	화면 비중	쓰는 곳	고르는 요령
기본색	약 60%	배경·여백·상세페이지 바탕	흰색이나 아주 옅은 톤. 사진이 살아야 해요
주조색	약 30%	제목·로고·헤더·패키지	브랜드 성격을 담는 색 하나
강조색	약 10%	구매 버튼·할인 뱃지·품절 표시	주조색과 확 다른 색. 여기만 튀어야 해요

정할 때 지켜야 할 숫자가 하나 있어요. 글자색과 배경색의 대비비 4.5:1이에요. 무료 대비 검사 사이트에 색 코드 두 개를 넣으면 바로 나와요. 옅은 회색 글씨가 감성 있어 보여도 40대 손님 폰에서는 안 읽혀요. 실제로 회색 본문을 진하게 바꾸고 나서 상세페이지 체류시간이 늘었어요.

색 코드는 메모장에 적어두지 말고 한 파일에 몰아두세요. 헥스 코드 6자리를 매번 찾는 시간이 은근히 길어요.

서체는 두 종이면 끝나요

제목용 1종 · 본문용 1종. 이게 전부예요. 굵기는 3단계만 써요. 본문 400 · 강조 600 · 제목 800 정도로 잡으면 화면이 정리돼요.

한글 무료 상업용 폰트가 요즘 많아요. 프리텐다드·나눔스퀘어네오·에스코어드림·지마켓산스·카페24 폰트 정도면 충분해요. 다만 다운로드 전에 라이선스 페이지에서 세 가지를 꼭 확인하세요.

• 웹폰트 허용 여부. 홈페이지에 임베드해서 쓰려면 별도 허용이 필요한 폰트가 있어요
• 이미지 상업 이용 여부. 상세페이지 이미지에 글자를 얹는 것도 상업 이용이에요
• 변형·로고 사용 여부. 로고에 쓰려고 자간을 바꾸면 금지인 폰트가 꽤 있어요

본문 크기는 모바일 기준 15~16px에 행간 1.7이 편해요. 제목은 32~40px. 이 숫자를 정해두고 상세페이지마다 똑같이 쓰면 손님이 우리 페이지를 알아봐요.

로고는 세 벌 만들어요

로고 하나만 만들면 반드시 막혀요. 인스타 프로필은 동그라미고 상세페이지 상단은 가로로 길거든요. 처음부터 세 벌로 만드세요.

1. 가로형: 심볼 옆에 글자. 사이트 헤더·명함·거래명세서에 써요
2. 정사각형: 글자를 두 줄로 접거나 심볼만. SNS 프로필·앱 아이콘용
3. 심볼 단독: 아주 작게 들어갈 때. 파비콘·택 라벨·워터마크용

파일은 이렇게 받아두세요. SVG(무한 확대용) · PNG 투명 배경 2000px(썸네일·배너용) · 흰색 단색 버전(어두운 사진 위에 얹을 때). 파비콘은 512px 정사각으로 따로 뽑고요. 이 네 개가 없으면 나중에 디자이너를 다시 불러야 해요.

여백 규칙도 하나만 정해요. 로고 사방에 심볼 높이의 0.5배만큼 빈 공간을 둔다. 이 규칙만 지켜도 아마추어 느낌이 확 줄어요. 최소 크기는 가로 24px로 잡고 그보다 작아지면 심볼만 쓰세요.

상세페이지에 붙이는 규칙

여기서부터가 실전이에요. 정한 걸 어떻게 반복하느냐가 전부예요. 저는 이 다섯 개를 템플릿으로 박아뒀어요.

• 첫 이미지 규칙: 모든 상품의 첫 컷은 같은 배경·같은 거리. 목록에서 보면 줄이 맞아요
• 제목 블록: 상품명 위에 항상 주조색 한 줄(카테고리나 한 줄 카피)
• 사진 배경 2종 이내: 실내 한 곳 · 야외 한 곳. 매번 새 장소로 찍으면 통일감이 무너져요
• 버튼 색 고정: 강조색은 오직 구매 버튼에만. 여기저기 쓰면 버튼이 안 보여요
• 마지막 블록 고정: 배송·교환 안내를 같은 디자인으로 모든 상품에 붙여요

아임웹이나 카페24는 상세페이지 본문 폭이 정해져 있어요. 이미지 가로 크기를 한 번 정하면(보통 860~1000px) 그 뒤로는 절대 바꾸지 마세요. 폭이 섞이면 스크롤할 때 들쭉날쭉해서 싸구려 느낌이 나요.

30분이면 끝나는 자가진단

지금 우리 가게가 어디쯤인지 표로 확인해보세요. 아니오가 세 개 넘으면 다음 신상 올리기 전에 손보는 게 나아요.

확인할 것	기준	예 / 아니오
색 코드가 문서 하나에 적혀 있나	3개 이하
본문 글자 대비비	4.5:1 이상
서체 종류	2종 이하
로고 파일	SVG·PNG·흰색 버전 보유
최근 상품 5개의 첫 컷	배경이 동일
SNS 프로필과 사이트 로고	같은 버전 사용
강조색 사용처	구매 버튼에만

다 채우는 데 하루면 충분해요. 어차피 1년 뒤에 또 손보게 돼요. 완벽하게 만들려고 시작을 미루는 게 제일 손해예요...

디자이너에게 맡길 땐 이렇게 요청해요

혼자 못 하겠다 싶으면 외주가 답이에요. 다만 요청서를 대충 쓰면 시안이 산으로 가요. 이 다섯 줄만 적어서 보내면 결과가 확 달라져요.

1. 쓰이는 자리: 사이트 헤더 · 인스타 프로필 · 택 라벨 · 택배 박스. 실제로 붙는 곳을 다 적어요
2. 받을 파일: SVG · PNG 투명 · 흰색 단색 · 파비콘 512px. 앞에서 정리한 그대로 요청해요
3. 원본 소유: 작업 원본 파일(ai 또는 피그마)을 함께 받고 저작재산권 양도를 계약서에 적어요. 이걸 안 하면 나중에 수정할 때마다 그 디자이너를 다시 찾아야 해요
4. 수정 횟수: 시안 3개 · 수정 2회처럼 숫자로 정해요. 안 정하면 서로 피곤해져요
5. 참고 이미지 5장: 말로 설명하지 말고 좋아하는 브랜드 화면을 캡처해서 보내요. 싫어하는 예시도 2장 넣으면 더 정확해져요

견적은 로고만 놓고 보면 폭이 넓어요. 프리랜서 플랫폼에서 30만 원짜리도 있고 스튜디오에 맡기면 300만 원도 나와요. 처음 시작하는 단계면 큰돈을 쓰는 것보다 위에서 정한 색·서체 규칙을 먼저 지키는 게 훨씬 티가 나요. 로고가 어설퍼도 페이지가 정돈돼 있으면 손님은 괜찮게 봐요.

비주얼을 정리하면 전환율이 조금씩 올라와요. 다만 눈으로는 잘 안 보여요. 상세페이지를 바꾼 날짜를 적어두고 그 전후의 순수익 흐름을 같이 보세요. 감이 아니라 숫자로 확인하면 다음에 뭘 손볼지도 명확해져요. 저는 대시부스터에서 날짜별 순수익을 보면서 개편 효과를 가늠해요.