UI/UX 디자인의 개념

학습 목표

UX 디자인의 개념과 진보된 의미를 이해하여 창의적인 아이디어를 도출할 수 있다.

UI 디자인의 개념과 원칙을 이해하여 창의적인 아이디어를 도출할 수 있다.

UX : 사용자 경험

사용자가 특정한 시스템, 제품, 서비스, 콘첸츠를 사용한 경험치를 뜻한다.

기능, 만족도, 상호 교감을 통해 상품, 콘텐츠에 대하여 인지할 수 있는 경험을 가리키는 말이다.

UI, GUI의 개념보다 더 넓고 총체적이며 기업의 문화와 전략을 포함하는 개념

즉, 제품과 콘텐츠의 사용성을 개선하고, 사용자를 지속적으로 분석, 파악하여 기업의 UX 전략에 노출되게 하는 방법

이는 사용자의 감성, 경험치의 콘텐츠를 기획, 제작, 서비스하는 과정을 포함한다

UI : 사용자 인터페이스

휴대폰, 컴퓨터 프로그램, 내비게이션 등 시스템과 사용자의 의사소통을 목적으로 한다.

스마트폰 등 다양한 모바일 기기로 인하여 UI의 중요성이 크게 부각되고 있다.

제록스 연구소와 엔켈트의 연구에서 시작되었다고 일반적으로 알려져 있다.

기존 CLI 명령어 인터페이스에서 그래픽 위주의 GUI로 바꾸며 특히 애플이 많이 선보였다

실습으로 디자인 리서치를 진행하였다.

문구 사이트로 유명한 핫트랙스와 1300k의 모바일 페이지를 훑어보고

크게 전체구조, 화면설께, 조작 편의성, 색상 등에 관해 러프하게 의견을 나누어 보았다.

핫트랙스 헤더 부분 / 2단으로 되어있다  

일반적인 다른 모바일 웹과 동일하게 왼쪽 상단에 햄버거 버튼이 있다

네비게이터 바는 좌우로 스와이프하여 메뉴를 확인할 수 있다

1300k 헤더 부분 / 상단 배너가 붙어있어서 사실은 1단이다

햄버거 버튼이 없다. 모든 카테고리를 스와이프하여 확인할 수 있다.

이렇게 보면 핫트랙스가 엄청 메뉴가 많은건가 싶기도 하다

핫트랙스 메인비주얼 / 이걸 메인비주얼이라고 부르는지 처음 알았다

정말 이쪽은 용어가 전부 선생님 부르기 나름인거 같다...

진심 한 번도 메인 비주얼이라고 들어본 적이 없다.......

그냥 보통 알듯 슬라이더다...

1300k 메인비주얼 / 당연히 all+ 버튼 누르면 페이지 이동해서 상품 보여줄 줄 알았는데

특이하게도 버튼을 누르면 모달 팝업으로 이미지를 보여준다.

전체 상품을 빠르게 확인할 수는 있다고 생각하지만

굳이 이걸 내려서 확인하고 싶을지는 잘 모르겠다

심지어 팝업이라 내용 확인하고 다시 상단으로 올라와야 엑스가 있다

몇 단 구조다 어쩌구 하는데

사실 잘 모르겠다

푸터 부분이다

sns 버튼을 보니 1300k는 참 많은 채널을 운영하고 있는거 같다

마케팅 담당자가 많은가 보다...

아니면 죽어나겠지...하하

핫트랙스는 트위터, 페북, 인스타 세 개 밖에 없네

상단 네비게이터 메뉴처럼 플로팅 되어있는 하단 메뉴바이다

이걸 뭐라고 부르는지 아시는 분...?

이제보니 1300k는 햄버거 버튼이 하단에 있다

핫트랙스가 상단에 있는 검색버튼도 하단에 있고.

아직은 상단에 있는걸 더 많이 본지라

솔직히 1300k는 특이하다고 느꼈다

핫트랙스 메인에서 <- 버튼은 왠지 누르고 싶지 않게 생겼다

아직 이런 식으로 분석을 해 본적이 없어서 신기하다

이제 내가 만들 것들에 관해서도 좀 찾아 봐야겠지..

솔직히 귀찮다.....

세상에서 포트폴리오 만들기가 가장 귀찮다....