해령님의 블로그

2025.02.21레이아웃, 그리드, 해상도하루 계획학습 목표1-3 강의 듣기1-3 강의 과제 진행 수업 목표레이아웃에 콘텐츠와 UI 요소를 배치하여 정보를 전달할 수 있다.그리드 시스템을 적용하여 화면 구성 요소를 효과적으로 배치할 수 있다.레이아웃해상도해상도는 화면의 정밀도를 나타내는 지표로 스크린의 가로 픽셀수 x 세로 픽셀 수를 기준으로 표현한다.해상도를 선정할 때는 스크린 점유율을 기준으로 하는 것이 좋다.StatCounter에서 조회 가능 또한 모바일, 태블릿, 데스크탑 등 다양한 기기해서도 사용할 수 있도록 디자인하는 것이 중요하다. 고정과 가변 영역디자이너는 해상도에 따라 요소의 크기와 여백을 어떻게 변하게 할지를 고민하면서 작업해야한다. 고정해상도가 커져도 정의한 수치값이 일정하게 유지한..

2025.02.20UI 디자인의 기본컬러, 타이포그래피, 아이콘하루 계획디자인 카타저는 A를 선택했습니다.서비스의 목적에 따라 다르겠지만 물건을 구매하는 커머스의 경우에는 장바구니에 담기나 구매하기 버튼이 제일 눈에 띄어야 된다고 생각합니다. 공유 기능이 장바구니 기능만큼 중요한 기능은 아니라고 생각하기에 오른쪽 상단에 공유 버튼을 넣는 것이 더 좋다고 생각했습니다. 참고하기 위해서 여러 커머스 앱들을 찾아보았는데 쿠팡이나 에이블리, 아이디어스 등 대부분의 앱에서도 장바구니 및 구매 > 찜 기능 > 공유 순으로 중요도에 따라 위계를 설정한 것을 볼 수 있었습니다.B는 장바구니에 담기 버튼 옆에 공유 버튼이 있어서 접근성이 좋다고 생각했습니다. 공유를 통해 상품을 더 많이 알릴 수 있다는 점은 좋다고 생각..

2025.02.19UI디자인의 핵심 원리하루 일정디자인카타저는 A를 선택했습니다.A는 직관적인 느낌이라 로고만 보더라도 어떤 앱인지 쉽게 알아볼 수 있다고 생각했습니다. 보기만 해도 무슨 앱인지 잘 알 수 있어서 스타트업이거나 사용자에게 잘 알려지지 않은 앱에서 사용하는 것이 더 좋다고 생각했습니다. 다른 컨텐츠로 확장하기에는 한계가 있다고 생각했습니다.B는 컬러나, 알파벳으로 브랜드적인 부분을 강조한 것 같습니다. 알파벳으로 되어있기 때문에 로고만 봐서는 무슨 앱인지 알 수 없기에 넷플릭스, 구글, 현대 백화점처럼 어느정도 규모가 있는 기업이나 인지도가 있는 앱에서 사용하는 것 같았습니다. 보통 그런 앱들은 이 앱뿐만 아니라 다른 분야로도 컨텐츠를 확장하는 경우가 많기에 브랜드 이미지를 유지 시키고 통..

2025.02.18과제 제출, UI키트, 프로토타입 하루 계획디자인 카타저는 A를 선택했습니다.A는 서로 대화할 때 상대방이 입력 중이라는 것을 실시간으로 알 수 있다는 특징이 있습니다. 대화할 때 상대방이 대답하고 있다는 것을 실시간으로 알려줘서 중간에 사용자가 앱을 나가지 않고 머무르게끔 하는 것 같습니다. 또한 상대방의 말을 다 듣고 대답하게 되기에 실제 대화를 할 때처럼 대화를 주고받기에 좋은 것 같습니다. 그래서 소통이나 커뮤니티에 중점을 둔 앱에서 사용하기 더 적합하다고 생각했고 공적인 상황보단 사적인 상황에서 사용하기에 더 좋다고 생각했습니다. 입력 중이 계속 뜨면 상대방이 반응을 기다리게 되다보니 사용자에게 부담감을 줄 수 있다는 점은 아쉽게 느껴졌습니다.B는 채팅 입력 중에 표시가 뜨지 ..

