여덟 개의 레퍼런스에서 외형을 가져오지 않고 원리만 추출했습니다. 이 문서는 무엇을 가져왔고 무엇을 의도적으로 버렸는지 남긴 기록입니다. 판단이 필요할 때 이 순서를 따릅니다 — 수주비의 정체성, B2B 신뢰성, 절제, 현실 스케일, 그리드, 산업적 정밀함, 에디토리얼 리듬.
그리드를 먼저 짜고 사진을 넣지 않는다. 피사체 위치와 Negative Space를 읽고, 텍스트가 놓일 자리를 사진에서 찾는다. 수주비의 히어로는 교각의 어두운 면이 비워둔 좌측 하단에 헤드라인을 놓는다.
설명 문장 수백 줄보다 실제 구조물 한 앵글이 규모를 더 확실하게 말한다. 3D 그래픽이나 네온으로 '첨단'을 연출하지 않고, 현실의 콘크리트와 강재를 그대로 보여준다.
큰 것은 확실히 크게, 작은 것은 조용하고 정교하게. 메타 정보는 11px 모노스페이스에 0.2em 트래킹으로 고정하고, 모든 씬에 도면 시트 번호처럼 일련번호를 붙인다.
여백은 남는 공간이 아니다. 공간을 먼저 만들고 정말 필요한 요소만 그 안에 넣는다. 스크롤 전체에서 어떤 씬은 거의 비어 있어야 한다.
내비게이션은 사진의 빛 안에서 투명하게 존재하고, 스크롤이 히어로를 지난 뒤에야 지면에 내려앉는다. 섀도는 쓰지 않고 보더는 헤어라인, 반경은 2px로 제한한다.
브랜드가 가진 색은 따뜻한 오프화이트 지면과 차콜 잉크뿐이다. 나머지 색은 콘크리트, 강재, 물, 안개가 가져온다. 악센트는 방청 도료의 산화철 한 가지만, 아주 드물게 쓴다.
긴 이징과 짧은 이동거리. 페이드와 클립 리빌, 이미지 1.00 → 1.02까지만 허용한다. 바운스·회전·글로우·스크롤 하이재킹은 쓰지 않고, prefers-reduced-motion에서는 전부 멈춘다.
전달된 이미지 링크가 실제로는 다른 사이트의 캡처였습니다. 이 레퍼런스는 캡처 없이 메모만 근거로 사용합니다.
색은 레퍼런스 캡처 14장을 48×48로 리샘플해 빈도 상위 색을 측정한 뒤 정했습니다. 순백과 순검정은 쓰지 않습니다.
수주비 Display 1
수주비 Display 2
수주비 Display 3
Lead — 보조 설명 문장의 크기입니다.
Body — 본문. IBM Plex Sans KR 400.
2026