REALITY

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. 내용 요약 멘탈 모델이란? 사용자가 기존의 경험을 바탕으로 시스템을 이해하고 예측하는 사고방식예시: '저장' 아이콘으로 아직도 디스켓 모..

1. 오늘 학습 키워드 - 컴포넌트 프로퍼티- 컨트롤 컴포넌트(체크박스, 라디오)- UI의 기능 주의적 관점 2. 오늘 학습 한 내용을 나만의 언어로 정리하기 컴포넌트 프로퍼티피그마에서 인스턴스를 재사용할 때 효율성을 높이기 위해 사용컴포넌트의 일부를 조건에 따라 바꾸는 기능 프로퍼티 종류Boolean, Instance swap, Text 버튼 위계위계 용어: Hierarchy = 계층, Priority = 우선순위일반적인 버튼 위계 종류: Primary, Secondary, Tertiary 강의 정리 내용 [피그마 강의] 4주차: 컴포넌트 프로퍼티, 버튼 컴포넌트 이해하기피그마 강의] 4주차: 컴포넌트4-2) 컴포넌트 프로퍼티의 이해 · 의사상태 복습: (예시) 버튼에 마우스를 호버했을 때, 색깔이 바..

1. 주제 서비스 기획 단계부터 UX 디자이너가 필요한 이유 서비스 기획 단계부터 UX 디자이너가 필요한 이유왜 UX 디자이너는 기획 단계부터 참여해야 할까? | 안녕하세요, IT 서비스 기획과 UX 전략을 함께 담당하고 있는 디자이너 지밍리입니다! 제가 스타트업과 대기업 프로젝트를 넘나들며 깨달은 것brunch.co.kr 2. 내용 요약 ⚠️UX 디자이너가 프로젝트 후반부에 투입될 때 마주치게 되는 문제사용자 경험을 고려하지 않은 UI 설계초기 비즈니스 목표와 맞지 않는 기능 우선순위 설정개발 완료 후 사용자 테스트에서 발견되는 대규모 수정 요구→ 결과적으로 프로젝트 소요 시간과 예산이 당초 계획의 2~3배로 증가 ✅ UX 디자이너가 기획 단계부터 참여해야 하는 이유사용자 관점에서 기능의 우선순..

4-2) 컴포넌트 프로퍼티의 이해 · 의사상태 복습: (예시) 버튼에 마우스를 호버했을 때, 색깔이 바뀌는 것은 실제 버튼이 바뀐 게 아니라 버튼이 가진 가상의 상태를 나타내는 것이다. 컴포넌트 프로퍼티란?· 컴포넌트가 가상의 상태를 가질 때, 형태가 변화하거나 or 컴포넌트 안의 요소가 바뀌는 경우가 있다. 컴포넌트 프로퍼티는 이런 변화와 변경을 만들 수 있는 피그마 컴포넌트 기능이다. · 사용하는 이유: 피그마에서 UI를 디자인하는 것은 컴포넌트를 만들고 인스턴스를 다루는 것과 밀접한 관련이 있다. 오토레이아웃 등 피그마를 최대한 활용해서 컴포넌트를 만들고, 인스턴스를 디자인에 적용하는 과정을 반복하기 때문이다. 위 과정에서 하나의 컴포넌트로 더 많은 디자인을 효율적으로 만들어야 하는데, 이때 필요..

1. 오늘 학습 키워드 - 버튼 컴포넌트- 컨트롤 컴포넌트(체크박스, 라디오)- UI의 기능 주의적 관점 2. 오늘 학습 한 내용을 나만의 언어로 정리하기 버튼 컴포넌트: 사용자 액션을 유도하는 UI 요소 컨트롤 컴포넌트: 사용자의 선택을 돕는 컴포넌트종류: 체크박스, 라디오, 스위치(토글), 슬라이더 UI 학습 관점: 생김새가 아닌 ‘무엇을 하는가’ 에 집중해야 한다! 강의 정리 내용 [피그마 강의] 3주차: UI 만들기 실습3-8) UI 만들기 실습(1) 버튼 컴포넌트· 버튼 컴포넌트 참고는 노션 참고하기(머터리얼 디자인, 우버 디자인 시스템, 라이트닝 디자인 시스템, 카본 디자인 시스템, ... )· 버튼 컴포넌트는 액션에azure326.tistory.com 3. 학습하며 겪었던 문제점 & 에러..