해령님의 블로그

2025.02.10역설계, 디자인 클로닝 하루 계획디자인카타나는 A를 선택했다.A의 UI가 한 화면에서 더 많은 기능을 볼 수 있다.은행 앱들은 기능이 많은 경우가 많은데, 전체보기를 지원해서 사용자가 원하는 서비스를 찾기까지 시간을 줄여준다.밑에 최근 이용 내역을 보여줘서 사용자에게 필요한 정보를 더 제공하고 있다. B는 설명이 같이 덧붙여져 있어서 어떤 기능인지 굳이 확인하지 않아도 되고,앱에 익숙하지 않거나 은행 시스템에 익숙하지 않은 사람들에게는 이해가 더 쉬울 것 같다.한 눈에 보이는 기능이 적어서 원하는 기능을 사용하기까지 단계가 한 개 더 추가 된 느낌이라 조금 아쉽다.1주차 과제과제1. UI 차이점 알아보기 과제2. 와이어프레임 그리기가상의 굿즈 커머스 서비스의 제품 리스트 화면과 제품 상..

2025.02.07분기점, 그리드반응형, 적응형정보 구조도, 플로우 차트, 와이어 프레임계획표1. 다양한 환경에 대한 UI 차이 이해1) 웹과 앱의 차이Wep업데이트가 간단하고 접근성이 뛰어나지만,다양한 기기에서 제약 없이 쓸 수 있지만 카메라나, GPS 등 성능 면에서 떨어진다.푸시나 알림을 제공하기 어렵다. App안드로이드와 IOS앱 별도앱 마켓에서 설치할 수 있고 업데이트마다 심사를 통과해야 한다.기기에 특화된 기능 사용할 수 있지만 다양한 디바이스를 지원하는 것은 어렵다.푸시 메세지를 보낼 수 있다. 2) 대표적인 웹과 앱의 UI 차이페이지 이동뒤로가기주요 메뉴 이동바텀 시트 3) OS별 차이앱 심사 가이드라인이 다르기에 디자인이 다를 수 있다. IOS애플 로그인이 다른 로그인 수단에 비해 덜 중..

2025.01.28피그마, 스케치, XD, 프로토타입 디자인툴1) 인터페이스 디자인 툴디지털 제품의 화면 인터페이스를 그리기 위해 사용한다.벡터 기반의 툴피그마, 스케치, XD 2) 그래픽 디자인 툴사진 편집이나 일러스트를 그릴 때 사용한다.포토샵, 일러스트레이터 3) 3D 그래픽 디자인 툴시네마 4D, 블렌더 4) 모션 그래픽 디자인 툴프리미어, 에프터 이펙트 비트맵 이미지jpg, jpeg, png, gif벡터보다 정교하게 이미지를 표현한다.픽셀이 손상될 수 있다.픽셀이 많을수록 용량이 크다. 벡터 이미지svg, eps, ai그래픽을 수학적인 함수 공식으로 표현한다.점과 점을 연결해 이미지를 그린다.좌표로 표현하기에 이미지를 키워도 손상이 없고 용량이 적다.비트맵 만큼의 복잡한 표현을 하기 어렵고, 복..

2025.01.223일차UI 설계, 프로토타입, 피그마 실습하루 일정 & 목표디자인카타상품 정보 하단에 보여주는 정보 차이 각 디자인에 어떤 의도가 있을까요? A는 제품의 사용감이나 성능 등을 먼저 보여주면서 사람들이 관심을 갖도록 한다고 생각했다.B는 배송 조건이나 혜택을 노출시켜서 지금 사면 얼마나 할인 받을 수 있는 지, 무슨 혜택을 받을 수 있는 지, 소비자가 제품을 구매할 때 필요한 정보를 알려서 구매를 유도한다고 생각했다. 나는 B의 UI가 더 좋다고 생각했다.고객이 필요한 요소들을 한 눈에 잘 들어오도록 배치한 느낌이 들고, 할인율, 구매 개수, 쿠폰 받기 등에 포인트 컬러를 사용해서 중요한 걸 잘 강조한 것 같다. 이를 통해 소비자들에게 어떤 할인을 받을 수 있는지, 구매는 몇 명이 했고 ..

내일배움캠프 UXUI 1일차 TIL2025.01.20디자인 시스템과 UI, 컴포넌트  디자인 시스템디자인 시스템이 필요한 이유 일관성 있는 디자인을 위해 디자인 시스템이 필요반복적인 UI를 효율적으로 관리팀 전체가 같은 정도로 이해 빠르게 디자인을 반복하면 UI를 매번 새로 만들기도 번거롭고, 이로 인해 문제가 무엇인지 파악할 시간이 부족해진다.이를 해결하기 위해 UI를 만들어 놓고 사용하는데, 다른 디자이너와 개발자와 같이 일하기에 모두가 이해하고 똑같은 방법으로 사용할 수 있는 기준이 있어야한다. 디자인 시스템의 목적반복적인 UI를 효율적으로 관리할 수 있다.팀 전체가 같은 정도로 이해하여 일관되게 UI를 사용할 수 있다. UI키트사용하는 방법과 규칙은 없고, 단순히 UI를 모아둔 것 디자인 시스템U..