건축 실무와 채용을 투명하게 잇는 건축 플랫폼 웹사이트
Design Concept
건축의 문을 투명하게 열다
건축 실무자가 현장에서 느끼는 번거로움과 불투명한 정보 구조를 덜어내는 것을 디자인의 출발점으로 삼았습니다.
화려한 장식 대신 흰 바탕과 블랙, 그레이 계열만으로 화면을 구성해 도면과 같은 정돈된 인상을 주고, 붉은 계열은 화살표와 현재 표시 같은 꼭 필요한 곳에만 사용했습니다.
또한 OPEN LAB → COMPETITION ARCHIVE → JOB → PARTNERS를 같은 행 구조로 반복해, 사용자가 서비스가 늘어나도 같은 방식으로 훑어보고 원하는 메뉴로 들어갈 수 있도록 설계했습니다.
Design Elements
-
01
서비스별 가로 슬라이드 행
네 가지 서비스를 같은 좌측 소개와 우측 카드 슬라이드 구조로 반복해 배치했습니다.
처음 방문한 사용자도 서비스 취지와 대표 콘텐츠를 한 화면에서 비교할 수 있습니다. -
02
정사각 카드와 얇은 라인
툴과 정보를 1:1 비율 카드에 얇은 회색 라인으로 담아 도면 같은 정돈감을 주었습니다.
카드 크기가 일정해 콘텐츠가 늘어나도 화면 균형이 유지됩니다. -
03
모노톤 위 붉은 포인트
흰색·블랙·그레이를 기본으로 하고 슬라이드 화살표와 현재 표시에만 붉은색을 썼습니다.
정보가 먼저 읽히면서도 눌러야 할 곳이 자연스럽게 눈에 들어옵니다.
Responsive
디바이스 대응
PC · 태블릿 · 모바일 전 환경에서 정보의 순서와 사용성이 동일하게 유지되도록 반응형으로 설계했습니다.
Desktop
1920 × 1080
데스크톱
Tablet
768 × 1024
태블릿
Mobile
375 × 812
모바일
Design System
컬러 팔레트와 타이포그래피를 시스템으로 정의해 화면 전반에 일관된 규칙을 적용했습니다.
Colors
- Point Color#E53E3E
- Ink Black#111111
- Graphite#515151
- Warm Gray#7F7F7F
- Line Gray#D9D9D9
- Paper Gray#F5F5F5
- White#FFFFFF
Typography
Aa 가나다 Nanum Gothic
가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
- 가나다 Aa
- 가나다 Aa
Regular · Bold
Aa 가나다 Malgun Gothic
가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
- 가나다 Aa
- 가나다 Aa
Regular · Bold
Main Page
메인 페이지
첫 화면에서 브랜드와 핵심 서비스를 먼저 보여주고,
스크롤 흐름에 따라 필요한 정보로 자연스럽게 이어지도록 구성했습니다.
스크롤하여 전체 보기 ↓
Sub Page
서브 페이지
주요 서브 페이지를 같은 규칙으로 설계했습니다.
02 Pages
Note
모든 서비스 페이지가 같은 헤더와 규칙 안에서 이어지도록 설계했습니다.
OPEN LAB, THE SCENE, COMPETITION ARCHIVE, JOB, PARTNERS는 같은 상단 메뉴와 푸터를 공유합니다.
각 페이지는 서비스 소개 문구 → 콘텐츠 목록 순서로 구성해, 새 서비스를 추가해도 같은 방식으로 확장할 수 있습니다.
- Grid
- 좌측 230px 소개 영역과 우측 가변 카드 영역의 2단 그리드를 기본으로 삼았습니다.
- Header
- 흰 배경 상단 메뉴에 다섯 개 서비스와 로그인을 정리해 어느 페이지에서든 이동할 수 있게 했습니다.
- CTA
- 각 서비스 행의 제목과 카드를 눌러 해당 서비스 페이지로 바로 이동하도록 연결했습니다.
Mobile
모바일 환경에서 자주 쓰는 기능을 손이 닿는 곳에 배치했습니다.
Bottom Bar
Optimization
-
Menu
PCMenu · 다섯 개 서비스 메뉴를 상단 중앙에 가로로 배치
MOMenu · 좁은 화면에서 간격과 크기를 줄여 한 화면에 정리
-
Layout
PCLayout · 좌측 소개와 우측 카드 슬라이드의 2단 구조
MOLayout · 소개와 카드가 위아래로 쌓이는 단일 열 구조
-
Typography
PCTypography · 나눔고딕 기반의 단정한 20px 카드 제목
MOTypography · 화면 폭에 맞춰 제목과 본문 크기를 단계적으로 축소
-
Image
PCImage · 1:1 정사각 카드로 툴과 콘텐츠 노출
MOImage · 600px 이하에서 카드를 2열 격자로 바꿔 한 화면에서 확인
