multiking

학습 목표안드로이드 프로젝트가 어떤 폴더 구조로 구성되는지 이해하는 단계이다.res, layout, drawable 폴더의 역할을 명확히 구분하는 단계이다.XML 화면 파일이 실제 앱 화면으로 연결되는 흐름을 이해하는 단계이다.다음 회차에서 UI를 자유롭게 다루기 위한 기초 체력을 만드는 단계이다. 1. Android Studio 프로젝트 구조 전체 보기Android Studio의 Project 창은 하나의 안드로이드 앱을 구성하는 모든 요소를 계층 구조로 보여준다. 이 구조는 단순한 파일 나열이 아니라, 안드로이드 운영체제가 앱을 인식하고 실행하기 위한 규칙적 구조이다. Android 뷰(Android View) 기준에서 가장 상위에 위치하는 구성 요소는 다음과 같다.appGradle Scripts이 ..

학습목표iOS View의 설계, 구성, 활용에 대한 전반적인 이해를 돕고, 실제 프로젝트에 적용할 수 있는 실무 역량 고양View란?View는 iOS 앱의 UI 구성 요소로, 화면에 표시되는 콘텐츠(텍스트, 이미지, 버튼 등)를 담당.사용자가 앱과 상호작용하는 주요 창구.1.액션 시트와 액티비티 뷰액션 시트: 컨트롤 또는 작업에 대한 응답으로 나타나는 특정 스타일의 경고로, 현재 맥락과 관련된 두 가지 이상의 선택 사항을 제공한다. 사람들이 시작하는 액션과 관련된 선택 사항을 제시하는 모달 뷰입니다.액티비티 뷰: 복사, 즐겨찾기, 찾기와 같은 특정 과업을 수행하는 데 사용되며, 즉시 작업을 수행하거나 진행하기 전에 더 많은 정보를 나타낼 수 있다. 공유 및 작업 수행을 위한 표준 인터페이스로, 사용자가 ..

학습목표 : 모바일 앱 UI 구조의 이해모바일 앱의 주요 UI 구조(탭 내비게이션, 드로어 내비게이션, 스택 내비게이션 등)를 학습하여 각각의 특징과 사용 사례를 이해한다.1. 태스크 기반의 스택 내비게이션(Stack Navigation)태스크 기반 화면 설계는 특정 작업(Task)을 중심으로 화면을 구성하는 방식이다. 이 설계 방식은 사용자가 앱에서 수행해야 할 특정 작업을 중심으로 UI를 구성하기 때문에, 일반적으로 아래의 구조에 속하거나 이들과 결합하여 사용된다.첫화면을 사용자가 원하는 기능 중심으로 직관적으로 보여줌화면을 사용자가 직접 실행할 수 있는 화면으로 구성1. 스택 내비게이션(Stack Navigation)태스크 기반 설계에서 자주 사용된다. 사용자가 단계별로 작업을 수행해야 하는 경우,..

학습목표UI디자인에 필요한 스타일가이드 요소 중 z축과 그림자에 관하여 학습한다.Z축과 그림자는 UI 요소의 깊이와 계층 구조를 시각적으로 표현하는 방법을 이해한다.Z축과 그림자는 UI 요소의 깊이와 계층 구조를 시각적으로 표현하는 중요한 방법 iOS의 디자인 변화:iOS는 iOS 7부터 플랫 디자인을 사용했지만, 최근에는 머티리얼 디자인 요소를 도입하였다. 이는 사용자 인터페이스에 좀 더 현실적인 깊이감을 주기 위해 디자인 철학에 변화를 준 것이다.Z축과 깊이감:Z축의 개념: 화면의 X축(수평)과 Y축(수직)에 더해, Z축(깊이)을 추가함으로써 UI 요소들이 서로 다른 레이어에 위치해 있는 것처럼 보이게 한다. Z축은 화면에서 요소가 떠 있는 높이를 나타내며, 이를 통해 사용자는 어떤 요소가 앞쪽에 있..

