사용자 경험(User Experience, UX)은 사용자가 어떤 시스템, 제품, 서비스를 직·간접적으로 이용하면서 느끼고 생각하게 되는 지각과 반응, 행동 등 총체적 경험을 말합니다. UX는 현재에 소프트웨어뿐만 아니라 산업을 통해 제공되는 서비스, 상품, 프로세스, 사회와 문화에 이르기까지 널리 응용되어 사용되고 있습니다. 그렇다면 UX를 어디서 전문적으로 배울 수 있을까요? 


UX 관련 온오프라인 강좌 및 스터디 그리고 블로그를 소개합니다. 




과정 - 모바일UI/UX기획 / 무료 오프라인 강의
모바일 UI/UX 의 개념 및 사용자 특성에 대한 이해와 디자인 원칙, 그리고 UX/UI 기획/설계에 필요한 디자인 방법 및 프로세스에 대한 학습과 실습을 통해 모바일 단말 및 서비스 UI를 디자인할 수 있는 실전 능력을 습득할 수 있는 오프라인 강의입니다. 무료 오프라인 강의로 진행되며 신청 기간이 따로 있어 그 기간 동안 지원서를 제출하여 합격된 사람만이 강의를 들을 수 있습니다. 

 



PXD 온라인강의

과정 - 스타트업을 위한 실전 UX / 유료 온라인 강의

UX블로그로 유명한 PXD에서 UX에 관련한 온라인강의도 진행하고 있습니다. 스타트업을 위한 실전UX 강의를 진행하고 있습니다.


과정 - UX 디자인 원데이 워크샵 / 유료 오프라인 강의
UI/UX에 대한 개념과 전반적인 UX 디자인의 방법론 이론에 대해서 배우고, 직접 실습을 해볼 수 있는 강의입니다. UX와 UI에 관심이 많은 대학생, UX디자인을 프로젝트에 적용해보고자 하는 실무 담당자, 문제 해결을 위해 팀 간 협업을 원하는 디자이너, 개발자분들께 추천합니다.

온오프믹스에서 UX 검색어를 두고 찾으면 많은 강좌들과 세미나가 있습니다. UX관련 유익한 강좌와 세미나가 무료 혹은 유료로 수시로 열리고 있으니 확인해보세요. 


<UX스터디그룹 및 블로그 모아보기>

NHN Ent. AD에서 운영하는 UI/UX 관련 블로그. 바로가기

- UX/UI관한 다양한 정보가 많은 PXD블로그. 바로가기

