편집 디자인에 관심이 있는 분들이 좋아하는 워드프레스 영문 홈페이지 만들기 과정을 설명하기 위해 본사가 얼마전 완성한 미국 애틀란타 웹사이트 제작 사례를 소개하려 합니다. 의뢰인은 미국 거주하는 한국인으로 제작 목적은 자동차 틴트 시공점 홈페이지 입니다.
워드프레스 영문 홈페이지 제작 가이드
작년에 이어 올해도 미국 현지에서 워드프레스 영문 홈페이지 제작 의뢰가 들어와 현지 광역대 서버 구축과 커스텀 디자인을 통해 완성해 드렸습니다.
포함된 웹사이트 기능은 메가 메뉴를 대신해 헤더 오픈캔버스를 적용 하였고 연락처 활성화를 위해 플러팅 메뉴를 추가해 드렸습니다. 전체적인 디자인 컨셉은 스크롤을 통한 인터렉션을 제공해서 편집스러운 느낌이 들도록 했습니다.
이는 클라이언트 주문을 통해 컨셉을 잡았으며, 전체 페이지 숫자는 15Page로 구성 되었습니다.
그럼 이미지와 함께 워드프레스 영문 홈페이지 만들기에서 어떤 요소들이 중요하고, 이번 웹사이트 제작에서 사용된 디자인 방식이 무엇이 특별한지 설명해 보도록 하겠습니다.
홈페이지 제작 과정에서 디자인 일관성은 언제나 핵심
모든 웹사이트 디자인이 그렇듯 이번 애틀란타 영문 워드프레스 홈페이지 제작 과정에서도 초기 컨셉을 잡는데 가장 오랜 시간이 걸렸습니다. 실제 워드프레스는 디자인과 개발이 동시에 이뤄지기 때문에 어떤 웹사이트를 구축 하더라도 비교적 짧은 기간에 퀄리티 있는 결과를 만들 수 있는 것이죠.
이번 홈페이지 만들기에서 메인 인트로는 슬라이더를 이용했고, 레이 아웃은 전체 높이로 지정해 어떤 디바이스에서든 한 화면에서 홈페이지 첫 화면 전체를 볼 수 있게 하였습니다.
해당 방식은 디자인에서 특별한 형태는 아니지만 실제 이러한 슬라이더 인트로 디자인이 그렇게 쉬운 것은 아닙니다.
이미지 크기와 위치 텍스트와 아이콘 등의 높이를 동일하게 유지하지 않으면 화면이 변할 때 높이값이 달라지기 때문에 방문자에게 몰입감을 주는 데 방해가 됩니다. 따라서 워드프레스 홈페이지 제작을 배우는 초보자라면 첫 화면에 슬라이더로 표현해야 한다면 높이값이 일정하도록 만들어야 한다는 걸 잊지 마세요.
이번 워드프레스 영문 홈페이지 제작 과정에서 디자인 일관성이란?
웹 디자인에서 인트로가 중요한 건 전체적인 디자인 컨셉을 결정하기 때문입니다. 앞서 이야기 했듯이 이번 워드프레스 영문 홈페이지 만들기 과정에서 가장 오랜 시간이 소요된 게 바로 이것 때문입니다.
헤더 섹션 다음에 오는 두 번째 화면에서 애틀란타 틴트 시공점 웹사이트 디자인 일관성이 결정됩니다. 이번 프로젝트에서 우리는 슬라이더와 스크롤 인터렉션으로 전체적인 디자인 컨셉을 잡았고, 사이트 와이드 값은 1320PX 입니다.
해당 이미지에선 확인되지 않지만 두 번째 섹션에서 관련 업체에서 제공하는 모든 서비스를 소개하기 위해 배경 이미지는 변하지 않고 하단에서 텍스트가 나타나는 형태로 랜딩 페이지 전체 디자인 이미지를 완성 했습니다.
다음 섹션에서도 마찬가지로 서비스 설명을 이미지와 함께 배열한 상태에서 CENTUM’S PRIDE라는 타이틀은 투명도가 변하면 스크롤 과정에서 계속 떠 있는 상태로 디자인 일관성을 유지 하였습니다.
이처럼 웹사이트 제작에서 디자인 일관성은 반드시 톤앤매너만을 의미하는 건 아닙니다.
인터렉션(모션) 하나까지 너무 번잡하게 여러 표현을 하지 않고 일관성을 유지하면서 각각의 포인트에 새로운 디자인 요소를 넣는 게 중요합니다.
워드프레스 영문 홈페이지 폰트는 어떤게 좋을까?
관련해 디자인을 공부하는 분들에게 도움이 될 만한 폰트를 소개하자면 워드프레스 영문 홈페이지 제작에서 가장 많은 디자이너가 사용하는 글꼴은 ROBOTO 입니다.
이번 프로젝트에서 오엠지도 해당 폰트를 사용 하였는데, 영문 디자인이 매끄럽기도 하지만 다양한 두께를 제공한다는 점, 숫자나 부호도 가독성이 좋다는 점이 웹사이트 디자인에서 이 폰트가 사랑 받는 이유입니다.
반대로 한글 웹사이트에 로보토 폰트를 사용하는 건 좋지 않습니다. 그것은 자신이 사용하는 디바이스나 브라우져에 따라 이상이 없이 보일때도 있지만 기본적으로 한글은 구글 폰트로는 noto sans kr 사용을 추천합니다.
사실 워드프레스 영문 홈페이지 만들기는 폰트 선정에 어려움은 전혀 없습니다. 영문과 한글을 동시에 사용하는 경우라면 디자이너가 가장 싫어하는 형태지만 이와 같이 영문만으로 구축한다면 디자인 일관성을 위해서라도 하나의 폰트로 크기, 두께, 컬러로 계층 구조를 충분히 만들 수 있습니다.
애틀란타 워드프레스 영문 홈페이지 푸터 만들기
이처럼 화려한 워드프레스 영문 홈페이지 만들기를 통해 여러분이 편집 디자인에 관해 연습해 보는 것도 좋지만 오늘 소개한 웹사이트 엔트로와 랜딩 페이지 디자인 컨셉의 일관성이 가장 중요합니다.
그리고 필자는 홈페이지를 제작할 때 로고와 메뉴가 있는 헤더를 디자인 한 후 본 섹션이 아닌 푸터 디자인을 먼저 합니다
이번 랜딩 페이지 컨셉에 맞춰 랜딩은 어두운 푸터를 적용했고, 상단에 지도와 세부 약도는 클라이언트 요청 사항 이었습니다. 이 또한 디자인에 이질감이 없도록 하기 위해서는 이미지 선택이나 오버레이 컬러까지 세심히 살피는 게 좋습니다
본사가 이번 홈페이지 제작에서 중요하게 생각한 건, 자동차 관련 서비스업이기 때문에 이미지를 선택하는 것이었는데, 다행이 클라이언트가 대부분의 자료를 준비하였고, 저희가 원하는 이미지나 영상을 직접 제작해서 보내 주셨죠.
사실 워드프레스 홈페이지 제작 과정에서 이러한 서포터를 받는다는 건 흔한 일은 아닙니다.
아직까지 국내 많은 고객들은 “만들어 주세요!”라고 말한 뒤 결과물을 기다리는 방식으로 웹사이트를 구축하기 때문에 1차 결과에서 만족할 수 있는 홈페이지를 구축하기란 어렵습니다.
그래서 웹사이트 구축 기간을 수정하는 동안 더 길어지는 것이죠.
워드프레스 홈페이지 메뉴 만들기
워드프레스는 기본적으로 제공되는 메뉴 스타일이 단순하기 때문에 커스텀 메뉴 제작이 필요한 경우가 많습니다. 메뉴 제작 방식은 크게 메가 메뉴와 이번 워드프레스 영문 홈페이지 제작에서 처럼 헤더 오픈캔버스 기능을 이용해 워드프레스 메뉴 만들기가 가능합니다.
애틀란타에 위치한 이번 자동차 틴트 시공점 홈페이지 상단에는 텍스트로 된 메인 메뉴 이외에도 우측 상단에 헤더 오픈캔버스 버튼을 추가 하였습니다.
보통 워드프레스 디자인에서 메가 메뉴나 이와 같은 오픈 캔버스 스타일 메뉴가 필요한 경우는 쇼핑몰 웹사이트 구축에서 많이 사용됩니다. 상품이 많거나 다양한 콘텐츠를 보여줘야 하는 웹사이트 제작에서 메뉴 만들기 또한 중요하죠.
그외 세부 페이지는 원 페이지 스크롤 방식으로 디자인 되었거나 기본적인 페이지는 가독성 높게 힌 바탕으로 정보를 전달하는 데 주력했습니다.
애틀란타에 위치한 이번 자동차 틴트 시공점 홈페이지 상단에는 텍스트로 된 메인 메뉴 이외에도 우측 상단에 헤더 오픈캔버스 버튼을 추가 하였습니다.
보통 워드프레스 디자인에서 메가 메뉴나 이와 같은 오픈 캔버스 스타일 메뉴가 필요한 경우는 쇼핑몰 웹사이트 구축에서 많이 사용됩니다. 상품이 많거나 다양한 콘텐츠를 보여줘야 하는 웹사이트 제작에서 메뉴 만들기 또한 중요하죠.
그외 세부 페이지는 원 페이지 스크롤 방식으로 디자인 되었거나 기본적인 페이지는 가독성 높게 힌 바탕으로 정보를 전달하는 데 주력했습니다.
이렇게 워드프레스는 여러분이 생각하는 것 이상으로 다양한 커스텀 디자인이 가능하며, 개발자 능력에 따라 그 어떤 웹사이트 구축 툴보다 더 나은 결과물을 기대할 수 있는 홈페이지 제작 툴입니다.
이 분야에 관심이 있거나 퀄리티 있는 홈페이지 제작을 원하시는 분들에게 이번 포스팅이 도움이 되었기를 바라며, 워드프레스 영문 홈페이지 만들기라는 주제로 준비한 이번 포스팅을 여기서 마치겠습니다.
홈페이지 제작 워드프레스 웹디자인
제작기간 - 한달
디자인툴 - 워드프레스
테마 - OCEAN WP
서버 - Vultr VPS 애틀란타
