구글 테마 - 웹사이트 디자인의 필수 아이템

1. 색상 (Color)

 

 

• 프라이머리 컬러 (Primary Color): 주로 사용되는 웹사이트의 주요 색상. 로고나 주요 액센트 요소에 사용됨.
• 셰컨더리 컬러 (Secondary Color): 보조로 사용되는 색상. 버튼이나 배경 등 다양한 요소에 활용됨.
• 액센트 색상 (Accent Color): 홈페이지에서 특정 부분을 강조하기 위해 사용되는 색상.
• 텍스트 컬러 (Text Color): 사이트의 텍스트 요소에 사용되는 컬러. 가독성을 고려하여 조절되어야 함.
• 마우스 오버 컬러 (Hover Color): 사용자가 요소 위에 마우스를 올렸을 때 바뀌는 색상. 상호작용성을 높이는 데 중요함.

 

 

2. 레이아웃 (Layout)

 

 

• 그리드 시스템 (Grid System): 웹사이트 디자인에서 중요한 개념으로, 화면을 격자로 나누어 요소들을 배치하는 방법을 말해.
• 반응형 레이아웃 (Responsive Layout): 다양한 디바이스에서 웹사이트가 보기 좋게 표시되도록 하는 디자인 방식을 의미해.
• 고정형 레이아웃 (Fixed Layout): 웹사이트의 너비와 높이를 고정시켜 디자인하는 방식으로, 최근에는 사용이 줄고 있지만 여전히 효과적인 방법 중 하나야.
• 플로팅 레이아웃 (Floating Layout): 요소들을 왼쪽으로 띄워서 배치하는 방법으로, 다양한 디자인에서 활용 가능한 방식이야.

 

 

3. 폰트 (Font)

 

 

• 다양한 폰트 선택: 웹사이트에 사용할 *폰트를* 신중하게 고르는 것이 중요하다. 폰트의 *가독성*과 *시각적 효과*를 고려하여 적합한 폰트를 선택해야 한다.
• 글꼴 계통: **서체의** *계통*을 일관되게 유지하는 것이 좋다. *글꼴을* *조합할 때* 서로 조화롭게 어우러지는 *글꼴을* 선택해야 한다.
• 글꼴 크기: 웹사이트의 텍스트 *크기*를 *계획적으로* 정하는 것이 중요하다. *사용자*가 *편안하게* *글을* 읽을 수 있는 *크기*로 설정해야 한다.
• 폰트 스타일: *강조*를 위한 *굵은 글씨*나 *중요한 부분*을 나타내기 위한 *기울임* 등 *폰트 스타일*을 *다양하게* 활용할 수 있다.

 

 

4. 이미지 (Image)

 

 

• 질 좋은 이미지 선택
• 고화질 이미지 사용
• 배경에 어울리는 이미지 선정
• 이미지 압축하여 빠른 로딩 속도 유지

 

 

5. 아이콘 (Icon)

 

 

• 의미: 아이콘은 간결하고 직관적인 시각적 요소로, 사용자에게 정보를 전달하거나 특정 기능을 나타내는 데 쓰입니다.
• 디자인: 아이콘은 작고 명확하며 독특한 형태로 디자인돼야 합니다. 색상과 형태의 일관성이 중요합니다.
• 기능: 클릭 또는 터치하여 특정 기능을 실행하거나, 정보를 시각적으로 제공하는 역할을 합니다.
• 효과: 아이콘은 웹사이트의 시각적 유관성을 높여주며, 사용자 경험을 향상시키는데 중요한 역할을 합니다.

 

 

6. 애니메이션 (Animation)

 

 

• 로딩 애니메이션 (Loading Animation): 사용자 대기 시간을 닍게 해주며, 사용자 경험을 향상시켜줍니다.
• 호버 애니메이션 (Hover Animation): 마우스 호버 시 동작하여 상호작용을 강조합니다.
• 전환 애니메이션 (Transition Animation): 요소가 변화할 때 부드럽게 전환되어 사용자에게 자연스러운 느낌을 줍니다.
• 스크롤 애니메이션 (Scroll Animation): 페이지를 스크롤할 때, 요소들이 효과적으로 나타나게 해줍니다.

 

 

7. 반응형 디자인 (Responsive Design)

 

 

• 모바일 트래픽은 점점 증가하고 있다.
• 반응형 디자인은 여러 화면 크기와 기기에 대응할 수 있다.
• 이는 사용자 경험을 향상시키고 페이지의 가시성을 높인다.
• 구글는 반응형 사이트를 선호하며 SEO에도 긍정적인 영향을 줄 수 있다.
• 반응형 디자인은 콘텐츠의 일관성을 유지하며 사이트의 유지보수성을 향상시킨다.