HCI(Human-computer interaction와 UX 관련 세미나, 워크샵을 기획 및 운영 하고 있는 한국HCI연구회 페이스북. 바로가기
 
- 다양한 지식 습득과 회원간의 온/오프라인 만남을 형성하는 social hub를 지향하는 UX Design Study. 바로가기

모바일 UX 또는 GUI 디자이너들의 노하우를 공유하는 모바일 UX/GUI 디자인 페이스북. 바로가기


UX를 전문적으로 배우기 좋은 강좌들과 도움이 되는 스터디 그룹들을 소개해드렸습니다. 방대하고 많은 UX에 대한 공부를 전문적으로 그리고 다양한 커뮤니티를 통해 배워보시길 바랍니다. 

by. 양 발자국

Posted by slowalk

오늘도 우리는 웹서핑을 하며 슬라이드되는 배너를 돌려보고, 복잡한 메뉴 사이를 누비며, 간혹 뜨는 팝업을 끄고 있습니다. 이렇게 무심코 사용하는 웹사이트들이 불편하신 적은 없으신가요? 우리가 무심코 사용하고 있는 웹 UX/UI 패턴들. North가 제시하는 가이드라인을 보면서 어떤 것들이 문제가 있고 어떻게 해결할 수 있을지, 우리는 무엇을 고민해야 하는지 알아봅니다. 


North는  “모바일 우선주의, 인-브라우저, 시스템 기반의 디자인과 개발”을 모토로 하는 오픈 소스 커뮤니티입니다. 얼마 전 웹 UX가이드라인을 만들어 Outdated UX pattern. 즉 구식의(?) UX들에 대해 이야기 하고 있습니다. 



1.  슬라이드 배너(Carousel)





슬라이드 배너, 롤링 배너 등으로 불리는 캐러젤. 좌우 화살표와 하단의 동전 같은 페이지 표시를 가지고 있는 이 디자인은 왜 좋지 않을까요? Brad Frost는 “캐러젤은 회의에서 서로 비난하기 위해 존재한다”며, 이를 비판하고 있습니다. 


North는 캐러젤 대신에 “콘텐츠 우선순위”를 정하라고 제안합니다. 4~5개의 콘텐츠를 같은 자리에 배치하는 것은 콘텐츠의 우선순위 파악에 실패한 것이고, 우선순위를 정하지 못한다는 것은 콘텐츠 전략의 실패이기 때문이지요. 공간에 아무 콘텐츠나 배치하지 말고 우선순위를 정해 가장 중요한 하나만 보여주는 것이 좋겠습니다.



2. 커다란 배경 사진 




최근 유행하고 있는 디자인이네요. 멋진 사진을 웹사이트 배경에 넣은 디자이너는 무얼 잘 못 했을까요? 문제는 스크린 사이즈입니다. 모두가 다 커다란 모니터에서 좋은 사진을 감상하면 좋겠지만 1024px보다 작은 모니터를 쓰는 사람도 많습니다. 보이지도 않고, 실제로 중요하지도 않은 커다란 이미지는 페이지를 느려지게 할 뿐입니다.


해결책은 상황에 맞는 이미지 사이즈 조정입니다. 여기서 상황이란 사용자의 환경이겠죠. 다양한 스크린 사이즈에 대응하기 위해 최적화된 이미지만을 보여줄 수 있는 페이지를 만들어야 합니다. Interchange가 좋은 예시인데요. 스크린 사이즈에 따라, 사용자의 접속 환경에 따라 조정된 이미지를 보여줍니다. 



3. 복잡한 메가 메뉴




메뉴에 마우스를 대거나 클릭했을 때, 하위의 모든 메뉴가 펼쳐지는 메가 메뉴를 많이 보셨을 겁니다. 사이트 전체를 한 눈에 볼 수 있어 편리한 메가 메뉴는 어떤 단점이 있을까요? North는 메뉴의 단계별로 내려가고, 작은 사이트들의 모임처럼 보입니다. 이는 사용자가 정확히 원하는 위치를 찾는데 매우 복잡합니다. 


Jared Spool은 메가 메뉴에 대해 이렇게 말했습니다. “사용자는 찾고자 하는 정보에 대해 어떤 단어나 문장을 생각하고 있는데, 이것을 트리거 워드라고 한다. 메가 메뉴는 메뉴 전체가 닫힐 때, 모든 단어, 문장이 사라지므로 사용자는 앞으로의 일을 예측하기 어렵다.(중략)“


이런 복잡성을 해결하기 위해서는 다음과 같은 배려가 필요합니다. 먼저, 메뉴 구조를 단순화하고 특히 겹겹히 싸여있는 메뉴나 4개 이상 단계가 내려가지 않도록 합니다. 그리고 사용자의 사용 흐름을 자연스럽게 구성해야 합니다. 헷갈리거나 복잡한 메뉴는 사용자에게 사용을 포기하게 만듭니다. 그들이 원하는 방향으로 똑바로 나아가도록 유도해야 합니다.



4. 이미지 속의 글자




웹사이트 구축에 있어 너무도 당연한 내용이지만 마음처럼 지키기 어려운 내용입니다. 이미지 안의 글자들은 ‘alt’ 속성 없이는 스크린 리더에 읽히지 않습니다. 또한 반응형웹이 적용된 작은 스크린에서는 글씨가 아주 작아져 사람도 읽을 수 없는 경우가 있습니다.


웹폰트가 해결책이 될 것 같은데요. Typekit, fonts.com , Typography.com, Font squirrel Web font generator 등에서 웹폰트에 대한 정보를 얻을 수 있습니다. 위 서비스에는 많은 웹폰트가 있지만 모두 영어 알파벳이죠. 그렇다면 한글은 어떻게 할까요? Google webfont의 ‘나눔글꼴’과 유료로 서비스 되고 있는 Typolink라는 서비스가 있습니다.



5. 레이어 팝업 




레이어팝업, 모달창 등으로 불리우는 이 UI는 어떤 문제가 있을까요. 다른 창을 직접 띄우는 팝업에 비해 사용자 경험에 좋은 것처럼 보이지만, 내부적으로는 여러가지 문제가 있습니다. 카보드 사용성 문제, 커서의 위치 문제, 브라우저의 크기가 달라졌을 때, 창을 종료하고 싶을 때 등 여러가지 숨겨진 문제들이 있습니다.


레이어 팝업 대신 이런 방법을 쓰면 어떨까요. 팝업의 내용을 화면에 직접 위젯과 같은 형태로 넣는 방법을 쓸 수 있습니다. 또한 새로운 페이지로 이동시키는 방법도 있습니다. 다양한 브라우저 크기를 고려해서 여기처럼 재밌는 방법을 쓸 수 있습니다.



6. 무한 스크롤 




역시나 많이 사용되고 있는 무한 스크롤은 어떤 단점이 있을까요. North는 무한 스크롤되는 페이지를 사용자가 선택하고 쓸 수 있도록 고려해야 한다고 말합니다. 즉, 사용자에게 다음 페이지를 불러올지 결정할 수 있도록 해야 합니다. 페이지 하단으로 내려가면 자동으로 내용을 불러오기 보다는 http://www.inc.com/처럼 사용자가 원할 때, 보여줄 수 있어야 합니다.


North가 지적하는 문제들과 그에 맞는 해결책을 알아보았습니다. North는 오픈소스 커뮤니티일뿐 그들의 말이 정답은 아니겠지요. 하지만 우리가 무심코 보고, 쓰고, 때로는 만드는 웹 UI에 대해 조금 더 생각해 볼 수 있는 기회였습니다. 



참고 : 

North

Outdated UX Patterns and Alternatives

6 Epic Forces Battling Your Mega Menus

Fullscreen Overlay Styles & Effects



by 북극곰 발자국




Posted by slowalk