주목해야 할 2021 웹디자인 트렌드

트렌드를 정리해둬야 할 것 같아서 검색하다가 글을 찾았는데 내용이 충실한 것 같아 읽다 보니 말도 안되는 오역 문장에 분통이 터져서 원문을 따로 확인하고 내 글로 다시 적어 두기로 했다. 직독 직해하면 한국형 문장이 아니라서 이상한 부분이 많아서 멋대로 의역을 많이 한터라 어디 내 놓을만한 글은 아니라고 생각하지만 혹시 필요하면 급하게 꺼내 쓰기 좋으라고 포스팅해 둔다.  

원문은 여기 있다.

목차

1. Use of comfortable colors 편안한 색상의 사용 
2. More scrolling transformations 조금 더 가공 변형된 스크롤
3. Parallax Animation 시차 응용 애니메이션 
4. Make use of abstract art compositions 추상 예술 구성의 사용 
5. Digitally interpreting physical products 제품의 물리적 특성에 대한 디지털적 해석 
6. Focus on creating captivating questionnaires 시선을 사로잡는 설문 만들기에 대한 집중
7. Make use of three-dimensional colors 3차원 입체 표현 색상의 사용 
8. Helping the world through web design for causese 이유 있는 디자인을 통한 사회 공헌 
9. Neumprphism 뉴모피즘
10. Voice user interface 음성 사용자 인터페이스 
11. Blending graphics and photography 그래픽과 사진의 혼합 
12. Use of large, attention-grabbing titles 시선을 강탈하는 큰 제목의 사용 
13. More elaborated use of footers 더욱 정교해진 바닥글, 푸터 
14. Hand Drawn Elements 손으로 그린 요소 

1. Use of comfortable colors 편안한 색상의 사용 

인터넷을 사용한다는 것이 예전에는 여가나 레저 활동에 가까운 것이었지만 이제는 디지털 환경을 기반으로 작업하는 유형의 업무가 늘어나게 되었으며, 따라서 사람들은 더욱 더 스크린 앞에서 업무와 여가를 함께 보내고 있는 상황이다. 스마트폰이나 컴퓨터 스크린에 지속적으로 노출되어 눈의 피로 등 여러 문제를 야기하는 것이 확실해지면서 웹디자이너들은 이에 주목하여 눈을 피로하게 하는 밝고 강한 대비의 색상을 사용하는 대신 편안한 색상을 사용하는데 몰두하고 있다.

지난 해에 이런 개념을 반증하는 새로운 트렌드가 나타났다. 다양한 소셜 미디어 플랫폼에 널리 퍼져 있는 압도적인 흰색 사용에 대항하는 '다크모드(Dark Mode)'가 도입되고 있다. (마음대로 부연설명도 하고 싶지만 넘어간다.)

2021년에 접어 들면서 웹디자이너들은 빛과 어두움, 이런 양 극단 스타일의 중간 지점을 찾고 있는 것 같다. 파스텔 블루, 밝은 분홍, 신선한 녹색 등의 부드러운 색상 팔레트를 주로 사용하는 경향을 보인다.

2. More scrolling transformations 조금 더 가공 변형된 스크롤 

사용자는 그들이 방문한 사이트를 스크롤하면서 단순한 탐색 이상의 작업을 수행한다. 스크롤은 단순한 탐색이 아니라 하나의 상호작용일 수 있다. 사용자가 손가락으로 직접 마우스를 움직이면 그에 대한 반응이 화면에 나타난다. 이러한 행동을 참여의 한 방법으로 볼 수 있기 때문에 스크롤과 관련된 매력적인 콘텐츠를 만들어낼 수 있다면 사용자 경험과 흥미를 더불어 향상시킬 수 있다. 

스크롤을 하는 것은 상호작용의 미묘한 형태 중 하나이므로 웹디자이너들은 사용자가 스크롤을 할 때 호소력있는 시각적 피드백을 얻을 수 있도록 트랜지션을 기반으로 한 복잡한 애니메이션이나 총천연색의 도식과 레이아웃의 전반적인 변화를 꾀하는 등의 다양한 노력을 하고 있다. 

스크롤에 의해 만들어지는 움직임은 사용자 경험을 단조로움에서 벗어나게 할 수 있다. 

3. Parallax Animation 시차 응용 애니메이션

시차(Parallax)를 응용한 애니메이션은 웹 디자이너들에게 필수적인 도구였다. (UI 그래픽 디자이너인 나에게는 쓸 일이 없었지만)그들은 지금까지 작은 입자 조각 배경부터 가장 작은 상호작용에 이르기까지 이 디자인 트렌드를 적용해 왔고, 2021년이 되면서 애니메이션은 더 복잡해지고 있다.

