REALITY

평소에 자주 쓰는 서비스 선정하기윌라 서비스 화면 스크린샷 눈에 띄는 요소 찾기(1~3개)오디오북을 사용할 때마다 유용하게 사용하고 있는 검색 아이콘이 가장 먼저 눈에 들어온다. 🔗 Human Interface Guidelines 와 🔗 Material Design에서 관련한 가이드가 있는지 찾아보기 Buttons - Icon buttons아이콘은 버튼의 동작을 시각적으로 전달한다.의미는 명확하고 모호하지 않아야 한다. 아이콘 접근성 요구 사항: 선택된 버튼의 경우, 아이콘 굵기를 늘려 시각적 변화를 줘야 한다. 내가 고른 화면 안의 요소들이 가이드에서 이야기하는 대로 디자인되었는지 정리하기 Buttons - Icon buttons검색 버튼에 돋보기 아이콘을 사용해, 버튼의 기능(= 검색)을 명확..

1. 오늘 학습 키워드 UX/UI, HCI, CX, BXUX/UI 디자이너 역할과 업무디자인 가이드라인 2. 오늘 학습 한 내용을 나만의 언어로 정리하기 UX/UI UX(User Experience) 사용자가 제품/서비스를 이용하면서 느끼는 전체적인 경험UI(User Interface) 사용자가 제품을 사용할 때 보게되는 시각적인 요소레이아웃, 버튼, 아이콘, 이미지 함께 알아두면 좋은 용어 HCI(Human Computer Interaction): 사람과 컴퓨터의 상호작용 연구 CX(Customer Experience): 브랜드와 처음 만나는 순간부터의 전체 고객 여정에서의 인상 BX(Brand Experience): 브랜드를 떠올렸을 때 느껴지는 이미지/감정 디자이너의 역할UI 디자이너: 구성과 미..

1-2) UX/UI란?UX/UI, UX/UI 디자이너알아두면 좋은 용어 UX/UI란?UI는 목적을 달성하기 위한 행동을 할 때 무언가와 상호 작용을 하는 것을 도와주는 수단이다. 예시: 사용자가 배를 채우기 위해 시리얼을 먹는 도구로UX는 경험하는 모든 것이다. UI 디자인: User Interface 의 약자로, 제품과 사용자 사이에서 소통을 할 수 있도록 하는 실체적인 수단이나 매개체를 뜻한다. 주로 화면의 전체적인 구조와 시각적인 요소들을 디자인하는 것을 말한다. 시각적인 요소: 레이아웃, 색상, 크기와 정렬, 컴포넌트라고 부르는 버튼, 아이콘 이미지 등UX 디자인: User eXperience 의 약자로 사용자가 어떤 제품이나 서비스를 이용하면서 느끼는 총체적인 경험이다. 주로 제품에서 어떤 감정..

5-6) 프로토타입과 프로토타이핑 프로토타입이란?원래의 뜻은 시제품이며, 디지털 제품에선 실제 제품을 만들지 않고 아이디어를 테스트해볼 수 있는 것을 뜻한다. 구현하는 정도에 따라 낮은 단계와 높은 단계로 나눌 수 있다. Lo-fi(Low-fidelity): 낮은 단계의 프로토타입으로, 전체적인 흐름을 빠르게 맞춰 볼 수 있는 수준와이어프레임도 이에 해당한다. Hi-fi(High-fidelity): 높은 단계의 프로토타입으로, 실제 제품과 거의 같거나 유사한 수준으로 만듦프로토타입을 만들거나 프로토타입을 사용해 테스트하는 것을 프로토타이핑(Prototyp-ing)이라고 한다. 프로토타입을 만드는 이유실제 제품을 만들지 않고 아이디어를 검증해볼 수 있다. 팀 구성원들과 시각적인 결과물로 소통할 수 있다...

1. 주제 사용자의 결정을 이끄는 UX 심리학 법칙 사용자의 결정을 이끄는 UX심리학 법칙고민은 줄이고, 결정은 빠르게 만드는 UX설계 | 오늘 저녁엔 뭘 먹을까? 배달앱을 켜고 수십 개의 메뉴를 스크롤하다가 결국 아무것도 고르지 못한 채 앱을 닫은 적이 있다. 또 넷플릭스에서 새brunch.co.kr 2. 내용 요약 사용자의 결정 피로를 줄이고, 선택을 쉽게 만드는 UX 심리학 법칙 세 가지 힉의 법칙(Hick's Law)파킨슨의 법칙(Parkinson's Law)피츠의 법칙(Fitts's Law) 1. 힉의 법칙 (Hick’s Law) – 선택의 양선택지가 많을수록 바로 선택하지 않는다!사람은 눈앞에 있는 정보를 바로 선택하지 않는다. 대부분 여러 옵션을 비교하고 평가하는 인지적 과정을 거치는데..

5-2) 화면 디자인 실습 - 홈 화면 만들기화면 단위 디자인을 수행하며 필요한 UI 설계하기프로토타입의 개념을 이해하고 피그마에서 프로토타이핑 사용하기 홈 화면 만들기1배수 화면이 뭐였지?디자인하기 위한 기준 사이즈로 일반적으로 375*812(아이폰) 또는 360*800(안드로이드)으로 만든다. 프레임 생성하기히어로 섹션 추가하기메인의 가장 상단 영역을 뜻한다. 앱 바 컴포넌트 추가하기네비게이션에 해당하는 컴포넌트로, 앱 화면 상단에 고정되어 현재 화면의 이름을 알려주면서 이전 화면으로 돌아갈 수 있도록 해준다. 앱 바 컴포넌트의 구조 타이틀: 현재 화면의 제목힌트 텍스트: 부가적인 정보리딩 엘리먼트: 뒤로 가기 또는 닫기 아이콘 사용하는 영역트레일링 엘리먼트: 설정이나 더보기 등 현재 화면과 관련된..