2025.02.17개인과제, 상세페이지, 다이얼로그, 프로토타입하루 계획디자인 카타B를 선택했습니다.두 앱의 차이를 알기 위해서 실제로 앱에 들어가서 비교해봤습니다. 둘 다 두 번 터치한 경우 감정표현 남겨지고 길게 누르면 감정표현을 고를 수 있는 창이 뜨는 것을 볼 수 있었습니다.A가 상대방의 대화에 간편하게 감정표현하기엔 더 좋다고 생각했습니다. 좋아요 버튼을 누르면 상대방에게 알림이 가기 때문에 인원이 적고 사적인 상황에서 쓰기 적합하다고 생각했습니다. 알림으로 서로의 반응을 빠르게 확인하고 대화하기 좋지만, 좋아요를 잘못 누른 경우에는 상대방에게 알림이가 불편할 수 있다고 생각합니다.B는 A와 마찬가지로 두 번 연속으로 터치하면 감정표현이 달리게 되지만 A와 다르게 알림이 뜨지 않기 때문에 실수로..

2025.02.14개인과제2번째 개인과제 앱 UI키트 및 프로토타입 제작하기식료품 및 생필품을 구매할 수 있는 가상의 커머스 앱 UI 설계 및 프로토타입을 제작 과제 목표앱 자체를 만드는 것보단, 피그마 기능을 정확하게 사용하고, 규칙적인 UI를 만들고,프로토타입을 만들면서 어떤 경우들이 생길지 고민해본다.과제 진행 상황현재 홈 화면까지 완성한 상태이다. 3일 밖에 시간이 없어서 걱정이 많았는데 하다보니 완성할 수 있겠다는 생각이 들었다.그래도 미리 해두면 점검할 시간도 있고 팀원이나 튜터님께 질문할 여유도 생기기에 주말에도 하려고 한다.  과제 진행하면서 어려웠던 점현재 홈 화면까지 완성한 상태이다. 3일 밖에 시간이 없어서 걱정이 많았는데 하다보니 완성할 수 있겠다는 생각이 들었다.지금까지 진행하면서..

2025.02.13피그마 연습 예제, 과제 피드백하루 계획디자인 카타저는 B를 선택했습니다.A는 가진 금액보다 더 많이 입력하더라도 자동으로 최대 금액을 입력해주기에 편리하다고 생각했습니다. 하지만 실수로 최대 금액으로 바뀐지 모르고 다음으로 넘어가는 경우도 있겠다는 생각이 들었습니다. 실수로 가진 금액보다 조금 더 입력한 경우에는 전부 다 지우고 다시 입력해야 되기에 조금 불편할 수도 있겠다는 생각을 했습니다.B는 오류 메시지를 제공하면서 오류나 경고를 나타낼 수 있고 눈에 잘 띄는 빨간색을 이용하였는데, 이를 통해 사용자가 오류를 빨리 인지할 수 있다고 생각합니다. 또한 오류 메시지를 제공함으로써 사용자가 제대로 입력했는지 다시 확인하게끔 한다고 생각해서 좋다고 생각합니다. 조금 아쉬웠던 점은 지갑에..

2025.02.12컴포넌트 인터랙션오버레이 프로토타입드래그 프로토타입하루 계획디자인 카타저는 B를 선택했습니다.A는 이 앱을 처음 사용해서 기능이 익숙하지 않은 사람에게 쓰기 적합한 방식이라고 생각합니다. 하지만 지금 보이는 앱은 결제와 관련된 앱인 것으로 보이는데, 은행이나, 페이 등은 비슷한 기능을 가진 경우가 많다고 생각합니다. 그래서 이미 비슷한 앱을 사용해본 사용자에게는 일일이 X를 누르는 것이 번거롭게 느껴질 수도 있겠다는 생각을 하였습니다.B는 사람들이 이미 비슷한 앱을 많이 사용해본 경우에 사용하기 좋다고 생각했습니다. 간단한 핵심 메시지나 아이콘, 일러스트를 제공하면서 이 앱을 사용하면 어떤 이점이 있는지, 어떤 가치가 있는지 사용자에게 각인시킬 수 있다고 생각합니다. 일일이 X를 누르지..

2025.02.11배리언츠, 프로퍼티, 포지션, 오버레이, 모달, 다이얼로그 컴포넌트하루 계획디자인카타저는 B를 선택했습니다.A는 다양한 메뉴들을 홈 화면 안에 배치해서 사람들이 다른 기능들을 이용하도록 하였는데요, 중고거래 앱 같은 경우에는 좋은 가격대의 제품이나 인기 있는 물건들은 빠르게 팔릴 수도 있기 때문에 최근에 나온 매물이 보이는 것이 다른 메뉴들을 보여주는 것 보다 더 중요하다고 생각해서 A의 UI가 아쉽게 느껴졌습니다. 또한 찜 버튼이 사진 안에 배치되어 있는데 이미지에 따라 잘 안보일 수도 있겠다는 생각이 들었습니다.B는 하단 네비게이션 바에 다른 메뉴들을 넣어서 사용자가 핵심 기능에 집중할 수 있도록 한다고 생각합니다. 또한 B는 글의 제목이나 정보들이 잘리지 않고 온전히 보여서 굳이 ..

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