패럴랙스는 보는 사람에게 가까운 물체가 멀리 있는 배경보다 더 빠르게 움직일 때 일어나는 착시현상으로 자동차의 창문을 통해 지나가는 풍경을 보는 일상 경험과 비슷하다. 

페이지에 사용된 요소를 전경과 배경으로 분리하여 극단적인 시차 효과를 만들어 내는데, 배경과 전경을 사용하여 생성된 깊이는 사용자들에게 마치 컴퓨터 스크린을 극장 무대처럼 느껴지게 하는 몰입감 있는 환경을 만든다. 

4. Make use of abstract art compositions 추상 예술 구성의 사용 

그동안 추상미술을 연상하게 하는 디지털과 그래픽 디자인을 많이 볼 수 있었다. 원이나 사각형 같은 기하학적 도형의 사용은 제한적이고 미니멀하며, 직설적인 인상을 준다. 

웹디자이너들은 기본적인 형태를 사용하면서 그것들을 더 복잡한 것으로 구성 조직한다. 이러한 암시적인 구성은 정해진 형태에 제한적으로 정의된 감각을 무너뜨리고 자율감을 부여할 수 있다. 대부분의 웹사이트에서는 일러스트나 사진 이미지의 형태 구성에 이러한 추상 예술의 구성적 표현을 사용하고 있다.

웹디자이너들은 인물 이미지를 포함하지 않은 상태에서 감정을 불러오는 기법을 습득해 왔고, 웹페이지들은 표현적이며 생동감을 주고 있다. 

5. Digitally interpreting physical products 제품 물리적 특성에 대한 디지털적 해석 

제품은 보통 모든 브랜드의 핵심이고, 2021년을 기점으로 제품은 웹 사이트의 핵심이 되어 가고 있는 것 같다.

물리적 매체를 새롭게 해석하는 차원으로 물리적으로 생산된 제품 자체가 디자인 요소를 잇는 디자인 영감이 되고 있다. 

실제 생활에서 볼 수 있을 것 같이 쓰러진 매니큐어 병에서 매니큐어가 쏟아져 전체 페이지에 색이 번져 나가는 웹 사이트를 예로 들 수 있고, 또는 스마트폰의 시각적 형태를 만들기 위해 둥글게 모서리 처리한 사각형을 사용하는 등의 접근은 실제 제품과 웹 사이트 사이의 시각적 이야기를 만들어내고, 기대를 뛰어넘어 사이트를 더욱 진짜인 것처럼 보이게 한다.  

6. Focus on creating captivating questionnaires 시선을 강탈하는 설문 만들기에 대한 집중

웹 디자이너든, 웹 사이트 소유자든, 사용자가 웹사이트의 랜딩 페이지에 방문해서 당신의 서비스에 대해 더 알아보려고 클릭하거나 웹사이트를 탐색하기 시작할 때가 언제나 진실의 순간임을 알고 있으며, 사용자 경험의 질에 따라 어느 쪽으로 기울지 결정될 것이다. 이를 온보딩 프로세스라고 하며, 많은 웹디자이너들은 사용자가 제품 설명을 스스로 읽고 결정하도록 내버려두면 대부분의 사용자들은 흥미를 잃고 지루해한다는 것을 깨닫기 시작했다. 

따라서 그들은 조금 더 매력적인 상호작용 경험을 위해 설문을 만들어 내고 있다. 이러한 퀴즈 형태의 설문은 사용자들의 지속적인 참여를 돕고, 웹디자이너는 이를 통해 사용자의 선호도 특성 정보를 수집하여 사용자에게 특화된 제품 및 서비스 목록을 제공할 수 있다. 

7. Make use of three-dimensional colors 3차원 입체적 색상의 사용 

웹 디자인은 한동안 그라데이션 색상을 사용해 왔고, 이제는 색상의 전이라는 다음 단계로 변모하고 있다.

고채도의 삼차원적인 색상이 대부분의 웹 사이트 디자인 경향을 장악할 가능성이 가장 높으며, 입체적 표현을 위해 디자이너들은 평면 아이콘에 둥근 느낌을 만들어 주는 미세한 음영을 사용한다. 이러한 디자인 트렌드는 앱 아이콘에도 점차 영향을 미치게 될 것이며, 또한 웹디자이너들은 구조화된 색상 그라데이션의 블록을 사용는 것 보다는 조금 더 자연스럽고 불완전한 색상 혼합의 배경을 선택하게 될 것이다. 이를 계기로 2021년 웹 디자인 트렌드는 더욱 현실주의에 가까워질 예정이다. (3차원적 색상에 대해 이해가 잘 가지 않아 어려웠는데, 아마도 자의적인 해석이겠지만 3D 프로그램을 통해 렌더링했을 때 만들어지는 컬러의 느낌을 말하는 것 같음, 애플의 새로운 OS에는 강렬한 고채도 색상이 적용되어 있음, 그러나 첫 번 째 꼭지에서 이미 편안하고 부드러운 색상을 사용한다고 했는데 3차원 입체같은 색상의 사용이 널리 퍼질 것이라니 이게 대체 무슨 앞 뒤 안 맞는 말인가 싶기도 하지만, 그 때 그 때 선택은 고객의 몫이 되는 것이 아닐까 싶다.)   

