로고 앞에서 멈추는 이유
홈페이지를 만들기 시작하면 화면 구성은 생각보다 빨리 진도가 나갑니다. 문제는 상단 왼쪽에 들어갈 로고 자리입니다. 여기가 비어 있으면 아무리 아래쪽을 잘 채워도 완성된 느낌이 나지 않습니다. 그래서 로고를 먼저 해결하려다 몇 주씩 진도가 멈추는 경우가 많습니다.
실제로 홈페이지를 처음 만드는 상황에서는 로고 제작이 가장 큰 병목이 됩니다. 디자이너를 찾으려면 견적과 일정 조율이 필요하고, 직접 만들려니 어떤 프로그램을 써야 하는지부터 막힙니다. 그러는 동안 사이트는 공개되지 않은 채로 남아 있습니다.
순서를 바꾸면 이 병목이 사라집니다. 로고를 완성한 다음 홈페이지를 만드는 것이 아니라, 홈페이지를 먼저 공개해두고 로고는 나중에 교체하는 방식입니다. 이 글에서는 그 순서를 구체적으로 정리했습니다.
1단계 — 글자만으로 시작한다
가장 먼저 확인하셔야 할 것은 로고가 반드시 그림이어야 하는 것은 아니라는 점입니다. 상단 영역에 회사명이나 가게 이름을 글자로 넣고, 글꼴과 자간만 정리해도 로고 역할을 합니다. 실제로 이름을 그대로 쓰는 방식은 오히려 검색하는 사람에게 이름을 각인시키는 데 유리합니다.
이때 확인하실 부분은 세 가지입니다. 첫째, 이름이 길면 두 줄로 접히지 않는지 봅니다. 모바일 화면에서 상단이 좁아지면 긴 이름이 어색하게 끊깁니다. 둘째, 배경색과 글자색의 명암 차이가 충분한지 봅니다. 연한 회색 배경에 연한 회색 글자를 얹으면 화면 밝기를 낮춘 기기에서는 거의 보이지 않습니다. 셋째, 이름 옆에 짧은 설명을 붙일지 정합니다. 업종이 이름만으로 드러나지 않는 경우에는 한 줄 설명이 도움이 됩니다.
기능형 빌더 호스팅에서는 드래그와 인라인 편집으로 이 부분을 직접 손볼 수 있습니다. 글자를 클릭해 바로 고치고, 모바일 화면은 자동으로 맞춰지기 때문에 별도로 모바일용 화면을 다시 만들 필요가 없습니다. 자세한 내용은 기능형 빌더 호스팅 소개에서 확인하실 수 있습니다.
2단계 — 형태가 필요하면 이름에서 뽑아낸다
글자만으로 부족하다고 느끼실 때가 있습니다. 그럴 때 갑자기 복잡한 도형을 만들려고 하면 다시 막힙니다. 현실적인 방법은 이미 가지고 있는 이름에서 형태를 뽑아내는 것입니다.
첫 글자 하나만 크게 키워 사각형이나 원 안에 넣는 방식이 가장 빠릅니다. 이름이 두 단어라면 각 단어의 첫 글자를 나란히 두는 방식도 있습니다. 이렇게 만든 형태는 화려하지 않지만, 브라우저 탭이나 명함처럼 작은 자리에서 알아보기 쉽다는 장점이 있습니다. 로고는 크게 보일 때보다 작게 줄어들 때 판가름 나기 때문에 이 점이 중요합니다.
색은 두 가지를 넘기지 않는 편이 좋습니다. 색이 많아질수록 작은 크기에서 뭉개집니다. 어떤 색을 골라야 할지 감이 오지 않는다면 템플릿 갤러리에서 같은 업종의 완성형 디자인이 어떤 색을 쓰는지 훑어보시는 방법이 있습니다. 업종마다 자주 쓰이는 색 계열이 있고, 거기서 크게 벗어나지 않는 편이 방문자에게 익숙하게 읽힙니다.
3단계 — 브라우저 탭 아이콘을 빼먹지 않는다
상단 로고를 챙기고 나면 대부분 여기서 마무리했다고 생각합니다. 그런데 정작 방문자가 자주 마주치는 자리가 하나 더 있습니다. 브라우저 탭에 뜨는 작은 아이콘입니다.
이 아이콘을 비워두면 브라우저가 기본 문서 모양을 대신 보여줍니다. 탭을 여러 개 띄워놓고 일하는 사람에게는 우리 사이트만 이름 없는 회색 종이로 남는 셈입니다. 즐겨찾기에 담아둔 목록에서도 마찬가지입니다.
이 아이콘은 크기별로 여러 장이 필요합니다. 브라우저 탭, 즐겨찾기, 휴대폰 홈 화면에 추가했을 때 쓰이는 크기가 각각 다르기 때문입니다. 이걸 직접 하나하나 줄여서 저장하려면 번거롭습니다. 아이비전트는 무료 도구 항목에 파비콘 생성기를 두고 있어, 정사각형 이미지 한 장을 넣으면 필요한 크기들을 한 번에 만들어 줍니다. 별도 결제나 가입 절차 없이 쓰실 수 있습니다.
넣은 뒤에 바로 안 보인다고 당황하실 필요는 없습니다. 브라우저가 이전 아이콘을 기억하고 있는 경우가 많아서, 시크릿 창으로 주소를 다시 열어보시면 반영된 모습이 확인됩니다.
4단계 — 본문에 들어갈 사진은 따로 생각한다
로고와 아이콘을 정리하고 나면 남는 것이 본문 사진입니다. 로고는 우리가 직접 만들어야 하지만, 본문 사진은 사정이 다릅니다. 여기서 시간을 쓰면 공개가 또 늦어집니다.
기능형 빌더 호스팅에는 무료 이미지 라이브러리가 내장되어 있어, 편집 화면 안에서 사진을 골라 바로 넣을 수 있습니다. 촬영 일정을 잡지 않아도 첫 공개는 넘길 수 있다는 뜻입니다. 나중에 직접 찍은 사진이 준비되면 같은 자리에 교체하시면 됩니다.
다만 무료 사진을 로고로 쓰는 것은 권해드리지 않습니다. 같은 이미지를 다른 사업장에서도 쓸 수 있어 우리를 구분하는 표시가 되지 못하기 때문입니다. 사진은 분위기를 채우는 용도로, 로고는 이름을 다듬는 방식으로 나누어 생각하시는 편이 안전합니다.
5단계 — 공개하고 나서 교체한다
여기까지 오면 홈페이지를 공개할 수 있는 상태가 됩니다. 글자 로고, 탭 아이콘, 본문 사진이 모두 자리를 잡았기 때문입니다. 완성된 로고가 아니라는 점이 마음에 걸릴 수 있지만, 공개되지 않은 사이트는 아무 일도 하지 않는다는 점을 생각하시면 판단이 쉬워집니다.
교체는 생각보다 간단합니다. 편집 화면에서 이미지를 바꾸는 방식이면 상단 로고와 탭 아이콘 두 곳만 손보시면 됩니다. 페이지를 통째로 다시 만들 일은 없습니다. 문구만 고치고 싶을 때도 마찬가지로 해당 부분만 골라 수정할 수 있습니다.
정적 사이트로 운영하시는 경우에는 IBIGENT Studio 웹 편집기에서 화면을 열어 그 자리에서 고치는 방법도 있습니다. 파일을 내려받아 수정하고 다시 올리는 과정을 거치지 않아도 됩니다.
정리 — 순서만 바꾸면 됩니다
로고 때문에 홈페이지 공개가 미뤄지는 상황은 순서 문제입니다. 로고를 완성한 다음 홈페이지를 만드는 것이 아니라, 글자 로고로 먼저 공개하고 나중에 교체하는 순서로 바꾸면 병목이 사라집니다.
확인하실 순서는 다섯 가지입니다. 이름을 글자로 정리하고, 필요하면 첫 글자에서 형태를 뽑고, 브라우저 탭 아이콘을 만들어 넣고, 본문 사진은 내장 라이브러리로 채우고, 공개한 뒤 준비되는 대로 교체합니다. 각 단계에서 필요한 도구는 이미 무료로 제공되고 있으니, 도구를 찾는 데 시간을 더 쓰지 않으셔도 됩니다.
요금과 제공 범위는 요금제 안내에서 비교해보실 수 있습니다.
