Web Guide행사 브랜딩전시회 키비주얼행사 로고 가이드
행사 브랜딩: 로고, 슬로건, 키비주얼을 웹으로 옮기는 법
인쇄물에서 멋있던 키비주얼이 웹에서 무너지는 이유는 대개 준비 순서 때문입니다.
행사 브랜딩은 포스터와 현수막을 기준으로 만들어집니다. 그대로 웹에 올리면 글씨가 안 읽히고 모바일에서 잘립니다. 웹으로 옮길 때 무엇을 다시 정해야 하는지 정리했습니다.
01인쇄용 자산과 웹용 자산은 애초에 다른 파일이다
디자인 대행사에서 받는 행사 브랜딩 패키지는 대부분 인쇄 기준입니다. CMYK 색상, 고해상도 AI 파일, 여백이 넉넉한 가로형 키비주얼입니다. 웹은 RGB이고, 화면 폭이 제각각이며, 로고는 40px 높이로도 읽혀야 합니다.
제작 착수 전에 웹용 자산을 별도로 요청해 두면 개발 중 파일을 다시 받느라 생기는 지연이 사라집니다. 특히 로고는 SVG로 받아야 어떤 크기에서도 깨지지 않습니다.
로고
SVG 필수. 가로형·세로형·심볼 단독 3종, 흰색 반전 버전 포함
키비주얼
가로형(데스크톱)과 정방형·세로형(모바일) 별도 제작
색상
CMYK가 아닌 HEX 코드로 지정. 주색·보조색·강조색 구분
서체
웹폰트 라이선스 확인. 없으면 대체 서체를 미리 지정
02키비주얼은 잘릴 것을 전제로 배치한다
웹의 첫 화면은 고정된 캔버스가 아닙니다. 데스크톱에서는 가로로 길고 모바일에서는 세로로 깁니다. 같은 이미지를 쓰면 좌우가 잘리거나 위아래에 빈 공간이 생깁니다.
행사명과 일시·장소처럼 반드시 보여야 하는 정보는 이미지 안에 넣지 말고 텍스트로 얹는 편이 안전합니다. 이미지에 박아 넣으면 모바일에서 잘리고, 검색엔진도 읽지 못하며, 날짜가 바뀔 때마다 디자이너를 다시 불러야 합니다.
이미지에 정보를 박는 방식
모바일에서 글자가 잘리거나 작아짐 · 검색 노출 불가 · 일정 변경 때마다 재작업 · 다국어 대응 불가
배경 이미지 + 텍스트 분리
화면 폭에 맞춰 줄바꿈 · 검색과 AI가 읽음 · 날짜 수정은 관리자에서 · 언어별 텍스트 교체
03행사 색을 그대로 쓰면 글씨가 안 읽히는 경우가 많다
행사 주색이 밝은 노랑이나 연두라면 흰 글씨를 얹을 수 없고, 아주 진한 남색이라면 본문 전체를 그 색으로 깔 수 없습니다. 브랜드 색은 포인트로 쓰고, 본문은 읽히는 색으로 따로 정해야 합니다.
버튼, 링크, 강조 텍스트처럼 색이 의미를 갖는 요소만 주색을 쓰고 나머지는 중립적인 회색 계열로 두면 브랜드 인상은 유지하면서 가독성을 확보할 수 있습니다.
1
주색은 면적을 제한한다
버튼, 배지, 강조선, 아이콘에만. 본문 배경으로 깔지 않습니다.
2
글자색은 대비 기준으로 정한다
배경과 본문의 명도 차이를 확보합니다. 접근성 기준을 만족하면 대부분 문제없습니다.
3
반전 버전을 미리 만든다
어두운 배경 위에 얹을 로고와 버튼 색을 별도로 정해 둡니다.
04브랜딩 확정은 개발 착수 전에 끝내야 한다
키비주얼이 개발 중반에 바뀌면 메인 화면만 바뀌는 것이 아닙니다. 버튼 색, 배지 색, 메일 템플릿, 입장권 디자인, 현장 명찰까지 연쇄적으로 따라옵니다. 행사 브랜딩은 웹 제작 일정표에서 가장 앞에 있어야 하는 항목입니다.
주최·주관이 여럿이라 승인이 오래 걸리는 구조라면, 승인 절차 자체를 일정에 며칠 단위로 잡아 두세요. '디자인 확정'이 한 줄로 적힌 일정표는 대개 지켜지지 않습니다.
STEP 01
브랜딩 확정
로고·색·서체
STEP 02
웹 자산 전달
SVG·HEX·반전본
STEP 03
시안 적용
화면별 반영
STEP 04
개발 착수
이후 변경 유상
CHECK POINT
□ 로고를 SVG로, 흰색 반전 버전까지 받아 두었는가
□ 키비주얼의 모바일용(정방형·세로형) 버전이 따로 있는가
□ 행사명과 일시가 이미지 안이 아니라 텍스트로 올라가는가
□ 브랜드 색의 사용 면적과 본문 글자색을 구분해 정했는가
□ 브랜딩 승인 절차가 일정표에 날짜로 잡혀 있는가
#행사 브랜딩#전시회 키비주얼#행사 로고 가이드#SVG 로고#웹 접근성 대비#모바일 키비주얼#웹폰트 라이선스#행사 디자인#웹비스타#행사 홈페이지 제작