8. Helping the world through web design for causese 이유 있는 디자인을 통한 사회 공헌 (합목적적 디자인에 대해 이야기하는 것이 아닐까 함)

이미 우리의 일상생활에 웹사이트가 깊이 엮여 있고 정보나 수익, 여가활동에 필수 불가결한 요인이 되었다는 것을 확언할 수 있다.

COVID-19 대유행에 잇다른 자가 격리 상황에서 인터넷은 피난처가 되어 버렸다. 줌, 스카이프 등과 같은 가상 플랫폼을 통한 회의를 동반한 업무 형태로 전환되었고, 많은 구식 오프라인 상점들이 온라인 판매 서비스를 시작했으며, 스트리밍 웹 사이트의 인기는 크게 증가했다.

웹디자이너들은 그동안 훌륭하고 의미 있는 디자인으로 이 모든 것을 수용하는 업적을 쌓아 왔으며, 2021년에도 어려운 시기를 헤쳐나가기 위한 도우미 역할을 지속적으로 수행해 나갈 것이다. 

특정한 목적을 가진 브랜드는 그들의 가치를 반영하기 위해 웹사이트를 디자인하는데 초점을 맞출 것이고, 이는 브랜드들이 다양한 고객과 실제를 반영할 수 있는 스톡이미지에 지속적으로 의존하게 될 것을 의미한다. 또한 모든 사람들이 웹사이트 제작에 접근할 수 있게 하는 DIY 웹디자인으로 큰 관심을 끌고 동기부여를 하게 될 것이다. 

9. Neumprphism 뉴모피즘

뉴모피즘(Neumorphism)은 최근 웹 디자인을 중심으로 많은 화제를 불러일으킨 새로운 디자인 트렌드로, 2021년보다 더 나아가 오랫동안 트렌드가 될 전망이다. 뉴모피즘은 시대를 역설적으로 거슬러 미니멀한 현실주의를 따르는 것으로 스큐어모피즘이 그 전신 스타일이다. 스큐어모피즘은 구시대적인 소재를 현대의 디자인으로 만들어내는 디자인 트렌드였고, 뉴모피즘은 두 가지 트렌드를 하나로 모으는 방향으로 나타나게 될 것이다. 

뉴모피즘은 색상을 겹쳐 반평면적(Semi-flat)인 표현을 하기 위해 선택적으로 그림자 효과를 사용하여 물체의 입체성을 모방하는 것으로 디보싱이나 엠보싱 효과와 유사하다. (원문 페이지를 통해 실제 사례를 볼 수 있고 자세한 예제를 포함한 뉴모피즘에 대한 상세한 내용에 대한 문서가 별도로 링크도 되어 있다. 그 부분은 나중에 다시 확인하기로)

이러한 트렌드를 이용하여 웹디자이너들은 평평한 디자인이 대세가 되어버린 시대에 잊고 있었던 촉각적 경험을 다시 선보일 것이고, 사용자들은 이미 경험한 바 있는 촉각 경험을 통해 상호작용하고자 하는 디자인과 더욱 더 결속하게 될 것이다. 

10. Voice user interface 음성 사용자 인터페이스 

정보를 측정(문맥상 평가라고 하기에도 이상하고 측정도 적합하지는 않은 것 같고 탐색 정도가 맞을 것 같긴 하지만)하는 방법은 시간에 따라 계속 바뀐다. 최근 들어 많은 사람들이 검색어를 손으로 입력하기보다는 음성 명령을 통해 질문하거나 요청을 하고 있다. 이런 현상을 인식하게 된 웹디자이너들은 가상의 조력자와 음성 챗봇의 출현에 발맞춰 적응하게 될 것이다. 많은 웹 사이트들이 전통적인 클릭 기반의 탐색과 더불어 음성 기반 탐색과 상호작용의 가능성을 모색하게 될 것이다.

11. Blending graphics and photography 그래픽과 사진 이미지의 혼합

