퍼스널 브랜드 플랫폼을 열고 강의를 올렸는데 페이지마다 느낌이 다르다면, 방문자는 이 사이트가 한 사람이 운영하는 곳인지 확신하지 못합니다. 대표 색상과 로고가 통일되어 있으면 페이지를 옮겨 다닐 때마다 같은 브랜드 안에 있다는 인상이 남습니다. 이 글에서는 색상을 고르고, 로고를 준비하고, 페이지마다 적용하는 순서를 정리합니다.
대표 색상을 먼저 정해야 하는 이유
사이트에 들어가면 텍스트보다 색이 먼저 눈에 들어옵니다. 버튼, 상단 바, 강조 문구에 서로 다른 색이 쓰이면 방문자는 정돈되지 않은 느낌을 받습니다. 대표 색상을 하나 정해두면 아래 항목을 빠르게 결정할 수 있습니다.
- 버튼 배경색
- 상단 메뉴 바 색상
- 링크·강조 텍스트 색상
- 푸터 배경색
색이 결정되지 않은 상태에서 페이지 레이아웃부터 잡으면, 나중에 색을 바꿀 때 모든 페이지를 다시 손봐야 합니다. 순서는 색상 → 로고 → 페이지 적용입니다.
대표 색상을 고르는 세 가지 기준
색을 고를 때 막연하면 아래 세 가지 기준으로 좁힙니다.
이미 쓰고 있는 색을 가져온다. SNS 프로필, 명함, 수업 자료에 반복적으로 쓰는 색이 있다면 그대로 가져옵니다. 수강생이 이미 익숙한 색이 브랜드 인식에 가장 효과적입니다.
분야의 일반적인 색감을 참고한다. 요리·베이킹은 따뜻한 톤, IT·코딩은 차가운 톤이 많습니다. 관습을 따르면 방문자가 분야를 직감적으로 이해합니다. 의도적으로 벗어나면 시선을 끌 수 있지만 전체 조화를 맞추기 어려워집니다.
가독성을 확인한다. 밝은 배경에 밝은 버튼을 올리면 클릭 영역이 잘 안 보입니다. 대표 색상은 흰색 배경 위에 놓았을 때 글자가 읽히는 정도의 명도 대비가 필요합니다.
대표 색상은 하나만 정합니다. 보조 색상은 대표 색보다 밝거나 어두운 톤으로 만들 수 있으므로 처음에는 하나만 확보하면 충분합니다.
색상 코드를 확인하고 기록하는 방법
색을 “파란색”이라고만 기억하면 매번 미묘하게 다른 파란색을 고르게 됩니다. 색은 반드시 HEX 코드(#으로 시작하는 6자리 문자)로 기록합니다.
- 이미 쓰고 있는 색을 추출할 때: 이미지 편집 도구의 스포이드 기능으로 색 코드를 확인합니다. 스마트폰 갤러리 앱에도 비슷한 기능이 있는 경우가 있습니다.
- 새로 고를 때: 브라우저 검색창에 “color picker”를 입력하면 바로 색을 고르고 코드를 복사할 수 있습니다.
기록해 둘 항목은 세 가지입니다.
- 대표 색상 HEX 코드 (예: #2D5BFF)
- 흰색 글자를 올렸을 때 읽히는지 여부
- 밝은 버전 코드 — 배경 등에 쓸 용도로 필요한 경우 함께 기록
메모장이든 문서 앱이든 한 곳에 적어두면 나중에 페이지를 수정할 때 해당 코드를 그대로 붙여 넣을 수 있습니다.
로고를 준비하는 단계
로고가 없어도 사이트를 열 수 있지만, 브라우저 탭과 사이트 상단에 표시되는 이미지가 없으면 신뢰도가 낮아 보입니다. 처음부터 전문 디자이너에게 맡길 필요는 없습니다. 아래 순서로 최소한의 로고를 확보합니다.
1단계: 텍스트 로고부터 시작한다. 내 이름이나 브랜드 이름을 서체만 골라 이미지로 저장합니다. 무료 디자인 도구에서 텍스트를 입력하고 PNG로 내보내면 됩니다. 글꼴 하나와 대표 색상 하나면 충분합니다.
2단계: 배경을 투명하게 저장한다. 로고 배경에 흰색이 깔려 있으면 사이트 상단 바 색상과 충돌합니다. 저장할 때 투명 배경 PNG로 내보냅니다.
3단계: 크기를 확인한다. 사이트 상단에 들어가는 로고는 보통 가로 200~300px, 세로 50~80px 정도입니다. 너무 크면 잘리고, 너무 작으면 흐릿하게 보입니다. 실제 사이트에 올린 뒤 PC와 모바일 양쪽에서 확인합니다.
4단계: 파비콘도 준비한다. 파비콘은 브라우저 탭에 뜨는 작은 아이콘입니다. 로고를 정사각형으로 잘라 32×32px 또는 64×64px로 저장하면 됩니다. 텍스트 로고라면 이니셜 한 글자만 떼어 쓰는 것이 탭에서 잘 보입니다.
퍼스널 브랜드 플랫폼 페이지별 적용 순서
색상과 로고가 준비되면 사이트 페이지에 반영합니다. 한꺼번에 모든 페이지를 고치려 하면 지치므로, 방문자가 가장 먼저 보는 곳부터 순서대로 적용합니다.
1. 사이트 기본 설정
- 로고 이미지 등록
- 파비콘 등록
- 대표 색상 코드 입력 — 버튼·링크에 자동 적용됨
2. 메인 페이지
- 상단 영역 배경색 또는 배경 이미지 위 버튼에 대표 색상 반영
- 강의 목록 카드의 버튼 색상 확인
3. 강의 소개 페이지
- 결제 버튼 색상이 대표 색상과 일치하는지 확인
- 소개 텍스트에 강조색을 쓸 경우 대표 색상 또는 그보다 어두운 톤 사용
4. 강사 소개 페이지
- 프로필 사진 옆 배경색 또는 구분선 색상 통일
- 텍스트 링크 색상 확인
5. 게시판·공지
- 제목 링크 색상이 대표 색상을 따르는지 확인
적용 후에는 반드시 PC와 모바일 양쪽에서 전체 페이지를 한 바퀴 돌며 확인합니다. 모바일에서 버튼이 배경과 비슷한 색이라 안 보이는 경우가 자주 발생합니다.
색상이나 로고를 나중에 바꿀 때 확인할 항목
운영 중에 색상이나 로고를 바꿔야 할 때가 있습니다. 사이트만 바꾸고 다른 곳을 놓치면 방문자가 혼란을 느낍니다.
- 사이트 안: 기본 설정, 메인 페이지, 강의 소개 페이지, 강사 소개 페이지, 게시판
- 사이트 밖: SNS 프로필 이미지, 명함, 수업 자료, 이메일 서명
변경 전에 현재 색상 코드와 로고 파일을 따로 보관해 두면, 마음에 안 들 때 되돌릴 수 있습니다.
런모아로 대표 색상과 로고를 사이트에 적용하는 방법
런모아에서 사이트를 만들면 관리자 화면의 사이트 설정에서 대표 색상 코드를 입력할 수 있고, 입력한 색상이 버튼·링크·강조 영역에 자동으로 반영됩니다. 로고와 파비콘도 같은 설정 화면에서 이미지를 올리면 상단 바와 브라우저 탭에 바로 표시됩니다. 페이지 에디터에서 개별 섹션의 배경색이나 텍스트 색상을 직접 수정할 수도 있어, 이 글에서 정리한 페이지별 적용 순서를 그대로 따라가며 작업할 수 있습니다.
런모아 강의 사이트 만들기 페이지에서 사이트 구성 화면과 설정 방법을 확인할 수 있습니다. 색상과 로고를 미리 정한 뒤 사이트를 만들면 첫 방문자부터 통일된 인상을 줄 수 있습니다.
#퍼스널브랜드 #퍼스널브랜딩 #브랜드색상 #로고디자인 #강의사이트 #사이트디자인 #온라인강의 #브랜드아이덴티티 #런모아
