[무엇을] 첫 페이지 만들기
웹사이트의 얼굴, 홈페이지 만들기
모든 웹사이트에는 도메인으로 접속했을 때 처음으로 마주하게 되는 페이지가 있습니다. 엄밀한 의미에서의 '홈'페이지는 바로 이 첫 페이지를 말합니다. 마케팅 기능에 집중한다면 '랜딩 페이지'라고 부르기도 합니다. 어쨌든 웹사이트의 얼굴, 홈페이지가 주는 첫인상의 중요성은 굳이 더 강조할 필요가 없겠지요?
당연히 보기 좋고 멀끔하면 일단 호감형 첫인상으로 시작할 수 있습니다. 반면 디자인이 조악하거나, 중요한 정보가 한눈에 들어오지 않는다면 사용자는 순식간에 흥미를 잃습니다. 지난 글을 참고하신다면, 우리는 명료한 도메인과 고품질 이미지를 준비해서 일차적인 신뢰도 허들은 통과했습니다. 이제부터는 구성과 내용으로 승부할 차례입니다. 제가 제안하는 홈페이지 제작은 개인 콘텐츠 크리에이터를 기준으로 하고 있습니다. 즉, 개인(이 글을 읽고 계신 작가님!)을 잘 대표하는 것이 좋은 구성의 일차적 조건입니다. 작가 홈페이지의 예시로 우리에게도 '타이탄의 도구들'로 잘 알려진 팀 페리스의 홈페이지를 잠시 살펴보겠습니다.
팀 페리스는 자기 계발서 작가이기도 하면서, 팟캐스트도 진행하는 사업가입니다. (이 다양한 정체성 때문에 이 작가에게 웹사이트가 더욱 유효한 것 같습니다. 한 가지 채널에서만 활동하는 크리에이터는 통합적 개인 웹사이트에 대한 관심이 더 낮은 것으로 보입니다.) 보시다시피 첫 화면인 홈페이지를 통해 진행하는 방송도 소개하고, 책도 홍보하고, 블로그 포스팅도 게시합니다. 인물을 강조하는 디자인과 다양한 콘텐츠 배열이 직관적으로 그것을 보여주지요. 동시에 전형적인 흐름을 거스르지도 않기에, 사용자가 이해하기가 어렵지 않습니다.
조금 자세히 살펴볼까요. 첫 번째 영역에서 팀 페리스는 자기 사진을 아주 크게 걸었네요. 본인이 유명인이니 타당한 선택으로 보입니다. 그리고 자기 글의 '맛보기'를 유도하는 버튼도 강조했습니다. 방문객을 독자로 전환하는 효과적인 마케팅 전략입니다. 두 번째 영역을 통해 진행하는 방송을 간략히 소개하고, 구체적인 수치를 통해 얼마나 인기 있는 팟캐스트인지 뽐내고 있습니다. 방송에 바로 접속할 수 있도록 다양한 링크를 제공하기도 합니다. 그 아래 영역은 자신 있는 콘텐츠(인기 팟캐스트 에피소드)를 나열합니다.
이런 포인트를 살펴보면, 우리도 우리의 홈페이지를 어떻게 구성할지 다양하게 상상해 볼 수 있습니다. 가장 먼저 무엇부터 보여줄까요? 어느 정도 크기의 영역을 할당할까요? 사용자가 솔깃할 만한 나만의 특장점이 있을까요? 그것을 구체적인 숫자로 설득할 수 있을까요? 첫 화면에서 본인 콘텐츠의 어느 정도까지 노출하는 것이 적당할까요? 자신 있게 먼저 권할 '추천 메뉴'에는 무엇이 있을까요?
작가라면 신간을 소개할 수도 있겠습니다. 자신만의 정체성이 분명하게 드러나는 소개 글도 좋은 선택입니다. 평단이나 독자에게 호평받은 부분을 강조할 수도 있구요, 사진과 이미지로 방문객의 눈을 사로잡을 수도 있습니다. 그리고 이것들의 배치 순서, 영역의 크기가 중요도에 따라 기획되어야 하겠죠. 이렇듯 홈페이지는 내가 보여줄 수 있는 것 중 액기스를 짜고 짜내서 계획적으로 구성해야 합니다. 웹사이트의 첫 화면이 매력적이지 않다면, 그다음 클릭을 기대할 수 있을까요? 제가 의학 논문을 쓰던 시절이 생각나네요. 홈페이지는 논문의 초록, 즉 Abstract에 대응합니다. 가진 것을 죄다 때려 넣으면 축약하는 의미가 없습니다. 핵심을 추려야 하지요. 어느 정도 형식성을 갖추어야 이해하기 편하다는 것도 논문의 초록과 비슷하네요. 마지막으로 독자 입장에서는 초록만 읽어보면, 귀한 시간을 들여 전체 논문을 읽을 만한 가치가 있을지 빠르게 평가할 수 있습니다. 그러니 연구자가 초록에 공들이는 이유와 웹 기획자가 첫 화면에 공들이는 이유가 비슷하다고 할 수 있지요.
ojiui.com의 홈페이지 최상단 영역입니다.제 홈페이지의 첫 영역은 제가 쓴 유일한(그래서 무척 소중한) 책 소개와 구매 링크입니다. 제가 가진 콘텐츠 중 가장 유효한 것이니까요. 저도 '백만 구독자 인플루언서!' '출간 즉시 n주간 베스트셀러!!!'같은 홍보 문구를 붙이고 싶지만 안타깝게도 해당 사항이 없습니다... 대신 책에 대한 기자단의 평가는 과분할 정도로 좋았기 때문에 이를 인용했습니다. 제 소개는 그다음 영역입니다. 작가를 보고 책을 선뜻 구매할 만큼 알려진 사람은 아니지만, 산부인과 의사이자 아기 엄마라는 이중적 정체성은 독자층에게 나름 호소력이 있기에 세 번째로 중요하다고 판단했습니다.
그다음은 제가 나름대로 고른 대표 콘텐츠입니다. 브런치북과 인기 포스팅인데요. 단, 모든 브런치북과 모든 포스팅을 첫 화면에 전부 담으려고 애쓸 필요가 없습니다. 핵심 사항만 보여주면 충분합니다. 나머지는 개별 페이지로 연결하는 것이 사용자가 탐색하기에 더 쾌적한 구성입니다. 유튜브나 인스타그램처럼 다른 소셜 미디어 활동을 병행한다면 그 부분에도 영역을 할당해야 하겠지요. 제 경우에는 강연이 또 다른 활동 분야에 해당하는데요, 제가 쓴 글보다 중요도를 낮게(하단에 배치)한 것은 임신과 육아 중에 섭외를 모두 소화하지 못해서 어쩔 수 없이 상대적으로 후순위가 되었네요. 이렇듯 각자의 상황에 따라 주력 콘텐츠부터 힘을 주는 것이 자연스러운 배열입니다.
홈페이지의 배열과 구성을 모두 기획했다면, 예쁘게 담아내서 선보이는 것도 당연히 중요한 일입니다. 하지만 여기엔 너무 스트레스받지 마세요. 모든 제작 툴에는 응용 가능한 템플렛이 있습니다. 이런 템플렛의 도움을 받으면 됩니다. 당연히 비전문가인 제가 처음부터 일일이 디자인하는 것보다, 전문가가 세팅해 놓은 기본 틀을 빌려오는 것이 효율적입니다. (요리 똥손이 공들여 끓인 국수보다, 순정 레시피대로 끓인 라면이 더 맛있는 원리랄까요..?) 저도 워드프레스 테마가 제안한 여러 템플렛 중 하나를 선택하고, 내용을 수정하여 완성했습니다. 물론 디자인 감각이 빼어나거나 코딩 지식이 있다면 더 세세한 부분까지 조정하고 개선하는 것이 가능합니다. 하지만 소규모 개인 사이트에서 가장 결정적인 부분은 아니라고 생각합니다. 우리는 웹사이트의 기본적인 형식미를 준수하고, 신뢰도 허들을 통과한 다음, 콘텐츠 그 자체로 승부를 보면 됩니다.
네, 콘텐츠요. 홈페이지를 통해 좋은 첫인상을 심어주었으니, 이제 콘텐츠를 보여줄 차례입니다. 우리의 무기는 글입니다. 브런치에 글을 쓰는 것도 좋지만, 소유권, 안정성과 자유도 면에서 충분하지가 않지요. 내 웹사이트가 오롯이 내 글을 위한 저장소이자 도서관이 되어줄 필요가 있습니다. 물론 별도의 포스팅 페이지를 만들지 않고 딱 홈페이지까지만 만들어도, 요긴한 디지털 명함이 되기는 합니다. 하지만 알맹이가 있어야 제대로 웹사이트를 만들었다고 할 수 있겠지요. 다음 글에서는 브런치에 써온 글을 웹사이트로 복사하는 자동화 코딩에 대해 알아봅니다.
