본문 바로가기

분류 전체보기

[UI/UX] 1. 디자인 공통 요소 (2) 3. 아이콘함축적인 의미를 갖고 있는 그래픽 요소. 텍스트를 대체 가능함.아이콘 제작시 고려해야 할 핵심직관적인 아이콘통일된 스타일 아이콘단순한 아이콘아이콘 규격 및 시각 보정3.1. 직관적인 아이콘의미를 누구나 직관적으로 알 수 있어야 함.지나치게 단순화 하거나 디자이너 본인만 아는 아이콘은 사용하면 안됨. 3.2. 통일된 스타일 아이콘본인만의 스타일이나 규격이 있어야 함. 두께, 라운딩, 크기, 스타일 등을 통일할 것. - 아이콘 스타일 종류Outline: 단색 테두리만 그려진 아이콘Solid: 단색으로 채워진 아이콘Filled Line: 검정 테두리가 있고, 다양한 색으로 채워진 아이콘Flat: 단순한 그림 같이 테두리 없이 채색된 아이콘Glassmorphism: 유리의 질감과 투명도를 가진 듯한 .. 더보기
[UI/UX] 1. 디자인 공통 요소 (1) 이번 장에서는 UI 디자이너라면 알아야하는 UI 공통 요소에 대해 배운다.레이아웃컬러아이콘타이포그래피그래픽외에도, 썸존, 터치타깃, 제스처, 네비게이션, 상태 등이 있다.1. 레이아웃 & 그리드 시스템레이아웃(Layout) : 화면 크기, 텍스트, 이미지, 여백 등 다양한 구성 요소를 고려해 앱 내에 정보를 시각적으로 배치하는 것.그리드 시스템(Grid System) : 여러 종류의 요소를 질서 있게 배치하기 위한 그리드 규칙을 의미함. 그리드를 활용하면 시각적 통일성을 줄 수 있음. + 그리드(Grid) : 격자무늬, 격자판모바일 앱의 경우, 반응형 웹과는 달리 스마트폰의 작은 화면에 맞춰 단조로운 레이아웃을 사용하게 됨. >> 대체로 4, 6단 그리드 1단 레이아웃 예시) 유튜브, 인스타 그램 = 나.. 더보기
[UI/UX] 0. 들어가며 플러터를 이용한 모바일 개발을 하게 되면서 UI/UX의 중요성에 대한 인식이 부쩍 높아졌고, 직접 디자인을 하진 않더라도 최소한의 이해를 하고 있는게 좋을거 같다는 생각이 들었다. (물론, 어느 정도 공부하고 익숙해진다면 간단한 화면 정도는 직접 디자인 해볼 수도 있을 것이다.) 그러한 이유로, UI/UX 강의를 찾아보기 시작했다. 앞으로 가능한 매일, 이에 대해 공부하고, 이해한 내용들을 기반으로 기록해두고자 한다.원래부터도 UI/UX가 무엇인가 라던가 어떠한 것이 더 좋은 UI/UX인가 정도는 알고 있었지만, 이번 공부를 통해 더 자세히 배우고 더 깊은 인사이트를 가져갈 수 있으면 좋겠다. 혹시라도 이 글을 읽게 되는 사람에게 당부의 말씀을 드리자면, 저는 이 분야 전문가가 전혀 아니며, 따라서 글의.. 더보기
[Flutter] 11. 드롭다운 메뉴 드롭다운 메뉴란 눌렀을때 펼쳐지면서 아래로 선택가능한 목록이 생기는 위젯을 말함. DropdownButton이라는 위젯과 공식문서가 있긴하지만 디자인이 고정되어 있어서 OverlayEntry로 직접 만들어쓰는게 좋음. 친절하신 분 : https://velog.io/@cyb9701/Flutter-OverlayEntry%EB%A1%9C-Dropdown-%EC%A7%81%EC%A0%91-%EB%A7%8C%EB%93%A4%EA%B8%B0 [Flutter] OverlayEntry로 Dropdown 직접 만들기 Dropdown Button Dropdown 버튼은 활성화했을때, 하위 목록들을 보여주는 버튼이다. Flutter에서도 기본적으로 제공하는 Dropdown Button 위젯이 있다. > DropdownBut.. 더보기
[Flutter] 10. 토스트, 스낵바 플러터에서는 잠시 생겼다가 사라지는 알림으로 Toast와 Snackbar를 사용할 수 있음. 1. Toast 토스트는 다음과 같이 하단에 잠시 떴다가 사라지는 알림을 의미함. 토스트의 모양이나 내용은 물론, 위치나 지속시간 등 커스텀이 가능함. fluttertoast라는 패키지를 사용함. 공식 문서 : https://pub.dev/packages/fluttertoast fluttertoast | Flutter package Toast Library for Flutter, Easily create toast messages in single line of code pub.dev 2. Snackbar 스낵바는 토스트처럼 잠시 생겼다가 사라지는 알림인건 동일하지만 최하단에서 슥 올라왔다가 슥 내려간다는 점, .. 더보기
[Flutter] 09. 카메라 카메라는 camera 패키지를 임포트해야 함. 추가로, OS별로 다음과 같은 추가 작업을 해주어야 사용이 가능함. 예시 코드는 다음과 같음. import 'dart:io'; import 'dart:math' as math; import 'dart:typed_data'; import 'package:camera/camera.dart'; import 'package:flutter/material.dart'; import 'package:get/get.dart'; import 'package:path/path.dart'; import 'package:path_provider/path_provider.dart'; import 'package:http/http.dart' as http; import '../mai.. 더보기
[Flutter] 08. 시간 1. 비동기 플러터에서 비동기 작업을 처리할 때는 async와 await 키워드를 사용함. 비동기 함수가 쓰이는 함수에서는 함수명 뒤에 async를 써놔야하고, 비동기 함수 앞에는 await를 써놔야 비동기 작업이 제대로 수행됨. 다음은 그 예시임. // 리턴타입이 없는 경우 void 사용 void main() async { print(await createOrderMessage()); } // 리턴타입이 있는 경우 Future 사용 Future main() async { print(await createOrderMessage()); } 2. 프로세스 일시정지 프로세스를 멈추는 방법에는 sleep() 함수와 Future.delayed() 메소드가 있음. sleep 함수는 프로세스 전체를 완전히 중지시키지.. 더보기
[Flutter] 07. Row, Column, GridView 1. Row Row는 말그대로 행렬의 "행"을 뜻하고, children 속성에 들어가는 자식 위젯들이 가로로 한 줄로 나열됨. https://api.flutter.dev/flutter/widgets/Row-class.html Row class - widgets library - Dart API A widget that displays its children in a horizontal array. To cause a child to expand to fill the available horizontal space, wrap the child in an Expanded widget. The Row widget does not scroll (and in general it is considered an er.. 더보기

티스토리툴바