홈페이지 만들기 - 디자인 쉽게 하는 방법

일반인도 쉽게 홈페이지를 만들 수 있는 도구들이 많이 있는데요. 대표적인 해외 도구들은 워드프레스, 윅스, 위블리, 빌더올 등입니다. 워드프레스는 별도로 호스팅을 구입하고 설치하는 과정이 필요하고 나머지들은 호스팅과 페이지 편집기가 함께 제공됩니다.

   

1. 색상 

네이버 웹 사이트를 보면 전체적인 주요 색상이 녹색임을 알 수 있습니다. 전체적으로 하얀 바탕에 검정 글씨이고 로고, 메뉴, 로그인 버튼이 녹색입니다. 일반적으로 로고의 색상이 웹 사이트의 주요 색상입니다. 로고를 결정하고 웹사이트의 주요 색상으로 사용하면 됩니다.

구글 크롬 확장 프로그램 ColorPick Eyedropper 을 설치하고 화면에서 원하는 위치를 클릭하면 6자리 알파벳과 숫자로 된 코드가 보이는데요. 이 것을 헥스 색상코드라고 부릅니다. 웹사이트의 주요 색상들을 이 색상코드로 저장 후 편집기에서 사용할 수 있습니다.

자신의 웹사이트에서 사용하는 흰색과 검은색도 색상코드가 필요합니다.  주요 색상과 조화를 이루는 색상들을 알 수 있는 사이트가 있는데요. http://paletton.com 사이트입니다. 색상코드를 입력하면 우측에 조화 색상을 보여줍니다. 보색을 알려면 주변 메뉴들을 클릭하세요.

 

2. 폰트 

색상처럼 메인 폰트를 결정하고 사용해야 홈페이지가 전체적으로 통일성이 있는데요. 크롬 확장 프로그램 WhatFont 을 설치하면 홈페이지에서 사용한 각 글자의 폰트와 크기를 알 수 있습니다. 한글 폰트로 주로 사용하는 폰트는 '나눔 고딕'과 '나눔 명조'입니다.

폰트는 가독성이 중요한데요. 영어와 다르게 한글의 이탤릭체는 가독성이 좋지 않습니다. 가독성을 위해 배경과 글자는 대조를 이루는 게 좋습니다. 위 아래 간격과 글자 간격도 필요하다면 조정해 주는 것이 좋습니다. 글자를 읽기 편하게 만드는 게 중요합니다.

3. 템플릿 

미리 만들어진 홈페이지 템플릿을 사용하면 디자인을 쉽고 빠르게 할 수 있는데요. 전문적인 디자이너들이 미리 전체적인 색상과 글자들을 잘 배치해 만들어 놓았기 때문입니다. 글자, 이미지 등의 컨텐츠는 박스형으로 안으로 모아주는 게 집중이 더 잘됩니다. 

 

페이지 빌더를 사용하면 미리 만들어진 요소들을 드래그앤드랍해서 추가하고 화면을 보면서 곧바로 수정할 수 있는데요. 이렇게 만들어진 홈페이지를 저장하고 메뉴 클릭 몇 번으로 도메인 연결과 SSL 활성화를 할 수 있어 일반인도 쉽게 홈페이지를 만들 수 있습니다.

▶빌더올 사용자 모임 네이버 카페 - https://cafe.naver.com/builderall