퍼스널 브랜드 홈페이지를 만들고 나면, 페이지마다 색상이 조금씩 다르고 올린 이미지의 분위기가 들쭉날쭉해지는 경우가 많습니다. 배너는 파란 톤인데 강의 썸네일은 노란 톤, 프로필 사진은 따뜻한 톤이면 방문자는 한 사람의 사이트라는 느낌을 받지 못합니다. 색상과 이미지 톤을 맞추는 일은 디자인 감각의 문제가 아니라 기준을 먼저 정하고 그 기준에 맞춰 소재를 고르는 순서의 문제입니다.
색상부터 고르면 안 되는 이유
색상 팔레트를 먼저 고르면, 정작 그 색이 내가 주려는 인상과 맞지 않아서 나중에 전부 바꾸게 됩니다. 색상보다 먼저 정할 것은 내 사이트가 방문자에게 줄 첫인상의 방향입니다.
- 신뢰와 전문성을 앞세울 것인가 — 차분한 톤: 네이비, 그레이, 화이트 계열
- 친근함과 접근성을 앞세울 것인가 — 따뜻한 톤: 베이지, 코랄, 연한 초록 계열
- 창의성과 감각을 앞세울 것인가 — 강한 톤: 비비드 계열, 대비가 뚜렷한 조합
가르치는 분야와 수강생 연령대를 떠올리면 방향이 좁혀집니다. 자격증 시험 강의라면 차분한 쪽, 취미 공방이라면 따뜻한 쪽, 디자인이나 영상 강의라면 감각적인 쪽이 자연스럽습니다. 이 방향을 먼저 정해 두면 색을 고를 때 선택지가 크게 줄어듭니다.
메인 색상 하나를 정하는 방법
메인 색상은 사이트 전체에서 가장 자주 쓰이는 색입니다. 버튼, 강조 텍스트, 배너 배경, 강의 썸네일 테두리 등에 반복적으로 들어갑니다. 딱 하나만 정합니다.
- 이미 SNS나 명함에서 쓰고 있는 색이 있다면 그것을 그대로 가져옵니다. 나를 아는 사람이 사이트에 왔을 때 같은 사람의 공간이라는 느낌을 줍니다.
- 쓰던 색이 없다면, 위에서 정한 인상 방향에 맞는 색 계열에서 하나를 고릅니다.
- 색 코드를 메모해 둡니다. #2B5EA7 같은 여섯 자리 값입니다. 매번 눈대중으로 고르면 같은 파란색이어도 페이지마다 미세하게 달라집니다.
메인 색상은 하나로 충분합니다. 두 가지 이상을 메인으로 쓰면 어디에 시선을 둬야 할지 흐려집니다.
퍼스널 브랜드 홈페이지에 쓸 보조 색상 정하기
보조 색상은 배경, 구분선, 카드 영역 등에 쓰는 색입니다. 메인 색상을 돋보이게 하는 역할이므로 눈에 띄지 않아야 합니다.
- 흰색 또는 밝은 회색을 기본 배경으로 씁니다.
- 메인 색상의 연한 버전(명도를 올린 것)을 카드 배경이나 강조 영역에 씁니다.
- 텍스트는 순수 검정(#000000)보다 짙은 회색(#333333 또는 #222222)이 읽기 편합니다.
보조 색상까지 합쳐 사이트 전체에서 쓰는 색을 세 가지 이내로 유지합니다. 메인 하나, 배경 하나, 텍스트 하나면 대부분의 페이지를 구성할 수 있습니다. 색이 세 가지를 넘어가면 페이지가 복잡해 보이기 시작합니다.
이미지 톤을 맞추는 세 가지 기준
색상을 통일해도 이미지 톤이 제각각이면 사이트가 어수선해 보입니다. 이미지 톤을 맞추려면 세 가지를 통일합니다.
- 밝기 — 전체적으로 밝은 톤인지, 어두운 톤인지 하나를 정합니다. 밝은 배경에서 찍은 사진과 어두운 스튜디오 사진을 섞으면 페이지마다 분위기가 달라집니다.
- 색온도 — 따뜻한 조명(노란빛)으로 찍은 사진과 차가운 조명(파란빛)으로 찍은 사진을 같은 페이지에 놓지 않습니다. 한쪽으로 맞춥니다.
- 채도 — 선명한 사진과 빛바랜 듯 채도를 낮춘 사진을 섞지 않습니다. 강의 썸네일과 배너 이미지의 채도가 비슷해야 한 사이트처럼 보입니다.
새 이미지를 만들 때마다 기존 이미지 옆에 놓고 밝기, 색온도, 채도가 비슷한지 눈으로 확인합니다. 스마트폰의 기본 사진 편집 기능만으로도 밝기와 색온도는 조절할 수 있습니다.
이미지 소재를 고를 때 지키는 규칙
직접 찍은 사진과 무료 이미지 사이트에서 가져온 사진을 함께 쓰는 경우가 많습니다. 이때 톤이 벌어지기 쉬우므로 규칙을 정해 둡니다.
- 프로필 사진, 수업 사진 등 나를 직접 보여주는 이미지는 한 번에 같은 환경에서 여러 장 찍어 둡니다. 촬영 조건이 같으면 톤이 자동으로 맞습니다.
- 무료 이미지를 쓸 때는 같은 작가의 사진을 골라 쓰면 톤이 비슷합니다.
- 강의 썸네일을 직접 만든다면 배경색을 메인 색상 또는 메인 색상의 연한 버전으로 고정합니다. 강의마다 다른 배경색을 쓰면 목록 페이지에서 산만해 보입니다.
- 텍스트가 들어간 이미지(배너, 썸네일)의 폰트는 한 가지로 통일합니다. 폰트가 바뀌면 색상이 같아도 다른 사이트처럼 보입니다.
적용 후 점검하는 항목
색상과 이미지 기준을 정했으면, 사이트의 주요 페이지를 순서대로 열어 확인합니다.
- 메인 페이지 배너 — 메인 색상이 들어가 있는가
- 강의 목록 페이지 — 썸네일 이미지의 밝기와 채도가 비슷한가
- 강의 상세 페이지 — 본문 이미지와 썸네일의 톤이 맞는가
- 소개 페이지 — 프로필 사진의 색온도가 사이트 전체 톤과 어울리는가
- 게시판과 공지 — 별도 이미지를 넣었다면 톤이 맞는가
한 페이지씩 열어 보면 톤이 튀는 이미지가 눈에 들어옵니다. 그 이미지만 밝기나 색온도를 조절하면 됩니다. 전체를 한 번에 바꾸려 하면 끝나지 않으므로, 메인 페이지와 강의 목록 페이지 두 곳을 먼저 맞추고 나머지를 순서대로 고칩니다.
런모아로 사이트 색상과 이미지 톤을 맞추는 방법
런모아의 페이지 에디터에서 메인 색상을 지정하면 버튼, 강조 영역, 링크 색상이 한 번에 바뀌므로 페이지마다 색을 따로 맞출 필요가 없습니다. 강의 썸네일과 배너 이미지는 관리자 화면에서 업로드한 뒤 목록 페이지에서 바로 톤을 비교할 수 있어, 어울리지 않는 이미지를 바로 찾아 교체할 수 있습니다.
사이트 개설부터 색상 설정, 이미지 업로드까지의 과정은 런모아 강의 사이트 만들기 페이지에서 확인할 수 있습니다.
#퍼스널브랜드 #홈페이지디자인 #색상톤통일 #이미지톤 #브랜드컬러 #강사홈페이지 #온라인강의사이트 #사이트디자인 #퍼스널브랜딩 #런모아
