첫 화면에서 먼저 이해시킬 것

홈페이지를 만들려는 사람은 첫 화면에 무엇을 넣어야 하는지 궁금해한다. 나는 먼저 누가 읽고 무엇을 이해해야 하는지 적어본다. 이 모듈은 지금 만드는 홈페이지의 두 칸 구조를 고객 식별 정보 없이 작게 설명한 것이다.

작은 화면으로 살펴보기

이 예시는 구조를 설명하는 분리된 데모다. 실제 화면·동작을 검증한 범위는 본문에 남긴다.

한쪽에는 약속과 다음 행동을, 다른 쪽에는 그 약속을 이해할 예시를 둔다. 이미지가 있다는 이유만으로 설득이 되는 것은 아니다. 예시가 문장의 이해를 돕는지 먼저 판단한다.

시각적인 배치보다 HTML의 읽는 순서를 먼저 정한다. 약속, 설명, 행동, 예시라는 순서를 두면 모바일에서 한 칸으로 바뀌어도 뜻이 이어진다.

코드와 구현 살펴보기

CSS · 구조 설명용 예시

.hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2rem; }
@media (max-width: 40rem) {
  .hero { grid-template-columns: 1fr; }
}

두 칸 배치는 목적에 따라 달라진다. 설명할 예시가 없다면 두 번째 칸을 억지로 채우지 않는다.