1. 주제 삶의 질을 높여주는 10가지 UX 사례 삶의 질을 높여주는 10가지 UX 사례 (6탄)51. 어차피 '전체 동의'누르고, 다시 '선택'은 해제할 거잖아? [토스] 약관 동의 화면에서는 보통 최상단에 ‘전체 동의’ 버튼이 자리하고 있어, 사용자가 한 번에 약관 항목을 선택할 수 있도록brunch.co.kr 2. 내용 요약 토스 약관 동의 UX 개선목적과 기능: 필수/선택 동의 구분 + 선택만 전체 선택 가능UX 포인트: 불필요한 클릭 제거 → 사용자의 심리적 피로 감소, 신뢰 형성소비 리포트 제공과 재연동 유도목적과 기능: 소비 리포트 콘텐츠 제공 → 계좌 재연동 유도UX 포인트: 강요 대신 콘텐츠를 통한 흥미 유도, 사용자에게도 의미 있는 정보 제공 Coffie목적과 기능: 콘센트, 와이파..

1. 오늘 학습 키워드 - 합성 컴포넌트, 네스티드 인스턴스, 탭 컴포넌트 2. 오늘 학습 한 내용을 나만의 언어로 정리하기 합성 컴포넌트컴포넌트를 재료로 사용해 만든 컴포넌트예: 바텀시트, 다이얼로그, 카드, 탭 등 네스티드 인스턴스상위 컴포넌트에서 하위 컴포넌트의 속성 조작이 가능하게 하는 기능 컴포넌트 합치기 & 분리하기새로운 컴포넌트는 드래그해서 세트에 추가 가능분리할 때는 컴포넌트를 밖으로 끌어내리면 됨꺼낸 컴포넌트는 하위 폴더 구조 이름으로 바뀜 강의 정리 내용 아이콘들이 개별적으로 컴포넌트로 만들어야 한다. --> 컴포넌트 옵션을 선택하고 " data-og-host="azure326.tistory.com" data-og-source-url="https://azure326.tistory.com..

4-4) 버튼 컴포넌트에 아이콘 추가하기 실습: 아이콘 추가하기아이콘 모두 잡고 컴포넌트로 만들면 안되고 --> 아이콘들이 개별적으로 컴포넌트로 만들어야 한다. --> 컴포넌트 옵션을 선택하고 여러 컴포넌트로 만들기를 눌러야 한다. 만든 컴포넌트를 복제하려면 alt 누르면 복제가 된다. 복제된 인스턴스는 이름이 안보이고, 마스터 컴포넌트만 이름이 보인다. 버튼 컴포넌트에 불리언 추가 (True로 해놓는 게 좋음 -> 나중에 수정할 때 다시 켜야 하니까)버튼 아이콘 눌러서 appearance 외형 -> 위에서 추가한 불리언 선택복사해서 불리언 껐다, 켰다가 되는 지 확인해본다. 4-5) 버튼 컴포넌트의 아이콘 교체하기 실습: 아이콘 교체하기컴포넌트 속성 추가-> 인스턴트 교체아이콘 선택하고 상단의 인스..

1. 주제 똑똑하지 않은 사용자: 멘탈모델과 러닝커브를 잊지 마라 03화 똑똑하지 않은 사용자: 멘탈모델과 러닝커브를 잊지마라[UX] 디자이너는 오늘도 세상을 바꿀 디자인을 꿈꾼다 | 따라가기 벅찰 정도로 발전하는 기술, 혹시 여기서 나만 바보야? AI, XR, 자율주행, UAM(*도심 항공 교통 Urban Air Mobility, 미래 교통수단으로 전brunch.co.kr 아티클 선정 이유UX/UI 디자인을 배우는 입장에서, 빠르게 발전하는 시대 속에서 디자이너가 어떤 방향으로 사용자 경험을 설계해야 할지 고민해볼 수 있을 것 같아 해당 아티클을 선정하게 됨. 2. 내용 요약 멘탈 모델이란? 사용자가 기존의 경험을 바탕으로 시스템을 이해하고 예측하는 사고방식예시: '저장' 아이콘으로 아직도 디스켓 모..