반응형 분류 전체보기121 Clock_App / 타이머 화면 디자인 타이머 화면의 가장 중요한 타임 피커 부분을 먼저 만들어 줄 것이다.최대한 정렬을 맞추기 위해 큰 프레임을 만들어준 후 안에 삽입하는 방식으로 하였다.위의 앱바에서 24만큼 띄워준 곳에 440x374의 프레임을 만들어 주었다.440은 iPhon 16 Pro Max의 너비이다.그런 다음에 타임 피커 위에 시간, 분, 초를 표시해 줄 것인데 폰트는 inter, Medium, 14p, kGray로 맞춰줬다.이 친구들은 상단에서 16 띄어주었다.이제 그 아래에는 타임피커를 배치해줘야 하는데 마땅히 넣을만한 것을 찾지 못하여 직접 텍스트로 입력하여 넣어줬다.상하에 위치한 글자는 inter, Medium, 48p, kDial로 맞추어 주었고 중앙에 위치한 글자는 inter, Bold, 48p, kBlack으로 맞추.. 2025. 11. 28. Flutter / Hot Reload 단축키 지정하기 (키맵, 수정하기, 복구하기, 단축키 안됨, keymap) 우리가 플러터로 개발을 할 때 가장 좋은 편의 기능을 뽑으라고 한다면 무엇일까? 난 자신 있게 바로HotRestart / HotReload 기능이라고 할 것이다.그런데 안드로이드 스튜디오를 사용해서 개발을 하고 있다면 좀 불편함을 느끼는 사항이 있을 것인데 바로 Hot Reload에 지정되어 있는 단축키가 안 먹는다는 것이다. 아무리 코드 내에서 Ctrl + ₩를 눌러도 화면이 갱신되지 않을 것을 것이고 혹은 이상한 제미나이가 뜨는 사람도 있을 것이다.이는 제대로 안드로이드 스튜디오에서 키맵핑이 되지 않아서 발생하는 문제인데 그것을 해결해 볼 것이다.가장 먼저 Settings를 열어준다.그런 후 Keymap에 들어가서 검색창 옆에 있는 Find Shortcut을 클릭한다.저 창이 열렸다면 키보드로 아무거.. 2025. 11. 14. Clock_App / 공통 UI 제작하기 각 화면들이 공통적으로 가지고 있는 요소가 무엇이 있을까? 기본적으론 배경색, 내비게이션 바를 꼽을 수 있을 것이다.근데 여기에서 이제 내비게이션 바는 제작을 완료했으니 배경색을 다 적용해 주면 된다.허나 화면 하나하나 마다 배경색을 일일이 적용시키는 것은 상당히 비효율 적일 것이다. 그러므로 공통적으로 사용하는 기능이나 레이아웃을 묶어둔 기본 뼈대 클래스를 제작해 줄 것이다. 맨 처음 프로젝트 구조화를 했을 때 트리를 아래와 같이 만들어 놨었다.lib/ ├─ constant/ ├─ controllers/ ├─ screens/ │ ├─ components/ │ ├─ widgets/ └─ main.dart 여기에서 이제 widgets/안에 파일을 만들면 된다.Flutter에서 화면의 배.. 2025. 10. 24. Clock_App / 공통 사항 추가 디자인 위의 화면과 내가 만들어 놓은 프레임들에서 어디가 차이가 날까? 일단 나는 가장 먼저 배경색이 문제라고 생각했다.그래서 Styles로 만들어 놓은 kBackground를 사용해서 배경 색을 채워줬다.만들어놓은 Style은 이렇게 삽입하면 된다.그 다음은 또 뭐가 있을까? 내 눈에 띈 것은 스톱워치, 타이머 스크린에 있는 앱바였다. 근데 좀 위로 패딩이 많이 먹여져 있는 것 같아서 기본 앱바는 아니고 한 위로 패딩이 32정도 먹여져 있는 것 같았다. 그러므로 앱바 프레임은 88로 해줬다. 아이콘을 가운데에 배치되게 말이다. 2025. 10. 24. Clock_App / 색상 정의하기 사실 이전 글에서 했어야 했는데 깜빡하고 넘어가 버렸다. 디자인을 하려면 가장 필수로 있어야 하는 것이 당연지사 하게도 색, 컬러일 것이다.Flutter 내부에서 컬러를 어떻게 사용하는지 생각해 보자.그렇다 Color 위젯을 사용하여 16 진수 색상 코드로 Color(0xFF121212) 이런 식으로 색을 정의하거나 혹은 Colors.black 이런 식으로 색을 가져오게 될 것이다. 그렇다면 내가 고른 색을 사용하려면 내 프로젝트 내부에서 모든 컬러를 사용하는 부분에서 16진수로 길게 표현해야 할까? 답은 당연하게도 NO다. Flutter에서는 다른 언어들과 마찬가지로 어떠한 컬러를 선언한 후에 그것을 상수로써 사용할 수 있다.그럼 그 컬러 상수들을 어떤 파일에다 놓을까?이미 내가 만들어 놓았다. 맨 처.. 2025. 10. 24. Clock_App / bottomNavigationBar에TabBar를 사용하기 원래 디자인을 끝낸 다음에 개발에 착수하는 것이 맞지만 그냥 개발하고 싶을 때 개발하고 디자인하고 싶을 때 디자인 할 것이기 때문에 Figma에서 만든 탭바를 구현해 줄 것이다.이것들을 구현해 줄 것이다. 파일 이름은 MainTab으로 할 것인데 탭 동작을 관리하는 파일이므로 이렇게 명명해 줬다.원래 이제 바텀 내비게이션으로 구현할 땐 Scaffold의 body 파라미터에는 IndexedStack같은 위젯을 배치시켜 스크린들을 관리시키고 bottomnavigationBar같은 파라미터에는 BottomnavigationBar 같은 위젯을 배치시켜 만들게 될 것이다.또 IndexedStack과 BottomnavigationBar 위젯을 사용하기 때문에 인덱스를 관리할 currentIndex와 같은 인스턴스.. 2025. 10. 8. Clock_App / 프로젝트 구조화 프로젝트를 생성해서 가장 먼저 해야 하는 일이 무엇일까? 나는 무엇보다 구조화를 먼저 하는 것 같다.그리고 그 구조화한 트리는 아래와 같다. lib/ ├─ constant/ ├─ controllers/ ├─ screens/ │ ├─ components/ │ ├─ widgets/ └─ main.dart 가장 먼저 색깔 같은 상수를 넣은 파일들이 위치될 constant 폴더, UI 부분을 표시할 screens 폴더, 그리고 UI 부분을 제어하는 역할을 해줄 controllers 폴더, 그 외에 UI에서 사용될 components와 widgets 폴더. 이렇게 보통 만들어 놓는 것 같다.widgets/은 재사용성이 높고, 앱 어디서나 쓸 수 있는 공통 UI 위젯들을 모아두는 폴더이고, compon.. 2025. 10. 7. Clock_App / 내비게이션 바 디자인하기 시계 앱을 따라 구현한 다곤 했지만 조금은 내 입맛대로 조미료 정도는 바꿀 생각이다.즉 디자인을 해야 한다는 건데 그러기 위해선 당연하게도 Figma 같은 툴로 제작을 해야 할 것이다.가장 먼저 내 폰에서 시계 앱 화면을 캡처해서 가져와봤다. 이제 여기에서 가장 먼저 해야 할 것은 각 화면에 모두 들어있는, 쉽게 말해 공통 사항인 내비게이션 바를 디자인 할 것이다.그럼 이 내비게이션 바들을 쌩으로 만드느냐? 그것도 아니다. 나는 기본적으로 Flutter에서 제공되는 기본 위젯들을 위주로 사용할 것이기에 Material 3 Design을 따르게 제작할 것이다.그리고 Figma에는 쉽게 형식을 따를 수 있도록 Material 3 Design Kit를 제공해주고 있다.위의 시계 앱 내부 캡처를 봐보면 알람, .. 2025. 10. 7. Clock_App / 프로젝트 개요 문득 내가 사용하고 있는 앱들을 따라 만들고 싶다! 라는 생각이 들었다.그런 경우가 몇개월 마다 가끔씩 찾아왔는데 이번엔 한번 제작하는 과정을 블로그로 남겨보려 한다. 이름에서 알 수 있듯이 내가 따라 만들어볼 앱은 갤럭시의 기본 앱 중에 하나인 시계 앱이다. 이 시계 앱에는 기능이 크게 4가지로 나뉘어 있는데 이는 아래와 같다.알람세계시각스톱워치타이머내가 이번에 이 앱을 따라 만들어 보려는 이유는 생각보다 구현이 간단해 보이면서도 알고 보면 상당히 골치 아픈 기능들이 많다는 것이다.일단 기본적으로 세계시각정도는 그럭저럭 스스로도 만들 수 있을 것이다.하지만 다른 기능으로 가면 상당히 귀찮은게 많은데 알람을 설정하면 폰이 꺼져있어도 알람이 울리며 스톱워치, 타이머 얘네들은 앱을 다가도 PIP 모드처럼 화.. 2025. 10. 7. Android Studio / AVD에 내비게이션 바 추가하기 (표시, 뒤로가기 버튼, 하단 바,가상 디바이스, API, Android Virtual Device, Navigation Bar) 우리는 안드로이드 스튜디오에서 흔히 개발을 할 때 AVD(Android Virtual Device)를 사용하게 된다.그런데 여기에 사소한 문제가 하나 있다. 바로 API 레벨에 따라 표시되는 UI가 다르다는 것이다.API 29 (Android 10.0)API 34 (Android 14.0)바로 확연한 차이를 알 수 있는데 무려 API 34 부분에는 내비게이션 바가 존재하지 않는다.그 이유로는 API 30(Android 11)부터는 디바이스의 기본값이 '제스처 내비게이션'으로 바뀌어서 하단 내비게이션은 사라지고 직접 동작해서 뒤로 가게끔 바뀌었기 때문이다. 그렇다면 어떻게 API 30 이상의 디바이스에서 내비게이션 바를 사용할 수 있을까? 답은 간단하다.그냥 바로 터미널에 아래의 명령어를 입력해 주면 된다.. 2025. 10. 6. Flutter[플러터] / flutter_slidable 패키지 사용법 (스와이프, 슬라이더, ListTile, 리스트 타일, Dismissible, SlidableAction) flutter_slidable (Flutter Widget of the Week) package:flutter_slidable방향성 있는 슬라이드 동작과 해제가 가능한 슬라이드 목록 항목에 대한 Flutter 구현입니다.https://youtu.be/QFcFEpFmNJ8 리스트 타일이 나열되어 있고 그중에서 자신이 원하는 아이템을 선택하고 그 화면에서 그 아이템에 대한 어떠한 동작을 결정하게 하려면 어떠한 방식이 가장 좋을까? 가장 좋은 방식 중 하나로는 그 아이템을 드래그, 슬라이드 동작을 진행하여 몇 가지 작업을 보여주는 것일 것이다. 이러한 동작을 쉽게 구현할 수 있게 도와주는 위젯이 바로 이번에 알아볼 package:flutter_slidable이다.이 flutter_slidable 패키지는 슬라이드 가능한 리스트 항목(Slidable list items)을 만들기 위한 매우 .. 2025. 8. 14. Flutter[플러터] / animations 패키지 사용법 (화면 전환 효과, 애니메이션, 페이드, OpenContainer, SharedAxisTransition, FadeThroughTransition) animations (Flutter Widget of the Week) package:animations이 패키지에는 일반적으로 원하는 효과를 위한 미리 제작된 애니메이션이 포함되어 있습니다.https://youtu.be/HHzAJdlEj1c앱에서 다른 화면으로 넘어갈 때 우리는 어떠한 전환 효과를 넣어 주는가? Hero 위젯을 사용하여 특정한 위젯을 이동시키는 느낌을 줄 수도 있고 혹은 라우터 동작하는 부분을 FadeTransition으로 감싸서 페이드 효과를 먹여줄 수도 있을 것이다. 하지만 이러한 위젯들을 사용하여 만든 전환 효과는 너무 뻔하고 재미가 없는 경우가 대부분이다. 하지만 이 package:animations를 사용하면 Material motion 기반의 고급 전환 효과를 손쉽게 사용할 수 있다. 일단 사용하기 위해선 먼저 프로젝트의 pubspec.y.. 2025. 7. 22. Flutter[플러터] / PhysicalModel을 사용하여 간단하게 위젯에 그림자 추가하기 (쉐도우, BoxShadow, elevation, 고도, 계층, 입체감) PhysicalModel (Flutter Widget of the Week) PhysicalModel class자식 요소를 모양에 고정하는 물리적 계층을 나타내는 위젯입니다.https://youtu.be/XgUOSS30OQk예제 코드 우리가 UI를 구성할 때 위젯에 입체감을 줘야 하는 일이 생길 수 있다. 이런 입체감을 가장 쉽게 주는 방법 중 하나는 그림자(DropShadow)를 주는 것인데 이러한 그림자를 쉽게 줄 수 있도록 도와주는 위젯이 바로 PhysicalModel 위젯이다.이 PhysicalModel 위젯은 시각적으로 그림자와 입체감을 주기 위해 사용하는 위젯이다. Material 위젯처럼 elevation, shape, color 그리고 clip behavior 등의 속성을 활용할 수 있지만, PhysicalModel은 더 낮은 수준에서 물리적인 형태를 직접 제어할 .. 2025. 7. 21. Flutter[플러터] / ImageFiltered를 사용하여 이미지에 효과 및 필터 적용 시키기 (BackdropFillter, 흐리게, 블러, 모자이크 처리, 변형, ImageFilter) ImageFiltered (Flutter Widget of the Week) ImageFiltered class자식에 ImageFilter를 적용합니다.이미지 필터는 항상 자식 위젯에 필터 연산을 적용합니다. 이는 해당 필터가 개념적으로 "no-op"인 경우(예: 반경이 0인 ImageFilter.blur 또는 단위행렬을 갖는 ImageFilter.matrix)에도 마찬가지입니다. ImageFiltered.enabled를 로 설정하면 false이미지 필터를 비활성화하는 데 더 효율적입니다.https://youtu.be/7Lftorq4i2o 공식 문서 코드 우리가 이미지를 사용할 때 그 이미지에 블러를 먹여 모자이크 처리를 하고나 다른 효과를 줘야 할 때가 있다. 이럴 때 어떻게 해야 할까? 뭐 다른 디자인 프로그램에서 이미지에 효과를 다 줄다음 그것을 사용해도 되겠지만 여기 I.. 2025. 7. 20. Flutter[플러터] / device_info_plus 패키지 사용법 (device_info, 디바이스 정보, 장치, 유연성, 플랫폼, 안드로이드, iOS, 웹, 환경, 실행 정보) device_info_plus (Flutter Package of the Week) package:device_info_plusFlutter 애플리케이션 내에서 현재 장치 정보를 가져옵니다.https://youtu.be/8T3g6HU5Odo앱을 제작할 때 실행되는 디바이스에 맞춰 UI 크기를 조절해야 할 때가 있다. 또한 안드로이드에서는 머테리얼 디자인을 사용한 UI를 보여주고 iOS에서는 쿠퍼티노 디자인에 맞춰 보여주려고 할 수 있다. 그렇다면 이러한 UI를 제작하기 위해선 가장 먼저 무엇이 필요할까? 바로 그 앱이 실행되는 디바이스의 정보가 필요하다. 앱이 안드로이드에서 실행되는지 iOS에서 실행되는지에 대한 정보가 필요한데 그러한 정보를 쉽게 얻을 수 있게 만들어주는 패키지가 바로 package:device_info_plus이다.이 device_info_plus 패키지는 애플리케이.. 2025. 7. 19. 이전 1 2 3 4 ··· 9 다음 반응형
