웹사이트

웹사이트를 디자인할 때는 화면을 꾸미기 전에 구조부터 이해해야 합니다. 어떤 정보를 담고, 사용자가 어떻게 찾아가게 할지 먼저 정해야겠죠.

반응형·적응형의 차이, 사이트의 기본 영역, 정보 구조 설계를 차례로 살펴보겠습니다.

01. 반응형과 적응형

반응형 사이트는 화면 크기에 따라 레이아웃이나 요소의 크기가 자동으로 바뀌도록 만드는 방식입니다. 브라우저나 디스플레이 크기가 바뀌면 그에 맞춰 스타일도 바뀝니다.

큰 화면부터 작은 화면으로 조정할 수도 있고, 작은 화면에서 필요한 정보부터 설계하는 모바일 우선 방식으로 시작할 수도 있습니다. 어느 방식이든 여러 화면 폭에서 내용과 기능을 확인해야 합니다.

반응형을 정보량이 적은 사이트에만 쓰는 방식으로 보면 안 됩니다. 정보가 많은 사이트도 내용의 순서와 이동 방법을 설계해 대응할 수 있습니다. 제작 비용 역시 화면과 기능의 복잡도에 따라 달라집니다.

적응형은 몇 가지 화면 조건이나 사용 환경에 맞춰 별도의 구성을 준비하는 접근입니다. 기기마다 완전히 다른 사이트를 만들어야 한다는 뜻은 아니며, 서버에서 다른 구성을 전달하는 방식도 사용할 수 있습니다.

사용 환경별로 다른 정보나 기능을 제공해야 하는지 살펴보세요. 반응형·적응형을 고르는 기준은 정보량 하나가 아니라 사용 목적, 유지관리, 성능, 개발 조건입니다.

화면 구성은 헤더, 주요 콘텐츠 영역, 푸터로 나눠 볼 수 있습니다. 다만 HTML의 body는 가운데 콘텐츠만이 아니라 문서의 전체 본문을 담는 요소입니다. 주요 콘텐츠는 main으로 구분할 수 있습니다.

헤더에는 보통 GNB(Global Navigation Bar)가 들어갑니다. 로고, 메뉴, 검색, 로그인, 회원가입, 마이페이지 등의 버튼이나 아이콘을 배치하는 영역입니다.

헤더 높이를 100~200px로 고정해 생각할 필요는 없습니다. 로고와 메뉴, 모바일에서 필요한 조작 영역, 화면을 가리는 정도를 함께 보고 결정하세요.

본문은 각 페이지에 맞는 정보와 콘텐츠가 들어가는 영역입니다. 여러 섹션으로 나눠 사용자가 내용을 쉽게 찾고 읽을 수 있도록 구성하는 것이 중요합니다.

첫 화면에 큰 비주얼이 반드시 필요한 것은 아닙니다. 사이트의 목적에 맞게 중요한 정보와 다음 행동을 먼저 보여주세요. 메인에서는 주요 내용을 요약하고 상세 페이지로 자연스럽게 연결할 수 있습니다.

서브 페이지는 각 주제에 맞는 정보를 보기 좋게 정리합니다. 필요에 따라 SNB(Side Navigation Bar) 같은 추가 메뉴가 들어가기도 합니다.

푸터는 사이트의 최하단 영역입니다. FNB(Foot Navigation Bar), 브랜드나 기업 정보, 사이트 정보, 저작권 표시, 연락처 등을 넣습니다.

헤더와 마찬가지로 전체 페이지에서 일관된 디자인으로 표현해야 합니다.

정보 구조 설계는 사이트의 전체 페이지 구조를 정하는 일입니다. 저는 사이트 제작에 앞서 가장 중요한 작업이라 생각합니다.

사이트는 메인과 서브 페이지로 나뉘며, 성격에 따라 필요한 페이지도 달라집니다. 무엇보다 사용자가 정보를 찾아가는 과정에서 불편함이 없도록 설계해야 합니다.

메뉴 트리로 전체 계층 구조와 파일명, 기능 등을 간략하게 정리해두면 좋습니다. 사이트맵도 비슷한 개념으로 볼 수 있습니다.

사이트의 성격에 따라 사용자의 이동 동선을 플로차트로 정리하기도 합니다.

저는 시안만 보기 좋게 만드는 것보다 실제 내용과 사용 환경에서 확인하는 것까지가 웹사이트 디자인이라고 생각합니다.

검토일: 2026-10-09