cmos00

1. 모바일 레이아웃 1) Touch 최소 사이즈 - iOS: 44 X 44 Point - Android: 48 X 48 dp (7~10mm) - 디자인 시 따르지 못하게 되는 경우 주변 여유공간으로 해결 2) 화면구성 그리드 - 각 위치별 구성되는 정보가 다름 - App Bar/Bottom Button 부분과 Contents영역은 간격을 두는 것이 좋은 데, 터치 오류 및 시각상 구분을 위해 활용 - 좌우 여유영역 또한 시각적 여유공간과 터치 오류를 줄이기 위한 용도, 또한 시각적 흐름을 통해 빠른 정보 파악을 위한 여유공간 - 시각적 그룹핑을 위한 구성 2. UI 디자인의 이해 1) UI 디자인 프로세스 (1) 요구사항, 관련정보 수집 - 구체적인 요구사항, 내부목표, 관련 담당자 미팅 등을 통해 구..

1. 모바일과 타이포그래피 1) 타이포그래피의 이해 - 구체적 대상, 매체, 콘텐츠의 성격, 비즈니스 목표/의도에 맞춰 사용되어야 함 - 매체의 경우 사용성과 가독성 측면에서 최적화 되어야 하며 운영체제에 따른 가이드를 따라야 함 - 텍스트, 사진, 동영상, 음악 등 다루는 콘텐츠에 따라 구성되어야 함 2) 운영체제 별 기본 폰트 - iOS: San Francisco (영문) / Apple SD Gothic (국문) - Android: Roboto (영문) / Noto Sans CJK KR (국문) - 그래픽 툴, 개발 툴, 디바이스 폰트가 다 맞는 지 확인 필요 - Built-in app (iOS) / Default app (Android)의 서체 사용방법을 익히고 표준을 이해해야 함 2. iOS 타이..

1.컬러의 기본개념 1) 정의 - 색은 이미지, 감정 등의 다양한 요소를 포함하고 있음 - 문화적 환경, 트렌드, 연령, 개인적 기호 등 다양한 요소에 영향을 받음 2) 색상 혼합 개념 (1) 가산혼합 - Red, Green, Blue의 빛 혼합 방식으로 색이 겹쳐짐에 따라 밝아짐 (2) 감산혼합 - Cyan, Magenta, Yellow, Black의 인쇄 색상 혼합 방식으로 색이 겹쳐짐에 따라 어두워짐 3) 색 속성 - 색상: 색의 고유한 특성 - 채도: 색이 선명한 정도 - 명도: 색이 밝은 정도 4) 배색 (1) 단색 계열 (Monochromatic) - 단색 선정 후 명도를 달리하여 사용하는 배색 (2) 유사색 (Analogous) - 선정한 하나의 주색과 그 옆에 바로 인접한 두 색 - 자연스..

1. iOS 아이콘 디자인 1) Templete Icon - 아이폰 화면에서 손쉽게 볼 수 있는 일반 아이콘을 의미 (1) 디자인 스타일 - 심플한 선으로 디자인 하며, 일관성 있게 디자인 요소를 통일할 것을 권장 - 최대한 표준 아이콘에 맞추어 디자인하여 사용자가 쉽게 이해할 수 있는 형태 차용 (2) 선택 표시 아이콘 안에 색을 넣거나 반전되는 형태 반전이 힘들기에 별도의 원형 형태를 두는 방식 외부의 선을 두껍게 만드는 형태 앱 고유색 만 적용한 형태 (3) 종류 - 시스템 아이콘은 기본적으로 제공되는 형태와 그에 따른 의미들이 있으므로, 다른 의미로 사용 되지 않도록 주의 - 유사기능을 제공하는 경우 일반적인 형태의 아이콘을 적용하는 것을 권장 - Tool Bar, Navigation Bar 적용..

2. Android 콘텐츠 디자인 1) Card (1) 기본 구성 - 다양한 콘텐츠와 컴포넌트로 구성할 수 있는 콘텐츠 카드 - 동일 수준의 카드 형태의 콘텐츠를 모아볼 수 있으며 이러한 모음을 카드 콜렉션이라 함 (2) 비교 반드시 모서리에 라운드/그림자 효과가 있어야 하며 삭제/재배열 가능 각진 모서리에 그림자 효과가 없는 것은 Tile 장식적 요소가 적어 정보 이해와 스킨이 용이 카트 형식을 선택해서 정보 스캔이 힘듦 그리드 타일을 통해 갤러리 이미지 정보 전달이 용이 갤러리의 경우 일반적으로 카드 형식을 사용하지 않음 (3) 콘텐츠 구성 - 이미지 위에 텍스트가 있을 경우 가독성 보장 - 각 콘텐츠 별 명확한 위계 - 체크박스, 이미지, 다양한 텍스트, 액션 등이 배치 가능하며 사이즈 또한 다양 ..

