현장 경험과 시공 실적을 담은 건설기업 웹사이트

대한이엔씨의 전문 공사 역량과 축적된 현장 경험, 주요 시공 실적을 효과적으로 전달하기 위해 구축한 기업 웹사이트입니다. 첫 화면에서 대규모 토목 현장의 이미지를 활용해 기업의 전문성을 직관적으로 전달하고, 이후 회사 소개 → 핵심 경쟁력 → 사업분야 → 시공실적 → 진행 프로젝트로 이어지는 구조를 통해 대한이엔씨의 기술력과 수행 경험을 단계적으로 확인할 수 있도록 구성했습니다. 특히 건설·토목기업 특성상 말보다 현장 이미지와 실제 프로젝트 실적이 신뢰 형성에 중요하다는 점을 반영해, 대형 현장 비주얼과 프로젝트 중심의 콘텐츠 구성을 적극 활용했습니다.

#대한이엔씨
#건설회사
#토목공사
#상하수도공사
#철근콘크리트
#기업웹사이트
#건설웹사이트
#반응형웹
#UIUX

Client: 대한이엔씨
Category: 기업홈페이지

Design Concept

현장의 경험을 신뢰로 보여주는 웹사이트

건설기업의 신뢰가 실제 현장과 시공 경험에서 만들어진다는 점을 중심으로 현장 이미지와 프로젝트 실적을 디자인의 핵심 요소로 활용했습니다.
화이트와 네이비를 기반으로 안정적이고 전문적인 이미지를 형성하고, 오렌지 컬러를 포인트로 사용해 주요 사업분야와 프로젝트 정보를 명확하게 구분했습니다.
또한 회사 소개, 경쟁력, 사업분야, 실적을 단계적으로 배치해 사용자가 대한이엔씨의 전문성과 수행 역량을 자연스럽게 이해할 수 있도록 구성했습니다.

Design Elements

01

현장 경험으로 전달하는 신뢰

대규모 토목 현장과 실제 시공 이미지를 메인 콘텐츠로 활용해 추상적인 기업 홍보보다 대한이엔씨의 실제 업무 환경과 경험을 직접 보여주었습니다.
이를 통해 사용자가 첫 화면부터 현장 중심의 전문 시공기업이라는 정체성을 명확하게 인식할 수 있도록 했습니다.
02

사업분야를 명확하게 보여주는 구조

토공사업을 비롯한 주요 전문 공사 분야를 별도의 콘텐츠 영역으로 구성해 회사가 수행할 수 있는 업무 범위를 빠르게 파악할 수 있도록 했습니다.
공사 분야별 정보와 이미지를 함께 배치해 기술적인 내용을 직관적으로 이해할 수 있도록 설계했습니다.
03

실적으로 증명하는 전문성

완료된 시공실적과 현재 진행 중인 프로젝트를 구분해 배치하고, 실제 프로젝트명과 현장 이미지를 통해 수행 경험을 구체적으로 보여주었습니다.
기업 소개 이후 실적을 자연스럽게 연결해 대한이엔씨의 전문성을 객관적인 결과로 증명하도록 구성했습니다.

Responsive

디바이스 대응

PC · 태블릿 · 모바일 전 환경에서 정보의 순서와 사용성이 동일하게 유지되도록 반응형으로 설계했습니다.

Desktop
1920 × 1080
데스크톱
Tablet
768 × 1024
태블릿
Mobile
375 × 812
모바일

Design System

컬러 팔레트와 타이포그래피를 시스템으로 정의해 화면 전반에 일관된 규칙을 적용했습니다.

Colors

Main Color#244E76

Sub Color#F3F5F7

Point Color#E99A2C
Deep Navy#244E76
Steel Blue#5E7182
Light Gray#F3F5F7
Construction Orange#E99A2C
Charcoal#2C3136

Typography

Aa 가나다 Pretendard

가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789

Weight

가나다 Aa
가나다 Aa

Regular · Bold

Aa 가나다 Gilroy

가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789

Weight

가나다 Aa
가나다 Aa

Regular · Bold

Main Page

메인 페이지

첫 화면에서 브랜드와 핵심 서비스를 먼저 보여주고,
스크롤 흐름에 따라 필요한 정보로 자연스럽게 이어지도록 구성했습니다.

www.example.com

스크롤하여 전체 보기 ↓

Sub Page

서브 페이지

주요 서브 페이지를 같은 규칙으로 설계했습니다.

02 Pages

현장 경험과 시공 실적을 담은 건설기업 웹사이트 서브 페이지 1 — Sub Page 회사소개 페이지 01

현장 경험과 시공 실적을 담은 건설기업 웹사이트 서브 페이지 2 — Sub Page 공사현황 페이지 02

Note

회사·사업분야·프로젝트 정보를 공통 구조 안에서 일관되게 확장하도록 설계했습니다.

회사소개, 사업영역, 공사실적, 공사현황 등 각 서브페이지는 콘텐츠 성격은 다르지만 동일한 그리드와 정보 위계를 적용해 전체 사이트의 일관성을 유지했습니다.
각 페이지는 공통 비주얼 → 핵심 설명 → 상세 정보 → 프로젝트 또는 관련 콘텐츠 → 문의 CTA의 흐름을 기본으로 설계해 정보 확장성과 유지보수 효율을 함께 확보했습니다.

Grid: 1200px 기준 12컬럼 그리드를 적용해 회사 정보, 사업분야, 공사실적 등 서로 다른 콘텐츠를 안정적으로 배치할 수 있도록 구성했습니다.
Header: 모든 서브페이지에 동일한 비주얼 구조를 적용하고, 페이지별 현장 이미지와 핵심 메시지만 변경해 브랜드 통일성과 각 분야의 특성을 함께 유지했습니다.
CTA: 사업분야와 시공실적을 확인한 사용자가 바로 프로젝트 상담이나 공사 문의로 이어질 수 있도록 각 서브페이지 하단에 공통 CTA 영역을 배치했습니다.

Mobile

모바일 환경에서 자주 쓰는 기능을 손이 닿는 곳에 배치했습니다.

Bottom Bar

하단 고정 바사업분야 · 시공실적 · 문의 등 주요 메뉴 빠른 접근

퀵 메뉴회사 정보와 핵심 프로젝트를 짧은 동선으로 탐색

Optimization

Menu

PC회사소개, 사업영역, 공사실적, 공사현황 등 전체 구조를 폭넓게 탐색

MO사업분야와 실적 중심으로 핵심 메뉴를 간결하게 구성
Layout

PC대형 현장 이미지와 프로젝트 정보를 넓은 화면에 구조적으로 배치

MO사업분야와 프로젝트 콘텐츠를 세로 흐름으로 재구성해 빠른 탐색 지원
Typography

PC강한 헤드라인과 명확한 정보 위계로 기업 전문성을 강조

MO프로젝트명과 공사 정보를 빠르게 확인할 수 있도록 크기와 간격 최적화
Image

PC대형 현장 이미지를 적극 활용해 규모감과 현장성을 전달

MO핵심 공사 장면이 유지되도록 이미지 크롭과 비율을 최적화