모바일 홈페이지 제작 :: UX 디자인으로 깔끔한 디자인을 구현!

안녕하세요. 웹프로소프트입니다. 오늘은 모바일 홈페이지 제작에 대해서 이야기해볼까 합니다. 모바일 홈페이지는 PC웹에 비해 작은 화면으로 구성되어 있어서 작은 화면 속에 콘텐츠가 알차게 들어가야 하는데요. 이때, 사용자 경험(UX, User Experience) 디자인이 중요해집니다. 웹에서의 사용자 경험 디자인이란 사용자가 웹 사용을 통해 이루어진 정보를 바탕으로 축적된 경험을 의미합니다.

 

 

---

 

 

모바일 홈페이지 제작

UX 디자인으로

깔끔한 디자인을 구현

​

가장 대표적인 예가 햄버거 버튼인데요. 모바일 웹 오른쪽 상단에 위치한 가로형태의 세 가지 줄 형태만 봐도 이것이 사이트메뉴 펼쳐보기를 의미한다고 단번에 알 수 있습니다. 비단 햄버거 버튼 뿐만 아니라 네이버를 비롯하여 다음 메인화면에 로그인 버튼이 오른쪽 상단에 위치해 있는데, 이러한 사용자 경험의 축적으로 웹 사용자들은 로그인 메뉴가 으레 오른쪽 상단에 있을 것이다-라고 무의식적으로 판단하게 되는 것이죠.

 

이러한 사용자 경험은 웹을 기획할 때 많이 응용됩니다. 타겟층이 20-40대 층이라면 햄버거 버튼만으로도 쉽게 메뉴 펼쳐보기라는 것을 인지할 수 있어서 UX 디자인을 응용할 수 있으나, 노년층이라면 햄버거 버튼이 의미하는 바를 알 수 없어서, 오히려 햄버거 버튼을 디자인하는 게 안 좋은 결과를 초래할 수도 있습니다. 따라서 타겟에 맞는 웹기획이 우선적으로 뒤따라야 겠습니다. 이는 나중에 사례를 통해 자세히 안내해드리겠습니다.

---

UI 디자인과 UX 디자인. 무엇이 다른가?

사진출처 :  https://theblog.adobe.com/what-is-ux-and-why-should-you-care/

 

UI(User Interface) 디자인은 화면을 통해 사용자가 기계와 소통할 수 있도록 도와주는 디자인입니다. 기계와 사람 사이의 작용을 의미한다고 보시면 될 것 같아요. 일반적으로 UI라고 불리우는 것은 GUI(Graphic User Interface)라고, 아이콘이나 컬러 등 여러 시각적인 요소를 통해 사용자가 기계언어를 쉽게 그래픽으로 인지할 수 있는 것을 의미합니다. 반면 UX디자인은 UI를 포괄하는 보다 광의의 개념인데요. UI디자인이 보편화되자, 사람들이 UI디자인을 많이 접하게 되고 UI디자인에 대한 경험을 축적합니다. 이렇게 UI디자인에 축적된 경험을 바탕으로 UI디자인을 하는 것을 UX디자인이라고 생각하시면 될 것 같습니다.

​

효과적인 UX 디자인의 사례

 

결제 양식 디자인입니다. 위쪽과 아래쪽의 차이를 느끼셨나요? 위쪽 디자인을 살펴보면 카드 넘버가 무엇을 의미하는지, 만료일과 보안코드가 무엇을 의미하는지 알 수 없어서 사용자들이 불편을 겪을 수 있습니다. 이러한 혼란을 막고자 만료일에 미리 MM/YY 형식을 써둔다던지, 보안코드에 물음표 아이콘을 추가해 설명을 더하고, 어떤 카드로 결제할 수 있는지 결제 아이콘을 시각화하여 디자인하여 한결 보기 편해졌습니다.

​

웹프로소프트의 UX 디자인 사례

 

다음으로 저희 웹프로소프트에서 디자인한 반응형 모바일 홈페이지를 비교하여 설명해드리겠습니다. 위쪽은 시제품제작업체의 모바일 홈페이지이며, 아래쪽은 축산악취저감솔루션 기업의 모바일 홈페이지입니다. 타겟층 또한 다른데요. 왼쪽 기업은 아이디어를 중요시하는 기업답게 20대에서 50대까지가 주력 방문자 층이라, 햄버거버튼에 대한 인지를 하고 있기 때문에 오른쪽 상단에 햄버거버튼 UI를 삽입하여 UX디자인을 할 수 있었습니다. 따라서 심플하면서도 미니멀한 디자인이 됨과 동시에 PC웹 디자인과의 통일성 또한 이뤄낼 수 있었습니다.

반면에 오른쪽 기업의 주타깃층은 축사를 운영하는 농업인이 주타깃이라, 어쩌면 햄버거버튼에 대한 사용자경험이 부족할 수도 있다는 판단이 들었습니다. 따라서 상단 메뉴 디자인을 할 때 왼쪽 아이콘은 햄버거버튼으로 하되, 펼쳐보기 메뉴를 따로 UI디자인을 하여 제작하였습니다. 디자인적으로 미니멀한 디자인은 아닐 수 있지만 친절한 디자인이 되어 노년층도 부담없이 사용할 수 있는 UX디자인으로 탈바꿈하였습니다.

​

---

​

UX디자인의 사례는 다양합니다. 모바일 홈페이지 디자인에서의 햄버거 메뉴뿐만 아니라, PC웹에서도 홈페이지 왼쪽 상단의 로고를 클릭하면 홈페이지 메인으로 이동한다고 인지한다던지, 모바일페이지에서 왼쪽상단의 < 아이콘을 클릭하면 이전 페이지로 돌아간다는 사실도, 많은 웹경험을 통해 축적되어온 정보입니다. 이런 정보들의 통합으로 효과적인 UX디자인을 할 수 있는데요. 중요한 것은 이전 경험을 통해 만들어온 정보들뿐만 아니라, 이전 경험에서 벗어나 어떻게 하면 새로운 사용자 경험을 선사하게 될지 기존과 다른 UX를 제시하는 것도 중요한 일일 것 같습니다. 오늘 소개해드린 정보는 여기까지구요. 다음에는 더 좋은 정보로 찾아뵐게요~ 모바일 홈페이지 제작에 대해 문의하고 싶으시면 언제든지 웹프로소프트에 연락주세요! 감사합니다.

 

웹프로소프트의 더 많은 포트폴리오가 궁금하시다면 아래사진 링크를 클릭해주세요.

​