[디자인트렌드] 프로페셔널해 보이는 웹디자인을 위한 부가적 요소 4가지

프로페셔널해 보이는 웹디자인을 위한 부가적 요소 몇 가지

 

웹디자인에 간단한 인터랙션을 조금만 더하면 프로페셔널해 보이는 몇 가지 요소들이 있습니다.
작은 효과들로 내 사이트를 풍성한 UX web이 되도록 제작해보세요.

 

---

 

 

1. 블러 효과 filter:blur()

 

nike 웹사이트의 블러 효과

 

이전 콘텐츠에서도 한번 소개되었던 nike 사이트의 블러 효과입니다.

위와 같은 마우스오버 효과는 스크립트가 함께 추가되어야 하지만
단순한 hover 효과나 blur 효과 자체는 간단한 CSS만으로도 설정이 가능합니다.

 

MDN blur effect CSS

 

blur(0)        /* No effect */
blur(8px)      /* Blur with 8px radius */
blur(1.17rem)  /* Blur with 1.17rem radius */

 

블러 효과 적용을 원하는 이미지 소스의 class 에 filter:blur(블러의정도); 코드를 넣어주면 됩니다.

 

 

예를 들어 img 태그에 바로 적용 시에는 아래와 같이 작성합니다.

<style>
img {filter(blur(10px);}
</style>

<img src="/web/images/filename.jpg">

 

이미지에 class를 지정하여 사용하는 경우에는 아래와 같이 작성합니다.

<style>
.imgStyle {filter:blur(10px);}
</style>

<img src="/web/images/filename.jpg" class="imgStyle">

 

---

 

2. 컬러 텍스트 디자인  Colored text design

 

웹사이트 전체적으로 사용되는 모든 텍스트에 컬러를 입히는 형태의 디자인은
2022 웹디자인 트렌드 중 하나입니다.

브랜드의 메인 컬러와 보조컬러가 확실할 때 웹디자인에 적용하면 최상의 효과를 얻을 수 있습니다.

다만 주의할 점은 웹표준 가이드에서 색상 대비 기준에 미치지 못할 수 있으니 대비가 확실한 컬러를 사용해야 합니다.

 

 

MKTL 웹사이트

 

---

 

3. 마우스 커서 디자인 mouse cursor image

 

Fictional website

실시간으로 반응하는 마우스 커서 디자인은 사이트 전반의 경험에 생동감과 경쾌함을 더합니다.

사이트의 디자인 요소에 맞게 잘 디자인된 커서 디자인을 적용하여 웹디자인의 가치를 한층 올릴 수 있습니다.

 

---

4. 배경 픽스 패럴랙스 효과 (background-attachment:fixed;)

 

 

아주 간단한 css 를 통해 적용해볼 수 있는 배경 픽스 효과입니다.

사이트의 깊이감을 주어 입체적인 느낌이 들도록 하는 효과입니다.

 

MDN background-attachment css

다양한 attachment 효과를 MDN 문서에서 확인해보세요.

 

함께 보면 좋은 콘텐츠

트렌디한 웹디자인을 위한 Serif 무료 폰트 소개

쇼핑몰 상세페이지 내에 동영상 삽입하기

멋져보이는 웹사이트 포인트 - 마우스 커서 URl 이미지로 바꾸기