2021년 큰 디자인 트렌드는 사진과 그래픽의 혼합 사용이다. 고품질의 히어로 이미지는 방문자들이 마치 새로운 웹사이트에 들어간 것처럼 그들을 사로잡는다. 이렇게 적용된 이미지들에 멋진 그래픽이 덧붙여진다면, 깜짝 놀랄만한 비주얼을 선사하는 것으로 웹사이트 소유자의 창조적 재능이 있음을 보여줄 수 있다. 

이렇게 하는 것이 웹디자인에 개성을 추가할 뿐만 아니라 기업 브랜드의 경쟁력 강화에도 도움이 될 수 있다. 웹디자이너들이 이러한 디자인 트렌드와 고객 브랜드의 정체성을 조화시키려고 할 때 충분히 가능성 있는 결과를 만들어 낼 수 있다. (결국 회사 홈페이지를 이렇게 바꾸고 싶어서 작업을 시작해 보았지만, 쉽지 않다.)

12. Use of large, attention-grabbing titles 시선을 강탈하는 큰 제목의 사용

오늘날 우리는 바쁘게 생활하느라 웹사이트를 보는데 쓸 여유 시간이 없다. 그래서 디자인 트렌드는 조금 더 오랫동안, 되도록이면 빠르게 사용자의 주의를 끌기 위한 해결책을 찾는 방향으로 바뀌어 가고 있다.

이를 위해 2021년 웹디자인에서는 굵은 폰트의 제목과 짧아진 본문, 빠르게 산만해지는 사용자들의 주의를 집중시키기 위한 신선한 본문을 보게 될 것이다. 이것이 전환(이 무슨 전환일까? 구독으로의 전환일까? 열독율을 말하는 것일까?) 증가에 도움이 될 것이며 더 커진 헤더 태그는 추가적인 정보가 필요한 경우 더 작아진 서브 텍스트와 쌍을 이루게 될 것이다. (이 스타일은 한참 지난 것 같기는 한데, 제목을 더 크게 쓰는 게 좋은가보다.)

13. More elaborated use of footers 더 정교화된 바닥글, 푸터

웹 디자인에서 바닥글은 오랫동안 활용도가 낮은 디자인 요소로 남아 있고는 했었다. 이전의 바닥글 스타일은 보통 연락처 정보나 등록 양식을 제공하는 데 사용되었지만, 이제 우리는 바닥글이 홈페이지의 추가 요소와 다른 중요한 부분을 포함하는 것으로 바뀐 것을 볼 수 있다. 애플이 아이폰에서 명령 센터를 활용하게 만든 것과 비슷한 방식이다. (명령 센터가 혹시 시리를 말하는 것일까, 애플 스토어 페이지에서의 푸터를 말하는 것일까, 무슨 명령 센터인지를 모르겠다.)

14. Hand Drawn Elements 손으로 그린 요소들

웹디자인에서 독특함을 유지하는 것은 해를 거듭할수록 매우 까다로워지고 있다. 손으로 그린 요소들을 사용하는 것이 웹사이트의 독창성을 보여주고 사이트 방문자들에게 긍정적인 감정을 끌어내는데 도움이 될 것이다. 

손으로 그려낸 요소들이 만들어내는 불완전함이 더욱 진짜처럼 느껴지게 하고, 웹사이트가 가지고 있는 딱딱한 구조를 부드럽게 하는데 도움이 된다. 

불완전한 비주얼은 일반적으로 전체 디자인에 독특한 감각과 캐릭터와 인간성을 부여하므로 아주 작은 디자인 요소라 할지라도 사용자들에게 상당한 영향을 줄 수 있다. 웹디자인을 신선하게 만드는 새로운 접근의 이런 디자인 트렌드가 한 층 더 인간적인 감성을 만들어 내고 새로운 사용자의 주의를 끌며, 기존 사용자들의 만족도를 높이는데에도 도움이 될 것이다. 

 

이상, 끝.

번역이 이리도 어려운 일임을 새삼 깨닫고 있다. 말이 되게 만드는 일이 너무 어렵다. 그래서 그렇게들 번역기를 돌리시는 것이겠지만, 그래도 적어도 디자인을 하는 사람이라면 자신이 가진 이해를 바탕으로 다른 사람에게 전달하기 쉽게 글을 작성할 수도 있어야 하지 않나. 짧은 실력으로 정확하고 유려하게 옮겨지지는 않았을지 모르겠지만 옮기는 동안 조금 더 정교하게 다듬어져 머릿속에 저장할 수 있었으니 그것만으로 괜찮은 일이다. 맺음말은 생략, 세 번쯤 반복해서 탈고하고 나니 지쳤다.