아무리 좋은 물건을 갖춘 가게라도, 문을 열고 들어선 손님이 첫눈에 어수선함을 느낀다면 발길을 돌리기 쉽습니다. 온라인 공간에서도 마찬가지입니다. 방문자는 사이트에 들어온 뒤 채 5초가 지나기 전에 이곳을 더 둘러볼지, 그냥 나갈지를 결정합니다. 지금까지 정성껏 채워온 프로필과 이력, 메뉴 구조가 아무리 훌륭해도, 그것을 담아내는 첫 화면이 정돈되어 있지 않으면 방문자는 그 안쪽까지 들어와보지 못한 채 발길을 돌리게 됩니다.

이번 단계에서는 바로 이 첫 화면, 즉 메인 화면을 완성하는 작업을 다루게 됩니다.

첫인상은 이미 정해진 옷을 고르는 것부터

메인 화면을 꾸민다고 하면 흰 도화지 위에 처음부터 그림을 그려야 할 것 같은 부담이 들 수 있습니다. 하지만 실제로는 이미 여러 형태로 완성되어 있는 템플릿 가운데 자신에게 어울리는 것을 고르는 일에 가깝습니다. 마치 기성복 매장에서 자신의 체형과 분위기에 맞는 옷을 골라 입는 것과 비슷합니다. 몸에 맞는 옷을 고르고 나면, 그 위에 약간의 색상만 더해 자신만의 분위기를 완성하면 됩니다.

나에게 맞는 옷 고르기

디자인관리의 템플릿관리 화면에는 각기 다른 성격을 가진 여러 테마가 마련되어 있습니다. 차분하고 어두운 색조를 기본으로 한 형태는 대부분의 목적에 무난하게 어울리는 기본형이며, 연락처와 상담을 중심에 둔 형태는 방문자의 문의를 적극적으로 유도하고 싶은 사람에게 알맞습니다. 작업물을 시각적으로 보여주는 데 특화된 형태는 사진이나 디자인처럼 결과물 자체가 중요한 활동에 어울리고, 개인의 얼굴과 이력을 전면에 내세우는 형태는 프로필을 중심으로 신뢰를 쌓고 싶은 사람에게 적합합니다. 상품을 소개하고 판매까지 이어가려는 사람이라면 판매를 강조하는 형태를 고르는 것이 자연스럽습니다.

어떤 형태를 고를지 고민이 된다면, 자신이 방문자에게 가장 먼저 보여주고 싶은 것이 얼굴인지, 작업물인지, 연락 통로인지, 아니면 상품인지를 먼저 정리해보는 것이 선택의 기준이 됩니다.

색을 입혀 나만의 분위기 만들기

테마를 고른 뒤에는 색상을 조정해 자신만의 느낌을 더할 수 있습니다. 같은 형태의 테마라도 어떤 색을 입히느냐에 따라 분위기는 크게 달라집니다. 차분한 색을 고르면 신뢰감 있고 안정적인 인상을 주고, 밝고 화사한 색을 고르면 생기 있고 친근한 인상을 줍니다.

색상 선택에 정답은 없지만, 자신이 평소 좋아하는 색이나 자신의 활동 분야와 어울리는 색을 기준으로 삼으면 어렵지 않게 결정할 수 있습니다. 화면에서 색을 바꿔가며 미리보기를 확인할 수 있으므로, 여러 조합을 시도해보고 가장 마음에 드는 것을 고르면 됩니다.

첫 화면에 무엇을 보여줄지 정하는 일

테마와 색상이 정해지면, 이제 메인 화면 안에 실제로 어떤 내용을 배치할지 정할 차례입니다. 메인레이아웃관리 화면에서는 공지, 배너, 활동 소식 등 여러 모듈 가운데 첫 화면에 보여줄 것을 체크로 선택하고, 그 순서를 정할 수 있습니다. 각 모듈에는 저마다의 제목을 붙일 수 있고, 필요하다면 배너나 특정 링크와 연결할 수도 있습니다.

또한 컴퓨터 화면과 스마트폰 화면에서 각각 몇 개씩 보여줄지를 따로 정할 수 있다는 점도 눈여겨볼 부분입니다. 많은 방문자가 스마트폰으로 사이트를 확인한다는 점을 고려하면, 모바일 화면에서는 노출 개수를 조금 줄여 화면이 너무 길어지지 않도록 하는 것이 방문자의 피로를 덜어주는 방법입니다.

화면이 살아 움직이게 하는 슬라이드

메인화면 가장 위쪽에는 여러 이미지가 자동으로 넘어가며 보이는 슬라이드를 배치할 수 있습니다. 메인슬라이드관리 화면에서는 슬라이드로 보여줄 이미지들을 묶어 그룹으로 구성하고, 컴퓨터와 스마트폰 화면에서의 높이, 그리고 화면이 위아래로 스크롤되며 넘어갈지, 좌우로 미끄러지듯 넘어갈지, 부드럽게 사라지며 바뀔지와 같은 전환 방식을 정할 수 있습니다.

화면 상단에서 이미지가 자연스럽게 움직이고 있으면, 정지된 화면보다 훨씬 생동감 있는 첫인상을 전달할 수 있습니다.

시선을 붙잡는 배너와, 꼭 필요한 순간의 팝업

배너관리 화면에서는 특정 소식이나 이벤트를 강조하고 싶을 때 활용할 수 있는 이미지 영역을 준비할 수 있고, 팝업관리 화면에서는 방문자가 사이트에 들어오자마자 반드시 확인했으면 하는 안내 사항을 화면 위에 별도로 띄울 수 있습니다. 다만 팝업은 너무 자주 사용하면 오히려 방문자에게 불편함을 줄 수 있으므로, 정말 중요한 소식이 있을 때에만 아껴서 사용하는 것이 좋습니다.

5초 안에 방문자를 붙잡는 법

결국 첫 화면을 완성하는 여러 요소들은 하나의 목표로 모입니다. 방문자가 사이트에 들어선 순간 이곳이 정돈되어 있고, 무엇을 하는 공간인지 한눈에 파악할 수 있도록 만드는 것입니다. 자신의 목적에 맞는 테마를 고르고, 어울리는 색을 입히고, 꼭 필요한 내용만 순서에 맞게 배치하는 것만으로도 이 목표는 충분히 달성됩니다. 지나치게 많은 요소를 한꺼번에 욕심내기보다는, 방문자의 시선이 자연스럽게 머물 수 있도록 여백과 순서를 정리하는 것이 오히려 더 강한 인상을 남깁니다.

이제 완성된 얼굴, 채워야 할 콘텐츠

사이트의 얼굴이라 할 수 있는 메인 화면이 완성되고 나면, 이제부터는 이 공간을 실제 이야기로 채워나가는 과정이 남습니다. 다음 단계에서는 인공지능의 도움을 받아 이 공간을 꾸준히 채울 콘텐츠를 준비하기 위한 사전 작업을 다루게 됩니다.