홈페이지 공통 요소 디자인 [STEP1/2편] - 윅스 기업 홈페이지 제작

윅스를 활용하여 홈페이지 만들기 강좌를 7단계로 나누어 진행하고 있습니다. 1단계는 홈페이지를 제작할 때 공통으로 디자인하는 부분을 설명하고 있습니다. 1단계 1편에서는 WiX 에디터 레이아웃 원본으로 시작하여 저장과 미리 보기 그리고 게시하기의 차이점을 설명했고 홈페이지 내 공통으로 사용되는 색상을 미리 지정하여 통일감을 디자인하고 텍스트 테마 설정으로 전문적인 홈페이지로 완성하는 실습을 했습니다.

홈페이지 공통 요소 디자인[STEP1/2편] 표지

WiX의 다양한 기능들 중에 벡터아트를 활용한 마우스 오버 상자 만들기로 정적인 홈페이지에 동적인 움직임으로 생동감을 주는 방법과 스트립 추가하여 홈페이지 화면 전체를 활용하는 방법은 이번 윅스 강좌 2편에서 찾아보실 수 있습니다. ‘윅스 기업 홈페이지 제작 따라 하면서 완성하기’ 강좌는 처음부터 따라 하기를 통해 홈페이지 하나를 완성하는 과정이므로 특별한 기능을 참고하시는 경우를 제외하고 처음부터 함께 실습하시는 것을 권해 드립니다.

윅스 기업 홈페이지 제작 따라하면서 완성 하기

Ⅰ WiX 데스크톱 버전 사이트 만들기

STEP 1/2편 홈페이지 공통 요소 디자인

1-5 머리글 디자인

1-5-1 머리글 디자인 변경으로 배경 색상 지정

머리글을 선택하고 배경색을 변경하기 위해 ① 머리글 디자인 변경을 클릭합니다. 디자인 설정창에서 추가 디자인중에 색상만 채워진 것 하나를 선택합니다. 하단의 디자인 사용자 지정을 클릭하고 색상 및 투명도에서 배경색을 선택합니다. 1-3 홈페이지 색상 지정에서 이미 홈페이지에 사용될 색상을 지정했으므로 ② #ded200을 선택하여 배경 전체를 채웁니다. 

WiX 홈페이지 머리글 디자인 

1-5-2 벡터아트 활용하여 로고 만들기와 마우스오버 상자 디자인 

