제품이나 포트폴리오, 아이디어를 웹사이트에 올리려는 사람을 위해 Web Design in 4 Minutes는 콘텐츠를 중심으로 페이지를 꾸미는 기본 단계를 보여준다. 텍스트 정렬과 글꼴부터 간격, 색상, 이미지까지 CSS 예시를 따라가며 살펴볼 수 있다.
콘텐츠와 가독성
디자인은 콘텐츠의 표현을 돕는 역할을 하므로 콘텐츠를 나중에 고려할 요소로 취급해서는 안 된다고 설명한다. 웹의 90% 이상을 차지한다고 소개한 텍스트 콘텐츠를 다듬는 것부터 시작한다.
긴 문장을 읽기 쉽게 하려면 한 줄의 글자 수에 제한을 두는 것이 좋다. 예시에서는 본문 너비를 50em으로 제한하고 가운데 정렬한다.
body {
margin: 0 auto;
max-width: 50em;
}
기본 글꼴인 "Times" 대신 "Helvetica"나 "Arial" 같은 산세리프 글꼴을 적용할 수 있으며, 세리프 글꼴을 원한다면 "Georgia"를 제안한다. 줄 간격과 본문 주변 여백을 설정하고, 제목에는 별도의 위쪽 여백을 둬 콘텐츠를 정돈한다.
body {
line-height: 1.5;
padding: 4em 1em;
}
h2 {
margin-top: 1em;
padding-top: 1em;
}
색상과 시각적 균형
흰 배경에 검은 글자를 쓰는 대신 본문에는 부드러운 색조를 적용하고, 제목과 강조 텍스트에는 더 짙은 색을 사용할 수 있다. 코드 영역에는 배경색과 여백을 더해 본문과 구분한다.
주요 색상은 링크 같은 상호작용 요소를 강조하는 데 활용한다. 보조 색상은 테두리와 배경, 본문 텍스트 등에 적용해 페이지의 색상 균형을 맞춘다.
글꼴과 이미지로 개성 더하기
페이지에 정체성을 더하는 방법으로 사용자 지정 글꼴을 소개한다. 자체 웹 글꼴을 넣거나 Typekit 같은 서비스를 이용할 수 있고, 예시에서는 Google Fonts의 "Roboto"를 불러온다.
@import 'https://fonts.googleapis.com/css?family=Roboto:300,400,500';
body {
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
}
그래픽과 아이콘은 콘텐츠를 보조하는 장식이나 메시지 전달 요소로 사용할 수 있다. 예시는 Unsplash 이미지를 헤더 배경으로 설정하고 로고와 제목, 링크 버튼을 배치해 페이지를 마무리한다. 소개된 내용은 몇 분 안에 기본 웹 디자인 원칙을 적용해 페이지를 구성하는 단계별 안내다.
댓글 (0)
로그인하면 이 기사에 내 생각을 남길 수 있어요