반응형 홈페이지 제작, UI UX 디자인이 중요한 이유
유저 인터페이스(user interface), 유저 익스피어리언스(user experience) 두 가지 개념은 현재 웹과 모바일 디자인에서 가장 중요하게 생각하는 요소입니다. 반응형 홈페이지 제작 과정에서 UI, UX 디자인이란 무엇이며 왜 중요한지 이유를 알아야 더 나은 결과물을 만들 수 있기에 이 부분을 이야기해 보겠습니다.
디자인은 정답이 없는 영역이라고 합니다. 그렇지만 UI, UX를 기준으로 보면 몇 가지 고려하고 지켜야 할 원칙이 존재한다고 생각하는 필자의 개인적인 의견이라 생각하고 읽어 보시기 바랍니다.
UI, UX 디자인 개념과 반응형 홈페이지 제작
무엇을 중요하게 생각해야 하는가?
반응형 홈페이지 제작을 주제로 가장 먼저 이야기해야 할 부분은 역시 UI와 UX 디자인 개념과 둘 사이의 관계에 대한 것입니다. 이것은 사용자 친화적인 디자인이 좋은 경험을 만든다는 큰 개념에서 세부적으로 어떻게? 라는 질문에 답을 찾는 게 바로 반응형 홈페이지 제작 과정일 것입니다.
우선 유저 인터페이스(user interface)에 관해 이야기해 보죠, 제가 생각하는 UI 디자인이란 사용자에게 익숙함과 신선함을 동시에 전달할 수 있어야 성공한 디자인이라고 봐요.
즉, 사용에 불편함을 느끼지 않아야 하지만 식상함을 벗어난 디자인이 되어야 한다는 것인데요, 평범함은 불편함을 주지 않는 대신에 감동 또한 없애버리지만, 특별함은 신선하지만 편안함을 느끼기가 쉽지 않기에 둘 사이의 간극을 해결하는 게 UI 디자인의 핵심이죠.
그래서 저는 반응형 홈페이지 디자인에서 UI란 적절함을 유지하는 것으로 생각해요, 강약에 대한 이해와 공간을 고려해야 하고, 그 속에 신선한 요소가 포함되어야 사용자는 불편함이 없고 특별하다 생각하게 되죠.
유저 익스피어리언스(user experience)는 어떻게 만들어질까요? 이건 UI 디자인을 기반으로 사용자의 생각을 예측하는 능력에서 만들어지는 데, 이를 위해서는 배려라는 단어에 집중해야 합니다.
브랜드 반응형 홈페이지 제작이라면 고객이 웹사이트에 방문한 의도를 먼저 파악하고, 그들이 이동하는 동선을 예측해서 원하는 정보를 즉각적으로 제공하는 기본적인 일에서 시작 되어야 합니다.
모든 분야에서 좋은 고객 경험을 만드는 것은 그들이 원하는 것, 혹은 미처 생각하지 못했던 것까지 배려하는 것이 좋은 경험을 넘어 감동으로 다가오기 때문이죠.
자 그럼 거창한 이야기는 여기서 마치고 이제 반응형 홈페이지 디자인에서 제가 생각하는 실질적인 방법이란 무엇인지 설명해 보겠습니다.
반응형 레이 아웃에 대한 이해
어떤 분은 UI와 UX 개념을 따로 구분하지만, 저는 UI가 곧 UX라고 생각해요, 사용자 친화적인 웹사이트 디자인이 곧 좋은 경험을 만든다고 믿기 때문이죠. 그런 의미에서 레이 아웃은 반응형 홈페이지 제작에서 가장 중요한 요소가 아닐까요?
분명 PC와 모바일은 화면 비율이 다르고, 객체의 배열이 달라지는데, 동일한 모습으로 보인다면 사용자 관점에서 불편함을 느끼게 되죠. 그래서 웹디자인 영역에서 반응형 홈페이지 디자인이 선택이 아닌 필수적인 요소가 된 것이죠.
모바일 레이 아웃을 결정하는 데 있어 고려해야 할 부분은 두 가지가 전부입니다. “불편하지 않게, 원하는 것을 보여주는 것” 첫 번째 불편하지 않게는 대상이 사용자가 되지만 두 번째 원하는 것은 디자이너의 입장을 의미합니다.
즉 컬러, 폰트, 이미지가 크지도 작지도 않고, 적당하게 그리고 순서에 맞게 보여주는 것과 디자이너가 생각한 모습으로 표현하는 것이 반응형 홈페이지 디자인에서 특히, 모바일 화면에서 중요하게 생각해야 할 부분입니다.
단, 모든 디자인에서 기준이 되는 것은 메시지 전달을 위해 어떤 방식이 더 좋은가를 생각하면 늘 답을 찾을 수 있습니다. 좋은 레이 아웃이란 말하고 싶은 것을 순서대로 배열할 수 있는 구조를 만드는 일이기 때문이죠
UI, UX를 포함한 폰트, 컬러, 이미지 디자인
폰트 크기는 공간에 따라 달라야 합니다. 예를 들면 당신이 PC로 이 글을 보고 있는 것과, 휴대폰을 통해 보는 것 사이에는 다른 폰트 크기가 적용되었다는 걸 알아야 합니다.
물론 늘 그런 것은 아니지만 글이 주인공이 되어야 할 포스팅 페이지에서 모바일 화면은 작은 공간이기에 폰트가 너무 크면 오히려 불편함을 느끼지만, PC 화면은 큰데 글자가 작게 느껴지면 눈이 피곤해지죠.
이런 기본적인 조치 이외에도 폰트는 컬러나 크기를 통해 계층 구조를 표현할 때도 모바일과 PC에서 다른 경험을 제공할 수 있습니다. 이 또한 실질적인 반응형 홈페이지 제작에서 중요하다 생각됩니다.
컬러는 PC와 모바일에서 차이가 있는 것은 아니지만 PC만 고려해서 디자인하면 모바일 화면에서 표현하고 싶은 디자인이 나오지 않는 경우가 많습니다. 그래서 이 부분도 반응형 홈페이지 제작 과정에서 살펴봐야 하는 요소가 됩니다.
마지막으로 이미지 비율에 대한 것인데요, 기본적으로 PC에 비해 모바일 화면은 작다는 것을 알아야 하고, 특히 이미지 안에 폰트를 표현한 디자인이라면 이미지 비율 가로 폭 세로 폭에 따라 UI에 치명적인 문제를 만들 수 있다는 걸 알아야 합니다.
모바일에서 와이드 형 이미지는 별로 추천하고 싶지 않은 형태의 이미지 디자인이라 PC와 모바일에서 각각의 이미지 비율을 사용하는 것은 반응형 홈페이지 제작에서 가장 기본이 되는 디자인 요소입니다.
반응형 홈페이지 제작은 공식이 아니다.
불편하지 않는 새로움이 정답 아닐까요?
반응형 홈페이지 디자인에 모든 과정이나 방법을 하나의 포스팅에 담는다는 건 불가능한 일이기에 이번 포스팅에선 무엇을 기준으로 해야 하는지와 가장 중요한 레이 아웃과 폰트 이미지 사용의 기본을 이야기했는데요.
오늘 이야기한 모든 것이 정답은 아닙니다. 다만 고려해야 할 부분이란 건 확실하죠. 모든 디자인 영역이 다 그럴 테지만 웹디자인은 새로움을 찾는 게 정말 중요합니다.
사람들은 익숙한 게 좋다면서도 늘 새로움에 열광하기 때문이죠.
그래서 하나의 디자인에 집착하지 말고 여러 가지 시도를 통해 새로운 디자인을 적용한 홈페이지 제작을 추구하는 게 웹디자이너가 나아가야 할 방향입니다. 거기에 일정한 공식이란 게 존재할 수 없죠.
다만 우리는 UI와 UX라는 개념은 늘 고려해야 반응형 홈페이지 디자인을 잘할 수 있을 것입니다. 잘한다는 의미가 무엇인지 이해했다면 이번 포스팅이 당신에게 조금이나마 도움이 되었다고 생각합니다.
모든 디자인은 사용자를 고려할 때 최상의 결과물을 만들 수 있기에 반응형 홈페이지 제작에서 UI, UX 디자인이 중요한 것이죠.
오늘 포스팅은 이것으로 결론을 지어봅니다.
2024.01.05
에디터 – 민서인
