디자인을 전공하지 않아도 기본만 알아두면 확 달라지는 웹사이트의 퀄리티!
이번 글에서는 웹 디자인의 3대 핵심 요소인 색상, 폰트, 레이아웃에 대해
비전공자도 쉽게 이해할 수 있도록 정리합니다.
1. 색상(Color): 첫인상을 좌우한다
🎨 색상 구성 원칙
| 요소 | 설명 |
|——|——|
| 메인 컬러 | 브랜드/사이트 대표 색상 (1~2개) |
| 서브 컬러 | 보조 강조 색상 (2~3개) |
| 배경/텍스트 | 흰색+짙은 회색 등 대비 조합 필수
💡 무료 색상 툴 추천
📌 명도/채도 조절이 시각적 안정감을 줍니다.
2. 폰트(Font): 정보 전달의 핵심
✅ 좋은 웹폰트 선택 기준
- 가독성: 모바일에서도 쉽게 읽혀야 함
- 경량화: 로딩 속도 고려
- 일관성: 제목과 본문 간 스타일 구분
📚 추천 무료 웹폰트
| 폰트명 | 특징 |
|——–|——|
| Noto Sans KR | 네이버·구글 지원, 한글 가독성 우수 |
| Pretendard | 개발자 및 디자이너 사이 인기, 세련된 느낌 |
| IBM Plex Sans KR | 기업 브랜드에 어울리는 느낌
“`css
body {
font-family: ‘Noto Sans KR’, sans-serif;
}
“`
3. 레이아웃(Layout): 콘텐츠 구조의 뼈대
📐 기본 원칙
- 그리드 시스템 사용: 12컬럼 구조 활용 시 일관성 유지
- 시각 흐름 설계: F-Pattern, Z-Pattern
- 화이트 스페이스 활용: 여백은 디자인입니다!
🧩 레이아웃은 콘텐츠보다 ‘정보의 길잡이’ 역할을 한다는 점 기억하세요.
실전 디자인 참고 사이트
| 이름 | 용도 |
|——|——|
| Behance | 포트폴리오 참고용 |
| Dribbble | UI 디자인 트렌드 확인 |
| Awwwards | 수상작 기반 실제 운영 사이트 참고
🖼️ ALT 태그 예시:
초보자를 위한 UI 구성 팁
- 버튼은 명확한 색상 대비 사용 (
primary,danger등) - 콘텐츠 간 간격은 8px 단위로 일관성 유지
- 제목 크기(H1~H3)는 시각적 우선순위 기반 설정
마무리
웹 디자인은 “예쁘게 보이기”보다 명확한 정보 전달과 사용성 개선이 핵심입니다.
색상, 폰트, 레이아웃 이 세 가지만 잘 다뤄도 사용자 경험이 눈에 띄게 향상됩니다.
디자인은 기술이 아니라 ‘훈련’입니다. 오늘부터 하나씩 적용해 보세요.
🔎 다음 포스팅 주제 추천
→ 26번: 모바일 반응형 웹페이지 만들기
→ 36번: CSS로 구현하는 버튼 효과 10가지
참고자료
- https://coolors.co/
- https://fonts.google.com/