Category (320) 썸네일형 리스트형 Card UI 디자인 가이드 출처: https://brunch.co.kr/@august9/244 Card UI란? Card UI는 Single Case에 대한 콘텐츠와 작업을 포함하는 UI 구성 요소를 말합니다. Card에는 다양한 요소가 포함될 수 있겠지만 그것들이 담은 내용은 모두 한가지(동일한) 토픽이어야함을 전제합니다. Card UI의 목적은 긴 텍스트를 피하고 검색 가능한 콘텐츠를 더 많이 렌더링하기 위함입니다. 사용자는 디자인 관점에서는 카드의 개념에 익숙하지 않을 수 있지만 실제 카드를 모티브로했기때문에 사용법을 바로 인지할 수 있습니다. 그럼 왜 인기가 있을까요? Card는 콘텐츠를 단순화하는 것처럼 보이기 때문에 특히 인기가 있습니다. 특히 모듈방식으로 사용되어서 서로 다른 내용을 담은 Card 아이템이라도 함께 구.. UI 디자인 가이드 : 로딩 상태 표시 버튼 출처: https://brunch.co.kr/@august9/279 버튼의 로딩 상태 표시하기 When You Need to Show a Button’s Loading State 우리가 사용하는 버튼에는 활성화(enabled) 및 비활성화(disabled) 상태 외에 로드(loading) 상태도 존재할 수 있습니다. 보통은 작업이 몇 초 이내에 완료되기 때문에 일반적인 네트워크 상황에서 버튼 로딩 상태가 사용자에게 표시되지 않는 경우가 많지만 네트워크에 문제가 있거나 기타의 이유로 평소보다 더 많은 시간이 걸리는 경우 사용자에게 상태에 대한 어포던스를 제공하지 않는다면 에러 발생 확률이 높아집니다. Action Errors(사용자 액션 오류) 사용자는 작업이 완료되는 데 예상보다 오랜 시간이 걸리는 경우.. UI 디자인 가이드 : Search & browsing 출처 : https://brunch.co.kr/@august9/287 검색 결과를 위한 사이트와 컨텐츠 사이트를 디자인할 때 사용자가 '어떤 모드'의 행동을 하려고 하는지를 염두에 두어야 합니다. 사용자는 '검색 모드'을 하려고 하나요? 아니면 '탐색 모드' 작업을 하려고하나요? 이는 사용자 여정(Customer Journey Map) 을 가장 잘 지원하도록 플랫폼을 설계하는 방법을 결정하는 데 도움이 됩니다. 페이지 요약 검색 모드(Search)와 브라우징 모드(Browsing)의 차이 탐색/브라우징이란? 검색이란? 각 모드는 UI에 어떤 영향을 줄까요? 탐색 및 검색 모드가 함께 작동하는 경우? 마무리 참고 1. 검색 모드와 브라우징 모드의 차이 사용자가 검색 창에 무언가를 입력할 때에는 아마도 다음.. UI 디자인 가이드 : Select Controls 출처 : https://brunch.co.kr/@august9/280 디지털화면에서 사용하는 선택 컨트롤들은 우리가 실제 생활에서 많이 사용하는 스위치에서 기원합니다. 먼저 "토글"이라는 단어는 활성화될 때마다 두 상태를 번갈아 가며 사용하는 짧은 손잡이가 있는 스위치를 나타내는데, 조명을 "스위치"할 때에 사용되고 있죠. "라디오 버튼"의 경우 일반적으로 다이얼 아래에 스테이션 셋팅을 기계적으로 저장할 수 있는 버튼 세트가 있어 사용자가 스테이션간 전환을 더 빠르게 할 수 있는 일련의 버튼이 있는 자동차 라디오에서 나온 단어입니다. 이 버튼 중 하나를 누르면 다른 버튼을 누를 때까지 계속 눌린 상태를 지속하게 됩니다. 이 컨트롤들은 디지털에서도 비슷한 맥락으로 사용됩니다. Checkboxes(체크박스).. UI 디자인 가이드 : Pagination 출처 : https://brunch.co.kr/@august9/278 페이지네이션, 무한 스크롤, 더 보기 버튼에 관하여 UI cheat sheet: pagination, infinite scroll and the load more button 콘텐츠가 포함된 UI를 설계하는 경우 콘텐츠가 많을 때는 이 세 가지 패턴 중 하나를 선택하여 콘텐츠를 로드합니다. 어떤 방법 가장 좋을까요? 사용자는 무엇을 선호할까요? 대부분의 플랫폼은 무엇을 사용하고 있나요? 시작하기 전에 다른 두 가지 관련 가이드를 먼저 확인하는 것도 좋습니다. 하나는 검색 및 탐색 에 대한 것이고 다른 하나는 그리드 및 목록에 대한 것 입니다. 이것들은 세 가지 패턴 유형을 이해하는 데 중요하지 않지만 몇 가지 배경과 컨텍스트를 제공하고.. UI 디자인 가이드 : Infinite Scroll 출처 : https://brunch.co.kr/@august9/291 무한 스크롤은 페이징 방법 중에서도 매우 인기 있는 디자인 유형입니다. 특히 모바일에서처럼요. 무한 스크롤를 활용해서 사용자 경험, 잠재 고객 창출등에 영향을 줄 수 있습니다. 무한 스크롤링이란 브라우저 스크롤 막대가 페이지 하단에 도달하는 것을 방지하는 것 을 말합니다. 사용자가 페이지를 더 아래로 스크롤할 때마다 콘텐츠가 확장되어 새로운 콘텐츠가 추가됩니다. 무한 스크롤은 연속적(무한하게)으로 스크롤하는 형태일 수도 있고, 사용자가 계속 스크롤을 선택/선택 해제할 수 있는 "더 보기" 옵션으로 단축할 수도 있습니다. *아래에서 무한 스크롤(Infinite Scroll)과 더 보기(Load More) 버튼에 대해 한차례 다룬 바 있습.. UI 디자인 가이드 : List vs Grids 출처 : https://brunch.co.kr/@august9/288 목록 타입 : 리스트와 그리드 list vs grids 검색 결과 혹은 아이템 목록의 형태를 가진 UI 구성, 가장 대표적인 두가지 타입의 뷰 모드를 알아봅니다. 리스트 모드와 갤러리뷰, 카드뷰라고도 불리는 그리드 모드입니다. 서비스의 어디에서나 사용할 수 있겠지만 주로 검색 결과, 아이템 카탈로그 및 뉴스 피드를 중점적으로 살펴보겠습니다. 이 선택을 통해 사용자가 우리의 콘텐츠와 상호 작용하는 방식과 사용자가 수행할 작업이 결정됩니다. 페이지 요약 1. 소개 1.1 그리드 뷰와 리스트 뷰의 차이 1.2사용자는 어떤 모드에 있고 가장 중요하게 여기는 건 무엇인가요? 1.3 이미지 사용 1.4 인지 부하 2. 그리드 뷰(Grid view.. UI 디자인 가이드 : 쉬운 컬러 팔레트 만들기 8단계 쉬운 컬러 팔레트 만들기 8단계 서비스를 만들면서 메인 컬러만 정해 놓은 상태에서 컬러 팔레트를 만들기 위해 고민해본 적이 있으신가요? 쉽고 간단하게 컬러 팔레트를 만들 수 있는 예시를 보여드릴게요. 게다가 제법 수리적인 방법이랍니다. :) Create a Color Scheme Around Any Color in 8 Easy Steps Step1. 색상 모델은 HSL로 설정합니다. 일반적으로 컬러 피커는 #DB17DF와 같은 16진수 값으로 설정되어있습니다. 쉬운 진행을 위해 이 모드를 HSL로 변경합니다. HSL은 Hue, Saturation, Lightness를 의미합니다. 컬러피커 셋팅하기 Step 2. 메인 컬러를 선택합니다. 우선 #DB17DF로 예를 들어 설정할게요. 메인 컬러 선택 Step.. 루이비통까지 뛰어든 NFT 열풍, 문제는 없을까 출처: https://brunch.co.kr/@mobiinside/4079 by Mobiinside Apr 29. 2022 시스템상 사기 발각 힘들고 피해 구제 방안 없어 정식 자산, 투자대상 되려면 제대로 된 규제 필요 글로벌 명품 브랜드 루이뷔통(Louis Vuitton)까지 대체불가능토큰(NFT) 사업에 뛰어들고 있습니다. 지난해 음악, 드라마, 게임 등 엔터테인먼트 업계뿐만 아니라 디즈니 등 할리우드 주요 스튜디오들이 일제히 NFT 대열에 합류한 데 이어 명품 패션 브랜드까지 NFT 발행 붐이 이는 추세입니다. NFT는 블록체인 기술을 이용, 디지털 자산에 고유 인식 번호를 부여한 것으로 거래가 가능하고 고유성도 인정받습니다. 저작권자의 경우 2차 거래에서도 수익을 얻을 수 있어 크리에이터들의 선.. NFT 성공 사례 출처: https://brunch.co.kr/@soonotieno/26 분야 별 NFT 적용 및 성공 사례 by 안종순 May 16. 2022 (2022.05 기준) 지금까지 NFT 관련, 5개의 글을 올렸다. 지금까지 정리한 글의 대부분은 NFT란 무엇이고, 어떤 기술이 적용되었으며, 그래서 왜 가치가 있는지 등, NFT 기본 개념과 기술적인 이해를 돕기 위한 글이었다. 지금까지 NFT에 대해 대략적인 개념과 이해가 머릿속에 자리 잡히기 시작했으므로 이제부터는 NFT라는 분야 속으로 본격적으로 뛰어들기 위해 NFT 시장을 자세히 들여다보고 정리를 해 나갈 생각이다. NFT 시장을 들여다보기 위해서는 제일 먼저 NFT가 실제로 어떻게 적용되고 활용되고 있는지를 파악하는 게 중요하다고 판단되어 현재 분야별.. 모달윈도우(팝업)를 디자인할 때 생각할 9가지 원칙 더욱 뛰어난 모달윈도우를 디자인할 수 있는 9가지의 간단한 원칙 본문은 위시켓과 번역가 전리오가 함께 만든 해외 콘텐츠 기반의 번역문으로, UX를 다루는 블로그 UX플래닛의 글을 번역했습니다. 필자 Nick Babich는 현업 소프트웨어 개발자인 동시에 블로그 ‘UX플래닛’을 운영하며 UX에 대한 인사이트들을 사람들에게 전하고 있습니다. 본문은 우리나라에서 ‘팝업’ 이라 불리는 모달윈도우(Modal indow)를 살피며 그것의 정의와 역할, 그리고 디자인 방법론을 해설합니다. 모달윈도우란 메인 화면의 위에 팝업처럼 떠 있는 창을 말합니다. 영어에서 모달(modal)은 명사인 모드(mode)의 형용사인데, 이 기능을 사용하면 메인 화면이 뒤쪽에 보이기만 하고 사용할 수는 없는 ‘모드’를 만들기 때문입니다... UX 디자인 속 심리학 법칙 2편: 사용자 행동 이해하기 보통 서비스나 앱·웹사이트를 기획하고 디자인할 때, 사용자 경험을 개선할 수 있는 UX를 고민합니다. 그렇다면 사용자 경험을 향상시키는 UX란 정확히 무엇일까요? 우리가 고려해야 할 사용자는 사람입니다. 같은 부탁을 하더라도 심리학을 활용하면 상대방의 부담을 낮출 수 있는 것처럼 UX를 설계할 때도 사용자의 심리를 이해하고 디자인하면 사용자에게 더욱 편안하고 기분 좋은 경험을 제공할 수 있습니다. 사용자가 온라인에서 경험하는 다양한 감정은 결국 리텐션에 영향을 미칩니다. 방문할 때마다 기분이 좋아지는 장소에 자주 가고 싶은 것처럼 좋은 경험을 제공하는 앱이나 웹사이트라면 사용자의 발걸음이 끊이지 않겠죠. 그래서 이번 아티클에서는 UX를 디자인할 때 활용하기 좋은 네 가지 심리학 법칙을 소개합니다. 이 아.. 이전 1 2 3 4 5 ··· 27 다음