먼저 로고는+추가에서 ① 벡터아트의 아이콘에서 더보기를 선택합니다. 벡터아트 선택 화면에서  검색창에 ‘웨이브’를 입력합니다. 검색 결과 화면에서 ② 웨이브아이콘을 페이지에 추가합니다. 툴바에서 크기를 W50, H50으로 줄이고 색상을 검정(#000000)으로 변경합니다. 회사명은 +추가를 클릭하고 ③텍스트에서 제목1을 선택합니다.  ‘BiZConsulting’입력하고 글꼴 크기(px)를 25, 색상을 검정(#000000)으로 변경합니다.

윅스 벡터아트를 활용한 로고 만들기

마우스오버상자는 기본 및 마우스오버 뷰 등 두 가지 뷰를 제공합니다. 윅스 에디터 왼쪽 메뉴의  +추가를 선택하면 보이는 인터랙티브에 있습니다.  디자인 작업은 기본 일때는 로고와 회사명이 검정(#00000)이고  마우스오버시에는 둘다 흰색(#ffffff)으로 바뀌도록 변경하고  클릭하면 홈(메인)화면으로 이동하는 링크를 설정합니다.

WiX 사용법 - 마우스오버상자 미리 보기

1. 마우스오버상자를 하나 선택하여 에디터 화면으로 추가합니다. 
2. 텍스트를 제거하고 마우스오버뷰를 선택하여 텍스트와 라인을 삭제합니다. 기본뷰로 돌아와 툴바에서 W260, H60 크기를 변경합니다.
3. 두가지 뷰 모두 배경변경을 클릭하고 설정에서 색상을 #ded200으로 지정합니다.
4. 이미 제작해 둔 로고 아이콘과 회사명 텍스트를 정렬을 가운데로 맞추고 하나 더 복사합니다. 
5. 각각 기본과 마우스오버뷰에 삽입합니다.
6. 마우스오버뷰에 로고와 텍스트는 흰색으로 변경합니다.
7. 미리보기 모드에서 결과를 확인합니다. 
8. 홈으로 이동 링크를 설정합니다. 보통은 마우스오버해서 보이는 요소에 링크 설정하지만 마우스를 올리자마자 클릭 이동하는 사용자와 모바일에서 기본 뷰만 사용할수도 있으므로 모든 요소에 링크 이동 설정 합니다. 

마우스오버상자 만드는 과정

TIP 마우스오버상자는 미리보기모드에서 마우스오버 시 상태를 확인할 수 있습니다.  

1-5-3  사이트 메뉴 추가와 디자인 변경하기

메뉴(페이지)를 추가하려면 윅스 에디터 화면 상단 메뉴바에서 페이지를 선택하고 관리를 클릭하여 사이트 메뉴로 이동합니다. ① +페이지 추가 버튼을 클릭하여 회사소개, 서비스소개, 고객상담을 추가합니다. 홈은 메뉴에서 비공개 처리합니다.

+추가에서 ② 메뉴를 선택하고 디자인을 변경합니다. ③ 디자인 사용자 지정에서 기본일 때 텍스트 색상은 검정, 크기는 20, 글꼴은 Nanum Gothic, 테두리는 색상 및 투명도를 ‘0%’로 설정합니다. 마우스오버 시에는 텍스트와 테두리의 색상은 미리 설정한 #0077a2로 변경합니다. 클릭한 경우 텍스트 색상은 #0077a2, 테두리는 색상 및 투명도를 ‘0%’로 설정합니다. 메뉴에 마우스를 올려 색상과 선이 보이는 디자인이므로   미리 보기로 메뉴에 디자인이 적용된 결과를 확인합니다.

WiX 홈페이지 메뉴 추가와 디자인 설정

1-5-4  머리글에 스트립 추가하여 로고와 메뉴 배치하기

홈페이지를 데스크톱과 태블릿, 모바일 기기 등 다양한 크기에 맞도록 디자인을 적용하려면 WiX에서는 그리드라인 (980pixel) 안에 콘텐츠를 삽입해야 합니다. 그러나 대형 화면의 경우 980픽셀 안에 디자인을 적용하면 화면 중간에 집중되고 다양한 디자인을 구현할 수 없습니다. 이런 경우 윅스 홈페이지에서 전체 화면을 활용하려면 스트립을 사용하여 단을 추가하는 방법으로 디자인을 구현할 수 있습니다. 완성한 로고와 메뉴는 스트립에 단을 추가하여 각각 단1과 단2에 삽입합니다. 즉 그리드라인 가로 넓이 980을 두 단으로 나누고 그 외 영역은 여백이 되도록하면 가로로 넓은 화면 전체를 사용하여 디자인을 적용할 수 있습니다. 아래 설명 이미지를 참조하세요.

윅스 사용법 - 그리드라인 

TIP 윅스로 홈페이지를 만들 때  '스트립'을 추가하고 '단'을 활용하면 전체 화면을 활용한 다양한 디자인을 할 수 있습니다. 

기본형 스트립을 화면으로 추가합니다. 스트립이 선택된 상태에서길이를 H80으로 변경하고 레이아웃을 클릭하여 단을 추가합니다. 스트립이 두개의 단으로 분리됩니다. 단 1을 선택하여 로고를 삽입하고 단 2에는 메뉴를 삽입합니다. 로고와 메뉴를 삽입한 스트립은 머리글로 이동합니다. 머리글 배경에 맞도록 단 배경 설정을 색상 및 투명도를 0%로 변경합니다. 미리 보기를 통해 완성된 머리글 디자인을 확인합니다.

위 설명으로 부족한 부분은

 아래 동영상으로 

제작 과정 전체를 

확인하실 수 있습니다. 

1-6 바닥글 디자인

1-6-1 바닥글 디자인 변경과 로고 삽입하기 

바닥글을 선택하여 디자인 변경을 클릭하고 디자인 중에서 #2F2E2E가 적용된 것을 선택합니다. 상단의 로고와 회사명을 복사하여 페이지로 이동합니다. 로고는 크기 W100, H100, 색상은 #666666 변경하고 텍스트 크기는 18(px)로 수정하고 바닥글로 이동합니다.

1-6-2 SNS 모음 추가하기

소셜 도구 모음은 ① +추가에서 SNS를 선택하면 보입니다. 바닥글에 추가하여 링크 설정 아이콘을 클릭합니다. 팝업창에서 추가 아이콘을 선택하여 흰색 구글 블로그와 유튜브를 추가하고 그외 모두 삭제합니다. 각 아이콘에서 ② 구글 블로그를 선택하여 제목 (대체 텍스트)와 링크를 연결합니다. ③ 레이아웃을 선택하여 크기 26, 간격 6으로 지정합니다. 

WiX 홈페이지 SNS모음 추가 과정

TIP WiX 홈페이지 내 SNS를 연결하면 내 웹사이트 인지도를 높이는 좋은 방법이며 웹사이트로의 백 링크는 내 페이지 랭크를 높일 수 있는 훌륭한 방법입니다

1-6-3 텍스트를 추가하여 주소등 기본 정보와 카피라이트 입력하기

바닥글로 이동한 후 내용을 회사정보로 변경합니다.설정에서 글꼴을 한국어로 미리 볼 수 있는 Malgun Gothic으로 변경하고 단락 2의 추천 디자인으로 저장합니다. 같은 방법으로 카피 라이트를 삽입하고 크기와 색상을 변경합니다. 

1-6-4 Back to TOP 앱 설치 

홈페이지 방문자가 사이트 상단으로 이동하기 편리하도록 화면이 스크롤 될 때 따라다니는 TOP 버튼을 만들기 위해 WiX 앱 마켓에서 검색창에  ‘back to top’을 입력하여 추가합니다. 설정을 클릭하여 위치는 화면 우측 하단, 레이아웃은 큰 아이콘만 보이게 하기, 표시할 페이지는 전체, 디자인은 배경 없고, 아이콘 색상은 기본 검은색, 마우스 오버 시 #DED200 로 변경하도록  지정합니다. 저장하고 미리 보기로 확인합니다. 

Back to TOP 앱 소개 화면

'WiX 홈페이지 제작 강좌'입니다. 

설명이 부족한 부분은

아래 동영상을 참고 바랍니다. 

---

관련 링크

홈페이지 공통 요소 디자인 [STEP1/1편] - 윅스 기업 홈페이지 제작 →  
홈 화면 상세페이지 만들기[STEP 2] - 윅스 기업 홈페이지 제작 →   
윅스 기업 홈페이지 제작 따라하면서 완성 하기 →