UIUX [UI/UX] 사용자의 마음을 움직이는 좋은 UX의 특징 서비스의 사용성을 평가할 때는 다음과 같은 질문을 통해서 디자인이 좋은 사용성 경험을 제공하는지 체크해 볼 수 있습니다. 예를 들어, 우리가 항공사 앱의 사용성을 평가한다면, 이 앱의 주요 목적인 '항공편을 예약하는 것'에 대한 좋은 사용성 디자인은 '사용자가 해당 작업을 완료할 수 있는 명확하고 쉬운 방법'을 제공해야 합니다. 서비스의 메인페이지에서 여행 및 항공편 정보를 쉽게 입력할 수 ... UX디자인앱디자인UIUXUI 사용성모바일디자이너UI 사용성 [UI/UX] 앱 개발하는 대표님들이 꼭 아셔야할 '제품 개발 수명 주기' 제품 개발 수명 주기는 브레인스토밍, 정의, 설계, 테스트, 출시의 5단계로 구성되어 있습니다. 제품 개발 수명 주기를 시작하기 전에, 이미 해결하려는 사용자 문제를 팀이 알고 있을 수 있습니다. 우리는 우리의 제품이 시장의 격차를 메우거나 기존 제품보다 더 나은 문제를 해결할 수 있도록 경쟁업체와 사용자 모두에 대한 조사를 통해서, 제품 설계에서 해결해야 할 문제를 발견할 수 있습니다. 하... PDLC앱디자인제품 개발 수명 주기UIUX앱개발방법PDLC [UI/UX] 모바일 디바이스 UI/UX 최적화 PC와 태블릿, iOS, android 그리고 PWA 등 다양한 디바이스 환경에서 균일한 UI와 앱처럼 편리한 UX를 제공하기 위해 적용한 것들을 공유한다. html5 기본 snippet으로도 제공하는 meta 태그이다. initial-scale=1: 초기 크기 설정 (기본 꽉찬 화면) 이를 적용할 시, y축으로만 스크롤을 제한하여 세로로 스크롤 중에, x축으로 화면이 이동하는 것을 방지할 ... CSS최적화UIUXCSS 로그인/회원가입 구현하기 - (3) Extra Screens 감사합니다 🙏 2편에 이어서 오늘은 남은 ConfirmEmailScreen, ForgotPasswordScreen, NewPasswordScreen을 구현해보겠습니다. 이번 편은 앞서 구현한 screen들과 동일한 방법(컴포넌트)을 사용하기 때문에 앞에 내용을 이해하셨다면 생략하셔도 됩니다. 회원가입을 할 때 입력했던 이메일 주소를 인증할 때 필요한 화면입니다. 사용자는 SignUpScree... 로그인졸프UIUX회원가입react nativeUIUX HTML / HTML ElEMENT 태그(요소)의 기능을 확장하기 위해 '속성'을 사용할 수 있다. 또는 lang등 어떤 특성의 값을 서로 공유하는 요소를 묶을 때 사용할 수 있다. <a> 태그의 속성 미디어 요소(autio, video)의 자식으로서, 자막 등 시간별 텍스트 트랙(시간 기반 데이터)를 지정할 때 사용한다. <area> 요소와 함께 이미지 맵(클릭 가능한 링크 영역)을 정의할 때 사용한다. <img> 태그의 속... ElementsUIUXhtmlfrontendwebAttributesvalueAttributes [UI Seriese] 04 Card Card 란? 작은 사각형 안에 여러 종류의 정보들을 담고 있는 모듈 사용자의 진입점 역할을 하여 사용자가 클릭할 수 있는 다양한 콘텐츠를 나열하여 표시 카드는 주어진 공간을 활용할 수 있는 좋은 방법임 여러 콘텐츠 옵션을 제공하려 할 때 기존 목록 스크롤 대신 사용할 수 있는 훌륭한 선택 카드 섹션 내부를 나누면서 각각의 정보를 이쁘게 담아보자 우선 card-body div 를 만든다. 내... CSShtmlUIUXJavaScriptCSS [UI Seriese] 05 Button Button이란? 특정 형태 안에 라벨을 넣어 표시하는 것. 누름으로써 특정 동작이 수행 됨 버튼은 유저가 작동 원리를 정확하게 알지 못해도 (심지어 아예 알지 못해도) 누름 이라는 하나의 동작으로 동작을 수행시킬 수 있음 “You press the button, we do the rest,” — Kodak 버튼의 기본적 구조 버튼 상태에 따른 UI 디자인 Normal: 버튼이 상호작용 가능... CSShtmlUIUXJavaScriptCSS select 태그 사용하지 않고 드롭다운 구현 (ft. React) select 태그의 디자인 어려움 문제로 select를 사용하지 않고 css(Styled-Components)를 이용해 드롭다운을 구현해봤습니다. 구현 기능 드롭다운 기본 기능. 드롭다운이 펼쳐졌을 때 css 처리 ( 밑의 DOM 요소를 덮는지, 미는지 ) 컴포넌트 드롭다운 상태를 저장합니다. active가 true면 펼쳐지고 false면 닫히도록 구현했습니다. 선택된 드롭다운 아이템을 저장... dropdownUIUXTILTIL
[UI/UX] 사용자의 마음을 움직이는 좋은 UX의 특징 서비스의 사용성을 평가할 때는 다음과 같은 질문을 통해서 디자인이 좋은 사용성 경험을 제공하는지 체크해 볼 수 있습니다. 예를 들어, 우리가 항공사 앱의 사용성을 평가한다면, 이 앱의 주요 목적인 '항공편을 예약하는 것'에 대한 좋은 사용성 디자인은 '사용자가 해당 작업을 완료할 수 있는 명확하고 쉬운 방법'을 제공해야 합니다. 서비스의 메인페이지에서 여행 및 항공편 정보를 쉽게 입력할 수 ... UX디자인앱디자인UIUXUI 사용성모바일디자이너UI 사용성 [UI/UX] 앱 개발하는 대표님들이 꼭 아셔야할 '제품 개발 수명 주기' 제품 개발 수명 주기는 브레인스토밍, 정의, 설계, 테스트, 출시의 5단계로 구성되어 있습니다. 제품 개발 수명 주기를 시작하기 전에, 이미 해결하려는 사용자 문제를 팀이 알고 있을 수 있습니다. 우리는 우리의 제품이 시장의 격차를 메우거나 기존 제품보다 더 나은 문제를 해결할 수 있도록 경쟁업체와 사용자 모두에 대한 조사를 통해서, 제품 설계에서 해결해야 할 문제를 발견할 수 있습니다. 하... PDLC앱디자인제품 개발 수명 주기UIUX앱개발방법PDLC [UI/UX] 모바일 디바이스 UI/UX 최적화 PC와 태블릿, iOS, android 그리고 PWA 등 다양한 디바이스 환경에서 균일한 UI와 앱처럼 편리한 UX를 제공하기 위해 적용한 것들을 공유한다. html5 기본 snippet으로도 제공하는 meta 태그이다. initial-scale=1: 초기 크기 설정 (기본 꽉찬 화면) 이를 적용할 시, y축으로만 스크롤을 제한하여 세로로 스크롤 중에, x축으로 화면이 이동하는 것을 방지할 ... CSS최적화UIUXCSS 로그인/회원가입 구현하기 - (3) Extra Screens 감사합니다 🙏 2편에 이어서 오늘은 남은 ConfirmEmailScreen, ForgotPasswordScreen, NewPasswordScreen을 구현해보겠습니다. 이번 편은 앞서 구현한 screen들과 동일한 방법(컴포넌트)을 사용하기 때문에 앞에 내용을 이해하셨다면 생략하셔도 됩니다. 회원가입을 할 때 입력했던 이메일 주소를 인증할 때 필요한 화면입니다. 사용자는 SignUpScree... 로그인졸프UIUX회원가입react nativeUIUX HTML / HTML ElEMENT 태그(요소)의 기능을 확장하기 위해 '속성'을 사용할 수 있다. 또는 lang등 어떤 특성의 값을 서로 공유하는 요소를 묶을 때 사용할 수 있다. <a> 태그의 속성 미디어 요소(autio, video)의 자식으로서, 자막 등 시간별 텍스트 트랙(시간 기반 데이터)를 지정할 때 사용한다. <area> 요소와 함께 이미지 맵(클릭 가능한 링크 영역)을 정의할 때 사용한다. <img> 태그의 속... ElementsUIUXhtmlfrontendwebAttributesvalueAttributes [UI Seriese] 04 Card Card 란? 작은 사각형 안에 여러 종류의 정보들을 담고 있는 모듈 사용자의 진입점 역할을 하여 사용자가 클릭할 수 있는 다양한 콘텐츠를 나열하여 표시 카드는 주어진 공간을 활용할 수 있는 좋은 방법임 여러 콘텐츠 옵션을 제공하려 할 때 기존 목록 스크롤 대신 사용할 수 있는 훌륭한 선택 카드 섹션 내부를 나누면서 각각의 정보를 이쁘게 담아보자 우선 card-body div 를 만든다. 내... CSShtmlUIUXJavaScriptCSS [UI Seriese] 05 Button Button이란? 특정 형태 안에 라벨을 넣어 표시하는 것. 누름으로써 특정 동작이 수행 됨 버튼은 유저가 작동 원리를 정확하게 알지 못해도 (심지어 아예 알지 못해도) 누름 이라는 하나의 동작으로 동작을 수행시킬 수 있음 “You press the button, we do the rest,” — Kodak 버튼의 기본적 구조 버튼 상태에 따른 UI 디자인 Normal: 버튼이 상호작용 가능... CSShtmlUIUXJavaScriptCSS select 태그 사용하지 않고 드롭다운 구현 (ft. React) select 태그의 디자인 어려움 문제로 select를 사용하지 않고 css(Styled-Components)를 이용해 드롭다운을 구현해봤습니다. 구현 기능 드롭다운 기본 기능. 드롭다운이 펼쳐졌을 때 css 처리 ( 밑의 DOM 요소를 덮는지, 미는지 ) 컴포넌트 드롭다운 상태를 저장합니다. active가 true면 펼쳐지고 false면 닫히도록 구현했습니다. 선택된 드롭다운 아이템을 저장... dropdownUIUXTILTIL