공간의 가치를 두텁게 쌓는 건축·인테리어 기업 웹사이트

건축·인테리어 기획 및 디자인, 프로젝트 및 시공 관리, 전시 기획을 수행하는 팩토리후의 사업 영역과 실적을 전달하기 위해 구축한 공식 웹사이트입니다. 메인 화면은 대표 프로젝트 이미지가 이어지는 전체 화면 배너로 시작해 About(대표 인사말 → 사업 분야 → 연혁 → 클라이언트), Works, Contact 순으로 이동하도록 구성했습니다. 특히 Works 에서는 Exhibition, Hotel & Resort, Commercial, Residence 등 분야별 필터와 프로젝트명·지역을 카드로 정리해 시공 사례를 빠르게 찾아볼 수 있도록 했으며, 절제된 그레이 톤과 사진 중심 구성으로 공간 작업이 돋보이게 했습니다.

#팩토리후
#건축인테리어
#전시디자인
#시공관리
#공간디자인
#기업홈페이지
#웹사이트제작
#포트폴리오
#반응형웹
#UIUX

Client: 팩토리후
Category: 기업홈페이지

Design Concept

작업이 먼저 말하는 공간

건축과 인테리어, 전시 디자인을 다루는 회사인 만큼 설명보다 작업 사진이 먼저 보이도록 하는 것을 디자인의 출발점으로 삼았습니다.
메인은 프로젝트 이미지를 전체 화면으로 넘기는 배너로 구성하고, 그레이와 화이트를 중심으로 한 절제된 톤을 사용해 사진 속 공간이 주인공이 되도록 했습니다.
또한 About 에서는 대표 인사말, 사업 분야, 연혁, 클라이언트를 같은 탭 구조로 묶고, Works 에서는 분야별 필터로 사례를 정리해 방문자가 필요한 정보를 빠르게 찾도록 설계했습니다.

Design Elements

01

전체 화면 프로젝트 배너

메인 첫 화면에 대표 프로젝트 이미지를 슬라이드로 연결하고 재생·정지 버튼을 두었습니다.
방문자가 첫 화면에서 시공 분위기를 바로 확인할 수 있습니다.
02

분야별 Works 필터

Exhibition, Hotel & Resort, Residence 등 분야 탭과 프로젝트 카드를 함께 구성했습니다.
카드마다 분야, 프로젝트명, 지역을 보여 주어 사례를 훑어보기 쉽습니다.
03

About 탭 구조

Ceo Message, Business Field, History, Client 를 상단 탭으로 묶었습니다.
회사의 철학과 사업 영역, 연혁을 한 흐름 안에서 확인할 수 있습니다.

Responsive

디바이스 대응

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

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

Design System

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

Colors

Main Color#646668

Sub Color#222222

Point Color#0078D4
Slate Gray#646668
Ink Black#222222
Stone Gray#7F7F7F
Mist Gray#E4E4E4
Signal Blue#0078D4
White#FFFFFF

Typography

Aa 가나다 Pretendard

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

Weight

가나다 Aa
가나다 Aa

Regular · Bold

Aa 가나다 Noto Sans KR

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

Weight

가나다 Aa
가나다 Aa

Regular · Bold

Main Page

메인 페이지

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

www.example.com

스크롤하여 전체 보기 ↓

Sub Page

서브 페이지

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

02 Pages

공간의 가치를 두텁게 쌓는 건축·인테리어 기업 웹사이트 서브 페이지 1 — Sub Page 회사 소개 페이지 01

공간의 가치를 두텁게 쌓는 건축·인테리어 기업 웹사이트 서브 페이지 2 — Sub Page 프로젝트 Works 페이지 02

Note

About 의 네 탭과 Works 목록이 같은 규칙 안에서 일관되게 보이도록 설계했습니다.

서브 페이지는 상단 배너 아래에 탭 메뉴와 본문 영역을 두는 같은 구조를 사용합니다. 본문은 중앙 정렬된 고정 폭 안에서 텍스트와 이미지를 배치합니다.

Grid: Works 카드를 격자로 배치하고 카드마다 분야·제목·지역·사진 순서를 동일하게 유지했습니다.
Header: 메인에서는 투명 헤더 위에 흰색 로고를 올려 배너 이미지를 가리지 않도록 했습니다.
CTA: 헤더의 Contact 버튼을 회색 박스형으로 강조해 문의 페이지로 바로 이동하도록 했습니다.

Mobile

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

Bottom Bar

모바일 전용 배너 이미지PC 와 모바일에 각각 다른 배너 이미지를 적용해 화면 비율에 맞게 노출

간결한 3메뉴 헤더About · Works · Contact 세 항목을 작은 화면에 맞춰 한 줄로 유지

Optimization

Menu

PCAbout · Works · Contact 3개 메뉴와 박스형 Contact 버튼

MO메뉴 간격과 버튼 크기를 줄여 한 줄로 유지
Layout

PCWorks 카드를 여러 열 격자로 배치

MO카드 열 수를 줄여 사진과 정보를 크게 표시
Typography

PC영문 섹션 타이틀과 한글 본문을 위계에 맞춰 배치

MO글자 크기와 줄 간격을 줄여 푸터 정보까지 자연스럽게 정렬
Image

PC프로젝트 사진 중심의 전체 화면 배너

MO세로 화면에 맞춘 모바일 배너 이미지