1. iOS 콘텐츠 디자인 - 사용자가 기존 UI/GUI, 혹은 OS에서 제공하는 기본 UI/GUI에 대한 교육/경험이 있으므로 이를 최대한 따르는 것이 유리 1) Activity View Controller - 특정 목적을 달성하기 위한 액션 기능 2) Collection View - 하나의 이미지 사이즈는 손가락으로 터치하기 적합한 사이즈로 구성 3) Map View - Map View에 사용하는 핀, 기타 GUI의 경우 일관성있는 컬러와 사용성 적용 4) Pop Over - Pop Over가 나타날 경우 뒤 화면을 어둡게 하거나 Blur효과를 줄 것을 권장 - 별개의 X(닫기)버튼 불필요 - Pop Over는 변경사항이 있을 경우 즉시 저장/적용 - Pop Over가 어느 위치에서 나오게 되었는 지..

1. iOS 컴포넌트 1) System Button - 앱 내에서 특정 액션을 실행하는 버튼 - Default는 글자 만으로 이루어진 버튼 - 경우에 따라서는 아이콘을 포함하거나 외곽에 선을 넣어서 버튼임을 명확히 하기도 함 2) Switch - 상태를 on/off하는 데 사용 (좌: on / 우: off) - 스위치는 테이블 뷰에서만 사용 3) Stepper - 특정 양을 늘리거나 줄이고자 할 때 사용 - 일반적으로 +/-를 사용 - 작은 수치를 변환하는 경우에만 활용 (큰수치 변환에는 부적합) - 구체적인 수치의 변화를 숫자 등으로 보여주지 않으므로, 사용자가 조작한 결과를 보여줄 수 있을 정도로 조작에 따른 변화를 노출 시켜줘야 함 4) Slider - 정해진 범위 내에서이 수치 값 변화를 손쉽게 ..

1. iOS 컴포넌트 1) Status Bar 2) Navigation Bar - 일반적으로 투명하게 적용되며 Status Bar 바로 아래에 보여짐 - 가운데는 현재 위치, 좌측은 이전 위치, 우측에는 추가기능 배치 - Navigation Bar의 디자인은 모든 페이지에서 동일하게 표현되어야 함 - 현재 위치에 대한 고지가 될 필요가 없는 페이지의 경우 현재 위치를 나타내지 않음 - 필요에 따라서는 기존 페이지를 덮고 특정 행동을 취하게 표시 가능 - 사용자가 콘텐츠에 집중해야 하는 경우 Navigation Bar를 숨김 3) Tool bar - Navigation Bar 우측, 혹은 최하단에 액션을 수행하는 아이콘 형태로 위치 4) Tab bar - 쉽게 다른 페이지로 이동하거나 별도의 액션을 실행 ..

1. 컴포넌트 특징 - 작은 디스플레이, 손으로 들고 사용, 손가락으로 조작하는 측면에서 디바이스 특징에 따라 컴포넌트들이 표준화되었음 - 표준화된 컴포넌트가 다수 존재하는 것이 웹 사이트 디자인과 가장 큰 차이점 - 때문에 UI/GUI 디자인 시 표준화된 컴포넌트 및 OS별 컴포넌트 차이점을 명확히 숙지 해야 함 2. 컴포넌트 구성 1) 구조구성 컴포넌트 2) 컨트롤 컴포넌트 3) 콘텐츠 디자인 4) 아이콘 디자인

1. 서비스 목적과 사용자의 이해 1) 서비스 목적 구체화 - 서비스 목적을 구체화하여 기능, 구조 상 방향성을 확정할 수 있음 - 내부 구성원들과의 커뮤니케이션 용이 - 구체적 상황에 대한 효과적인 솔루션 도출에 용이 2) 세부 사항 파악 (1) 카테고리 적 특성 - 쇼핑, SNS, 교육, 아동, 유틸리티 등 속한 카테고리에 따라 사람들이 일반적으로 생각할 수 있는 구조, 레이아웃, 컬러 등의 특성 반영 (2) 모바일 특성 - 사용자가 항상 휴대하며 다양한 상황, 장소에서 사용 - 제한된 디스플레이 영역 - 커뮤니케이션, 카메라, MP3 등 다양한 역할 수행 - 그 밖에 여러 센서 요소 활용 가능 (3) 경쟁 차별화 포인트 - 타 서비스와 구별될 수 있는 경쟁 포인트를 기획, 디자인, 개발 전 단계에서..