인천 자원순환 홈페이지 제작 사례 참고사항

처음부터 끝까지 확인해 보는 인천 자원순환 홈페이지 제작

오엠지디자인이 진행한 자원순환 회사 리뉴얼 사례입니다. 오래된 화면을 새롭게 정리하면서 기존 사업 소개와 새롭게 추가할 비즈니스 정보를 워드프레스 기반 사이트로 옮겼습니다.

이번 작업은 기업이 제공하는 서비스를 메인 화면에서 충분히 확인할 수 있도록 구성하는 데 초점을 맞췄습니다. 여러 페이지를 이동하기 전에 업체가 하는 일과 서비스 내용을 파악하고, 연락처를 찾아 문의하기 쉬운 구조로 준비했습니다.

2026-09-23

오래된 홈페이지 사업 정보를 함께 정리한 제작 배경

의뢰 당시 홈페이지는 제작된 지 10년 이상 지난 디자인을 사용하고 있었습니다. 화면을 바꾸는 것뿐 아니라 기존 콘텐츠를 정리하고 새로운 사업 정보를 추가할 시기가 되었죠. 검색을 통한 서비스 정보 전달 역시 이번 클라이언트가 개선을 요청한 부분입니다.

이에 기존 화면의 일부를 수정하는 방식보다 워드프레스를 기반으로 구조와 디자인을 다시 구성하는 방향으로 진행했습니다.

이번에 제작된 사이트는 다섯 페이지로 구성했습니다. 그중 메인 화면은 방문자가 페이지를 여러 번 이동하지 않아도 기본적인 사업 내용을 확인할 수 있도록 했습니다.

회사와 서비스에 관한 설명을 메인 화면에 배치하되, 텍스트가 많아지는 만큼 각 영역의 구분과 읽는 순서도 함께 고려했습니다. 여기에 정보를 나열하는 데 그치지 않고 제목과 본문의 크기 차이, 배경색의 변화로 내용의 흐름을 구분했죠.

요약하자면 세부 페이지와 별개로 메인 화면 자체가 사업을 이해하는 출발점이 되도록 구성한 것이 이번 작업의 특징입니다.

서비스 설명에 필요한 텍스트를 담으면서도 화면이 지나치게 복잡해지지 않도록 움직이는 효과(모션)를 절제했습니다. 주요 강조 영역을 제외한 구간에서는 색상과 이미지 사용도 줄였습니다.

도입부에는 슬라이더를 적용하고, 서비스 가이드 영역에는 어두운 배경을 사용해 다른 구간과 구분했으며 나머지 영역은 제목과 본문의 위계를 중심으로 정리했습니다.

이번 디자인에서는 시각적 효과를 늘리는 것보다 서비스 설명을 읽는 흐름을 유지하는 데 중점을 뒀습니다.

기존 홈페이지에 있던 콘텐츠는 새 사이트의 구조에 맞춰 옮기고, 추가할 사업 정보를 함께 반영하는 게 이번 인천 자원순환 홈페이지 제작 작업의 핵심입니다.

이 과정에서 기존 문장을 그대로 배치하는 데 그치지 않고 서비스와 관련된 표현을 고려해 소개 문구를 정리했습니다. 화면 디자인과 콘텐츠 구성을 별개의 작업으로 나누기보다, 설명이 들어갈 위치와 분량을 함께 조정했던 것도 특징이라 하겠습니다.

검색엔진 최적화도 제작 방향에 포함했지만, 이 사례에서 소개하는 범위는 콘텐츠와 화면을 구성한 작업 방식에 대한 부분이라 세부적인 설명은 생략 하겠습니다.

연락처를 제공하기 위해 가장 직관적인 플로팅 메뉴를 추가했습니다. 방문자가 서비스 내용을 살펴보다가 문의할 때 활용할 수 있도록 마련한 요소이며, 이때 푸터 바 형태로도 디자인은 가능하니 참고 바랍니다.

플로팅 메뉴 역시 별도의 복잡한 기능을 늘리기보다는 사업 소개와 연락처 안내에 집중했고, 도입부 슬라이더에는 엘리멘터 애드온을 사용했습니다.

2024년 리뉴얼된 이번 인천 자원순환 홈페이지 제작 사례는 디자인이나 구조적인 부분에서 클라이언트 요청에 따라 맞춤형으로 구현 되었습니다.

프로젝트 상세 진행 내역은 다음과 같습니다.

위 금액은 프로젝트 당시 모든 자료 제공과 세부 페이지 숫자가 적었던 사례에 대한 비용이라 현재 본사 서비스 공통 요금이나 동일한 페이지 수에 일괄 적용되는 견적을 뜻하지는 않습니다.

정보를 메인 화면에 충분히 담으면 방문자가 기본 내용을 한곳에서 확인할 수 있지만, 설명이 길어져 화면이 무거워질 수 있다는 점을 함께 검토했습니다.

작업 당시에는 하단 서비스 이용 가이드를 방문자의 필요에 따라 선택해서 볼 수 있도록 개선하는 방안을 후속 과제로 남겼었고 도입부 슬라이더 역시 시각적 표현과 로딩 부담을 함께 고려할 요소였음을 지금 살펴보면 나타나고 있습니다.

요약하자면 이번 사례는 오래된 기업 홈페이지의 콘텐츠를 워드프레스로 옮기면서, 서비스 설명과 화면 디자인을 함께 재구성한 작업입니다.

프로젝트 핵심 역시 페이지 수나 기능을 늘리는 것보다 기존 사업과 새로운 사업 정보를 어떤 순서로 전달할지 정리하는 데 있었습니다.

오엠지디자인이 2024년 제작한 인천 자원순환 사이트 구축 가이드에서 여러분이 바라는 웹사이트 구조를 찾으실 수 있었나요?

워드프레스 홈페이지 제작

담당자연결 1800 3499