UIUX [UI/UX] 사용자의 마음을 움직이는 좋은 UX의 특징 서비스의 사용성을 평가할 때는 다음과 같은 질문을 통해서 디자인이 좋은 사용성 경험을 제공하는지 체크해 볼 수 있습니다. 예를 들어, 우리가 항공사 앱의 사용성을 평가한다면, 이 앱의 주요 목적인 '항공편을 예약하는 것'에 대한 좋은 사용성 디자인은 '사용자가 해당 작업을 완료할 수 있는 명확하고 쉬운 방법'을 제공해야 합니다. 서비스의 메인페이지에서 여행 및 항공편 정보를 쉽게 입력할 수 ... UX디자인앱디자인UIUXUI 사용성모바일디자이너UI 사용성 [UI Seriese] 04 Card Card 란? 작은 사각형 안에 여러 종류의 정보들을 담고 있는 모듈 사용자의 진입점 역할을 하여 사용자가 클릭할 수 있는 다양한 콘텐츠를 나열하여 표시 카드는 주어진 공간을 활용할 수 있는 좋은 방법임 여러 콘텐츠 옵션을 제공하려 할 때 기존 목록 스크롤 대신 사용할 수 있는 훌륭한 선택 카드 섹션 내부를 나누면서 각각의 정보를 이쁘게 담아보자 우선 card-body div 를 만든다. 내... CSShtmlUIUXJavaScriptCSS [ui Series] 02 Bento Menu 벤토 메뉴(Bento Menu)란?? 통칭 벤토(도시락) 메뉴 또는 벤토 박스라고 불리는 이것은 그리드 목록으로 나열되는 메뉴를 의미 예시) 구글에서의 Bento Menu 창에 다른 곳으로 이동할 수 있는 여러가지 아이콘들이 존재 벤토버튼을 누른다 => 누르면 메뉴창의 display 속성이 변경된다. Class이름으로 요소를 가지고 오려고 할 때 다수의 요소들을 가지고 오게 된다. 해당 태그... CSShtmlUIUXJavaScriptCSS [UI/UX Challenge] Tab Bar 뒤에 콘텐츠가 있을 때 → 반투명한 탭바에 배경으로 사용됩니다. 기능을 사용할 수 없더라도 탭을 제거하거나 비활성화 하지 마세요 모든 탭이 항상 사용 가능한지 확인하고 탭의 컨텐츠를 이용할 수 없을 경우, 그 이유를 설명하세요. 예시) iOS기기에 노래가 없는 경우 음악 앱 내의 음악 탭에 노래 다운로드 방법이 설명되어 있습니다. 탭을 추가할때마다 사용할 수 있는 영역이 줄어들고 앱의 복잡성... SOPTUX ChallengeiOSUIUXswiftSOPT [UI Seriese] 03 Breadcrumb Breadcrumb 란? Breadcrumb 는 빵부스러기 란 뜻 ( 헨젤과 그레텔에서 따온 용어 ) 유저에게 맥락 정보의 훌륭한 소스가 되며, 이에 따라 유저가 다음 질문에 대한 답을 찾을 수 있도록 유도 내가 어디서 왔으며, 어디로 갈 수 있는가를 알려주며 어디로 가야할지에 대한 힌트를 주는 것 예시) 쇼핑몰 카테고리 브레드크럼을 통해 유저가 마음에 들지 않으면 쉽게 상위 카테고리로 이동... htmlUIUXCSSCSS select 태그 사용하지 않고 드롭다운 구현 (ft. React) select 태그의 디자인 어려움 문제로 select를 사용하지 않고 css(Styled-Components)를 이용해 드롭다운을 구현해봤습니다. 구현 기능 드롭다운 기본 기능. 드롭다운이 펼쳐졌을 때 css 처리 ( 밑의 DOM 요소를 덮는지, 미는지 ) 컴포넌트 드롭다운 상태를 저장합니다. active가 true면 펼쳐지고 false면 닫히도록 구현했습니다. 선택된 드롭다운 아이템을 저장... dropdownUIUXTILTIL
[UI/UX] 사용자의 마음을 움직이는 좋은 UX의 특징 서비스의 사용성을 평가할 때는 다음과 같은 질문을 통해서 디자인이 좋은 사용성 경험을 제공하는지 체크해 볼 수 있습니다. 예를 들어, 우리가 항공사 앱의 사용성을 평가한다면, 이 앱의 주요 목적인 '항공편을 예약하는 것'에 대한 좋은 사용성 디자인은 '사용자가 해당 작업을 완료할 수 있는 명확하고 쉬운 방법'을 제공해야 합니다. 서비스의 메인페이지에서 여행 및 항공편 정보를 쉽게 입력할 수 ... UX디자인앱디자인UIUXUI 사용성모바일디자이너UI 사용성 [UI Seriese] 04 Card Card 란? 작은 사각형 안에 여러 종류의 정보들을 담고 있는 모듈 사용자의 진입점 역할을 하여 사용자가 클릭할 수 있는 다양한 콘텐츠를 나열하여 표시 카드는 주어진 공간을 활용할 수 있는 좋은 방법임 여러 콘텐츠 옵션을 제공하려 할 때 기존 목록 스크롤 대신 사용할 수 있는 훌륭한 선택 카드 섹션 내부를 나누면서 각각의 정보를 이쁘게 담아보자 우선 card-body div 를 만든다. 내... CSShtmlUIUXJavaScriptCSS [ui Series] 02 Bento Menu 벤토 메뉴(Bento Menu)란?? 통칭 벤토(도시락) 메뉴 또는 벤토 박스라고 불리는 이것은 그리드 목록으로 나열되는 메뉴를 의미 예시) 구글에서의 Bento Menu 창에 다른 곳으로 이동할 수 있는 여러가지 아이콘들이 존재 벤토버튼을 누른다 => 누르면 메뉴창의 display 속성이 변경된다. Class이름으로 요소를 가지고 오려고 할 때 다수의 요소들을 가지고 오게 된다. 해당 태그... CSShtmlUIUXJavaScriptCSS [UI/UX Challenge] Tab Bar 뒤에 콘텐츠가 있을 때 → 반투명한 탭바에 배경으로 사용됩니다. 기능을 사용할 수 없더라도 탭을 제거하거나 비활성화 하지 마세요 모든 탭이 항상 사용 가능한지 확인하고 탭의 컨텐츠를 이용할 수 없을 경우, 그 이유를 설명하세요. 예시) iOS기기에 노래가 없는 경우 음악 앱 내의 음악 탭에 노래 다운로드 방법이 설명되어 있습니다. 탭을 추가할때마다 사용할 수 있는 영역이 줄어들고 앱의 복잡성... SOPTUX ChallengeiOSUIUXswiftSOPT [UI Seriese] 03 Breadcrumb Breadcrumb 란? Breadcrumb 는 빵부스러기 란 뜻 ( 헨젤과 그레텔에서 따온 용어 ) 유저에게 맥락 정보의 훌륭한 소스가 되며, 이에 따라 유저가 다음 질문에 대한 답을 찾을 수 있도록 유도 내가 어디서 왔으며, 어디로 갈 수 있는가를 알려주며 어디로 가야할지에 대한 힌트를 주는 것 예시) 쇼핑몰 카테고리 브레드크럼을 통해 유저가 마음에 들지 않으면 쉽게 상위 카테고리로 이동... htmlUIUXCSSCSS select 태그 사용하지 않고 드롭다운 구현 (ft. React) select 태그의 디자인 어려움 문제로 select를 사용하지 않고 css(Styled-Components)를 이용해 드롭다운을 구현해봤습니다. 구현 기능 드롭다운 기본 기능. 드롭다운이 펼쳐졌을 때 css 처리 ( 밑의 DOM 요소를 덮는지, 미는지 ) 컴포넌트 드롭다운 상태를 저장합니다. active가 true면 펼쳐지고 false면 닫히도록 구현했습니다. 선택된 드롭다운 아이템을 저장... dropdownUIUXTILTIL