UI/UX 디자인을 학습하기 전에 소프트웨어 개발자로써 디자인의 정의를 한번 내려보도록 하자. 디자인은 특정 목적을 달성하기 위한 계획과 구현의 과정 및 결과물을 의미한다. 전통적 미학 중심의 비주얼 디자인에서 출발하였으나, 오늘날에는 비즈니스‧서비스‧기능의 설계와 사용자 경험 자체의 변화까지 포함하는 종합적 활동으로 확장되었다. 디자인의 역할- 나쁜것을 좋게, 사용하기 힘든 것을 편리하게, 이해하기 어려운것을 알기 쉽게 만드는 것이 디자인의 역할이다. - 필요성 : 특히, 널리 사용되는 기능이라며, UI 디자인의 역할과 가치는 더 높아진다. > 모바일 UI 디자인이 그래서 중요하다.HCI와 UI/UX - UI Design은 어디서 왔는가?UI 디자인은 HCI 연구의 하나의 분야이다. 1. 유용성 (..

UI(User Interface)와 UX(User Experience)에서 확장된 개념으로 **CX(Customer Experience)**와 **BX(Brand Experience)**가 있습니다. 이 두 개념은 UI/UX의 사용자 경험을 넘어 더 넓은 범위에서 사용자가 브랜드 또는 제품과 상호작용하는 모든 과정을 포함하며, 고객과 브랜드의 관계를 깊이 있게 이해하고 설계하는 데 초점을 맞춥니다.1. CX (Customer Experience) - 고객 경험**CX(Customer Experience)**는 고객이 브랜드나 제품과 상호작용하는 모든 접점에서의 경험을 포괄하는 개념입니다. 이는 디지털 경험뿐만 아니라 오프라인에서의 경험, 제품 사용 경험, 고객 서비스 경험 등도 포함됩니다. CX는 사용자..

UX 디자인이 사용자 니즈와 맥락을 고려해 설계되었더라도, 기존의 **관습(Conventions)**과 충돌하는 경우가 종종 발생합니다. 이는 사용자들이 오랜 시간 동안 특정 방식에 익숙해져 있기 때문에, 새로운 방식이 아무리 사용자 중심적으로 설계되었더라도 그 변화를 받아들이기 어려워하는 상황을 말합니다. 아래에 몇 가지 사례를 들어 설명하겠습니다.1. 햄버거 메뉴 아이콘의 도입설명: 모바일 앱과 웹사이트에서 공간을 절약하기 위해 도입된 **햄버거 메뉴 아이콘(☰)**은 메뉴 항목을 숨겨서 화면 공간을 최적화하는 데 사용됩니다. 하지만 이 디자인은 관습과 충돌한 대표적인 예입니다.니즈와 맥락: 햄버거 메뉴는 화면 크기가 작은 모바일 기기에서 사용자의 니즈(좁은 화면에서 더 많은 내용을 보여주기)와 맥락..

(프레임)은 피그람의 기본 단위를 의미한다. (  )은 문자, 도형, 이미지등의 요소를 담는 컨테이너로 사용된다.(캐러셀 carousel) 회전목마가 돌아가는 것처럼 여러 콘텐츠가 슬라이드 방식으로 보여주는 UI프로퍼티의 형태boolean : 토글text : 텍스트 재정의instance swap : 인스턴트 교체variant : 색상, 크기, 상태 등 속성 정의I프로토타이핑은 완성 전 실제 서비스가 원하는 방식으로 작동되는지 테스트하고 기능을 추가, 변경하는 과정이다.트리거는 특정한 동작을 실행하는 것을 의미 - 액선의 유형을 살펴보자핫스파 : 인터랙션이 일어나는 지점 (버트, 아이콘, 가드에 핫스팟을 만들 수 있다.)커넥션 : 연결 , 파란색 선flow : 시나리오에 맞게 장면의 흐름, 사용자의 여정을..