현장 경험과 시공 실적을 담은 건설기업 웹사이트
Design Concept
현장의 경험을 신뢰로 보여주는 웹사이트
건설기업의 신뢰가 실제 현장과 시공 경험에서 만들어진다는 점을 중심으로 현장 이미지와 프로젝트 실적을 디자인의 핵심 요소로 활용했습니다.
화이트와 네이비를 기반으로 안정적이고 전문적인 이미지를 형성하고, 오렌지 컬러를 포인트로 사용해 주요 사업분야와 프로젝트 정보를 명확하게 구분했습니다.
또한 회사 소개, 경쟁력, 사업분야, 실적을 단계적으로 배치해 사용자가 대한이엔씨의 전문성과 수행 역량을 자연스럽게 이해할 수 있도록 구성했습니다.
Design Elements
-
01
현장 경험으로 전달하는 신뢰
대규모 토목 현장과 실제 시공 이미지를 메인 콘텐츠로 활용해 추상적인 기업 홍보보다 대한이엔씨의 실제 업무 환경과 경험을 직접 보여주었습니다.
이를 통해 사용자가 첫 화면부터 현장 중심의 전문 시공기업이라는 정체성을 명확하게 인식할 수 있도록 했습니다. -
02
사업분야를 명확하게 보여주는 구조
토공사업을 비롯한 주요 전문 공사 분야를 별도의 콘텐츠 영역으로 구성해 회사가 수행할 수 있는 업무 범위를 빠르게 파악할 수 있도록 했습니다.
공사 분야별 정보와 이미지를 함께 배치해 기술적인 내용을 직관적으로 이해할 수 있도록 설계했습니다. -
03
실적으로 증명하는 전문성
완료된 시공실적과 현재 진행 중인 프로젝트를 구분해 배치하고, 실제 프로젝트명과 현장 이미지를 통해 수행 경험을 구체적으로 보여주었습니다.
기업 소개 이후 실적을 자연스럽게 연결해 대한이엔씨의 전문성을 객관적인 결과로 증명하도록 구성했습니다.
Responsive
디바이스 대응
PC · 태블릿 · 모바일 전 환경에서 정보의 순서와 사용성이 동일하게 유지되도록 반응형으로 설계했습니다.
Desktop
1920 × 1080
데스크톱
Tablet
768 × 1024
태블릿
Mobile
375 × 812
모바일
Design System
컬러 팔레트와 타이포그래피를 시스템으로 정의해 화면 전반에 일관된 규칙을 적용했습니다.
Colors
- Point Color#E99A2C
- Deep Navy#244E76
- Steel Blue#5E7182
- Light Gray#F3F5F7
- Construction Orange#E99A2C
- Charcoal#2C3136
Typography
Aa 가나다 Pretendard
가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
- 가나다 Aa
- 가나다 Aa
Regular · Bold
Aa 가나다 Gilroy
가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
- 가나다 Aa
- 가나다 Aa
Regular · Bold
Main Page
메인 페이지
첫 화면에서 브랜드와 핵심 서비스를 먼저 보여주고,
스크롤 흐름에 따라 필요한 정보로 자연스럽게 이어지도록 구성했습니다.
스크롤하여 전체 보기 ↓
Sub Page
서브 페이지
주요 서브 페이지를 같은 규칙으로 설계했습니다.
02 Pages
Note
회사·사업분야·프로젝트 정보를 공통 구조 안에서 일관되게 확장하도록 설계했습니다.
회사소개, 사업영역, 공사실적, 공사현황 등 각 서브페이지는 콘텐츠 성격은 다르지만 동일한 그리드와 정보 위계를 적용해 전체 사이트의 일관성을 유지했습니다.
각 페이지는 공통 비주얼 → 핵심 설명 → 상세 정보 → 프로젝트 또는 관련 콘텐츠 → 문의 CTA의 흐름을 기본으로 설계해 정보 확장성과 유지보수 효율을 함께 확보했습니다.
- Grid
- 1200px 기준 12컬럼 그리드를 적용해 회사 정보, 사업분야, 공사실적 등 서로 다른 콘텐츠를 안정적으로 배치할 수 있도록 구성했습니다.
- Header
- 모든 서브페이지에 동일한 비주얼 구조를 적용하고, 페이지별 현장 이미지와 핵심 메시지만 변경해 브랜드 통일성과 각 분야의 특성을 함께 유지했습니다.
- CTA
- 사업분야와 시공실적을 확인한 사용자가 바로 프로젝트 상담이나 공사 문의로 이어질 수 있도록 각 서브페이지 하단에 공통 CTA 영역을 배치했습니다.
Mobile
모바일 환경에서 자주 쓰는 기능을 손이 닿는 곳에 배치했습니다.
Bottom Bar
Optimization
-
Menu
PC회사소개, 사업영역, 공사실적, 공사현황 등 전체 구조를 폭넓게 탐색
MO사업분야와 실적 중심으로 핵심 메뉴를 간결하게 구성
-
Layout
PC대형 현장 이미지와 프로젝트 정보를 넓은 화면에 구조적으로 배치
MO사업분야와 프로젝트 콘텐츠를 세로 흐름으로 재구성해 빠른 탐색 지원
-
Typography
PC강한 헤드라인과 명확한 정보 위계로 기업 전문성을 강조
MO프로젝트명과 공사 정보를 빠르게 확인할 수 있도록 크기와 간격 최적화
-
Image
PC대형 현장 이미지를 적극 활용해 규모감과 현장성을 전달
MO핵심 공사 장면이 유지되도록 이미지 크롭과 비율을 최적화
